@xyo-network/react-chain-blockchain 1.20.12 → 1.20.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-blockchain",
-  "version": "1.20.12",
+  "version": "1.20.14",
   "description": "XYO Layer One React SDK Blockchain",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -55,22 +55,22 @@
     "@xylabs/react-shared": "~7.1.17",
     "@xylabs/react-theme": "~7.1.17",
     "@xylabs/sdk-js": "~5.0.90",
-    "@xyo-network/boundwitness-model": "~5.3.17",
-    "@xyo-network/chain-analyze": "~1.20.12",
-    "@xyo-network/chain-protocol": "~1.20.12",
-    "@xyo-network/chain-wrappers": "~1.20.12",
+    "@xyo-network/boundwitness-model": "~5.3.20",
+    "@xyo-network/chain-analyze": "~1.20.14",
+    "@xyo-network/chain-protocol": "~1.20.14",
+    "@xyo-network/chain-wrappers": "~1.20.14",
     "@xyo-network/react-boundwitness-plugin": "~7.5.8",
-    "@xyo-network/react-chain-blockies": "~1.20.12",
-    "@xyo-network/react-chain-provider": "~1.20.12",
-    "@xyo-network/react-chain-shared": "~1.20.12",
+    "@xyo-network/react-chain-blockies": "~1.20.14",
+    "@xyo-network/react-chain-provider": "~1.20.14",
+    "@xyo-network/react-chain-shared": "~1.20.14",
     "@xyo-network/react-error": "~7.5.8",
     "@xyo-network/react-event": "~7.5.8",
     "@xyo-network/react-payload-raw-info": "~7.5.8",
     "@xyo-network/react-payload-table": "~7.5.8",
     "@xyo-network/react-shared": "~7.5.8",
     "@xyo-network/react-table": "~7.5.8",
-    "@xyo-network/sdk-js": "~5.3.17",
-    "@xyo-network/xl1-sdk": "~1.26.9"
+    "@xyo-network/sdk-js": "~5.3.20",
+    "@xyo-network/xl1-sdk": "~1.26.11"
   },
   "devDependencies": {
     "@emotion/react": "~11.14.0",
@@ -82,16 +82,16 @@
     "@types/react": "~19.2.14",
     "@xylabs/react-button": "~7.1.17",
     "@xylabs/sdk-js": "~5.0.90",
-    "@xylabs/ts-scripts-common": "~7.5.10",
-    "@xylabs/ts-scripts-yarn3": "~7.5.10",
-    "@xylabs/tsconfig": "~7.5.10",
-    "@xylabs/tsconfig-dom": "~7.5.10",
-    "@xylabs/tsconfig-react": "~7.5.10",
-    "@xyo-network/bridge-http": "~5.3.17",
-    "@xyo-network/react-chain-network": "~1.20.12",
-    "@xyo-network/sdk-js": "~5.3.17",
-    "@xyo-network/xl1-sdk": "~1.26.9",
-    "axios": "^1.14.0",
+    "@xylabs/ts-scripts-common": "~7.5.11",
+    "@xylabs/ts-scripts-yarn3": "~7.5.11",
+    "@xylabs/tsconfig": "~7.5.11",
+    "@xylabs/tsconfig-dom": "~7.5.11",
+    "@xylabs/tsconfig-react": "~7.5.11",
+    "@xyo-network/bridge-http": "~5.3.20",
+    "@xyo-network/react-chain-network": "~1.20.14",
+    "@xyo-network/sdk-js": "~5.3.20",
+    "@xyo-network/xl1-sdk": "~1.26.11",
+    "axios": "^1.13.6",
     "ethers": "^6.16.0",
     "react": "~19.2.4",
     "react-dom": "~19.2.4",

package/src/components/account/table/BalanceHistoryTableEx.stories.tsx

@@ -48,7 +48,7 @@ const TemplateLinked: StoryFn<typeof AccountBalanceHistoryTableEx> = (args) => {
     noun, verb, data,
   }))
 
-  const results = useFetchBalanceHistory(TEST_ADDRESS)
+  const results = useFetchBalanceHistory(TEST_ADDRESS_1)
   const [history, error, loading] = results
 
   return (

package/src/components/account/table/BalanceHistoryTableRow.stories.tsx

@@ -0,0 +1,52 @@
+import { Table, TableBody } from '@mui/material'
+import type { Meta, StoryFn } from '@storybook/react-vite'
+import type { Address, Hash } from '@xylabs/sdk-js'
+import type { AccountBalanceHistoryItemFormatted } from '@xyo-network/react-chain-provider'
+import type { AccountBalanceHistoryItem } from '@xyo-network/xl1-sdk'
+import React from 'react'
+
+import { BalanceHistoryTableRow } from './BalanceHistoryTableRow.tsx'
+
+const sampleRow: AccountBalanceHistoryItemFormatted = {
+  amount: 866_949_573_941_165_034_031n,
+  blockNumber: 652_126,
+  debug: undefined as unknown as AccountBalanceHistoryItem,
+  from: '626cfa5650444825a1633287a0b4bc8a55f54735' as Address,
+  key: 'a80ee574-1c52-46bc-a5df-bbd9b9b8082e',
+  timestamp: 1_769_423_309_664,
+  to: 'd50a55aa2f6c9416cf8ecc9ef4790260564a7ec7' as Address,
+  txHash: '123456789abcdef123456789abcdef123456789abcdef123456789abcdef1234' as Hash,
+  transferHash: '123456789abcdef123456789abcdef123456789abcdef123456789abcdef1234' as Hash,
+  type: 'receive',
+}
+
+export default {
+  title: 'AccountBalanceHistory/TableRow',
+  component: BalanceHistoryTableRow,
+} as Meta<typeof BalanceHistoryTableRow>
+
+const Template: StoryFn<typeof BalanceHistoryTableRow> = args => (
+  <Table>
+    <TableBody>
+      <BalanceHistoryTableRow {...args} />
+    </TableBody>
+  </Table>
+)
+
+const Default = Template.bind({})
+Default.args = { row: sampleRow }
+
+const WithLinked = Template.bind({})
+WithLinked.args = { row: sampleRow, linked: true }
+
+const WithNoTxHash = Template.bind({})
+WithNoTxHash.args = {
+  row: {
+    ...sampleRow,
+    txHash: undefined,
+  },
+}
+
+export {
+  Default, WithLinked, WithNoTxHash,
+}

package/src/components/account/table/BalanceHistoryTableRow.tsx

@@ -1,14 +1,21 @@
 import {
-  TableCell, TableRow, type TableRowProps,
+  TableCell,
+  type TableRowProps,
 } from '@mui/material'
-import type { JsonValue } from '@xylabs/sdk-js'
+import { isDefined, type JsonValue } from '@xylabs/sdk-js'
 import type { AccountBalanceHistoryItemFormatted } from '@xyo-network/react-chain-provider'
 import { RawInfoIconButton } from '@xyo-network/react-payload-raw-info'
+import type { Ref } from 'react'
 import React, { useMemo } from 'react'
 
-import { BlockEpochTableCellInner, BlockNumberTableCellInner } from '../../block/index.ts'
-import { AddressTableCell, HashTableCell } from './cell/index.ts'
+import { BlockEpochTableCellInner } from '../../block/index.ts'
+import { StyledLinkableTableRow } from '../../table/index.ts'
+import {
+  AddressTableCell, BalanceHistoryBlockNumberTableCellInner, HashTableCell,
+} from './cell/index.ts'
+import { useLinkedBalanceHistoryItem } from './hooks/index.ts'
 import { RawAmountTableCell } from './RawAmountTableCell.tsx'
+import type { BalanceHistoryEventNouns } from './types/index.ts'
 
 // const TEXT_TX_HASH = '123456789abcdef123456789abcdef123456789abcdef123456789abcdef1234' as Hash
 
@@ -21,23 +28,33 @@ export const BalanceHistoryTableRow: React.FC<BalanceHistoryTableRowProps> = ({
   linked, row, ...props
 }) => {
   const {
-    amount, blockNumber, debug, from, key, timestamp, to, type, txHash,
-  } = row ?? {}
+    amount, blockNumber, debug, from, key, timestamp, to, type, txHash, transferHash,
+  } = row ?? {} as AccountBalanceHistoryItemFormatted
 
   const linkedTableCallProps = useMemo(() => ({ linked }), [linked])
+  const [ref, handleClick] = useLinkedBalanceHistoryItem()
+
+  const noun: BalanceHistoryEventNouns = isDefined(txHash) ? 'tx-hash|transfer-hash' : 'block-number|transfer-hash'
+  const data = isDefined(txHash) ? `${txHash}|${transferHash}` : `${blockNumber}|${transferHash}`
 
   return (
-    <TableRow key={key} {...props}>
-      <HashTableCell hash={txHash} toolTipTitle={`Transaction Hash: ${txHash}`} {...linkedTableCallProps} />
-      <BlockNumberTableCellInner blockNumber={blockNumber} {...linkedTableCallProps} />
+    <StyledLinkableTableRow
+      linked={linked}
+      key={key}
+      onClick={linked ? e => handleClick(e, noun, data) : undefined}
+      ref={ref as Ref<HTMLTableRowElement> | undefined}
+      {...props}
+    >
+      <HashTableCell hash={txHash} toolTipTitle={`Transaction Hash: ${txHash}`} eventNoun="tx-hash" {...linkedTableCallProps} />
+      <BalanceHistoryBlockNumberTableCellInner blockNumber={blockNumber} eventNoun="block-number" {...linkedTableCallProps} />
       <BlockEpochTableCellInner epoch={timestamp} {...linkedTableCallProps} />
-      <AddressTableCell address={from} toolTipTitle={`From Address: ${from}`} {...linkedTableCallProps} />
-      <AddressTableCell address={to} toolTipTitle={`To Address: ${to}`} {...linkedTableCallProps} />
-      {/* Intentionally not passing linked prop here till we know where a link would go */}
-      <RawAmountTableCell amount={amount} type={type} />
+      <AddressTableCell address={from} toolTipTitle={`From Address: ${from}`} eventNoun="from-address" {...linkedTableCallProps} />
+      <AddressTableCell address={to} toolTipTitle={`To Address: ${to}`} eventNoun="to-address" {...linkedTableCallProps} />
+      <RawAmountTableCell amount={amount} type={type} eventNoun="amount" />
+      <HashTableCell hash={transferHash} toolTipTitle={`Transfer Hash: ${transferHash}`} eventNoun={noun} eventData={data} {...linkedTableCallProps} />
       <TableCell>
         <RawInfoIconButton rawValue={debug as JsonValue} />
       </TableCell>
-    </TableRow>
+    </StyledLinkableTableRow>
   )
 }

package/src/components/account/table/RawAmountTableCell.tsx

@@ -4,23 +4,23 @@ import {
 } from '@mui/material'
 import { isDefined, toHex } from '@xylabs/sdk-js'
 import type { BalanceTransactionType } from '@xyo-network/react-chain-provider'
-import { useEvent } from '@xyo-network/react-event'
 import { XL1Amount } from '@xyo-network/xl1-sdk'
 import React from 'react'
 
+import { useLinkedBalanceHistoryItem } from './hooks/index.ts'
 import type { BalanceHistoryEventNouns } from './types/index.ts'
 
 export interface RawAmountTableCellProps extends TableCellProps {
   amount?: bigint
+  eventNoun?: BalanceHistoryEventNouns
   linked?: boolean
   type?: BalanceTransactionType
 }
 
 export const RawAmountTableCell: React.FC<RawAmountTableCellProps> = ({
-  amount, linked, sx, type, ...props
+  amount, eventNoun = 'amount', linked, sx, type, ...props
 }) => {
-  const [ref, dispatch] = useEvent<HTMLAnchorElement, BalanceHistoryEventNouns>()
-  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => dispatch('amount', 'click', isDefined(amount) ? toHex(amount) : '', event.nativeEvent)
+  const [ref, handleClick] = useLinkedBalanceHistoryItem()
 
   const formatAmount = (amount?: bigint) => {
     if (!isDefined(amount)) {
@@ -36,7 +36,7 @@ export const RawAmountTableCell: React.FC<RawAmountTableCellProps> = ({
       <Tooltip title={`Raw Amount: ${amount}`}>
         {linked
           ? (
-              <Link onClick={handleClick} sx={{ cursor: 'pointer' }}>
+              <Link onClick={e => handleClick(e, eventNoun, isDefined(amount) ? toHex(amount) : '')} sx={{ cursor: 'pointer' }}>
                 {type === 'send' ? '-' : ''}
                 {formatAmount(amount)}
               </Link>

package/src/components/account/table/cell/AddressTableCell.tsx

@@ -1,25 +1,26 @@
 import type { TableCellProps } from '@mui/material'
 import { TableCell, Tooltip } from '@mui/material'
-import { useEvent } from '@xyo-network/react-event'
 import React from 'react'
 
 import { BlockAddressChip } from '../../../block/index.ts'
+import { useLinkedBalanceHistoryItem } from '../hooks/index.ts'
+import type { BalanceHistoryEventNouns } from '../types/index.ts'
 
 export interface AddressTableCellProps extends TableCellProps {
   address?: string
+  eventNoun?: BalanceHistoryEventNouns
   linked?: boolean
   toolTipTitle?: string
 }
 
 export const AddressTableCell: React.FC<AddressTableCellProps> = ({
-  address, linked, toolTipTitle, sx, ...props
+  address, eventNoun, linked, toolTipTitle, sx, ...props
 }) => {
-  const [ref, dispatch] = useEvent()
-  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => dispatch('address', 'click', address, event.nativeEvent)
+  const [ref, handleClick] = useLinkedBalanceHistoryItem()
   return (
     <TableCell ref={ref} sx={{ cursor: linked ? 'pointer' : 'default', ...sx }} {...props}>
       <Tooltip title={toolTipTitle}>
-        <BlockAddressChip address={address} onClick={handleClick} />
+        <BlockAddressChip address={address} onClick={linked ? e => handleClick(e, eventNoun, address) : undefined} />
       </Tooltip>
     </TableCell>
   )

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

@@ -0,0 +1,39 @@
+import {
+  Link,
+  TableCell, Tooltip,
+  Typography,
+} from '@mui/material'
+import type { HydratedBlock } from '@xyo-network/xl1-sdk'
+import React from 'react'
+
+import { useLinkedBalanceHistoryItem } from '../hooks/index.ts'
+import type { BalanceHistoryEventNouns } from '../types/index.ts'
+
+export interface BalanceHistoryBlockNumberTableCellProps {
+  block?: HydratedBlock
+  eventNoun?: BalanceHistoryEventNouns
+  linked?: boolean
+}
+
+export const BalanceHistoryBlockNumberTableCell: React.FC<BalanceHistoryBlockNumberTableCellProps> = ({
+  block, eventNoun = 'block-number', linked, ...props
+}) => {
+  const blockNumber = block?.[0].block
+
+  return <BalanceHistoryBlockNumberTableCellInner blockNumber={blockNumber} eventNoun={eventNoun} linked={linked} {...props} />
+}
+
+export const BalanceHistoryBlockNumberTableCellInner: React.FC<BalanceHistoryBlockNumberTableCellProps & { blockNumber?: number; linked?: boolean }> = ({
+  blockNumber, eventNoun = 'block-number', linked, ...props
+}) => {
+  const [ref, handleClick] = useLinkedBalanceHistoryItem()
+  return (
+    <TableCell ref={ref} {...props}>
+      <Tooltip title={`Block Number: ${blockNumber}`}>
+        <Typography component="span" variant="body1">
+          {linked ? <Link onClick={e => handleClick(e, eventNoun, blockNumber?.toString() ?? '')} sx={{ cursor: 'pointer' }}>{blockNumber}</Link> : blockNumber}
+        </Typography>
+      </Tooltip>
+    </TableCell>
+  )
+}

package/src/components/account/table/cell/HashTableCell.tsx

@@ -6,22 +6,23 @@ import {
 import {
   ellipsize, type Hash, isDefined,
 } from '@xylabs/sdk-js'
-import { useEvent } from '@xyo-network/react-event'
 import React from 'react'
 
+import { useLinkedBalanceHistoryItem } from '../hooks/index.ts'
 import type { BalanceHistoryEventNouns } from '../types/index.ts'
 
 export interface HashTableCellProps extends TableCellProps {
+  eventData?: string
+  eventNoun?: BalanceHistoryEventNouns
   hash?: Hash
   linked?: boolean
   toolTipTitle?: string
 }
 
 export const HashTableCell: React.FC<HashTableCellProps> = ({
-  hash, linked, toolTipTitle, sx, ...props
+  eventData, eventNoun = 'tx-hash', hash, linked, toolTipTitle, sx, ...props
 }) => {
-  const [ref, dispatch] = useEvent<HTMLTableCellElement, BalanceHistoryEventNouns>()
-  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => dispatch('tx-hash', 'click', hash, event.nativeEvent)
+  const [ref, handleClick] = useLinkedBalanceHistoryItem()
   const shortenedHash = isDefined(hash) ? ellipsize(hash as string, 6) : 'N/A'
   return (
     <TableCell ref={ref} {...props}>
@@ -31,7 +32,7 @@ export const HashTableCell: React.FC<HashTableCellProps> = ({
               <Typography component="span" variant="body1">
                 {linked
                   ? (
-                      <Link onClick={handleClick} sx={{ cursor: 'pointer' }}>
+                      <Link onClick={e => handleClick(e, eventNoun, eventData)} sx={{ cursor: 'pointer' }}>
                         {shortenedHash}
                       </Link>
                     )

package/src/components/account/table/cell/index.ts

@@ -1,2 +1,3 @@
 export * from './AddressTableCell.tsx'
+export * from './BlockNumber.tsx'
 export * from './HashTableCell.tsx'

package/src/components/account/table/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useLinkedBalanceHistoryItem.tsx'

package/src/components/account/table/hooks/useLinkedBalanceHistoryItem.tsx

@@ -0,0 +1,29 @@
+import { useEvent } from '@xyo-network/react-event'
+import type { Ref } from 'react'
+import type React from 'react'
+
+import type { BalanceHistoryEventNouns } from '../types/index.ts'
+
+export const useLinkedBalanceHistoryItem = (): [
+  Ref<HTMLElement | null>,
+  (event: React.MouseEvent, noun?: BalanceHistoryEventNouns, data?: string | number) => void,
+] => {
+  const [ref, dispatch] = useEvent<HTMLAnchorElement, BalanceHistoryEventNouns, string, string | number>()
+
+  const handleClick = (event: React.MouseEvent, noun?: BalanceHistoryEventNouns, data?: string | number) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (noun === undefined) {
+      console.warn('useLinkedBalanceHistoryItem: noun is required')
+      return
+    }
+    const selection = globalThis.getSelection()
+    const isTextSelected = selection && selection.toString().length > 0
+
+    if (!isTextSelected) {
+      dispatch(noun, 'click', data, event.nativeEvent)
+    }
+  }
+
+  return [ref, handleClick]
+}

package/src/components/account/table/index.ts

@@ -1,4 +1,5 @@
 export * from './BalanceHistoryTableEx.tsx'
 export * from './BalanceHistoryTableRow.tsx'
 export * from './cell/index.ts'
+export * from './hooks/index.ts'
 export * from './types/index.ts'

package/src/components/account/table/types/index.ts

@@ -1,9 +1,9 @@
 import type { AccountBalanceHistoryItemFormatted } from '@xyo-network/react-chain-provider'
 import type { ExtendEventNoun } from '@xyo-network/react-event'
 
-export type BalanceHistoryEventNouns = ExtendEventNoun<'amount' | 'blockNumber' | 'tx-hash'>
+export type BalanceHistoryEventNouns = ExtendEventNoun<'from-address' | 'to-address' | 'amount' | 'block-number' | 'tx-hash' | 'transfer-hash' | 'tx-hash|transfer-hash' | 'block-number|transfer-hash'>
 
-export type TableHeadingLabels = 'Tx Hash' | 'BlockNumber' | 'Timestamp' | 'From' | 'To' | 'Amount' | 'Debug'
+export type TableHeadingLabels = 'Tx Hash' | 'BlockNumber' | 'Timestamp' | 'From' | 'To' | 'Amount' | 'Debug' | 'TransferHash'
 export type TableHeadings = { [key in keyof AccountBalanceHistoryItemFormatted]: TableHeadingLabels }
 
 export const TableHeadingLabels: TableHeadingLabels[] = [
@@ -13,5 +13,6 @@ export const TableHeadingLabels: TableHeadingLabels[] = [
   'From',
   'To',
   'Amount',
+  'TransferHash',
   'Debug',
 ] as const

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

@@ -1,29 +1,28 @@
 import {
-  Link,
-  TableCell, Tooltip,
-  Typography,
+  Link, TableCell, Tooltip, Typography,
 } from '@mui/material'
-import { useEvent } from '@xyo-network/react-event'
 import React from 'react'
 
 import type { BlockHeaderEventNouns } from '../../hooks/index.ts'
+import { useLinkedBlockItem } from './hooks/index.ts'
 import type { BlockTableCellProps } from './lib/index.ts'
 
-export interface BlockNumberTableCellProps extends BlockTableCellProps {}
+export interface BlockNumberTableCellProps extends BlockTableCellProps {
+  eventNoun?: BlockHeaderEventNouns
+}
 
 export const BlockNumberTableCell: React.FC<BlockNumberTableCellProps> = ({
-  block, linked, ...props
+  block, eventNoun = 'block-number', linked, ...props
 }) => {
   const blockNumber = block?.[0].block
 
-  return <BlockNumberTableCellInner blockNumber={blockNumber} linked={linked} {...props} />
+  return <BlockNumberTableCellInner blockNumber={blockNumber} eventNoun={eventNoun} linked={linked} {...props} />
 }
 
 export const BlockNumberTableCellInner: React.FC<BlockNumberTableCellProps & { blockNumber?: number; linked?: boolean }> = ({
-  blockNumber, linked, ...props
+  blockNumber, eventNoun = 'block-number', linked, ...props
 }) => {
-  const [ref, dispatch] = useEvent<HTMLTableCellElement, BlockHeaderEventNouns>()
-  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => dispatch('block-number', 'click', blockNumber?.toString() ?? '', event.nativeEvent)
+  const [ref, handleClick] = useLinkedBlockItem(eventNoun, blockNumber?.toLocaleString())
   return (
     <TableCell ref={ref} {...props}>
       <Tooltip title={`Block Number: ${blockNumber}`}>

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

@@ -24,7 +24,11 @@ const Default = Template.bind({})
 Default.args = {}
 
 const WithData = Template.bind({})
-// TODO - use buildRandomChain helper
 WithData.args = { block }
 
-export { Default, WithData }
+const WithDataLinked = Template.bind({})
+WithDataLinked.args = { block, linked: true }
+
+export {
+  Default, WithData, WithDataLinked,
+}

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

@@ -1,11 +1,10 @@
 import type { TableRowProps } from '@mui/material'
-import { TableRow, useTheme } from '@mui/material'
-import { alphaCss } from '@xylabs/react-theme'
 import { usePayloadRootHash } from '@xyo-network/react-shared'
 import type { Ref } from 'react'
 import React, { useMemo } from 'react'
 
 import type { BlockComponentProps } from '../../../../types/index.ts'
+import { StyledLinkableTableRow } from '../../../table/index.ts'
 import { useLinkedBlockItem } from '../cell/hooks/index.ts'
 import {
   BlockEpochTableCell,
@@ -20,24 +19,18 @@ export interface BlockChainTableRowProps extends BlockComponentProps, TableRowPr
 }
 
 export const BlockChainTableRow: React.FC<BlockChainTableRowProps> = ({
-  block, deepValidation, defaultExpanded, linked, sx, ...props
+  block, deepValidation, defaultExpanded, linked, ...props
 }) => {
   const linkedTableCellProps = useMemo(() => ({ block, linked }), [block, linked])
   const defaultTableCellProps = useMemo(() => ({ block }), [block])
   const hash = usePayloadRootHash(block?.[0])
   const [ref, handleClick] = useLinkedBlockItem('block-hash', hash)
-  const theme = useTheme()
 
   return (
-    <TableRow
+    <StyledLinkableTableRow
       onClick={linked ? handleClick : undefined}
       ref={ref as Ref<HTMLTableRowElement> | undefined}
-      sx={{
-        'cursor': linked ? 'pointer' : 'default',
-        'overflowY': 'scroll',
-        '&:hover': { backgroundColor: alphaCss(theme.vars.palette.secondary.light, 0.15) },
-        ...sx,
-      }}
+      linked={linked}
       {...props}
     >
       <BlockNumberTableCell align="left" {...linkedTableCellProps} />
@@ -48,6 +41,6 @@ export const BlockChainTableRow: React.FC<BlockChainTableRowProps> = ({
       <BlockPayloadCountsTableCell align="left" {...linkedTableCellProps} />
       <BlockVerificationTableCell deepValidation={deepValidation} {...defaultTableCellProps} />
       <BlockJsonViewTableCell {...defaultTableCellProps} />
-    </TableRow>
+    </StyledLinkableTableRow>
   )
 }

package/src/components/table/StyledLinkableTableRow.tsx

@@ -0,0 +1,12 @@
+import type { TableRowProps } from '@mui/material'
+import { styled, TableRow } from '@mui/material'
+import { alphaCss } from '@xylabs/react-theme'
+
+export const StyledLinkableTableRow = styled(TableRow, { shouldForwardProp: prop => prop !== 'linked' })<
+  TableRowProps & { linked?: boolean }
+>(({ theme, linked }) => ({
+  'cursor': linked ? 'pointer' : 'default',
+  'overflowY': 'scroll',
+  '&:hover': { backgroundColor: alphaCss(theme.vars.palette.secondary.light, 0.15) },
+}
+))

package/src/components/table/index.ts

@@ -0,0 +1 @@
+export * from './StyledLinkableTableRow.tsx'