@xyo-network/react-chain-blockchain 1.20.12 → 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.12",
+  "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.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.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.12",
-    "@xyo-network/react-chain-provider": "~1.20.12",
-    "@xyo-network/react-chain-shared": "~1.20.12",
+    "@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.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.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/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/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'