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

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.1",
   "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.1.11",
+    "@xylabs/axios": "~5.0.61",
     "@xylabs/react-animation": "~7.1.9",
     "@xylabs/react-error": "~7.1.9",
     "@xylabs/react-flexbox": "~7.1.9",
@@ -56,53 +56,52 @@
     "@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.61",
+    "@xyo-network/account": "~5.2.22",
+    "@xyo-network/archivist-memory": "~5.2.22",
+    "@xyo-network/archivist-model": "~5.2.22",
+    "@xyo-network/boundwitness-builder": "~5.2.22",
+    "@xyo-network/boundwitness-model": "~5.2.22",
+    "@xyo-network/chain-analyze": "~1.18.1",
+    "@xyo-network/chain-protocol": "~1.18.1",
+    "@xyo-network/chain-wrappers": "~1.18.1",
+    "@xyo-network/module-model": "~5.2.22",
+    "@xyo-network/payload-builder": "~5.2.22",
+    "@xyo-network/payload-model": "~5.2.22",
     "@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.1",
+    "@xyo-network/react-chain-provider": "~1.18.1",
+    "@xyo-network/react-chain-shared": "~1.18.1",
     "@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.18.2"
   },
   "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.8",
     "@xylabs/react-button": "~7.1.9",
-    "@xylabs/sdk-js": "~5.0.51",
+    "@xylabs/sdk-js": "~5.0.61",
     "@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",
+    "@xyo-network/api-models": "~5.2.22",
+    "@xyo-network/bridge-http": "~5.2.22",
+    "@xyo-network/xl1-network-model": "~1.18.14",
+    "@xyo-network/xl1-sdk": "~1.18.2",
     "axios": "^1.13.2",
     "eslint": "^9.39.2",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "react-router-dom": "^7.10.1",
-    "storybook": "~10.1.9",
+    "react-router-dom": "^7.12.0",
+    "storybook": "~10.1.11",
     "typescript": "~5.9.3"
   },
   "peerDependencies": {
@@ -110,6 +109,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 +119,4 @@
     "access": "restricted"
   },
   "docs": "dist/docs.json"
-}
+}

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/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/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'
@@ -49,7 +49,7 @@ export const useOnBlock = (
         void onAddBlock(liveHead)
       }
     }
-  }, [liveHead, pollingState])
+  }, [initialHeadNumber, liveHead, onAddBlock, pollingState])
 
-  return blocksWhilePaused.current
+  return blocksWhilePaused
 }

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/transfer/Form.tsx

@@ -17,6 +17,9 @@ export const TransferBuilderForm: React.FC<TransferBuilderFormProps> = ({ onBuil
   const [fromAddress, setFromAddress] = useState<Address>()
   const [transfers, setTransfers] = useState<TransferAmount[]>([])
 
+  // eslint-disable-next-line react-naming-convention/use-state
+  const [epoch] = useState(() => Date.now())
+
   const transferPayload: Transfer | undefined = useMemo(() => {
     if (isAddress(fromAddress) && transfers.length > 0) {
       const transfersRecord = {} as Transfer['transfers']
@@ -28,10 +31,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/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,
+}

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

@@ -0,0 +1,31 @@
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { isDefined } from '@xylabs/sdk-js'
+import type { BlockRate } from '@xyo-network/xl1-sdk'
+
+import { rateUnitToLabel } from '../../../helpers/rate/index.ts'
+import { BlockRateSpanTypography } from '../SpanTypography.tsx'
+import { BlockRateSpeedTypography } from '../SpeedTypography.tsx'
+import { BlockRateTimeTypography } from '../TimeTypography.tsx'
+
+export interface BlockRateFlexBoxProps extends FlexBoxProps {
+  blockRate?: BlockRate
+}
+
+export const BlockRateFlexBox: React.FC<BlockRateFlexBoxProps> = ({
+  blockRate,
+  ...flexBoxProps
+}) => {
+  const {
+    range, span, rate, rateUnit, timeDifference,
+  } = blockRate ?? {}
+  const rateUnitLabel = isDefined(rateUnit) ? rateUnitToLabel(rateUnit) : ''
+
+  return (
+    <FlexCol alignItems="start" {...flexBoxProps}>
+      <BlockRateSpeedTypography rate={rate} rateUnitLabel={rateUnitLabel} />
+      <BlockRateSpanTypography range={range} span={span} />
+      <BlockRateTimeTypography rateUnit={rateUnit} timeDifference={timeDifference} />
+    </FlexCol>
+  )
+}

package/src/components/rate/flexbox/index.ts

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

package/src/components/rate/gauge/Container.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryFn } from '@storybook/react-vite'
+import type { BlockRate } from '@xyo-network/xl1-sdk'
+import { asXL1BlockRange } from '@xyo-network/xl1-sdk'
+
+import type { GaugeConfig } from './Container.tsx'
+import { BlockRateSpeedGaugeContainer } from './Container.tsx'
+
+const blockRateSeconds: BlockRate = {
+  range: asXL1BlockRange([100, 200], true),
+  span: 100,
+  rate: 0.083_33,
+  rateUnit: 'seconds',
+  timeDifference: (100 * 12),
+}
+
+const blockRateMinutes: BlockRate = {
+  range: asXL1BlockRange([100, 200], true),
+  span: 100,
+  rate: 5,
+  rateUnit: 'minutes',
+  timeDifference: (100 * 12) / 60,
+}
+
+const blockRateHour: BlockRate = {
+  range: asXL1BlockRange([100, 200], true),
+  span: 100,
+  // up the block rate to test gauge scaling
+  rate: 7 * 60,
+  rateUnit: 'hours',
+  timeDifference: (100 * 12) / 60,
+}
+
+const gaugeConfigHour: GaugeConfig = {
+  // The target block rate per hour is less than blockRateHour.rate
+  // this is to show the pointer as higher than the targetPosition of 75 out of 110 max
+  targetBlockRate: 5 * 60,
+  targetBlockRateUnit: 'hours',
+  targetPosition: 75,
+}
+
+const gaugeConfigHourWithoutTicks: GaugeConfig = {
+  targetBlockRate: 5 * 60,
+  targetBlockRateUnit: 'hours',
+  targetPosition: 75,
+  showTicks: false,
+}
+
+export default {
+  title: 'BlockRate/Gauge',
+  component: BlockRateSpeedGaugeContainer,
+} satisfies Meta<typeof BlockRateSpeedGaugeContainer>
+
+const Template: StoryFn<typeof BlockRateSpeedGaugeContainer> = (args) => {
+  return <BlockRateSpeedGaugeContainer {...args} />
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithBlockRateSeconds = Template.bind({})
+WithBlockRateSeconds.args = { blockRate: blockRateSeconds }
+
+const WithBlockRateMinutes = Template.bind({})
+WithBlockRateMinutes.args = { blockRate: blockRateMinutes }
+
+const WithBlockRateHoursHigherThanTarget = Template.bind({})
+WithBlockRateHoursHigherThanTarget.args = { blockRate: blockRateHour, gaugeConfig: gaugeConfigHour }
+
+const WithBlockRateHoursWithoutTicks = Template.bind({})
+WithBlockRateHoursWithoutTicks.args = { blockRate: blockRateHour, gaugeConfig: gaugeConfigHourWithoutTicks }
+
+export {
+  Default, WithBlockRateHoursHigherThanTarget,
+  WithBlockRateHoursWithoutTicks,
+  WithBlockRateMinutes,
+  WithBlockRateSeconds,
+}