@xyo-network/react-chain-blockchain 1.18.0 → 1.18.2

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

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

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,gBAAgB,CAAA;AAC1C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AAE1E,8DAA8D;AAC9D,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,yBAAyB,CAAA;IAChC,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,yBAAyB,EAAE,MAAM,sBAAsB,CAAA;AAErE,8DAA8D;AAC9D,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,yBAAyB,CAAA;IAChC,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/BlockComponents.d.ts

@@ -1,5 +1,5 @@
 import type { NodesWithKeys } from '@xylabs/react-animation';
-import type { HydratedBlock } from '@xyo-network/xl1-protocol';
+import type { HydratedBlock } from '@xyo-network/xl1-sdk';
 /** Interface for all block components meant to be rendered in a chain */
 export interface BlockChainRenderComponent extends NodesWithKeys {
     block: HydratedBlock;

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

@@ -1 +1 @@
-{"version":3,"file":"BlockComponents.d.ts","sourceRoot":"","sources":["../../../src/types/BlockComponents.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAE9D,yEAAyE;AACzE,MAAM,WAAW,yBAA0B,SAAQ,aAAa;IAC9D,KAAK,EAAE,aAAa,CAAA;CACrB"}
+{"version":3,"file":"BlockComponents.d.ts","sourceRoot":"","sources":["../../../src/types/BlockComponents.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAEzD,yEAAyE;AACzE,MAAM,WAAW,yBAA0B,SAAQ,aAAa;IAC9D,KAAK,EAAE,aAAa,CAAA;CACrB"}

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

@@ -1,7 +1,6 @@
 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';
+import type { ChainId, PayloadMapRead } from '@xyo-network/xl1-sdk';
 /** Props that control the rendering (not blockchain specific) */
 export interface RenderProps {
     maxBlocks?: number;

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,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"}
+{"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,cAAc,EAAE,MAAM,sBAAsB,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.18.0",
+  "version": "1.18.2",
   "description": "XYO Layer One React SDK Blockchain",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -47,8 +47,8 @@
     "package-cycle": "echo Nothing to do"
   },
   "dependencies": {
-    "@storybook/react-vite": "~10.1.9",
-    "@xylabs/axios": "~5.0.51",
+    "@storybook/react-vite": "~10.2.0",
+    "@xylabs/axios": "~5.0.64",
     "@xylabs/react-animation": "~7.1.9",
     "@xylabs/react-error": "~7.1.9",
     "@xylabs/react-flexbox": "~7.1.9",
@@ -56,53 +56,51 @@
     "@xylabs/react-quick-tip-button": "~7.1.9",
     "@xylabs/react-shared": "~7.1.9",
     "@xylabs/react-theme": "~7.1.9",
-    "@xylabs/sdk-js": "~5.0.51",
-    "@xyo-network/account": "~5.2.17",
-    "@xyo-network/archivist-memory": "~5.2.17",
-    "@xyo-network/archivist-model": "~5.2.17",
-    "@xyo-network/boundwitness-builder": "~5.2.17",
-    "@xyo-network/boundwitness-model": "~5.2.17",
-    "@xyo-network/chain-analyze": "~1.18.0",
-    "@xyo-network/chain-protocol": "~1.18.0",
-    "@xyo-network/chain-wrappers": "~1.18.0",
-    "@xyo-network/module-model": "~5.2.17",
-    "@xyo-network/payload-builder": "~5.2.17",
-    "@xyo-network/payload-model": "~5.2.17",
+    "@xylabs/sdk-js": "~5.0.64",
+    "@xyo-network/account": "~5.2.25",
+    "@xyo-network/archivist-memory": "~5.2.25",
+    "@xyo-network/archivist-model": "~5.2.25",
+    "@xyo-network/boundwitness-builder": "~5.2.25",
+    "@xyo-network/boundwitness-model": "~5.2.25",
+    "@xyo-network/chain-analyze": "~1.18.2",
+    "@xyo-network/chain-protocol": "~1.18.2",
+    "@xyo-network/chain-wrappers": "~1.18.2",
+    "@xyo-network/module-model": "~5.2.25",
+    "@xyo-network/payload-builder": "~5.2.25",
+    "@xyo-network/payload-model": "~5.2.25",
     "@xyo-network/react-boundwitness-plugin": "~7.4.2",
-    "@xyo-network/react-chain-blockies": "~1.18.0",
-    "@xyo-network/react-chain-provider": "~1.18.0",
-    "@xyo-network/react-chain-shared": "~1.18.0",
+    "@xyo-network/react-chain-blockies": "~1.18.2",
+    "@xyo-network/react-chain-provider": "~1.18.2",
+    "@xyo-network/react-chain-shared": "~1.18.2",
     "@xyo-network/react-error": "~7.4.2",
     "@xyo-network/react-event": "~7.4.2",
     "@xyo-network/react-payload-raw-info": "~7.4.2",
     "@xyo-network/react-payload-table": "~7.4.2",
     "@xyo-network/react-shared": "~7.4.2",
     "@xyo-network/react-table": "~7.4.2",
-    "@xyo-network/xl1-protocol": "~1.14.17",
-    "@xyo-network/xl1-protocol-sdk": "~1.18.0"
+    "@xyo-network/xl1-sdk": "~1.19.4"
   },
   "devDependencies": {
     "@emotion/react": "~11.14.0",
     "@emotion/styled": "~11.14.1",
-    "@mui/icons-material": "~7.3.6",
-    "@mui/material": "~7.3.6",
-    "@types/react": "~19.2.7",
+    "@mui/icons-material": "~7.3.7",
+    "@mui/material": "~7.3.7",
+    "@types/react": "~19.2.9",
     "@xylabs/react-button": "~7.1.9",
-    "@xylabs/sdk-js": "~5.0.51",
-    "@xylabs/ts-scripts-yarn3": "~7.2.32",
-    "@xylabs/tsconfig": "~7.2.32",
-    "@xylabs/tsconfig-dom": "~7.2.32",
-    "@xylabs/tsconfig-react": "~7.2.32",
-    "@xyo-network/api-models": "~5.2.17",
-    "@xyo-network/bridge-http": "~5.2.17",
-    "@xyo-network/xl1-network-model": "~1.18.0",
-    "@xyo-network/xl1-rpc": "~1.18.0",
-    "axios": "^1.13.2",
+    "@xylabs/sdk-js": "~5.0.64",
+    "@xylabs/ts-scripts-yarn3": "~7.3.2",
+    "@xylabs/tsconfig": "~7.3.2",
+    "@xylabs/tsconfig-dom": "~7.3.2",
+    "@xylabs/tsconfig-react": "~7.3.2",
+    "@xyo-network/api-models": "~5.2.25",
+    "@xyo-network/bridge-http": "~5.2.25",
+    "@xyo-network/xl1-sdk": "~1.19.4",
+    "axios": "^1.13.3",
     "eslint": "^9.39.2",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "react-router-dom": "^7.10.1",
-    "storybook": "~10.1.9",
+    "react": "~19.2.4",
+    "react-dom": "~19.2.4",
+    "react-router-dom": "^7.13.0",
+    "storybook": "~10.2.0",
     "typescript": "~5.9.3"
   },
   "peerDependencies": {
@@ -110,6 +108,7 @@
     "@emotion/styled": "~11",
     "@mui/icons-material": ">=6 <8",
     "@mui/material": ">=6 <8",
+    "@mui/x-charts": "~8.23.0",
     "axios": "^1",
     "react": "~19",
     "react-dom": "~19",
@@ -119,4 +118,4 @@
     "access": "restricted"
   },
   "docs": "dist/docs.json"
-}
+}

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

@@ -1,7 +1,7 @@
 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 { LocalNetwork } from '@xyo-network/xl1-sdk'
 import React from 'react'
 
 import { AccountBalanceHistoryFlexBox } from './BalanceHistoryFlexbox.tsx'

package/src/components/account/BalanceHistoryFlexbox.tsx

@@ -5,8 +5,8 @@ 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 } from '@xyo-network/xl1-protocol'
-import type { XyoViewer } from '@xyo-network/xl1-protocol-sdk'
+import type { XyoViewer } from '@xyo-network/xl1-sdk'
+import { AttoXL1 } from '@xyo-network/xl1-sdk'
 import React from 'react'
 
 import { formatBalanceMagnitude } from './helpers/index.ts'

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

@@ -1,4 +1,4 @@
-import { type AttoXL1, XL1Amount } from '@xyo-network/xl1-protocol'
+import { type AttoXL1, XL1Amount } from '@xyo-network/xl1-sdk'
 
 export const formatBalanceMagnitude = (set: [AttoXL1, AttoXL1]) => {
   const [received, sent] = set

package/src/components/account/hooks/usePagedAccountBalanceHistory.ts

@@ -2,11 +2,8 @@ import type { Address } from '@xylabs/sdk-js'
 import { isDefined } from '@xylabs/sdk-js'
 import type { AccountBalanceHistoryItemFormatted } from '@xyo-network/react-chain-provider'
 import { useAccountBalanceHistory } from '@xyo-network/react-chain-provider'
-import type { XL1BlockRange } from '@xyo-network/xl1-protocol'
-import type { XyoViewer } from '@xyo-network/xl1-protocol-sdk'
-import {
-  useCallback, useMemo, useState,
-} from 'react'
+import type { XL1BlockRange, XyoViewer } from '@xyo-network/xl1-sdk'
+import { useCallback, useState } from 'react'
 
 export const usePagedAccountBalanceHistory = (address?: Address, viewer?: XyoViewer, maxPage = 1) => {
   const [updatedBlockRange, setUpdatedBlockRange] = useState<XL1BlockRange>()
@@ -14,16 +11,14 @@ export const usePagedAccountBalanceHistory = (address?: Address, viewer?: XyoVie
   const [results, error, loading] = useAccountBalanceHistory(address, viewer, maxPage, updatedBlockRange)
 
   const { history, truncated } = results || {}
+  const [previousHistory, setPreviousHistory] = useState(history)
 
-  useMemo(() => {
-    if (isDefined(history)) {
-      setPagedHistory((pagedHistory) => {
-        return [...pagedHistory ?? [], ...history]
-      })
-    }
-  }, [history])
+  // Reset paged history when address changes
+  if (isDefined(history) && history !== previousHistory) {
+    setPagedHistory([...pagedHistory ?? [], ...history])
+    setPreviousHistory(history)
+  }
 
-  const firstBlock = isDefined(history) ? history.at(0)?.blockNumber : undefined
   const lastBlock = isDefined(history) ? history.at(-1)?.blockNumber : undefined
   const historyComplete = isDefined(history) && history.length === 0
 
@@ -32,7 +27,7 @@ export const usePagedAccountBalanceHistory = (address?: Address, viewer?: XyoVie
       const newEndBlock = lastBlock - 1
       setUpdatedBlockRange([0, newEndBlock] as XL1BlockRange)
     }
-  }, [firstBlock, lastBlock, truncated])
+  }, [lastBlock, truncated])
 
   return {
     pagedHistory,

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

@@ -10,8 +10,8 @@ import { useAccountBalanceHistory, useHttpRpcViewer } from '@xyo-network/react-c
 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 type { XL1BlockRange } from '@xyo-network/xl1-protocol'
+import type { XL1BlockRange } from '@xyo-network/xl1-sdk'
+import { LocalNetwork } from '@xyo-network/xl1-sdk'
 import { useState } from 'react'
 
 import { usePagedAccountBalanceHistory } from '../hooks/index.ts'

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

@@ -5,7 +5,7 @@ import {
 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 { XL1Amount } from '@xyo-network/xl1-sdk'
 import React from 'react'
 
 import type { BalanceHistoryEventNouns } from './types/index.ts'

package/src/components/block/ProducerChip.tsx

@@ -4,7 +4,7 @@ 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 type { HydratedBlock } from '@xyo-network/xl1-sdk'
 import React, { useMemo } from 'react'
 
 import { ChipSkeleton } from './ChipSkeleton.tsx'

package/src/components/block/helpers/blockProducer.ts

@@ -1,4 +1,4 @@
-import type { BlockBoundWitness } from '@xyo-network/xl1-protocol'
+import type { BlockBoundWitness } from '@xyo-network/xl1-sdk'
 
 export const blockProducer = (block: BlockBoundWitness) => {
   return block.addresses[0]

package/src/components/block/helpers/payloadCountsFromBlock.ts

@@ -1,5 +1,5 @@
 import { BoundWitnessSchema } from '@xyo-network/boundwitness-model'
-import { type HydratedBlock, isTransactionBoundWitness } from '@xyo-network/xl1-protocol'
+import { type HydratedBlock, isTransactionBoundWitness } from '@xyo-network/xl1-sdk'
 
 export const payloadCountsFromBlock = ([block, payloads]: HydratedBlock): [number, number] => {
   const publicPayloads = block.payload_schemas.filter(schema => schema !== BoundWitnessSchema)

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

@@ -1,4 +1,4 @@
-import type { HydratedBlock } from '@xyo-network/xl1-protocol'
+import type { HydratedBlock } from '@xyo-network/xl1-sdk'
 import { useMemo } from 'react'
 
 export const useBlockProducer = (block?: HydratedBlock) => {

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

@@ -1,4 +1,4 @@
-import type { HydratedBlock } from '@xyo-network/xl1-protocol'
+import type { HydratedBlock } from '@xyo-network/xl1-sdk'
 import { useMemo } from 'react'
 
 import { payloadCountsFromBlock } from '../helpers/index.ts'

package/src/components/block/menu/Expanded.tsx

@@ -1,7 +1,7 @@
 import { MoreVert } from '@mui/icons-material'
 import { IconButton, Menu } from '@mui/material'
 import { BWJsonMenuItem, BWPreviousHashMenuItem } from '@xyo-network/react-boundwitness-plugin'
-import type { HydratedBlock } from '@xyo-network/xl1-protocol'
+import type { HydratedBlock } from '@xyo-network/xl1-sdk'
 import React from 'react'
 
 import { useAnchorElement } from '../hooks/index.ts'

package/src/components/block/table/cell/lib/BlockTableCellProps.ts

@@ -1,5 +1,5 @@
 import type { TableCellProps } from '@mui/material'
-import type { HydratedBlockWithHashMeta } from '@xyo-network/xl1-protocol'
+import type { HydratedBlockWithHashMeta } from '@xyo-network/xl1-sdk'
 
 export interface BlockTableCellProps extends TableCellProps {
   block?: HydratedBlockWithHashMeta

package/src/components/chain/hooks/useOnBlock.ts

@@ -1,4 +1,4 @@
-import type { HydratedBlock } from '@xyo-network/xl1-protocol'
+import type { HydratedBlock } from '@xyo-network/xl1-sdk'
 import { useEffect, useRef } from 'react'
 
 export type PollingState = 'paused' | 'running'
@@ -14,15 +14,15 @@ export const useOnBlock = (
    * But, since we get new blockComponents regardless, the hook rerenders anyway so consumers can get
    * the latest blocksWhilePaused value without having to rely on a state update.
    */
-  const blocksWhilePaused = useRef<HydratedBlock[]>([])
+  const blocksWhilePausedRef = useRef<HydratedBlock[]>([])
   // Because the useEffect has liveHead AND pollingState, every time the polling state changes, the hook will
   // run a second time with the live head from the previous run. This is why we need to keep track of the last
   // live head so we can compare it to the current live head and prevent the hook from adding the same block twice
-  const lastLiveHead = useRef<HydratedBlock | undefined>(liveHead)
+  const lastLiveHeadRef = useRef<HydratedBlock | undefined>(liveHead)
 
   useEffect(() => {
-    const lastLiveHeadBlock = lastLiveHead.current?.[0]
-    const blocksWhilePausedBlock = lastLiveHead.current?.[0]
+    const lastLiveHeadBlock = lastLiveHeadRef.current?.[0]
+    const blocksWhilePausedBlock = lastLiveHeadRef.current?.[0]
     const liveHeadBlock = liveHead?.[0]
 
     // use lastLiveHead to prevent the hook from adding the same block multiple times
@@ -30,26 +30,26 @@ export const useOnBlock = (
 
     if (liveHead && onAddBlock) {
       // update lastLiveHead
-      lastLiveHead.current = liveHead
+      lastLiveHeadRef.current = liveHead
 
       // if the polling state is paused and the block is new, add it to the blocksWhilePaused array
       const isNewBlock = initialHeadNumber !== liveHeadBlock?.block && liveHeadBlock?.block !== blocksWhilePausedBlock?.block
       if (pollingState === 'paused' && isNewBlock) {
-        blocksWhilePaused.current.push(liveHead)
+        blocksWhilePausedRef.current.push(liveHead)
       } else if (pollingState === 'running') {
         // if the polling state is running, add the blocksWhilePaused
-        if (blocksWhilePaused.current.length > 0) {
-          for (const block of blocksWhilePaused.current) {
+        if (blocksWhilePausedRef.current.length > 0) {
+          for (const block of blocksWhilePausedRef.current) {
             void onAddBlock(block)
           }
           // clear the blocksWhilePaused array
-          blocksWhilePaused.current = []
+          blocksWhilePausedRef.current = []
         }
         // add the liveHead block
         void onAddBlock(liveHead)
       }
     }
-  }, [liveHead, pollingState])
+  }, [initialHeadNumber, liveHead, onAddBlock, pollingState])
 
-  return blocksWhilePaused.current
+  return blocksWhilePausedRef
 }

package/src/components/index.ts

@@ -3,4 +3,5 @@ export * from './block/index.ts'
 export * from './chain/index.ts'
 export * from './FeatureNotAvailable.tsx'
 export * from './payload/index.ts'
+export * from './rate/index.ts'
 export * from './transactions/index.ts'

package/src/components/payload/builder/producer-intent/Form.tsx

@@ -2,7 +2,7 @@ import { Button, FormControl } from '@mui/material'
 import { usePromise } from '@xylabs/react-promise'
 import type { Address } from '@xylabs/sdk-js'
 import { createProducerChainStakeIntent } from '@xyo-network/chain-protocol'
-import type { XL1BlockNumber } from '@xyo-network/xl1-protocol'
+import type { XL1BlockNumber } from '@xyo-network/xl1-sdk'
 import type { MouseEventHandler } from 'react'
 import React, { useState } from 'react'
 

package/src/components/payload/builder/transfer/Form.tsx

@@ -1,8 +1,8 @@
 import { Button, FormControl } from '@mui/material'
 import type { Address, Hex } from '@xylabs/sdk-js'
 import { isAddress } from '@xylabs/sdk-js'
-import type { Transfer } from '@xyo-network/xl1-protocol'
-import { TransferSchema } from '@xyo-network/xl1-protocol'
+import type { Transfer } from '@xyo-network/xl1-sdk'
+import { TransferSchema } from '@xyo-network/xl1-sdk'
 import type { MouseEventHandler } from 'react'
 import React, { useMemo, useState } from 'react'
 
@@ -17,6 +17,8 @@ export const TransferBuilderForm: React.FC<TransferBuilderFormProps> = ({ onBuil
   const [fromAddress, setFromAddress] = useState<Address>()
   const [transfers, setTransfers] = useState<TransferAmount[]>([])
 
+  const [epoch] = useState(() => Date.now())
+
   const transferPayload: Transfer | undefined = useMemo(() => {
     if (isAddress(fromAddress) && transfers.length > 0) {
       const transfersRecord = {} as Transfer['transfers']
@@ -28,10 +30,10 @@ export const TransferBuilderForm: React.FC<TransferBuilderFormProps> = ({ onBuil
         from: fromAddress,
         schema: TransferSchema,
         transfers: transfersRecord,
-        epoch: Date.now(),
+        epoch,
       }
     }
-  }, [fromAddress, transfers])
+  }, [fromAddress, transfers, epoch])
 
   const onBuildLocal: MouseEventHandler<HTMLButtonElement> = () => {
     if (onBuild && transferPayload) onBuild?.(transferPayload)

package/src/components/payload/builder/transfer/builder/SingleFlexbox.tsx

@@ -5,11 +5,11 @@ import {
 import type { FlexBoxProps } from '@xylabs/react-flexbox'
 import { FlexRow } from '@xylabs/react-flexbox'
 import type { Address } from '@xylabs/sdk-js'
-import { isAddress, toHex } from '@xylabs/sdk-js'
+import {
+  isAddress, isDefinedNotNull, toHex,
+} from '@xylabs/sdk-js'
 import { BigIntInput } from '@xyo-network/react-shared'
-import React, {
-  useEffect, useMemo, useState,
-} from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { XyoAddressTextField } from '../../../fields/index.ts'
 import type { TransferAmount } from '../Transfer.ts'
@@ -26,19 +26,16 @@ export const SingleTransferBuilderFlexbox: React.FC<SingleTransferBuilderFlexbox
   const [toAddress, setToAddress] = useState<Address>()
   const [amount, setAmount] = useState<bigint>()
 
-  const transferAmount = useMemo(() => {
-    if (isAddress(toAddress) && amount !== undefined) {
-      return {
-        ...singleTransfer,
-        amount: toHex(amount),
-        to: toAddress,
-      }
-    }
-  }, [toAddress, amount])
-
   useEffect(() => {
+    const transferAmount = isAddress(toAddress) && isDefinedNotNull(amount)
+      ? {
+          ...singleTransfer,
+          amount: toHex(amount),
+          to: toAddress,
+        }
+      : undefined
     if (transferAmount) onTransferUpdated?.(transferAmount)
-  }, [transferAmount])
+  }, [amount, onTransferUpdated, singleTransfer, toAddress])
 
   return (
     <FlexRow alignItems="start" gap={1} {...props}>

package/src/components/payload/fields/BlockNumberTextField.tsx

@@ -2,7 +2,7 @@ import type { StandardTextFieldProps } from '@mui/material'
 import {
   FormControl, FormHelperText, TextField,
 } from '@mui/material'
-import { toXL1BlockNumber, type XL1BlockNumber } from '@xyo-network/xl1-protocol'
+import { toXL1BlockNumber, type XL1BlockNumber } from '@xyo-network/xl1-sdk'
 import type { ChangeEventHandler } from 'react'
 import React, { useState } from 'react'
 

package/src/components/payload/fields/XyoAddressTextField.tsx

@@ -3,8 +3,10 @@ import {
   FormControl, FormHelperText, TextField,
 } from '@mui/material'
 import type { Address } from '@xylabs/sdk-js'
-import { asAddress, isAddress } from '@xylabs/sdk-js'
-import React, { useMemo, useState } from 'react'
+import {
+  asAddress, isAddress, isDefined,
+} from '@xylabs/sdk-js'
+import React, { useState } from 'react'
 
 interface XyoAddressTextFieldProps extends Omit<StandardTextFieldProps, 'value'> {
   onAddressChanged?: (address?: Address) => void
@@ -18,7 +20,12 @@ export const XyoAddressTextField: React.FC<XyoAddressTextFieldProps> = ({
   const [address, setAddress] = useState<string>('')
   const [addressError, setAddressError] = useState<Error>()
 
-  useMemo(() => setAddress(''), [resetValue])
+  const [previousResetValue, setPreviousResetValue] = useState<number | undefined>(resetValue)
+
+  if (isDefined(resetValue) && resetValue !== previousResetValue) {
+    setPreviousResetValue(resetValue)
+    setAddress('')
+  }
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target

package/src/components/rate/SpanTypography.tsx

@@ -0,0 +1,20 @@
+import { ViewAgendaOutlined } from '@mui/icons-material'
+import { Tooltip, type TypographyProps } from '@mui/material'
+import type { XL1BlockRange } from '@xyo-network/xl1-sdk'
+
+import { MetricTypography } from './support/index.ts'
+
+export interface BlockRateSpanTypographyProps extends TypographyProps {
+  range?: XL1BlockRange
+  span?: number
+}
+
+export const BlockRateSpanTypography: React.FC<BlockRateSpanTypographyProps> = ({
+  range, span, sx, ...props
+}) => {
+  return (
+    <Tooltip title={`Block Range: ${range?.join(' - ')}`}>
+      <MetricTypography icon={<ViewAgendaOutlined fontSize="large" />} metric={span} label="blocks" {...props} />
+    </Tooltip>
+  )
+}

package/src/components/rate/SpeedTypography.tsx

@@ -0,0 +1,17 @@
+import { SpeedOutlined } from '@mui/icons-material'
+import type { TypographyProps } from '@mui/material'
+
+import { MetricTypography } from './support/index.ts'
+
+export interface BlockRateSpeedTypographyProps extends TypographyProps {
+  rate?: number
+  rateUnitLabel?: string
+}
+
+export const BlockRateSpeedTypography: React.FC<BlockRateSpeedTypographyProps> = ({
+  rate, rateUnitLabel, ...props
+}) => {
+  return (
+    <MetricTypography icon={<SpeedOutlined fontSize="large" />} metric={rate} label={rateUnitLabel} {...props} />
+  )
+}

package/src/components/rate/TimeTypography.tsx

@@ -0,0 +1,17 @@
+import { TimelapseOutlined } from '@mui/icons-material'
+import { type TypographyProps } from '@mui/material'
+
+import { MetricTypography } from './support/index.ts'
+
+export interface BlockRateTimeTypographyProps extends TypographyProps {
+  rateUnit?: string
+  timeDifference?: number
+}
+
+export const BlockRateTimeTypography: React.FC<BlockRateTimeTypographyProps> = ({
+  rateUnit, timeDifference, sx, ...props
+}) => {
+  return (
+    <MetricTypography icon={<TimelapseOutlined fontSize="large" />} metric={timeDifference} label={rateUnit} {...props} />
+  )
+}

package/src/components/rate/flexbox/FlexBox.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryFn } from '@storybook/react-vite'
+import type { BlockRate } from '@xyo-network/xl1-sdk'
+import { asXL1BlockRange } from '@xyo-network/xl1-sdk'
+
+import { BlockRateFlexBox } from './FlexBox.tsx'
+
+const blockRateSeconds: BlockRate = {
+  range: asXL1BlockRange([100, 200], true),
+  span: 100,
+  rate: 0.12,
+  rateUnit: 'seconds',
+  timeDifference: (100 * 12),
+}
+
+const blockRateMinutes: BlockRate = {
+  range: asXL1BlockRange([100, 200], true),
+  span: 100,
+  rate: 12,
+  rateUnit: 'minutes',
+  timeDifference: (100 * 12) / 60,
+}
+
+export default {
+  title: 'BlockRate/FlexBox',
+  component: BlockRateFlexBox,
+} satisfies Meta<typeof BlockRateFlexBox>
+
+const Template: StoryFn<typeof BlockRateFlexBox> = (args) => {
+  return <BlockRateFlexBox {...args} />
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithBlockRateSeconds = Template.bind({})
+WithBlockRateSeconds.args = { blockRate: blockRateSeconds }
+
+const WithBlockRateMinutes = Template.bind({})
+WithBlockRateMinutes.args = { blockRate: blockRateMinutes }
+
+export {
+  Default, WithBlockRateMinutes,
+  WithBlockRateSeconds,
+}