@xyo-network/react-chain-blockchain 1.16.12 → 1.16.14

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

@@ -1 +1 @@
-{"version":3,"file":"ChainArchivistDelayedInsertDecorator.d.ts","sourceRoot":"","sources":["../../../src/stories/ChainArchivistDelayedInsertDecorator.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAetD,eAAO,MAAM,oCAAoC,EAAE,SAsDlD,CAAA"}
+{"version":3,"file":"ChainArchivistDelayedInsertDecorator.d.ts","sourceRoot":"","sources":["../../../src/stories/ChainArchivistDelayedInsertDecorator.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAetD,eAAO,MAAM,oCAAoC,EAAE,SAuDlD,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-blockchain",
-  "version": "1.16.12",
+  "version": "1.16.14",
   "description": "XYO Layer One React SDK Blockchain",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@storybook/react-vite": "~10.0.7",
-    "@xylabs/axios": "~5.0.33",
+    "@xylabs/axios": "~5.0.34",
     "@xylabs/react-animation": "~7.1.8",
     "@xylabs/react-error": "~7.1.8",
     "@xylabs/react-flexbox": "~7.1.8",
@@ -53,25 +53,25 @@
     "@xylabs/react-quick-tip-button": "~7.1.8",
     "@xylabs/react-shared": "~7.1.8",
     "@xylabs/react-theme": "~7.1.8",
-    "@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.12",
-    "@xyo-network/chain-protocol": "~1.16.12",
-    "@xyo-network/chain-services": "~1.16.12",
-    "@xyo-network/chain-utils": "~1.16.12",
-    "@xyo-network/chain-wrappers": "~1.16.12",
-    "@xyo-network/module-model": "~5.1.22",
-    "@xyo-network/payload-builder": "~5.1.22",
-    "@xyo-network/payload-model": "~5.1.22",
+    "@xylabs/sdk-js": "~5.0.34",
+    "@xyo-network/account": "~5.1.23",
+    "@xyo-network/archivist-memory": "~5.1.23",
+    "@xyo-network/archivist-model": "~5.1.23",
+    "@xyo-network/boundwitness-builder": "~5.1.23",
+    "@xyo-network/boundwitness-model": "~5.1.23",
+    "@xyo-network/bridge-http": "~5.1.23",
+    "@xyo-network/chain-analyze": "~1.16.14",
+    "@xyo-network/chain-protocol": "~1.16.14",
+    "@xyo-network/chain-services": "~1.16.14",
+    "@xyo-network/chain-utils": "~1.16.14",
+    "@xyo-network/chain-wrappers": "~1.16.14",
+    "@xyo-network/module-model": "~5.1.23",
+    "@xyo-network/payload-builder": "~5.1.23",
+    "@xyo-network/payload-model": "~5.1.23",
     "@xyo-network/react-boundwitness-plugin": "~7.3.10",
-    "@xyo-network/react-chain-blockies": "~1.16.12",
-    "@xyo-network/react-chain-provider": "~1.16.12",
-    "@xyo-network/react-chain-shared": "~1.16.12",
+    "@xyo-network/react-chain-blockies": "~1.16.14",
+    "@xyo-network/react-chain-provider": "~1.16.14",
+    "@xyo-network/react-chain-shared": "~1.16.14",
     "@xyo-network/react-error": "~7.3.10",
     "@xyo-network/react-event": "~7.3.10",
     "@xyo-network/react-payload-raw-info": "~7.3.10",
@@ -79,7 +79,7 @@
     "@xyo-network/react-shared": "~7.3.10",
     "@xyo-network/react-table": "~7.3.10",
     "@xyo-network/xl1-protocol": "~1.13.11",
-    "@xyo-network/xl1-protocol-sdk": "~1.16.12"
+    "@xyo-network/xl1-protocol-sdk": "~1.16.14"
   },
   "devDependencies": {
     "@emotion/react": "~11.14.0",
@@ -87,14 +87,14 @@
     "@mui/icons-material": "~7.3.5",
     "@mui/material": "~7.3.5",
     "@types/react": "~19.2.5",
-    "@xylabs/sdk-js": "~5.0.33",
+    "@xylabs/sdk-js": "~5.0.34",
     "@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.22",
-    "@xyo-network/xl1-network-model": "~1.16.12",
-    "@xyo-network/xl1-rpc": "~1.16.12",
+    "@xyo-network/api-models": "~5.1.23",
+    "@xyo-network/xl1-network-model": "~1.16.14",
+    "@xyo-network/xl1-rpc": "~1.16.14",
     "axios": "^1.13.2",
     "eslint": "^9.39.1",
     "react": "~19.2.0",

package/src/components/account/BalanceHistoryFlexbox.tsx

@@ -5,11 +5,12 @@ 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 { AttoXL1 } from '@xyo-network/xl1-protocol'
 import type { XyoViewer } from '@xyo-network/xl1-protocol-sdk'
 import React from 'react'
 
-import { AccountBalanceHistoryTable } from './table/index.ts'
+import { formatBalanceMagnitude } from './helpers/index.ts'
+import { AccountBalanceHistoryTableEx } from './table/index.ts'
 
 export interface AccountBalanceHistoryFlexBoxProps extends FlexBoxProps {
   address?: Address
@@ -25,19 +26,6 @@ export const AccountBalanceHistoryFlexBox: React.FC<AccountBalanceHistoryFlexBox
     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}>
@@ -58,7 +46,7 @@ export const AccountBalanceHistoryFlexBox: React.FC<AccountBalanceHistoryFlexBox
                 </Typography>
               )
             : null}
-          <AccountBalanceHistoryTable history={history} />
+          <AccountBalanceHistoryTableEx history={history} />
         </FlexCol>
       )
     : null

package/src/components/account/helpers/formatBalanceMagnitude.ts

@@ -0,0 +1,14 @@
+import { type AttoXL1, XL1Amount } from '@xyo-network/xl1-protocol'
+
+export const formatBalanceMagnitude = (set: [AttoXL1, AttoXL1]) => {
+  const [received, sent] = set
+  const netBalance = received - sent
+  return netBalance < 0n ? `-${formatBalance(sent - received)}` : formatBalance(netBalance)
+}
+
+const formatBalance = (balance: bigint) => {
+  const xl1Amount = new XL1Amount(balance)
+  return xl1Amount.toString(undefined, {
+    places: 18, maxDecimal: 12, maxCharacters: 12, minDecimals: 1, locale: navigator.language,
+  })
+}

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

@@ -0,0 +1 @@
+export * from './formatBalanceMagnitude.ts'

package/src/components/account/index.ts

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

package/src/components/account/table/{BalanceHistoryTable.stories.tsx → BalanceHistoryTableEx.stories.tsx}

@@ -10,11 +10,11 @@ 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'
+import { AccountBalanceHistoryTableEx } from './BalanceHistoryTableEx.tsx'
 
 export default {
-  title: 'AccountBalanceHistory/Table',
-  component: AccountBalanceHistoryTable,
+  title: 'AccountBalanceHistory/TableEx',
+  component: AccountBalanceHistoryTableEx,
 } as Meta
 
 const TEST_ADDRESS = 'aa9401662e9cd3ce8bb8a6ab92a35ed83e85ac67' as Address
@@ -26,19 +26,19 @@ const useFetchBalanceHistory = (address?: Address) => {
   return useAccountBalanceHistory(address, viewer)
 }
 
-const Template: StoryFn<typeof AccountBalanceHistoryTable> = (args) => {
+const Template: StoryFn<typeof AccountBalanceHistoryTableEx> = (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} />
+      <AccountBalanceHistoryTableEx history={history?.history} {...args} />
     </>
   )
 }
 
-const TemplateLinked: StoryFn<typeof AccountBalanceHistoryTable> = (args) => {
+const TemplateLinked: StoryFn<typeof AccountBalanceHistoryTableEx> = (args) => {
   const [event, setEvent] = useState<Event>()
   const [ref] = useEvent<HTMLTableElement>((noun, verb, data) => setEvent({
     noun, verb, data,
@@ -51,7 +51,7 @@ const TemplateLinked: StoryFn<typeof AccountBalanceHistoryTable> = (args) => {
     <>
       <ErrorRender error={error} scope="AccountBalanceHistoryTableStory" />
       {loading === 'pending' ? <LinearProgress /> : null}
-      <AccountBalanceHistoryTable history={history?.history} ref={ref} {...args} />
+      <AccountBalanceHistoryTableEx history={history?.history} ref={ref} {...args} />
       <Snackbar autoHideDuration={5000} open={!!event} onClose={() => setEvent(undefined)}>
         <Alert>
           <AlertTitle>

package/src/components/account/table/{BalanceHistoryTable.tsx → BalanceHistoryTableEx.tsx}

@@ -1,25 +1,26 @@
-import type { TableProps } from '@mui/material'
 import {
-  Table, TableBody, TableCell, TableHead, TableRow,
+  TableBody, TableCell, TableHead, TableRow,
 } from '@mui/material'
 import { isDefined } from '@xylabs/sdk-js'
 import type { AccountBalanceHistoryItemFormatted } from '@xyo-network/react-chain-provider'
+import type { TableExProps } from '@xyo-network/react-table'
+import { TableEx } from '@xyo-network/react-table'
 import React from 'react'
 
 import { BalanceHistoryTableRow } from './BalanceHistoryTableRow.tsx'
 import { TableHeadingLabels } from './types/index.ts'
 
-export interface AccountBalanceHistoryTableProps extends TableProps {
+export interface AccountBalanceHistoryTableExProps extends TableExProps {
   history?: AccountBalanceHistoryItemFormatted[]
   linked?: boolean
 }
 
-export const AccountBalanceHistoryTable: React.FC<AccountBalanceHistoryTableProps> = ({
+export const AccountBalanceHistoryTableEx: React.FC<AccountBalanceHistoryTableExProps> = ({
   history, linked, ...props
 }) => {
   return isDefined(history)
     ? (
-        <Table {...props}>
+        <TableEx {...props}>
           <TableHead>
             <TableRow>
               {TableHeadingLabels.map(heading => (
@@ -30,7 +31,7 @@ export const AccountBalanceHistoryTable: React.FC<AccountBalanceHistoryTableProp
           <TableBody>
             {history?.map(row => <BalanceHistoryTableRow key={row.key} linked={linked} row={row} />)}
           </TableBody>
-        </Table>
+        </TableEx>
       )
     : null
 }

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

@@ -7,9 +7,11 @@ 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 { AddressTableCell, HashTableCell } from './cell/index.ts'
 import { RawAmountTableCell } from './RawAmountTableCell.tsx'
 
+// const TEXT_TX_HASH = '123456789abcdef123456789abcdef123456789abcdef123456789abcdef1234' as Hash
+
 export interface BalanceHistoryTableRowProps extends TableRowProps {
   linked?: boolean
   row: AccountBalanceHistoryItemFormatted
@@ -26,7 +28,7 @@ export const BalanceHistoryTableRow: React.FC<BalanceHistoryTableRowProps> = ({
 
   return (
     <TableRow key={key} {...props}>
-      <TableCell>{txHash || 'N/A'}</TableCell>
+      <HashTableCell hash={txHash} toolTipTitle={`Transaction Hash: ${txHash}`} {...linkedTableCallProps} />
       <BlockNumberTableCellInner blockNumber={blockNumber} {...linkedTableCallProps} />
       <BlockEpochTableCellInner epoch={timestamp} {...linkedTableCallProps} />
       <AddressTableCell address={from} toolTipTitle={`From Address: ${from}`} {...linkedTableCallProps} />

package/src/components/account/table/{AddressTableCell.tsx → cell/AddressTableCell.tsx}

@@ -2,7 +2,7 @@ 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'
+import { BlockAddressChip } from '../../../block/index.ts'
 
 export interface AddressTableCellProps extends TableCellProps {
   address?: string

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

@@ -0,0 +1,44 @@
+import type { TableCellProps } from '@mui/material'
+import {
+  Link, TableCell, Tooltip,
+  Typography,
+} from '@mui/material'
+import {
+  ellipsize, type Hash, isDefined,
+} from '@xylabs/sdk-js'
+import { useEvent } from '@xyo-network/react-event'
+
+import type { BalanceHistoryEventNouns } from '../types/index.ts'
+
+export interface HashTableCellProps extends TableCellProps {
+  hash?: Hash
+  linked?: boolean
+  toolTipTitle?: string
+}
+
+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 shortenedHash = isDefined(hash) ? ellipsize(hash as string, 6) : 'N/A'
+  return (
+    <TableCell ref={ref} {...props}>
+      {hash
+        ? (
+            <Tooltip title={toolTipTitle}>
+              <Typography component="span" variant="body1">
+                {linked
+                  ? (
+                      <Link onClick={handleClick} sx={{ cursor: 'pointer' }}>
+                        {shortenedHash}
+                      </Link>
+                    )
+                  : shortenedHash}
+              </Typography>
+            </Tooltip>
+          )
+        : 'N/A'}
+    </TableCell>
+  )
+}

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

@@ -0,0 +1,2 @@
+export * from './AddressTableCell.tsx'
+export * from './HashTableCell.tsx'

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

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

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

@@ -1,7 +1,7 @@
 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 BalanceHistoryEventNouns = ExtendEventNoun<'amount' | 'blockNumber' | 'tx-hash'>
 
 export type TableHeadingLabels = 'Tx Hash' | 'BlockNumber' | 'Timestamp' | 'From' | 'To' | 'Amount' | 'Debug'
 export type TableHeadings = { [key in keyof AccountBalanceHistoryItemFormatted]: TableHeadingLabels }

package/src/stories/ChainArchivistDelayedInsertDecorator.tsx

@@ -54,13 +54,14 @@ export const ChainArchivistDelayedInsertDecorator: Decorator = (Story, context)
     const chainId = await getChainId()
     return { chainArchivist, chainId }
   }, [chainArchivist])
+  const { args } = context
 
   const props = {
     ...context,
     args: {
-      ...context.args,
+      ...args,
       blockChainRenderProps: {
-        ...(context.args.blockChainRenderProps as BlockChainRenderBaseProps),
+        ...(args.blockChainRenderProps as BlockChainRenderBaseProps),
         ...blockChainRenderProps,
         head: randomBlockChain?.[0][0]?._hash,
       },

package/dist/browser/components/account/table/AddressTableCell.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AddressTableCell.d.ts","sourceRoot":"","sources":["../../../../../src/components/account/table/AddressTableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAMnD,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAY5D,CAAA"}

package/dist/browser/components/account/table/BalanceHistoryTable.d.ts

@@ -1,9 +0,0 @@
-import type { TableProps } from '@mui/material';
-import type { AccountBalanceHistoryItemFormatted } from '@xyo-network/react-chain-provider';
-import React from 'react';
-export interface AccountBalanceHistoryTableProps extends TableProps {
-    history?: AccountBalanceHistoryItemFormatted[];
-    linked?: boolean;
-}
-export declare const AccountBalanceHistoryTable: React.FC<AccountBalanceHistoryTableProps>;
-//# sourceMappingURL=BalanceHistoryTable.d.ts.map

package/dist/browser/components/account/table/BalanceHistoryTable.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BalanceHistoryTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/account/table/BalanceHistoryTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAK/C,OAAO,KAAK,EAAE,kCAAkC,EAAE,MAAM,mCAAmC,CAAA;AAC3F,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,WAAW,+BAAgC,SAAQ,UAAU;IACjE,OAAO,CAAC,EAAE,kCAAkC,EAAE,CAAA;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAAC,+BAA+B,CAmBhF,CAAA"}

package/dist/browser/components/account/table/BalanceHistoryTable.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BalanceHistoryTable.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/account/table/BalanceHistoryTable.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;wBAcrD,IAAI;AAHT,wBAGS;AAmDT,QAAA,MAAM,OAAO,kKAAoB,CAAA;AAGjC,QAAA,MAAM,UAAU,kKAA0B,CAAA;AAG1C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,CAAA"}