Use runtimes tables to render Consensus tx lists

.changelog/1523.trivial.md

@@ -0,0 +1 @@
+Use runtimes tables to render Consensus tx lists

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<TokenTransfersProps> = ({
                   <AccountLink scope={transfer} address={fromAddress} alwaysTrim />
                 )}
 
-                <StyledCircle>
-                  <ArrowForwardIcon fontSize="inherit" />
-                </StyledCircle>
+                <TransferIcon />
               </Box>
             ),
         },

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<ConsensusAmountProps> = ({ transaction }) => {
+  const { t } = useTranslation()
+
+  if (transaction?.amount) {
+    return <RoundedBalance value={transaction.amount} ticker={transaction.ticker} />
+  }
+
+  if (transaction?.body?.shares) {
+    return <RoundedBalance compactLargeNumbers value={transaction.body.shares} ticker={t('common.shares')} />
+  }
+
+  return null
+}

src/app/components/Transactions/ConsensusTransactionDetails.tsx

@@ -20,6 +20,7 @@ export const ConsensusTransactionDetails: FC<ConsensusTransactionDetailsProps> =
   return <Box sx={{ display: 'flex', flexWrap: 'no-wrap', gap: '20px' }}>{details}</Box>
 }
 
+// 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 }
 

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<ConsensusTransactionsProps> = ({
@@ -34,16 +39,24 @@ export const ConsensusTransactions: FC<ConsensusTransactionsProps> = ({
   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<ConsensusTransactionsProps> = ({
           key: 'hash',
         },
         {
+          content: <BlockLink scope={transaction} height={transaction.block} />,
+          key: 'round',
+        },
+        {
+          align: TableCellAlign.Right,
           content: <Age sinceTimestamp={transaction.timestamp} />,
           key: 'timestamp',
         },
         {
           content: <ConsensusTransactionMethod method={transaction.method} truncate />,
-          key: 'method',
-        },
-
-        {
-          content: <ConsensusTransactionDetails ownAddress={ownAddress} transaction={transaction} />,
-          key: 'details',
+          key: 'type',
         },
         {
           align: TableCellAlign.Right,
           content: (
-            <RoundedBalance
-              value={transaction.body?.amount || transaction.body?.amount_change}
-              ticker={transaction.ticker}
-            />
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                position: 'relative',
+                pr: 3,
+              }}
+            >
+              <AccountLink
+                labelOnly={!!ownAddress && transaction.sender === ownAddress}
+                scope={transaction}
+                address={transaction.sender}
+                alwaysTrim
+              />
+              {verbose && transaction.to && <TransferIcon />}
+            </Box>
           ),
-          key: 'amount',
+          key: 'from',
+        },
+        ...(verbose
+          ? [
+              {
+                content: transaction.to ? (
+                  <AccountLink
+                    labelOnly={!!ownAddress && transaction.to === ownAddress}
+                    scope={transaction}
+                    address={transaction.to}
+                    alwaysTrim
+                  />
+                ) : null,
+                key: 'to',
+              },
+              {
+                align: TableCellAlign.Right,
+                content: <ConsensusAmount transaction={transaction} />,
+                key: 'value',
+              },
+            ]
+          : []),
+        {
+          align: TableCellAlign.Right,
+          content: <RoundedBalance value={transaction.fee} ticker={transaction.ticker} />,
+          key: 'fee_amount',
         },
       ],
       highlight: transaction.markAsNew,

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<TransactionsProps> = ({
                       address={transaction.sender_0_eth || transaction.sender_0}
                       alwaysTrim
                     />
-                    {targetAddress && (
-                      <StyledCircle>
-                        <ArrowForwardIcon fontSize="inherit" />
-                      </StyledCircle>
-                    )}
+                    {targetAddress && <TransferIcon />}
                   </Box>
                 ),
                 key: 'from',

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 (
+    <StyledCircle>
+      <ArrowForwardIcon fontSize="inherit" />
+    </StyledCircle>
+  )
+}

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}
         />
       </CardContent>
     </Card>

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}
           />
         )}