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

package/dist/browser/lib/getChainId.d.ts

@@ -1,4 +1,3 @@
-import { type Address } from '@xylabs/hex';
-import type { Promisable } from '@xylabs/promise';
+import type { Address, Promisable } from '@xylabs/sdk-js';
 export declare const getChainId: () => Promisable<Address>;
 //# sourceMappingURL=getChainId.d.ts.map

package/dist/browser/lib/getChainId.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getChainId.d.ts","sourceRoot":"","sources":["../../../src/lib/getChainId.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAa,MAAM,aAAa,CAAA;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAIjD,eAAO,MAAM,UAAU,QAAO,UAAU,CAAC,OAAO,CAE/C,CAAA"}
+{"version":3,"file":"getChainId.d.ts","sourceRoot":"","sources":["../../../src/lib/getChainId.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAKzD,eAAO,MAAM,UAAU,QAAO,UAAU,CAAC,OAAO,CAE/C,CAAA"}

package/dist/browser/stories/ChainInfoContextDecorator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChainInfoContextDecorator.d.ts","sourceRoot":"","sources":["../../../src/stories/ChainInfoContextDecorator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAqBtD,eAAO,MAAM,yBAAyB,EAAE,SA2BvC,CAAA"}
+{"version":3,"file":"ChainInfoContextDecorator.d.ts","sourceRoot":"","sources":["../../../src/stories/ChainInfoContextDecorator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAoBtD,eAAO,MAAM,yBAAyB,EAAE,SA2BvC,CAAA"}

package/dist/browser/types/BlockComponentProps.d.ts

@@ -1,4 +1,4 @@
-import type { Hash } from '@xylabs/hex';
+import type { Hash } from '@xylabs/sdk-js';
 import type { HydratedBlock } from '@xyo-network/xl1-protocol';
 /** Interface for all components that render a single block */
 export interface BlockComponentProps {

package/dist/browser/types/BlockComponentProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockComponentProps.d.ts","sourceRoot":"","sources":["../../../src/types/BlockComponentProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAE9D,8DAA8D;AAC9D,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,aAAa,CAAA;IACpB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,gFAAgF;AAChF,MAAM,WAAW,0BAA2B,SAAQ,mBAAmB;IACrE,YAAY,EAAE,IAAI,EAAE,CAAA;CACrB"}
+{"version":3,"file":"BlockComponentProps.d.ts","sourceRoot":"","sources":["../../../src/types/BlockComponentProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAE9D,8DAA8D;AAC9D,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,aAAa,CAAA;IACpB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,gFAAgF;AAChF,MAAM,WAAW,0BAA2B,SAAQ,mBAAmB;IACrE,YAAY,EAAE,IAAI,EAAE,CAAA;CACrB"}

package/dist/browser/types/render/BlockChainRenderProps.d.ts

@@ -1,5 +1,4 @@
-import type { CreatableName } from '@xylabs/creatable';
-import type { Hash } from '@xylabs/hex';
+import type { CreatableName, Hash } from '@xylabs/sdk-js';
 import type { Payload, WithStorageMeta } from '@xyo-network/payload-model';
 import type { ChainId } from '@xyo-network/xl1-protocol';
 import type { PayloadMapRead } from '@xyo-network/xl1-protocol-sdk';

package/dist/browser/types/render/BlockChainRenderProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockChainRenderProps.d.ts","sourceRoot":"","sources":["../../../../src/types/render/BlockChainRenderProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC1E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAEnE,iEAAiE;AACjE,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,sDAAsD;AACtD,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAA;IACnD,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,EAAE,aAAa,CAAA;CACpB;AAED,uCAAuC;AACvC,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB,EAAE,WAAW;CAE7E;AAED,gFAAgF;AAChF,MAAM,WAAW,yBAAyB;IACxC,qBAAqB,CAAC,EAAE,qBAAqB,CAAA;IAC7C,KAAK,CAAC,EAAE,KAAK,CAAA;CACd"}
+{"version":3,"file":"BlockChainRenderProps.d.ts","sourceRoot":"","sources":["../../../../src/types/render/BlockChainRenderProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAA;AACzD,OAAO,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC1E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAEnE,iEAAiE;AACjE,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,sDAAsD;AACtD,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAA;IACnD,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,EAAE,aAAa,CAAA;CACpB;AAED,uCAAuC;AACvC,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB,EAAE,WAAW;CAE7E;AAED,gFAAgF;AAChF,MAAM,WAAW,yBAAyB;IACxC,qBAAqB,CAAC,EAAE,qBAAqB,CAAA;IAC7C,KAAK,CAAC,EAAE,KAAK,CAAA;CACd"}

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.11",
   "description": "XYO Layer One React SDK Blockchain",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -45,13 +45,7 @@
   },
   "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/axios": "~5.0.33",
     "@xylabs/react-animation": "~7.1.8",
     "@xylabs/react-error": "~7.1.8",
     "@xylabs/react-flexbox": "~7.1.8",
@@ -59,49 +53,53 @@
     "@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",
-    "@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/module-model": "~5.1.21",
-    "@xyo-network/payload-builder": "~5.1.21",
-    "@xyo-network/payload-model": "~5.1.21",
+    "@xylabs/sdk-js": "~5.0.33",
+    "@xyo-network/account": "~5.1.22",
+    "@xyo-network/archivist-memory": "~5.1.22",
+    "@xyo-network/archivist-model": "~5.1.22",
+    "@xyo-network/boundwitness-builder": "~5.1.22",
+    "@xyo-network/boundwitness-model": "~5.1.22",
+    "@xyo-network/bridge-http": "~5.1.22",
+    "@xyo-network/chain-analyze": "~1.16.11",
+    "@xyo-network/chain-protocol": "~1.16.11",
+    "@xyo-network/chain-services": "~1.16.11",
+    "@xyo-network/chain-utils": "~1.16.11",
+    "@xyo-network/chain-wrappers": "~1.16.11",
+    "@xyo-network/module-model": "~5.1.22",
+    "@xyo-network/payload-builder": "~5.1.22",
+    "@xyo-network/payload-model": "~5.1.22",
     "@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.11",
+    "@xyo-network/react-chain-provider": "~1.16.11",
+    "@xyo-network/react-chain-shared": "~1.16.11",
+    "@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.11"
   },
   "devDependencies": {
     "@emotion/react": "~11.14.0",
     "@emotion/styled": "~11.14.1",
     "@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",
+    "@types/react": "~19.2.5",
+    "@xylabs/sdk-js": "~5.0.33",
     "@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/api-models": "~5.1.22",
+    "@xyo-network/xl1-network-model": "~1.16.11",
+    "@xyo-network/xl1-rpc": "~1.16.11",
+    "axios": "^1.13.2",
     "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"
   },
@@ -110,6 +108,7 @@
     "@emotion/styled": "~11",
     "@mui/icons-material": ">=6 <8",
     "@mui/material": ">=6 <8",
+    "axios": "^1",
     "react": "~19",
     "react-dom": "~19",
     "react-router-dom": "^7"

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryFn } from '@storybook/react-vite'
+import type { Address } from '@xylabs/sdk-js'
+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 { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { type Address } from '@xylabs/sdk-js'
+import { isDefined } from '@xylabs/sdk-js'
+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/sdk-js'
+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/sdk-js'
+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,52 @@
+import {
+  Link,
+  TableCell, type TableCellProps, Tooltip,
+} 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-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/BlockHeadingFlexbox.tsx

@@ -1,5 +1,5 @@
-import type { Hash } from '@xylabs/hex'
 import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import type { Hash } from '@xylabs/sdk-js'
 import { BWVerification, HashHeadingPaper } from '@xyo-network/react-boundwitness-plugin'
 import { usePayloadHash } from '@xyo-network/react-shared'
 import React from 'react'

package/src/components/block/ProducerChip.tsx

@@ -1,8 +1,8 @@
 import type { ChipProps } from '@mui/material'
 import { Chip } from '@mui/material'
-import { EthAddressWrapper } from '@xylabs/eth-address'
-import { toAddress } from '@xylabs/hex'
-import { isString, isUndefined } from '@xylabs/typeof'
+import {
+  EthAddressWrapper, isString, isUndefined, toAddress,
+} from '@xylabs/sdk-js'
 import { BlockiesAvatar } from '@xyo-network/react-chain-blockies'
 import type { HydratedBlock } from '@xyo-network/xl1-protocol'
 import React, { useMemo } from 'react'

package/src/components/block/hooks/useStaticBlockComponents.ts

@@ -1,5 +1,5 @@
 import { usePromise } from '@xylabs/react-promise'
-import { isDefined } from '@xylabs/typeof'
+import { isDefined } from '@xylabs/sdk-js'
 import type { XyoChainIteratorParams } from '@xyo-network/chain-services'
 import type { HydratedBlock } from '@xyo-network/xl1-protocol'
 import type { ComponentType } from 'react'

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/block/table/cell/Epoch.tsx

@@ -2,7 +2,7 @@ import {
   Skeleton,
   TableCell, Tooltip, Typography,
 } from '@mui/material'
-import { isDefined } from '@xylabs/typeof'
+import { isDefined } from '@xylabs/sdk-js'
 import React from 'react'
 
 import {

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

@@ -1,7 +1,7 @@
 import {
   Link, TableCell, Tooltip,
 } from '@mui/material'
-import { isHash } from '@xylabs/hex'
+import { isHash } from '@xylabs/sdk-js'
 import { usePayloadRootHash } from '@xyo-network/react-shared'
 import React, { useState } from 'react'
 

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

@@ -3,9 +3,8 @@ import {
   Button,
   Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TableCell,
 } from '@mui/material'
-import { ellipsize } from '@xylabs/eth-address'
-import { isHash } from '@xylabs/hex'
 import { FlexRow } from '@xylabs/react-flexbox'
+import { ellipsize, isHash } from '@xylabs/sdk-js'
 import { JsonViewerEx } from '@xyo-network/react-payload-raw-info'
 import { usePayloadRootHash } from '@xyo-network/react-shared'
 import React, { useState } from 'react'

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

@@ -2,7 +2,7 @@ import { Error } from '@mui/icons-material'
 import {
   Link, TableCell, Tooltip,
 } from '@mui/material'
-import type { Hash } from '@xylabs/hex'
+import type { Hash } from '@xylabs/sdk-js'
 import React from 'react'
 
 import { usePayloadCountsFromBlock } from '../../hooks/index.ts'

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

@@ -2,7 +2,7 @@ import { Error } from '@mui/icons-material'
 import {
   Link, TableCell, Tooltip,
 } from '@mui/material'
-import type { Hash } from '@xylabs/hex'
+import type { Hash } from '@xylabs/sdk-js'
 import React, { useMemo } from 'react'
 
 import { useTxsFromBlock } from '../../../../hooks/index.ts'

package/src/components/chain/render/static/flexbox/Flexbox.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryFn } from '@storybook/react-vite'
-import type { CreatableName } from '@xylabs/creatable'
+import type { CreatableName } from '@xylabs/sdk-js'
 import React from 'react'
 
 import { ChainArchivistDecorator } from '../../../../../stories/index.ts'