@xyo-network/react-chain-blockchain 1.0.9 → 1.0.11

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

@@ -0,0 +1,25 @@
+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 } from '../../../../../../types/index.ts'
+import { DynamicListBase } from './Base.tsx'
+
+export 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>
+        <DynamicListBase blockChainRenderProps={blockChainRenderProps} {...props} />
+      </ChainPollingProvider>
+    </ChainAnalyzersProvider>
+  )
+}

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

@@ -0,0 +1,19 @@
+import { ErrorRender } from '@xylabs/react-error'
+import React from 'react'
+
+import type { RemoteBlockChainRenderFlexboxProps } from '../../../../../../types/index.ts'
+import { useRemoteBlockChainRenderProps } from '../../hooks/useRemoteBlockChainRenderProps.ts'
+import { WithAnalysis } from './WithAnalysis.tsx'
+
+export const WithRemote: React.FC<RemoteBlockChainRenderFlexboxProps> = ({
+  url, chainArchivistModuleId, blockChainRenderProps: blockChainRenderPropsArg, ...props
+}) => {
+  const { error, blockChainRenderProps } = useRemoteBlockChainRenderProps(chainArchivistModuleId, url, blockChainRenderPropsArg)
+
+  return (
+    <>
+      <ErrorRender error={error} scope="RemoteChainProviderFlexbox" />
+      <WithAnalysis blockChainRenderProps={blockChainRenderProps} {...props} />
+    </>
+  )
+}

package/src/components/chain/render/dynamic/flexbox/variants/index.ts

@@ -0,0 +1,3 @@
+export * from './Base.tsx'
+export * from './WithAnalysis.tsx'
+export * from './WithRemote.tsx'

package/src/components/chain/render/dynamic/hooks/useDynamicBlockRenderComponents.ts

@@ -24,7 +24,7 @@ export const useDynamicBlockRenderComponents = (
 
   const { pollingState, updatePollingState } = useChainPollingContext()
 
-  const blocksWhilePaused = useOnBlock(blockChainRenderComponents[0]?.block.block, onAddBlock, liveHead, pollingState)
+  const blocksWhilePaused = useOnBlock(blockChainRenderComponents[0]?.block?.[0].block, onAddBlock, liveHead, pollingState)
 
   return {
     errors: [paramsError],

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

@@ -1,55 +1,3 @@
-import { ErrorRender } from '@xylabs/react-error'
-import { FlexCol, FlexGrowRow } from '@xylabs/react-flexbox'
-import { ChainProducersAnalyzer } from '@xyo-network/chain-protocol'
-import React, { useMemo } from 'react'
+import { StaticListBase, WithAnalysis } from './variants/index.ts'
 
-import type { ChainAnalyzers } from '../../../../../context/index.ts'
-import { ChainAnalyzersProvider } from '../../../../../context/index.ts'
-import type { BlockChainRenderFlexboxProps } from '../../../../../types/index.ts'
-import { BlockHeadingFlexbox } from '../../../../block/index.ts'
-import { BlockListAnimated } from '../../../list/index.ts'
-import { BlockChainPagination } from '../../../pagination/index.ts'
-import { ChainAnalyzerStatsDialogFromContext } from '../../../stats/index.ts'
-import { useStaticBlockRenderComponents } from '../hooks/index.ts'
-
-const Base: React.FC<BlockChainRenderFlexboxProps> = ({ blockChainRenderProps, ...props }) => {
-  const {
-    blockComponents, errors, paginatedBlockComponents, onPageChange, page, pageSize,
-  } = useStaticBlockRenderComponents(BlockHeadingFlexbox, blockChainRenderProps)
-
-  return (
-    <FlexCol alignItems="start" gap={2} width="100%" {...props}>
-      {errors?.map((error, index) => <ErrorRender error={error} key={index} scope="StaticBlockchainFlexboxInner" />)}
-      {paginatedBlockComponents?.length
-        ? (
-            <FlexGrowRow justifyContent="space-between" width="100%">
-              <ChainAnalyzerStatsDialogFromContext />
-              <BlockChainPagination count={blockComponents?.length ?? 0} onPageChange={onPageChange} page={page} rowsPerPage={pageSize} />
-            </FlexGrowRow>
-          )
-        : null}
-      <BlockListAnimated blockChainRenderComponents={paginatedBlockComponents} />
-    </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}>
-      <StaticBlockchainRenderFlexBox.Base blockChainRenderProps={blockChainRenderProps} {...props} />
-    </ChainAnalyzersProvider>
-  )
-}
-
-export const StaticBlockchainRenderFlexBox = {
-  Base,
-  WithAnalysis,
-}
+export const StaticBlockchainRenderFlexBox = { Base: StaticListBase, WithAnalysis }

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

@@ -0,0 +1,31 @@
+import { ErrorRender } from '@xylabs/react-error'
+import { FlexCol, FlexGrowRow } from '@xylabs/react-flexbox'
+import React from 'react'
+
+import type { BlockChainRenderFlexboxProps } from '../../../../../../types/index.ts'
+import { BlockHeadingFlexbox } from '../../../../../block/index.ts'
+import { BlockListAnimated } from '../../../../list/index.ts'
+import { BlockChainPagination } from '../../../../pagination/index.ts'
+import { ChainAnalyzerStatsDialogFromContext } from '../../../../stats/index.ts'
+import { useStaticBlockRenderComponents } from '../../hooks/index.ts'
+
+export const StaticListBase: React.FC<BlockChainRenderFlexboxProps> = ({ blockChainRenderProps, ...props }) => {
+  const {
+    blockComponents, errors, paginatedBlockComponents, onPageChange, page, pageSize,
+  } = useStaticBlockRenderComponents(BlockHeadingFlexbox, blockChainRenderProps)
+
+  return (
+    <FlexCol alignItems="start" gap={2} width="100%" {...props}>
+      {errors?.map(error => <ErrorRender error={error} key={error.name} scope="StaticBlockchainFlexboxInner" />)}
+      {paginatedBlockComponents?.length
+        ? (
+            <FlexGrowRow justifyContent="space-between" width="100%">
+              <ChainAnalyzerStatsDialogFromContext />
+              <BlockChainPagination count={blockComponents?.length ?? 0} onPageChange={onPageChange} page={page} rowsPerPage={pageSize} />
+            </FlexGrowRow>
+          )
+        : null}
+      <BlockListAnimated blockChainRenderComponents={paginatedBlockComponents} />
+    </FlexCol>
+  )
+}

package/src/components/chain/render/static/flexbox/variants/WithAnalysis.tsx

@@ -0,0 +1,23 @@
+import { ChainProducersAnalyzer } from '@xyo-network/chain-protocol'
+import React, { useMemo } from 'react'
+
+import type { ChainAnalyzers } from '../../../../../../context/index.ts'
+import { ChainAnalyzersProvider } from '../../../../../../context/index.ts'
+import type { BlockChainRenderFlexboxProps } from '../../../../../../types/index.ts'
+import { StaticListBase } from './Base.tsx'
+
+export 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}>
+      <StaticListBase blockChainRenderProps={blockChainRenderProps} {...props} />
+    </ChainAnalyzersProvider>
+  )
+}

package/src/components/chain/render/static/flexbox/variants/index.ts

@@ -0,0 +1,2 @@
+export * from './Base.tsx'
+export * from './WithAnalysis.tsx'

package/src/components/chain/render/static/table/Ex.tsx

@@ -1,38 +1,4 @@
-import { ErrorRender } from '@xylabs/react-error'
-import { FlexCol, FlexGrowRow } from '@xylabs/react-flexbox'
-import React from 'react'
-
-import type { BlockChainRenderTableExProps } from '../../../../../types/index.ts'
-import { BlockChainTableRow } from '../../../../block/index.ts'
-import { BlockListTableEx } from '../../../list/index.ts'
-import { BlockChainPagination } from '../../../pagination/index.ts'
-import { useStaticBlockRenderComponents } from '../hooks/index.ts'
-
-export const Base: React.FC<BlockChainRenderTableExProps> = ({ blockChainRenderProps, ...props }) => {
-  const {
-    blockComponents, errors, paginatedBlockComponents, onPageChange, page, pageSize,
-  } = useStaticBlockRenderComponents(BlockChainTableRow, blockChainRenderProps)
-
-  return (
-    <FlexCol alignItems="start" gap={2} width="100%" {...props}>
-      {errors?.map((error, index) => <ErrorRender error={error} key={index} scope="StaticBlockchainFlexboxInner" />)}
-      {paginatedBlockComponents?.length
-        ? (
-            <FlexGrowRow justifyContent="space-between" width="100%">
-              <BlockChainPagination count={blockComponents?.length ?? 0} onPageChange={onPageChange} page={page} rowsPerPage={pageSize} />
-            </FlexGrowRow>
-          )
-        : null}
-      <BlockListTableEx blockChainRenderComponents={paginatedBlockComponents} />
-    </FlexCol>
-  )
-}
-
-export const WithAnalysis: React.FC<BlockChainRenderTableExProps> = ({ blockChainRenderProps, ...props }) => {
-  // NOTE: More code here if we want to analyze the static data via ChainAnalyzers
-  return (
-    <StaticBlockchainRenderTableEx.Base blockChainRenderProps={blockChainRenderProps} {...props} />
-  )
-}
+import { Base } from './variants/index.ts'
+import { WithAnalysis } from './variants/WithAnalysis.tsx'
 
 export const StaticBlockchainRenderTableEx = { Base, WithAnalysis }

package/src/components/chain/render/static/table/variants/Base.tsx

@@ -0,0 +1,29 @@
+import { ErrorRender } from '@xylabs/react-error'
+import { FlexCol, FlexGrowRow } from '@xylabs/react-flexbox'
+import React from 'react'
+
+import type { BlockChainRenderTableExProps } from '../../../../../../types/index.ts'
+import { BlockChainTableRow } from '../../../../../block/index.ts'
+import { BlockListTableEx } from '../../../../list/index.ts'
+import { BlockChainPagination } from '../../../../pagination/index.ts'
+import { useStaticBlockRenderComponents } from '../../hooks/index.ts'
+
+export const Base: React.FC<BlockChainRenderTableExProps> = ({ blockChainRenderProps, ...props }) => {
+  const {
+    blockComponents, errors, paginatedBlockComponents, onPageChange, page, pageSize,
+  } = useStaticBlockRenderComponents(BlockChainTableRow, blockChainRenderProps)
+
+  return (
+    <FlexCol alignItems="start" gap={2} width="100%" {...props}>
+      {errors?.map(error => <ErrorRender error={error} key={error.name} scope="StaticBlockchainFlexboxInner" />)}
+      {paginatedBlockComponents?.length
+        ? (
+            <FlexGrowRow justifyContent="space-between" width="100%">
+              <BlockChainPagination count={blockComponents?.length ?? 0} onPageChange={onPageChange} page={page} rowsPerPage={pageSize} />
+            </FlexGrowRow>
+          )
+        : null}
+      <BlockListTableEx blockChainRenderComponents={paginatedBlockComponents} />
+    </FlexCol>
+  )
+}

package/src/components/chain/render/static/table/variants/WithAnalysis.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import type { BlockChainRenderTableExProps } from '../../../../../../types/index.ts'
+import { Base } from './Base.tsx'
+
+export const WithAnalysis: React.FC<BlockChainRenderTableExProps> = ({ blockChainRenderProps, ...props }) => {
+  // NOTE: More code here if we want to analyze the static data via ChainAnalyzers
+  return (
+    <Base blockChainRenderProps={blockChainRenderProps} {...props} />
+  )
+}

package/src/components/chain/render/static/table/variants/index.ts

@@ -0,0 +1,2 @@
+export * from './Base.tsx'
+export * from './WithAnalysis.tsx'

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

@@ -4,7 +4,7 @@ import {
 } from '@mui/material'
 import type { Address } from '@xylabs/hex'
 import { asAddress } from '@xylabs/hex'
-import React, { useEffect, useState } from 'react'
+import React, { useMemo, useState } from 'react'
 
 interface XyoAddressTextFieldProps extends Omit<StandardTextFieldProps, 'value'> {
   onAddressChanged?: (address?: Address) => void
@@ -18,7 +18,7 @@ export const XyoAddressTextField: React.FC<XyoAddressTextFieldProps> = ({
   const [address, setAddress] = useState<string>('')
   const [addressError, setAddressError] = useState<Error>()
 
-  useEffect(() => setAddress(''), [resetValue])
+  useMemo(() => setAddress(''), [resetValue])
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target

package/src/components/transactions/TransactionsQuickTipButton.tsx

@@ -9,8 +9,7 @@ import {
 } from '@xylabs/react-flexbox'
 import type { QuickTipButtonProps } from '@xylabs/react-quick-tip-button'
 import { QuickTipButton } from '@xylabs/react-quick-tip-button'
-import type { ArchivistInstance } from '@xyo-network/archivist-model'
-import type { BlockBoundWitness } from '@xyo-network/chain-model'
+import type { HydratedBlock } from '@xyo-network/chain-model'
 import React, {
   Fragment, useMemo, useState,
 } from 'react'
@@ -18,14 +17,11 @@ import React, {
 import { useTxsFromBlock } from '../block/index.ts'
 
 export interface TransactionsQuickTipButtonQuickTipButtonProps extends QuickTipButtonProps {
-  block?: BlockBoundWitness
-  chainArchivist?: ArchivistInstance
+  block?: HydratedBlock
 }
 
-export const TransactionsQuickTipButton: React.FC<TransactionsQuickTipButtonQuickTipButtonProps> = ({
-  block, chainArchivist, ...props
-}) => {
-  const [transactions, transactionsError] = useTxsFromBlock(chainArchivist, block)
+export const TransactionsQuickTipButton: React.FC<TransactionsQuickTipButtonQuickTipButtonProps> = ({ block, ...props }) => {
+  const [transactions, transactionsError] = useTxsFromBlock(block)
 
   const [copied, setCopied] = useState(false)
   const [showError, setShowError] = useState(false)

package/src/context/analyzer/Provider.tsx

@@ -1,7 +1,4 @@
-import type { ReadArchivist } from '@xyo-network/archivist-model'
-import type { BlockBoundWitness } from '@xyo-network/chain-model'
-import { hydrateBlock } from '@xyo-network/chain-protocol'
-import { PayloadBuilder } from '@xyo-network/payload-builder'
+import type { HydratedBlock } from '@xyo-network/chain-model'
 import type { PropsWithChildren } from 'react'
 import React, {
   useCallback, useMemo, useState,
@@ -25,10 +22,8 @@ export const ChainAnalyzersProvider: React.FC<ChainAnalyzersProviderProps> = ({
     setAnalyzersState(prev => ({ ...prev, ...analyzers }))
   }, [])
 
-  const onBlock = useCallback(async (chainArchivist: ReadArchivist, block: BlockBoundWitness) => {
-    const hash = await PayloadBuilder.hash(block)
-    const hydratedBlock = await hydrateBlock(chainArchivist, hash)
-
+  const onBlock = useCallback(async (hydratedBlock: HydratedBlock) => {
+    await Promise.resolve()
     for (const analyzer of Object.values(analyzers)) {
       void analyzer.onBlock(hydratedBlock)
       setStatsUpdated(Date.now())

package/src/context/analyzer/state.ts

@@ -1,5 +1,4 @@
-import type { ReadArchivist } from '@xyo-network/archivist-model'
-import type { BlockBoundWitness, ChainAnalyzer } from '@xyo-network/chain-model'
+import type { ChainAnalyzer, HydratedBlock } from '@xyo-network/chain-model'
 import type { ContextExState } from '@xyo-network/react-shared'
 
 export type ChainAnalyzerIds = 'producers'
@@ -9,6 +8,6 @@ export type ChainAnalyzers = Record<ChainAnalyzerIds, ChainAnalyzer>
 export interface ChainAnalyzersState extends ContextExState {
   addAnalyzers: (analyzers: ChainAnalyzers) => void
   analyzers: ChainAnalyzers
-  onBlock: (chainArchivist: ReadArchivist, block: BlockBoundWitness) => Promise<void>
+  onBlock: (block: HydratedBlock) => Promise<void>
   statsUpdated: number
 }

package/src/context/chain/Provider.tsx

@@ -1,7 +1,5 @@
 import type { PropsWithChildren } from 'react'
-import React, {
-  useEffect, useMemo, useState,
-} from 'react'
+import React, { useMemo, useState } from 'react'
 
 import { ChainInfoContext } from './Context.ts'
 import type { ChainInfoState } from './State.ts'
@@ -26,15 +24,15 @@ export const ChainInfoProvider: React.FC<ChainInfoProviderProps> = ({
     setChainIterator(chainIterator)
   }
 
-  useEffect(() => {
+  useMemo(() => {
     updateChainArchivist(chainArchivistProp)
   }, [chainArchivistProp])
 
-  useEffect(() => {
+  useMemo(() => {
     updateChainInformation(chainInformationProp)
   }, [chainInformationProp])
 
-  useEffect(() => {
+  useMemo(() => {
     updateChainIterator(chainIteratorProp)
   }, [chainIteratorProp])
 

package/src/hooks/chain-iterator/ChainIteratorStore.ts

@@ -1,13 +1,16 @@
 import { assertEx } from '@xylabs/assert'
 import type {
-  BlockBoundWitness, EventingChainBlockNumberIterator, HeadEventArgs,
+  EventingChainBlockNumberIterator, HeadEventArgs,
+  HydratedBlock,
   XyoChainIteratorParams,
 } from '@xyo-network/chain-model'
+import { hydrateBlock } from '@xyo-network/chain-protocol'
 import { XyoChainBlockNumberIterator } from '@xyo-network/chain-services'
+import { PayloadBuilder } from '@xyo-network/payload-builder'
 
 export type Listener = (...args: Array<unknown>) => void
 
-export type ChainIteratorStoreValues = { chainIterator: XyoChainBlockNumberIterator; error?: Error; head: BlockBoundWitness }
+export type ChainIteratorStoreValues = { chainIterator: XyoChainBlockNumberIterator; error?: Error; head: HydratedBlock }
 
 export class ChainIteratorStore {
   private _chainIterator: EventingChainBlockNumberIterator | undefined
@@ -31,17 +34,21 @@ export class ChainIteratorStore {
     // set the chainIterator
     instance._chainIterator = chainIterator
 
+    const head = await chainIterator.head()
+    const hydratedHead = await hydrateBlock(params.chainArchivist, await PayloadBuilder.hash(head))
+
     // set the initial values
     instance._values = {
       chainIterator,
-      head: (await chainIterator.head()),
+      head: hydratedHead,
     }
 
     // set the internal listeners
-    const headUpdatedListener = ({ blocks }: HeadEventArgs) => {
+    const headUpdatedListener = async ({ blocks }: HeadEventArgs) => {
+      const hydratedBlock = await hydrateBlock(params.chainArchivist, await PayloadBuilder.hash(blocks?.[0]))
       instance._values = {
         chainIterator,
-        head: blocks?.[0],
+        head: hydratedBlock,
       }
       instance.emitChange()
     }

package/src/hooks/chain-iterator/useChainIteratorStore.ts

@@ -44,7 +44,8 @@ export const useChainIteratorStore = (chainIteratorParams?: XyoChainIteratorPara
           }
           // Only update the cached snapshot if there is no cached iterator or the head has changed
           const noCachedValue = cachedSnapshot.current.chainIterator === undefined
-          const newBlock = cachedSnapshot.current?.head?.block !== newValues.head?.block
+          const cachedBlock = cachedSnapshot.current?.head?.[0]?.block
+          const newBlock = cachedBlock !== newValues.head?.[0]?.block
           if (noCachedValue || newBlock) {
             cachedSnapshot.current = newValues
             return newValues

package/src/hooks/chain-iterator/useChainIteratorUpdatingHead.ts

@@ -42,6 +42,7 @@ export const useChainIteratorUpdatingHead = ({
       }
 
       // Schedule the next polling function
+      // eslint-disable-next-line @eslint-react/web-api/no-leaked-timeout
       pollArchivistTimeout = setTimeout(() => void pollingFunction(), interval)
     }
 

package/src/hooks/useIterateChain.ts

@@ -1,8 +1,18 @@
 import { assertEx } from '@xylabs/assert'
 import { usePromise } from '@xylabs/react-promise'
-import type { BlockBoundWitness, XyoChainIteratorParams } from '@xyo-network/chain-model'
+import type { ReadArchivist } from '@xyo-network/archivist-model'
+import type {
+  BlockBoundWitness, HydratedBlock, XyoChainIteratorParams,
+} from '@xyo-network/chain-model'
 import { isBlockBoundWitness } from '@xyo-network/chain-model'
+import { hydrateBlock } from '@xyo-network/chain-protocol'
 import { XyoChainBlockNumberIterator } from '@xyo-network/chain-services'
+import { PayloadBuilder } from '@xyo-network/payload-builder'
+
+const getHydratedBlock = async (chainArchivist: ReadArchivist, head: BlockBoundWitness) => {
+  const headHash = await PayloadBuilder.hash(head)
+  return await hydrateBlock(chainArchivist, headHash)
+}
 
 const iterateChain = async (chainIteratorParams?: XyoChainIteratorParams, maxDepth?: number) => {
   const { chainArchivist, head } = chainIteratorParams ?? {} as XyoChainIteratorParams
@@ -14,26 +24,29 @@ const iterateChain = async (chainIteratorParams?: XyoChainIteratorParams, maxDep
     const chainIterator = await XyoChainBlockNumberIterator.create({ head: headBlockBoundWitness, chainArchivist })
 
     // get head of the chain
-    let block = await chainIterator.head()
+    const chainHead = await chainIterator.head()
+    let block = await getHydratedBlock(chainArchivist, chainHead)
+
     // create the blocks array
-    const blocks: BlockBoundWitness[] = [block]
+    const blocks: HydratedBlock[] = [block]
 
     // track the depth
     let depth = 1
     // iterate the chain
     while (block) {
       // get the next block
-      const [, next] = await chainIterator.previous(block.block, 2)
+      const [, next] = await chainIterator.previous(block[0].block, 2)
       // if there is no next block, break
       if (!next) break
+      const nextHydratedBlock = await getHydratedBlock(chainArchivist, next)
       // push the next block
-      blocks.push(next)
+      blocks.push(nextHydratedBlock)
       // set the next block as the current block
-      block = next
+      block = nextHydratedBlock
       // increment the depth
       depth++
       // if max depth is set and we have reached it, break
-      if ((maxDepth && depth >= maxDepth) || block?.block === 0) break
+      if ((maxDepth && depth >= maxDepth) || block?.[0].block === 0) break
     }
     return blocks
   }

package/src/stories/ChainArchivistDecorator.tsx

@@ -3,7 +3,7 @@ import type { Decorator } from '@storybook/react'
 import { usePromise } from '@xylabs/react-promise'
 import { MemoryArchivist } from '@xyo-network/archivist-memory'
 import { ArchivistConfigSchema } from '@xyo-network/archivist-model'
-import { isBlockBoundWitness } from '@xyo-network/chain-model'
+import { flattenHydratedBlocks } from '@xyo-network/chain-protocol'
 import React, { useEffect } from 'react'
 
 import { getChainInformation } from '../lib/index.ts'
@@ -15,7 +15,8 @@ export const ChainArchivistDecorator: Decorator = (Story, context) => {
   const [blockChainRenderProps, blockChainRenderPropsError] = usePromise(async () => {
     if (randomBlockChain) {
       const chainArchivist = await MemoryArchivist.create({ config: { schema: ArchivistConfigSchema, name: 'ChainArchivist' } })
-      await chainArchivist.insert(randomBlockChain)
+      const flattened = flattenHydratedBlocks(randomBlockChain)
+      await chainArchivist.insert(flattened)
       const chainInformation = await getChainInformation()
       return { chainArchivist, chainInformation }
     }
@@ -34,7 +35,7 @@ export const ChainArchivistDecorator: Decorator = (Story, context) => {
       blockChainRenderProps: {
         ...(context.args.blockChainRenderProps as BlockChainRenderBaseProps),
         ...blockChainRenderProps,
-        head: randomBlockChain?.toReversed().find(isBlockBoundWitness)?._hash,
+        head: randomBlockChain?.toReversed()[0][0]._hash,
       },
     },
   }

package/src/stories/ChainArchivistDelayedInsertDecorator.tsx

@@ -5,8 +5,7 @@ import { usePromise } from '@xylabs/react-promise'
 import { MemoryArchivist } from '@xyo-network/archivist-memory'
 import { ArchivistConfigSchema } from '@xyo-network/archivist-model'
 import type { BlockBoundWitness } from '@xyo-network/chain-model'
-import { isBlockBoundWitness } from '@xyo-network/chain-model'
-import type { Payload } from '@xyo-network/payload-model'
+import { flattenHydratedBlock } from '@xyo-network/chain-protocol'
 import React, { useEffect, useState } from 'react'
 
 import { getChainInformation } from '../lib/index.ts'
@@ -30,32 +29,17 @@ export const ChainArchivistDelayedInsertDecorator: Decorator = (Story, context)
 
   const [, delayedInsertError] = usePromise(async () => {
     if (chainArchivist && randomBlockChain) {
-      // track the next set of payloads for the next block
-      const nextBlockPayloads: Payload[] = []
-
       // TODO - use buildRandomChain helper
-      for (const payload of randomBlockChain) {
-        if (isBlockBoundWitness(payload)) {
-          // if we have a block, insert the block and subsequent payloads
-          nextBlockPayloads.push(payload)
-
-          // debug was we are inserting
-          // console.log('pre-insert block', nextBlockPayloads.map(payload => isBlockBoundWitness(payload) ? payload.block : null).filter(Boolean))
-
-          // insert the block and subsequent payloads
-          await chainArchivist.insert(nextBlockPayloads)
-
-          // confirm the first block was inserted and set state so the story can load
-          setFirstBlock(prev => prev || payload)
+      for (const hydratedBlock of randomBlockChain) {
+        const flattened = flattenHydratedBlock(hydratedBlock)
+        // insert the block and subsequent payloads
+        await chainArchivist.insert(flattened)
 
-          // clear the array
-          nextBlockPayloads.length = 0
+        // confirm the first block was inserted and set state so the story can load
+        setFirstBlock(prev => prev || hydratedBlock[0])
 
-          // we know we are gonna get a new block, so simulate the delay
-          await delay(1000)
-        } else {
-          nextBlockPayloads.push(payload)
-        }
+        // we know we are gonna get a new block, so simulate the delay
+        await delay(1000)
       }
     }
   }, [chainArchivist, randomBlockChain])
@@ -78,7 +62,7 @@ export const ChainArchivistDelayedInsertDecorator: Decorator = (Story, context)
       blockChainRenderProps: {
         ...(context.args.blockChainRenderProps as BlockChainRenderBaseProps),
         ...blockChainRenderProps,
-        head: randomBlockChain?.find(isBlockBoundWitness)?._hash,
+        head: randomBlockChain?.[0][0]?._hash,
       },
     },
   }

package/src/stories/buildRandomBlockchain.ts

@@ -1,7 +1,6 @@
 import { Account } from '@xyo-network/account'
 import { buildRandomChain } from '@xyo-network/chain-ethereum'
 import type { HydratedBlock } from '@xyo-network/chain-model'
-import { flattenHydratedBlocks } from '@xyo-network/chain-protocol'
 
 export const buildRandomBlockChain = async (blockCount = 10) => {
   // Create a producer
@@ -9,11 +8,10 @@ export const buildRandomBlockChain = async (blockCount = 10) => {
 
   // Create multiple blocks
   const blocks: HydratedBlock[] = await buildRandomChain(initialBlockProducer, blockCount)
-  return flattenHydratedBlocks(blocks)
+  return blocks
 }
 
 export const buildRandomBlockChainBlocksOnly = async (blockCount = 10) => {
   const chain = await buildRandomChain(await Account.random(), blockCount)
-  const blocks = chain.map(block => block[0])
-  return blocks
+  return chain
 }

package/src/types/BlockComponentProps.ts

@@ -1,9 +1,9 @@
 import type { Hash } from '@xylabs/hex'
-import type { BlockBoundWitness } from '@xyo-network/chain-model'
+import type { HydratedBlock } from '@xyo-network/chain-model'
 
 /** Interface for all components that render a single block */
 export interface BlockComponentProps {
-  block: BlockBoundWitness
+  block: HydratedBlock
   defaultExpanded?: boolean
 }
 

package/src/types/BlockComponents.ts

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