diff --git a/.changelog/1523.trivial.md b/.changelog/1523.trivial.md new file mode 100644 index 000000000..52211f794 --- /dev/null +++ b/.changelog/1523.trivial.md @@ -0,0 +1 @@ +Use runtimes tables to render Consensus tx lists diff --git a/src/app/components/Tokens/TokenTransfers.tsx b/src/app/components/Tokens/TokenTransfers.tsx index f0d7471eb..9d93a6681 100644 --- a/src/app/components/Tokens/TokenTransfers.tsx +++ b/src/app/components/Tokens/TokenTransfers.tsx @@ -1,17 +1,14 @@ import { FC } from 'react' -import { styled } from '@mui/material/styles' import { Trans, useTranslation } from 'react-i18next' import Box from '@mui/material/Box' import { Table, TableCellAlign, TableColProps } from '../Table' import { EvmTokenType, RuntimeEvent } from '../../../oasis-nexus/api' -import { COLORS } from '../../../styles/theme/colors' import { TablePaginationProps } from '../Table/TablePagination' import { BlockLink } from '../Blocks/BlockLink' import { AccountLink } from '../Account/AccountLink' import { trimLongString } from '../../utils/trimLongString' import Typography from '@mui/material/Typography' import { TransactionLink } from '../Transactions/TransactionLink' -import ArrowForwardIcon from '@mui/icons-material/ArrowForward' import { TokenTransferIcon } from './TokenTransferIcon' import { RoundedBalance } from '../RoundedBalance' import { getEthAccountAddressFromBase64 } from '../../utils/helpers' @@ -21,20 +18,7 @@ import { TokenTypeTag } from './TokenList' import { parseEvmEvent } from '../../utils/parseEvmEvent' import { Age } from '../Age' import { fromBaseUnits } from '../../utils/number-utils' - -const iconSize = '28px' -const StyledCircle = styled(Box)(({ theme }) => ({ - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - width: iconSize, - height: iconSize, - color: COLORS.eucalyptus, - backgroundColor: COLORS.lightGreen, - borderRadius: iconSize, - marginLeft: theme.spacing(3), - marginRight: `-${theme.spacing(4)}`, -})) +import { TransferIcon } from '../TransferIcon' type TableRuntimeEvent = RuntimeEvent & { markAsNew?: boolean @@ -184,9 +168,7 @@ export const TokenTransfers: FC = ({ )} - - - + ), }, diff --git a/src/app/components/Transactions/ConsensusAmount.tsx b/src/app/components/Transactions/ConsensusAmount.tsx new file mode 100644 index 000000000..606e3156e --- /dev/null +++ b/src/app/components/Transactions/ConsensusAmount.tsx @@ -0,0 +1,22 @@ +import { FC } from 'react' +import { useTranslation } from 'react-i18next' +import { Transaction } from '../../../oasis-nexus/api' +import { RoundedBalance } from '../RoundedBalance' + +type ConsensusAmountProps = { + transaction: Transaction +} + +export const ConsensusAmount: FC = ({ transaction }) => { + const { t } = useTranslation() + + if (transaction?.amount) { + return + } + + if (transaction?.body?.shares) { + return + } + + return null +} diff --git a/src/app/components/Transactions/ConsensusTransactionDetails.tsx b/src/app/components/Transactions/ConsensusTransactionDetails.tsx index e43d5ce57..52c58fb4d 100644 --- a/src/app/components/Transactions/ConsensusTransactionDetails.tsx +++ b/src/app/components/Transactions/ConsensusTransactionDetails.tsx @@ -20,6 +20,7 @@ export const ConsensusTransactionDetails: FC = return {details} } +// TODO: validate when new designs are ready and use in details column const getConsensusTransactionDetails = (t: TFunction, transaction: Transaction, ownAddress?: string) => { const scope = { layer: transaction.layer, network: transaction.network } diff --git a/src/app/components/Transactions/ConsensusTransactions.tsx b/src/app/components/Transactions/ConsensusTransactions.tsx index e86bc54bf..334ba3c8b 100644 --- a/src/app/components/Transactions/ConsensusTransactions.tsx +++ b/src/app/components/Transactions/ConsensusTransactions.tsx @@ -1,5 +1,6 @@ import { FC } from 'react' import { useTranslation } from 'react-i18next' +import Box from '@mui/material/Box' import { Transaction } from '../../../oasis-nexus/api' import { Table, TableCellAlign, TableColProps } from '../../components/Table' import { RoundedBalance } from '../../components/RoundedBalance' @@ -8,7 +9,10 @@ import { StatusIcon } from '../StatusIcon' import { Age } from '../Age' import { TransactionLink } from './TransactionLink' import { ConsensusTransactionMethod } from '../ConsensusTransactionMethod' -import { ConsensusTransactionDetails } from './ConsensusTransactionDetails' +import { BlockLink } from '../Blocks/BlockLink' +import { AccountLink } from '../Account/AccountLink' +import { ConsensusAmount } from './ConsensusAmount' +import { TransferIcon } from '../TransferIcon' type TableConsensusTransaction = Transaction & { markAsNew?: boolean @@ -26,6 +30,7 @@ type ConsensusTransactionsProps = { isLoading: boolean limit: number pagination: false | TablePaginationProps + verbose?: boolean } export const ConsensusTransactions: FC = ({ @@ -34,16 +39,24 @@ export const ConsensusTransactions: FC = ({ pagination, transactions, ownAddress, + verbose = true, }) => { const { t } = useTranslation() const tableColumns: TableColProps[] = [ { key: 'status', content: t('common.status') }, { key: 'hash', content: t('common.hash') }, - { key: 'age', content: t('common.age') }, + { key: 'block', content: t('common.block') }, + { key: 'age', content: t('common.age'), align: TableCellAlign.Right }, { key: 'type', content: t('common.type') }, - { key: 'details', content: t('common.details') }, - { align: TableCellAlign.Right, key: 'value', content: t('common.amount') }, + { key: 'from', content: t('common.from'), width: '150px' }, + ...(verbose + ? [ + { key: 'to', content: t('common.to'), width: '150px' }, + { key: 'value', align: TableCellAlign.Right, content: t('common.amount'), width: '250px' }, + ] + : []), + { key: 'txnFee', content: t('common.fee'), align: TableCellAlign.Right, width: '250px' }, ] const tableRows = transactions?.map(transaction => { @@ -59,27 +72,64 @@ export const ConsensusTransactions: FC = ({ key: 'hash', }, { + content: , + key: 'round', + }, + { + align: TableCellAlign.Right, content: , key: 'timestamp', }, { content: , - key: 'method', - }, - - { - content: , - key: 'details', + key: 'type', }, { align: TableCellAlign.Right, content: ( - + + + {verbose && transaction.to && } + ), - key: 'amount', + key: 'from', + }, + ...(verbose + ? [ + { + content: transaction.to ? ( + + ) : null, + key: 'to', + }, + { + align: TableCellAlign.Right, + content: , + key: 'value', + }, + ] + : []), + { + align: TableCellAlign.Right, + content: , + key: 'fee_amount', }, ], highlight: transaction.markAsNew, diff --git a/src/app/components/Transactions/RuntimeTransactions.tsx b/src/app/components/Transactions/RuntimeTransactions.tsx index 362bb30b8..04bbe9067 100644 --- a/src/app/components/Transactions/RuntimeTransactions.tsx +++ b/src/app/components/Transactions/RuntimeTransactions.tsx @@ -1,8 +1,6 @@ import { FC } from 'react' -import { styled } from '@mui/material/styles' import { useTranslation } from 'react-i18next' import Box from '@mui/material/Box' -import ArrowForwardIcon from '@mui/icons-material/ArrowForward' import LockIcon from '@mui/icons-material/Lock' import { Table, TableCellAlign, TableColProps } from '../../components/Table' import { StatusIcon } from '../StatusIcon' @@ -17,20 +15,7 @@ import { TransactionLink } from './TransactionLink' import { doesAnyOfTheseLayersSupportEncryptedTransactions } from '../../../types/layers' import { TransactionEncryptionStatus } from '../TransactionEncryptionStatus' import { Age } from '../Age' - -const iconSize = '28px' -const StyledCircle = styled(Box)(({ theme }) => ({ - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - width: iconSize, - height: iconSize, - color: COLORS.eucalyptus, - backgroundColor: COLORS.lightGreen, - borderRadius: iconSize, - marginLeft: theme.spacing(3), - marginRight: `-${theme.spacing(4)}`, -})) +import { TransferIcon } from '../TransferIcon' type TableRuntimeTransaction = RuntimeTransaction & { markAsNew?: boolean @@ -141,11 +126,7 @@ export const RuntimeTransactions: FC = ({ address={transaction.sender_0_eth || transaction.sender_0} alwaysTrim /> - {targetAddress && ( - - - - )} + {targetAddress && } ), key: 'from', diff --git a/src/app/components/TransferIcon/index.tsx b/src/app/components/TransferIcon/index.tsx new file mode 100644 index 000000000..e54a68461 --- /dev/null +++ b/src/app/components/TransferIcon/index.tsx @@ -0,0 +1,27 @@ +import { FC } from 'react' +import Box from '@mui/material/Box' +import { styled } from '@mui/material/styles' +import ArrowForwardIcon from '@mui/icons-material/ArrowForward' +import { COLORS } from '../../../styles/theme/colors' + +const iconSize = '28px' +export const StyledCircle = styled(Box)(({ theme }) => ({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: iconSize, + height: iconSize, + color: COLORS.eucalyptus, + backgroundColor: COLORS.lightGreen, + borderRadius: iconSize, + marginLeft: theme.spacing(3), + marginRight: `-${theme.spacing(4)}`, +})) + +export const TransferIcon: FC = () => { + return ( + + + + ) +} diff --git a/src/app/pages/ConsensusDashboardPage/LatestConsensusTransactions.tsx b/src/app/pages/ConsensusDashboardPage/LatestConsensusTransactions.tsx index 7e6265f37..f9bbf5bcc 100644 --- a/src/app/pages/ConsensusDashboardPage/LatestConsensusTransactions.tsx +++ b/src/app/pages/ConsensusDashboardPage/LatestConsensusTransactions.tsx @@ -43,6 +43,7 @@ export const LatestConsensusTransactions: FC<{ scope: SearchScope }> = ({ scope isLoading={transactionsQuery.isLoading} limit={limit} pagination={false} + verbose={false} /> diff --git a/src/app/pages/ConsensusTransactionsPage/index.tsx b/src/app/pages/ConsensusTransactionsPage/index.tsx index 0741ea4e0..1dbcb5148 100644 --- a/src/app/pages/ConsensusTransactionsPage/index.tsx +++ b/src/app/pages/ConsensusTransactionsPage/index.tsx @@ -92,6 +92,7 @@ export const ConsensusTransactionsPage: FC = () => { isTotalCountClipped: data?.data.is_total_count_clipped, rowsPerPage: limit, }} + verbose={false} /> )}