@xyo-network/react-chain-blockchain 1.20.11 → 1.20.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-blockchain",
-  "version": "1.20.11",
+  "version": "1.20.13",
   "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.11",
-    "@xyo-network/chain-protocol": "~1.20.11",
-    "@xyo-network/chain-wrappers": "~1.20.11",
+    "@xyo-network/boundwitness-model": "~5.3.20",
+    "@xyo-network/chain-analyze": "~1.20.13",
+    "@xyo-network/chain-protocol": "~1.20.13",
+    "@xyo-network/chain-wrappers": "~1.20.13",
     "@xyo-network/react-boundwitness-plugin": "~7.5.8",
-    "@xyo-network/react-chain-blockies": "~1.20.11",
-    "@xyo-network/react-chain-provider": "~1.20.11",
-    "@xyo-network/react-chain-shared": "~1.20.11",
+    "@xyo-network/react-chain-blockies": "~1.20.13",
+    "@xyo-network/react-chain-provider": "~1.20.13",
+    "@xyo-network/react-chain-shared": "~1.20.13",
     "@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.11",
-    "@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.13",
+    "@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,51 @@
+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,
+  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,19 @@
 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 { StyledLinkableTableRow } from '../../table/index.ts'
 import { AddressTableCell, 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
 
@@ -25,9 +30,19 @@ export const BalanceHistoryTableRow: React.FC<BalanceHistoryTableRowProps> = ({
   } = row ?? {}
 
   const linkedTableCallProps = useMemo(() => ({ linked }), [linked])
+  const [ref, handleClick] = useLinkedBalanceHistoryItem()
+
+  const noun: BalanceHistoryEventNouns = isDefined(txHash) ? 'tx-hash' : 'blockNumber'
+  const data = isDefined(txHash) ? txHash : blockNumber
 
   return (
-    <TableRow key={key} {...props}>
+    <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}`} {...linkedTableCallProps} />
       <BlockNumberTableCellInner blockNumber={blockNumber} {...linkedTableCallProps} />
       <BlockEpochTableCellInner epoch={timestamp} {...linkedTableCallProps} />
@@ -38,6 +53,6 @@ export const BalanceHistoryTableRow: React.FC<BalanceHistoryTableRowProps> = ({
       <TableCell>
         <RawInfoIconButton rawValue={debug as JsonValue} />
       </TableCell>
-    </TableRow>
+    </StyledLinkableTableRow>
   )
 }

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

@@ -20,7 +20,7 @@ export const RawAmountTableCell: React.FC<RawAmountTableCellProps> = ({
   amount, linked, sx, type, ...props
 }) => {
   const [ref, dispatch] = useEvent<HTMLAnchorElement, BalanceHistoryEventNouns>()
-  const handleClick = () => dispatch('amount', 'click', isDefined(amount) ? toHex(amount) : '')
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => dispatch('amount', 'click', isDefined(amount) ? toHex(amount) : '', event.nativeEvent)
 
   const formatAmount = (amount?: bigint) => {
     if (!isDefined(amount)) {

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

@@ -15,7 +15,7 @@ export const AddressTableCell: React.FC<AddressTableCellProps> = ({
   address, linked, toolTipTitle, sx, ...props
 }) => {
   const [ref, dispatch] = useEvent()
-  const handleClick = () => dispatch('address', 'click', address)
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => dispatch('address', 'click', address, event.nativeEvent)
   return (
     <TableCell ref={ref} sx={{ cursor: linked ? 'pointer' : 'default', ...sx }} {...props}>
       <Tooltip title={toolTipTitle}>

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

@@ -21,7 +21,7 @@ export const HashTableCell: React.FC<HashTableCellProps> = ({
   hash, linked, toolTipTitle, sx, ...props
 }) => {
   const [ref, dispatch] = useEvent<HTMLTableCellElement, BalanceHistoryEventNouns>()
-  const handleClick = () => dispatch('tx-hash', 'click', hash)
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => dispatch('tx-hash', 'click', hash, event.nativeEvent)
   const shortenedHash = isDefined(hash) ? ellipsize(hash as string, 6) : 'N/A'
   return (
     <TableCell ref={ref} {...props}>

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/block/BlockHeadingFlexbox.tsx

@@ -22,7 +22,7 @@ export const BlockHeadingFlexbox: React.FC<BlockComponentWithTxsProps> = ({
 
   const handleTransactionCountClick = (event: React.MouseEvent, transactions: Hash[]) => {
     event.stopPropagation()
-    blockHeadingListener('transaction-count', 'click', JSON.stringify(transactions))
+    blockHeadingListener('transaction-count', 'click', JSON.stringify(transactions), event.nativeEvent)
   }
 
   return (

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

@@ -23,7 +23,7 @@ export const BlockNumberTableCellInner: React.FC<BlockNumberTableCellProps & { b
   blockNumber, linked, ...props
 }) => {
   const [ref, dispatch] = useEvent<HTMLTableCellElement, BlockHeaderEventNouns>()
-  const handleClick = () => dispatch('block-number', 'click', blockNumber?.toString() ?? '')
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => dispatch('block-number', 'click', blockNumber?.toString() ?? '', event.nativeEvent)
   return (
     <TableCell ref={ref} {...props}>
       <Tooltip title={`Block Number: ${blockNumber}`}>

package/src/components/block/table/cell/hooks/useLinkedBlockItem.tsx

@@ -17,7 +17,7 @@ export const useLinkedBlockItem = (noun?: BlockHeaderEventNouns, data?: string |
     const isTextSelected = selection && selection.toString().length > 0
 
     if (!isTextSelected) {
-      dispatch(noun, 'click', data)
+      dispatch(noun, 'click', data, event.nativeEvent)
     }
   }
 

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'