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

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-blockchain",
-  "version": "1.20.13",
+  "version": "1.20.15",
   "description": "XYO Layer One React SDK Blockchain",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -56,13 +56,13 @@
     "@xylabs/react-theme": "~7.1.17",
     "@xylabs/sdk-js": "~5.0.90",
     "@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/chain-analyze": "~1.20.15",
+    "@xyo-network/chain-protocol": "~1.20.15",
+    "@xyo-network/chain-wrappers": "~1.20.15",
     "@xyo-network/react-boundwitness-plugin": "~7.5.8",
-    "@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-chain-blockies": "~1.20.15",
+    "@xyo-network/react-chain-provider": "~1.20.15",
+    "@xyo-network/react-chain-shared": "~1.20.15",
     "@xyo-network/react-error": "~7.5.8",
     "@xyo-network/react-event": "~7.5.8",
     "@xyo-network/react-payload-raw-info": "~7.5.8",
@@ -88,7 +88,7 @@
     "@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/react-chain-network": "~1.20.15",
     "@xyo-network/sdk-js": "~5.3.20",
     "@xyo-network/xl1-sdk": "~1.26.11",
     "axios": "^1.13.6",

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

@@ -10,12 +10,14 @@ import { BalanceHistoryTableRow } from './BalanceHistoryTableRow.tsx'
 const sampleRow: AccountBalanceHistoryItemFormatted = {
   amount: 866_949_573_941_165_034_031n,
   blockNumber: 652_126,
+  blockHash: 'abc123456789abcdef123456789abcdef123456789abcdef123456789abcdef' as Hash,
   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',
 }
 

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

@@ -8,9 +8,11 @@ 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 { BlockEpochTableCellInner } from '../../block/index.ts'
 import { StyledLinkableTableRow } from '../../table/index.ts'
-import { AddressTableCell, HashTableCell } from './cell/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'
@@ -26,14 +28,14 @@ export const BalanceHistoryTableRow: React.FC<BalanceHistoryTableRowProps> = ({
   linked, row, ...props
 }) => {
   const {
-    amount, blockNumber, debug, from, key, timestamp, to, type, txHash,
-  } = row ?? {}
+    amount, blockHash, 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' : 'blockNumber'
-  const data = isDefined(txHash) ? txHash : blockNumber
+  const noun: BalanceHistoryEventNouns = isDefined(txHash) ? 'tx-hash|transfer-hash' : 'block-hash|transfer-hash'
+  const data = isDefined(txHash) ? `${txHash}|${transferHash}` : `${blockHash}|${transferHash}`
 
   return (
     <StyledLinkableTableRow
@@ -43,13 +45,13 @@ export const BalanceHistoryTableRow: React.FC<BalanceHistoryTableRowProps> = ({
       ref={ref as Ref<HTMLTableRowElement> | undefined}
       {...props}
     >
-      <HashTableCell hash={txHash} toolTipTitle={`Transaction Hash: ${txHash}`} {...linkedTableCallProps} />
-      <BlockNumberTableCellInner blockNumber={blockNumber} {...linkedTableCallProps} />
+      <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>

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/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-hash|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}`}>