@xyo-network/react-chain-blockchain 1.3.6 → 1.3.8

package/dist/types/components/block/table/cell/BlockNumber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockNumber.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/cell/BlockNumber.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,MAAM,WAAW,yBAA0B,SAAQ,mBAAmB;CAAG;AAEzE,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAqBpE,CAAA"}
+{"version":3,"file":"BlockNumber.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/cell/BlockNumber.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,MAAM,WAAW,yBAA0B,SAAQ,mBAAmB;CAAG;AAEzE,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAsBpE,CAAA"}

package/dist/types/components/block/table/cell/BlockNumberChip.d.ts

@@ -0,0 +1,7 @@
+import type { ChipProps } from '@mui/material';
+import React from 'react';
+export interface BlockNumberChipProps extends ChipProps {
+    blockNumber?: number;
+}
+export declare const BlockNumberChip: React.FC<BlockNumberChipProps>;
+//# sourceMappingURL=BlockNumberChip.d.ts.map

package/dist/types/components/block/table/cell/BlockNumberChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockNumberChip.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/cell/BlockNumberChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAE9C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAE1D,CAAA"}

package/dist/types/components/block/table/cell/PayloadCounts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PayloadCounts.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/cell/PayloadCounts.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,MAAM,WAAW,gCAAiC,SAAQ,mBAAmB;CAAG;AAEhF,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,IAAI,CAAA;IACX,eAAe,EAAE,MAAM,CAAA;IACvB,cAAc,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,gCAAgC,CA6BlF,CAAA"}
+{"version":3,"file":"PayloadCounts.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/cell/PayloadCounts.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,MAAM,WAAW,gCAAiC,SAAQ,mBAAmB;CAAG;AAEhF,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,IAAI,CAAA;IACX,eAAe,EAAE,MAAM,CAAA;IACvB,cAAc,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,gCAAgC,CAgDlF,CAAA"}

package/dist/types/components/block/table/cell/Producer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Producer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/cell/Producer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAGpE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,MAAM,WAAW,sBAAuB,SAAQ,mBAAmB;IACjE,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,iBAAiB,CAAC,EAAE,sBAAsB,CAAA;CAC3C;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmBnE,CAAA"}
+{"version":3,"file":"Producer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/cell/Producer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAGpE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,MAAM,WAAW,sBAAuB,SAAQ,mBAAmB;IACjE,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,iBAAiB,CAAC,EAAE,sBAAsB,CAAA;CAC3C;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiBnE,CAAA"}

package/dist/types/components/block/table/cell/TransactionCount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionCount.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/cell/TransactionCount.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,MAAM,WAAW,mCAAoC,SAAQ,mBAAmB;CAAG;AAEnF,MAAM,WAAW,8BAA8B;IAC7C,KAAK,EAAE,IAAI,CAAA;IACX,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EAAE,CAAC,mCAAmC,CA4BxF,CAAA"}
+{"version":3,"file":"TransactionCount.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/cell/TransactionCount.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,KAAkB,MAAM,OAAO,CAAA;AAKtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,MAAM,WAAW,mCAAoC,SAAQ,mBAAmB;CAAG;AAEnF,MAAM,WAAW,8BAA8B;IAC7C,KAAK,EAAE,IAAI,CAAA;IACX,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EAAE,CAAC,mCAAmC,CAyCxF,CAAA"}

package/dist/types/components/block/table/row/TableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/row/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAOrE,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB,EAAE,aAAa;IACjF,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAgBhE,CAAA"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../../../src/components/block/table/row/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAGlD,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAOrE,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB,EAAE,aAAa;IACjF,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAuBhE,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-blockchain",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "description": "XYO Layer One React SDK Blockchain",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -43,33 +43,34 @@
     "@xylabs/exists": "^4.8.7",
     "@xylabs/hex": "^4.8.7",
     "@xylabs/promise": "^4.8.7",
-    "@xylabs/react-animation": "^6.2.10",
-    "@xylabs/react-error": "^6.2.10",
-    "@xylabs/react-flexbox": "^6.2.10",
-    "@xylabs/react-identicon": "^6.2.10",
-    "@xylabs/react-promise": "^6.2.10",
-    "@xylabs/react-quick-tip-button": "^6.2.10",
-    "@xyo-network/account": "^3.13.0",
-    "@xyo-network/api-models": "^3.13.0",
-    "@xyo-network/archivist-model": "^3.13.0",
-    "@xyo-network/boundwitness-builder": "^3.13.0",
-    "@xyo-network/boundwitness-model": "^3.13.0",
-    "@xyo-network/bridge-http": "^3.13.0",
-    "@xyo-network/chain-ethereum": "^1.3.6",
-    "@xyo-network/chain-protocol": "^1.3.6",
-    "@xyo-network/chain-services": "^1.3.6",
-    "@xyo-network/module-model": "^3.13.0",
-    "@xyo-network/payload-builder": "^3.13.0",
-    "@xyo-network/payload-model": "^3.13.0",
-    "@xyo-network/react-boundwitness-plugin": "^5.2.3",
-    "@xyo-network/react-chain-blockies": "^1.3.6",
-    "@xyo-network/react-event": "^5.2.3",
-    "@xyo-network/react-payload-raw-info": "^5.2.3",
-    "@xyo-network/react-payload-table": "^5.2.3",
-    "@xyo-network/react-shared": "^5.2.3",
-    "@xyo-network/react-table": "^5.2.3",
-    "@xyo-network/xl1-model": "^1.3.6",
-    "@xyo-network/xl1-protocol": "^1.3.6"
+    "@xylabs/react-animation": "^6.2.11",
+    "@xylabs/react-error": "^6.2.11",
+    "@xylabs/react-flexbox": "^6.2.11",
+    "@xylabs/react-identicon": "^6.2.11",
+    "@xylabs/react-promise": "^6.2.11",
+    "@xylabs/react-quick-tip-button": "^6.2.11",
+    "@xylabs/react-theme": "^6.2.11",
+    "@xyo-network/account": "^3.14.13",
+    "@xyo-network/api-models": "^3.14.13",
+    "@xyo-network/archivist-model": "^3.14.13",
+    "@xyo-network/boundwitness-builder": "^3.14.13",
+    "@xyo-network/boundwitness-model": "^3.14.13",
+    "@xyo-network/bridge-http": "^3.14.13",
+    "@xyo-network/chain-ethereum": "^1.3.8",
+    "@xyo-network/chain-protocol": "^1.3.8",
+    "@xyo-network/chain-services": "^1.3.8",
+    "@xyo-network/module-model": "^3.14.13",
+    "@xyo-network/payload-builder": "^3.14.13",
+    "@xyo-network/payload-model": "^3.14.13",
+    "@xyo-network/react-boundwitness-plugin": "^5.2.5",
+    "@xyo-network/react-chain-blockies": "^1.3.8",
+    "@xyo-network/react-event": "^5.2.5",
+    "@xyo-network/react-payload-raw-info": "^5.2.5",
+    "@xyo-network/react-payload-table": "^5.2.5",
+    "@xyo-network/react-shared": "^5.2.5",
+    "@xyo-network/react-table": "^5.2.5",
+    "@xyo-network/xl1-model": "^1.3.8",
+    "@xyo-network/xl1-protocol": "^1.3.8"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
@@ -82,8 +83,9 @@
     "@xylabs/hex": "^4.8.7",
     "@xylabs/ts-scripts-yarn3": "^6.3.5",
     "@xylabs/tsconfig-react": "^6.3.5",
-    "@xyo-network/archivist-memory": "^3.13.0",
-    "@xyo-network/chain-utils": "^1.3.6",
+    "@xyo-network/archivist-memory": "^3.14.13",
+    "@xyo-network/chain-utils": "^1.3.8",
+    "knip": "^5.50.5",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.5.2",

package/src/components/block/table/cell/BlockNumber.tsx

@@ -3,6 +3,7 @@ import {
 } from '@mui/material'
 import React from 'react'
 
+import { BlockNumberChip } from './BlockNumberChip.tsx'
 import { useLinkedBlockItem } from './hooks/index.ts'
 import type { BlockTableCellProps } from './lib/index.ts'
 
@@ -11,20 +12,21 @@ export interface BlockNumberTableCellProps extends BlockTableCellProps {}
 export const BlockNumberTableCell: React.FC<BlockNumberTableCellProps> = ({
   block, linked, ...props
 }) => {
-  const [ref, handleClick] = useLinkedBlockItem('block-number', block?.[0].block.toString())
-
-  const blockNumberBigInt = block ? block[0].block.toString() : ''
+  const blockNumber = block?.[0].block
+  const [ref, handleClick] = useLinkedBlockItem('block-number', blockNumber?.toString())
 
   return (
     <TableCell ref={ref} {...props}>
-      <Tooltip title={`Block Number: ${blockNumberBigInt}`}>
+      <Tooltip title={`Block Number: ${blockNumber}`}>
         <span>
-          {linked && block
+          {linked && blockNumber !== undefined
             ? (
-                <Link title={block[0].block.toString()} onClick={handleClick} sx={{ cursor: 'pointer' }}>{block[0].block.toString()}</Link>
+                <Link title={blockNumber?.toString()} onClick={handleClick} sx={{ cursor: 'pointer' }}>
+                  <BlockNumberChip blockNumber={blockNumber} size="small" />
+                </Link>
               )
             : null}
-          {!linked && blockNumberBigInt}
+          {!linked && <BlockNumberChip blockNumber={blockNumber} size="small" />}
         </span>
       </Tooltip>
     </TableCell>

package/src/components/block/table/cell/BlockNumberChip.tsx

@@ -0,0 +1,11 @@
+import type { ChipProps } from '@mui/material'
+import { Chip } from '@mui/material'
+import React from 'react'
+
+export interface BlockNumberChipProps extends ChipProps {
+  blockNumber?: number
+}
+
+export const BlockNumberChip: React.FC<BlockNumberChipProps> = ({ blockNumber, ...props }) => {
+  return <Chip avatar={<></>} label={blockNumber} {...props} />
+}

package/src/components/block/table/cell/PayloadCounts.tsx

@@ -1,8 +1,12 @@
-import { Error } from '@mui/icons-material'
 import {
+  Error, Public, PublicOff,
+} from '@mui/icons-material'
+import {
+  Chip,
   Link, TableCell, Tooltip,
 } from '@mui/material'
 import type { Hash } from '@xylabs/hex'
+import { FlexRow } from '@xylabs/react-flexbox'
 import React from 'react'
 
 import { usePayloadCountsFromBlock } from '../../hooks/index.ts'
@@ -30,8 +34,6 @@ export const BlockPayloadCountsTableCell: React.FC<BlockPayloadCountsTableCellPr
     : undefined
   const [ref, handleClick] = useLinkedBlockItem('payload-counts', data)
 
-  const renderText = `${publicPayloads ?? '--'} / ${privatePayloads ?? '--'}`
-
   return (
     <TableCell ref={ref} {...props}>
       <span>
@@ -42,7 +44,28 @@ export const BlockPayloadCountsTableCell: React.FC<BlockPayloadCountsTableCellPr
               </Tooltip>
             )
           : null}
-        {linked ? <Link onClick={handleClick} sx={{ cursor: 'pointer' }}>{renderText}</Link> : renderText}
+        {linked
+          ? (
+              <Tooltip title={`Public Payloads: ${publicPayloads ?? '--'} Private Payloads: ${privatePayloads ?? '--'}`}>
+                <Link
+                  onClick={handleClick}
+                  sx={{
+                    cursor: 'pointer', display: 'inline-flex', gap: 0.5,
+                  }}
+                >
+                  <Chip avatar={<Public fontSize="small" />} label={publicPayloads ?? '--'} />
+                  <Chip avatar={<PublicOff fontSize="small" />} label={privatePayloads ?? '--'} />
+                </Link>
+              </Tooltip>
+            )
+          : (
+              <Tooltip title={`Public Payloads: ${publicPayloads ?? '--'} Private Payloads: ${privatePayloads ?? '--'}`}>
+                <FlexRow gap={0.5} justifyContent="left">
+                  <Chip avatar={<Public fontSize="small" />} label={publicPayloads ?? '--'} />
+                  <Chip avatar={<PublicOff fontSize="small" />} label={privatePayloads ?? '--'} />
+                </FlexRow>
+              </Tooltip>
+            )}
       </span>
     </TableCell>
   )

package/src/components/block/table/cell/Producer.tsx

@@ -1,5 +1,4 @@
 import { TableCell, Tooltip } from '@mui/material'
-import { FlexRow } from '@xylabs/react-flexbox'
 import React from 'react'
 
 import { FeatureNotAvailable } from '../../../FeatureNotAvailable.tsx'
@@ -24,9 +23,7 @@ export const BlockProducerTableCell: React.FC<BlockProducerTableCell> = ({
   return (
     <TableCell ref={ref} {...props}>
       <Tooltip title={`Block Producer: ${producer}`}>
-        <FlexRow sx={{ width: '100%' }}>
-          <BlockProducerChip sx={{ cursor: 'pointer' }} onClick={linked ? handleClick : () => setNotAvailable(true)} block={block} {...producerChipProps} />
-        </FlexRow>
+        <BlockProducerChip sx={{ cursor: 'pointer' }} onClick={linked ? handleClick : () => setNotAvailable(true)} block={block} {...producerChipProps} />
       </Tooltip>
       {(notAvailableDialog && notAvailable)
         ? <FeatureNotAvailable featureName="Producer Details" open={notAvailable} onClick={() => setNotAvailable(false)} />

package/src/components/block/table/cell/TransactionCount.tsx

@@ -3,9 +3,10 @@ import {
   Link, TableCell, Tooltip,
 } from '@mui/material'
 import type { Hash } from '@xylabs/hex'
-import React from 'react'
+import React, { useMemo } from 'react'
 
 import { useTxsFromBlock } from '../../../../hooks/useTxsFromBlock.ts'
+import { TransactionCountChip } from '../../../transactions/index.ts'
 import { useLinkedBlockItem } from './hooks/index.ts'
 import type { BlockTableCellProps } from './lib/index.ts'
 
@@ -20,6 +21,7 @@ export const BlockTransactionCountTableCell: React.FC<BlockTransactionCountTable
   block, linked, ...props
 }) => {
   const [transactions, error] = useTxsFromBlock(block)
+  const txHashes = useMemo(() => transactions?.map(([,hash]) => hash), [transactions])
 
   const data: BlockTransactionCountEventData | undefined = (block && transactions !== undefined)
     ? {
@@ -40,7 +42,19 @@ export const BlockTransactionCountTableCell: React.FC<BlockTransactionCountTable
               </Tooltip>
             )
           : null}
-        {linked ? <Link onClick={handleClick} sx={{ cursor: 'pointer' }}>{transactions?.length ?? '--'}</Link> : transactions?.length ?? '--'}
+        {linked
+          ? (
+              <Link onClick={handleClick} sx={{ cursor: 'pointer' }}>
+                <TransactionCountChip
+                  transactions={txHashes}
+                />
+              </Link>
+            )
+          : (
+              <TransactionCountChip
+                transactions={txHashes}
+              />
+            )}
       </span>
     </TableCell>
   )

package/src/components/block/table/head/TableHead.tsx

@@ -28,11 +28,11 @@ export const BlockchainTableHead: React.FC = () => {
   return (
     <TableHead>
       <TableRow>
+        <ToolTipTableCell align="left" title="The block number that is included in the block">Block</ToolTipTableCell>
         <ToolTipTableCell title="The hash of the block">Block Hash</ToolTipTableCell>
-        <ToolTipTableCell align="center" title="The block number that is included in the block">Block Number</ToolTipTableCell>
-        <ToolTipTableCell align="center" title="Count of transactions that are included in the block">Transactions</ToolTipTableCell>
-        <ToolTipTableCell align="center" title="Count of public and private payload counts for the block">Payloads</ToolTipTableCell>
-        <ToolTipTableCell align="center" title="The address of the block producer that produced the block">Block Producer</ToolTipTableCell>
+        <ToolTipTableCell align="left" title="The address of the block producer that produced the block">Block Producer</ToolTipTableCell>
+        <ToolTipTableCell align="left" title="Count of transactions that are included in the block">Transactions</ToolTipTableCell>
+        <ToolTipTableCell align="left" title="Count of public and private payload counts for the block">Payloads</ToolTipTableCell>
         <ToolTipTableCell align="center" title="The result of the local validation check for the block">Valid</ToolTipTableCell>
         <ToolTipTableCell align="center" title="Link to display the raw JSON of the block">JSON</ToolTipTableCell>
       </TableRow>

package/src/components/block/table/row/TableRow.tsx

@@ -1,5 +1,6 @@
 import type { TableRowProps } from '@mui/material'
-import { TableRow } from '@mui/material'
+import { TableRow, useTheme } from '@mui/material'
+import { alphaCss } from '@xylabs/react-theme'
 import React, { useMemo } from 'react'
 
 import type { BlockComponentProps } from '../../../../types/index.ts'
@@ -18,13 +19,20 @@ export const BlockChainTableRow: React.FC<BlockChainTableRowProps> = ({
 }) => {
   const linkedTableCellProps = useMemo(() => ({ block, linked }), [block, linked])
   const defaultTableCellProps = useMemo(() => ({ block }), [block])
+  const theme = useTheme()
+
   return (
-    <TableRow sx={{ overflowY: 'scroll', ...sx }} {...props}>
-      <BlockHashTableCell {...linkedTableCellProps} />
-      <BlockNumberTableCell align="center" {...linkedTableCellProps} />
-      <BlockTransactionCountTableCell align="center" {...linkedTableCellProps} />
-      <BlockPayloadCountsTableCell align="center" {...linkedTableCellProps} />
-      <BlockProducerTableCell {...linkedTableCellProps} />
+    <TableRow
+      sx={{
+        'overflowY': 'scroll', '&:hover': { backgroundColor: alphaCss(theme.vars.palette.secondary.light, 0.85) }, ...sx,
+      }}
+      {...props}
+    >
+      <BlockNumberTableCell align="left" {...linkedTableCellProps} />
+      <BlockHashTableCell align="left" {...linkedTableCellProps} />
+      <BlockProducerTableCell align="left" {...linkedTableCellProps} />
+      <BlockTransactionCountTableCell align="left" {...linkedTableCellProps} />
+      <BlockPayloadCountsTableCell align="left" {...linkedTableCellProps} />
       <BlockVerificationTableCell {...defaultTableCellProps} />
       <BlockJsonViewTableCell {...defaultTableCellProps} />
     </TableRow>

package/src/components/transactions/TransactionCountChip.tsx

@@ -1,4 +1,4 @@
-import { Difference } from '@mui/icons-material'
+import CompareArrowsIcon from '@mui/icons-material/CompareArrows'
 import type { ChipProps } from '@mui/material'
 import { Chip, Icon } from '@mui/material'
 import type { Hash } from '@xylabs/hex'
@@ -20,10 +20,10 @@ export const TransactionCountChip: React.FC<TransactionCountChipProps> = ({
     <Chip
       avatar={(
         <Icon>
-          <Difference />
+          <CompareArrowsIcon />
         </Icon>
       )}
-      label={`tx: ${label}`}
+      label={label}
       title={transactions ? `Block contains ${transactions.length} transactions` : undefined}
       sx={{
         display: 'inline-flex', alignItems: 'center', justifyContent: 'center', ...sx,