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

package/dist/browser/index.mjs

@@ -12,8 +12,6 @@ import { createContextEx } from "@xyo-network/react-shared";
 var ChainAnalyzersContext = createContextEx();
 
 // src/context/analyzer/Provider.tsx
-import { hydrateBlock } from "@xyo-network/chain-protocol";
-import { PayloadBuilder } from "@xyo-network/payload-builder";
 import React, { useCallback, useMemo, useState } from "react";
 var ChainAnalyzersProvider = /* @__PURE__ */ __name(({ analyzers: analyzersProp, children }) => {
   const [analyzersState, setAnalyzersState] = useState(analyzersProp ?? {});
@@ -31,9 +29,8 @@ var ChainAnalyzersProvider = /* @__PURE__ */ __name(({ analyzers: analyzersProp,
       ...analyzers2
     }));
   }, []);
-  const onBlock = useCallback(async (chainArchivist, block) => {
-    const hash = await PayloadBuilder.hash(block);
-    const hydratedBlock = await hydrateBlock(chainArchivist, hash);
+  const onBlock = useCallback(async (hydratedBlock) => {
+    await Promise.resolve();
     for (const analyzer of Object.values(analyzers)) {
       void analyzer.onBlock(hydratedBlock);
       setStatsUpdated(Date.now());
@@ -239,7 +236,7 @@ import { Account } from "@xyo-network/account";
 import { ArchivistInsertQuerySchema } from "@xyo-network/archivist-model";
 import { QueryBoundWitnessBuilder } from "@xyo-network/boundwitness-builder";
 import { buildTransaction } from "@xyo-network/chain-protocol";
-import { PayloadBuilder as PayloadBuilder2 } from "@xyo-network/payload-builder";
+import { PayloadBuilder } from "@xyo-network/payload-builder";
 import React6, { useState as useState5 } from "react";
 var BETA_PENDING_TRANSACTIONS_ARCHIVIST = "https://beta.api.chain.xyo.network/8050fee682a2762f504d5449d8269a6f17f0b693";
 var SubmitChainTransaction = /* @__PURE__ */ __name(() => {
@@ -250,7 +247,7 @@ var SubmitChainTransaction = /* @__PURE__ */ __name(() => {
     if (!network) throw new Error("Network not set");
     const randomAccount = await Account.random();
     const [transactionBoundWitness] = await buildTransaction(chainTx.chain, [], BigInt(`0x${chainTx.gas}`), randomAccount, chainTx.nbf, chainTx.exp, []);
-    const insertQuery = new PayloadBuilder2({
+    const insertQuery = new PayloadBuilder({
       schema: ArchivistInsertQuerySchema
     }).build();
     const [queryBoundWitness] = await new QueryBoundWitnessBuilder().payloads([
@@ -332,8 +329,8 @@ import { ErrorRender as ErrorRender2 } from "@xylabs/react-error";
 import { FlexGrowCol as FlexGrowCol2, FlexGrowRow, FlexRow } from "@xylabs/react-flexbox";
 import { QuickTipButton } from "@xylabs/react-quick-tip-button";
 import React8, { Fragment, useMemo as useMemo5, useState as useState6 } from "react";
-var TransactionsQuickTipButton = /* @__PURE__ */ __name(({ block, chainArchivist, ...props }) => {
-  const [transactions, transactionsError] = useTxsFromBlock(chainArchivist, block);
+var TransactionsQuickTipButton = /* @__PURE__ */ __name(({ block, ...props }) => {
+  const [transactions, transactionsError] = useTxsFromBlock(block);
   const [copied, setCopied] = useState6(false);
   const [showError, setShowError] = useState6(false);
   useMemo5(() => transactionsError ? setShowError(true) : setShowError(false), [
@@ -419,7 +416,7 @@ import { useMemo as useMemo6 } from "react";
 var useBlockProducer = /* @__PURE__ */ __name((block) => {
   return useMemo6(() => {
     if (block) {
-      const producer = block.addresses[0];
+      const producer = block[0].addresses[0];
       return producer;
     }
   }, [
@@ -428,7 +425,6 @@ var useBlockProducer = /* @__PURE__ */ __name((block) => {
 }, "useBlockProducer");
 
 // src/components/block/hooks/useDynamicBlockComponents.ts
-import { isBlockBoundWitness } from "@xyo-network/chain-model";
 import { useState as useState8 } from "react";
 
 // src/components/block/helpers/blockProducer.ts
@@ -440,18 +436,17 @@ var blockProducer = /* @__PURE__ */ __name((block) => {
 import React9 from "react";
 
 // src/components/block/helpers/tsxFromBlock.ts
-import { isTransactionBoundWitness } from "@xyo-network/chain-model";
-import { PayloadBuilder as PayloadBuilder3 } from "@xyo-network/payload-builder";
-var txsFromBlock = /* @__PURE__ */ __name(async (chainArchivist, block) => {
-  const payloads = await chainArchivist.get(block.payload_hashes);
-  const transactionPayloads = payloads.filter((payload) => isTransactionBoundWitness(payload));
-  return await PayloadBuilder3.hashPairs(transactionPayloads);
+import { isBoundWitness } from "@xyo-network/boundwitness-model";
+import { PayloadBuilder as PayloadBuilder2 } from "@xyo-network/payload-builder";
+var txsFromBlock = /* @__PURE__ */ __name(async (block) => {
+  const transactionPayloads = block[1].filter((payload) => isBoundWitness(payload));
+  return await PayloadBuilder2.hashPairs(transactionPayloads);
 }, "txsFromBlock");
 
 // src/components/block/helpers/buildBlockChainRenderComponent.tsx
-var buildBlockChainRenderComponent = /* @__PURE__ */ __name(async (BlockComponent, blockComponentProps, chainArchivist) => {
+var buildBlockChainRenderComponent = /* @__PURE__ */ __name(async (BlockComponent, blockComponentProps) => {
   const { block, ...remainingProps } = blockComponentProps;
-  const blockTxs = await txsFromBlock(chainArchivist, block);
+  const blockTxs = await txsFromBlock(block);
   const txHashes = blockTxs.map(([_, hash]) => hash);
   const item = {
     child: /* @__PURE__ */ React9.createElement(BlockComponent, {
@@ -459,13 +454,13 @@ var buildBlockChainRenderComponent = /* @__PURE__ */ __name(async (BlockComponen
       transactions: txHashes,
       ...remainingProps
     }),
-    key: block.block.toString(),
+    key: block[0].block.toString(),
     block
   };
   return item;
 }, "buildBlockChainRenderComponent");
-var buildBlockHeadingComponent = /* @__PURE__ */ __name(async (blockComponentProps, chainArchivist) => {
-  return await buildBlockChainRenderComponent(BlockHeadingFlexbox, blockComponentProps, chainArchivist);
+var buildBlockHeadingComponent = /* @__PURE__ */ __name(async (blockComponentProps) => {
+  return await buildBlockChainRenderComponent(BlockHeadingFlexbox, blockComponentProps);
 }, "buildBlockHeadingComponent");
 
 // src/components/block/hooks/useDynamicBlockComponents.ts
@@ -474,13 +469,13 @@ var useDynamicBlockComponents = /* @__PURE__ */ __name((BlockComponent, params,
   const [blockChainRenderComponents, setBlockChainRenderComponents] = useState8([]);
   const { onBlock } = useChainAnalyzersContext();
   const onAddBlock = /* @__PURE__ */ __name(async (block) => {
-    if (!isBlockBoundWitness(block) || !chainArchivist) return;
+    if (!block || !chainArchivist) return;
     const blockComponentProps = {
       block
     };
-    const newBlockComponent = await buildBlockChainRenderComponent(BlockComponent, blockComponentProps, chainArchivist);
-    if (block.block !== blockChainRenderComponents[0]?.block.block) {
-      void onBlock?.(chainArchivist, block);
+    const newBlockComponent = await buildBlockChainRenderComponent(BlockComponent, blockComponentProps);
+    if (block?.[0].block !== blockChainRenderComponents[0]?.block?.[0].block) {
+      void onBlock?.(block);
       setBlockChainRenderComponents((blockComponents) => {
         const newBlockComponents = [
           newBlockComponent,
@@ -509,13 +504,13 @@ var useStaticBlockComponents = /* @__PURE__ */ __name((BlockComponent, params, b
     const { chainArchivist } = params;
     return await Promise.all(resolvedBlockWithStorage?.map(async (block) => {
       if (onBlock && chainArchivist) {
-        await onBlock(chainArchivist, block);
+        await onBlock(block);
       }
       const blockComponentProps = {
         block,
         defaultExpanded: true
       };
-      return await buildBlockChainRenderComponent(BlockComponent, blockComponentProps, chainArchivist);
+      return await buildBlockChainRenderComponent(BlockComponent, blockComponentProps);
     }));
   }, [
     blocks,
@@ -530,14 +525,13 @@ var useStaticBlockComponents = /* @__PURE__ */ __name((BlockComponent, params, b
 
 // src/components/block/hooks/useTxsFromBlock.ts
 import { usePromise as usePromise2 } from "@xylabs/react-promise";
-var useTxsFromBlock = /* @__PURE__ */ __name((chainArchivist, block) => {
+var useTxsFromBlock = /* @__PURE__ */ __name((block) => {
   return usePromise2(async () => {
-    if (block && chainArchivist) {
-      return await txsFromBlock(chainArchivist, block);
+    if (block) {
+      return await txsFromBlock(block);
     }
   }, [
-    block,
-    chainArchivist
+    block
   ]);
 }, "useTxsFromBlock");
 
@@ -587,11 +581,11 @@ var BlockMenuExpanded = /* @__PURE__ */ __name(({ block }) => {
     },
     onClose: handleClose
   }, /* @__PURE__ */ React11.createElement(BWPreviousHashMenuItem, {
-    boundwitness: block,
+    boundwitness: block?.[0],
     dense: true,
     onDialogClose: handleClose
   }), /* @__PURE__ */ React11.createElement(BWJsonMenuItem, {
-    boundwitness: block,
+    boundwitness: block?.[0],
     dense: true,
     onDialogClose: handleClose
   })));
@@ -603,15 +597,7 @@ import { EthAddress } from "@xylabs/eth-address";
 import { BlockiesAvatar } from "@xyo-network/react-chain-blockies";
 import React12, { useMemo as useMemo7 } from "react";
 var BlockProducerChip = /* @__PURE__ */ __name(({ block, ...props }) => {
-  const sharedAddress = block?.addresses[0];
-  const blockProducer2 = useMemo7(() => {
-    if (block) {
-      const producer = block.addresses.find((address) => address !== sharedAddress);
-      return producer;
-    }
-  }, [
-    block
-  ]);
+  const blockProducer2 = block?.[0].addresses[0];
   const shortedBlockProducer = blockProducer2 ? EthAddress.parse(blockProducer2)?.toShortString(3) : null;
   const avatar = useMemo7(() => blockProducer2 === "" ? void 0 : /* @__PURE__ */ React12.createElement(BlockiesAvatar, {
     blockiesOptions: {
@@ -630,7 +616,7 @@ var BlockProducerChip = /* @__PURE__ */ __name(({ block, ...props }) => {
 
 // src/components/block/BlockHeadingFlexbox.tsx
 var BlockHeadingFlexbox = /* @__PURE__ */ __name(({ block, defaultExpanded, transactions }) => {
-  const hash = usePayloadHash(block);
+  const hash = usePayloadHash(block?.[0]);
   const [blockHeadingRef, blockHeadingListener] = useBlockHeadingEvents();
   const { pollingState } = useChainPollingContext();
   const expanded = pollingState === "paused" || defaultExpanded;
@@ -645,7 +631,7 @@ var BlockHeadingFlexbox = /* @__PURE__ */ __name(({ block, defaultExpanded, tran
     onClick: /* @__PURE__ */ __name(() => blockHeadingListener("block-hash", "click", hash), "onClick")
   }, /* @__PURE__ */ React13.createElement(LinkedDivider, null), /* @__PURE__ */ React13.createElement(HashHeadingPaper, {
     hash,
-    heading: block?.block === void 0 ? "" : block.block.toString(),
+    heading: block?.[0].block === void 0 ? "" : block?.[0].block.toString(),
     paperProps: {
       sx: {
         p: 1,
@@ -661,7 +647,7 @@ var BlockHeadingFlexbox = /* @__PURE__ */ __name(({ block, defaultExpanded, tran
       transactions
     }), /* @__PURE__ */ React13.createElement(BWVerification, {
       iconColors: true,
-      boundwitness: block
+      boundwitness: block?.[0]
     }), /* @__PURE__ */ React13.createElement("span", {
       style: {
         // maxWidth is required for css animation to work and 28px is the width of the icon button
@@ -703,20 +689,20 @@ var useLinkedBlockItem = /* @__PURE__ */ __name((noun, data) => {
 
 // src/components/block/table/cell/BlockNumber.tsx
 var BlockNumberTableCell = /* @__PURE__ */ __name(({ block, linked, ...props }) => {
-  const [ref, handleClick] = useLinkedBlockItem("block-number", block?.block.toString());
-  const blockNumberBigInt = block ? block.block.toString() : "";
+  const [ref, handleClick] = useLinkedBlockItem("block-number", block?.[0].block.toString());
+  const blockNumberBigInt = block ? block[0].block.toString() : "";
   return /* @__PURE__ */ React14.createElement(TableCell, {
     ref,
     ...props
   }, /* @__PURE__ */ React14.createElement(Tooltip, {
     title: `Block Number: ${blockNumberBigInt}`
   }, /* @__PURE__ */ React14.createElement("span", null, linked && block ? /* @__PURE__ */ React14.createElement(Link, {
-    title: block.block.toString(),
+    title: block[0].block.toString(),
     onClick: handleClick,
     sx: {
       cursor: "pointer"
     }
-  }, block.block.toString()) : null, !linked && blockNumberBigInt)));
+  }, block[0].block.toString()) : null, !linked && blockNumberBigInt)));
 }, "BlockNumberTableCell");
 
 // src/components/block/table/cell/Hash.tsx
@@ -725,7 +711,7 @@ import { Identicon } from "@xylabs/react-identicon";
 import { usePayloadHash as usePayloadHash2 } from "@xyo-network/react-shared";
 import React15 from "react";
 var BlockHashTableCell = /* @__PURE__ */ __name(({ block, identiconProps, linked, ...props }) => {
-  const hash = usePayloadHash2(block);
+  const hash = usePayloadHash2(block?.[0]);
   const [ref, handleClick] = useLinkedBlockItem("block-hash", hash);
   const shortenedHash = hash ? `${hash.slice(0, 4)}...${hash.slice(-5, -1)}` : "";
   return /* @__PURE__ */ React15.createElement(TableCell2, {
@@ -759,7 +745,7 @@ import React16, { useState as useState9 } from "react";
 var BlockJsonViewTableCell = /* @__PURE__ */ __name(({ block, ...props }) => {
   const [open, setOpen] = useState9(false);
   const onClose = /* @__PURE__ */ __name(() => setOpen(false), "onClose");
-  const hash = usePayloadHash3(block);
+  const hash = usePayloadHash3(block?.[0]);
   const title = hash ? `JSON for ${ellipsize(hash, 5)}` : "JSON";
   return /* @__PURE__ */ React16.createElement(TableCell3, props, /* @__PURE__ */ React16.createElement(FlexRow3, {
     sx: {
@@ -811,8 +797,8 @@ var BlockProducerTableCell = /* @__PURE__ */ __name(({ block, linked, producerCh
 import { Error as Error2 } from "@mui/icons-material";
 import { Link as Link2, TableCell as TableCell5, Tooltip as Tooltip4 } from "@mui/material";
 import React18 from "react";
-var BlockTransactionCountTableCell = /* @__PURE__ */ __name(({ block, chainArchivist, linked, ...props }) => {
-  const [txs, error] = useTxsFromBlock(chainArchivist, block);
+var BlockTransactionCountTableCell = /* @__PURE__ */ __name(({ block, linked, ...props }) => {
+  const [txs, error] = useTxsFromBlock(block);
   const [ref, handleClick] = useLinkedBlockItem("transaction-count", JSON.stringify(txs ?? null));
   return /* @__PURE__ */ React18.createElement(TableCell5, {
     ref,
@@ -835,7 +821,7 @@ import { FlexRow as FlexRow5 } from "@xylabs/react-flexbox";
 import { BWVerification as BWVerification2 } from "@xyo-network/react-chain-boundwitness";
 import React19 from "react";
 var BlockVerificationTableCell = /* @__PURE__ */ __name(({ block, linked, ...props }) => {
-  const [ref, handleClick] = useLinkedBlockItem("block-verification", block?.block.toString());
+  const [ref, handleClick] = useLinkedBlockItem("block-verification", block?.[0].block.toString());
   return /* @__PURE__ */ React19.createElement(TableCell6, {
     ref,
     ...props
@@ -846,31 +832,40 @@ var BlockVerificationTableCell = /* @__PURE__ */ __name(({ block, linked, ...pro
   }, /* @__PURE__ */ React19.createElement(BWVerification2, {
     onClick: linked ? handleClick : void 0,
     iconColors: true,
-    boundwitness: block
+    boundwitness: block?.[0]
   })));
 }, "BlockVerificationTableCell");
 
 // src/components/block/table/Ex.tsx
-import { TableBody, TableCell as TableCell7, TableHead, TableRow } from "@mui/material";
+import { TableBody } from "@mui/material";
 import { TableEx } from "@xyo-network/react-table";
+import React21 from "react";
+
+// src/components/block/table/head/TableHead.tsx
+import { TableCell as TableCell7, TableHead, TableRow } from "@mui/material";
 import React20 from "react";
-var BlockchainTableEx = /* @__PURE__ */ __name(({ ref, children, ...props }) => {
-  return /* @__PURE__ */ React20.createElement(TableEx, {
-    ref,
-    ...props
-  }, /* @__PURE__ */ React20.createElement(TableHead, null, /* @__PURE__ */ React20.createElement(TableRow, null, /* @__PURE__ */ React20.createElement(TableCell7, null, "Block Hash"), /* @__PURE__ */ React20.createElement(TableCell7, null, "Block Number"), /* @__PURE__ */ React20.createElement(TableCell7, null, "Transaction Count"), /* @__PURE__ */ React20.createElement(TableCell7, {
+var BlockchainTableHead = /* @__PURE__ */ __name(() => {
+  return /* @__PURE__ */ React20.createElement(TableHead, null, /* @__PURE__ */ React20.createElement(TableRow, null, /* @__PURE__ */ React20.createElement(TableCell7, null, "Block Hash"), /* @__PURE__ */ React20.createElement(TableCell7, null, "Block Number"), /* @__PURE__ */ React20.createElement(TableCell7, null, "Transaction Count"), /* @__PURE__ */ React20.createElement(TableCell7, {
     align: "center"
   }, "Block Producer"), /* @__PURE__ */ React20.createElement(TableCell7, {
     align: "center"
   }, "Valid"), /* @__PURE__ */ React20.createElement(TableCell7, {
     align: "center"
-  }, "JSON"))), /* @__PURE__ */ React20.createElement(TableBody, null, children));
+  }, "JSON")));
+}, "BlockchainTableHead");
+
+// src/components/block/table/Ex.tsx
+var BlockchainTableEx = /* @__PURE__ */ __name(({ ref, children, ...props }) => {
+  return /* @__PURE__ */ React21.createElement(TableEx, {
+    ref,
+    ...props
+  }, /* @__PURE__ */ React21.createElement(BlockchainTableHead, null), /* @__PURE__ */ React21.createElement(TableBody, null, children));
 }, "BlockchainTableEx");
 BlockchainTableEx.displayName = "BlockchainTableEx";
 
 // src/components/block/table/row/TableRow.tsx
 import { TableRow as TableRow2 } from "@mui/material";
-import React21, { useMemo as useMemo8 } from "react";
+import React22, { useMemo as useMemo8 } from "react";
 var BlockChainTableRow = /* @__PURE__ */ __name(({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   block,
@@ -890,36 +885,36 @@ var BlockChainTableRow = /* @__PURE__ */ __name(({
   }), [
     block
   ]);
-  return /* @__PURE__ */ React21.createElement(TableRow2, props, /* @__PURE__ */ React21.createElement(BlockHashTableCell, defaultTableCellProps), /* @__PURE__ */ React21.createElement(BlockNumberTableCell, linkedTableCellProps), /* @__PURE__ */ React21.createElement(BlockTransactionCountTableCell, linkedTableCellProps), /* @__PURE__ */ React21.createElement(BlockProducerTableCell, defaultTableCellProps), /* @__PURE__ */ React21.createElement(BlockVerificationTableCell, defaultTableCellProps), /* @__PURE__ */ React21.createElement(BlockJsonViewTableCell, defaultTableCellProps));
+  return /* @__PURE__ */ React22.createElement(TableRow2, props, /* @__PURE__ */ React22.createElement(BlockHashTableCell, defaultTableCellProps), /* @__PURE__ */ React22.createElement(BlockNumberTableCell, linkedTableCellProps), /* @__PURE__ */ React22.createElement(BlockTransactionCountTableCell, linkedTableCellProps), /* @__PURE__ */ React22.createElement(BlockProducerTableCell, defaultTableCellProps), /* @__PURE__ */ React22.createElement(BlockVerificationTableCell, defaultTableCellProps), /* @__PURE__ */ React22.createElement(BlockJsonViewTableCell, defaultTableCellProps));
 }, "BlockChainTableRow");
 
 // src/components/chain/controls/PollingControlsFlexbox.tsx
 import { Autorenew, Pause } from "@mui/icons-material";
 import { Alert as Alert3, AlertTitle as AlertTitle2, Grow, Icon as Icon2, IconButton as IconButton4, Tooltip as Tooltip5 } from "@mui/material";
 import { FlexRow as FlexRow6 } from "@xylabs/react-flexbox";
-import React26, { memo } from "react";
+import React27, { memo } from "react";
 
 // src/components/chain/stats/Dialog.tsx
 import { QueryStats } from "@mui/icons-material";
 import { Dialog as Dialog2, DialogContent as DialogContent2, DialogTitle as DialogTitle2, IconButton as IconButton3 } from "@mui/material";
-import React24, { useState as useState10 } from "react";
+import React25, { useState as useState10 } from "react";
 
 // src/components/chain/stats/producer/ProducerFlexbox.tsx
 import { ListItem, styled, Typography as Typography3 } from "@mui/material";
 import { ErrorRender as ErrorRender3 } from "@xylabs/react-error";
 import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
 import { isChainSummaryProducers } from "@xyo-network/chain-protocol";
-import React23, { useMemo as useMemo9 } from "react";
+import React24, { useMemo as useMemo9 } from "react";
 
 // src/components/chain/stats/producer/Table.tsx
 import { Table, TableBody as TableBody2, TableCell as TableCell8, TableHead as TableHead2, TableRow as TableRow3, useTheme } from "@mui/material";
 import { BlockiesAvatar as BlockiesAvatar2 } from "@xyo-network/react-chain-blockies";
-import React22 from "react";
+import React23 from "react";
 var ChainProducerStatsTable = /* @__PURE__ */ __name(({ producers, ...props }) => {
   const theme = useTheme();
-  return /* @__PURE__ */ React22.createElement(Table, props, /* @__PURE__ */ React22.createElement(TableHead2, null, /* @__PURE__ */ React22.createElement(TableRow3, null, /* @__PURE__ */ React22.createElement(TableCell8, null, "Address"), /* @__PURE__ */ React22.createElement(TableCell8, null, "Blocks Produced"), /* @__PURE__ */ React22.createElement(TableCell8, null, "Rewards Earned Produced"))), /* @__PURE__ */ React22.createElement(TableBody2, null, producers?.map((producer) => /* @__PURE__ */ React22.createElement(TableRow3, {
+  return /* @__PURE__ */ React23.createElement(Table, props, /* @__PURE__ */ React23.createElement(TableHead2, null, /* @__PURE__ */ React23.createElement(TableRow3, null, /* @__PURE__ */ React23.createElement(TableCell8, null, "Address"), /* @__PURE__ */ React23.createElement(TableCell8, null, "Blocks Produced"), /* @__PURE__ */ React23.createElement(TableCell8, null, "Rewards Earned Produced"))), /* @__PURE__ */ React23.createElement(TableBody2, null, producers?.map((producer) => /* @__PURE__ */ React23.createElement(TableRow3, {
     key: producer.address
-  }, /* @__PURE__ */ React22.createElement(TableCell8, null, /* @__PURE__ */ React22.createElement(BlockiesAvatar2, {
+  }, /* @__PURE__ */ React23.createElement(TableCell8, null, /* @__PURE__ */ React23.createElement(BlockiesAvatar2, {
     blockiesOptions: {
       seed: producer.address
     },
@@ -927,7 +922,7 @@ var ChainProducerStatsTable = /* @__PURE__ */ __name(({ producers, ...props }) =
       height: theme.spacing(2.75),
       width: theme.spacing(2.75)
     }
-  })), /* @__PURE__ */ React22.createElement(TableCell8, null, producer.blocksProduced.toString()), /* @__PURE__ */ React22.createElement(TableCell8, null, producer.rewardsEarned.toString())))));
+  })), /* @__PURE__ */ React23.createElement(TableCell8, null, producer.blocksProduced.toString()), /* @__PURE__ */ React23.createElement(TableCell8, null, producer.rewardsEarned.toString())))));
 }, "ChainProducerStatsTable");
 
 // src/components/chain/stats/producer/ProducerFlexbox.tsx
@@ -949,16 +944,16 @@ var BlockProducerStatsFlexbox = /* @__PURE__ */ __name(({ payload, ...props }) =
   const producersArray = useMemo9(() => Object.values(producer?.producers ?? {}), [
     producer
   ]);
-  return /* @__PURE__ */ React23.createElement(FlexCol3, {
+  return /* @__PURE__ */ React24.createElement(FlexCol3, {
     alignItems: "start",
     gap: 1,
     ...props
-  }, /* @__PURE__ */ React23.createElement(ErrorRender3, {
+  }, /* @__PURE__ */ React24.createElement(ErrorRender3, {
     error: producerError,
     scope: "BlockProducerStatsFlexbox"
-  }), /* @__PURE__ */ React23.createElement(Typography3, {
+  }), /* @__PURE__ */ React24.createElement(Typography3, {
     fontSize: "1rem"
-  }, "Block Producers"), /* @__PURE__ */ React23.createElement(ChainProducerStatsTable, {
+  }, "Block Producers"), /* @__PURE__ */ React24.createElement(ChainProducerStatsTable, {
     producers: producersArray
   }));
 }, "BlockProducerStatsFlexbox");
@@ -970,18 +965,18 @@ var StyledListItem = styled(ListItem)(() => ({
 // src/components/chain/stats/Dialog.tsx
 var ChainAnalyzerStatsDialog = /* @__PURE__ */ __name((props) => {
   const { analyzers, statsUpdated } = useChainAnalyzersContext();
-  return /* @__PURE__ */ React24.createElement(Dialog2, props, /* @__PURE__ */ React24.createElement(DialogTitle2, null, "Chain Analysis"), /* @__PURE__ */ React24.createElement(DialogContent2, null, !!statsUpdated && Object.entries(analyzers).map(([id2, analyzer]) => /* @__PURE__ */ React24.createElement("div", {
+  return /* @__PURE__ */ React25.createElement(Dialog2, props, /* @__PURE__ */ React25.createElement(DialogTitle2, null, "Chain Analysis"), /* @__PURE__ */ React25.createElement(DialogContent2, null, !!statsUpdated && Object.entries(analyzers).map(([id2, analyzer]) => /* @__PURE__ */ React25.createElement("div", {
     key: id2
-  }, id2 === "producers" && /* @__PURE__ */ React24.createElement(BlockProducerStatsFlexbox, {
+  }, id2 === "producers" && /* @__PURE__ */ React25.createElement(BlockProducerStatsFlexbox, {
     payload: analyzer.result()
   })))));
 }, "ChainAnalyzerStatsDialog");
 var ChainAnalyzerStatsDialogFromContext = /* @__PURE__ */ __name((props) => {
   const [open, setOpen] = useState10(false);
   const handleClose = /* @__PURE__ */ __name(() => setOpen(false), "handleClose");
-  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(IconButton3, {
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(IconButton3, {
     onClick: /* @__PURE__ */ __name(() => setOpen(true), "onClick")
-  }, /* @__PURE__ */ React24.createElement(QueryStats, null)), /* @__PURE__ */ React24.createElement(ChainAnalyzerStatsDialog, {
+  }, /* @__PURE__ */ React25.createElement(QueryStats, null)), /* @__PURE__ */ React25.createElement(ChainAnalyzerStatsDialog, {
     onClose: handleClose,
     open,
     ...props
@@ -990,19 +985,19 @@ var ChainAnalyzerStatsDialogFromContext = /* @__PURE__ */ __name((props) => {
 
 // src/components/chain/controls/PulseSvgIcon.tsx
 import { alpha, createSvgIcon, keyframes, styled as styled2 } from "@mui/material";
-import React25 from "react";
-var PulseSvgIcon = createSvgIcon(/* @__PURE__ */ React25.createElement("svg", {
+import React26 from "react";
+var PulseSvgIcon = createSvgIcon(/* @__PURE__ */ React26.createElement("svg", {
   viewBox: "0 0 80 80",
   version: "1.1",
   xmlns: "http://www.w3.org/2000/svg"
-}, /* @__PURE__ */ React25.createElement("g", {
+}, /* @__PURE__ */ React26.createElement("g", {
   transform: "translate(34,34)"
-}, /* @__PURE__ */ React25.createElement("circle", {
+}, /* @__PURE__ */ React26.createElement("circle", {
   className: "core",
   cx: "0",
   cy: "0",
   r: "6"
-}), /* @__PURE__ */ React25.createElement("circle", {
+}), /* @__PURE__ */ React26.createElement("circle", {
   className: "radar",
   cx: "0",
   cy: "0",
@@ -1066,24 +1061,24 @@ var StyledPulseSvgIcon = styled2(PulseSvgIcon)(({ theme }) => {
 var PollingControlsFlexbox = /* @__PURE__ */ __name(({ blocksBehind, pollingState, setPollingState }) => {
   const paused = pollingState === "paused";
   const running = pollingState === "running";
-  return /* @__PURE__ */ React26.createElement(FlexRow6, {
+  return /* @__PURE__ */ React27.createElement(FlexRow6, {
     justifyContent: "space-between",
     width: "100%"
-  }, /* @__PURE__ */ React26.createElement(FlexRow6, {
+  }, /* @__PURE__ */ React27.createElement(FlexRow6, {
     gap: 2
-  }, running && /* @__PURE__ */ React26.createElement(IconButton4, {
+  }, running && /* @__PURE__ */ React27.createElement(IconButton4, {
     onClick: /* @__PURE__ */ __name(() => setPollingState?.("paused"), "onClick"),
     title: "Pause Block Stream"
-  }, /* @__PURE__ */ React26.createElement(Pause, null)), paused && /* @__PURE__ */ React26.createElement(IconButton4, {
+  }, /* @__PURE__ */ React27.createElement(Pause, null)), paused && /* @__PURE__ */ React27.createElement(IconButton4, {
     onClick: /* @__PURE__ */ __name(() => setPollingState?.("running"), "onClick"),
     title: "Re-Sync Block Stream"
-  }, /* @__PURE__ */ React26.createElement(Autorenew, null)), /* @__PURE__ */ React26.createElement(ChainAnalyzerStatsDialogFromContext, null)), /* @__PURE__ */ React26.createElement(FlexRow6, {
+  }, /* @__PURE__ */ React27.createElement(Autorenew, null)), /* @__PURE__ */ React27.createElement(ChainAnalyzerStatsDialogFromContext, null)), /* @__PURE__ */ React27.createElement(FlexRow6, {
     gap: 2
-  }, /* @__PURE__ */ React26.createElement(Grow, {
+  }, /* @__PURE__ */ React27.createElement(Grow, {
     in: (blocksBehind ?? 0) > 0
-  }, /* @__PURE__ */ React26.createElement(Tooltip5, {
+  }, /* @__PURE__ */ React27.createElement(Tooltip5, {
     title: "Click to Re-Sync"
-  }, /* @__PURE__ */ React26.createElement(Alert3, {
+  }, /* @__PURE__ */ React27.createElement(Alert3, {
     sx: {
       py: 0,
       px: 1,
@@ -1091,11 +1086,11 @@ var PollingControlsFlexbox = /* @__PURE__ */ __name(({ blocksBehind, pollingStat
     },
     severity: "warning",
     onClick: /* @__PURE__ */ __name(() => setPollingState?.("running"), "onClick")
-  }, /* @__PURE__ */ React26.createElement(AlertTitle2, {
+  }, /* @__PURE__ */ React27.createElement(AlertTitle2, {
     sx: {
       mb: 0
     }
-  }, "Behind:", " ", blocksBehind)))), /* @__PURE__ */ React26.createElement(Icon2, null, /* @__PURE__ */ React26.createElement(StyledPulseSvgIcon, {
+  }, "Behind:", " ", blocksBehind)))), /* @__PURE__ */ React27.createElement(Icon2, null, /* @__PURE__ */ React27.createElement(StyledPulseSvgIcon, {
     className: running ? "" : "paused"
   }))));
 }, "PollingControlsFlexbox");
@@ -1103,9 +1098,9 @@ var MemoizedPollingControlsFlexbox = /* @__PURE__ */ memo(PollingControlsFlexbox
 
 // src/components/chain/dialog/Dialog.tsx
 import { Button as Button3, Dialog as Dialog3, DialogActions as DialogActions2, DialogContent as DialogContent3 } from "@mui/material";
-import React27 from "react";
+import React28 from "react";
 var TransactionsDialog = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ React27.createElement(Dialog3, props, /* @__PURE__ */ React27.createElement(DialogContent3, null, "Transactions Dialog"), /* @__PURE__ */ React27.createElement(DialogActions2, null, /* @__PURE__ */ React27.createElement(Button3, {
+  return /* @__PURE__ */ React28.createElement(Dialog3, props, /* @__PURE__ */ React28.createElement(DialogContent3, null, "Transactions Dialog"), /* @__PURE__ */ React28.createElement(DialogActions2, null, /* @__PURE__ */ React28.createElement(Button3, {
     variant: "outlined",
     onClick: /* @__PURE__ */ __name((e) => props?.onClose?.(e, "escapeKeyDown"), "onClick")
   }, "Close")));
@@ -1117,10 +1112,13 @@ var useOnBlock = /* @__PURE__ */ __name((initialHeadNumber, onAddBlock, liveHead
   const blocksWhilePaused = useRef2([]);
   const lastLiveHead = useRef2(liveHead);
   useEffect(() => {
-    if (lastLiveHead.current?.block === liveHead?.block) return;
+    const lastLiveHeadBlock = lastLiveHead.current?.[0];
+    const blocksWhilePausedBlock = lastLiveHead.current?.[0];
+    const liveHeadBlock = liveHead?.[0];
+    if (lastLiveHeadBlock?.block === liveHeadBlock?.block) return;
     if (liveHead && onAddBlock) {
       lastLiveHead.current = liveHead;
-      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") {
@@ -1142,9 +1140,9 @@ var useOnBlock = /* @__PURE__ */ __name((initialHeadNumber, onAddBlock, liveHead
 
 // src/components/chain/pagination/BlockChainPagination.tsx
 import { TablePaginationActions } from "@xyo-network/react-payload-table";
-import React28 from "react";
+import React29 from "react";
 var BlockChainPagination = /* @__PURE__ */ __name(({ count = 0, onPageChange, page, rowsPerPage = 10 }) => {
-  return /* @__PURE__ */ React28.createElement(TablePaginationActions, {
+  return /* @__PURE__ */ React29.createElement(TablePaginationActions, {
     count,
     onPageChange,
     page,
@@ -1175,15 +1173,14 @@ var useChainPagination = /* @__PURE__ */ __name((pageSize, blockComponents) => {
   };
 }, "useChainPagination");
 
-// src/components/chain/render/dynamic/flexbox/Flexbox.tsx
+// src/components/chain/render/dynamic/flexbox/variants/Base.tsx
 import { ErrorRender as ErrorRender4 } from "@xylabs/react-error";
 import { FlexCol as FlexCol5 } from "@xylabs/react-flexbox";
-import { ChainProducersAnalyzer } from "@xyo-network/chain-protocol";
-import React30, { useMemo as useMemo14 } from "react";
+import React31 from "react";
 
 // src/components/chain/list/Animated.tsx
 import { AnimatedList } from "@xylabs/react-animation";
-import React29 from "react";
+import React30 from "react";
 
 // src/components/chain/styled/BlockListWrapperFlexbox.tsx
 import { styled as styled3 } from "@mui/material";
@@ -1204,10 +1201,10 @@ var BlockListWrapperFlexBox = styled3(FlexCol4, {
 
 // src/components/chain/list/Animated.tsx
 var BlockListAnimated = /* @__PURE__ */ __name(({ blockChainRenderComponents }) => {
-  return /* @__PURE__ */ React29.createElement(BlockListWrapperFlexBox, {
+  return /* @__PURE__ */ React30.createElement(BlockListWrapperFlexBox, {
     alignItems: "stretch",
     width: "100%"
-  }, /* @__PURE__ */ React29.createElement(AnimatedList, {
+  }, /* @__PURE__ */ React30.createElement(AnimatedList, {
     fullWidth: true,
     items: blockChainRenderComponents
   }));
@@ -1218,7 +1215,9 @@ import { useMemo as useMemo12 } from "react";
 
 // src/hooks/chain-iterator/ChainIteratorStore.ts
 import { assertEx } from "@xylabs/assert";
+import { hydrateBlock } from "@xyo-network/chain-protocol";
 import { XyoChainBlockNumberIterator } from "@xyo-network/chain-services";
+import { PayloadBuilder as PayloadBuilder3 } from "@xyo-network/payload-builder";
 var ChainIteratorStore = class _ChainIteratorStore {
   static {
     __name(this, "ChainIteratorStore");
@@ -1237,14 +1236,17 @@ var ChainIteratorStore = class _ChainIteratorStore {
     const instance = new _ChainIteratorStore();
     const chainIterator = await XyoChainBlockNumberIterator.create(params);
     instance._chainIterator = chainIterator;
+    const head = await chainIterator.head();
+    const hydratedHead = await hydrateBlock(params.chainArchivist, await PayloadBuilder3.hash(head));
     instance._values = {
       chainIterator,
-      head: await chainIterator.head()
+      head: hydratedHead
     };
-    const headUpdatedListener = /* @__PURE__ */ __name(({ blocks }) => {
+    const headUpdatedListener = /* @__PURE__ */ __name(async ({ blocks }) => {
+      const hydratedBlock = await hydrateBlock(params.chainArchivist, await PayloadBuilder3.hash(blocks?.[0]));
       instance._values = {
         chainIterator,
-        head: blocks?.[0]
+        head: hydratedBlock
       };
       instance.emitChange();
     }, "headUpdatedListener");
@@ -1279,7 +1281,7 @@ var ChainIteratorStore = class _ChainIteratorStore {
 import { assertEx as assertEx2 } from "@xylabs/assert";
 import { usePromise as usePromise3 } from "@xylabs/react-promise";
 import { BoundWitnessBuilder } from "@xyo-network/boundwitness-builder";
-import { isBlockBoundWitness as isBlockBoundWitness2 } from "@xyo-network/chain-model";
+import { isBlockBoundWitness } from "@xyo-network/chain-model";
 var resolveDefinedHead = /* @__PURE__ */ __name(async (head, chainArchivist) => {
   const [headPayload] = await chainArchivist.get([
     head
@@ -1288,7 +1290,7 @@ var resolveDefinedHead = /* @__PURE__ */ __name(async (head, chainArchivist) =>
     const [currentHead] = await new BoundWitnessBuilder().build();
     return currentHead;
   } else {
-    return assertEx2(isBlockBoundWitness2(headPayload) ? headPayload : void 0, () => `Expected a block bound witness: ${JSON.stringify(headPayload)}`);
+    return assertEx2(isBlockBoundWitness(headPayload) ? headPayload : void 0, () => `Expected a block bound witness: ${JSON.stringify(headPayload)}`);
   }
 }, "resolveDefinedHead");
 var useChainIteratorParams = /* @__PURE__ */ __name(({ chainArchivist, chainInformation, head }) => {
@@ -1298,7 +1300,7 @@ var useChainIteratorParams = /* @__PURE__ */ __name(({ chainArchivist, chainInfo
         head
       ]);
       const foundResult = assertEx2(result, () => `Head not found: ${head}`);
-      const resolvedHead = assertEx2(isBlockBoundWitness2(foundResult) ? foundResult : void 0, () => `Head is not a boundwitness: ${JSON.stringify(foundResult)}`);
+      const resolvedHead = assertEx2(isBlockBoundWitness(foundResult) ? foundResult : void 0, () => `Head is not a boundwitness: ${JSON.stringify(foundResult)}`);
       return {
         chainArchivist,
         chainInformation,
@@ -1391,7 +1393,8 @@ var useChainIteratorStore = /* @__PURE__ */ __name((chainIteratorParams) => {
             error
           };
           const noCachedValue = cachedSnapshot.current.chainIterator === void 0;
-          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;
@@ -1415,29 +1418,37 @@ var useChainIteratorStore = /* @__PURE__ */ __name((chainIteratorParams) => {
 // src/hooks/useIterateChain.ts
 import { assertEx as assertEx3 } from "@xylabs/assert";
 import { usePromise as usePromise5 } from "@xylabs/react-promise";
-import { isBlockBoundWitness as isBlockBoundWitness3 } from "@xyo-network/chain-model";
+import { isBlockBoundWitness as isBlockBoundWitness2 } from "@xyo-network/chain-model";
+import { hydrateBlock as hydrateBlock2 } from "@xyo-network/chain-protocol";
 import { XyoChainBlockNumberIterator as XyoChainBlockNumberIterator2 } from "@xyo-network/chain-services";
+import { PayloadBuilder as PayloadBuilder4 } from "@xyo-network/payload-builder";
+var getHydratedBlock = /* @__PURE__ */ __name(async (chainArchivist, head) => {
+  const headHash = await PayloadBuilder4.hash(head);
+  return await hydrateBlock2(chainArchivist, headHash);
+}, "getHydratedBlock");
 var iterateChain = /* @__PURE__ */ __name(async (chainIteratorParams, maxDepth) => {
   const { chainArchivist, head } = chainIteratorParams ?? {};
   if (chainArchivist && head) {
-    const headPayload = assertEx3(isBlockBoundWitness3(head) ? head : null, () => "Head is not a Block Bound Witness");
-    const headBlockBoundWitness = assertEx3(isBlockBoundWitness3(headPayload) ? headPayload : null, () => "Invalid head block");
+    const headPayload = assertEx3(isBlockBoundWitness2(head) ? head : null, () => "Head is not a Block Bound Witness");
+    const headBlockBoundWitness = assertEx3(isBlockBoundWitness2(headPayload) ? headPayload : null, () => "Invalid head block");
     const chainIterator = await XyoChainBlockNumberIterator2.create({
       head: headBlockBoundWitness,
       chainArchivist
     });
-    let block = await chainIterator.head();
+    const chainHead = await chainIterator.head();
+    let block = await getHydratedBlock(chainArchivist, chainHead);
     const blocks = [
       block
     ];
     let depth = 1;
     while (block) {
-      const [, next] = await chainIterator.previous(block.block, 2);
+      const [, next] = await chainIterator.previous(block[0].block, 2);
       if (!next) break;
-      blocks.push(next);
-      block = next;
+      const nextHydratedBlock = await getHydratedBlock(chainArchivist, next);
+      blocks.push(nextHydratedBlock);
+      block = nextHydratedBlock;
       depth++;
-      if (maxDepth && depth >= maxDepth || block?.block === 0) break;
+      if (maxDepth && depth >= maxDepth || block?.[0].block === 0) break;
     }
     return blocks;
   }
@@ -1461,7 +1472,7 @@ var useDynamicBlockRenderComponents = /* @__PURE__ */ __name((BlockComponent, bl
   const { blockChainRenderComponents, onAddBlock } = useDynamicBlockComponents(BlockComponent, params, maxBlocks);
   const { head: liveHead } = useChainIteratorStore(params);
   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
@@ -1532,24 +1543,28 @@ var useRemoteBlockChainRenderProps = /* @__PURE__ */ __name((chainArchivistModul
   };
 }, "useRemoteBlockChainRenderProps");
 
-// src/components/chain/render/dynamic/flexbox/Flexbox.tsx
-var Base = /* @__PURE__ */ __name(({ blockChainRenderProps, ...props }) => {
+// src/components/chain/render/dynamic/flexbox/variants/Base.tsx
+var DynamicListBase = /* @__PURE__ */ __name(({ blockChainRenderProps, ...props }) => {
   const { errors, blockChainRenderComponents, blocksWhilePaused, pollingState, updatePollingState } = useDynamicBlockRenderComponents(BlockHeadingFlexbox, blockChainRenderProps);
-  return /* @__PURE__ */ React30.createElement(FlexCol5, {
+  return /* @__PURE__ */ React31.createElement(FlexCol5, {
     alignItems: "start",
     ...props
-  }, errors?.map((error, index) => /* @__PURE__ */ React30.createElement(ErrorRender4, {
+  }, errors?.map((error) => /* @__PURE__ */ React31.createElement(ErrorRender4, {
     error,
-    key: index,
+    key: error?.name,
     scope: "DynamicBlockchainRenderFlexboxInner"
-  })), /* @__PURE__ */ React30.createElement(MemoizedPollingControlsFlexbox, {
+  })), /* @__PURE__ */ React31.createElement(MemoizedPollingControlsFlexbox, {
     blocksBehind: blocksWhilePaused?.length,
     pollingState,
     setPollingState: updatePollingState
-  }), /* @__PURE__ */ React30.createElement(BlockListAnimated, {
+  }), /* @__PURE__ */ React31.createElement(BlockListAnimated, {
     blockChainRenderComponents
   }));
-}, "Base");
+}, "DynamicListBase");
+
+// src/components/chain/render/dynamic/flexbox/variants/WithAnalysis.tsx
+import { ChainProducersAnalyzer } from "@xyo-network/chain-protocol";
+import React32, { useMemo as useMemo14 } from "react";
 var WithAnalysis = /* @__PURE__ */ __name(({ blockChainRenderProps, ...props }) => {
   const { chainInformation } = blockChainRenderProps ?? {};
   const analyzers = useMemo14(() => {
@@ -1561,34 +1576,39 @@ var WithAnalysis = /* @__PURE__ */ __name(({ blockChainRenderProps, ...props })
   }, [
     chainInformation
   ]);
-  return /* @__PURE__ */ React30.createElement(ChainAnalyzersProvider, {
+  return /* @__PURE__ */ React32.createElement(ChainAnalyzersProvider, {
     analyzers
-  }, /* @__PURE__ */ React30.createElement(ChainPollingProvider, null, /* @__PURE__ */ React30.createElement(DynamicBlockchainRenderFlexbox.Base, {
+  }, /* @__PURE__ */ React32.createElement(ChainPollingProvider, null, /* @__PURE__ */ React32.createElement(DynamicListBase, {
     blockChainRenderProps,
     ...props
   })));
 }, "WithAnalysis");
+
+// src/components/chain/render/dynamic/flexbox/variants/WithRemote.tsx
+import { ErrorRender as ErrorRender5 } from "@xylabs/react-error";
+import React33 from "react";
 var WithRemote = /* @__PURE__ */ __name(({ url, chainArchivistModuleId, blockChainRenderProps: blockChainRenderPropsArg, ...props }) => {
   const { error, blockChainRenderProps } = useRemoteBlockChainRenderProps(chainArchivistModuleId, url, blockChainRenderPropsArg);
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(ErrorRender4, {
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(ErrorRender5, {
     error,
     scope: "RemoteChainProviderFlexbox"
-  }), /* @__PURE__ */ React30.createElement(DynamicBlockchainRenderFlexbox.WithAnalysis, {
+  }), /* @__PURE__ */ React33.createElement(WithAnalysis, {
     blockChainRenderProps,
     ...props
   }));
 }, "WithRemote");
+
+// src/components/chain/render/dynamic/flexbox/Flexbox.tsx
 var DynamicBlockchainRenderFlexbox = {
-  Base,
+  Base: DynamicListBase,
   WithAnalysis,
   WithRemote
 };
 
-// src/components/chain/render/static/flexbox/Flexbox.tsx
-import { ErrorRender as ErrorRender5 } from "@xylabs/react-error";
+// src/components/chain/render/static/flexbox/variants/Base.tsx
+import { ErrorRender as ErrorRender6 } from "@xylabs/react-error";
 import { FlexCol as FlexCol6, FlexGrowRow as FlexGrowRow2 } from "@xylabs/react-flexbox";
-import { ChainProducersAnalyzer as ChainProducersAnalyzer2 } from "@xyo-network/chain-protocol";
-import React31, { useMemo as useMemo16 } from "react";
+import React34 from "react";
 
 // src/components/chain/render/static/hooks/useStaticBlockRenderComponents.ts
 import { exists } from "@xylabs/exists";
@@ -1618,30 +1638,34 @@ var useStaticBlockRenderComponents = /* @__PURE__ */ __name((BlockComponent, blo
   };
 }, "useStaticBlockRenderComponents");
 
-// src/components/chain/render/static/flexbox/Flexbox.tsx
-var Base2 = /* @__PURE__ */ __name(({ blockChainRenderProps, ...props }) => {
+// src/components/chain/render/static/flexbox/variants/Base.tsx
+var StaticListBase = /* @__PURE__ */ __name(({ blockChainRenderProps, ...props }) => {
   const { blockComponents, errors, paginatedBlockComponents, onPageChange, page, pageSize } = useStaticBlockRenderComponents(BlockHeadingFlexbox, blockChainRenderProps);
-  return /* @__PURE__ */ React31.createElement(FlexCol6, {
+  return /* @__PURE__ */ React34.createElement(FlexCol6, {
     alignItems: "start",
     gap: 2,
     width: "100%",
     ...props
-  }, errors?.map((error, index) => /* @__PURE__ */ React31.createElement(ErrorRender5, {
+  }, errors?.map((error) => /* @__PURE__ */ React34.createElement(ErrorRender6, {
     error,
-    key: index,
+    key: error.name,
     scope: "StaticBlockchainFlexboxInner"
-  })), paginatedBlockComponents?.length ? /* @__PURE__ */ React31.createElement(FlexGrowRow2, {
+  })), paginatedBlockComponents?.length ? /* @__PURE__ */ React34.createElement(FlexGrowRow2, {
     justifyContent: "space-between",
     width: "100%"
-  }, /* @__PURE__ */ React31.createElement(ChainAnalyzerStatsDialogFromContext, null), /* @__PURE__ */ React31.createElement(BlockChainPagination, {
+  }, /* @__PURE__ */ React34.createElement(ChainAnalyzerStatsDialogFromContext, null), /* @__PURE__ */ React34.createElement(BlockChainPagination, {
     count: blockComponents?.length ?? 0,
     onPageChange,
     page,
     rowsPerPage: pageSize
-  })) : null, /* @__PURE__ */ React31.createElement(BlockListAnimated, {
+  })) : null, /* @__PURE__ */ React34.createElement(BlockListAnimated, {
     blockChainRenderComponents: paginatedBlockComponents
   }));
-}, "Base");
+}, "StaticListBase");
+
+// src/components/chain/render/static/flexbox/variants/WithAnalysis.tsx
+import { ChainProducersAnalyzer as ChainProducersAnalyzer2 } from "@xyo-network/chain-protocol";
+import React35, { useMemo as useMemo16 } from "react";
 var WithAnalysis2 = /* @__PURE__ */ __name(({ blockChainRenderProps, ...props }) => {
   const { chainInformation } = blockChainRenderProps ?? {};
   const analyzers = useMemo16(() => {
@@ -1653,34 +1677,36 @@ var WithAnalysis2 = /* @__PURE__ */ __name(({ blockChainRenderProps, ...props })
   }, [
     chainInformation
   ]);
-  return /* @__PURE__ */ React31.createElement(ChainAnalyzersProvider, {
+  return /* @__PURE__ */ React35.createElement(ChainAnalyzersProvider, {
     analyzers
-  }, /* @__PURE__ */ React31.createElement(StaticBlockchainRenderFlexBox.Base, {
+  }, /* @__PURE__ */ React35.createElement(StaticListBase, {
     blockChainRenderProps,
     ...props
   }));
 }, "WithAnalysis");
+
+// src/components/chain/render/static/flexbox/Flexbox.tsx
 var StaticBlockchainRenderFlexBox = {
-  Base: Base2,
+  Base: StaticListBase,
   WithAnalysis: WithAnalysis2
 };
 
 // src/components/payload/builder/Flexbox.tsx
 import { FlexCol as FlexCol7 } from "@xylabs/react-flexbox";
 import { JsonViewerEx as JsonViewerEx2 } from "@xyo-network/react-payload-raw-info";
-import React32, { useState as useState13 } from "react";
+import React36, { useState as useState13 } from "react";
 var PayloadBuilderFlexbox = /* @__PURE__ */ __name(({ BuilderComponent, onBuild, ...props }) => {
   const [payload, setPayload] = useState13();
   const onBuildLocal = /* @__PURE__ */ __name((payload2) => {
     onBuild?.(payload2);
     setPayload(payload2);
   }, "onBuildLocal");
-  return /* @__PURE__ */ React32.createElement(FlexCol7, {
+  return /* @__PURE__ */ React36.createElement(FlexCol7, {
     gap: 2,
     ...props
-  }, /* @__PURE__ */ React32.createElement(BuilderComponent, {
+  }, /* @__PURE__ */ React36.createElement(BuilderComponent, {
     onBuild: onBuildLocal
-  }), payload && /* @__PURE__ */ React32.createElement(JsonViewerEx2, {
+  }), payload && /* @__PURE__ */ React36.createElement(JsonViewerEx2, {
     value: payload
   }));
 }, "PayloadBuilderFlexbox");
@@ -1688,11 +1714,11 @@ var PayloadBuilderFlexbox = /* @__PURE__ */ __name(({ BuilderComponent, onBuild,
 // src/components/payload/builder/producer-intent/Form.tsx
 import { Button as Button4, FormControl as FormControl5 } from "@mui/material";
 import { createProducerChainStakeIntent } from "@xyo-network/chain-ethereum";
-import React35, { useMemo as useMemo17, useState as useState16 } from "react";
+import React39, { useMemo as useMemo18, useState as useState16 } from "react";
 
 // src/components/payload/fields/BlockNumberTextField.tsx
 import { FormControl as FormControl3, FormHelperText as FormHelperText2, TextField as TextField3 } from "@mui/material";
-import React33, { useState as useState14 } from "react";
+import React37, { useState as useState14 } from "react";
 var BlockNumberTextField = /* @__PURE__ */ __name(({ errorMessage, onBlockNumberChanged, onChange, ...props }) => {
   const [blockNumber, setBlockNumber] = useState14();
   const handleChange = /* @__PURE__ */ __name((e) => {
@@ -1701,15 +1727,15 @@ var BlockNumberTextField = /* @__PURE__ */ __name(({ errorMessage, onBlockNumber
     onBlockNumberChanged?.(Number.parseInt(value));
     onChange?.(e);
   }, "handleChange");
-  return /* @__PURE__ */ React33.createElement(FormControl3, {
+  return /* @__PURE__ */ React37.createElement(FormControl3, {
     fullWidth: true
-  }, /* @__PURE__ */ React33.createElement(TextField3, {
+  }, /* @__PURE__ */ React37.createElement(TextField3, {
     error: !!errorMessage,
     onChange: handleChange,
     type: "number",
     value: blockNumber ?? "",
     ...props
-  }), errorMessage && /* @__PURE__ */ React33.createElement(FormHelperText2, {
+  }), errorMessage && /* @__PURE__ */ React37.createElement(FormHelperText2, {
     sx: {
       color: /* @__PURE__ */ __name((theme) => theme.palette.error.main, "color")
     }
@@ -1719,11 +1745,11 @@ var BlockNumberTextField = /* @__PURE__ */ __name(({ errorMessage, onBlockNumber
 // src/components/payload/fields/XyoAddressTextField.tsx
 import { FormControl as FormControl4, FormHelperText as FormHelperText3, TextField as TextField4 } from "@mui/material";
 import { asAddress } from "@xylabs/hex";
-import React34, { useEffect as useEffect4, useState as useState15 } from "react";
+import React38, { useMemo as useMemo17, useState as useState15 } from "react";
 var XyoAddressTextField = /* @__PURE__ */ __name(({ onAddressChanged, onChange, resetValue, ...props }) => {
   const [address, setAddress] = useState15("");
   const [addressError, setAddressError] = useState15();
-  useEffect4(() => setAddress(""), [
+  useMemo17(() => setAddress(""), [
     resetValue
   ]);
   const handleChange = /* @__PURE__ */ __name((event) => {
@@ -1743,15 +1769,15 @@ var XyoAddressTextField = /* @__PURE__ */ __name(({ onAddressChanged, onChange,
       onAddressChanged?.();
     }
   }, "handleBlur");
-  return /* @__PURE__ */ React34.createElement(FormControl4, {
+  return /* @__PURE__ */ React38.createElement(FormControl4, {
     fullWidth: true
-  }, /* @__PURE__ */ React34.createElement(TextField4, {
+  }, /* @__PURE__ */ React38.createElement(TextField4, {
     error: !!addressError,
     onBlur: handleBlur,
     onChange: handleChange,
     value: address,
     ...props
-  }), addressError && /* @__PURE__ */ React34.createElement(FormHelperText3, {
+  }), addressError && /* @__PURE__ */ React38.createElement(FormHelperText3, {
     sx: {
       color: /* @__PURE__ */ __name((theme) => theme.palette.error.main, "color")
     }
@@ -1764,7 +1790,7 @@ var ProducerIntentBuilderForm = /* @__PURE__ */ __name(({ onBuild }) => {
   const [exp, setExp] = useState16();
   const [nbf, setNbf] = useState16();
   const [blockRangeError, setBlockRangeError] = useState16();
-  const intentPayload = useMemo17(() => {
+  const intentPayload = useMemo18(() => {
     if (exp !== void 0 && nbf !== void 0) {
       if (exp <= nbf) {
         setBlockRangeError(new Error("Expires must be greater than Not Before"));
@@ -1784,33 +1810,33 @@ var ProducerIntentBuilderForm = /* @__PURE__ */ __name(({ onBuild }) => {
   const onBuildLocal = /* @__PURE__ */ __name(() => {
     if (onBuild && intentPayload) onBuild?.(intentPayload);
   }, "onBuildLocal");
-  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(FormControl5, {
+  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(FormControl5, {
     fullWidth: true
-  }, /* @__PURE__ */ React35.createElement(XyoAddressTextField, {
+  }, /* @__PURE__ */ React39.createElement(XyoAddressTextField, {
     label: "Delegate",
     name: "delegate",
     onAddressChanged: setDelegate,
     required: true,
     size: "small"
-  })), /* @__PURE__ */ React35.createElement(FormControl5, {
+  })), /* @__PURE__ */ React39.createElement(FormControl5, {
     fullWidth: true
-  }, /* @__PURE__ */ React35.createElement(BlockNumberTextField, {
+  }, /* @__PURE__ */ React39.createElement(BlockNumberTextField, {
     errorMessage: blockRangeError?.message,
     label: "Expires",
     name: "exp",
     onBlockNumberChanged: setExp,
     required: true,
     size: "small"
-  })), /* @__PURE__ */ React35.createElement(FormControl5, {
+  })), /* @__PURE__ */ React39.createElement(FormControl5, {
     fullWidth: true
-  }, /* @__PURE__ */ React35.createElement(BlockNumberTextField, {
+  }, /* @__PURE__ */ React39.createElement(BlockNumberTextField, {
     errorMessage: blockRangeError?.message,
     label: "Not Before",
     name: "nbf",
     onBlockNumberChanged: setNbf,
     required: true,
     size: "small"
-  })), /* @__PURE__ */ React35.createElement(Button4, {
+  })), /* @__PURE__ */ React39.createElement(Button4, {
     disabled: !intentPayload,
     variant: "contained",
     onClick: onBuildLocal
@@ -1818,12 +1844,12 @@ var ProducerIntentBuilderForm = /* @__PURE__ */ __name(({ onBuild }) => {
 }, "ProducerIntentBuilderForm");
 
 // src/components/payload/builder/transfer/Flexbox.tsx
-import React38 from "react";
+import React42 from "react";
 
 // src/components/payload/builder/transfer/Form.tsx
 import { Button as Button5, FormControl as FormControl7 } from "@mui/material";
 import { elevate, TransferSchema } from "@xyo-network/chain-model";
-import React37, { useMemo as useMemo19, useState as useState18 } from "react";
+import React41, { useMemo as useMemo20, useState as useState18 } from "react";
 
 // src/components/payload/builder/transfer/builder/SingleFlexbox.tsx
 import { RemoveCircle } from "@mui/icons-material";
@@ -1831,11 +1857,11 @@ import { FormControl as FormControl6, Icon as Icon3, IconButton as IconButton5 }
 import { toHex as toHex2 } from "@xylabs/hex";
 import { FlexRow as FlexRow7 } from "@xylabs/react-flexbox";
 import { BigIntInput } from "@xyo-network/react-shared";
-import React36, { useEffect as useEffect5, useMemo as useMemo18, useState as useState17 } from "react";
+import React40, { useEffect as useEffect4, useMemo as useMemo19, useState as useState17 } from "react";
 var SingleTransferBuilderFlexbox = /* @__PURE__ */ __name(({ onTransferUpdated, onRemoveTransfer, singleTransfer, ...props }) => {
   const [toAddress, setToAddress] = useState17();
   const [amount, setAmount] = useState17();
-  const transferAmount = useMemo18(() => {
+  const transferAmount = useMemo19(() => {
     if (toAddress && amount) {
       return {
         ...singleTransfer,
@@ -1847,41 +1873,41 @@ var SingleTransferBuilderFlexbox = /* @__PURE__ */ __name(({ onTransferUpdated,
     toAddress,
     amount
   ]);
-  useEffect5(() => {
+  useEffect4(() => {
     if (transferAmount) onTransferUpdated?.(transferAmount);
   }, [
     transferAmount
   ]);
-  return /* @__PURE__ */ React36.createElement(FlexRow7, {
+  return /* @__PURE__ */ React40.createElement(FlexRow7, {
     alignItems: "start",
     gap: 1,
     ...props
-  }, /* @__PURE__ */ React36.createElement(FormControl6, {
+  }, /* @__PURE__ */ React40.createElement(FormControl6, {
     fullWidth: true
-  }, /* @__PURE__ */ React36.createElement(XyoAddressTextField, {
+  }, /* @__PURE__ */ React40.createElement(XyoAddressTextField, {
     label: "To",
     name: "to",
     onAddressChanged: setToAddress,
     required: true,
     size: "small"
-  })), /* @__PURE__ */ React36.createElement(FormControl6, {
+  })), /* @__PURE__ */ React40.createElement(FormControl6, {
     fullWidth: true
-  }, /* @__PURE__ */ React36.createElement(BigIntInput.TextField, {
+  }, /* @__PURE__ */ React40.createElement(BigIntInput.TextField, {
     label: "Amount",
     name: "amount",
     onChangeFixedPoint: setAmount,
     required: true,
     size: "small"
-  })), /* @__PURE__ */ React36.createElement(IconButton5, {
+  })), /* @__PURE__ */ React40.createElement(IconButton5, {
     onClick: /* @__PURE__ */ __name(() => onRemoveTransfer?.(singleTransfer.transferId), "onClick")
-  }, /* @__PURE__ */ React36.createElement(Icon3, null, /* @__PURE__ */ React36.createElement(RemoveCircle, null))));
+  }, /* @__PURE__ */ React40.createElement(Icon3, null, /* @__PURE__ */ React40.createElement(RemoveCircle, null))));
 }, "SingleTransferBuilderFlexbox");
 
 // src/components/payload/builder/transfer/Form.tsx
 var TransferBuilderForm = /* @__PURE__ */ __name(({ onBuild }) => {
   const [fromAddress, setFromAddress] = useState18();
   const [transfers, setTransfers] = useState18([]);
-  const transferPayload = useMemo19(() => {
+  const transferPayload = useMemo20(() => {
     if (fromAddress && transfers.length > 0) {
       const transfersRecord = {};
       for (const transfer of transfers) {
@@ -1922,19 +1948,19 @@ var TransferBuilderForm = /* @__PURE__ */ __name(({ onBuild }) => {
       return transfer;
     }));
   }, "onTransferUpdated");
-  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(FormControl7, {
+  return /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement(FormControl7, {
     fullWidth: true
-  }, /* @__PURE__ */ React37.createElement(XyoAddressTextField, {
+  }, /* @__PURE__ */ React41.createElement(XyoAddressTextField, {
     label: "From",
     name: "from",
     onAddressChanged: setFromAddress,
     required: true,
     size: "small"
-  })), /* @__PURE__ */ React37.createElement(Button5, {
+  })), /* @__PURE__ */ React41.createElement(Button5, {
     onClick: onTransferAdded,
     size: "small",
     variant: "contained"
-  }, "Add Transfer"), transfers.map((transfer) => /* @__PURE__ */ React37.createElement(SingleTransferBuilderFlexbox, {
+  }, "Add Transfer"), transfers.map((transfer) => /* @__PURE__ */ React41.createElement(SingleTransferBuilderFlexbox, {
     key: transfer.transferId,
     onTransferUpdated,
     onRemoveTransfer: onTransferRemoved,
@@ -1942,7 +1968,7 @@ var TransferBuilderForm = /* @__PURE__ */ __name(({ onBuild }) => {
     sx: {
       width: "100%"
     }
-  })), /* @__PURE__ */ React37.createElement(Button5, {
+  })), /* @__PURE__ */ React41.createElement(Button5, {
     disabled: !transferPayload,
     variant: "contained",
     onClick: onBuildLocal
@@ -1950,7 +1976,7 @@ var TransferBuilderForm = /* @__PURE__ */ __name(({ onBuild }) => {
 }, "TransferBuilderForm");
 
 // src/components/payload/builder/transfer/Flexbox.tsx
-var TransferBuilderFlexbox = /* @__PURE__ */ __name(({ onBuild, ...props }) => /* @__PURE__ */ React38.createElement(PayloadBuilderFlexbox, {
+var TransferBuilderFlexbox = /* @__PURE__ */ __name(({ onBuild, ...props }) => /* @__PURE__ */ React42.createElement(PayloadBuilderFlexbox, {
   gap: 4,
   alignItems: "start",
   BuilderComponent: TransferBuilderForm,
@@ -1961,16 +1987,14 @@ var TransferBuilderFlexbox = /* @__PURE__ */ __name(({ onBuild, ...props }) => /
 // src/stories/buildRandomBlockchain.ts
 import { Account as Account2 } from "@xyo-network/account";
 import { buildRandomChain } from "@xyo-network/chain-ethereum";
-import { flattenHydratedBlocks } from "@xyo-network/chain-protocol";
 var buildRandomBlockChain = /* @__PURE__ */ __name(async (blockCount = 10) => {
   const initialBlockProducer = await Account2.random();
   const blocks = await buildRandomChain(initialBlockProducer, blockCount);
-  return flattenHydratedBlocks(blocks);
+  return blocks;
 }, "buildRandomBlockChain");
 var buildRandomBlockChainBlocksOnly = /* @__PURE__ */ __name(async (blockCount = 10) => {
   const chain = await buildRandomChain(await Account2.random(), blockCount);
-  const blocks = chain.map((block) => block[0]);
-  return blocks;
+  return chain;
 }, "buildRandomBlockChainBlocksOnly");
 
 // src/stories/ChainArchivistDecorator.tsx
@@ -1978,8 +2002,8 @@ import { CircularProgress } from "@mui/material";
 import { usePromise as usePromise7 } from "@xylabs/react-promise";
 import { MemoryArchivist } from "@xyo-network/archivist-memory";
 import { ArchivistConfigSchema } from "@xyo-network/archivist-model";
-import { isBlockBoundWitness as isBlockBoundWitness4 } from "@xyo-network/chain-model";
-import React39, { useEffect as useEffect6 } from "react";
+import { flattenHydratedBlocks } from "@xyo-network/chain-protocol";
+import React43, { useEffect as useEffect5 } from "react";
 var ChainArchivistDecorator = /* @__PURE__ */ __name((Story, context) => {
   const [randomBlockChain] = usePromise7(async () => await buildRandomBlockChain(), []);
   const [blockChainRenderProps, blockChainRenderPropsError] = usePromise7(async () => {
@@ -1990,7 +2014,8 @@ var ChainArchivistDecorator = /* @__PURE__ */ __name((Story, context) => {
           name: "ChainArchivist"
         }
       });
-      await chainArchivist.insert(randomBlockChain);
+      const flattened = flattenHydratedBlocks(randomBlockChain);
+      await chainArchivist.insert(flattened);
       const chainInformation = await getChainInformation();
       return {
         chainArchivist,
@@ -2000,7 +2025,7 @@ var ChainArchivistDecorator = /* @__PURE__ */ __name((Story, context) => {
   }, [
     randomBlockChain
   ]);
-  useEffect6(() => {
+  useEffect5(() => {
     if (blockChainRenderPropsError) {
       console.error(blockChainRenderPropsError);
     }
@@ -2014,11 +2039,11 @@ var ChainArchivistDecorator = /* @__PURE__ */ __name((Story, context) => {
       blockChainRenderProps: {
         ...context.args.blockChainRenderProps,
         ...blockChainRenderProps,
-        head: randomBlockChain?.toReversed().find(isBlockBoundWitness4)?._hash
+        head: randomBlockChain?.toReversed()[0][0]._hash
       }
     }
   };
-  return blockChainRenderProps?.chainArchivist ? /* @__PURE__ */ React39.createElement(Story, props) : /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(CircularProgress, null));
+  return blockChainRenderProps?.chainArchivist ? /* @__PURE__ */ React43.createElement(Story, props) : /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement(CircularProgress, null));
 }, "ChainArchivistDecorator");
 
 // src/stories/ChainArchivistDelayedInsertDecorator.tsx
@@ -2027,8 +2052,8 @@ import { delay } from "@xylabs/delay";
 import { usePromise as usePromise8 } from "@xylabs/react-promise";
 import { MemoryArchivist as MemoryArchivist2 } from "@xyo-network/archivist-memory";
 import { ArchivistConfigSchema as ArchivistConfigSchema2 } from "@xyo-network/archivist-model";
-import { isBlockBoundWitness as isBlockBoundWitness5 } from "@xyo-network/chain-model";
-import React40, { useEffect as useEffect7, useState as useState19 } from "react";
+import { flattenHydratedBlock } from "@xyo-network/chain-protocol";
+import React44, { useEffect as useEffect6, useState as useState19 } from "react";
 var chainArchivistRef;
 var ChainArchivistDelayedInsertDecorator = /* @__PURE__ */ __name((Story, context) => {
   const [firstBlock, setFirstBlock] = useState19();
@@ -2048,24 +2073,18 @@ var ChainArchivistDelayedInsertDecorator = /* @__PURE__ */ __name((Story, contex
   }, []);
   const [, delayedInsertError] = usePromise8(async () => {
     if (chainArchivist && randomBlockChain) {
-      const nextBlockPayloads = [];
-      for (const payload of randomBlockChain) {
-        if (isBlockBoundWitness5(payload)) {
-          nextBlockPayloads.push(payload);
-          await chainArchivist.insert(nextBlockPayloads);
-          setFirstBlock((prev) => prev || payload);
-          nextBlockPayloads.length = 0;
-          await delay(1e3);
-        } else {
-          nextBlockPayloads.push(payload);
-        }
+      for (const hydratedBlock of randomBlockChain) {
+        const flattened = flattenHydratedBlock(hydratedBlock);
+        await chainArchivist.insert(flattened);
+        setFirstBlock((prev) => prev || hydratedBlock[0]);
+        await delay(1e3);
       }
     }
   }, [
     chainArchivist,
     randomBlockChain
   ]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (delayedInsertError) {
       console.error(delayedInsertError);
     }
@@ -2088,20 +2107,20 @@ var ChainArchivistDelayedInsertDecorator = /* @__PURE__ */ __name((Story, contex
       blockChainRenderProps: {
         ...context.args.blockChainRenderProps,
         ...blockChainRenderProps,
-        head: randomBlockChain?.find(isBlockBoundWitness5)?._hash
+        head: randomBlockChain?.[0][0]?._hash
       }
     }
   };
-  return firstBlock ? /* @__PURE__ */ React40.createElement(Story, props) : /* @__PURE__ */ React40.createElement(CircularProgress2, null);
+  return firstBlock ? /* @__PURE__ */ React44.createElement(Story, props) : /* @__PURE__ */ React44.createElement(CircularProgress2, null);
 }, "ChainArchivistDelayedInsertDecorator");
 
 // src/stories/ChainInfoContextDecorator.tsx
 import { assertEx as assertEx5 } from "@xylabs/assert";
 import { usePromise as usePromise9 } from "@xylabs/react-promise";
-import { isBlockBoundWitness as isBlockBoundWitness6 } from "@xyo-network/chain-model";
+import { isBlockBoundWitness as isBlockBoundWitness3 } from "@xyo-network/chain-model";
 import { XyoChainBlockNumberIterator as XyoChainBlockNumberIterator3 } from "@xyo-network/chain-services";
 import { findFirstMatching } from "@xyo-network/chain-utils";
-import React41 from "react";
+import React45 from "react";
 var archivistConfig = {
   url: "http://localhost:8080",
   chainArchivistModuleId: "XYOPublic:XYOChain:Chain"
@@ -2117,7 +2136,7 @@ var ChainInfoContextDecorator = /* @__PURE__ */ __name((Story, context) => {
   const [chainIterator] = usePromise9(async () => {
     if (chainArchivist && chainInformation) {
       const firstMatch = assertEx5(await findFirstMatching(chainArchivist), () => `No head found in archivist: ${chainArchivist.id} `);
-      const head = assertEx5(isBlockBoundWitness6(firstMatch) ? firstMatch : void 0, () => `Expected a block bound witness: ${JSON.stringify(firstMatch)}`);
+      const head = assertEx5(isBlockBoundWitness3(firstMatch) ? firstMatch : void 0, () => `Expected a block bound witness: ${JSON.stringify(firstMatch)}`);
       return await XyoChainBlockNumberIterator3.create({
         chainArchivist,
         head
@@ -2127,11 +2146,11 @@ var ChainInfoContextDecorator = /* @__PURE__ */ __name((Story, context) => {
     chainArchivist,
     chainInformation
   ]);
-  return /* @__PURE__ */ React41.createElement(ChainInfoProvider, {
+  return /* @__PURE__ */ React45.createElement(ChainInfoProvider, {
     chainArchivist,
     chainInformation,
     chainIterator
-  }, /* @__PURE__ */ React41.createElement(Story, context));
+  }, /* @__PURE__ */ React45.createElement(Story, context));
 }, "ChainInfoContextDecorator");
 export {
   BlockChainPagination,
@@ -2147,6 +2166,7 @@ export {
   BlockTransactionCountTableCell,
   BlockVerificationTableCell,
   BlockchainTableEx,
+  BlockchainTableHead,
   ChainAnalyzerStatsDialog,
   ChainAnalyzerStatsDialogFromContext,
   ChainArchivistDecorator,