Merge pull request #562 from oasisprotocol/csillag/clean-up-table-col…

…umn-react-node-support

Table column content: require key and support ReactNode content

.changelog/562.internal.md

@@ -0,0 +1 @@
+Table column content: support ReactNode besides string

src/app/components/Blocks/index.tsx

@@ -43,24 +43,25 @@ export const Blocks: FC<BlocksProps> = ({
   const { t } = useTranslation()
   const { isLaptop } = useScreenSize()
   const tableColumns: TableColProps[] = [
-    { content: t('common.fill') },
-    { content: t('common.height'), align: TableCellAlign.Right },
-    { content: t('common.age'), align: TableCellAlign.Right },
+    { key: 'fill', content: t('common.fill') },
+    { key: 'height', content: t('common.height'), align: TableCellAlign.Right },
+    { key: 'age', content: t('common.age'), align: TableCellAlign.Right },
     ...(type === BlocksTableType.Desktop || type === BlocksTableType.DesktopLite
       ? [
           {
+            key: 'transaction',
             content: isLaptop ? t('common.transactionAbbreviation') : t('common.transactions'),
             align: TableCellAlign.Right,
           },
         ]
       : []),
-    ...(type === BlocksTableType.Desktop ? [{ content: t('common.hash') }] : []),
-    { content: t('common.size'), align: TableCellAlign.Right },
+    ...(type === BlocksTableType.Desktop ? [{ key: 'hash', content: t('common.hash') }] : []),
+    { key: 'size', content: t('common.size'), align: TableCellAlign.Right },
     ...(type === BlocksTableType.Desktop
-      ? [{ content: t('common.gasUsed'), align: TableCellAlign.Right }]
+      ? [{ key: 'gasUsed', content: t('common.gasUsed'), align: TableCellAlign.Right }]
       : []),
     ...(type === BlocksTableType.Desktop
-      ? [{ content: t('common.gasLimit'), align: TableCellAlign.Right }]
+      ? [{ key: 'gasLimit', content: t('common.gasLimit'), align: TableCellAlign.Right }]
       : []),
   ]
 

src/app/components/Table/index.tsx

@@ -61,7 +61,8 @@ export type TableRowProps = {
 }
 
 export type TableColProps = {
-  content: string
+  key: string
+  content: ReactNode
   align?: TableCellAlign
   width?: string
 }
@@ -105,7 +106,7 @@ export const Table: FC<TableProps> = ({
             <TableRow>
               {columns.map((column, index) => (
                 <TableCell
-                  key={column.content}
+                  key={column.key}
                   align={column.align}
                   sx={{
                     width: column.width || 'auto',

src/app/components/Tokens/TokenList.tsx

@@ -17,15 +17,16 @@ export const TokenList = (props: TokensProps) => {
   const { isLoading, tokens, pagination, limit } = props
   const { t } = useTranslation()
   const tableColumns: TableColProps[] = [
-    { content: '' },
-    { content: t('common.name') },
-    { content: t('common.smartContract') },
+    { key: 'index', content: '' },
+    { key: 'name', content: t('common.name') },
+    { key: 'contract', content: t('common.smartContract') },
     {
+      key: 'holders',
       content: t('tokens.holdersCount'),
       align: TableCellAlign.Right,
     },
-    { content: t('tokens.supply'), align: TableCellAlign.Right },
-    { content: t('common.ticker'), align: TableCellAlign.Right },
+    { key: 'supply', content: t('tokens.supply'), align: TableCellAlign.Right },
+    { key: 'ticker', content: t('common.ticker'), align: TableCellAlign.Right },
   ]
 
   const tableRows = tokens?.map((token, index) => {

src/app/components/Transactions/index.tsx

@@ -4,7 +4,7 @@ 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 } from '../../components/Table'
+import { Table, TableCellAlign, TableColProps } from '../../components/Table'
 import { TransactionStatusIcon } from '../../components/TransactionStatusIcon'
 import { RuntimeTransactionIcon } from '../../components/RuntimeTransactionLabel'
 import { RoundedBalance } from '../../components/RoundedBalance'
@@ -67,21 +67,21 @@ export const Transactions: FC<TransactionsProps> = ({
   const canHaveEncryption = doesAnyOfTheseLayersSupportEncryptedTransactions(
     transactions?.map(tx => tx.layer),
   )
-  const tableColumns = [
-    { content: t('common.status') },
+  const tableColumns: TableColProps[] = [
+    { key: 'status', content: t('common.status') },
     ...(verbose && canHaveEncryption
-      ? [{ content: (<LockIcon htmlColor={COLORS.grayMedium} />) as unknown as string }]
-      : []), // The table does support widgets in the column headers, but the TS definition is unaware of that.
-    { content: t('common.hash') },
-    { content: t('common.block') },
-    { content: t('common.age'), align: TableCellAlign.Right },
+      ? [{ key: 'encrypted', content: <LockIcon htmlColor={COLORS.grayMedium} /> }]
+      : []),
+    { key: 'hash', content: t('common.hash') },
+    { key: 'block', content: t('common.block') },
+    { key: 'age', content: t('common.age'), align: TableCellAlign.Right },
     ...(verbose
       ? [
-          { content: t('common.type'), align: TableCellAlign.Center },
-          { content: t('common.from'), width: '150px' },
-          { content: t('common.to'), width: '150px' },
-          { content: t('common.txnFee'), align: TableCellAlign.Right, width: '250px' },
-          { align: TableCellAlign.Right, content: t('common.value'), width: '250px' },
+          { key: 'type', content: t('common.type'), align: TableCellAlign.Center },
+          { key: 'from', content: t('common.from'), width: '150px' },
+          { key: 'to', content: t('common.to'), width: '150px' },
+          { key: 'txnFee', content: t('common.txnFee'), align: TableCellAlign.Right, width: '250px' },
+          { key: 'value', align: TableCellAlign.Right, content: t('common.value'), width: '250px' },
         ]
       : []),
   ]

src/app/pages/AccountDetailsPage/TokensCard.tsx

@@ -7,7 +7,7 @@ import CardHeader from '@mui/material/CardHeader'
 import CardContent from '@mui/material/CardContent'
 import Typography from '@mui/material/Typography'
 import { CardEmptyState } from './CardEmptyState'
-import { Table, TableCellAlign } from '../../components/Table'
+import { Table, TableCellAlign, TableColProps } from '../../components/Table'
 import { CopyToClipboard } from '../../components/CopyToClipboard'
 import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE } from '../../config'
 import { EvmTokenType, Layer } from '../../../oasis-indexer/api'
@@ -29,11 +29,11 @@ export const TokensCard: FC<TokensCardProps> = ({ type }) => {
   const locationHash = useLocation().hash.replace('#', '')
   const tokenLabel = t(`account.${type}` as any)
   const tokenListLabel = t('account.tokensListTitle', { token: tokenLabel })
-  const tableColumns = [
-    { content: t('common.name') },
-    { content: t('common.smartContract') },
-    { align: TableCellAlign.Right, content: t('common.balance') },
-    { align: TableCellAlign.Right, content: t('common.ticker') },
+  const tableColumns: TableColProps[] = [
+    { key: 'name', content: t('common.name') },
+    { key: 'contract', content: t('common.smartContract') },
+    { key: 'balance', align: TableCellAlign.Right, content: t('common.balance') },
+    { key: 'ticker', align: TableCellAlign.Right, content: t('common.ticker') },
   ]
   const { layer } = useRequiredScopeParam()
   if (layer === Layer.consensus) {

src/stories/Table.stories.tsx

@@ -10,7 +10,10 @@ export default {
   decorators: [withRouter],
 } satisfies Meta<typeof Table>
 
-const columns: TableColProps[] = [{ content: 'Status' }, { content: 'Date', align: TableCellAlign.Right }]
+const columns: TableColProps[] = [
+  { key: 'status', content: 'Status' },
+  { key: 'date', content: 'Date', align: TableCellAlign.Right },
+]
 const data = [
   {
     id: '1',