@xyo-network/react-chain-blockchain 1.0.10 → 1.0.12

package/dist/types/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,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAEjE,yEAAyE;AACzE,MAAM,WAAW,yBAA0B,SAAQ,aAAa;IAC9D,KAAK,EAAE,iBAAiB,CAAA;CACzB"}
+{"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,0BAA0B,CAAA;AAE7D,yEAAyE;AACzE,MAAM,WAAW,yBAA0B,SAAQ,aAAa;IAC9D,KAAK,EAAE,aAAa,CAAA;CACrB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-blockchain",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "XYO Layer One React SDK Blockchain",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -51,15 +51,15 @@
     "@xyo-network/archivist-model": "^3.10.4",
     "@xyo-network/boundwitness-builder": "^3.10.4",
     "@xyo-network/bridge-http": "^3.10.4",
-    "@xyo-network/chain-ethereum": "^1.0.10",
-    "@xyo-network/chain-model": "^1.0.10",
-    "@xyo-network/chain-protocol": "^1.0.10",
-    "@xyo-network/chain-services": "^1.0.10",
+    "@xyo-network/chain-ethereum": "^1.0.12",
+    "@xyo-network/chain-model": "^1.0.12",
+    "@xyo-network/chain-protocol": "^1.0.12",
+    "@xyo-network/chain-services": "^1.0.12",
     "@xyo-network/module-model": "^3.10.4",
     "@xyo-network/payload-builder": "^3.10.4",
     "@xyo-network/payload-model": "^3.10.4",
-    "@xyo-network/react-chain-blockies": "^1.0.10",
-    "@xyo-network/react-chain-boundwitness": "^1.0.10",
+    "@xyo-network/react-chain-blockies": "^1.0.12",
+    "@xyo-network/react-chain-boundwitness": "^1.0.12",
     "@xyo-network/react-event": "^5.0.7",
     "@xyo-network/react-payload-raw-info": "^5.0.7",
     "@xyo-network/react-payload-table": "^5.0.7",
@@ -72,19 +72,19 @@
     "@mui/icons-material": "^6.4.8",
     "@mui/material": "^6.4.8",
     "@mui/styles": "^6.4.8",
-    "@storybook/react": "^8.6.7",
+    "@storybook/react": "^8.6.9",
     "@types/react": "^19.0.12",
     "@xylabs/delay": "^4.7.11",
     "@xylabs/hex": "^4.7.11",
-    "@xylabs/ts-scripts-yarn3": "^6.1.4",
-    "@xylabs/tsconfig-react": "^6.1.4",
+    "@xylabs/ts-scripts-yarn3": "^6.1.5",
+    "@xylabs/tsconfig-react": "^6.1.5",
     "@xyo-network/archivist-memory": "^3.10.4",
-    "@xyo-network/chain-utils": "^1.0.10",
-    "eslint": "^9.22.0",
+    "@xyo-network/chain-utils": "^1.0.12",
+    "eslint": "^9.23.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.4.0",
-    "storybook": "^8.6.7",
+    "storybook": "^8.6.9",
     "typescript": "^5.8.2"
   },
   "peerDependencies": {

package/src/components/block/BlockHeadingFlexbox.stories.tsx

@@ -37,8 +37,8 @@ const TemplateWithEvents: StoryFn<typeof BlockHeadingFlexbox> = (args) => {
     <div ref={ref}>
       <BlockHeadingFlexbox {...args} />
       <Stack gap={2} flexDirection="column">
-        {eventData.length > 0 && eventData.map((event, index) => (
-          <Alert key={index} sx={{ display: 'flex' }}>
+        {eventData.length > 0 && eventData.map(event => (
+          <Alert key={event.data} sx={{ display: 'flex' }}>
             <AlertTitle>Event Data</AlertTitle>
             <List>
               <ListItem>

package/src/components/block/BlockHeadingFlexbox.tsx

@@ -15,7 +15,7 @@ import { BlockProducerChip } from './ProducerChip.tsx'
 export const BlockHeadingFlexbox: React.FC<BlockComponentWithTxsProps> = ({
   block, defaultExpanded, transactions,
 }) => {
-  const hash = usePayloadHash(block)
+  const hash = usePayloadHash(block?.[0])
   const [blockHeadingRef, blockHeadingListener] = useBlockHeadingEvents<HTMLDivElement>()
   const { pollingState } = useChainPollingContext()
   const expanded = (pollingState === 'paused') || defaultExpanded
@@ -30,7 +30,7 @@ export const BlockHeadingFlexbox: React.FC<BlockComponentWithTxsProps> = ({
       <LinkedDivider />
       <HashHeadingPaper
         hash={hash}
-        heading={block?.block === undefined ? '' : block.block.toString()}
+        heading={block?.[0].block === undefined ? '' : block?.[0].block.toString()}
         paperProps={{ sx: { p: 1, width: '100%' } }}
         AdornmentEnd={(
           <FlexRow gap={1}>
@@ -39,7 +39,7 @@ export const BlockHeadingFlexbox: React.FC<BlockComponentWithTxsProps> = ({
               onClick={e => handleTransactionCountClick(e, transactions ?? [])}
               transactions={transactions}
             />
-            <BWVerification iconColors boundwitness={block} />
+            <BWVerification iconColors boundwitness={block?.[0]} />
             <span style={{
               // maxWidth is required for css animation to work and 28px is the width of the icon button
               display: 'flex', transition: 'max-width .5s', maxWidth: expanded ? '28px' : 0,

package/src/components/block/ProducerChip.tsx

@@ -1,21 +1,15 @@
 import type { ChipProps } from '@mui/material'
 import { Chip } from '@mui/material'
 import { EthAddress } from '@xylabs/eth-address'
-import type { BlockBoundWitness } from '@xyo-network/chain-model'
+import type { HydratedBlock } from '@xyo-network/chain-model'
 import { BlockiesAvatar } from '@xyo-network/react-chain-blockies'
 import React, { useMemo } from 'react'
 
 export interface BlockProducerChipProps extends ChipProps {
-  block?: BlockBoundWitness
+  block?: HydratedBlock
 }
 export const BlockProducerChip: React.FC<BlockProducerChipProps> = ({ block, ...props }) => {
-  const sharedAddress = block?.addresses[0]
-  const blockProducer = useMemo(() => {
-    if (block) {
-      const producer = block.addresses.find(address => address !== sharedAddress)
-      return producer
-    }
-  }, [block])
+  const blockProducer = block?.[0].addresses[0]
 
   const shortedBlockProducer = blockProducer ? EthAddress.parse(blockProducer)?.toShortString(3) : null
 

package/src/components/block/helpers/buildBlockChainRenderComponent.tsx

@@ -1,4 +1,3 @@
-import type { ArchivistInstance } from '@xyo-network/archivist-model'
 import type { ComponentType } from 'react'
 import React from 'react'
 
@@ -12,10 +11,9 @@ import { txsFromBlock } from './tsxFromBlock.ts'
 export const buildBlockChainRenderComponent = async (
   BlockComponent: ComponentType<BlockComponentWithTxsProps>,
   blockComponentProps: BlockComponentProps,
-  chainArchivist: ArchivistInstance,
 ) => {
   const { block, ...remainingProps } = blockComponentProps
-  const blockTxs = await txsFromBlock(chainArchivist, block)
+  const blockTxs = await txsFromBlock(block)
   const txHashes = blockTxs.map(([_, hash]) => hash)
 
   const item: BlockChainRenderComponent = {
@@ -26,7 +24,7 @@ export const buildBlockChainRenderComponent = async (
         {...remainingProps}
       />
     ),
-    key: block.block.toString(),
+    key: block[0].block.toString(),
     block,
   }
   return item
@@ -34,7 +32,6 @@ export const buildBlockChainRenderComponent = async (
 
 export const buildBlockHeadingComponent = async (
   blockComponentProps: BlockComponentProps,
-  chainArchivist: ArchivistInstance,
 ) => {
-  return await buildBlockChainRenderComponent(BlockHeadingFlexbox, blockComponentProps, chainArchivist)
+  return await buildBlockChainRenderComponent(BlockHeadingFlexbox, blockComponentProps)
 }

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

@@ -1,10 +1,8 @@
-import type { ReadArchivist } from '@xyo-network/archivist-model'
-import type { BlockBoundWitness } from '@xyo-network/chain-model'
-import { isTransactionBoundWitness } from '@xyo-network/chain-model'
+import { isBoundWitness } from '@xyo-network/boundwitness-model'
+import type { HydratedBlock } from '@xyo-network/chain-model'
 import { PayloadBuilder } from '@xyo-network/payload-builder'
 
-export const txsFromBlock = async (chainArchivist: ReadArchivist, block: BlockBoundWitness) => {
-  const payloads = await chainArchivist.get(block.payload_hashes)
-  const transactionPayloads = payloads.filter(payload => isTransactionBoundWitness(payload))
+export const txsFromBlock = async (block: HydratedBlock) => {
+  const transactionPayloads = block[1].filter(payload => isBoundWitness(payload))
   return await PayloadBuilder.hashPairs(transactionPayloads)
 }

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

@@ -1,10 +1,10 @@
-import type { BlockBoundWitness } from '@xyo-network/chain-model'
+import type { HydratedBlock } from '@xyo-network/chain-model'
 import { useMemo } from 'react'
 
-export const useBlockProducer = (block?: BlockBoundWitness) => {
+export const useBlockProducer = (block?: HydratedBlock) => {
   return useMemo(() => {
     if (block) {
-      const producer = block.addresses[0]
+      const producer = block[0].addresses[0]
       return producer
     }
   }, [block])

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

@@ -1,5 +1,4 @@
-import type { BlockBoundWitness, XyoChainIteratorParams } from '@xyo-network/chain-model'
-import { isBlockBoundWitness } from '@xyo-network/chain-model'
+import type { HydratedBlock, XyoChainIteratorParams } from '@xyo-network/chain-model'
 import type { ComponentType } from 'react'
 import { useState } from 'react'
 
@@ -16,14 +15,14 @@ export const useDynamicBlockComponents = (BlockComponent: ComponentType<BlockCom
 
   const { onBlock } = useChainAnalyzersContext()
 
-  const onAddBlock = async (block: BlockBoundWitness) => {
-    if (!isBlockBoundWitness(block) || !chainArchivist) return
+  const onAddBlock = async (block: HydratedBlock) => {
+    if (!block || !chainArchivist) return
 
     const blockComponentProps: BlockComponentProps = { block }
-    const newBlockComponent = await buildBlockChainRenderComponent(BlockComponent, blockComponentProps, chainArchivist)
+    const newBlockComponent = await buildBlockChainRenderComponent(BlockComponent, blockComponentProps)
 
-    if (block.block !== blockChainRenderComponents[0]?.block.block) {
-      void onBlock?.(chainArchivist, block)
+    if (block?.[0].block !== blockChainRenderComponents[0]?.block?.[0].block) {
+      void onBlock?.(block)
 
       setBlockChainRenderComponents((blockComponents) => {
         const newBlockComponents = [newBlockComponent, ...blockComponents]

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

@@ -1,5 +1,5 @@
 import { usePromise } from '@xylabs/react-promise'
-import type { BlockBoundWitness, XyoChainIteratorParams } from '@xyo-network/chain-model'
+import type { HydratedBlock, XyoChainIteratorParams } from '@xyo-network/chain-model'
 import type { ComponentType } from 'react'
 
 import { useChainAnalyzersContext } from '../../../context/index.ts'
@@ -9,7 +9,7 @@ import { buildBlockChainRenderComponent } from '../helpers/index.ts'
 export const useStaticBlockComponents = (
   BlockComponent: ComponentType<BlockComponentWithTxsProps>,
   params?: XyoChainIteratorParams,
-  blocks?: BlockBoundWitness[],
+  blocks?: HydratedBlock[],
 ) => {
   const { onBlock } = useChainAnalyzersContext()
 
@@ -21,11 +21,11 @@ export const useStaticBlockComponents = (
 
     return await Promise.all(resolvedBlockWithStorage?.map(async (block) => {
       if (onBlock && chainArchivist) {
-        await onBlock(chainArchivist, block)
+        await onBlock(block)
       }
 
       const blockComponentProps: BlockComponentProps = { block, defaultExpanded: true }
-      return await buildBlockChainRenderComponent(BlockComponent, blockComponentProps, chainArchivist)
+      return await buildBlockChainRenderComponent(BlockComponent, blockComponentProps)
     }))
   }, [blocks, params, BlockComponent])
 

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

@@ -1,13 +1,12 @@
 import { usePromise } from '@xylabs/react-promise'
-import type { ReadArchivist } from '@xyo-network/archivist-model'
-import type { BlockBoundWitness } from '@xyo-network/chain-model'
+import type { HydratedBlock } from '@xyo-network/chain-model'
 
 import { txsFromBlock } from '../helpers/index.ts'
 
-export const useTxsFromBlock = (chainArchivist?: ReadArchivist, block?: BlockBoundWitness) => {
+export const useTxsFromBlock = (block?: HydratedBlock) => {
   return usePromise(async () => {
-    if (block && chainArchivist) {
-      return await txsFromBlock(chainArchivist, block)
+    if (block) {
+      return await txsFromBlock(block)
     }
-  }, [block, chainArchivist])
+  }, [block])
 }

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

@@ -1,13 +1,13 @@
 import { MoreVert } from '@mui/icons-material'
 import { IconButton, Menu } from '@mui/material'
-import type { BlockBoundWitness } from '@xyo-network/chain-model'
+import type { HydratedBlock } from '@xyo-network/chain-model'
 import { BWJsonMenuItem, BWPreviousHashMenuItem } from '@xyo-network/react-chain-boundwitness'
 import React from 'react'
 
 import { useAnchorElement } from '../hooks/index.ts'
 
 export interface BlockExpandedMenuProps {
-  block?: BlockBoundWitness
+  block?: HydratedBlock
 }
 
 export const BlockMenuExpanded: React.FC<BlockExpandedMenuProps> = ({ block }) => {
@@ -26,8 +26,8 @@ export const BlockMenuExpanded: React.FC<BlockExpandedMenuProps> = ({ block }) =
         anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
         onClose={handleClose}
       >
-        <BWPreviousHashMenuItem boundwitness={block} dense onDialogClose={handleClose} />
-        <BWJsonMenuItem boundwitness={block} dense onDialogClose={handleClose} />
+        <BWPreviousHashMenuItem boundwitness={block?.[0]} dense onDialogClose={handleClose} />
+        <BWJsonMenuItem boundwitness={block?.[0]} dense onDialogClose={handleClose} />
       </Menu>
     </>
   )

package/src/components/block/table/Ex.stories.tsx

@@ -2,8 +2,6 @@ import {
   Alert, AlertTitle, Snackbar,
 } from '@mui/material'
 import type { Meta, StoryFn } from '@storybook/react'
-import type { BlockBoundWitness } from '@xyo-network/chain-model'
-import { isBlockBoundWitness } from '@xyo-network/chain-model'
 import type { Event } from '@xyo-network/react-event'
 import { useEvent } from '@xyo-network/react-event'
 import React, { useState } from 'react'
@@ -48,17 +46,15 @@ Default.args = {}
 
 const WithData = Template.bind({})
 WithData.args = {
-  children: blocks?.filter(isBlockBoundWitness).map((block) => {
-    const blockBoundWitness = block as unknown as BlockBoundWitness
-    return <BlockChainTableRow key={blockBoundWitness.block} block={blockBoundWitness} />
+  children: blocks.map((block) => {
+    return <BlockChainTableRow key={block[0].block} block={block} />
   }),
 }
 
 const WithLinked = TemplateLinked.bind({})
 WithLinked.args = {
-  children: blocks?.filter(isBlockBoundWitness).map((block) => {
-    const blockBoundWitness = block as unknown as BlockBoundWitness
-    return <BlockChainTableRow key={blockBoundWitness.block} block={blockBoundWitness} linked />
+  children: blocks.map((block) => {
+    return <BlockChainTableRow key={block[0].block} block={block} linked />
   }),
 }
 

package/src/components/block/table/Ex.tsx

@@ -1,25 +1,16 @@
-import {
-  TableBody, TableCell, TableHead, TableRow,
-} from '@mui/material'
+import { TableBody } from '@mui/material'
 import type { TableExProps } from '@xyo-network/react-table'
 import { TableEx } from '@xyo-network/react-table'
 import React from 'react'
 
+import { BlockchainTableHead } from './head/index.ts'
+
 export const BlockchainTableEx = ({
   ref, children, ...props
-}: TableExProps & { ref?: React.Ref<HTMLTableElement | null> }) => {
+}: TableExProps) => {
   return (
     <TableEx ref={ref} {...props}>
-      <TableHead>
-        <TableRow>
-          <TableCell>Block Hash</TableCell>
-          <TableCell>Block Number</TableCell>
-          <TableCell>Transaction Count</TableCell>
-          <TableCell align="center">Block Producer</TableCell>
-          <TableCell align="center">Valid</TableCell>
-          <TableCell align="center">JSON</TableCell>
-        </TableRow>
-      </TableHead>
+      <BlockchainTableHead />
       <TableBody>
         {children}
       </TableBody>

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

@@ -11,9 +11,9 @@ export interface BlockNumberTableCellProps extends BlockTableCellProps {}
 export const BlockNumberTableCell: React.FC<BlockNumberTableCellProps> = ({
   block, linked, ...props
 }) => {
-  const [ref, handleClick] = useLinkedBlockItem('block-number', block?.block.toString())
+  const [ref, handleClick] = useLinkedBlockItem('block-number', block?.[0].block.toString())
 
-  const blockNumberBigInt = block ? block.block.toString() : ''
+  const blockNumberBigInt = block ? block[0].block.toString() : ''
 
   return (
     <TableCell ref={ref} {...props}>
@@ -21,7 +21,7 @@ export const BlockNumberTableCell: React.FC<BlockNumberTableCellProps> = ({
         <span>
           {linked && block
             ? (
-                <Link title={block.block.toString()} onClick={handleClick} sx={{ cursor: 'pointer' }}>{block.block.toString()}</Link>
+                <Link title={block[0].block.toString()} onClick={handleClick} sx={{ cursor: 'pointer' }}>{block[0].block.toString()}</Link>
               )
             : null}
           {!linked && blockNumberBigInt}

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

@@ -18,7 +18,7 @@ export interface BlockHashTableCellProps extends BlockTableCellProps {
 export const BlockHashTableCell: React.FC<BlockHashTableCellProps> = ({
   block, identiconProps, linked, ...props
 }) => {
-  const hash = usePayloadHash(block)
+  const hash = usePayloadHash(block?.[0])
 
   const [ref, handleClick] = useLinkedBlockItem('block-hash', hash)
 

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

@@ -17,7 +17,7 @@ export const BlockJsonViewTableCell: React.FC<BlockJsonViewTableCellProps> = ({
   const [open, setOpen] = useState(false)
   const onClose = () => setOpen(false)
 
-  const hash = usePayloadHash(block)
+  const hash = usePayloadHash(block?.[0])
   const title = hash ? `JSON for ${ellipsize(hash, 5)}` : 'JSON'
 
   return (

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

@@ -2,21 +2,18 @@ import { Error } from '@mui/icons-material'
 import {
   Link, TableCell, Tooltip,
 } from '@mui/material'
-import type { ReadArchivist } from '@xyo-network/archivist-model'
 import React from 'react'
 
 import { useTxsFromBlock } from '../../hooks/index.ts'
 import { useLinkedBlockItem } from './hooks/index.ts'
 import type { BlockTableCellProps } from './lib/index.ts'
 
-export interface BlockTransactionCountTableCellProps extends BlockTableCellProps {
-  chainArchivist?: ReadArchivist
-}
+export interface BlockTransactionCountTableCellProps extends BlockTableCellProps {}
 
 export const BlockTransactionCountTableCell: React.FC<BlockTransactionCountTableCellProps> = ({
-  block, chainArchivist, linked, ...props
+  block, linked, ...props
 }) => {
-  const [txs, error] = useTxsFromBlock(chainArchivist, block)
+  const [txs, error] = useTxsFromBlock(block)
   const [ref, handleClick] = useLinkedBlockItem('transaction-count', JSON.stringify(txs ?? null))
 
   return (

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

@@ -11,12 +11,12 @@ export interface BlockVerificationTableCellProps extends BlockTableCellProps {}
 export const BlockVerificationTableCell: React.FC<BlockVerificationTableCellProps> = ({
   block, linked, ...props
 }) => {
-  const [ref, handleClick] = useLinkedBlockItem('block-verification', block?.block.toString())
+  const [ref, handleClick] = useLinkedBlockItem('block-verification', block?.[0].block.toString())
 
   return (
     <TableCell ref={ref} {...props}>
       <FlexRow sx={{ width: '100%' }}>
-        <BWVerification onClick={linked ? handleClick : undefined} iconColors boundwitness={block} />
+        <BWVerification onClick={linked ? handleClick : undefined} iconColors boundwitness={block?.[0]} />
       </FlexRow>
     </TableCell>
   )

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

@@ -1,7 +1,7 @@
 import type { TableCellProps } from '@mui/material'
-import type { BlockBoundWitness } from '@xyo-network/chain-model'
+import type { HydratedBlock } from '@xyo-network/chain-model'
 
 export interface BlockTableCellProps extends TableCellProps {
-  block?: BlockBoundWitness
+  block?: HydratedBlock
   linked?: boolean
 }

package/src/components/block/table/head/TableHead.tsx

@@ -0,0 +1,19 @@
+import {
+  TableCell, TableHead, TableRow,
+} from '@mui/material'
+import React from 'react'
+
+export const BlockchainTableHead: React.FC = () => {
+  return (
+    <TableHead>
+      <TableRow>
+        <TableCell>Block Hash</TableCell>
+        <TableCell>Block Number</TableCell>
+        <TableCell>Transaction Count</TableCell>
+        <TableCell align="center">Block Producer</TableCell>
+        <TableCell align="center">Valid</TableCell>
+        <TableCell align="center">JSON</TableCell>
+      </TableRow>
+    </TableHead>
+  )
+}

package/src/components/block/table/head/index.ts

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

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

@@ -1,3 +1,4 @@
 export * from './cell/index.ts'
 export * from './Ex.tsx'
+export * from './head/index.ts'
 export * from './row/index.ts'

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

@@ -1,12 +1,12 @@
-import type { BlockBoundWitness } from '@xyo-network/chain-model'
+import type { HydratedBlock } from '@xyo-network/chain-model'
 import { useEffect, useRef } from 'react'
 
 export type PollingState = 'paused' | 'running'
 
 export const useOnBlock = (
   initialHeadNumber?: number,
-  onAddBlock?: (block: BlockBoundWitness) => Promise<void>,
-  liveHead?: BlockBoundWitness,
+  onAddBlock?: (block: HydratedBlock) => Promise<void>,
+  liveHead?: HydratedBlock,
   pollingState?: PollingState,
 ) => {
   /**
@@ -14,22 +14,26 @@ 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<BlockBoundWitness[]>([])
+  const blocksWhilePaused = 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<BlockBoundWitness | undefined>(liveHead)
+  const lastLiveHead = useRef<HydratedBlock | undefined>(liveHead)
 
   useEffect(() => {
+    const lastLiveHeadBlock = lastLiveHead.current?.[0]
+    const blocksWhilePausedBlock = lastLiveHead.current?.[0]
+    const liveHeadBlock = liveHead?.[0]
+
     // use lastLiveHead to prevent the hook from adding the same block multiple times
-    if (lastLiveHead.current?.block === liveHead?.block) return
+    if (lastLiveHeadBlock?.block === liveHeadBlock?.block) return
 
     if (liveHead && onAddBlock) {
       // update lastLiveHead
       lastLiveHead.current = liveHead
 
       // if the polling state is paused and the block is new, add it to the blocksWhilePaused array
-      const isNewBlock = initialHeadNumber !== liveHead.block && liveHead.block !== blocksWhilePaused.current[0]?.block
+      const isNewBlock = initialHeadNumber !== liveHeadBlock?.block && liveHeadBlock?.block !== blocksWhilePausedBlock?.block
       if (pollingState === 'paused' && isNewBlock) {
         blocksWhilePaused.current.push(liveHead)
       } else if (pollingState === 'running') {

package/src/components/chain/render/dynamic/flexbox/Flexbox.tsx

@@ -1,65 +1,7 @@
-import { ErrorRender } from '@xylabs/react-error'
-import { FlexCol } from '@xylabs/react-flexbox'
-import { ChainProducersAnalyzer } from '@xyo-network/chain-protocol'
-import React, { useMemo } from 'react'
-
-import type { ChainAnalyzers } from '../../../../../context/index.ts'
-import { ChainAnalyzersProvider, ChainPollingProvider } from '../../../../../context/index.ts'
-import type { BlockChainRenderFlexboxProps, RemoteBlockChainRenderFlexboxProps } from '../../../../../types/index.ts'
-import { BlockHeadingFlexbox } from '../../../../block/index.ts'
-import { MemoizedPollingControlsFlexbox } from '../../../controls/index.ts'
-import { BlockListAnimated } from '../../../list/index.ts'
-import { useDynamicBlockRenderComponents, useRemoteBlockChainRenderProps } from '../hooks/index.ts'
-
-const Base: React.FC<BlockChainRenderFlexboxProps> = ({ blockChainRenderProps, ...props }) => {
-  const {
-    errors, blockChainRenderComponents, blocksWhilePaused, pollingState, updatePollingState,
-  } = useDynamicBlockRenderComponents(BlockHeadingFlexbox, blockChainRenderProps)
-
-  return (
-    <FlexCol alignItems="start" {...props}>
-      {errors?.map((error, index) => <ErrorRender error={error} key={index} scope="DynamicBlockchainRenderFlexboxInner" />)}
-      <MemoizedPollingControlsFlexbox
-        blocksBehind={blocksWhilePaused?.length}
-        pollingState={pollingState}
-        setPollingState={updatePollingState}
-      />
-      <BlockListAnimated blockChainRenderComponents={blockChainRenderComponents} />
-    </FlexCol>
-  )
-}
-
-const WithAnalysis: React.FC<BlockChainRenderFlexboxProps> = ({ blockChainRenderProps, ...props }) => {
-  const { chainInformation } = blockChainRenderProps ?? {}
-
-  const analyzers = useMemo(() => {
-    if (chainInformation) {
-      return { producers: new ChainProducersAnalyzer() } as ChainAnalyzers
-    }
-  }, [chainInformation])
-
-  return (
-    <ChainAnalyzersProvider analyzers={analyzers}>
-      <ChainPollingProvider>
-        <DynamicBlockchainRenderFlexbox.Base blockChainRenderProps={blockChainRenderProps} {...props} />
-      </ChainPollingProvider>
-    </ChainAnalyzersProvider>
-  )
-}
-
-const WithRemote: React.FC<RemoteBlockChainRenderFlexboxProps> = ({
-  url, chainArchivistModuleId, blockChainRenderProps: blockChainRenderPropsArg, ...props
-}) => {
-  const { error, blockChainRenderProps } = useRemoteBlockChainRenderProps(chainArchivistModuleId, url, blockChainRenderPropsArg)
-
-  return (
-    <>
-      <ErrorRender error={error} scope="RemoteChainProviderFlexbox" />
-      <DynamicBlockchainRenderFlexbox.WithAnalysis blockChainRenderProps={blockChainRenderProps} {...props} />
-    </>
-  )
-}
+import {
+  DynamicListBase, WithAnalysis, WithRemote,
+} from './variants/index.ts'
 
 export const DynamicBlockchainRenderFlexbox = {
-  Base, WithAnalysis, WithRemote,
+  Base: DynamicListBase, WithAnalysis, WithRemote,
 }

package/src/components/chain/render/dynamic/flexbox/variants/Base.tsx

@@ -0,0 +1,27 @@
+import { ErrorRender } from '@xylabs/react-error'
+import { FlexCol } from '@xylabs/react-flexbox'
+import React from 'react'
+
+import type { BlockChainRenderFlexboxProps } from '../../../../../../types/index.ts'
+import { BlockHeadingFlexbox } from '../../../../../block/index.ts'
+import { MemoizedPollingControlsFlexbox } from '../../../../controls/index.ts'
+import { BlockListAnimated } from '../../../../list/index.ts'
+import { useDynamicBlockRenderComponents } from '../../hooks/index.ts'
+
+export const DynamicListBase: React.FC<BlockChainRenderFlexboxProps> = ({ blockChainRenderProps, ...props }) => {
+  const {
+    errors, blockChainRenderComponents, blocksWhilePaused, pollingState, updatePollingState,
+  } = useDynamicBlockRenderComponents(BlockHeadingFlexbox, blockChainRenderProps)
+
+  return (
+    <FlexCol alignItems="start" {...props}>
+      {errors?.map(error => <ErrorRender error={error} key={error?.name} scope="DynamicBlockchainRenderFlexboxInner" />)}
+      <MemoizedPollingControlsFlexbox
+        blocksBehind={blocksWhilePaused?.length}
+        pollingState={pollingState}
+        setPollingState={updatePollingState}
+      />
+      <BlockListAnimated blockChainRenderComponents={blockChainRenderComponents} />
+    </FlexCol>
+  )
+}