@xyo-network/react-chain-transfer-plugin 1.20.14 → 1.20.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-transfer-plugin",
-  "version": "1.20.14",
+  "version": "1.20.16",
   "description": "XYO Layer One API",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -25,80 +25,195 @@
       "types": "./dist/browser/index.d.ts",
       "browser": {
         "types": "./dist/browser/index.d.ts",
-        "source": "./src/index.ts",
         "default": "./dist/browser/index.mjs"
       },
-      "source": "./src/index.ts",
       "default": "./dist/browser/index.mjs"
     },
     "./Plugin": {
       "types": "./dist/browser/transfer/Plugin.d.ts",
-      "source": "./src/transfer/Plugin.ts",
       "default": "./dist/browser/transfer/Plugin.mjs"
     },
     "./package.json": "./package.json"
   },
   "module": "./dist/browser/index.mjs",
-  "source": "./src/index.ts",
   "types": "./dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src",
     "!**/*.bench.*",
     "!**/*.spec.*",
-    "!**/*.test.*"
+    "!**/*.test.*",
+    "README.md"
   ],
   "dependencies": {
-    "@xylabs/react-flexbox": "~7.1.17",
-    "@xyo-network/react-chain-blockies": "~1.20.14",
-    "@xyo-network/react-chain-network": "~1.20.14",
+    "@xylabs/react-flexbox": "~7.1.20",
     "@xyo-network/react-event": "~7.5.8",
-    "@xyo-network/react-payload-plugin": "~7.5.8"
+    "@xyo-network/react-payload-plugin": "~7.5.8",
+    "@xyo-network/xl1-sdk": "^1.26.19",
+    "@xyo-network/react-chain-network": "~1.20.16"
   },
   "devDependencies": {
     "@emotion/react": "~11.14.0",
     "@emotion/styled": "~11.14.1",
     "@mui/icons-material": "^7.3.9",
     "@mui/material": "^7.3.9",
-    "@storybook/react-vite": "^10.3.3",
+    "@opentelemetry/api": "^1",
+    "@storybook/react-vite": "^10.3.5",
+    "@textea/json-viewer": "^4",
+    "@types/node": "^25.5.2",
     "@types/react": "~19.2.14",
-    "@xylabs/sdk-js": "~5.0.90",
-    "@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/sdk-js": "~5.3.20",
-    "@xyo-network/xl1-sdk": "~1.26.11",
-    "axios": "^1.13.6",
-    "dotenv": "~17.3.1",
+    "@xylabs/express": "^5.0.95",
+    "@xylabs/mongo": "^5.0.95",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-dialogs": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/react-quick-tip-button": "~7.1.20",
+    "@xylabs/sdk-js": "~5.0.95",
+    "@xylabs/ts-scripts-common": "~7.9.3",
+    "@xylabs/ts-scripts-pnpm": "~7.9.3",
+    "@xylabs/tsconfig": "~7.9.3",
+    "@xylabs/tsconfig-dom": "~7.9.3",
+    "@xylabs/tsconfig-react": "~7.9.3",
+    "@xylabs/zod": "~5.0.95",
+    "@xyo-network/account": "~5.3.30",
+    "@xyo-network/account-model": "~5.3.30",
+    "@xyo-network/api-models": "~5.3.30",
+    "@xyo-network/archivist-abstract": "~5.3.30",
+    "@xyo-network/archivist-generic": "~5.3.30",
+    "@xyo-network/archivist-memory": "~5.3.30",
+    "@xyo-network/archivist-model": "~5.3.30",
+    "@xyo-network/archivist-view": "~5.3.30",
+    "@xyo-network/archivist-wrapper": "~5.3",
+    "@xyo-network/boundwitness-builder": "~5.3.30",
+    "@xyo-network/boundwitness-validator": "~5.3.30",
+    "@xyo-network/bridge-abstract": "~5.3.30",
+    "@xyo-network/bridge-model": "~5.3.30",
+    "@xyo-network/config-payload-plugin": "~5.3.30",
+    "@xyo-network/data": "~5.3.30",
+    "@xyo-network/diviner-abstract": "~5.3",
+    "@xyo-network/diviner-boundwitness-memory": "~5.3.30",
+    "@xyo-network/diviner-identity": "~5.3.30",
+    "@xyo-network/diviner-model": "~5.3.30",
+    "@xyo-network/diviner-payload-generic": "~5.3.30",
+    "@xyo-network/diviner-payload-model": "~5.3.30",
+    "@xyo-network/diviner-wrapper": "~5.3",
+    "@xyo-network/dns": "~5.3.30",
+    "@xyo-network/domain-payload-plugin": "~5.3.30",
+    "@xyo-network/elliptic": "~5.3.30",
+    "@xyo-network/hash": "~5.3.30",
+    "@xyo-network/huri": "~5.3.30",
+    "@xyo-network/manifest-model": "~5.3.30",
+    "@xyo-network/module-abstract": "~5.3.30",
+    "@xyo-network/module-model": "~5.3.30",
+    "@xyo-network/module-model-mongodb": "~5.3",
+    "@xyo-network/module-resolver": "~5.3.30",
+    "@xyo-network/module-wrapper": "~5.3",
+    "@xyo-network/network": "~5.3.30",
+    "@xyo-network/node-abstract": "~5.3.30",
+    "@xyo-network/node-memory": "~5.3.30",
+    "@xyo-network/node-model": "~5.3.30",
+    "@xyo-network/node-view": "~5.3.30",
+    "@xyo-network/node-wrapper": "~5.3",
+    "@xyo-network/payload-builder": "~5.3.30",
+    "@xyo-network/payload-model": "~5.3.30",
+    "@xyo-network/payload-validator": "~5.3.30",
+    "@xyo-network/previous-hash-store-model": "~5.3.30",
+    "@xyo-network/sdk-js": "~5.3.30",
+    "@xyo-network/sentinel-abstract": "~5.3.30",
+    "@xyo-network/sentinel-memory": "~5.3.30",
+    "@xyo-network/sentinel-model": "~5.3.30",
+    "@xyo-network/wallet-model": "~5.3.30",
+    "@xyo-network/wasm": "~5.3.30",
+    "@xyo-network/witness-adhoc": "~5.3.30",
+    "@xyo-network/witness-model": "~5.3.30",
+    "ajv": "^8",
+    "axios": "^1.14.0",
+    "dotenv": "~17.4.1",
+    "esbuild": "*",
     "ethers": "^6.16.0",
+    "mongodb": "^7.1.1",
+    "pako": "~2.1.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "storybook": "^10.3.3",
+    "react-router-dom": "^7",
+    "rollbar": "~2.26.4",
+    "storybook": "^10.3.5",
     "typescript": "~5.9.3",
-    "vite": "^8.0.3",
-    "vitest": "^4.1.2",
-    "zod": "^4.3.6"
+    "vite": "^8.0.7",
+    "vitest": "^4.1.3",
+    "zod": "^4.3.6",
+    "@xyo-network/chain-telemetry": "~1.20.16",
+    "@xyo-network/chain-services": "~1.20.16",
+    "@xyo-network/react-chain-blockies": "~1.20.16",
+    "@xyo-network/react-chain-client": "~1.20.16"
   },
   "peerDependencies": {
-    "@mui/material": "^7",
-    "@xylabs/sdk-js": "^5",
-    "@xyo-network/sdk-js": "^5",
-    "@xyo-network/xl1-sdk": "^1",
-    "axios": "^1",
-    "react": "~19",
-    "zod": "^4"
+    "@mui/material": "^7.3.9",
+    "@xylabs/express": "^5.0.95",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/react-quick-tip-button": "~7.1.20",
+    "@xylabs/sdk-js": "~5.0.93",
+    "@xylabs/zod": "~5.0.95",
+    "@xyo-network/account": "~5.3.30",
+    "@xyo-network/account-model": "~5.3.30",
+    "@xyo-network/api-models": "~5.3.30",
+    "@xyo-network/archivist-abstract": "~5.3.30",
+    "@xyo-network/archivist-generic": "~5.3.30",
+    "@xyo-network/archivist-memory": "~5.3.30",
+    "@xyo-network/archivist-model": "~5.3.30",
+    "@xyo-network/archivist-view": "~5.3.30",
+    "@xyo-network/boundwitness-builder": "~5.3.30",
+    "@xyo-network/boundwitness-validator": "~5.3.30",
+    "@xyo-network/bridge-abstract": "~5.3.30",
+    "@xyo-network/bridge-model": "~5.3.30",
+    "@xyo-network/config-payload-plugin": "~5.3.30",
+    "@xyo-network/data": "~5.3.30",
+    "@xyo-network/diviner-boundwitness-memory": "~5.3.30",
+    "@xyo-network/diviner-identity": "~5.3.30",
+    "@xyo-network/diviner-model": "~5.3.30",
+    "@xyo-network/diviner-payload-generic": "~5.3.30",
+    "@xyo-network/diviner-payload-model": "~5.3.30",
+    "@xyo-network/dns": "~5.3.30",
+    "@xyo-network/domain-payload-plugin": "~5.3.30",
+    "@xyo-network/elliptic": "~5.3.30",
+    "@xyo-network/hash": "~5.3.30",
+    "@xyo-network/huri": "~5.3.30",
+    "@xyo-network/manifest-model": "~5.3.30",
+    "@xyo-network/module-abstract": "~5.3.30",
+    "@xyo-network/module-model": "~5.3.30",
+    "@xyo-network/module-model-mongodb": "~5.3",
+    "@xyo-network/module-resolver": "~5.3.30",
+    "@xyo-network/network": "~5.3.30",
+    "@xyo-network/node-abstract": "~5.3.30",
+    "@xyo-network/node-memory": "~5.3.30",
+    "@xyo-network/node-model": "~5.3.30",
+    "@xyo-network/node-view": "~5.3.30",
+    "@xyo-network/payload-builder": "~5.3.30",
+    "@xyo-network/payload-model": "~5.3.30",
+    "@xyo-network/payload-validator": "~5.3.30",
+    "@xyo-network/previous-hash-store-model": "~5.3.30",
+    "@xyo-network/sdk-js": "~5.3.25",
+    "@xyo-network/sentinel-abstract": "~5.3.30",
+    "@xyo-network/sentinel-memory": "~5.3.30",
+    "@xyo-network/sentinel-model": "~5.3.30",
+    "@xyo-network/wallet-model": "~5.3.30",
+    "@xyo-network/wasm": "~5.3.30",
+    "@xyo-network/witness-adhoc": "~5.3.30",
+    "@xyo-network/witness-model": "~5.3.30",
+    "pako": "~2.1.0",
+    "react": "^19.2.4",
+    "@xyo-network/chain-services": "~1.20.16",
+    "@xyo-network/react-chain-blockies": "~1.20.16",
+    "@xyo-network/chain-telemetry": "~1.20.16",
+    "@xyo-network/react-chain-client": "~1.20.16"
   },
-  "packageManager": "yarn@4.6.0",
   "engines": {
-    "node": ">=22"
+    "node": ">=24"
   },
   "volta": {
-    "node": "22.5.1",
-    "yarn": "4.6.0"
+    "node": ">=24"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/gloabl.d.ts

@@ -1 +0,0 @@
-import '@mui/material/themeCssVarsAugmentation'

package/src/index.ts

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

package/src/transfer/Plugin.ts

@@ -1,17 +0,0 @@
-import type { PayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
-import { createPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
-import type { Payload } from '@xyo-network/sdk-js'
-import { TransferSchema } from '@xyo-network/xl1-sdk'
-
-import { TransferRenderBoxDetails } from './box/index.ts'
-import { TransferRenderCard } from './card/index.ts'
-
-export const TransferRenderPlugin: PayloadRenderPlugin = {
-  ...createPayloadRenderPlugin({
-    canRender: (payload?: Payload) => payload?.schema === TransferSchema,
-    components: { box: { detailsBox: TransferRenderBoxDetails, detailsCard: TransferRenderCard } },
-    name: 'Transfer',
-  }),
-}
-
-export default TransferRenderPlugin

package/src/transfer/box/Details.stories.tsx

@@ -1,52 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import {
-  type Address,
-  type Hex,
-  ZERO_ADDRESS,
-} from '@xylabs/sdk-js'
-import { useEvent } from '@xyo-network/react-event'
-import { type Transfer, TransferSchema } from '@xyo-network/xl1-sdk'
-import React from 'react'
-
-import { TransferRenderBoxDetails } from './Details.tsx'
-
-const transfer: Transfer = {
-  schema: TransferSchema,
-  epoch: 1_755_723_852_247,
-  from: ZERO_ADDRESS,
-  transfers: {
-    '1111111111111111111111111111111111111111': '1b1ae4d6e2ef500000',
-    '1111111111111111111111111111111111111112': '5150ae84a8cdf00000',
-    '1111111111111111111111111111111111111113': '989680',
-    '1111111111111111111111111111111111111114': '1b1ae4d6e2ef500000',
-  } as Record<Address, Hex>,
-}
-
-export default {
-  title: 'Payloads/Transfer/Box/Details',
-  component: TransferRenderBoxDetails,
-} as Meta
-
-const Template: StoryFn<typeof TransferRenderBoxDetails> = (args) => {
-  const [ref] = useEvent<HTMLDivElement>((noun, verb, data) => {
-    alert(`${noun} ${verb} ${data}`)
-  })
-  return (
-    <span ref={ref}>
-      <TransferRenderBoxDetails {...args} />
-    </span>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithValue = Template.bind({})
-WithValue.args = { payload: transfer }
-
-const WithOptions = Template.bind({})
-WithOptions.args = { payload: transfer, options: { links: new Set(['address']) } }
-
-export {
-  Default, WithOptions, WithValue,
-}

package/src/transfer/box/Details.tsx

@@ -1,28 +0,0 @@
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol } from '@xylabs/react-flexbox'
-import type { PayloadDetailsRenderProps } from '@xyo-network/react-payload-plugin'
-import type { Payload } from '@xyo-network/sdk-js'
-import React from 'react'
-
-import { TransferRenderCard } from '../card/index.ts'
-import type { TransferRenderOptions } from '../lib/index.ts'
-
-export interface TransferRenderBoxDetailsProps extends PayloadDetailsRenderProps, FlexBoxProps {
-  options?: TransferRenderOptions
-  payload?: Payload
-}
-
-export const TransferRenderBoxDetails: React.FC<TransferRenderBoxDetailsProps> = ({
-  options,
-  payload,
-  ...props
-}) => {
-  return (
-    <FlexCol {...props}>
-      <TransferRenderCard
-        options={options}
-        payload={payload}
-      />
-    </FlexCol>
-  )
-}

package/src/transfer/box/index.ts

@@ -1 +0,0 @@
-export * from './Details.tsx'

package/src/transfer/card/ListItem.tsx

@@ -1,58 +0,0 @@
-import {
-  ListItem, ListItemAvatar, type ListItemProps, ListItemText, Stack, Typography,
-  useTheme,
-} from '@mui/material'
-import type { Address, Hex } from '@xylabs/sdk-js'
-import {
-  asAddress, hexToBigInt, isDefined,
-} from '@xylabs/sdk-js'
-import { BlockiesAvatar } from '@xyo-network/react-chain-blockies'
-import { NetworkIcon } from '@xyo-network/react-chain-network'
-import { MainNetworkIconString } from '@xyo-network/xl1-sdk'
-import React from 'react'
-
-import type { TransferCardHelper } from './TransferRenderCardHelper.tsx'
-
-export interface TransferRenderListItem extends ListItemProps {
-  address?: Address
-  amount?: Hex
-  transferCardHelper: TransferCardHelper
-}
-
-export const TransferRenderListItem: React.FC<TransferRenderListItem> = ({
-  address, amount, sx, transferCardHelper, ...props
-}) => {
-  const theme = useTheme()
-  return (
-    <ListItem sx={{ px: 0, ...sx }} {...props}>
-      <ListItemAvatar sx={{ minWidth: 30, mr: theme.spacing(2) }}>
-        <BlockiesAvatar title={address} sx={{ width: 30, height: 30 }} blockiesOptions={{ seed: address }} />
-      </ListItemAvatar>
-      <ListItemText sx={{ borderBottom: `1px solid ${theme.vars.palette.divider}` }}>
-        <Stack direction="row" gap={2} justifyContent="space-between" width="100%">
-          <Typography component="span" fontFamily="monospace" variant="caption">
-            {transferCardHelper.addressComponent(asAddress(address), 'To')}
-          </Typography>
-          <Typography
-            component="span"
-            fontFamily="monospace"
-            variant="caption"
-            title={isDefined(amount) ? hexToBigInt(amount).toString() : ''}
-            sx={{
-              display: 'inline-flex', alignItems: 'center', gap: theme.spacing(0.25),
-            }}
-          >
-            {transferCardHelper.formatAmountToXl1(amount)}
-            <NetworkIcon
-              icon={MainNetworkIconString}
-              style={{
-                width: 16, height: 16, display: 'inline-flex', alignItems: 'end',
-              }}
-            />
-            (XL1)
-          </Typography>
-        </Stack>
-      </ListItemText>
-    </ListItem>
-  )
-}

package/src/transfer/card/TransferRenderCard.stories.tsx

@@ -1,54 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import {
-  type Address,
-  type Hex,
-  toHex,
-  ZERO_ADDRESS,
-} from '@xylabs/sdk-js'
-import { useEvent } from '@xyo-network/react-event'
-import { type Transfer, TransferSchema } from '@xyo-network/xl1-sdk'
-import React from 'react'
-
-import { TransferRenderCard } from './TransferRenderCard.tsx'
-
-const transfer: Transfer = {
-  schema: TransferSchema,
-  epoch: 1_755_723_852_247,
-  from: ZERO_ADDRESS,
-  transfers: {
-    '1111111111111111111111111111111111111111': '1b1ae4d6e2ef500000',
-    '1111111111111111111111111111111111111112': '5150ae84a8cdf00000',
-    '1111111111111111111111111111111111111113': '989680',
-    '1111111111111111111111111111111111111114': '1b1ae4d6e2ef500000',
-    '1111111111111111111111111111111111111115': toHex(742n),
-  } as Record<Address, Hex>,
-}
-
-export default {
-  title: 'Payloads/Transfer/Card',
-  component: TransferRenderCard,
-} as Meta
-
-const Template: StoryFn<typeof TransferRenderCard> = (args) => {
-  const [ref] = useEvent<HTMLDivElement>((noun, verb, data) => {
-    alert(`${noun} ${verb} ${data}`)
-  })
-  return (
-    <span ref={ref}>
-      <TransferRenderCard {...args} />
-    </span>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithValue = Template.bind({})
-WithValue.args = { payload: transfer }
-
-const WithOptions = Template.bind({})
-WithOptions.args = { payload: transfer, options: { links: new Set(['address']) } }
-
-export {
-  Default, WithOptions, WithValue,
-}

package/src/transfer/card/TransferRenderCard.tsx

@@ -1,70 +0,0 @@
-import type { CardProps } from '@mui/material'
-import {
-  Card, CardContent, CardHeader, List, useMediaQuery, useTheme,
-} from '@mui/material'
-import { asAddress, asHex } from '@xylabs/sdk-js'
-import { BlockiesAvatar } from '@xyo-network/react-chain-blockies'
-import { useEvent } from '@xyo-network/react-event'
-import type { PayloadDetailsRenderProps } from '@xyo-network/react-payload-plugin'
-import type { Payload } from '@xyo-network/sdk-js'
-import { asTransfer } from '@xyo-network/xl1-sdk'
-import React, { useMemo } from 'react'
-
-import type { TransferRenderOptions } from '../lib/index.ts'
-import { TransferRenderListItem } from './ListItem.tsx'
-import { TransferCardHelper } from './TransferRenderCardHelper.tsx'
-import { TransferRenderTotalTypography } from './TransferRenderTotalTypography.tsx'
-
-export interface TransferRenderCardProps extends PayloadDetailsRenderProps, CardProps {
-  options?: TransferRenderOptions
-  payload?: Payload
-}
-
-export const TransferRenderCard: React.FC<TransferRenderCardProps> = ({
-  options, payload, ...props
-}) => {
-  const theme = useTheme()
-  const isMedium = useMediaQuery(theme => theme.breakpoints.up('sm'))
-  const [ref, dispatch] = useEvent<HTMLDivElement>()
-  const transfer = asTransfer(payload)
-  const { from, transfers } = transfer ?? {}
-
-  const transferCardHelper = useMemo(
-    () =>
-      new TransferCardHelper(isMedium, asTransfer(payload), dispatch, options),
-    [isMedium, payload, dispatch, options],
-  )
-
-  return (
-    <Card ref={ref} {...props}>
-      <CardHeader
-        title={transferCardHelper.addressComponent(from, 'From')}
-        slotProps={{
-          title: {
-            title: from, variant: 'body1', fontFamily: 'monospace',
-          },
-        }}
-        avatar={<BlockiesAvatar sx={{ width: 30, height: 30 }} title={from} blockiesOptions={{ seed: from }} />}
-      />
-      <CardContent sx={{ '&:last-child': { pb: theme.spacing(0) } }}>
-        <List>
-          {Object.entries(transfers ?? {}).map(([address, amount]) => (
-            <TransferRenderListItem
-              key={address}
-              address={asAddress(address)}
-              amount={asHex(amount)}
-              transferCardHelper={transferCardHelper}
-            />
-          ))}
-        </List>
-        <TransferRenderTotalTypography
-          transferRenderHelper={transferCardHelper}
-          sx={{
-            // pt matches bottom padding of the ListItem
-            width: '100%', justifyContent: 'end', pt: 0.666_666_666_7, pb: theme.spacing(2),
-          }}
-        />
-      </CardContent>
-    </Card>
-  )
-}

package/src/transfer/card/TransferRenderCardHelper.tsx

@@ -1,99 +0,0 @@
-import { Link } from '@mui/material'
-import type { Address, Hex } from '@xylabs/sdk-js'
-import {
-  ellipsize, hexToBigInt, isDefined, isHex, isUndefined,
-} from '@xylabs/sdk-js'
-import type { EventDispatch } from '@xyo-network/react-event'
-import {
-  type AttoXL1, type Transfer, XL1Places,
-} from '@xyo-network/xl1-sdk'
-import { XL1Amount } from '@xyo-network/xl1-sdk'
-import type { ReactNode } from 'react'
-import React from 'react'
-
-import type { TransferRenderOptions } from '../lib/index.ts'
-
-export class TransferCardHelper {
-  private _dispatch: EventDispatch | undefined
-  private _isMedium: boolean
-  private _options: TransferRenderOptions | undefined
-  private _payload: Transfer | undefined
-
-  constructor(
-    isMedium: boolean,
-    payload?: Transfer,
-    dispatch?: EventDispatch,
-    options?: TransferRenderOptions,
-  ) {
-    this._isMedium = isMedium
-    this._options = options
-    this._payload = payload
-    this._dispatch = dispatch
-  }
-
-  get dispatch() {
-    return this._dispatch
-  }
-
-  get isMedium() {
-    return this._isMedium
-  }
-
-  get linkedAddresses() {
-    return this.options?.links?.has('address')
-  }
-
-  get options() {
-    return this._options
-  }
-
-  get payload(): Transfer | undefined {
-    return this._payload
-  }
-
-  addressComponent(address?: Address, prefix?: string): ReactNode {
-    const resolvedPrefix = isDefined(prefix) ? `${prefix}: ` : ''
-    const text = `${this.formatAddress(address) ?? 'Unknown'}`
-    if (this.options?.links?.has('address')) {
-      return (
-        <>
-          {resolvedPrefix}
-          {' '}
-          <Link
-            onClick={() => {
-              this.dispatch?.('address', 'click', address)
-            }}
-            sx={{ cursor: 'pointer' }}
-          >
-            {text}
-          </Link>
-        </>
-      )
-    }
-    return `${resolvedPrefix}${text}`
-  }
-
-  formatAddress(address?: Address): string {
-    return (address ? (this.isMedium ? address : ellipsize(address, 5)) : '')
-  }
-
-  formatAmountToXl1(amount?: Hex | bigint): string {
-    if (isUndefined(amount)) return ''
-    const amountBigInt = isHex(amount) ? hexToBigInt(amount) : amount
-    const xl1Amount = XL1Amount.fromAtto(amountBigInt as AttoXL1).toString(Number(XL1Places.xl1), {
-      maxDecimal: 18, maxCharacters: 19, minDecimals: 0, locale: navigator.language,
-    })
-    return xl1Amount
-  }
-
-  totalTransferred() {
-    if (isUndefined(this.payload?.transfers)) return '0'
-    let total = 0n
-    for (const [, amount] of Object.entries(this.payload.transfers)) {
-      if (isDefined(amount)) {
-        total += hexToBigInt(amount)
-      }
-    }
-    return this.formatAmountToXl1(total)
-  }
-}

package/src/transfer/card/TransferRenderTotalTypography.tsx

@@ -1,38 +0,0 @@
-import type { TypographyProps } from '@mui/material'
-import { Typography, useTheme } from '@mui/material'
-import { NetworkIcon } from '@xyo-network/react-chain-network'
-import { MainNetworkIconString } from '@xyo-network/xl1-sdk'
-import React from 'react'
-
-import type { TransferCardHelper } from './TransferRenderCardHelper.tsx'
-
-export interface TransferRenderTotalTypographyProps extends TypographyProps {
-  transferRenderHelper: TransferCardHelper
-}
-
-export const TransferRenderTotalTypography: React.FC<TransferRenderTotalTypographyProps> = ({
-  transferRenderHelper, sx, ...props
-}) => {
-  const theme = useTheme()
-
-  return (
-    <Typography
-      sx={{
-        display: 'inline-flex', gap: theme.spacing(0.25), fontFamily: 'monospace', ...sx,
-      }}
-      variant="caption"
-      {...props}
-    >
-      Total:
-      {' '}
-      <strong>{transferRenderHelper?.totalTransferred()}</strong>
-      <NetworkIcon
-        icon={MainNetworkIconString}
-        style={{
-          width: 16, height: 16, display: 'inline-flex', alignItems: 'end',
-        }}
-      />
-      (XL1)
-    </Typography>
-  )
-}