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

package/dist/browser/index.mjs

@@ -4,14 +4,14 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 // src/components/account/BalanceHistoryFlexbox.tsx
 import { Typography as Typography7 } from "@mui/material";
 import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
-import { isDefined as isDefined6 } from "@xylabs/sdk-js";
+import { isDefined as isDefined7 } from "@xylabs/sdk-js";
 import { useAccountBalanceHistory } from "@xyo-network/react-chain-provider";
 import { ErrorRender as ErrorRender3 } from "@xyo-network/react-error";
-import { AttoXL1 } from "@xyo-network/xl1-protocol";
-import React29 from "react";
+import { AttoXL1 } from "@xyo-network/xl1-sdk";
+import React30 from "react";
 
 // src/components/account/helpers/formatBalanceMagnitude.ts
-import { XL1Amount } from "@xyo-network/xl1-protocol";
+import { XL1Amount } from "@xyo-network/xl1-sdk";
 var formatBalanceMagnitude = /* @__PURE__ */ __name((set) => {
   const [received, sent] = set;
   const netBalance = received - sent;
@@ -30,20 +30,20 @@ var formatBalance = /* @__PURE__ */ __name((balance) => {
 
 // src/components/account/table/BalanceHistoryTableEx.tsx
 import { TableBody as TableBody2, TableCell as TableCell14, TableHead as TableHead2, TableRow as TableRow4 } from "@mui/material";
-import { isDefined as isDefined5 } from "@xylabs/sdk-js";
+import { isDefined as isDefined6 } from "@xylabs/sdk-js";
 import { TableEx as TableEx2 } from "@xyo-network/react-table";
-import React28 from "react";
+import React29 from "react";
 
 // src/components/account/table/BalanceHistoryTableRow.tsx
 import { TableCell as TableCell13, TableRow as TableRow3 } from "@mui/material";
 import { RawInfoIconButton } from "@xyo-network/react-payload-raw-info";
-import React27, { useMemo as useMemo8 } from "react";
+import React28, { useMemo as useMemo7 } from "react";
 
 // src/components/block/BlockHeadingFlexbox.tsx
 import { FlexCol as FlexCol2, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
 import { BWVerification, HashHeadingPaper } from "@xyo-network/react-boundwitness-plugin";
 import { usePayloadHash } from "@xyo-network/react-shared";
-import React11 from "react";
+import React12 from "react";
 
 // src/context/analyzer/context.ts
 import { createContextEx } from "@xylabs/react-shared";
@@ -65,8 +65,8 @@ var useChainPollingContext = /* @__PURE__ */ __name((required = false) => useCon
 import { Button, FormControl, TextField } from "@mui/material";
 import { FlexCol } from "@xylabs/react-flexbox";
 import { toHex } from "@xylabs/sdk-js";
-import { defaultTransactionFees, toXL1BlockNumber } from "@xyo-network/xl1-protocol";
-import React from "react";
+import { defaultTransactionFees, toXL1BlockNumber } from "@xyo-network/xl1-sdk";
+import React2 from "react";
 var ChainTransactionBuilder = /* @__PURE__ */ __name(({ onSubmitTx }) => {
   const handleSubmit = /* @__PURE__ */ __name(async (event) => {
     event.preventDefault();
@@ -84,38 +84,38 @@ var ChainTransactionBuilder = /* @__PURE__ */ __name(({ onSubmitTx }) => {
     };
     await onSubmitTx?.(chainTx);
   }, "handleSubmit");
-  return /* @__PURE__ */ React.createElement("form", {
+  return /* @__PURE__ */ React2.createElement("form", {
     onSubmit: /* @__PURE__ */ __name((event) => void handleSubmit(event), "onSubmit"),
     style: {
       width: "100%"
     }
-  }, /* @__PURE__ */ React.createElement(FlexCol, {
+  }, /* @__PURE__ */ React2.createElement(FlexCol, {
     gap: 2
-  }, /* @__PURE__ */ React.createElement(FormControl, {
+  }, /* @__PURE__ */ React2.createElement(FormControl, {
     fullWidth: true
-  }, /* @__PURE__ */ React.createElement(TextField, {
+  }, /* @__PURE__ */ React2.createElement(TextField, {
     label: "Chain Address",
     name: "chain",
     required: true
-  })), /* @__PURE__ */ React.createElement(FormControl, {
+  })), /* @__PURE__ */ React2.createElement(FormControl, {
     fullWidth: true
-  }, /* @__PURE__ */ React.createElement(TextField, {
+  }, /* @__PURE__ */ React2.createElement(TextField, {
     label: "Gas",
     name: "gas",
     required: true
-  })), /* @__PURE__ */ React.createElement(FormControl, {
+  })), /* @__PURE__ */ React2.createElement(FormControl, {
     fullWidth: true
-  }, /* @__PURE__ */ React.createElement(TextField, {
+  }, /* @__PURE__ */ React2.createElement(TextField, {
     label: "Not Before Block",
     name: "nbf",
     required: true
-  })), /* @__PURE__ */ React.createElement(FormControl, {
+  })), /* @__PURE__ */ React2.createElement(FormControl, {
     fullWidth: true
-  }, /* @__PURE__ */ React.createElement(TextField, {
+  }, /* @__PURE__ */ React2.createElement(TextField, {
     label: "Not After Block",
     name: "exp",
     required: true
-  })), /* @__PURE__ */ React.createElement(Button, {
+  })), /* @__PURE__ */ React2.createElement(Button, {
     type: "submit",
     variant: "contained"
   }, "Submit")));
@@ -123,7 +123,7 @@ var ChainTransactionBuilder = /* @__PURE__ */ __name(({ onSubmitTx }) => {
 
 // src/components/transactions/submit/Network.tsx
 import { FormControl as FormControl2, FormHelperText, TextField as TextField2 } from "@mui/material";
-import React2, { useState } from "react";
+import React3, { useState } from "react";
 var ChainTransactionNetwork = /* @__PURE__ */ __name(({ network, onNetworkChange, ...props }) => {
   const [error, setError] = useState();
   const handleChange = /* @__PURE__ */ __name((event) => {
@@ -136,16 +136,16 @@ var ChainTransactionNetwork = /* @__PURE__ */ __name(({ network, onNetworkChange
       setError(error2);
     }
   }, "handleChange");
-  return /* @__PURE__ */ React2.createElement(FormControl2, {
+  return /* @__PURE__ */ React3.createElement(FormControl2, {
     fullWidth: true
-  }, /* @__PURE__ */ React2.createElement(TextField2, {
+  }, /* @__PURE__ */ React3.createElement(TextField2, {
     label: "Network",
     name: "network",
     onChange: handleChange,
     required: true,
     value: network,
     ...props
-  }), /* @__PURE__ */ React2.createElement(FormHelperText, {
+  }), /* @__PURE__ */ React3.createElement(FormHelperText, {
     sx: {
       color: error ? "red" : void 0
     }
@@ -161,9 +161,9 @@ import { Account } from "@xyo-network/account";
 import { ArchivistInsertQuerySchema } from "@xyo-network/archivist-model";
 import { QueryBoundWitnessBuilder } from "@xyo-network/boundwitness-builder";
 import { PayloadBuilder } from "@xyo-network/payload-builder";
-import { buildTransaction } from "@xyo-network/xl1-protocol-sdk";
+import { buildTransaction } from "@xyo-network/xl1-sdk";
 import { Axios } from "axios";
-import React3, { useState as useState2 } from "react";
+import React4, { useState as useState2 } from "react";
 var BETA_PENDING_TRANSACTIONS_ARCHIVIST = "https://beta.api.chain.xyo.network/8050fee682a2762f504d5449d8269a6f17f0b693";
 var defaultNetwork = new URL(BETA_PENDING_TRANSACTIONS_ARCHIVIST);
 var SubmitChainTransaction = /* @__PURE__ */ __name(() => {
@@ -198,37 +198,37 @@ var SubmitChainTransaction = /* @__PURE__ */ __name(() => {
   const onNetworkChange = /* @__PURE__ */ __name((url) => {
     setNetwork(url);
   }, "onNetworkChange");
-  return /* @__PURE__ */ React3.createElement(Grid, {
+  return /* @__PURE__ */ React4.createElement(Grid, {
     container: true
-  }, /* @__PURE__ */ React3.createElement(Grid, {
+  }, /* @__PURE__ */ React4.createElement(Grid, {
     size: {
       xs: 12,
       sm: 6,
       md: 4
     }
-  }, /* @__PURE__ */ React3.createElement(FlexGrowCol, {
+  }, /* @__PURE__ */ React4.createElement(FlexGrowCol, {
     alignItems: "start",
     gap: 2
-  }, /* @__PURE__ */ React3.createElement(ChainTransactionNetwork, {
+  }, /* @__PURE__ */ React4.createElement(ChainTransactionNetwork, {
     network,
     onNetworkChange
-  }), network ? /* @__PURE__ */ React3.createElement(ChainTransactionBuilder, {
+  }), network ? /* @__PURE__ */ React4.createElement(ChainTransactionBuilder, {
     onSubmitTx
-  }) : null, result?.[2].length === 0 ? /* @__PURE__ */ React3.createElement(Alert, {
+  }) : null, result?.[2].length === 0 ? /* @__PURE__ */ React4.createElement(Alert, {
     severity: "success"
-  }, "Success") : null, error ? /* @__PURE__ */ React3.createElement(ErrorRender, {
+  }, "Success") : null, error ? /* @__PURE__ */ React4.createElement(ErrorRender, {
     error
-  }) : null, result?.[2] && result?.[2].length > 0 ? /* @__PURE__ */ React3.createElement(ErrorRender, {
+  }) : null, result?.[2] && result?.[2].length > 0 ? /* @__PURE__ */ React4.createElement(ErrorRender, {
     error: new Error("Failed insert...see result below")
-  }) : null, result ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Typography, {
+  }) : null, result ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Typography, {
     variant: "h6"
-  }, "Result:"), /* @__PURE__ */ React3.createElement("pre", null, JSON.stringify(result, null, 2))) : null)));
+  }, "Result:"), /* @__PURE__ */ React4.createElement("pre", null, JSON.stringify(result, null, 2))) : null)));
 }, "SubmitChainTransaction");
 
 // src/components/transactions/TransactionCountChip.tsx
 import CompareArrowsIcon from "@mui/icons-material/CompareArrows";
 import { Chip, Icon } from "@mui/material";
-import React4, { useMemo } from "react";
+import React5, { useMemo } from "react";
 var TransactionCountChip = /* @__PURE__ */ __name(({ transactions, sx, ...props }) => {
   const label = useMemo(() => {
     if (!transactions) return "0";
@@ -236,8 +236,8 @@ var TransactionCountChip = /* @__PURE__ */ __name(({ transactions, sx, ...props
   }, [
     transactions
   ]);
-  return /* @__PURE__ */ React4.createElement(Chip, {
-    avatar: /* @__PURE__ */ React4.createElement(Icon, null, /* @__PURE__ */ React4.createElement(CompareArrowsIcon, null)),
+  return /* @__PURE__ */ React5.createElement(Chip, {
+    avatar: /* @__PURE__ */ React5.createElement(Icon, null, /* @__PURE__ */ React5.createElement(CompareArrowsIcon, null)),
     label,
     title: transactions ? `Block contains ${transactions.length} transactions` : void 0,
     sx: {
@@ -256,15 +256,15 @@ import { Alert as Alert2, AlertTitle, Collapse, Snackbar, Typography as Typograp
 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 React5, { Fragment, useMemo as useMemo2, useState as useState3 } from "react";
+import { isDefined as isDefined2 } from "@xylabs/sdk-js";
+import React6, { Fragment, useState as useState3 } from "react";
 
 // src/hooks/chain-iterator/useChainIteratorParams.ts
 import { usePromise } from "@xylabs/react-promise";
 import { isHash } from "@xylabs/sdk-js";
 import { assertEx, isDefined } from "@xylabs/sdk-js";
 import { BoundWitnessBuilder } from "@xyo-network/boundwitness-builder";
-import { isBlockBoundWitness } from "@xyo-network/xl1-protocol";
-import { getDefaultConfig } from "@xyo-network/xl1-protocol-sdk";
+import { getDefaultConfig, isBlockBoundWitness } from "@xyo-network/xl1-sdk";
 var resolveDefinedHead = /* @__PURE__ */ __name(async (head, chainArchivist) => {
   const [headPayload] = await chainArchivist.get([
     head
@@ -327,10 +327,13 @@ var useTxsFromBlock = /* @__PURE__ */ __name((block) => {
 var TransactionsQuickTipButton = /* @__PURE__ */ __name(({ block, ...props }) => {
   const [transactions, transactionsError] = useTxsFromBlock(block);
   const [copied, setCopied] = useState3(false);
-  const [showError, setShowError] = useState3(false);
-  useMemo2(() => transactionsError ? setShowError(true) : setShowError(false), [
-    transactionsError
-  ]);
+  const [closeDialog, setCloseDialog] = useState3(false);
+  const open = isDefined2(transactionsError);
+  const [previousTransactionError, setPreviousTransactionError] = useState3(transactionsError);
+  if (isDefined2(transactionsError) && transactionsError !== previousTransactionError) {
+    setPreviousTransactionError(transactionsError);
+    setCloseDialog(false);
+  }
   const onCopy = /* @__PURE__ */ __name(async (transactionHash) => {
     await navigator.clipboard.writeText(transactionHash);
     setCopied(true);
@@ -338,7 +341,7 @@ var TransactionsQuickTipButton = /* @__PURE__ */ __name(({ block, ...props }) =>
       setCopied(false);
     }, 5e3);
   }, "onCopy");
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(QuickTipButton, {
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(QuickTipButton, {
     Icon: Paid,
     disabled: transactions?.length === 0,
     hoverText: `Transaction Count: ${transactions?.length ?? 0}`,
@@ -348,32 +351,32 @@ var TransactionsQuickTipButton = /* @__PURE__ */ __name(({ block, ...props }) =>
       maxWidth: "md"
     },
     ...props
-  }, transactions?.length === 0 ? null : /* @__PURE__ */ React5.createElement(FlexGrowCol2, {
+  }, transactions?.length === 0 ? null : /* @__PURE__ */ React6.createElement(FlexGrowCol2, {
     gap: 1,
     alignItems: "stretch"
-  }, transactions?.map(([transaction, hash]) => /* @__PURE__ */ React5.createElement(Fragment, {
+  }, transactions?.map(([_transaction, hash]) => /* @__PURE__ */ React6.createElement(Fragment, {
     key: hash
-  }, /* @__PURE__ */ React5.createElement(FlexGrowRow, {
+  }, /* @__PURE__ */ React6.createElement(FlexGrowRow, {
     gap: 2,
     justifyContent: "start"
-  }, /* @__PURE__ */ React5.createElement(ContentCopyIcon, {
+  }, /* @__PURE__ */ React6.createElement(ContentCopyIcon, {
     sx: {
       cursor: "pointer"
     },
     onClick: /* @__PURE__ */ __name(() => void onCopy(hash), "onClick")
-  }), /* @__PURE__ */ React5.createElement(Typography2, {
+  }), /* @__PURE__ */ React6.createElement(Typography2, {
     sx: {
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap"
     }
-  }, hash)), /* @__PURE__ */ React5.createElement(FlexRow, null, /* @__PURE__ */ React5.createElement(Collapse, {
+  }, hash)), /* @__PURE__ */ React6.createElement(FlexRow, null, /* @__PURE__ */ React6.createElement(Collapse, {
     in: copied,
     unmountOnExit: true
-  }, /* @__PURE__ */ React5.createElement(Alert2, null, /* @__PURE__ */ React5.createElement(AlertTitle, null, "Previous hash copied to clipboard")))))))), /* @__PURE__ */ React5.createElement(Snackbar, {
-    open: showError,
-    onClose: /* @__PURE__ */ __name(() => setShowError(false), "onClose")
-  }, /* @__PURE__ */ React5.createElement(ErrorRender2, {
+  }, /* @__PURE__ */ React6.createElement(Alert2, null, /* @__PURE__ */ React6.createElement(AlertTitle, null, "Previous hash copied to clipboard")))))))), /* @__PURE__ */ React6.createElement(Snackbar, {
+    open: open && closeDialog === false,
+    onClose: /* @__PURE__ */ __name(() => setCloseDialog(true), "onClose")
+  }, /* @__PURE__ */ React6.createElement(ErrorRender2, {
     error: transactionsError,
     scope: "TransactionsQuickTipButton"
   })));
@@ -407,9 +410,9 @@ var useBlockHeadingEvents = /* @__PURE__ */ __name((...args) => {
 }, "useBlockHeadingEvents");
 
 // src/components/block/hooks/useBlockProducer.ts
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo2 } from "react";
 var useBlockProducer = /* @__PURE__ */ __name((block) => {
-  return useMemo3(() => {
+  return useMemo2(() => {
     if (block) {
       const producer = block[0].addresses[0];
       return producer;
@@ -420,7 +423,7 @@ var useBlockProducer = /* @__PURE__ */ __name((block) => {
 }, "useBlockProducer");
 
 // src/components/block/hooks/usePayloadCountsFromBlock.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo3 } from "react";
 
 // src/components/block/helpers/blockProducer.ts
 var blockProducer = /* @__PURE__ */ __name((block) => {
@@ -428,13 +431,13 @@ var blockProducer = /* @__PURE__ */ __name((block) => {
 }, "blockProducer");
 
 // src/components/block/helpers/buildBlockChainRenderComponent.tsx
-import React6 from "react";
+import React7 from "react";
 var buildBlockChainRenderComponent = /* @__PURE__ */ __name(async (BlockComponent, blockComponentProps) => {
   const { block, ...remainingProps } = blockComponentProps;
   const blockTxs = await txsFromBlock(block);
   const txHashes = blockTxs.map(([_, hash]) => hash);
   const item = {
-    child: /* @__PURE__ */ React6.createElement(BlockComponent, {
+    child: /* @__PURE__ */ React7.createElement(BlockComponent, {
       block,
       transactions: txHashes,
       ...remainingProps
@@ -447,7 +450,7 @@ var buildBlockChainRenderComponent = /* @__PURE__ */ __name(async (BlockComponen
 
 // src/components/block/helpers/payloadCountsFromBlock.ts
 import { BoundWitnessSchema } from "@xyo-network/boundwitness-model";
-import { isTransactionBoundWitness } from "@xyo-network/xl1-protocol";
+import { isTransactionBoundWitness } from "@xyo-network/xl1-sdk";
 var payloadCountsFromBlock = /* @__PURE__ */ __name(([block, payloads]) => {
   const publicPayloads = block.payload_schemas.filter((schema) => schema !== BoundWitnessSchema);
   const transactionHashes = payloads.filter((payload) => isTransactionBoundWitness(payload)).flatMap((payload) => payload.payload_hashes);
@@ -460,7 +463,7 @@ var payloadCountsFromBlock = /* @__PURE__ */ __name(([block, payloads]) => {
 
 // src/components/block/hooks/usePayloadCountsFromBlock.ts
 var usePayloadCountsFromBlock = /* @__PURE__ */ __name((block) => {
-  return useMemo4(() => {
+  return useMemo3(() => {
     if (block) {
       return [
         ...payloadCountsFromBlock(block),
@@ -479,9 +482,9 @@ var usePayloadCountsFromBlock = /* @__PURE__ */ __name((block) => {
 
 // src/components/block/LinkedDivider.tsx
 import { Divider, Stack } from "@mui/material";
-import React7 from "react";
+import React8 from "react";
 var LinkedDivider = /* @__PURE__ */ __name(() => {
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Stack, {
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Stack, {
     className: "divider-spacer",
     justifyContent: "end",
     sx: {
@@ -489,7 +492,7 @@ var LinkedDivider = /* @__PURE__ */ __name(() => {
       height: 24,
       justifyContent: "end"
     }
-  }, /* @__PURE__ */ React7.createElement(Divider, {
+  }, /* @__PURE__ */ React8.createElement(Divider, {
     className: "divider",
     orientation: "vertical",
     flexItem: true,
@@ -505,16 +508,16 @@ var LinkedDivider = /* @__PURE__ */ __name(() => {
 import { MoreVert } from "@mui/icons-material";
 import { IconButton, Menu } from "@mui/material";
 import { BWJsonMenuItem, BWPreviousHashMenuItem } from "@xyo-network/react-boundwitness-plugin";
-import React8 from "react";
+import React9 from "react";
 var BlockMenuExpanded = /* @__PURE__ */ __name(({ block }) => {
   const { anchorEl, anchorRef, open, handleClick, handleClose } = useAnchorElement();
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(IconButton, {
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(IconButton, {
     ref: anchorRef,
     size: "small",
     onClick: handleClick
-  }, /* @__PURE__ */ React8.createElement(MoreVert, {
+  }, /* @__PURE__ */ React9.createElement(MoreVert, {
     fontSize: "inherit"
-  })), /* @__PURE__ */ React8.createElement(Menu, {
+  })), /* @__PURE__ */ React9.createElement(Menu, {
     open,
     anchorEl,
     anchorOrigin: {
@@ -522,11 +525,11 @@ var BlockMenuExpanded = /* @__PURE__ */ __name(({ block }) => {
       vertical: "bottom"
     },
     onClose: handleClose
-  }, /* @__PURE__ */ React8.createElement(BWPreviousHashMenuItem, {
+  }, /* @__PURE__ */ React9.createElement(BWPreviousHashMenuItem, {
     boundwitness: block?.[0],
     dense: true,
     onDialogClose: handleClose
-  }), /* @__PURE__ */ React8.createElement(BWJsonMenuItem, {
+  }), /* @__PURE__ */ React9.createElement(BWJsonMenuItem, {
     boundwitness: block?.[0],
     dense: true,
     onDialogClose: handleClose
@@ -537,13 +540,13 @@ var BlockMenuExpanded = /* @__PURE__ */ __name(({ block }) => {
 import { Chip as Chip2 } from "@mui/material";
 import { EthAddressWrapper, isString, isUndefined, toAddress } from "@xylabs/sdk-js";
 import { BlockiesAvatar } from "@xyo-network/react-chain-blockies";
-import React10, { useMemo as useMemo5 } from "react";
+import React11, { useMemo as useMemo4 } from "react";
 
 // src/components/block/ChipSkeleton.tsx
 import { Skeleton } from "@mui/material";
-import React9 from "react";
+import React10 from "react";
 var ChipSkeleton = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ React9.createElement(Skeleton, {
+  return /* @__PURE__ */ React10.createElement(Skeleton, {
     width: 100,
     ...props
   });
@@ -557,7 +560,7 @@ var formatProducerAddress = /* @__PURE__ */ __name((address) => {
 }, "formatProducerAddress");
 var BlockProducerChip = /* @__PURE__ */ __name(({ block, ...props }) => {
   const blockProducer2 = block?.[0].addresses[0];
-  return /* @__PURE__ */ React10.createElement(BlockAddressChip, {
+  return /* @__PURE__ */ React11.createElement(BlockAddressChip, {
     address: blockProducer2,
     toolTipTitle: `Block producer: ${blockProducer2}`,
     ...props
@@ -565,16 +568,16 @@ var BlockProducerChip = /* @__PURE__ */ __name(({ block, ...props }) => {
 }, "BlockProducerChip");
 var BlockAddressChip = /* @__PURE__ */ __name(({ address, sx, toolTipTitle, ...props }) => {
   const shortedBlockProducer = address === void 0 ? null : formatProducerAddress(address);
-  const avatar = useMemo5(() => address === "" ? void 0 : /* @__PURE__ */ React10.createElement(BlockiesAvatar, {
+  const avatar = useMemo4(() => address === "" ? void 0 : /* @__PURE__ */ React11.createElement(BlockiesAvatar, {
     blockiesOptions: {
       seed: address
     }
   }), [
     address
   ]);
-  return /* @__PURE__ */ React10.createElement(Chip2, {
+  return /* @__PURE__ */ React11.createElement(Chip2, {
     avatar,
-    label: shortedBlockProducer ?? /* @__PURE__ */ React10.createElement(ChipSkeleton, {
+    label: shortedBlockProducer ?? /* @__PURE__ */ React11.createElement(ChipSkeleton, {
       width: 115
     }),
     title: toolTipTitle,
@@ -597,12 +600,12 @@ var BlockHeadingFlexbox = /* @__PURE__ */ __name(({ block, defaultExpanded, tran
     event.stopPropagation();
     blockHeadingListener("transaction-count", "click", JSON.stringify(transactions2));
   }, "handleTransactionCountClick");
-  return /* @__PURE__ */ React11.createElement(FlexCol2, {
+  return /* @__PURE__ */ React12.createElement(FlexCol2, {
     className: "block-heading-flexbox",
     alignItems: "stretch",
     ref: blockHeadingRef,
     onClick: /* @__PURE__ */ __name(() => blockHeadingListener("block-hash", "click", hash), "onClick")
-  }, /* @__PURE__ */ React11.createElement(LinkedDivider, null), /* @__PURE__ */ React11.createElement(HashHeadingPaper, {
+  }, /* @__PURE__ */ React12.createElement(LinkedDivider, null), /* @__PURE__ */ React12.createElement(HashHeadingPaper, {
     hash,
     heading: block?.[0].block === void 0 ? "" : block?.[0].block.toString(),
     paperProps: {
@@ -611,24 +614,24 @@ var BlockHeadingFlexbox = /* @__PURE__ */ __name(({ block, defaultExpanded, tran
         width: "100%"
       }
     },
-    AdornmentEnd: /* @__PURE__ */ React11.createElement(FlexRow2, {
+    AdornmentEnd: /* @__PURE__ */ React12.createElement(FlexRow2, {
       gap: 1
-    }, /* @__PURE__ */ React11.createElement(BlockProducerChip, {
+    }, /* @__PURE__ */ React12.createElement(BlockProducerChip, {
       block
-    }), /* @__PURE__ */ React11.createElement(TransactionCountChip, {
+    }), /* @__PURE__ */ React12.createElement(TransactionCountChip, {
       onClick: /* @__PURE__ */ __name((e) => handleTransactionCountClick(e, transactions ?? []), "onClick"),
       transactions
-    }), /* @__PURE__ */ React11.createElement(BWVerification, {
+    }), /* @__PURE__ */ React12.createElement(BWVerification, {
       iconColors: true,
       boundwitness: block?.[0]
-    }), /* @__PURE__ */ React11.createElement("span", {
+    }), /* @__PURE__ */ React12.createElement("span", {
       style: {
         // maxWidth is required for css animation to work and 28px is the width of the icon button
         display: "flex",
         transition: "max-width .5s",
         maxWidth: expanded ? "28px" : 0
       }
-    }, /* @__PURE__ */ React11.createElement(BlockMenuExpanded, {
+    }, /* @__PURE__ */ React12.createElement(BlockMenuExpanded, {
       block
     }))),
     identiconProps: {
@@ -641,10 +644,10 @@ var BlockHeadingFlexbox = /* @__PURE__ */ __name(({ block, defaultExpanded, tran
 // src/components/block/table/cell/BlockNumber.tsx
 import { Link, TableCell, Tooltip, Typography as Typography3 } from "@mui/material";
 import { useEvent as useEvent2 } from "@xyo-network/react-event";
-import React12 from "react";
+import React13 from "react";
 var BlockNumberTableCell = /* @__PURE__ */ __name(({ block, linked, ...props }) => {
   const blockNumber = block?.[0].block;
-  return /* @__PURE__ */ React12.createElement(BlockNumberTableCellInner, {
+  return /* @__PURE__ */ React13.createElement(BlockNumberTableCellInner, {
     blockNumber,
     linked,
     ...props
@@ -653,15 +656,15 @@ var BlockNumberTableCell = /* @__PURE__ */ __name(({ block, linked, ...props })
 var BlockNumberTableCellInner = /* @__PURE__ */ __name(({ blockNumber, linked, ...props }) => {
   const [ref, dispatch] = useEvent2();
   const handleClick = /* @__PURE__ */ __name(() => dispatch("block-number", "click", blockNumber?.toString() ?? ""), "handleClick");
-  return /* @__PURE__ */ React12.createElement(TableCell, {
+  return /* @__PURE__ */ React13.createElement(TableCell, {
     ref,
     ...props
-  }, /* @__PURE__ */ React12.createElement(Tooltip, {
+  }, /* @__PURE__ */ React13.createElement(Tooltip, {
     title: `Block Number: ${blockNumber}`
-  }, /* @__PURE__ */ React12.createElement(Typography3, {
+  }, /* @__PURE__ */ React13.createElement(Typography3, {
     component: "span",
     variant: "body1"
-  }, linked ? /* @__PURE__ */ React12.createElement(Link, {
+  }, linked ? /* @__PURE__ */ React13.createElement(Link, {
     onClick: handleClick,
     sx: {
       cursor: "pointer"
@@ -671,8 +674,8 @@ var BlockNumberTableCellInner = /* @__PURE__ */ __name(({ blockNumber, linked, .
 
 // src/components/block/table/cell/Epoch.tsx
 import { Skeleton as Skeleton2, TableCell as TableCell2, Tooltip as Tooltip2, Typography as Typography4 } from "@mui/material";
-import { isDefined as isDefined2 } from "@xylabs/sdk-js";
-import React13 from "react";
+import { isDefined as isDefined3 } from "@xylabs/sdk-js";
+import React14 from "react";
 
 // src/components/block/table/cell/lib/timeFunctions.ts
 var dateFormat = Intl.DateTimeFormat(globalThis.navigator.language ?? "en-US", {
@@ -737,25 +740,25 @@ var timeAgo = /* @__PURE__ */ __name((epoch, locale = navigator.language ?? "en-
 var BlockEpochTableCell = /* @__PURE__ */ __name(({ block, linked, ...props }) => {
   const epoch = block?.[0]?.$epoch;
   const dateTime = dateFormat.format(epoch);
-  const age = isDefined2(epoch) ? timeAgo(epoch) : void 0;
-  return /* @__PURE__ */ React13.createElement(TableCell2, props, /* @__PURE__ */ React13.createElement(Tooltip2, {
+  const age = isDefined3(epoch) ? timeAgo(epoch) : void 0;
+  return /* @__PURE__ */ React14.createElement(TableCell2, props, /* @__PURE__ */ React14.createElement(Tooltip2, {
     title: `Block Epoch: ${dateTime}`
-  }, /* @__PURE__ */ React13.createElement(Typography4, {
+  }, /* @__PURE__ */ React14.createElement(Typography4, {
     component: "span",
     variant: "body1"
-  }, age ?? /* @__PURE__ */ React13.createElement(Skeleton2, {
+  }, age ?? /* @__PURE__ */ React14.createElement(Skeleton2, {
     width: 115
   }))));
 }, "BlockEpochTableCell");
 var BlockEpochTableCellInner = /* @__PURE__ */ __name(({ epoch, linked, ...props }) => {
   const dateTime = dateFormat.format(epoch);
-  const age = isDefined2(epoch) ? timeAgo(epoch) : void 0;
-  return /* @__PURE__ */ React13.createElement(TableCell2, props, /* @__PURE__ */ React13.createElement(Tooltip2, {
+  const age = isDefined3(epoch) ? timeAgo(epoch) : void 0;
+  return /* @__PURE__ */ React14.createElement(TableCell2, props, /* @__PURE__ */ React14.createElement(Tooltip2, {
     title: `Block Epoch: ${dateTime}`
-  }, /* @__PURE__ */ React13.createElement(Typography4, {
+  }, /* @__PURE__ */ React14.createElement(Typography4, {
     component: "span",
     variant: "body1"
-  }, age ?? /* @__PURE__ */ React13.createElement(Skeleton2, {
+  }, age ?? /* @__PURE__ */ React14.createElement(Skeleton2, {
     width: 115
   }))));
 }, "BlockEpochTableCellInner");
@@ -764,12 +767,12 @@ var BlockEpochTableCellInner = /* @__PURE__ */ __name(({ epoch, linked, ...props
 import { Link as Link2, TableCell as TableCell3, Tooltip as Tooltip3 } from "@mui/material";
 import { isHash as isHash2 } from "@xylabs/sdk-js";
 import { usePayloadRootHash } from "@xyo-network/react-shared";
-import React15, { useState as useState5 } from "react";
+import React16, { useState as useState5 } from "react";
 
 // src/components/FeatureNotAvailable.tsx
 import { Button as Button2, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
-import React14 from "react";
-var FeatureNotAvailable = /* @__PURE__ */ __name(({ featureName = "Feature", ...props }) => /* @__PURE__ */ React14.createElement(Dialog, props, /* @__PURE__ */ React14.createElement(DialogTitle, null, `${featureName} Not Available`), /* @__PURE__ */ React14.createElement(DialogContent, null, "This feature is not currently available.  Either you do not have access to it or it is currently undergoing maintenance."), /* @__PURE__ */ React14.createElement(DialogActions, null, /* @__PURE__ */ React14.createElement(Button2, {
+import React15 from "react";
+var FeatureNotAvailable = /* @__PURE__ */ __name(({ featureName = "Feature", ...props }) => /* @__PURE__ */ React15.createElement(Dialog, props, /* @__PURE__ */ React15.createElement(DialogTitle, null, `${featureName} Not Available`), /* @__PURE__ */ React15.createElement(DialogContent, null, "This feature is not currently available.  Either you do not have access to it or it is currently undergoing maintenance."), /* @__PURE__ */ React15.createElement(DialogActions, null, /* @__PURE__ */ React15.createElement(Button2, {
   onClick: /* @__PURE__ */ __name((e) => props.onClose?.(e, "backdropClick"), "onClick")
 }, "Close"))), "FeatureNotAvailable");
 
@@ -802,17 +805,17 @@ var BlockHashTableCell = /* @__PURE__ */ __name(({ block, notAvailableDialog, li
   const [ref, handleClick] = useLinkedBlockItem("block-hash", hash);
   const [notAvailable, setNotAvailable] = useState5(false);
   const shortenedHash = isHash2(hash) ? `${hash.slice(0, 4)}...${hash.slice(-5, -1)}` : void 0;
-  return /* @__PURE__ */ React15.createElement(TableCell3, {
+  return /* @__PURE__ */ React16.createElement(TableCell3, {
     ref,
     ...props
-  }, /* @__PURE__ */ React15.createElement(Tooltip3, {
+  }, /* @__PURE__ */ React16.createElement(Tooltip3, {
     title: `Block Hash: ${hash}`
-  }, linked ? /* @__PURE__ */ React15.createElement(Link2, {
+  }, linked ? /* @__PURE__ */ React16.createElement(Link2, {
     sx: {
       cursor: "pointer"
     },
     onClick: linked ? handleClick : () => setNotAvailable(true)
-  }, shortenedHash ?? /* @__PURE__ */ React15.createElement(ChipSkeleton, null)) : /* @__PURE__ */ React15.createElement("span", null, shortenedHash ?? /* @__PURE__ */ React15.createElement(ChipSkeleton, null))), notAvailableDialog && notAvailable ? /* @__PURE__ */ React15.createElement(FeatureNotAvailable, {
+  }, shortenedHash ?? /* @__PURE__ */ React16.createElement(ChipSkeleton, null)) : /* @__PURE__ */ React16.createElement("span", null, shortenedHash ?? /* @__PURE__ */ React16.createElement(ChipSkeleton, null))), notAvailableDialog && notAvailable ? /* @__PURE__ */ React16.createElement(FeatureNotAvailable, {
     featureName: "Block Details",
     open: notAvailable,
     onClick: /* @__PURE__ */ __name(() => setNotAvailable(false), "onClick")
@@ -826,31 +829,31 @@ import { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
 import { ellipsize, isHash as isHash3 } from "@xylabs/sdk-js";
 import { JsonViewerEx } from "@xyo-network/react-payload-raw-info";
 import { usePayloadRootHash as usePayloadRootHash2 } from "@xyo-network/react-shared";
-import React16, { useState as useState6 } from "react";
+import React17, { useState as useState6 } from "react";
 var BlockJsonViewTableCell = /* @__PURE__ */ __name(({ block, ...props }) => {
   const [open, setOpen] = useState6(false);
   const onClose = /* @__PURE__ */ __name(() => setOpen(false), "onClose");
   const hash = usePayloadRootHash2(block?.[0]);
   const title = isHash3(hash) ? `JSON for ${ellipsize(hash, 5)}` : "JSON";
-  return /* @__PURE__ */ React16.createElement(TableCell4, props, /* @__PURE__ */ React16.createElement(FlexRow3, {
+  return /* @__PURE__ */ React17.createElement(TableCell4, props, /* @__PURE__ */ React17.createElement(FlexRow3, {
     onClick: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onClick"),
     sx: {
       width: "100%"
     }
-  }, /* @__PURE__ */ React16.createElement(IconButton2, {
+  }, /* @__PURE__ */ React17.createElement(IconButton2, {
     onClick: /* @__PURE__ */ __name(() => setOpen(true), "onClick")
-  }, /* @__PURE__ */ React16.createElement(DataObject, null)), /* @__PURE__ */ React16.createElement(Dialog2, {
+  }, /* @__PURE__ */ React17.createElement(DataObject, null)), /* @__PURE__ */ React17.createElement(Dialog2, {
     open,
     onClose
-  }, /* @__PURE__ */ React16.createElement(DialogTitle2, null, title), /* @__PURE__ */ React16.createElement(DialogContent2, null, /* @__PURE__ */ React16.createElement(JsonViewerEx, {
+  }, /* @__PURE__ */ React17.createElement(DialogTitle2, null, title), /* @__PURE__ */ React17.createElement(DialogContent2, null, /* @__PURE__ */ React17.createElement(JsonViewerEx, {
     value: block
-  })), /* @__PURE__ */ React16.createElement(DialogActions2, {
+  })), /* @__PURE__ */ React17.createElement(DialogActions2, {
     sx: {
       display: "flex",
       flexDirection: "row",
       justifyContent: "end"
     }
-  }, /* @__PURE__ */ React16.createElement(Button3, {
+  }, /* @__PURE__ */ React17.createElement(Button3, {
     variant: "contained",
     onClick: onClose
   }, "Close")))));
@@ -859,7 +862,7 @@ var BlockJsonViewTableCell = /* @__PURE__ */ __name(({ block, ...props }) => {
 // src/components/block/table/cell/PayloadCounts.tsx
 import { Error as Error2 } from "@mui/icons-material";
 import { Link as Link3, TableCell as TableCell5, Tooltip as Tooltip4 } from "@mui/material";
-import React17 from "react";
+import React18 from "react";
 var BlockPayloadCountsTableCell = /* @__PURE__ */ __name(({ block, linked, ...props }) => {
   const [publicPayloads, privatePayloads, error] = usePayloadCountsFromBlock(block);
   const data = block && privatePayloads !== void 0 && publicPayloads !== void 0 ? {
@@ -869,32 +872,32 @@ var BlockPayloadCountsTableCell = /* @__PURE__ */ __name(({ block, linked, ...pr
   } : void 0;
   const payloadCount = (publicPayloads ?? 0) + (privatePayloads ?? 0);
   const [ref, handleClick] = useLinkedBlockItem("payload-counts", data);
-  return /* @__PURE__ */ React17.createElement(TableCell5, {
+  return /* @__PURE__ */ React18.createElement(TableCell5, {
     ref,
     ...props
-  }, /* @__PURE__ */ React17.createElement("span", null, error ? /* @__PURE__ */ React17.createElement(Tooltip4, {
+  }, /* @__PURE__ */ React18.createElement("span", null, error ? /* @__PURE__ */ React18.createElement(Tooltip4, {
     title: error.message
-  }, /* @__PURE__ */ React17.createElement(Error2, {
+  }, /* @__PURE__ */ React18.createElement(Error2, {
     color: "error"
-  })) : null, linked ? /* @__PURE__ */ React17.createElement(Tooltip4, {
+  })) : null, linked ? /* @__PURE__ */ React18.createElement(Tooltip4, {
     title: `Public Payloads: ${publicPayloads ?? "--"} Private Payloads: ${privatePayloads ?? "--"}`
-  }, /* @__PURE__ */ React17.createElement(Link3, {
+  }, /* @__PURE__ */ React18.createElement(Link3, {
     onClick: handleClick,
     sx: {
       cursor: "pointer"
     }
-  }, payloadCount)) : /* @__PURE__ */ React17.createElement(Tooltip4, {
+  }, payloadCount)) : /* @__PURE__ */ React18.createElement(Tooltip4, {
     title: `Public Payloads: ${publicPayloads ?? "--"} Private Payloads: ${privatePayloads ?? "--"}`
-  }, /* @__PURE__ */ React17.createElement("span", null, payloadCount))));
+  }, /* @__PURE__ */ React18.createElement("span", null, payloadCount))));
 }, "BlockPayloadCountsTableCell");
 
 // src/components/block/table/cell/Producer.tsx
 import { TableCell as TableCell6, Tooltip as Tooltip5 } from "@mui/material";
-import React18, { useState as useState7 } from "react";
+import React19, { useState as useState7 } from "react";
 var BlockProducerTableCell = /* @__PURE__ */ __name(({ block, linked, notAvailableDialog, producerChipProps, ...props }) => {
   const [ref, handleClick] = useLinkedBlockItem("block-producer", JSON.stringify(block));
   const producer = useBlockProducer(block);
-  return /* @__PURE__ */ React18.createElement(BlockProducerTableCellInner, {
+  return /* @__PURE__ */ React19.createElement(BlockProducerTableCellInner, {
     address: producer,
     handleClick,
     linked,
@@ -906,9 +909,9 @@ var BlockProducerTableCell = /* @__PURE__ */ __name(({ block, linked, notAvailab
 }, "BlockProducerTableCell");
 var BlockProducerTableCellInner = /* @__PURE__ */ __name(({ address, handleClick, linked, notAvailableDialog, producerChipProps, ...props }) => {
   const [notAvailable, setNotAvailable] = useState7(false);
-  return /* @__PURE__ */ React18.createElement(TableCell6, props, /* @__PURE__ */ React18.createElement(Tooltip5, {
+  return /* @__PURE__ */ React19.createElement(TableCell6, props, /* @__PURE__ */ React19.createElement(Tooltip5, {
     title: `Block Producer: ${address}`
-  }, /* @__PURE__ */ React18.createElement(BlockAddressChip, {
+  }, /* @__PURE__ */ React19.createElement(BlockAddressChip, {
     sx: {
       cursor: "pointer"
     },
@@ -916,7 +919,7 @@ var BlockProducerTableCellInner = /* @__PURE__ */ __name(({ address, handleClick
     address,
     toolTipTitle: `Block Producer: ${address}`,
     ...producerChipProps
-  })), notAvailableDialog && notAvailable ? /* @__PURE__ */ React18.createElement(FeatureNotAvailable, {
+  })), notAvailableDialog && notAvailable ? /* @__PURE__ */ React19.createElement(FeatureNotAvailable, {
     featureName: "Producer Details",
     open: notAvailable,
     onClick: /* @__PURE__ */ __name(() => setNotAvailable(false), "onClick")
@@ -926,10 +929,10 @@ var BlockProducerTableCellInner = /* @__PURE__ */ __name(({ address, handleClick
 // src/components/block/table/cell/TransactionCount.tsx
 import { Error as Error3 } from "@mui/icons-material";
 import { Link as Link4, TableCell as TableCell7, Tooltip as Tooltip6 } from "@mui/material";
-import React19, { useMemo as useMemo6 } from "react";
+import React20, { useMemo as useMemo5 } from "react";
 var BlockTransactionCountTableCell = /* @__PURE__ */ __name(({ block, linked, ...props }) => {
   const [transactions, error] = useTxsFromBlock(block);
-  const txHashes = useMemo6(() => transactions?.map(([, hash]) => hash), [
+  const txHashes = useMemo5(() => transactions?.map(([, hash]) => hash), [
     transactions
   ]);
   const data = block && transactions !== void 0 ? {
@@ -937,14 +940,14 @@ var BlockTransactionCountTableCell = /* @__PURE__ */ __name(({ block, linked, ..
     block: block[0]._hash
   } : void 0;
   const [ref, handleClick] = useLinkedBlockItem("transaction-count", data);
-  return /* @__PURE__ */ React19.createElement(TableCell7, {
+  return /* @__PURE__ */ React20.createElement(TableCell7, {
     ref,
     ...props
-  }, /* @__PURE__ */ React19.createElement("span", null, error ? /* @__PURE__ */ React19.createElement(Tooltip6, {
+  }, /* @__PURE__ */ React20.createElement("span", null, error ? /* @__PURE__ */ React20.createElement(Tooltip6, {
     title: error.message
-  }, /* @__PURE__ */ React19.createElement(Error3, {
+  }, /* @__PURE__ */ React20.createElement(Error3, {
     color: "error"
-  })) : null, linked ? /* @__PURE__ */ React19.createElement(Link4, {
+  })) : null, linked ? /* @__PURE__ */ React20.createElement(Link4, {
     onClick: handleClick,
     sx: {
       cursor: "pointer"
@@ -957,17 +960,17 @@ import { CheckCircleOutlineRounded } from "@mui/icons-material";
 import { TableCell as TableCell8 } from "@mui/material";
 import { FlexRow as FlexRow4 } from "@xylabs/react-flexbox";
 import { BWVerification as BWVerification2 } from "@xyo-network/react-boundwitness-plugin";
-import React20 from "react";
+import React21 from "react";
 var BlockVerificationTableCell = /* @__PURE__ */ __name(({ block, linked, deepValidation, ...props }) => {
-  return /* @__PURE__ */ React20.createElement(TableCell8, props, /* @__PURE__ */ React20.createElement(FlexRow4, {
+  return /* @__PURE__ */ React21.createElement(TableCell8, props, /* @__PURE__ */ React21.createElement(FlexRow4, {
     onClick: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onClick"),
     sx: {
       width: "100%"
     }
-  }, deepValidation ? /* @__PURE__ */ React20.createElement(BWVerification2, {
+  }, deepValidation ? /* @__PURE__ */ React21.createElement(BWVerification2, {
     iconColors: true,
     boundwitness: block?.[0]
-  }) : /* @__PURE__ */ React20.createElement(CheckCircleOutlineRounded, {
+  }) : /* @__PURE__ */ React21.createElement(CheckCircleOutlineRounded, {
     color: "success"
   })));
 }, "BlockVerificationTableCell");
@@ -975,57 +978,57 @@ var BlockVerificationTableCell = /* @__PURE__ */ __name(({ block, linked, deepVa
 // 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 { InfoOutline } from "@mui/icons-material";
 import { TableCell as TableCell9, TableHead, TableRow, Tooltip as Tooltip7, Typography as Typography5 } from "@mui/material";
 import { FlexRow as FlexRow5 } from "@xylabs/react-flexbox";
-import React21 from "react";
+import React22 from "react";
 var ToolTipTableCell = /* @__PURE__ */ __name(({ children, align, title, ...props }) => {
-  return /* @__PURE__ */ React21.createElement(TableCell9, {
+  return /* @__PURE__ */ React22.createElement(TableCell9, {
     title,
     ...props
-  }, /* @__PURE__ */ React21.createElement(FlexRow5, {
+  }, /* @__PURE__ */ React22.createElement(FlexRow5, {
     justifyContent: align
-  }, /* @__PURE__ */ React21.createElement(Typography5, {
+  }, /* @__PURE__ */ React22.createElement(Typography5, {
     variant: "body2"
-  }, children), "\xA0", /* @__PURE__ */ React21.createElement(Tooltip7, {
+  }, children), "\xA0", /* @__PURE__ */ React22.createElement(Tooltip7, {
     title
-  }, /* @__PURE__ */ React21.createElement(InfoOutline, {
+  }, /* @__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(ToolTipTableCell, {
+  return /* @__PURE__ */ React22.createElement(TableHead, null, /* @__PURE__ */ React22.createElement(TableRow, null, /* @__PURE__ */ React22.createElement(ToolTipTableCell, {
     align: "left",
     title: "The block number that is included in the block"
-  }, "Block"), /* @__PURE__ */ React21.createElement(ToolTipTableCell, {
+  }, "Block"), /* @__PURE__ */ React22.createElement(ToolTipTableCell, {
     title: "The hash of the block",
     sx: {
       width: "20%"
     }
-  }, "Hash"), /* @__PURE__ */ React21.createElement(ToolTipTableCell, {
+  }, "Hash"), /* @__PURE__ */ React22.createElement(ToolTipTableCell, {
     title: "The epoch of the block",
     sx: {
       width: "20%"
     }
-  }, "Epoch"), /* @__PURE__ */ React21.createElement(ToolTipTableCell, {
+  }, "Epoch"), /* @__PURE__ */ React22.createElement(ToolTipTableCell, {
     align: "left",
     title: "The address of the block producer that produced the block",
     sx: {
       width: "20%"
     }
-  }, "Block Producer"), /* @__PURE__ */ React21.createElement(ToolTipTableCell, {
+  }, "Block Producer"), /* @__PURE__ */ React22.createElement(ToolTipTableCell, {
     align: "left",
     title: "Count of transactions that are included in the block"
-  }, "Transactions"), /* @__PURE__ */ React21.createElement(ToolTipTableCell, {
+  }, "Transactions"), /* @__PURE__ */ React22.createElement(ToolTipTableCell, {
     align: "left",
     title: "Count of public and private payload counts for the block"
-  }, "Payloads"), /* @__PURE__ */ React21.createElement(ToolTipTableCell, {
+  }, "Payloads"), /* @__PURE__ */ React22.createElement(ToolTipTableCell, {
     align: "center",
     title: "The result of the local validation check for the block"
-  }, "Valid"), /* @__PURE__ */ React21.createElement(ToolTipTableCell, {
+  }, "Valid"), /* @__PURE__ */ React22.createElement(ToolTipTableCell, {
     align: "center",
     title: "Link to display the raw JSON of the block"
   }, "JSON")));
@@ -1033,10 +1036,10 @@ var BlockchainTableHead = /* @__PURE__ */ __name(() => {
 
 // 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";
 
@@ -1044,16 +1047,16 @@ BlockchainTableEx.displayName = "BlockchainTableEx";
 import { TableRow as TableRow2, useTheme } from "@mui/material";
 import { alphaCss } from "@xylabs/react-theme";
 import { usePayloadRootHash as usePayloadRootHash3 } from "@xyo-network/react-shared";
-import React23, { useMemo as useMemo7 } from "react";
+import React24, { useMemo as useMemo6 } from "react";
 var BlockChainTableRow = /* @__PURE__ */ __name(({ block, deepValidation, defaultExpanded, linked, sx, ...props }) => {
-  const linkedTableCellProps = useMemo7(() => ({
+  const linkedTableCellProps = useMemo6(() => ({
     block,
     linked
   }), [
     block,
     linked
   ]);
-  const defaultTableCellProps = useMemo7(() => ({
+  const defaultTableCellProps = useMemo6(() => ({
     block
   }), [
     block
@@ -1061,7 +1064,7 @@ var BlockChainTableRow = /* @__PURE__ */ __name(({ block, deepValidation, defaul
   const hash = usePayloadRootHash3(block?.[0]);
   const [ref, handleClick] = useLinkedBlockItem("block-hash", hash);
   const theme = useTheme();
-  return /* @__PURE__ */ React23.createElement(TableRow2, {
+  return /* @__PURE__ */ React24.createElement(TableRow2, {
     onClick: linked ? handleClick : void 0,
     ref,
     sx: {
@@ -1073,47 +1076,47 @@ var BlockChainTableRow = /* @__PURE__ */ __name(({ block, deepValidation, defaul
       ...sx
     },
     ...props
-  }, /* @__PURE__ */ React23.createElement(BlockNumberTableCell, {
+  }, /* @__PURE__ */ React24.createElement(BlockNumberTableCell, {
     align: "left",
     ...linkedTableCellProps
-  }), /* @__PURE__ */ React23.createElement(BlockHashTableCell, {
+  }), /* @__PURE__ */ React24.createElement(BlockHashTableCell, {
     align: "left",
     ...linkedTableCellProps
-  }), /* @__PURE__ */ React23.createElement(BlockEpochTableCell, {
+  }), /* @__PURE__ */ React24.createElement(BlockEpochTableCell, {
     align: "left",
     ...linkedTableCellProps
-  }), /* @__PURE__ */ React23.createElement(BlockProducerTableCell, {
+  }), /* @__PURE__ */ React24.createElement(BlockProducerTableCell, {
     align: "left",
     ...linkedTableCellProps
-  }), /* @__PURE__ */ React23.createElement(BlockTransactionCountTableCell, {
+  }), /* @__PURE__ */ React24.createElement(BlockTransactionCountTableCell, {
     align: "left",
     ...linkedTableCellProps
-  }), /* @__PURE__ */ React23.createElement(BlockPayloadCountsTableCell, {
+  }), /* @__PURE__ */ React24.createElement(BlockPayloadCountsTableCell, {
     align: "left",
     ...linkedTableCellProps
-  }), /* @__PURE__ */ React23.createElement(BlockVerificationTableCell, {
+  }), /* @__PURE__ */ React24.createElement(BlockVerificationTableCell, {
     deepValidation,
     ...defaultTableCellProps
-  }), /* @__PURE__ */ React23.createElement(BlockJsonViewTableCell, defaultTableCellProps));
+  }), /* @__PURE__ */ React24.createElement(BlockJsonViewTableCell, defaultTableCellProps));
 }, "BlockChainTableRow");
 
 // src/components/account/table/cell/AddressTableCell.tsx
 import { TableCell as TableCell10, Tooltip as Tooltip8 } from "@mui/material";
 import { useEvent as useEvent4 } from "@xyo-network/react-event";
-import React24 from "react";
+import React25 from "react";
 var AddressTableCell = /* @__PURE__ */ __name(({ address, linked, toolTipTitle, sx, ...props }) => {
   const [ref, dispatch] = useEvent4();
   const handleClick = /* @__PURE__ */ __name(() => dispatch("address", "click", address), "handleClick");
-  return /* @__PURE__ */ React24.createElement(TableCell10, {
+  return /* @__PURE__ */ React25.createElement(TableCell10, {
     ref,
     sx: {
       cursor: linked ? "pointer" : "default",
       ...sx
     },
     ...props
-  }, /* @__PURE__ */ React24.createElement(Tooltip8, {
+  }, /* @__PURE__ */ React25.createElement(Tooltip8, {
     title: toolTipTitle
-  }, /* @__PURE__ */ React24.createElement(BlockAddressChip, {
+  }, /* @__PURE__ */ React25.createElement(BlockAddressChip, {
     address,
     onClick: handleClick
   })));
@@ -1121,22 +1124,22 @@ var AddressTableCell = /* @__PURE__ */ __name(({ address, linked, toolTipTitle,
 
 // src/components/account/table/cell/HashTableCell.tsx
 import { Link as Link5, TableCell as TableCell11, Tooltip as Tooltip9, Typography as Typography6 } from "@mui/material";
-import { ellipsize as ellipsize2, isDefined as isDefined3 } from "@xylabs/sdk-js";
+import { ellipsize as ellipsize2, isDefined as isDefined4 } from "@xylabs/sdk-js";
 import { useEvent as useEvent5 } from "@xyo-network/react-event";
-import React25 from "react";
+import React26 from "react";
 var HashTableCell = /* @__PURE__ */ __name(({ hash, linked, toolTipTitle, sx, ...props }) => {
   const [ref, dispatch] = useEvent5();
   const handleClick = /* @__PURE__ */ __name(() => dispatch("tx-hash", "click", hash), "handleClick");
-  const shortenedHash = isDefined3(hash) ? ellipsize2(hash, 6) : "N/A";
-  return /* @__PURE__ */ React25.createElement(TableCell11, {
+  const shortenedHash = isDefined4(hash) ? ellipsize2(hash, 6) : "N/A";
+  return /* @__PURE__ */ React26.createElement(TableCell11, {
     ref,
     ...props
-  }, hash ? /* @__PURE__ */ React25.createElement(Tooltip9, {
+  }, hash ? /* @__PURE__ */ React26.createElement(Tooltip9, {
     title: toolTipTitle
-  }, /* @__PURE__ */ React25.createElement(Typography6, {
+  }, /* @__PURE__ */ React26.createElement(Typography6, {
     component: "span",
     variant: "body1"
-  }, linked ? /* @__PURE__ */ React25.createElement(Link5, {
+  }, linked ? /* @__PURE__ */ React26.createElement(Link5, {
     onClick: handleClick,
     sx: {
       cursor: "pointer"
@@ -1146,15 +1149,15 @@ var HashTableCell = /* @__PURE__ */ __name(({ hash, linked, toolTipTitle, sx, ..
 
 // src/components/account/table/RawAmountTableCell.tsx
 import { Link as Link6, TableCell as TableCell12, Tooltip as Tooltip10 } from "@mui/material";
-import { isDefined as isDefined4, toHex as toHex2 } from "@xylabs/sdk-js";
+import { isDefined as isDefined5, toHex as toHex2 } from "@xylabs/sdk-js";
 import { useEvent as useEvent6 } from "@xyo-network/react-event";
-import { XL1Amount as XL1Amount2 } from "@xyo-network/xl1-protocol";
-import React26 from "react";
+import { XL1Amount as XL1Amount2 } from "@xyo-network/xl1-sdk";
+import React27 from "react";
 var RawAmountTableCell = /* @__PURE__ */ __name(({ amount, linked, sx, type, ...props }) => {
   const [ref, dispatch] = useEvent6();
-  const handleClick = /* @__PURE__ */ __name(() => dispatch("amount", "click", isDefined4(amount) ? toHex2(amount) : ""), "handleClick");
+  const handleClick = /* @__PURE__ */ __name(() => dispatch("amount", "click", isDefined5(amount) ? toHex2(amount) : ""), "handleClick");
   const formatAmount = /* @__PURE__ */ __name((amount2) => {
-    if (!isDefined4(amount2)) {
+    if (!isDefined5(amount2)) {
       return "N/A";
     }
     const xl1Amount = new XL1Amount2(amount2);
@@ -1166,52 +1169,52 @@ var RawAmountTableCell = /* @__PURE__ */ __name(({ amount, linked, sx, type, ...
       locale: navigator.language
     });
   }, "formatAmount");
-  return /* @__PURE__ */ React26.createElement(TableCell12, {
+  return /* @__PURE__ */ React27.createElement(TableCell12, {
     ref,
     ...props
-  }, /* @__PURE__ */ React26.createElement(Tooltip10, {
+  }, /* @__PURE__ */ React27.createElement(Tooltip10, {
     title: `Raw Amount: ${amount}`
-  }, linked ? /* @__PURE__ */ React26.createElement(Link6, {
+  }, linked ? /* @__PURE__ */ React27.createElement(Link6, {
     onClick: handleClick,
     sx: {
       cursor: "pointer"
     }
-  }, type === "send" ? "-" : "", formatAmount(amount)) : /* @__PURE__ */ React26.createElement("span", null, type === "send" ? "-" : "", formatAmount(amount))));
+  }, type === "send" ? "-" : "", formatAmount(amount)) : /* @__PURE__ */ React27.createElement("span", null, type === "send" ? "-" : "", formatAmount(amount))));
 }, "RawAmountTableCell");
 
 // src/components/account/table/BalanceHistoryTableRow.tsx
 var BalanceHistoryTableRow = /* @__PURE__ */ __name(({ linked, row, ...props }) => {
   const { amount, blockNumber, debug, from, key, timestamp, to, type, txHash } = row ?? {};
-  const linkedTableCallProps = useMemo8(() => ({
+  const linkedTableCallProps = useMemo7(() => ({
     linked
   }), [
     linked
   ]);
-  return /* @__PURE__ */ React27.createElement(TableRow3, {
+  return /* @__PURE__ */ React28.createElement(TableRow3, {
     key,
     ...props
-  }, /* @__PURE__ */ React27.createElement(HashTableCell, {
+  }, /* @__PURE__ */ React28.createElement(HashTableCell, {
     hash: txHash,
     toolTipTitle: `Transaction Hash: ${txHash}`,
     ...linkedTableCallProps
-  }), /* @__PURE__ */ React27.createElement(BlockNumberTableCellInner, {
+  }), /* @__PURE__ */ React28.createElement(BlockNumberTableCellInner, {
     blockNumber,
     ...linkedTableCallProps
-  }), /* @__PURE__ */ React27.createElement(BlockEpochTableCellInner, {
+  }), /* @__PURE__ */ React28.createElement(BlockEpochTableCellInner, {
     epoch: timestamp,
     ...linkedTableCallProps
-  }), /* @__PURE__ */ React27.createElement(AddressTableCell, {
+  }), /* @__PURE__ */ React28.createElement(AddressTableCell, {
     address: from,
     toolTipTitle: `From Address: ${from}`,
     ...linkedTableCallProps
-  }), /* @__PURE__ */ React27.createElement(AddressTableCell, {
+  }), /* @__PURE__ */ React28.createElement(AddressTableCell, {
     address: to,
     toolTipTitle: `To Address: ${to}`,
     ...linkedTableCallProps
-  }), /* @__PURE__ */ React27.createElement(RawAmountTableCell, {
+  }), /* @__PURE__ */ React28.createElement(RawAmountTableCell, {
     amount,
     type
-  }), /* @__PURE__ */ React27.createElement(TableCell13, null, /* @__PURE__ */ React27.createElement(RawInfoIconButton, {
+  }), /* @__PURE__ */ React28.createElement(TableCell13, null, /* @__PURE__ */ React28.createElement(RawInfoIconButton, {
     rawValue: debug
   })));
 }, "BalanceHistoryTableRow");
@@ -1229,9 +1232,9 @@ var TableHeadingLabels = [
 
 // src/components/account/table/BalanceHistoryTableEx.tsx
 var AccountBalanceHistoryTableEx = /* @__PURE__ */ __name(({ history, linked, ...props }) => {
-  return isDefined5(history) ? /* @__PURE__ */ React28.createElement(TableEx2, props, /* @__PURE__ */ React28.createElement(TableHead2, null, /* @__PURE__ */ React28.createElement(TableRow4, null, TableHeadingLabels.map((heading) => /* @__PURE__ */ React28.createElement(TableCell14, {
+  return isDefined6(history) ? /* @__PURE__ */ React29.createElement(TableEx2, props, /* @__PURE__ */ React29.createElement(TableHead2, null, /* @__PURE__ */ React29.createElement(TableRow4, null, TableHeadingLabels.map((heading) => /* @__PURE__ */ React29.createElement(TableCell14, {
     key: heading
-  }, heading)))), /* @__PURE__ */ React28.createElement(TableBody2, null, history?.map((row) => /* @__PURE__ */ React28.createElement(BalanceHistoryTableRow, {
+  }, heading)))), /* @__PURE__ */ React29.createElement(TableBody2, null, history?.map((row) => /* @__PURE__ */ React29.createElement(BalanceHistoryTableRow, {
     key: row.key,
     linked,
     row
@@ -1248,46 +1251,41 @@ var AccountBalanceHistoryFlexBox = /* @__PURE__ */ __name(({ address, refresh, v
     ],
     history: void 0
   };
-  return isDefined6(history) && isDefined6(address) ? /* @__PURE__ */ React29.createElement(FlexCol3, props, /* @__PURE__ */ React29.createElement(ErrorRender3, {
+  return isDefined7(history) && isDefined7(address) ? /* @__PURE__ */ React30.createElement(FlexCol3, props, /* @__PURE__ */ React30.createElement(ErrorRender3, {
     error,
     scope: "AccountBalanceHistoryTable"
-  }), /* @__PURE__ */ React29.createElement(Typography7, {
+  }), /* @__PURE__ */ React30.createElement(Typography7, {
     variant: "h6",
     gutterBottom: true
-  }, formatBalanceMagnitude(balance)), truncated ? /* @__PURE__ */ React29.createElement(Typography7, {
+  }, formatBalanceMagnitude(balance)), truncated ? /* @__PURE__ */ React30.createElement(Typography7, {
     variant: "caption",
     gutterBottom: true
-  }, "Ranged Balance from", " ", history.at(-1).blockNumber, " ", "-", " ", history[0].blockNumber) : null, /* @__PURE__ */ React29.createElement(AccountBalanceHistoryTableEx, {
+  }, "Ranged Balance from", " ", history.at(-1).blockNumber, " ", "-", " ", history[0].blockNumber) : null, /* @__PURE__ */ React30.createElement(AccountBalanceHistoryTableEx, {
     history
   })) : null;
 }, "AccountBalanceHistoryFlexBox");
 
 // src/components/account/hooks/usePagedAccountBalanceHistory.ts
-import { isDefined as isDefined7 } from "@xylabs/sdk-js";
+import { isDefined as isDefined8 } from "@xylabs/sdk-js";
 import { useAccountBalanceHistory as useAccountBalanceHistory2 } from "@xyo-network/react-chain-provider";
-import { useCallback, useMemo as useMemo9, useState as useState8 } from "react";
+import { useCallback, useState as useState8 } from "react";
 var usePagedAccountBalanceHistory = /* @__PURE__ */ __name((address, viewer, maxPage = 1) => {
   const [updatedBlockRange, setUpdatedBlockRange] = useState8();
   const [pagedHistory, setPagedHistory] = useState8();
   const [results, error, loading] = useAccountBalanceHistory2(address, viewer, maxPage, updatedBlockRange);
   const { history, truncated } = results || {};
-  useMemo9(() => {
-    if (isDefined7(history)) {
-      setPagedHistory((pagedHistory2) => {
-        return [
-          ...pagedHistory2 ?? [],
-          ...history
-        ];
-      });
-    }
-  }, [
-    history
-  ]);
-  const firstBlock = isDefined7(history) ? history.at(0)?.blockNumber : void 0;
-  const lastBlock = isDefined7(history) ? history.at(-1)?.blockNumber : void 0;
-  const historyComplete = isDefined7(history) && history.length === 0;
+  const [previousHistory, setPreviousHistory] = useState8(history);
+  if (isDefined8(history) && history !== previousHistory) {
+    setPagedHistory([
+      ...pagedHistory ?? [],
+      ...history
+    ]);
+    setPreviousHistory(history);
+  }
+  const lastBlock = isDefined8(history) ? history.at(-1)?.blockNumber : void 0;
+  const historyComplete = isDefined8(history) && history.length === 0;
   const updateRange = useCallback(() => {
-    if (isDefined7(lastBlock) && lastBlock > 0 && truncated) {
+    if (isDefined8(lastBlock) && lastBlock > 0 && truncated) {
       const newEndBlock = lastBlock - 1;
       setUpdatedBlockRange([
         0,
@@ -1295,7 +1293,6 @@ var usePagedAccountBalanceHistory = /* @__PURE__ */ __name((address, viewer, max
       ]);
     }
   }, [
-    firstBlock,
     lastBlock,
     truncated
   ]);
@@ -1312,29 +1309,29 @@ var usePagedAccountBalanceHistory = /* @__PURE__ */ __name((address, viewer, max
 import { Autorenew, Pause } from "@mui/icons-material";
 import { Alert as Alert3, AlertTitle as AlertTitle2, Grow, Icon as Icon2, IconButton as IconButton4, Tooltip as Tooltip11 } from "@mui/material";
 import { FlexRow as FlexRow6 } from "@xylabs/react-flexbox";
-import React34, { memo } from "react";
+import React35, { 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 React32, { useState as useState9 } from "react";
+import React33, { useState as useState9 } from "react";
 
 // src/components/chain/stats/producer/ProducerFlexbox.tsx
 import { ListItem, styled, Typography as Typography8 } from "@mui/material";
 import { ErrorRender as ErrorRender4 } from "@xylabs/react-error";
 import { FlexCol as FlexCol4 } from "@xylabs/react-flexbox";
 import { isChainSummaryProducers } from "@xyo-network/chain-analyze";
-import React31, { useMemo as useMemo10 } from "react";
+import React32, { useMemo as useMemo8 } from "react";
 
 // src/components/chain/stats/producer/Table.tsx
 import { Table, TableBody as TableBody3, TableCell as TableCell15, TableHead as TableHead3, TableRow as TableRow5, useTheme as useTheme2 } from "@mui/material";
 import { BlockiesAvatar as BlockiesAvatar2 } from "@xyo-network/react-chain-blockies";
-import React30 from "react";
+import React31 from "react";
 var ChainProducerStatsTable = /* @__PURE__ */ __name(({ producers, ...props }) => {
   const theme = useTheme2();
-  return /* @__PURE__ */ React30.createElement(Table, props, /* @__PURE__ */ React30.createElement(TableHead3, null, /* @__PURE__ */ React30.createElement(TableRow5, null, /* @__PURE__ */ React30.createElement(TableCell15, null, "Address"), /* @__PURE__ */ React30.createElement(TableCell15, null, "Blocks Produced"), /* @__PURE__ */ React30.createElement(TableCell15, null, "Rewards Earned Produced"))), /* @__PURE__ */ React30.createElement(TableBody3, null, producers?.map((producer) => /* @__PURE__ */ React30.createElement(TableRow5, {
+  return /* @__PURE__ */ React31.createElement(Table, props, /* @__PURE__ */ React31.createElement(TableHead3, null, /* @__PURE__ */ React31.createElement(TableRow5, null, /* @__PURE__ */ React31.createElement(TableCell15, null, "Address"), /* @__PURE__ */ React31.createElement(TableCell15, null, "Blocks Produced"), /* @__PURE__ */ React31.createElement(TableCell15, null, "Rewards Earned Produced"))), /* @__PURE__ */ React31.createElement(TableBody3, null, producers?.map((producer) => /* @__PURE__ */ React31.createElement(TableRow5, {
     key: producer.address
-  }, /* @__PURE__ */ React30.createElement(TableCell15, null, /* @__PURE__ */ React30.createElement(BlockiesAvatar2, {
+  }, /* @__PURE__ */ React31.createElement(TableCell15, null, /* @__PURE__ */ React31.createElement(BlockiesAvatar2, {
     blockiesOptions: {
       seed: producer.address
     },
@@ -1342,12 +1339,12 @@ var ChainProducerStatsTable = /* @__PURE__ */ __name(({ producers, ...props }) =
       height: theme.spacing(2.75),
       width: theme.spacing(2.75)
     }
-  })), /* @__PURE__ */ React30.createElement(TableCell15, null, producer.blocksProduced.toString()), /* @__PURE__ */ React30.createElement(TableCell15, null, producer.rewardsEarned.toString())))));
+  })), /* @__PURE__ */ React31.createElement(TableCell15, null, producer.blocksProduced.toString()), /* @__PURE__ */ React31.createElement(TableCell15, null, producer.rewardsEarned.toString())))));
 }, "ChainProducerStatsTable");
 
 // src/components/chain/stats/producer/ProducerFlexbox.tsx
 var BlockProducerStatsFlexbox = /* @__PURE__ */ __name(({ payload, ...props }) => {
-  const [producer, producerError] = useMemo10(() => {
+  const [producer, producerError] = useMemo8(() => {
     if (payload) {
       return isChainSummaryProducers(payload) ? [
         payload
@@ -1361,19 +1358,19 @@ var BlockProducerStatsFlexbox = /* @__PURE__ */ __name(({ payload, ...props }) =
   }, [
     payload
   ]);
-  const producersArray = useMemo10(() => Object.values(producer?.producers ?? {}), [
+  const producersArray = useMemo8(() => Object.values(producer?.producers ?? {}), [
     producer
   ]);
-  return /* @__PURE__ */ React31.createElement(FlexCol4, {
+  return /* @__PURE__ */ React32.createElement(FlexCol4, {
     alignItems: "start",
     gap: 1,
     ...props
-  }, /* @__PURE__ */ React31.createElement(ErrorRender4, {
+  }, /* @__PURE__ */ React32.createElement(ErrorRender4, {
     error: producerError,
     scope: "BlockProducerStatsFlexbox"
-  }), /* @__PURE__ */ React31.createElement(Typography8, {
+  }), /* @__PURE__ */ React32.createElement(Typography8, {
     fontSize: "1rem"
-  }, "Block Producers"), /* @__PURE__ */ React31.createElement(ChainProducerStatsTable, {
+  }, "Block Producers"), /* @__PURE__ */ React32.createElement(ChainProducerStatsTable, {
     producers: producersArray
   }));
 }, "BlockProducerStatsFlexbox");
@@ -1385,18 +1382,18 @@ var StyledListItem = styled(ListItem)(() => ({
 // src/components/chain/stats/Dialog.tsx
 var ChainAnalyzerStatsDialog = /* @__PURE__ */ __name((props) => {
   const { analyzers, statsUpdated } = useChainAnalyzersContext();
-  return /* @__PURE__ */ React32.createElement(Dialog3, props, /* @__PURE__ */ React32.createElement(DialogTitle3, null, "Chain Analysis"), /* @__PURE__ */ React32.createElement(DialogContent3, null, statsUpdated > 0 ? Object.entries(analyzers).map(([id2, analyzer]) => /* @__PURE__ */ React32.createElement("div", {
+  return /* @__PURE__ */ React33.createElement(Dialog3, props, /* @__PURE__ */ React33.createElement(DialogTitle3, null, "Chain Analysis"), /* @__PURE__ */ React33.createElement(DialogContent3, null, statsUpdated > 0 ? Object.entries(analyzers).map(([id2, analyzer]) => /* @__PURE__ */ React33.createElement("div", {
     key: id2
-  }, id2 === "producers" ? /* @__PURE__ */ React32.createElement(BlockProducerStatsFlexbox, {
+  }, id2 === "producers" ? /* @__PURE__ */ React33.createElement(BlockProducerStatsFlexbox, {
     payload: analyzer.result()
   }) : null)) : null));
 }, "ChainAnalyzerStatsDialog");
 var ChainAnalyzerStatsDialogFromContext = /* @__PURE__ */ __name((props) => {
   const [open, setOpen] = useState9(false);
   const handleClose = /* @__PURE__ */ __name(() => setOpen(false), "handleClose");
-  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(IconButton3, {
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(IconButton3, {
     onClick: /* @__PURE__ */ __name(() => setOpen(true), "onClick")
-  }, /* @__PURE__ */ React32.createElement(QueryStats, null)), /* @__PURE__ */ React32.createElement(ChainAnalyzerStatsDialog, {
+  }, /* @__PURE__ */ React33.createElement(QueryStats, null)), /* @__PURE__ */ React33.createElement(ChainAnalyzerStatsDialog, {
     onClose: handleClose,
     open,
     ...props
@@ -1405,19 +1402,19 @@ var ChainAnalyzerStatsDialogFromContext = /* @__PURE__ */ __name((props) => {
 
 // src/components/chain/controls/PulseSvgIcon.tsx
 import { createSvgIcon, keyframes, styled as styled2 } from "@mui/material";
-import React33 from "react";
-var PulseSvgIcon = createSvgIcon(/* @__PURE__ */ React33.createElement("svg", {
+import React34 from "react";
+var PulseSvgIcon = createSvgIcon(/* @__PURE__ */ React34.createElement("svg", {
   viewBox: "0 0 80 80",
   version: "1.1",
   xmlns: "http://www.w3.org/2000/svg"
-}, /* @__PURE__ */ React33.createElement("g", {
+}, /* @__PURE__ */ React34.createElement("g", {
   transform: "translate(34,34)"
-}, /* @__PURE__ */ React33.createElement("circle", {
+}, /* @__PURE__ */ React34.createElement("circle", {
   className: "core",
   cx: "0",
   cy: "0",
   r: "6"
-}), /* @__PURE__ */ React33.createElement("circle", {
+}), /* @__PURE__ */ React34.createElement("circle", {
   className: "radar",
   cx: "0",
   cy: "0",
@@ -1481,24 +1478,24 @@ var StyledPulseSvgIcon = styled2(PulseSvgIcon)(({ theme }) => {
 var PollingControlsFlexbox = /* @__PURE__ */ __name(({ blocksBehind, pollingState, setPollingState }) => {
   const paused = pollingState === "paused";
   const running = pollingState === "running";
-  return /* @__PURE__ */ React34.createElement(FlexRow6, {
+  return /* @__PURE__ */ React35.createElement(FlexRow6, {
     justifyContent: "space-between",
     width: "100%"
-  }, /* @__PURE__ */ React34.createElement(FlexRow6, {
+  }, /* @__PURE__ */ React35.createElement(FlexRow6, {
     gap: 2
-  }, running ? /* @__PURE__ */ React34.createElement(IconButton4, {
+  }, running ? /* @__PURE__ */ React35.createElement(IconButton4, {
     onClick: /* @__PURE__ */ __name(() => setPollingState?.("paused"), "onClick"),
     title: "Pause Block Stream"
-  }, /* @__PURE__ */ React34.createElement(Pause, null)) : null, paused ? /* @__PURE__ */ React34.createElement(IconButton4, {
+  }, /* @__PURE__ */ React35.createElement(Pause, null)) : null, paused ? /* @__PURE__ */ React35.createElement(IconButton4, {
     onClick: /* @__PURE__ */ __name(() => setPollingState?.("running"), "onClick"),
     title: "Re-Sync Block Stream"
-  }, /* @__PURE__ */ React34.createElement(Autorenew, null)) : null, /* @__PURE__ */ React34.createElement(ChainAnalyzerStatsDialogFromContext, null)), /* @__PURE__ */ React34.createElement(FlexRow6, {
+  }, /* @__PURE__ */ React35.createElement(Autorenew, null)) : null, /* @__PURE__ */ React35.createElement(ChainAnalyzerStatsDialogFromContext, null)), /* @__PURE__ */ React35.createElement(FlexRow6, {
     gap: 2
-  }, /* @__PURE__ */ React34.createElement(Grow, {
+  }, /* @__PURE__ */ React35.createElement(Grow, {
     in: (blocksBehind ?? 0) > 0
-  }, /* @__PURE__ */ React34.createElement(Tooltip11, {
+  }, /* @__PURE__ */ React35.createElement(Tooltip11, {
     title: "Click to Re-Sync"
-  }, /* @__PURE__ */ React34.createElement(Alert3, {
+  }, /* @__PURE__ */ React35.createElement(Alert3, {
     sx: {
       py: 0,
       px: 1,
@@ -1506,11 +1503,11 @@ var PollingControlsFlexbox = /* @__PURE__ */ __name(({ blocksBehind, pollingStat
     },
     severity: "warning",
     onClick: /* @__PURE__ */ __name(() => setPollingState?.("running"), "onClick")
-  }, /* @__PURE__ */ React34.createElement(AlertTitle2, {
+  }, /* @__PURE__ */ React35.createElement(AlertTitle2, {
     sx: {
       mb: 0
     }
-  }, "Behind:", " ", blocksBehind)))), /* @__PURE__ */ React34.createElement(Icon2, null, /* @__PURE__ */ React34.createElement(StyledPulseSvgIcon, {
+  }, "Behind:", " ", blocksBehind)))), /* @__PURE__ */ React35.createElement(Icon2, null, /* @__PURE__ */ React35.createElement(StyledPulseSvgIcon, {
     className: running ? "" : "paused"
   }))));
 }, "PollingControlsFlexbox");
@@ -1518,12 +1515,12 @@ 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 React35 from "react";
+import React36 from "react";
 var TransactionsDialog = /* @__PURE__ */ __name(({ onClose, ...props }) => {
-  return /* @__PURE__ */ React35.createElement(Dialog4, {
+  return /* @__PURE__ */ React36.createElement(Dialog4, {
     onClose,
     ...props
-  }, /* @__PURE__ */ React35.createElement(DialogContent4, null, "Transactions Dialog"), /* @__PURE__ */ React35.createElement(DialogActions3, null, /* @__PURE__ */ React35.createElement(Button4, {
+  }, /* @__PURE__ */ React36.createElement(DialogContent4, null, "Transactions Dialog"), /* @__PURE__ */ React36.createElement(DialogActions3, null, /* @__PURE__ */ React36.createElement(Button4, {
     variant: "outlined",
     onClick: /* @__PURE__ */ __name((e) => onClose?.(e, "escapeKeyDown"), "onClick")
   }, "Close")));
@@ -1532,40 +1529,42 @@ var TransactionsDialog = /* @__PURE__ */ __name(({ onClose, ...props }) => {
 // src/components/chain/hooks/useOnBlock.ts
 import { useEffect, useRef as useRef2 } from "react";
 var useOnBlock = /* @__PURE__ */ __name((initialHeadNumber, onAddBlock, liveHead, pollingState) => {
-  const blocksWhilePaused = useRef2([]);
-  const lastLiveHead = useRef2(liveHead);
+  const blocksWhilePausedRef = useRef2([]);
+  const lastLiveHeadRef = useRef2(liveHead);
   useEffect(() => {
-    const lastLiveHeadBlock = lastLiveHead.current?.[0];
-    const blocksWhilePausedBlock = lastLiveHead.current?.[0];
+    const lastLiveHeadBlock = lastLiveHeadRef.current?.[0];
+    const blocksWhilePausedBlock = lastLiveHeadRef.current?.[0];
     const liveHeadBlock = liveHead?.[0];
     if (lastLiveHeadBlock?.block === liveHeadBlock?.block) return;
     if (liveHead && onAddBlock) {
-      lastLiveHead.current = liveHead;
+      lastLiveHeadRef.current = liveHead;
       const isNewBlock = initialHeadNumber !== liveHeadBlock?.block && liveHeadBlock?.block !== blocksWhilePausedBlock?.block;
       if (pollingState === "paused" && isNewBlock) {
-        blocksWhilePaused.current.push(liveHead);
+        blocksWhilePausedRef.current.push(liveHead);
       } else if (pollingState === "running") {
-        if (blocksWhilePaused.current.length > 0) {
-          for (const block of blocksWhilePaused.current) {
+        if (blocksWhilePausedRef.current.length > 0) {
+          for (const block of blocksWhilePausedRef.current) {
             void onAddBlock(block);
           }
-          blocksWhilePaused.current = [];
+          blocksWhilePausedRef.current = [];
         }
         void onAddBlock(liveHead);
       }
     }
   }, [
+    initialHeadNumber,
     liveHead,
+    onAddBlock,
     pollingState
   ]);
-  return blocksWhilePaused.current;
+  return blocksWhilePausedRef;
 }, "useOnBlock");
 
 // src/components/chain/pagination/BlockChainPagination.tsx
 import { TablePaginationActions } from "@xyo-network/react-payload-table";
-import React36 from "react";
+import React37 from "react";
 var BlockChainPagination = /* @__PURE__ */ __name(({ count = 0, onPageChange, page, rowsPerPage = 10 }) => {
-  return /* @__PURE__ */ React36.createElement(TablePaginationActions, {
+  return /* @__PURE__ */ React37.createElement(TablePaginationActions, {
     count,
     onPageChange,
     page,
@@ -1574,10 +1573,10 @@ var BlockChainPagination = /* @__PURE__ */ __name(({ count = 0, onPageChange, pa
 }, "BlockChainPagination");
 
 // src/components/chain/pagination/hooks/usePagination.tsx
-import { useMemo as useMemo11, useState as useState10 } from "react";
+import { useMemo as useMemo9, useState as useState10 } from "react";
 var useChainPagination = /* @__PURE__ */ __name((pageSize, blockComponents) => {
   const [page, setPage] = useState10(0);
-  const paginatedBlockComponents = useMemo11(() => {
+  const paginatedBlockComponents = useMemo9(() => {
     const startIndex = page * pageSize;
     const endIndex = startIndex + pageSize;
     return blockComponents?.slice(startIndex, endIndex);
@@ -1616,19 +1615,19 @@ var BlockListWrapperFlexBox = styled3(FlexCol5, {
 // src/components/payload/builder/Flexbox.tsx
 import { FlexCol as FlexCol6 } from "@xylabs/react-flexbox";
 import { JsonViewerEx as JsonViewerEx2 } from "@xyo-network/react-payload-raw-info";
-import React37, { useState as useState11 } from "react";
+import React38, { useState as useState11 } from "react";
 var PayloadBuilderFlexbox = /* @__PURE__ */ __name(({ BuilderComponent, onBuild, ...props }) => {
   const [payload, setPayload] = useState11();
   const onBuildLocal = /* @__PURE__ */ __name((payload2) => {
     onBuild?.(payload2);
     setPayload(payload2);
   }, "onBuildLocal");
-  return /* @__PURE__ */ React37.createElement(FlexCol6, {
+  return /* @__PURE__ */ React38.createElement(FlexCol6, {
     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
   }) : null);
 }, "PayloadBuilderFlexbox");
@@ -1637,12 +1636,12 @@ var PayloadBuilderFlexbox = /* @__PURE__ */ __name(({ BuilderComponent, onBuild,
 import { Button as Button5, FormControl as FormControl5 } from "@mui/material";
 import { usePromise as usePromise3 } from "@xylabs/react-promise";
 import { createProducerChainStakeIntent } from "@xyo-network/chain-protocol";
-import React40, { useState as useState14 } from "react";
+import React41, { useState as useState14 } from "react";
 
 // src/components/payload/fields/BlockNumberTextField.tsx
 import { FormControl as FormControl3, FormHelperText as FormHelperText2, TextField as TextField3 } from "@mui/material";
-import { toXL1BlockNumber as toXL1BlockNumber2 } from "@xyo-network/xl1-protocol";
-import React38, { useState as useState12 } from "react";
+import { toXL1BlockNumber as toXL1BlockNumber2 } from "@xyo-network/xl1-sdk";
+import React39, { useState as useState12 } from "react";
 var BlockNumberTextField = /* @__PURE__ */ __name(({ errorMessage, onBlockNumberChanged, onChange, ...props }) => {
   const [blockNumber, setBlockNumber] = useState12();
   const handleChange = /* @__PURE__ */ __name((e) => {
@@ -1652,15 +1651,15 @@ var BlockNumberTextField = /* @__PURE__ */ __name(({ errorMessage, onBlockNumber
     onChange?.(e);
   }, "handleChange");
   const errored = errorMessage !== void 0;
-  return /* @__PURE__ */ React38.createElement(FormControl3, {
+  return /* @__PURE__ */ React39.createElement(FormControl3, {
     fullWidth: true
-  }, /* @__PURE__ */ React38.createElement(TextField3, {
+  }, /* @__PURE__ */ React39.createElement(TextField3, {
     error: errored,
     onChange: handleChange,
     type: "number",
     value: blockNumber ?? "",
     ...props
-  }), errored ? /* @__PURE__ */ React38.createElement(FormHelperText2, {
+  }), errored ? /* @__PURE__ */ React39.createElement(FormHelperText2, {
     sx: {
       color: "error.main"
     }
@@ -1669,14 +1668,16 @@ 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, isAddress } from "@xylabs/sdk-js";
-import React39, { useMemo as useMemo12, useState as useState13 } from "react";
+import { asAddress, isAddress, isDefined as isDefined9 } from "@xylabs/sdk-js";
+import React40, { useState as useState13 } from "react";
 var XyoAddressTextField = /* @__PURE__ */ __name(({ onAddressChanged, onChange, resetValue, ...props }) => {
   const [address, setAddress] = useState13("");
   const [addressError, setAddressError] = useState13();
-  useMemo12(() => setAddress(""), [
-    resetValue
-  ]);
+  const [previousResetValue, setPreviousResetValue] = useState13(resetValue);
+  if (isDefined9(resetValue) && resetValue !== previousResetValue) {
+    setPreviousResetValue(resetValue);
+    setAddress("");
+  }
   const handleChange = /* @__PURE__ */ __name((event) => {
     const { value } = event.target;
     onChange?.(event);
@@ -1694,15 +1695,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: "error.main"
     }
@@ -1735,33 +1736,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
@@ -1769,71 +1770,68 @@ 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 { isAddress as isAddress3 } from "@xylabs/sdk-js";
-import { TransferSchema } from "@xyo-network/xl1-protocol";
-import React42, { useMemo as useMemo14, useState as useState16 } from "react";
+import { TransferSchema } from "@xyo-network/xl1-sdk";
+import React43, { useMemo as useMemo10, useState as useState16 } 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 { FlexRow as FlexRow7 } from "@xylabs/react-flexbox";
-import { isAddress as isAddress2, toHex as toHex3 } from "@xylabs/sdk-js";
+import { isAddress as isAddress2, isDefinedNotNull, toHex as toHex3 } from "@xylabs/sdk-js";
 import { BigIntInput } from "@xyo-network/react-shared";
-import React41, { useEffect as useEffect2, useMemo as useMemo13, useState as useState15 } from "react";
+import React42, { useEffect as useEffect2, useState as useState15 } from "react";
 var SingleTransferBuilderFlexbox = /* @__PURE__ */ __name(({ onTransferUpdated, onRemoveTransfer, singleTransfer, ...props }) => {
   const [toAddress3, setToAddress] = useState15();
   const [amount, setAmount] = useState15();
-  const transferAmount = useMemo13(() => {
-    if (isAddress2(toAddress3) && amount !== void 0) {
-      return {
-        ...singleTransfer,
-        amount: toHex3(amount),
-        to: toAddress3
-      };
-    }
-  }, [
-    toAddress3,
-    amount
-  ]);
   useEffect2(() => {
+    const transferAmount = isAddress2(toAddress3) && isDefinedNotNull(amount) ? {
+      ...singleTransfer,
+      amount: toHex3(amount),
+      to: toAddress3
+    } : void 0;
     if (transferAmount) onTransferUpdated?.(transferAmount);
   }, [
-    transferAmount
+    amount,
+    onTransferUpdated,
+    singleTransfer,
+    toAddress3
   ]);
-  return /* @__PURE__ */ React41.createElement(FlexRow7, {
+  return /* @__PURE__ */ React42.createElement(FlexRow7, {
     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] = useState16();
   const [transfers, setTransfers] = useState16([]);
-  const transferPayload = useMemo14(() => {
+  const [epoch] = useState16(() => Date.now());
+  const transferPayload = useMemo10(() => {
     if (isAddress3(fromAddress) && transfers.length > 0) {
       const transfersRecord = {};
       for (const transfer of transfers) {
@@ -1843,12 +1841,13 @@ var TransferBuilderForm = /* @__PURE__ */ __name(({ onBuild }) => {
         from: fromAddress,
         schema: TransferSchema,
         transfers: transfersRecord,
-        epoch: Date.now()
+        epoch
       };
     }
   }, [
     fromAddress,
-    transfers
+    transfers,
+    epoch
   ]);
   const onBuildLocal = /* @__PURE__ */ __name(() => {
     if (onBuild && transferPayload) onBuild?.(transferPayload);
@@ -1875,19 +1874,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,
@@ -1895,7 +1894,7 @@ var TransferBuilderForm = /* @__PURE__ */ __name(({ onBuild }) => {
     sx: {
       width: "100%"
     }
-  })), /* @__PURE__ */ React42.createElement(Button6, {
+  })), /* @__PURE__ */ React43.createElement(Button6, {
     disabled: !transferPayload,
     variant: "contained",
     onClick: onBuildLocal
@@ -1903,7 +1902,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,
@@ -1911,14 +1910,399 @@ var TransferBuilderFlexbox = /* @__PURE__ */ __name(({ onBuild, ...props }) => /
   ...props
 }), "TransferBuilderFlexbox");
 
+// src/components/rate/flexbox/FlexBox.tsx
+import { FlexCol as FlexCol7 } from "@xylabs/react-flexbox";
+import { isDefined as isDefined10 } from "@xylabs/sdk-js";
+
+// src/helpers/rate/rateUnitToLabel.ts
+var rateUnitToLabel = /* @__PURE__ */ __name((rateUnit) => {
+  switch (rateUnit) {
+    case "millis": {
+      return "b/ms";
+    }
+    case "seconds": {
+      return "b/s";
+    }
+    case "minutes": {
+      return "b/m";
+    }
+    case "hours": {
+      return "b/h";
+    }
+    case "days": {
+      return "b/d";
+    }
+    case "weeks": {
+      return "b/w";
+    }
+    default: {
+      return rateUnit;
+    }
+  }
+}, "rateUnitToLabel");
+
+// src/components/rate/SpanTypography.tsx
+import { ViewAgendaOutlined } from "@mui/icons-material";
+import { Tooltip as Tooltip12 } from "@mui/material";
+
+// src/components/rate/support/MetricTypography.tsx
+import { Icon as Icon4, Typography as Typography9 } from "@mui/material";
+import { isUndefined as isUndefined2 } from "@xylabs/sdk-js";
+import { useEffect as useEffect3, useState as useState17 } from "react";
+var MetricTypography = /* @__PURE__ */ __name(({ animationDurationMs = 1e3, disableAnimation, icon, label, metric, sx, ...props }) => {
+  const [displayValue, setDisplayValue] = useState17(0);
+  if (isUndefined2(metric) && displayValue !== 0) {
+    setDisplayValue(0);
+  }
+  useEffect3(() => {
+    if (isUndefined2(metric)) return;
+    const duration = animationDurationMs;
+    const startTime = Date.now();
+    const startValue = 0;
+    const endValue = metric;
+    const animate = /* @__PURE__ */ __name(() => {
+      const now = Date.now();
+      const elapsed = now - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easeProgress = 1 - Math.pow(1 - progress, 3);
+      const currentValue = startValue + (endValue - startValue) * easeProgress;
+      setDisplayValue(currentValue);
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      }
+    }, "animate");
+    globalThis.requestAnimationFrame(animate);
+  }, [
+    animationDurationMs,
+    metric
+  ]);
+  const isWholeNumber = metric !== void 0 && Number.isInteger(metric);
+  const formattedValue = disableAnimation ? metric : displayValue.toLocaleString(navigator.language, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: isWholeNumber ? 0 : 2
+  });
+  return /* @__PURE__ */ React.createElement(Typography9, {
+    variant: "h4",
+    mb: 1,
+    sx: {
+      display: "flex",
+      alignItems: "end",
+      gap: 0.5,
+      ...sx
+    },
+    ...props
+  }, /* @__PURE__ */ React.createElement(Icon4, {
+    fontSize: "large"
+  }, icon), formattedValue, " ", /* @__PURE__ */ React.createElement(Typography9, {
+    component: "span",
+    variant: "caption",
+    lineHeight: 1.86
+  }, label));
+}, "MetricTypography");
+
+// src/components/rate/SpanTypography.tsx
+var BlockRateSpanTypography = /* @__PURE__ */ __name(({ range, span, sx, ...props }) => {
+  return /* @__PURE__ */ React.createElement(Tooltip12, {
+    title: `Block Range: ${range?.join(" - ")}`
+  }, /* @__PURE__ */ React.createElement(MetricTypography, {
+    icon: /* @__PURE__ */ React.createElement(ViewAgendaOutlined, {
+      fontSize: "large"
+    }),
+    metric: span,
+    label: "blocks",
+    ...props
+  }));
+}, "BlockRateSpanTypography");
+
+// src/components/rate/SpeedTypography.tsx
+import { SpeedOutlined } from "@mui/icons-material";
+var BlockRateSpeedTypography = /* @__PURE__ */ __name(({ rate, rateUnitLabel, ...props }) => {
+  return /* @__PURE__ */ React.createElement(MetricTypography, {
+    icon: /* @__PURE__ */ React.createElement(SpeedOutlined, {
+      fontSize: "large"
+    }),
+    metric: rate,
+    label: rateUnitLabel,
+    ...props
+  });
+}, "BlockRateSpeedTypography");
+
+// src/components/rate/TimeTypography.tsx
+import { TimelapseOutlined } from "@mui/icons-material";
+var BlockRateTimeTypography = /* @__PURE__ */ __name(({ rateUnit, timeDifference, sx, ...props }) => {
+  return /* @__PURE__ */ React.createElement(MetricTypography, {
+    icon: /* @__PURE__ */ React.createElement(TimelapseOutlined, {
+      fontSize: "large"
+    }),
+    metric: timeDifference,
+    label: rateUnit,
+    ...props
+  });
+}, "BlockRateTimeTypography");
+
+// src/components/rate/flexbox/FlexBox.tsx
+var BlockRateFlexBox = /* @__PURE__ */ __name(({ blockRate, ...flexBoxProps }) => {
+  const { range, span, rate, rateUnit, timeDifference } = blockRate ?? {};
+  const rateUnitLabel = isDefined10(rateUnit) ? rateUnitToLabel(rateUnit) : "";
+  return /* @__PURE__ */ React.createElement(FlexCol7, {
+    alignItems: "start",
+    ...flexBoxProps
+  }, /* @__PURE__ */ React.createElement(BlockRateSpeedTypography, {
+    rate,
+    rateUnitLabel
+  }), /* @__PURE__ */ React.createElement(BlockRateSpanTypography, {
+    range,
+    span
+  }), /* @__PURE__ */ React.createElement(BlockRateTimeTypography, {
+    rateUnit,
+    timeDifference
+  }));
+}, "BlockRateFlexBox");
+
+// src/components/rate/gauge/Container.tsx
+import { GaugeContainer, GaugeReferenceArc, GaugeValueArc } from "@mui/x-charts";
+
+// src/components/rate/gauge/helpers/blockRateConversions.ts
+import { isDefined as isDefined11, isUndefined as isUndefined3 } from "@xylabs/sdk-js";
+var toBlocksPerMillisecond = /* @__PURE__ */ __name((rateValue, unit) => {
+  if (isUndefined3(unit)) return rateValue;
+  const conversions = {
+    millis: 1,
+    seconds: 1e3,
+    minutes: 6e4,
+    hours: 36e5,
+    days: 864e5,
+    weeks: 6048e5
+  };
+  return rateValue * (isDefined11(conversions[unit]) ? conversions[unit] : 1);
+}, "toBlocksPerMillisecond");
+var toBlocksPerSecond = /* @__PURE__ */ __name((rateValue, unit) => {
+  if (isUndefined3(unit)) return rateValue;
+  const conversions = {
+    millis: 1e-3,
+    seconds: 1,
+    minutes: 60,
+    hours: 3600,
+    days: 86400,
+    weeks: 604800
+  };
+  return rateValue * (isDefined11(conversions[unit]) ? conversions[unit] : 1);
+}, "toBlocksPerSecond");
+var toBlocksPerMinute = /* @__PURE__ */ __name((rateValue, unit) => {
+  if (isUndefined3(unit)) return rateValue;
+  const conversions = {
+    millis: 6e4,
+    seconds: 60,
+    minutes: 1,
+    hours: 1 / 60,
+    days: 1 / 1440,
+    weeks: 1 / 10080
+  };
+  return rateValue * (isDefined11(conversions[unit]) ? conversions[unit] : 1);
+}, "toBlocksPerMinute");
+var toBlocksPerHour = /* @__PURE__ */ __name((rateValue, unit) => {
+  if (isUndefined3(unit)) return rateValue;
+  const conversions = {
+    millis: 36e5,
+    seconds: 3600,
+    minutes: 60,
+    hours: 1,
+    days: 1 / 24,
+    weeks: 1 / 168
+  };
+  return rateValue * (isDefined11(conversions[unit]) ? conversions[unit] : 1);
+}, "toBlocksPerHour");
+var toBlocksPerDay = /* @__PURE__ */ __name((rateValue, unit) => {
+  if (isUndefined3(unit)) return rateValue;
+  const conversions = {
+    millis: 864e5,
+    seconds: 86400,
+    minutes: 1440,
+    hours: 24,
+    days: 1,
+    weeks: 1 / 7
+  };
+  return rateValue * (isDefined11(conversions[unit]) ? conversions[unit] : 1);
+}, "toBlocksPerDay");
+var toBlocksPerWeek = /* @__PURE__ */ __name((rateValue, unit) => {
+  if (isUndefined3(unit)) return rateValue;
+  const conversions = {
+    millis: 6048e5,
+    seconds: 604800,
+    minutes: 10080,
+    hours: 168,
+    days: 7,
+    weeks: 1
+  };
+  return rateValue * (isDefined11(conversions[unit]) ? conversions[unit] : 1);
+}, "toBlocksPerWeek");
+var BlockRateConversions = {
+  millis: toBlocksPerMillisecond,
+  seconds: toBlocksPerSecond,
+  minutes: toBlocksPerMinute,
+  hours: toBlocksPerHour,
+  days: toBlocksPerDay,
+  weeks: toBlocksPerWeek
+};
+
+// src/components/rate/gauge/Pointer.tsx
+import { useTheme as useTheme3 } from "@mui/material";
+import { useGaugeState } from "@mui/x-charts/Gauge";
+import { isDefined as isDefined12 } from "@xylabs/sdk-js";
+import { useEffect as useEffect4, useState as useState18 } from "react";
+var GaugePointer = /* @__PURE__ */ __name(({ pointerColor, startAngle = 0 }) => {
+  const theme = useTheme3();
+  const strokeColor = isDefined12(pointerColor) ? pointerColor : theme.palette.error.dark;
+  const { valueAngle, outerRadius, cx, cy } = useGaugeState();
+  const [currentAngle, setCurrentAngle] = useState18(startAngle);
+  useEffect4(() => {
+    if (valueAngle === null) return;
+    const duration = 500;
+    const startTime = Date.now();
+    const animationStartAngle = currentAngle;
+    const endAngle = valueAngle;
+    const animate = /* @__PURE__ */ __name(() => {
+      const now = Date.now();
+      const elapsed = now - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easeProgress = 1 - Math.pow(1 - progress, 3);
+      const newAngle = animationStartAngle + (endAngle - animationStartAngle) * easeProgress;
+      setCurrentAngle(newAngle);
+      if (progress < 1) {
+        globalThis.requestAnimationFrame(animate);
+      }
+    }, "animate");
+    globalThis.requestAnimationFrame(animate);
+  }, [
+    currentAngle,
+    valueAngle
+  ]);
+  if (valueAngle === null) {
+    return null;
+  }
+  const target = {
+    x: cx + outerRadius * Math.sin(currentAngle),
+    y: cy - outerRadius * Math.cos(currentAngle)
+  };
+  return /* @__PURE__ */ React.createElement("g", {
+    className: "GaugePointer"
+  }, /* @__PURE__ */ React.createElement("circle", {
+    cx,
+    cy,
+    r: 5,
+    fill: strokeColor
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: `M ${cx} ${cy} L ${target.x} ${target.y}`,
+    stroke: strokeColor,
+    strokeWidth: 3
+  }));
+}, "GaugePointer");
+
+// src/components/rate/gauge/Ticks.tsx
+import { useTheme as useTheme4 } from "@mui/material";
+import { useGaugeState as useGaugeState2 } from "@mui/x-charts/Gauge";
+import { isDefined as isDefined13 } from "@xylabs/sdk-js";
+var GaugeTicks = /* @__PURE__ */ __name(({ numTicks = 11, minorTicksPerMajor = 4, majorTickLength = 0.2, minorTickLength = 0.15, majorTickWidth = 2, minorTickWidth = 1, tickColor }) => {
+  const theme = useTheme4();
+  const { startAngle, endAngle, outerRadius, cx, cy } = useGaugeState2();
+  const color = isDefined13(tickColor) ? tickColor : theme.vars.palette.text.secondary;
+  if (startAngle === null || endAngle === null) {
+    return null;
+  }
+  const ticks = [];
+  const totalAngle = endAngle - startAngle;
+  for (let i = 0; i < numTicks; i++) {
+    const angle = startAngle + i / (numTicks - 1) * totalAngle;
+    const tickLength = outerRadius * majorTickLength;
+    const tickStart = outerRadius;
+    const innerRadius = tickStart - tickLength;
+    const x1 = cx + tickStart * Math.sin(angle);
+    const y1 = cy - tickStart * Math.cos(angle);
+    const x2 = cx + innerRadius * Math.sin(angle);
+    const y2 = cy - innerRadius * Math.cos(angle);
+    ticks.push(/* @__PURE__ */ React.createElement("line", {
+      className: `GaugeTick-major-${i}`,
+      key: `major-${i}`,
+      x1,
+      y1,
+      x2,
+      y2,
+      stroke: color,
+      strokeWidth: majorTickWidth
+    }));
+    if (i < numTicks - 1) {
+      const angleStep = totalAngle / (numTicks - 1) / (minorTicksPerMajor + 1);
+      for (let j = 1; j <= minorTicksPerMajor; j++) {
+        const minorAngle = angle + angleStep * j;
+        const minorTickLen = outerRadius * minorTickLength;
+        const minorTickStart = outerRadius;
+        const minorInnerRadius = minorTickStart - minorTickLen;
+        const mx1 = cx + minorTickStart * Math.sin(minorAngle);
+        const my1 = cy - minorTickStart * Math.cos(minorAngle);
+        const mx2 = cx + minorInnerRadius * Math.sin(minorAngle);
+        const my2 = cy - minorInnerRadius * Math.cos(minorAngle);
+        ticks.push(/* @__PURE__ */ React.createElement("line", {
+          key: `minor-${i}-${j}`,
+          x1: mx1,
+          y1: my1,
+          x2: mx2,
+          y2: my2,
+          stroke: color,
+          strokeWidth: minorTickWidth
+        }));
+      }
+    }
+  }
+  return /* @__PURE__ */ React.createElement("g", {
+    className: "GaugeTicks"
+  }, ticks);
+}, "GaugeTicks");
+
+// src/components/rate/gauge/Container.tsx
+var BlockRateSpeedGaugeContainer = /* @__PURE__ */ __name(({ blockRate, children, gaugeConfig, startAngle = -110, endAngle = 110, width = 200, height = 150, ...props }) => {
+  const { rate, rateUnit } = blockRate || {};
+  const { targetBlockRate = 5, targetBlockRateUnit = "minutes", targetPosition = 75, showTicks = true } = gaugeConfig || {};
+  const converter = BlockRateConversions[targetBlockRateUnit];
+  const maxGaugeValue = endAngle;
+  const blocksPerMinute = rate === void 0 ? 0 : converter(rate, rateUnit);
+  const normalizedValue = Math.min(blocksPerMinute / targetBlockRate * targetPosition, maxGaugeValue);
+  return /* @__PURE__ */ React.createElement(GaugeContainer, {
+    width,
+    height,
+    startAngle,
+    endAngle,
+    value: normalizedValue,
+    valueMax: endAngle,
+    innerRadius: "95%",
+    outerRadius: "100%",
+    ...props
+  }, showTicks && /* @__PURE__ */ React.createElement(GaugeTicks, null), /* @__PURE__ */ React.createElement(GaugeReferenceArc, null), /* @__PURE__ */ React.createElement(GaugeValueArc, null), /* @__PURE__ */ React.createElement(GaugePointer, {
+    startAngle: -2
+  }), children);
+}, "BlockRateSpeedGaugeContainer");
+
+// src/components/rate/gauge/WithLabel.tsx
+import { FlexCol as FlexCol8 } from "@xylabs/react-flexbox";
+import { isDefined as isDefined14 } from "@xylabs/sdk-js";
+var BlockRateSpeedGaugeWithLabel = /* @__PURE__ */ __name(({ blockRate, ...props }) => {
+  const rateUnitLabel = isDefined14(blockRate?.rateUnit) ? rateUnitToLabel(blockRate.rateUnit) : "";
+  return /* @__PURE__ */ React.createElement(FlexCol8, null, /* @__PURE__ */ React.createElement(BlockRateSpeedGaugeContainer, {
+    blockRate,
+    ...props
+  }), /* @__PURE__ */ React.createElement(BlockRateSpeedTypography, {
+    rate: blockRate?.rate,
+    rateUnitLabel
+  }));
+}, "BlockRateSpeedGaugeWithLabel");
+
 // src/stories/ChainArchivistDecorator.tsx
 import { CircularProgress } from "@mui/material";
 import { usePromise as usePromise4 } from "@xylabs/react-promise";
 import { MemoryArchivist } from "@xyo-network/archivist-memory";
 import { ArchivistConfigSchema } from "@xyo-network/archivist-model";
 import { buildRandomBlockChain } from "@xyo-network/react-chain-shared";
-import { flattenHydratedBlocks } from "@xyo-network/xl1-protocol-sdk";
-import React44, { useEffect as useEffect3 } from "react";
+import { flattenHydratedBlocks } from "@xyo-network/xl1-sdk";
+import React45, { useEffect as useEffect5 } from "react";
 
 // src/lib/getChainId.ts
 import { toAddress as toAddress2 } from "@xylabs/sdk-js";
@@ -1949,7 +2333,7 @@ var ChainArchivistDecorator = /* @__PURE__ */ __name((Story, { args, ...context
   }, [
     randomBlockChain
   ]);
-  useEffect3(() => {
+  useEffect5(() => {
     if (blockChainRenderPropsError) {
       console.error(blockChainRenderPropsError);
     }
@@ -1967,7 +2351,7 @@ var ChainArchivistDecorator = /* @__PURE__ */ __name((Story, { args, ...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
@@ -1977,11 +2361,11 @@ import { delay } from "@xylabs/sdk-js";
 import { MemoryArchivist as MemoryArchivist2 } from "@xyo-network/archivist-memory";
 import { ArchivistConfigSchema as ArchivistConfigSchema2 } from "@xyo-network/archivist-model";
 import { buildRandomBlockChain as buildRandomBlockChain2 } from "@xyo-network/react-chain-shared";
-import { flattenHydratedBlock } from "@xyo-network/xl1-protocol-sdk";
-import React45, { useEffect as useEffect4, useState as useState17 } from "react";
+import { flattenHydratedBlock } from "@xyo-network/xl1-sdk";
+import React46, { useEffect as useEffect6, useState as useState19 } from "react";
 var chainArchivistRef;
 var ChainArchivistDelayedInsertDecorator = /* @__PURE__ */ __name((Story, context) => {
-  const [firstBlock, setFirstBlock] = useState17();
+  const [firstBlock, setFirstBlock] = useState19();
   const [randomBlockChain] = usePromise5(async () => await buildRandomBlockChain2(), []);
   const [chainArchivist] = usePromise5(async () => {
     if (chainArchivistRef) {
@@ -2009,7 +2393,7 @@ var ChainArchivistDelayedInsertDecorator = /* @__PURE__ */ __name((Story, contex
     chainArchivist,
     randomBlockChain
   ]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (delayedInsertError) {
       console.error(delayedInsertError);
     }
@@ -2037,7 +2421,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");
 export {
   AccountBalanceHistoryFlexBox,
@@ -2060,6 +2444,12 @@ export {
   BlockProducerChip,
   BlockProducerTableCell,
   BlockProducerTableCellInner,
+  BlockRateFlexBox,
+  BlockRateSpanTypography,
+  BlockRateSpeedGaugeContainer,
+  BlockRateSpeedGaugeWithLabel,
+  BlockRateSpeedTypography,
+  BlockRateTimeTypography,
   BlockTransactionCountTableCell,
   BlockVerificationTableCell,
   BlockchainTableEx,
@@ -2072,8 +2462,11 @@ export {
   ChainTransactionNetwork,
   ChipSkeleton,
   FeatureNotAvailable,
+  GaugePointer,
+  GaugeTicks,
   HashTableCell,
   MemoizedPollingControlsFlexbox,
+  MetricTypography,
   PayloadBuilderFlexbox,
   PollingControlsFlexbox,
   ProducerIntentBuilderForm,