@xyo-network/react-chain-blockchain 1.16.9 → 1.16.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-blockchain",
-  "version": "1.16.9",
+  "version": "1.16.10",
   "description": "XYO Layer One React SDK Blockchain",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -45,13 +45,13 @@
   },
   "dependencies": {
     "@storybook/react-vite": "~10.0.7",
-    "@xylabs/assert": "~5.0.24",
-    "@xylabs/axios": "~5.0.24",
-    "@xylabs/delay": "~5.0.24",
-    "@xylabs/eth-address": "~5.0.24",
-    "@xylabs/exists": "~5.0.24",
-    "@xylabs/hex": "~5.0.24",
-    "@xylabs/promise": "~5.0.24",
+    "@xylabs/assert": "~5.0.25",
+    "@xylabs/axios": "~5.0.25",
+    "@xylabs/delay": "~5.0.25",
+    "@xylabs/eth-address": "~5.0.25",
+    "@xylabs/exists": "~5.0.25",
+    "@xylabs/hex": "~5.0.25",
+    "@xylabs/promise": "~5.0.25",
     "@xylabs/react-animation": "~7.1.8",
     "@xylabs/react-error": "~7.1.8",
     "@xylabs/react-flexbox": "~7.1.8",
@@ -59,31 +59,33 @@
     "@xylabs/react-quick-tip-button": "~7.1.8",
     "@xylabs/react-shared": "~7.1.8",
     "@xylabs/react-theme": "~7.1.8",
-    "@xylabs/typeof": "~5.0.24",
+    "@xylabs/typeof": "~5.0.25",
     "@xyo-network/account": "~5.1.21",
     "@xyo-network/archivist-memory": "~5.1.21",
     "@xyo-network/archivist-model": "~5.1.21",
     "@xyo-network/boundwitness-builder": "~5.1.21",
     "@xyo-network/boundwitness-model": "~5.1.21",
     "@xyo-network/bridge-http": "~5.1.21",
-    "@xyo-network/chain-analyze": "~1.16.9",
-    "@xyo-network/chain-protocol": "~1.16.9",
-    "@xyo-network/chain-services": "~1.16.9",
-    "@xyo-network/chain-utils": "~1.16.9",
-    "@xyo-network/chain-wrappers": "~1.16.9",
+    "@xyo-network/chain-analyze": "~1.16.10",
+    "@xyo-network/chain-protocol": "~1.16.10",
+    "@xyo-network/chain-services": "~1.16.10",
+    "@xyo-network/chain-utils": "~1.16.10",
+    "@xyo-network/chain-wrappers": "~1.16.10",
     "@xyo-network/module-model": "~5.1.21",
     "@xyo-network/payload-builder": "~5.1.21",
     "@xyo-network/payload-model": "~5.1.21",
     "@xyo-network/react-boundwitness-plugin": "~7.3.10",
-    "@xyo-network/react-chain-blockies": "~1.16.9",
-    "@xyo-network/react-chain-shared": "~1.16.9",
+    "@xyo-network/react-chain-blockies": "~1.16.10",
+    "@xyo-network/react-chain-provider": "~1.16.10",
+    "@xyo-network/react-chain-shared": "~1.16.10",
+    "@xyo-network/react-error": "~7.3.10",
     "@xyo-network/react-event": "~7.3.10",
     "@xyo-network/react-payload-raw-info": "~7.3.10",
     "@xyo-network/react-payload-table": "~7.3.10",
     "@xyo-network/react-shared": "~7.3.10",
     "@xyo-network/react-table": "~7.3.10",
-    "@xyo-network/xl1-protocol": "~1.13.6",
-    "@xyo-network/xl1-protocol-sdk": "~1.16.9"
+    "@xyo-network/xl1-protocol": "~1.13.11",
+    "@xyo-network/xl1-protocol-sdk": "~1.16.10"
   },
   "devDependencies": {
     "@emotion/react": "~11.14.0",
@@ -91,17 +93,19 @@
     "@mui/icons-material": "~7.3.5",
     "@mui/material": "~7.3.5",
     "@types/react": "~19.2.4",
-    "@xylabs/creatable": "~5.0.24",
-    "@xylabs/hex": "~5.0.24",
+    "@xylabs/creatable": "~5.0.25",
+    "@xylabs/hex": "~5.0.25",
     "@xylabs/ts-scripts-yarn3": "~7.2.8",
     "@xylabs/tsconfig": "~7.2.8",
     "@xylabs/tsconfig-dom": "~7.2.8",
     "@xylabs/tsconfig-react": "~7.2.8",
     "@xyo-network/api-models": "~5.1.21",
+    "@xyo-network/xl1-network-model": "~1.16.10",
+    "@xyo-network/xl1-rpc": "~1.16.10",
     "eslint": "^9.39.1",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
-    "react-router-dom": "^7.9.5",
+    "react-router-dom": "^7.9.6",
     "storybook": "~10.0.7",
     "typescript": "~5.9.3"
   },

package/src/components/account/BalanceHistoryFlexbox.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryFn } from '@storybook/react-vite'
+import type { Address } from '@xylabs/hex'
+import { useHttpRpcViewer } from '@xyo-network/react-chain-provider'
+import { LocalNetwork } from '@xyo-network/xl1-network-model'
+import React from 'react'
+
+import { AccountBalanceHistoryFlexBox } from './BalanceHistoryFlexbox.tsx'
+
+export default {
+  title: 'AccountBalanceHistory/FlexBox',
+  component: AccountBalanceHistoryFlexBox,
+} as Meta
+
+const Template: StoryFn<typeof AccountBalanceHistoryFlexBox> = (args) => {
+  const viewer = useHttpRpcViewer(LocalNetwork.url)
+  return <AccountBalanceHistoryFlexBox viewer={viewer} {...args} />
+}
+
+const Default = Template.bind({})
+Default.args = {
+  address: '2b1a21d8c90e658d8bf1e2aad31c8dc892c353c1' as Address,
+  refresh: 0,
+}
+
+export { Default }

package/src/components/account/BalanceHistoryFlexbox.tsx

@@ -0,0 +1,65 @@
+import { Typography } from '@mui/material'
+import { type Address } from '@xylabs/hex'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { isDefined } from '@xylabs/typeof'
+import { useAccountBalanceHistory } from '@xyo-network/react-chain-provider'
+import { ErrorRender } from '@xyo-network/react-error'
+import { AttoXL1, XL1Amount } from '@xyo-network/xl1-protocol'
+import type { XyoViewer } from '@xyo-network/xl1-protocol-sdk'
+import React from 'react'
+
+import { AccountBalanceHistoryTable } from './table/index.ts'
+
+export interface AccountBalanceHistoryFlexBoxProps extends FlexBoxProps {
+  address?: Address
+  refresh?: number
+  viewer?: XyoViewer
+}
+
+export const AccountBalanceHistoryFlexBox: React.FC<AccountBalanceHistoryFlexBoxProps> = ({
+  address, refresh, viewer, ...props
+}) => {
+  const [results, error] = useAccountBalanceHistory(address, viewer, refresh)
+  const {
+    history, balance, truncated,
+  } = results || { balance: [AttoXL1(0n), AttoXL1(0n)], history: undefined }
+
+  const formatBalance = (balance: bigint) => {
+    const xl1Amount = new XL1Amount(balance)
+    return xl1Amount.toString(undefined, {
+      places: 18, maxDecimal: 12, maxCharacters: 12, minDecimals: 1, locale: navigator.language,
+    })
+  }
+
+  const formatBalanceMagnitude = (set: [AttoXL1, AttoXL1]) => {
+    const [received, sent] = set
+    const netBalance = received - sent
+    return netBalance < 0n ? `-${formatBalance(sent - received)}` : formatBalance(netBalance)
+  }
+
+  return isDefined(history) && isDefined(address)
+    ? (
+        <FlexCol {...props}>
+          <ErrorRender error={error} scope="AccountBalanceHistoryTable" />
+          <Typography variant="h6" gutterBottom>
+            {formatBalanceMagnitude(balance)}
+          </Typography>
+          {truncated
+            ? (
+                <Typography variant="caption" gutterBottom>
+                  Ranged Balance from
+                  {' '}
+                  {history.at(-1)!.blockNumber}
+                  {' '}
+                  -
+                  {' '}
+                  {history[0].blockNumber}
+                </Typography>
+              )
+            : null}
+          <AccountBalanceHistoryTable history={history} />
+        </FlexCol>
+      )
+    : null
+}

package/src/components/account/index.ts

@@ -0,0 +1,2 @@
+export * from './BalanceHistoryFlexbox.tsx'
+export * from './table/index.ts'

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

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

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

@@ -0,0 +1,75 @@
+import {
+  Alert, AlertTitle, LinearProgress, Snackbar,
+} from '@mui/material'
+import type { Meta, StoryFn } from '@storybook/react-vite'
+import type { Address } from '@xylabs/hex'
+import { useAccountBalanceHistory, useHttpRpcViewer } from '@xyo-network/react-chain-provider'
+import { ErrorRender } from '@xyo-network/react-error'
+import type { Event } from '@xyo-network/react-event'
+import { useEvent } from '@xyo-network/react-event'
+import { LocalNetwork } from '@xyo-network/xl1-network-model'
+import React, { useState } from 'react'
+
+import { AccountBalanceHistoryTable } from './BalanceHistoryTable.tsx'
+
+export default {
+  title: 'AccountBalanceHistory/Table',
+  component: AccountBalanceHistoryTable,
+} as Meta
+
+const TEST_ADDRESS = 'aa9401662e9cd3ce8bb8a6ab92a35ed83e85ac67' as Address
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const TEST_ADDRESS_1 = '2b1a21d8c90e658d8bf1e2aad31c8dc892c353c1' as Address
+
+const useFetchBalanceHistory = (address?: Address) => {
+  const viewer = useHttpRpcViewer(LocalNetwork.url)
+  return useAccountBalanceHistory(address, viewer)
+}
+
+const Template: StoryFn<typeof AccountBalanceHistoryTable> = (args) => {
+  const results = useFetchBalanceHistory(TEST_ADDRESS)
+  const [history, error, loading] = results
+  return (
+    <>
+      <ErrorRender error={error} scope="AccountBalanceHistoryTableStory" />
+      {loading === 'pending' ? <LinearProgress /> : null}
+      <AccountBalanceHistoryTable history={history?.history} {...args} />
+    </>
+  )
+}
+
+const TemplateLinked: StoryFn<typeof AccountBalanceHistoryTable> = (args) => {
+  const [event, setEvent] = useState<Event>()
+  const [ref] = useEvent<HTMLTableElement>((noun, verb, data) => setEvent({
+    noun, verb, data,
+  }))
+
+  const results = useFetchBalanceHistory(TEST_ADDRESS)
+  const [history, error, loading] = results
+
+  return (
+    <>
+      <ErrorRender error={error} scope="AccountBalanceHistoryTableStory" />
+      {loading === 'pending' ? <LinearProgress /> : null}
+      <AccountBalanceHistoryTable history={history?.history} ref={ref} {...args} />
+      <Snackbar autoHideDuration={5000} open={!!event} onClose={() => setEvent(undefined)}>
+        <Alert>
+          <AlertTitle>
+            Event -
+            {' '}
+            {event?.noun}
+          </AlertTitle>
+          <pre>{JSON.stringify(event, null, 2)}</pre>
+        </Alert>
+      </Snackbar>
+    </>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithLinked = TemplateLinked.bind({})
+WithLinked.args = { linked: true }
+
+export { Default, WithLinked }

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

@@ -0,0 +1,36 @@
+import type { TableProps } from '@mui/material'
+import {
+  Table, TableBody, TableCell, TableHead, TableRow,
+} from '@mui/material'
+import { isDefined } from '@xylabs/typeof'
+import type { AccountBalanceHistoryItemFormatted } from '@xyo-network/react-chain-provider'
+import React from 'react'
+
+import { BalanceHistoryTableRow } from './BalanceHistoryTableRow.tsx'
+import { TableHeadingLabels } from './types/index.ts'
+
+export interface AccountBalanceHistoryTableProps extends TableProps {
+  history?: AccountBalanceHistoryItemFormatted[]
+  linked?: boolean
+}
+
+export const AccountBalanceHistoryTable: React.FC<AccountBalanceHistoryTableProps> = ({
+  history, linked, ...props
+}) => {
+  return isDefined(history)
+    ? (
+        <Table {...props}>
+          <TableHead>
+            <TableRow>
+              {TableHeadingLabels.map(heading => (
+                <TableCell key={heading}>{heading}</TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {history?.map(row => <BalanceHistoryTableRow key={row.key} linked={linked} row={row} />)}
+          </TableBody>
+        </Table>
+      )
+    : null
+}

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

@@ -0,0 +1,41 @@
+import {
+  TableCell, TableRow, type TableRowProps,
+} from '@mui/material'
+import type { AccountBalanceHistoryItemFormatted } from '@xyo-network/react-chain-provider'
+import { RawInfoIconButton } from '@xyo-network/react-payload-raw-info'
+import type { JsonValue } from '@xyo-network/xl1-rpc'
+import { useMemo } from 'react'
+
+import { BlockEpochTableCellInner, BlockNumberTableCellInner } from '../../block/index.ts'
+import { AddressTableCell } from './AddressTableCell.tsx'
+import { RawAmountTableCell } from './RawAmountTableCell.tsx'
+
+export interface BalanceHistoryTableRowProps extends TableRowProps {
+  linked?: boolean
+  row: AccountBalanceHistoryItemFormatted
+}
+
+export const BalanceHistoryTableRow: React.FC<BalanceHistoryTableRowProps> = ({
+  linked, row, ...props
+}) => {
+  const {
+    amount, blockNumber, debug, from, key, timestamp, to, type, txHash,
+  } = row ?? {}
+
+  const linkedTableCallProps = useMemo(() => ({ linked }), [linked])
+
+  return (
+    <TableRow key={key} {...props}>
+      <TableCell>{txHash || 'N/A'}</TableCell>
+      <BlockNumberTableCellInner blockNumber={blockNumber} {...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} />
+      <TableCell>
+        <RawInfoIconButton rawValue={debug as JsonValue} />
+      </TableCell>
+    </TableRow>
+  )
+}

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

@@ -0,0 +1,53 @@
+import {
+  Link,
+  TableCell, type TableCellProps, Tooltip,
+} from '@mui/material'
+import { toHex } from '@xylabs/hex'
+import { isDefined } from '@xylabs/typeof'
+import type { BalanceTransactionType } from '@xyo-network/react-chain-provider'
+import { useEvent } from '@xyo-network/react-event'
+import { XL1Amount } from '@xyo-network/xl1-protocol'
+
+import type { BalanceHistoryEventNouns } from './types/index.ts'
+
+export interface RawAmountTableCellProps extends TableCellProps {
+  amount?: bigint
+  linked?: boolean
+  type?: BalanceTransactionType
+}
+
+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 formatAmount = (amount?: bigint) => {
+    if (!isDefined(amount)) {
+      return 'N/A'
+    }
+    const xl1Amount = new XL1Amount(amount)
+    return xl1Amount.toString(undefined, {
+      places: 18, maxDecimal: 12, maxCharacters: 12, minDecimals: 1, locale: navigator.language,
+    })
+  }
+  return (
+    <TableCell ref={ref} {...props}>
+      <Tooltip title={`Raw Amount: ${amount}`}>
+        {linked
+          ? (
+              <Link onClick={handleClick} sx={{ cursor: 'pointer' }}>
+                {type === 'send' ? '-' : ''}
+                {formatAmount(amount)}
+              </Link>
+            )
+          : (
+              <span>
+                {type === 'send' ? '-' : ''}
+                {formatAmount(amount)}
+              </span>
+            )}
+      </Tooltip>
+    </TableCell>
+  )
+}

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

@@ -0,0 +1,4 @@
+export * from './AddressTableCell.tsx'
+export * from './BalanceHistoryTable.tsx'
+export * from './BalanceHistoryTableRow.tsx'
+export * from './types/index.ts'

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

@@ -0,0 +1,17 @@
+import type { AccountBalanceHistoryItemFormatted } from '@xyo-network/react-chain-provider'
+import type { ExtendEventNoun } from '@xyo-network/react-event'
+
+export type BalanceHistoryEventNouns = ExtendEventNoun<'amount' | 'blockNumber'>
+
+export type TableHeadingLabels = 'Tx Hash' | 'BlockNumber' | 'Timestamp' | 'From' | 'To' | 'Amount' | 'Debug'
+export type TableHeadings = { [key in keyof AccountBalanceHistoryItemFormatted]: TableHeadingLabels }
+
+export const TableHeadingLabels: TableHeadingLabels[] = [
+  'Tx Hash',
+  'BlockNumber',
+  'Timestamp',
+  'From',
+  'To',
+  'Amount',
+  'Debug',
+] as const

package/src/components/block/table/Ex.stories.tsx

@@ -28,7 +28,7 @@ const TemplateLinked: StoryFn<typeof BlockchainTableEx> = (args) => {
   return (
     <>
       <BlockchainTableEx ref={ref} {...args} />
-      <Snackbar open={!!event} onClose={() => setEvent(undefined)}>
+      <Snackbar open={!!event} autoHideDuration={5000} onClose={() => setEvent(undefined)}>
         <Alert>
           <AlertTitle>
             Event -

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

@@ -1,9 +1,12 @@
 import {
+  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 type { BlockTableCellProps } from './lib/index.ts'
 
 export interface BlockNumberTableCellProps extends BlockTableCellProps {}
@@ -16,14 +19,16 @@ export const BlockNumberTableCell: React.FC<BlockNumberTableCellProps> = ({
   return <BlockNumberTableCellInner blockNumber={blockNumber} linked={linked} {...props} />
 }
 
-export const BlockNumberTableCellInner: React.FC<BlockNumberTableCellProps & { blockNumber?: number }> = ({
+export const BlockNumberTableCellInner: React.FC<BlockNumberTableCellProps & { blockNumber?: number; linked?: boolean }> = ({
   blockNumber, linked, ...props
 }) => {
+  const [ref, dispatch] = useEvent<HTMLTableCellElement, BlockHeaderEventNouns>()
+  const handleClick = () => dispatch('block-number', 'click', blockNumber?.toString() ?? '')
   return (
-    <TableCell {...props}>
+    <TableCell ref={ref} {...props}>
       <Tooltip title={`Block Number: ${blockNumber}`}>
         <Typography component="span" variant="body1">
-          {blockNumber}
+          {linked ? <Link onClick={handleClick} sx={{ cursor: 'pointer' }}>{blockNumber}</Link> : blockNumber}
         </Typography>
       </Tooltip>
     </TableCell>

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './account/index.ts'
 export * from './block/index.ts'
 export * from './chain/index.ts'
 export * from './FeatureNotAvailable.tsx'