@xyo-network/react-chain-blockchain 1.2.3 → 1.2.4

package/dist/browser/index.mjs

@@ -443,10 +443,10 @@ var blockProducer = /* @__PURE__ */ __name((block) => {
 import React9 from "react";
 
 // src/components/block/helpers/tsxFromBlock.ts
-import { isBoundWitness } from "@xyo-network/boundwitness-model";
 import { PayloadBuilder as PayloadBuilder2 } from "@xyo-network/payload-builder";
+import { isTransactionBoundWitness } from "@xyo-network/xl1-model";
 var txsFromBlock = /* @__PURE__ */ __name(async (block) => {
-  const transactionPayloads = block[1].filter((payload) => isBoundWitness(payload));
+  const transactionPayloads = block[1].filter((payload) => isTransactionBoundWitness(payload));
   return await PayloadBuilder2.hashPairs(transactionPayloads);
 }, "txsFromBlock");
 
@@ -470,6 +470,22 @@ var buildBlockHeadingComponent = /* @__PURE__ */ __name(async (blockComponentPro
   return await buildBlockChainRenderComponent(BlockHeadingFlexbox, blockComponentProps);
 }, "buildBlockHeadingComponent");
 
+// src/components/block/helpers/payloadCountsFromBlock.ts
+import { BoundWitnessSchema } from "@xyo-network/boundwitness-model";
+import { isTransactionBoundWitness as isTransactionBoundWitness2 } from "@xyo-network/xl1-model";
+var payloadCountsFromBlock = /* @__PURE__ */ __name(([block, payloads]) => {
+  const privPayloads = block.payload_schemas.filter((schema) => schema !== BoundWitnessSchema);
+  const transactionPayloads = payloads.filter((payload) => isTransactionBoundWitness2(payload));
+  let privPayloadsCount = 0;
+  for (let tx of transactionPayloads) {
+    privPayloadsCount += tx.payload_hashes.length - tx.$opCodes.filter((opCode) => !opCode.startsWith("elevate|")).length;
+  }
+  return [
+    privPayloads.length,
+    privPayloadsCount
+  ];
+}, "payloadCountsFromBlock");
+
 // src/components/block/hooks/useDynamicBlockComponents.ts
 var useDynamicBlockComponents = /* @__PURE__ */ __name((BlockComponent, params, maxBlocks) => {
   const { chainArchivist } = params ?? {};
@@ -501,6 +517,26 @@ var useDynamicBlockComponents = /* @__PURE__ */ __name((BlockComponent, params,
   };
 }, "useDynamicBlockComponents");
 
+// src/components/block/hooks/usePayloadCountsFromBlock.ts
+import { useMemo as useMemo7 } from "react";
+var usePayloadCountsFromBlock = /* @__PURE__ */ __name((block) => {
+  return useMemo7(() => {
+    if (block) {
+      return [
+        ...payloadCountsFromBlock(block),
+        void 0
+      ];
+    }
+    return [
+      void 0,
+      void 0,
+      void 0
+    ];
+  }, [
+    block
+  ]);
+}, "usePayloadCountsFromBlock");
+
 // src/components/block/hooks/useStaticBlockComponents.ts
 import { usePromise } from "@xylabs/react-promise";
 var useStaticBlockComponents = /* @__PURE__ */ __name((BlockComponent, params, blocks) => {
@@ -602,11 +638,11 @@ var BlockMenuExpanded = /* @__PURE__ */ __name(({ block }) => {
 import { Chip as Chip2 } from "@mui/material";
 import { EthAddress } from "@xylabs/eth-address";
 import { BlockiesAvatar } from "@xyo-network/react-chain-blockies";
-import React12, { useMemo as useMemo7 } from "react";
+import React12, { useMemo as useMemo8 } from "react";
 var BlockProducerChip = /* @__PURE__ */ __name(({ block, ...props }) => {
   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, {
+  const avatar = useMemo8(() => blockProducer2 === "" ? void 0 : /* @__PURE__ */ React12.createElement(BlockiesAvatar, {
     blockiesOptions: {
       seed: blockProducer2
     }
@@ -715,7 +751,7 @@ var BlockNumberTableCell = /* @__PURE__ */ __name(({ block, linked, ...props })
 // src/components/block/table/cell/Hash.tsx
 import { Avatar, Chip as Chip3, TableCell as TableCell2, Tooltip as Tooltip2 } from "@mui/material";
 import { Identicon } from "@xylabs/react-identicon";
-import { usePayloadHash as usePayloadHash2 } from "@xyo-network/react-shared";
+import { usePayloadRootHash } from "@xyo-network/react-shared";
 import React16 from "react";
 
 // src/components/FeatureNotAvailable.tsx
@@ -727,7 +763,7 @@ var FeatureNotAvailable = /* @__PURE__ */ __name(({ featureName = "Feature", ...
 
 // src/components/block/table/cell/Hash.tsx
 var BlockHashTableCell = /* @__PURE__ */ __name(({ block, identiconProps, notAvailableDialog, linked, ...props }) => {
-  const hash = usePayloadHash2(block?.[0]);
+  const hash = usePayloadRootHash(block?.[0]);
   const [ref, handleClick] = useLinkedBlockItem("block-hash", hash);
   const [notAvailable, setNotAvailable] = React16.useState(false);
   const shortenedHash = hash ? `${hash.slice(0, 4)}...${hash.slice(-5, -1)}` : "";
@@ -759,19 +795,17 @@ var BlockHashTableCell = /* @__PURE__ */ __name(({ block, identiconProps, notAva
 }, "BlockHashTableCell");
 
 // src/components/block/table/cell/JsonView.tsx
-import { Code } from "@mui/icons-material";
+import { DataObject } from "@mui/icons-material";
 import { Button as Button3, Dialog as Dialog2, DialogActions as DialogActions2, DialogContent as DialogContent2, DialogTitle as DialogTitle2, IconButton as IconButton2, TableCell as TableCell3 } from "@mui/material";
 import { ellipsize } from "@xylabs/eth-address";
 import { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
-import { useIsDark } from "@xylabs/react-theme";
 import { JsonViewerEx } from "@xyo-network/react-payload-raw-info";
-import { usePayloadHash as usePayloadHash3 } from "@xyo-network/react-shared";
+import { usePayloadRootHash as usePayloadRootHash2 } from "@xyo-network/react-shared";
 import React17, { useState as useState9 } from "react";
 var BlockJsonViewTableCell = /* @__PURE__ */ __name(({ block, ...props }) => {
   const [open, setOpen] = useState9(false);
   const onClose = /* @__PURE__ */ __name(() => setOpen(false), "onClose");
-  const isDark = useIsDark();
-  const hash = usePayloadHash3(block?.[0]);
+  const hash = usePayloadRootHash2(block?.[0]);
   const title = hash ? `JSON for ${ellipsize(hash, 5)}` : "JSON";
   return /* @__PURE__ */ React17.createElement(TableCell3, props, /* @__PURE__ */ React17.createElement(FlexRow3, {
     sx: {
@@ -779,7 +813,7 @@ var BlockJsonViewTableCell = /* @__PURE__ */ __name(({ block, ...props }) => {
     }
   }, /* @__PURE__ */ React17.createElement(IconButton2, {
     onClick: /* @__PURE__ */ __name(() => setOpen(true), "onClick")
-  }, /* @__PURE__ */ React17.createElement(Code, null))), /* @__PURE__ */ React17.createElement(Dialog2, {
+  }, /* @__PURE__ */ React17.createElement(DataObject, null))), /* @__PURE__ */ React17.createElement(Dialog2, {
     open,
     onClose
   }, /* @__PURE__ */ React17.createElement(DialogTitle2, null, title), /* @__PURE__ */ React17.createElement(DialogContent2, null, /* @__PURE__ */ React17.createElement(JsonViewerEx, {
@@ -796,31 +830,54 @@ var BlockJsonViewTableCell = /* @__PURE__ */ __name(({ block, ...props }) => {
   }, "Close"))));
 }, "BlockJsonViewTableCell");
 
+// src/components/block/table/cell/PayloadCounts.tsx
+import { Error as Error2 } from "@mui/icons-material";
+import { Link as Link2, TableCell as TableCell4, Tooltip as Tooltip3 } from "@mui/material";
+import React18 from "react";
+var BlockPayloadCountsTableCell = /* @__PURE__ */ __name(({ block, linked, ...props }) => {
+  const [pubPayloads, privPayloads, error] = usePayloadCountsFromBlock(block);
+  const data = `${pubPayloads}/${privPayloads}`;
+  const [ref, handleClick] = useLinkedBlockItem("payload-counts", data);
+  return /* @__PURE__ */ React18.createElement(TableCell4, {
+    ref,
+    ...props
+  }, /* @__PURE__ */ React18.createElement("span", null, error ? /* @__PURE__ */ React18.createElement(Tooltip3, {
+    title: error.message
+  }, /* @__PURE__ */ React18.createElement(Error2, {
+    color: "error"
+  })) : null, linked ? /* @__PURE__ */ React18.createElement(Link2, {
+    onClick: handleClick,
+    sx: {
+      cursor: "pointer"
+    }
+  }, data ?? "--/--") : data ?? "--/--"));
+}, "BlockPayloadCountsTableCell");
+
 // src/components/block/table/cell/Producer.tsx
-import { TableCell as TableCell4, Tooltip as Tooltip3 } from "@mui/material";
+import { TableCell as TableCell5, Tooltip as Tooltip4 } from "@mui/material";
 import { FlexRow as FlexRow4 } from "@xylabs/react-flexbox";
-import React18 from "react";
+import React19 from "react";
 var BlockProducerTableCell = /* @__PURE__ */ __name(({ block, linked, notAvailableDialog, producerChipProps, ...props }) => {
   const [ref, handleClick] = useLinkedBlockItem("block-producer", JSON.stringify(block));
   const producer = useBlockProducer(block);
-  const [notAvailable, setNotAvailable] = React18.useState(false);
-  return /* @__PURE__ */ React18.createElement(TableCell4, {
+  const [notAvailable, setNotAvailable] = React19.useState(false);
+  return /* @__PURE__ */ React19.createElement(TableCell5, {
     ref,
     ...props
-  }, /* @__PURE__ */ React18.createElement(Tooltip3, {
+  }, /* @__PURE__ */ React19.createElement(Tooltip4, {
     title: `Block Producer: ${producer}`
-  }, /* @__PURE__ */ React18.createElement(FlexRow4, {
+  }, /* @__PURE__ */ React19.createElement(FlexRow4, {
     sx: {
       width: "100%"
     }
-  }, /* @__PURE__ */ React18.createElement(BlockProducerChip, {
+  }, /* @__PURE__ */ React19.createElement(BlockProducerChip, {
     sx: {
       cursor: "pointer"
     },
     onClick: linked ? handleClick : () => setNotAvailable(true),
     block,
     ...producerChipProps
-  }))), notAvailableDialog && notAvailable ? /* @__PURE__ */ React18.createElement(FeatureNotAvailable, {
+  }))), notAvailableDialog && notAvailable ? /* @__PURE__ */ React19.createElement(FeatureNotAvailable, {
     featureName: "Producer Details",
     open: notAvailable,
     onClick: /* @__PURE__ */ __name(() => setNotAvailable(false), "onClick")
@@ -828,20 +885,20 @@ var BlockProducerTableCell = /* @__PURE__ */ __name(({ block, linked, notAvailab
 }, "BlockProducerTableCell");
 
 // src/components/block/table/cell/TransactionCount.tsx
-import { Error as Error2 } from "@mui/icons-material";
-import { Link as Link2, TableCell as TableCell5, Tooltip as Tooltip4 } from "@mui/material";
-import React19 from "react";
+import { Error as Error3 } from "@mui/icons-material";
+import { Link as Link3, TableCell as TableCell6, Tooltip as Tooltip5 } from "@mui/material";
+import React20 from "react";
 var BlockTransactionCountTableCell = /* @__PURE__ */ __name(({ block, linked, ...props }) => {
   const [txs, error] = useTxsFromBlock(block);
   const [ref, handleClick] = useLinkedBlockItem("transaction-count", JSON.stringify(txs ?? null));
-  return /* @__PURE__ */ React19.createElement(TableCell5, {
+  return /* @__PURE__ */ React20.createElement(TableCell6, {
     ref,
     ...props
-  }, /* @__PURE__ */ React19.createElement("span", null, error ? /* @__PURE__ */ React19.createElement(Tooltip4, {
+  }, /* @__PURE__ */ React20.createElement("span", null, error ? /* @__PURE__ */ React20.createElement(Tooltip5, {
     title: error.message
-  }, /* @__PURE__ */ React19.createElement(Error2, {
+  }, /* @__PURE__ */ React20.createElement(Error3, {
     color: "error"
-  })) : null, linked ? /* @__PURE__ */ React19.createElement(Link2, {
+  })) : null, linked ? /* @__PURE__ */ React20.createElement(Link3, {
     onClick: handleClick,
     sx: {
       cursor: "pointer"
@@ -850,20 +907,20 @@ var BlockTransactionCountTableCell = /* @__PURE__ */ __name(({ block, linked, ..
 }, "BlockTransactionCountTableCell");
 
 // src/components/block/table/cell/Verification.tsx
-import { TableCell as TableCell6 } from "@mui/material";
+import { TableCell as TableCell7 } from "@mui/material";
 import { FlexRow as FlexRow5 } from "@xylabs/react-flexbox";
 import { BWVerification as BWVerification2 } from "@xyo-network/react-chain-boundwitness";
-import React20 from "react";
+import React21 from "react";
 var BlockVerificationTableCell = /* @__PURE__ */ __name(({ block, linked, ...props }) => {
   const [ref, handleClick] = useLinkedBlockItem("block-verification", block?.[0].block.toString());
-  return /* @__PURE__ */ React20.createElement(TableCell6, {
+  return /* @__PURE__ */ React21.createElement(TableCell7, {
     ref,
     ...props
-  }, /* @__PURE__ */ React20.createElement(FlexRow5, {
+  }, /* @__PURE__ */ React21.createElement(FlexRow5, {
     sx: {
       width: "100%"
     }
-  }, /* @__PURE__ */ React20.createElement(BWVerification2, {
+  }, /* @__PURE__ */ React21.createElement(BWVerification2, {
     onClick: linked ? handleClick : void 0,
     iconColors: true,
     boundwitness: block?.[0]
@@ -873,82 +930,121 @@ var BlockVerificationTableCell = /* @__PURE__ */ __name(({ block, linked, ...pro
 // src/components/block/table/Ex.tsx
 import { TableBody } from "@mui/material";
 import { TableEx } from "@xyo-network/react-table";
-import React22 from "react";
+import React23 from "react";
 
 // src/components/block/table/head/TableHead.tsx
-import { TableCell as TableCell7, TableHead, TableRow } from "@mui/material";
-import React21 from "react";
+import { InfoOutline } from "@mui/icons-material";
+import { TableCell as TableCell8, TableHead, TableRow, Tooltip as Tooltip6, Typography as Typography3 } from "@mui/material";
+import { FlexRow as FlexRow6 } from "@xylabs/react-flexbox";
+import React22 from "react";
+var ToolTipTableCell = /* @__PURE__ */ __name(({ children, align, title, ...props }) => {
+  return /* @__PURE__ */ React22.createElement(TableCell8, {
+    title,
+    ...props
+  }, /* @__PURE__ */ React22.createElement(Tooltip6, {
+    title
+  }, /* @__PURE__ */ React22.createElement(FlexRow6, {
+    justifyContent: align
+  }, /* @__PURE__ */ React22.createElement(Typography3, {
+    variant: "body2"
+  }, children), "\xA0", /* @__PURE__ */ React22.createElement(InfoOutline, {
+    fontSize: "small"
+  }))));
+}, "ToolTipTableCell");
 var BlockchainTableHead = /* @__PURE__ */ __name(() => {
-  return /* @__PURE__ */ React21.createElement(TableHead, null, /* @__PURE__ */ React21.createElement(TableRow, null, /* @__PURE__ */ React21.createElement(TableCell7, null, "Block Hash"), /* @__PURE__ */ React21.createElement(TableCell7, null, "Block Number"), /* @__PURE__ */ React21.createElement(TableCell7, null, "Transaction Count"), /* @__PURE__ */ React21.createElement(TableCell7, {
-    align: "center"
-  }, "Block Producer"), /* @__PURE__ */ React21.createElement(TableCell7, {
-    align: "center"
-  }, "Valid"), /* @__PURE__ */ React21.createElement(TableCell7, {
-    align: "center"
+  return /* @__PURE__ */ React22.createElement(TableHead, null, /* @__PURE__ */ React22.createElement(TableRow, null, /* @__PURE__ */ React22.createElement(ToolTipTableCell, {
+    title: "The hash of the block"
+  }, "Block Hash"), /* @__PURE__ */ React22.createElement(ToolTipTableCell, {
+    align: "center",
+    title: "The block number that is included in the block"
+  }, "Block Number"), /* @__PURE__ */ React22.createElement(ToolTipTableCell, {
+    align: "center",
+    title: "Count of transactions that are included in the block"
+  }, "Transactions"), /* @__PURE__ */ React22.createElement(ToolTipTableCell, {
+    align: "center",
+    title: "Count of public and private payload counts for the block"
+  }, "Payloads"), /* @__PURE__ */ React22.createElement(ToolTipTableCell, {
+    align: "center",
+    title: "The address of the block producer that produced the block"
+  }, "Block Producer"), /* @__PURE__ */ React22.createElement(ToolTipTableCell, {
+    align: "center",
+    title: "The result of the local validation check for the block"
+  }, "Valid"), /* @__PURE__ */ React22.createElement(ToolTipTableCell, {
+    align: "center",
+    title: "Link to display the raw JSON of the block"
   }, "JSON")));
 }, "BlockchainTableHead");
 
 // src/components/block/table/Ex.tsx
 var BlockchainTableEx = /* @__PURE__ */ __name(({ ref, children, ...props }) => {
-  return /* @__PURE__ */ React22.createElement(TableEx, {
+  return /* @__PURE__ */ React23.createElement(TableEx, {
     ref,
     ...props
-  }, /* @__PURE__ */ React22.createElement(BlockchainTableHead, null), /* @__PURE__ */ React22.createElement(TableBody, null, children));
+  }, /* @__PURE__ */ React23.createElement(BlockchainTableHead, null), /* @__PURE__ */ React23.createElement(TableBody, null, children));
 }, "BlockchainTableEx");
 BlockchainTableEx.displayName = "BlockchainTableEx";
 
 // src/components/block/table/row/TableRow.tsx
 import { TableRow as TableRow2 } from "@mui/material";
-import React23, { useMemo as useMemo8 } from "react";
+import React24, { useMemo as useMemo9 } from "react";
 var BlockChainTableRow = /* @__PURE__ */ __name(({ block, defaultExpanded, linked, sx, ...props }) => {
-  const linkedTableCellProps = useMemo8(() => ({
+  const linkedTableCellProps = useMemo9(() => ({
     block,
     linked
   }), [
     block,
     linked
   ]);
-  const defaultTableCellProps = useMemo8(() => ({
+  const defaultTableCellProps = useMemo9(() => ({
     block
   }), [
     block
   ]);
-  return /* @__PURE__ */ React23.createElement(TableRow2, {
+  return /* @__PURE__ */ React24.createElement(TableRow2, {
     sx: {
       overflowY: "scroll",
       ...sx
     },
     ...props
-  }, /* @__PURE__ */ React23.createElement(BlockHashTableCell, linkedTableCellProps), /* @__PURE__ */ React23.createElement(BlockNumberTableCell, linkedTableCellProps), /* @__PURE__ */ React23.createElement(BlockTransactionCountTableCell, linkedTableCellProps), /* @__PURE__ */ React23.createElement(BlockProducerTableCell, linkedTableCellProps), /* @__PURE__ */ React23.createElement(BlockVerificationTableCell, defaultTableCellProps), /* @__PURE__ */ React23.createElement(BlockJsonViewTableCell, defaultTableCellProps));
+  }, /* @__PURE__ */ React24.createElement(BlockHashTableCell, linkedTableCellProps), /* @__PURE__ */ React24.createElement(BlockNumberTableCell, {
+    align: "center",
+    ...linkedTableCellProps
+  }), /* @__PURE__ */ React24.createElement(BlockTransactionCountTableCell, {
+    align: "center",
+    ...linkedTableCellProps
+  }), /* @__PURE__ */ React24.createElement(BlockPayloadCountsTableCell, {
+    align: "center",
+    ...linkedTableCellProps
+  }), /* @__PURE__ */ React24.createElement(BlockProducerTableCell, linkedTableCellProps), /* @__PURE__ */ React24.createElement(BlockVerificationTableCell, defaultTableCellProps), /* @__PURE__ */ React24.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 React28, { memo } from "react";
+import { Alert as Alert3, AlertTitle as AlertTitle2, Grow, Icon as Icon2, IconButton as IconButton4, Tooltip as Tooltip7 } from "@mui/material";
+import { FlexRow as FlexRow7 } from "@xylabs/react-flexbox";
+import React29, { memo } from "react";
 
 // src/components/chain/stats/Dialog.tsx
 import { QueryStats } from "@mui/icons-material";
 import { Dialog as Dialog3, DialogContent as DialogContent3, DialogTitle as DialogTitle3, IconButton as IconButton3 } from "@mui/material";
-import React26, { useState as useState10 } from "react";
+import React27, { useState as useState10 } from "react";
 
 // src/components/chain/stats/producer/ProducerFlexbox.tsx
-import { ListItem, styled, Typography as Typography3 } from "@mui/material";
+import { ListItem, styled, Typography as Typography4 } 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 React25, { useMemo as useMemo9 } from "react";
+import React26, { useMemo as useMemo10 } 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 { Table, TableBody as TableBody2, TableCell as TableCell9, TableHead as TableHead2, TableRow as TableRow3, useTheme } from "@mui/material";
 import { BlockiesAvatar as BlockiesAvatar2 } from "@xyo-network/react-chain-blockies";
-import React24 from "react";
+import React25 from "react";
 var ChainProducerStatsTable = /* @__PURE__ */ __name(({ producers, ...props }) => {
   const theme = useTheme();
-  return /* @__PURE__ */ React24.createElement(Table, props, /* @__PURE__ */ React24.createElement(TableHead2, null, /* @__PURE__ */ React24.createElement(TableRow3, null, /* @__PURE__ */ React24.createElement(TableCell8, null, "Address"), /* @__PURE__ */ React24.createElement(TableCell8, null, "Blocks Produced"), /* @__PURE__ */ React24.createElement(TableCell8, null, "Rewards Earned Produced"))), /* @__PURE__ */ React24.createElement(TableBody2, null, producers?.map((producer) => /* @__PURE__ */ React24.createElement(TableRow3, {
+  return /* @__PURE__ */ React25.createElement(Table, props, /* @__PURE__ */ React25.createElement(TableHead2, null, /* @__PURE__ */ React25.createElement(TableRow3, null, /* @__PURE__ */ React25.createElement(TableCell9, null, "Address"), /* @__PURE__ */ React25.createElement(TableCell9, null, "Blocks Produced"), /* @__PURE__ */ React25.createElement(TableCell9, null, "Rewards Earned Produced"))), /* @__PURE__ */ React25.createElement(TableBody2, null, producers?.map((producer) => /* @__PURE__ */ React25.createElement(TableRow3, {
     key: producer.address
-  }, /* @__PURE__ */ React24.createElement(TableCell8, null, /* @__PURE__ */ React24.createElement(BlockiesAvatar2, {
+  }, /* @__PURE__ */ React25.createElement(TableCell9, null, /* @__PURE__ */ React25.createElement(BlockiesAvatar2, {
     blockiesOptions: {
       seed: producer.address
     },
@@ -956,12 +1052,12 @@ var ChainProducerStatsTable = /* @__PURE__ */ __name(({ producers, ...props }) =
       height: theme.spacing(2.75),
       width: theme.spacing(2.75)
     }
-  })), /* @__PURE__ */ React24.createElement(TableCell8, null, producer.blocksProduced.toString()), /* @__PURE__ */ React24.createElement(TableCell8, null, producer.rewardsEarned.toString())))));
+  })), /* @__PURE__ */ React25.createElement(TableCell9, null, producer.blocksProduced.toString()), /* @__PURE__ */ React25.createElement(TableCell9, null, producer.rewardsEarned.toString())))));
 }, "ChainProducerStatsTable");
 
 // src/components/chain/stats/producer/ProducerFlexbox.tsx
 var BlockProducerStatsFlexbox = /* @__PURE__ */ __name(({ payload, ...props }) => {
-  const [producer, producerError] = useMemo9(() => {
+  const [producer, producerError] = useMemo10(() => {
     if (payload) {
       return isChainSummaryProducers(payload) ? [
         payload
@@ -975,19 +1071,19 @@ var BlockProducerStatsFlexbox = /* @__PURE__ */ __name(({ payload, ...props }) =
   }, [
     payload
   ]);
-  const producersArray = useMemo9(() => Object.values(producer?.producers ?? {}), [
+  const producersArray = useMemo10(() => Object.values(producer?.producers ?? {}), [
     producer
   ]);
-  return /* @__PURE__ */ React25.createElement(FlexCol3, {
+  return /* @__PURE__ */ React26.createElement(FlexCol3, {
     alignItems: "start",
     gap: 1,
     ...props
-  }, /* @__PURE__ */ React25.createElement(ErrorRender3, {
+  }, /* @__PURE__ */ React26.createElement(ErrorRender3, {
     error: producerError,
     scope: "BlockProducerStatsFlexbox"
-  }), /* @__PURE__ */ React25.createElement(Typography3, {
+  }), /* @__PURE__ */ React26.createElement(Typography4, {
     fontSize: "1rem"
-  }, "Block Producers"), /* @__PURE__ */ React25.createElement(ChainProducerStatsTable, {
+  }, "Block Producers"), /* @__PURE__ */ React26.createElement(ChainProducerStatsTable, {
     producers: producersArray
   }));
 }, "BlockProducerStatsFlexbox");
@@ -999,18 +1095,18 @@ var StyledListItem = styled(ListItem)(() => ({
 // src/components/chain/stats/Dialog.tsx
 var ChainAnalyzerStatsDialog = /* @__PURE__ */ __name((props) => {
   const { analyzers, statsUpdated } = useChainAnalyzersContext();
-  return /* @__PURE__ */ React26.createElement(Dialog3, props, /* @__PURE__ */ React26.createElement(DialogTitle3, null, "Chain Analysis"), /* @__PURE__ */ React26.createElement(DialogContent3, null, !!statsUpdated && Object.entries(analyzers).map(([id2, analyzer]) => /* @__PURE__ */ React26.createElement("div", {
+  return /* @__PURE__ */ React27.createElement(Dialog3, props, /* @__PURE__ */ React27.createElement(DialogTitle3, null, "Chain Analysis"), /* @__PURE__ */ React27.createElement(DialogContent3, null, !!statsUpdated && Object.entries(analyzers).map(([id2, analyzer]) => /* @__PURE__ */ React27.createElement("div", {
     key: id2
-  }, id2 === "producers" && /* @__PURE__ */ React26.createElement(BlockProducerStatsFlexbox, {
+  }, id2 === "producers" && /* @__PURE__ */ React27.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__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(IconButton3, {
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(IconButton3, {
     onClick: /* @__PURE__ */ __name(() => setOpen(true), "onClick")
-  }, /* @__PURE__ */ React26.createElement(QueryStats, null)), /* @__PURE__ */ React26.createElement(ChainAnalyzerStatsDialog, {
+  }, /* @__PURE__ */ React27.createElement(QueryStats, null)), /* @__PURE__ */ React27.createElement(ChainAnalyzerStatsDialog, {
     onClose: handleClose,
     open,
     ...props
@@ -1019,19 +1115,19 @@ var ChainAnalyzerStatsDialogFromContext = /* @__PURE__ */ __name((props) => {
 
 // src/components/chain/controls/PulseSvgIcon.tsx
 import { alpha, createSvgIcon, keyframes, styled as styled2 } from "@mui/material";
-import React27 from "react";
-var PulseSvgIcon = createSvgIcon(/* @__PURE__ */ React27.createElement("svg", {
+import React28 from "react";
+var PulseSvgIcon = createSvgIcon(/* @__PURE__ */ React28.createElement("svg", {
   viewBox: "0 0 80 80",
   version: "1.1",
   xmlns: "http://www.w3.org/2000/svg"
-}, /* @__PURE__ */ React27.createElement("g", {
+}, /* @__PURE__ */ React28.createElement("g", {
   transform: "translate(34,34)"
-}, /* @__PURE__ */ React27.createElement("circle", {
+}, /* @__PURE__ */ React28.createElement("circle", {
   className: "core",
   cx: "0",
   cy: "0",
   r: "6"
-}), /* @__PURE__ */ React27.createElement("circle", {
+}), /* @__PURE__ */ React28.createElement("circle", {
   className: "radar",
   cx: "0",
   cy: "0",
@@ -1095,24 +1191,24 @@ var StyledPulseSvgIcon = styled2(PulseSvgIcon)(({ theme }) => {
 var PollingControlsFlexbox = /* @__PURE__ */ __name(({ blocksBehind, pollingState, setPollingState }) => {
   const paused = pollingState === "paused";
   const running = pollingState === "running";
-  return /* @__PURE__ */ React28.createElement(FlexRow6, {
+  return /* @__PURE__ */ React29.createElement(FlexRow7, {
     justifyContent: "space-between",
     width: "100%"
-  }, /* @__PURE__ */ React28.createElement(FlexRow6, {
+  }, /* @__PURE__ */ React29.createElement(FlexRow7, {
     gap: 2
-  }, running && /* @__PURE__ */ React28.createElement(IconButton4, {
+  }, running && /* @__PURE__ */ React29.createElement(IconButton4, {
     onClick: /* @__PURE__ */ __name(() => setPollingState?.("paused"), "onClick"),
     title: "Pause Block Stream"
-  }, /* @__PURE__ */ React28.createElement(Pause, null)), paused && /* @__PURE__ */ React28.createElement(IconButton4, {
+  }, /* @__PURE__ */ React29.createElement(Pause, null)), paused && /* @__PURE__ */ React29.createElement(IconButton4, {
     onClick: /* @__PURE__ */ __name(() => setPollingState?.("running"), "onClick"),
     title: "Re-Sync Block Stream"
-  }, /* @__PURE__ */ React28.createElement(Autorenew, null)), /* @__PURE__ */ React28.createElement(ChainAnalyzerStatsDialogFromContext, null)), /* @__PURE__ */ React28.createElement(FlexRow6, {
+  }, /* @__PURE__ */ React29.createElement(Autorenew, null)), /* @__PURE__ */ React29.createElement(ChainAnalyzerStatsDialogFromContext, null)), /* @__PURE__ */ React29.createElement(FlexRow7, {
     gap: 2
-  }, /* @__PURE__ */ React28.createElement(Grow, {
+  }, /* @__PURE__ */ React29.createElement(Grow, {
     in: (blocksBehind ?? 0) > 0
-  }, /* @__PURE__ */ React28.createElement(Tooltip5, {
+  }, /* @__PURE__ */ React29.createElement(Tooltip7, {
     title: "Click to Re-Sync"
-  }, /* @__PURE__ */ React28.createElement(Alert3, {
+  }, /* @__PURE__ */ React29.createElement(Alert3, {
     sx: {
       py: 0,
       px: 1,
@@ -1120,11 +1216,11 @@ var PollingControlsFlexbox = /* @__PURE__ */ __name(({ blocksBehind, pollingStat
     },
     severity: "warning",
     onClick: /* @__PURE__ */ __name(() => setPollingState?.("running"), "onClick")
-  }, /* @__PURE__ */ React28.createElement(AlertTitle2, {
+  }, /* @__PURE__ */ React29.createElement(AlertTitle2, {
     sx: {
       mb: 0
     }
-  }, "Behind:", " ", blocksBehind)))), /* @__PURE__ */ React28.createElement(Icon2, null, /* @__PURE__ */ React28.createElement(StyledPulseSvgIcon, {
+  }, "Behind:", " ", blocksBehind)))), /* @__PURE__ */ React29.createElement(Icon2, null, /* @__PURE__ */ React29.createElement(StyledPulseSvgIcon, {
     className: running ? "" : "paused"
   }))));
 }, "PollingControlsFlexbox");
@@ -1132,9 +1228,9 @@ var MemoizedPollingControlsFlexbox = /* @__PURE__ */ memo(PollingControlsFlexbox
 
 // src/components/chain/dialog/Dialog.tsx
 import { Button as Button4, Dialog as Dialog4, DialogActions as DialogActions3, DialogContent as DialogContent4 } from "@mui/material";
-import React29 from "react";
+import React30 from "react";
 var TransactionsDialog = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ React29.createElement(Dialog4, props, /* @__PURE__ */ React29.createElement(DialogContent4, null, "Transactions Dialog"), /* @__PURE__ */ React29.createElement(DialogActions3, null, /* @__PURE__ */ React29.createElement(Button4, {
+  return /* @__PURE__ */ React30.createElement(Dialog4, props, /* @__PURE__ */ React30.createElement(DialogContent4, null, "Transactions Dialog"), /* @__PURE__ */ React30.createElement(DialogActions3, null, /* @__PURE__ */ React30.createElement(Button4, {
     variant: "outlined",
     onClick: /* @__PURE__ */ __name((e) => props?.onClose?.(e, "escapeKeyDown"), "onClick")
   }, "Close")));
@@ -1174,9 +1270,9 @@ var useOnBlock = /* @__PURE__ */ __name((initialHeadNumber, onAddBlock, liveHead
 
 // src/components/chain/pagination/BlockChainPagination.tsx
 import { TablePaginationActions } from "@xyo-network/react-payload-table";
-import React30 from "react";
+import React31 from "react";
 var BlockChainPagination = /* @__PURE__ */ __name(({ count = 0, onPageChange, page, rowsPerPage = 10 }) => {
-  return /* @__PURE__ */ React30.createElement(TablePaginationActions, {
+  return /* @__PURE__ */ React31.createElement(TablePaginationActions, {
     count,
     onPageChange,
     page,
@@ -1185,10 +1281,10 @@ var BlockChainPagination = /* @__PURE__ */ __name(({ count = 0, onPageChange, pa
 }, "BlockChainPagination");
 
 // src/components/chain/pagination/hooks/usePagination.tsx
-import { useMemo as useMemo10, useState as useState11 } from "react";
+import { useMemo as useMemo11, useState as useState11 } from "react";
 var useChainPagination = /* @__PURE__ */ __name((pageSize, blockComponents) => {
   const [page, setPage] = useState11(0);
-  const paginatedBlockComponents = useMemo10(() => {
+  const paginatedBlockComponents = useMemo11(() => {
     const startIndex = page * pageSize;
     const endIndex = startIndex + pageSize;
     return blockComponents?.slice(startIndex, endIndex);
@@ -1210,11 +1306,11 @@ var useChainPagination = /* @__PURE__ */ __name((pageSize, blockComponents) => {
 // 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 React32 from "react";
+import React33 from "react";
 
 // src/components/chain/list/Animated.tsx
 import { AnimatedList } from "@xylabs/react-animation";
-import React31 from "react";
+import React32 from "react";
 
 // src/components/chain/styled/BlockListWrapperFlexbox.tsx
 import { styled as styled3 } from "@mui/material";
@@ -1235,17 +1331,17 @@ var BlockListWrapperFlexBox = styled3(FlexCol4, {
 
 // src/components/chain/list/Animated.tsx
 var BlockListAnimated = /* @__PURE__ */ __name(({ blockChainRenderComponents }) => {
-  return /* @__PURE__ */ React31.createElement(BlockListWrapperFlexBox, {
+  return /* @__PURE__ */ React32.createElement(BlockListWrapperFlexBox, {
     alignItems: "stretch",
     width: "100%"
-  }, /* @__PURE__ */ React31.createElement(AnimatedList, {
+  }, /* @__PURE__ */ React32.createElement(AnimatedList, {
     fullWidth: true,
     items: blockChainRenderComponents
   }));
 }, "BlockListAnimated");
 
 // src/components/chain/render/dynamic/hooks/useDynamicBlockRenderComponents.ts
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo13 } from "react";
 
 // src/hooks/chain-iterator/ChainIteratorStore.ts
 import { assertEx } from "@xylabs/assert";
@@ -1350,7 +1446,7 @@ var useChainIteratorParams = /* @__PURE__ */ __name(({ chainArchivist, chainInfo
 
 // src/hooks/chain-iterator/useChainIteratorStore.ts
 import { usePromise as usePromise4 } from "@xylabs/react-promise";
-import { useEffect as useEffect3, useMemo as useMemo11, useRef as useRef3, useSyncExternalStore } from "react";
+import { useEffect as useEffect3, useMemo as useMemo12, useRef as useRef3, useSyncExternalStore } from "react";
 
 // src/hooks/chain-iterator/useChainIteratorUpdatingHead.ts
 import { toHex as toHex2 } from "@xylabs/hex";
@@ -1417,7 +1513,7 @@ var useChainIteratorStore = /* @__PURE__ */ __name((chainIteratorParams) => {
     chainIteratorStore
   ]);
   const cachedSnapshot = useRef3({});
-  const { getSnapShot, subscribe } = useMemo11(() => {
+  const { getSnapShot, subscribe } = useMemo12(() => {
     if (chainIteratorStore) {
       return {
         getSnapShot: /* @__PURE__ */ __name(() => {
@@ -1499,7 +1595,7 @@ var useIterateChain = /* @__PURE__ */ __name((chainIteratorParams, maxDepth) =>
 // src/components/chain/render/dynamic/hooks/useDynamicBlockRenderComponents.ts
 var useDynamicBlockRenderComponents = /* @__PURE__ */ __name((BlockComponent, blockChainRenderProps) => {
   const { maxBlocks } = blockChainRenderProps ?? {};
-  const chainIteratorParams = useMemo12(() => blockChainRenderProps ?? {}, [
+  const chainIteratorParams = useMemo13(() => blockChainRenderProps ?? {}, [
     blockChainRenderProps
   ]);
   const [params, paramsError] = useChainIteratorParams(chainIteratorParams);
@@ -1520,7 +1616,7 @@ var useDynamicBlockRenderComponents = /* @__PURE__ */ __name((BlockComponent, bl
 
 // src/components/chain/render/dynamic/hooks/useRemoteBlockChainRenderProps.ts
 import { usePromise as usePromise6 } from "@xylabs/react-promise";
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo14 } from "react";
 
 // src/lib/getChainArchivist.ts
 import { assertEx as assertEx4 } from "@xylabs/assert";
@@ -1564,7 +1660,7 @@ var useRemoteBlockChainRenderProps = /* @__PURE__ */ __name((chainArchivistModul
     url,
     chainArchivistModuleId
   ]);
-  const blockChainRenderProps = useMemo13(() => ({
+  const blockChainRenderProps = useMemo14(() => ({
     ...blockChainRenderPropsArg,
     chainArchivist
   }), [
@@ -1580,28 +1676,28 @@ var useRemoteBlockChainRenderProps = /* @__PURE__ */ __name((chainArchivistModul
 // 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__ */ React32.createElement(FlexCol5, {
+  return /* @__PURE__ */ React33.createElement(FlexCol5, {
     alignItems: "start",
     ...props
-  }, errors?.map((error) => /* @__PURE__ */ React32.createElement(ErrorRender4, {
+  }, errors?.map((error) => /* @__PURE__ */ React33.createElement(ErrorRender4, {
     error,
     key: error?.name,
     scope: "DynamicBlockchainRenderFlexboxInner"
-  })), /* @__PURE__ */ React32.createElement(MemoizedPollingControlsFlexbox, {
+  })), /* @__PURE__ */ React33.createElement(MemoizedPollingControlsFlexbox, {
     blocksBehind: blocksWhilePaused?.length,
     pollingState,
     setPollingState: updatePollingState
-  }), /* @__PURE__ */ React32.createElement(BlockListAnimated, {
+  }), /* @__PURE__ */ React33.createElement(BlockListAnimated, {
     blockChainRenderComponents
   }));
 }, "DynamicListBase");
 
 // src/components/chain/render/dynamic/flexbox/variants/WithAnalysis.tsx
 import { ChainProducersAnalyzer } from "@xyo-network/chain-protocol";
-import React33, { useMemo as useMemo14 } from "react";
+import React34, { useMemo as useMemo15 } from "react";
 var WithAnalysis = /* @__PURE__ */ __name(({ blockChainRenderProps, ...props }) => {
   const { chainInformation } = blockChainRenderProps ?? {};
-  const analyzers = useMemo14(() => {
+  const analyzers = useMemo15(() => {
     if (chainInformation) {
       return {
         producers: new ChainProducersAnalyzer()
@@ -1610,9 +1706,9 @@ var WithAnalysis = /* @__PURE__ */ __name(({ blockChainRenderProps, ...props })
   }, [
     chainInformation
   ]);
-  return /* @__PURE__ */ React33.createElement(ChainAnalyzersProvider, {
+  return /* @__PURE__ */ React34.createElement(ChainAnalyzersProvider, {
     analyzers
-  }, /* @__PURE__ */ React33.createElement(ChainPollingProvider, null, /* @__PURE__ */ React33.createElement(DynamicListBase, {
+  }, /* @__PURE__ */ React34.createElement(ChainPollingProvider, null, /* @__PURE__ */ React34.createElement(DynamicListBase, {
     blockChainRenderProps,
     ...props
   })));
@@ -1620,13 +1716,13 @@ var WithAnalysis = /* @__PURE__ */ __name(({ blockChainRenderProps, ...props })
 
 // src/components/chain/render/dynamic/flexbox/variants/WithRemote.tsx
 import { ErrorRender as ErrorRender5 } from "@xylabs/react-error";
-import React34 from "react";
+import React35 from "react";
 var WithRemote = /* @__PURE__ */ __name(({ url, chainArchivistModuleId, blockChainRenderProps: blockChainRenderPropsArg, ...props }) => {
   const { error, blockChainRenderProps } = useRemoteBlockChainRenderProps(chainArchivistModuleId, url, blockChainRenderPropsArg);
-  return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(ErrorRender5, {
+  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(ErrorRender5, {
     error,
     scope: "RemoteChainProviderFlexbox"
-  }), /* @__PURE__ */ React34.createElement(WithAnalysis, {
+  }), /* @__PURE__ */ React35.createElement(WithAnalysis, {
     blockChainRenderProps,
     ...props
   }));
@@ -1642,16 +1738,16 @@ var DynamicBlockchainRenderFlexbox = {
 // 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 React35 from "react";
+import React36 from "react";
 
 // src/components/chain/render/static/hooks/useStaticBlockRenderComponents.ts
 import { exists } from "@xylabs/exists";
-import { useMemo as useMemo15 } from "react";
+import { useMemo as useMemo16 } from "react";
 var DEFAULT_PAGE_SIZE = 25;
 var useStaticBlockRenderComponents = /* @__PURE__ */ __name((BlockComponent, blockChainRenderProps) => {
   const { maxBlocks } = blockChainRenderProps ?? {};
   const pageSize = blockChainRenderProps?.pageSize ?? DEFAULT_PAGE_SIZE;
-  const chainIteratorParams = useMemo15(() => blockChainRenderProps ?? {}, [
+  const chainIteratorParams = useMemo16(() => blockChainRenderProps ?? {}, [
     blockChainRenderProps
   ]);
   const [params, paramsError] = useChainIteratorParams(chainIteratorParams);
@@ -1675,34 +1771,34 @@ var useStaticBlockRenderComponents = /* @__PURE__ */ __name((BlockComponent, blo
 // 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__ */ React35.createElement(FlexCol6, {
+  return /* @__PURE__ */ React36.createElement(FlexCol6, {
     alignItems: "start",
     gap: 2,
     width: "100%",
     ...props
-  }, errors?.map((error) => /* @__PURE__ */ React35.createElement(ErrorRender6, {
+  }, errors?.map((error) => /* @__PURE__ */ React36.createElement(ErrorRender6, {
     error,
     key: error.name,
     scope: "StaticBlockchainFlexboxInner"
-  })), paginatedBlockComponents?.length ? /* @__PURE__ */ React35.createElement(FlexGrowRow2, {
+  })), paginatedBlockComponents?.length ? /* @__PURE__ */ React36.createElement(FlexGrowRow2, {
     justifyContent: "space-between",
     width: "100%"
-  }, /* @__PURE__ */ React35.createElement(ChainAnalyzerStatsDialogFromContext, null), /* @__PURE__ */ React35.createElement(BlockChainPagination, {
+  }, /* @__PURE__ */ React36.createElement(ChainAnalyzerStatsDialogFromContext, null), /* @__PURE__ */ React36.createElement(BlockChainPagination, {
     count: blockComponents?.length ?? 0,
     onPageChange,
     page,
     rowsPerPage: pageSize
-  })) : null, /* @__PURE__ */ React35.createElement(BlockListAnimated, {
+  })) : null, /* @__PURE__ */ React36.createElement(BlockListAnimated, {
     blockChainRenderComponents: paginatedBlockComponents
   }));
 }, "StaticListBase");
 
 // src/components/chain/render/static/flexbox/variants/WithAnalysis.tsx
 import { ChainProducersAnalyzer as ChainProducersAnalyzer2 } from "@xyo-network/chain-protocol";
-import React36, { useMemo as useMemo16 } from "react";
+import React37, { useMemo as useMemo17 } from "react";
 var WithAnalysis2 = /* @__PURE__ */ __name(({ blockChainRenderProps, ...props }) => {
   const { chainInformation } = blockChainRenderProps ?? {};
-  const analyzers = useMemo16(() => {
+  const analyzers = useMemo17(() => {
     if (chainInformation) {
       return {
         producers: new ChainProducersAnalyzer2()
@@ -1711,9 +1807,9 @@ var WithAnalysis2 = /* @__PURE__ */ __name(({ blockChainRenderProps, ...props })
   }, [
     chainInformation
   ]);
-  return /* @__PURE__ */ React36.createElement(ChainAnalyzersProvider, {
+  return /* @__PURE__ */ React37.createElement(ChainAnalyzersProvider, {
     analyzers
-  }, /* @__PURE__ */ React36.createElement(StaticListBase, {
+  }, /* @__PURE__ */ React37.createElement(StaticListBase, {
     blockChainRenderProps,
     ...props
   }));
@@ -1728,19 +1824,19 @@ var StaticBlockchainRenderFlexBox = {
 // 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 React37, { useState as useState13 } from "react";
+import React38, { 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__ */ React37.createElement(FlexCol7, {
+  return /* @__PURE__ */ React38.createElement(FlexCol7, {
     gap: 2,
     ...props
-  }, /* @__PURE__ */ React37.createElement(BuilderComponent, {
+  }, /* @__PURE__ */ React38.createElement(BuilderComponent, {
     onBuild: onBuildLocal
-  }), payload && /* @__PURE__ */ React37.createElement(JsonViewerEx2, {
+  }), payload && /* @__PURE__ */ React38.createElement(JsonViewerEx2, {
     value: payload
   }));
 }, "PayloadBuilderFlexbox");
@@ -1748,11 +1844,11 @@ var PayloadBuilderFlexbox = /* @__PURE__ */ __name(({ BuilderComponent, onBuild,
 // src/components/payload/builder/producer-intent/Form.tsx
 import { Button as Button5, FormControl as FormControl5 } from "@mui/material";
 import { createProducerChainStakeIntent } from "@xyo-network/chain-ethereum";
-import React40, { useMemo as useMemo18, useState as useState16 } from "react";
+import React41, { useMemo as useMemo19, 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 React38, { useState as useState14 } from "react";
+import React39, { useState as useState14 } from "react";
 var BlockNumberTextField = /* @__PURE__ */ __name(({ errorMessage, onBlockNumberChanged, onChange, ...props }) => {
   const [blockNumber, setBlockNumber] = useState14();
   const handleChange = /* @__PURE__ */ __name((e) => {
@@ -1761,15 +1857,15 @@ var BlockNumberTextField = /* @__PURE__ */ __name(({ errorMessage, onBlockNumber
     onBlockNumberChanged?.(Number.parseInt(value));
     onChange?.(e);
   }, "handleChange");
-  return /* @__PURE__ */ React38.createElement(FormControl3, {
+  return /* @__PURE__ */ React39.createElement(FormControl3, {
     fullWidth: true
-  }, /* @__PURE__ */ React38.createElement(TextField3, {
+  }, /* @__PURE__ */ React39.createElement(TextField3, {
     error: !!errorMessage,
     onChange: handleChange,
     type: "number",
     value: blockNumber ?? "",
     ...props
-  }), errorMessage && /* @__PURE__ */ React38.createElement(FormHelperText2, {
+  }), errorMessage && /* @__PURE__ */ React39.createElement(FormHelperText2, {
     sx: {
       color: /* @__PURE__ */ __name((theme) => theme.palette.error.main, "color")
     }
@@ -1779,11 +1875,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 React39, { useMemo as useMemo17, useState as useState15 } from "react";
+import React40, { useMemo as useMemo18, useState as useState15 } from "react";
 var XyoAddressTextField = /* @__PURE__ */ __name(({ onAddressChanged, onChange, resetValue, ...props }) => {
   const [address, setAddress] = useState15("");
   const [addressError, setAddressError] = useState15();
-  useMemo17(() => setAddress(""), [
+  useMemo18(() => setAddress(""), [
     resetValue
   ]);
   const handleChange = /* @__PURE__ */ __name((event) => {
@@ -1803,15 +1899,15 @@ var XyoAddressTextField = /* @__PURE__ */ __name(({ onAddressChanged, onChange,
       onAddressChanged?.();
     }
   }, "handleBlur");
-  return /* @__PURE__ */ React39.createElement(FormControl4, {
+  return /* @__PURE__ */ React40.createElement(FormControl4, {
     fullWidth: true
-  }, /* @__PURE__ */ React39.createElement(TextField4, {
+  }, /* @__PURE__ */ React40.createElement(TextField4, {
     error: !!addressError,
     onBlur: handleBlur,
     onChange: handleChange,
     value: address,
     ...props
-  }), addressError && /* @__PURE__ */ React39.createElement(FormHelperText3, {
+  }), addressError && /* @__PURE__ */ React40.createElement(FormHelperText3, {
     sx: {
       color: /* @__PURE__ */ __name((theme) => theme.palette.error.main, "color")
     }
@@ -1824,7 +1920,7 @@ var ProducerIntentBuilderForm = /* @__PURE__ */ __name(({ onBuild }) => {
   const [exp, setExp] = useState16();
   const [nbf, setNbf] = useState16();
   const [blockRangeError, setBlockRangeError] = useState16();
-  const intentPayload = useMemo18(() => {
+  const intentPayload = useMemo19(() => {
     if (exp !== void 0 && nbf !== void 0) {
       if (exp <= nbf) {
         setBlockRangeError(new Error("Expires must be greater than Not Before"));
@@ -1844,33 +1940,33 @@ var ProducerIntentBuilderForm = /* @__PURE__ */ __name(({ onBuild }) => {
   const onBuildLocal = /* @__PURE__ */ __name(() => {
     if (onBuild && intentPayload) onBuild?.(intentPayload);
   }, "onBuildLocal");
-  return /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(FormControl5, {
+  return /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement(FormControl5, {
     fullWidth: true
-  }, /* @__PURE__ */ React40.createElement(XyoAddressTextField, {
+  }, /* @__PURE__ */ React41.createElement(XyoAddressTextField, {
     label: "Delegate",
     name: "delegate",
     onAddressChanged: setDelegate,
     required: true,
     size: "small"
-  })), /* @__PURE__ */ React40.createElement(FormControl5, {
+  })), /* @__PURE__ */ React41.createElement(FormControl5, {
     fullWidth: true
-  }, /* @__PURE__ */ React40.createElement(BlockNumberTextField, {
+  }, /* @__PURE__ */ React41.createElement(BlockNumberTextField, {
     errorMessage: blockRangeError?.message,
     label: "Expires",
     name: "exp",
     onBlockNumberChanged: setExp,
     required: true,
     size: "small"
-  })), /* @__PURE__ */ React40.createElement(FormControl5, {
+  })), /* @__PURE__ */ React41.createElement(FormControl5, {
     fullWidth: true
-  }, /* @__PURE__ */ React40.createElement(BlockNumberTextField, {
+  }, /* @__PURE__ */ React41.createElement(BlockNumberTextField, {
     errorMessage: blockRangeError?.message,
     label: "Not Before",
     name: "nbf",
     onBlockNumberChanged: setNbf,
     required: true,
     size: "small"
-  })), /* @__PURE__ */ React40.createElement(Button5, {
+  })), /* @__PURE__ */ React41.createElement(Button5, {
     disabled: !intentPayload,
     variant: "contained",
     onClick: onBuildLocal
@@ -1878,24 +1974,24 @@ var ProducerIntentBuilderForm = /* @__PURE__ */ __name(({ onBuild }) => {
 }, "ProducerIntentBuilderForm");
 
 // src/components/payload/builder/transfer/Flexbox.tsx
-import React43 from "react";
+import React44 from "react";
 
 // src/components/payload/builder/transfer/Form.tsx
 import { Button as Button6, FormControl as FormControl7 } from "@mui/material";
 import { TransferSchema } from "@xyo-network/xl1-model";
-import React42, { useMemo as useMemo20, useState as useState18 } from "react";
+import React43, { useMemo as useMemo21, useState as useState18 } from "react";
 
 // src/components/payload/builder/transfer/builder/SingleFlexbox.tsx
 import { RemoveCircle } from "@mui/icons-material";
 import { FormControl as FormControl6, Icon as Icon3, IconButton as IconButton5 } from "@mui/material";
 import { toHex as toHex3 } from "@xylabs/hex";
-import { FlexRow as FlexRow7 } from "@xylabs/react-flexbox";
+import { FlexRow as FlexRow8 } from "@xylabs/react-flexbox";
 import { BigIntInput } from "@xyo-network/react-shared";
-import React41, { useEffect as useEffect4, useMemo as useMemo19, useState as useState17 } from "react";
+import React42, { useEffect as useEffect4, useMemo as useMemo20, useState as useState17 } from "react";
 var SingleTransferBuilderFlexbox = /* @__PURE__ */ __name(({ onTransferUpdated, onRemoveTransfer, singleTransfer, ...props }) => {
   const [toAddress, setToAddress] = useState17();
   const [amount, setAmount] = useState17();
-  const transferAmount = useMemo19(() => {
+  const transferAmount = useMemo20(() => {
     if (toAddress && amount) {
       return {
         ...singleTransfer,
@@ -1912,36 +2008,36 @@ var SingleTransferBuilderFlexbox = /* @__PURE__ */ __name(({ onTransferUpdated,
   }, [
     transferAmount
   ]);
-  return /* @__PURE__ */ React41.createElement(FlexRow7, {
+  return /* @__PURE__ */ React42.createElement(FlexRow8, {
     alignItems: "start",
     gap: 1,
     ...props
-  }, /* @__PURE__ */ React41.createElement(FormControl6, {
+  }, /* @__PURE__ */ React42.createElement(FormControl6, {
     fullWidth: true
-  }, /* @__PURE__ */ React41.createElement(XyoAddressTextField, {
+  }, /* @__PURE__ */ React42.createElement(XyoAddressTextField, {
     label: "To",
     name: "to",
     onAddressChanged: setToAddress,
     required: true,
     size: "small"
-  })), /* @__PURE__ */ React41.createElement(FormControl6, {
+  })), /* @__PURE__ */ React42.createElement(FormControl6, {
     fullWidth: true
-  }, /* @__PURE__ */ React41.createElement(BigIntInput.TextField, {
+  }, /* @__PURE__ */ React42.createElement(BigIntInput.TextField, {
     label: "Amount",
     name: "amount",
     onChangeFixedPoint: setAmount,
     required: true,
     size: "small"
-  })), /* @__PURE__ */ React41.createElement(IconButton5, {
+  })), /* @__PURE__ */ React42.createElement(IconButton5, {
     onClick: /* @__PURE__ */ __name(() => onRemoveTransfer?.(singleTransfer.transferId), "onClick")
-  }, /* @__PURE__ */ React41.createElement(Icon3, null, /* @__PURE__ */ React41.createElement(RemoveCircle, null))));
+  }, /* @__PURE__ */ React42.createElement(Icon3, null, /* @__PURE__ */ React42.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 = useMemo20(() => {
+  const transferPayload = useMemo21(() => {
     if (fromAddress && transfers.length > 0) {
       const transfersRecord = {};
       for (const transfer of transfers) {
@@ -1983,19 +2079,19 @@ var TransferBuilderForm = /* @__PURE__ */ __name(({ onBuild }) => {
       return transfer;
     }));
   }, "onTransferUpdated");
-  return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(FormControl7, {
+  return /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement(FormControl7, {
     fullWidth: true
-  }, /* @__PURE__ */ React42.createElement(XyoAddressTextField, {
+  }, /* @__PURE__ */ React43.createElement(XyoAddressTextField, {
     label: "From",
     name: "from",
     onAddressChanged: setFromAddress,
     required: true,
     size: "small"
-  })), /* @__PURE__ */ React42.createElement(Button6, {
+  })), /* @__PURE__ */ React43.createElement(Button6, {
     onClick: onTransferAdded,
     size: "small",
     variant: "contained"
-  }, "Add Transfer"), transfers.map((transfer) => /* @__PURE__ */ React42.createElement(SingleTransferBuilderFlexbox, {
+  }, "Add Transfer"), transfers.map((transfer) => /* @__PURE__ */ React43.createElement(SingleTransferBuilderFlexbox, {
     key: transfer.transferId,
     onTransferUpdated,
     onRemoveTransfer: onTransferRemoved,
@@ -2003,7 +2099,7 @@ var TransferBuilderForm = /* @__PURE__ */ __name(({ onBuild }) => {
     sx: {
       width: "100%"
     }
-  })), /* @__PURE__ */ React42.createElement(Button6, {
+  })), /* @__PURE__ */ React43.createElement(Button6, {
     disabled: !transferPayload,
     variant: "contained",
     onClick: onBuildLocal
@@ -2011,7 +2107,7 @@ var TransferBuilderForm = /* @__PURE__ */ __name(({ onBuild }) => {
 }, "TransferBuilderForm");
 
 // src/components/payload/builder/transfer/Flexbox.tsx
-var TransferBuilderFlexbox = /* @__PURE__ */ __name(({ onBuild, ...props }) => /* @__PURE__ */ React43.createElement(PayloadBuilderFlexbox, {
+var TransferBuilderFlexbox = /* @__PURE__ */ __name(({ onBuild, ...props }) => /* @__PURE__ */ React44.createElement(PayloadBuilderFlexbox, {
   gap: 4,
   alignItems: "start",
   BuilderComponent: TransferBuilderForm,
@@ -2038,7 +2134,7 @@ import { usePromise as usePromise7 } from "@xylabs/react-promise";
 import { MemoryArchivist } from "@xyo-network/archivist-memory";
 import { ArchivistConfigSchema } from "@xyo-network/archivist-model";
 import { flattenHydratedBlocks } from "@xyo-network/chain-protocol";
-import React44, { useEffect as useEffect5 } from "react";
+import React45, { useEffect as useEffect5 } from "react";
 var ChainArchivistDecorator = /* @__PURE__ */ __name((Story, context) => {
   const [randomBlockChain] = usePromise7(async () => await buildRandomBlockChain(), []);
   const [blockChainRenderProps, blockChainRenderPropsError] = usePromise7(async () => {
@@ -2078,7 +2174,7 @@ var ChainArchivistDecorator = /* @__PURE__ */ __name((Story, context) => {
       }
     }
   };
-  return blockChainRenderProps?.chainArchivist ? /* @__PURE__ */ React44.createElement(Story, props) : /* @__PURE__ */ React44.createElement(CircularProgress, null);
+  return blockChainRenderProps?.chainArchivist ? /* @__PURE__ */ React45.createElement(Story, props) : /* @__PURE__ */ React45.createElement(CircularProgress, null);
 }, "ChainArchivistDecorator");
 
 // src/stories/ChainArchivistDelayedInsertDecorator.tsx
@@ -2088,7 +2184,7 @@ 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 { flattenHydratedBlock } from "@xyo-network/chain-protocol";
-import React45, { useEffect as useEffect6, useState as useState19 } from "react";
+import React46, { useEffect as useEffect6, useState as useState19 } from "react";
 var chainArchivistRef;
 var ChainArchivistDelayedInsertDecorator = /* @__PURE__ */ __name((Story, context) => {
   const [firstBlock, setFirstBlock] = useState19();
@@ -2146,7 +2242,7 @@ var ChainArchivistDelayedInsertDecorator = /* @__PURE__ */ __name((Story, contex
       }
     }
   };
-  return firstBlock ? /* @__PURE__ */ React45.createElement(Story, props) : /* @__PURE__ */ React45.createElement(CircularProgress2, null);
+  return firstBlock ? /* @__PURE__ */ React46.createElement(Story, props) : /* @__PURE__ */ React46.createElement(CircularProgress2, null);
 }, "ChainArchivistDelayedInsertDecorator");
 
 // src/stories/ChainInfoContextDecorator.tsx
@@ -2155,7 +2251,7 @@ import { usePromise as usePromise9 } from "@xylabs/react-promise";
 import { XyoChainBlockNumberIterator as XyoChainBlockNumberIterator3 } from "@xyo-network/chain-services";
 import { findFirstMatching } from "@xyo-network/chain-utils";
 import { isBlockBoundWitness as isBlockBoundWitness3 } from "@xyo-network/xl1-model";
-import React46 from "react";
+import React47 from "react";
 var archivistConfig = {
   url: "http://localhost:8080",
   chainArchivistModuleId: "XYOPublic:XYOChain:Chain"
@@ -2181,11 +2277,11 @@ var ChainInfoContextDecorator = /* @__PURE__ */ __name((Story, context) => {
     chainArchivist,
     chainInformation
   ]);
-  return /* @__PURE__ */ React46.createElement(ChainInfoProvider, {
+  return /* @__PURE__ */ React47.createElement(ChainInfoProvider, {
     chainArchivist,
     chainInformation,
     chainIterator
-  }, /* @__PURE__ */ React46.createElement(Story, context));
+  }, /* @__PURE__ */ React47.createElement(Story, context));
 }, "ChainInfoContextDecorator");
 export {
   BlockChainPagination,
@@ -2196,6 +2292,7 @@ export {
   BlockListWrapperFlexBox,
   BlockNumberTableCell,
   BlockNumberTextField,
+  BlockPayloadCountsTableCell,
   BlockProducerChip,
   BlockProducerTableCell,
   BlockTransactionCountTableCell,
@@ -2231,6 +2328,7 @@ export {
   buildBlockHeadingComponent,
   buildRandomBlockChain,
   buildRandomBlockChainBlocksOnly,
+  payloadCountsFromBlock,
   resolveDefinedHead,
   txsFromBlock,
   useAnchorElement,
@@ -2243,6 +2341,7 @@ export {
   useDynamicBlockComponents,
   useIterateChain,
   useOnBlock,
+  usePayloadCountsFromBlock,
   useStaticBlockComponents,
   useTxsFromBlock
 };