@xyo-network/react-chain-boundwitness 1.5.12 → 1.5.14

package/dist/browser/index.mjs

@@ -2,21 +2,31 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
 // src/components/block/BlockBoundWitnessDetails.tsx
-import { Divider } from "@mui/material";
 import { filterAs } from "@xylabs/array";
 import { ErrorRender } from "@xylabs/react-error";
 import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
 import { usePromise } from "@xylabs/react-promise";
 import { isBoundWitness } from "@xyo-network/boundwitness-model";
+import { SignedHydratedBlockWrapper } from "@xyo-network/chain-wrappers";
 import { PayloadBuilder } from "@xyo-network/payload-builder";
 import { BoundWitnessPayloadsTable, BoundWitnessSignatureTable, BWActions, HashHeadingPaper, HeadingPaper as HeadingPaper2 } from "@xyo-network/react-boundwitness-plugin";
 import { useTxsFromBlock } from "@xyo-network/react-chain-blockchain";
 import { usePayloadHash } from "@xyo-network/react-shared";
 import { isTransactionBoundWitness } from "@xyo-network/xl1-protocol";
-import React2, { useMemo } from "react";
+import React4, { useMemo as useMemo2 } from "react";
 import { FaSignature } from "react-icons/fa";
 import { GrTransaction } from "react-icons/gr";
-import { VscSymbolMethod as VscSymbolMethod2, VscSymbolNamespace } from "react-icons/vsc";
+import { VscSymbolMethod as VscSymbolMethod2, VscSymbolNamespace as VscSymbolNamespace2 } from "react-icons/vsc";
+
+// src/lib/formatFees.ts
+import { isUndefined } from "@xylabs/typeof";
+import { bigIntToFixedPointString } from "@xyo-network/chain-utils";
+var formatFee = /* @__PURE__ */ __name((fee) => {
+  if (isUndefined(fee)) return "N/A";
+  const stringValue = bigIntToFixedPointString(fee, 12);
+  if (stringValue === "0") return stringValue;
+  return stringValue;
+}, "formatFee");
 
 // src/lib/formatPayloadsForTable.ts
 var formatPayloadsForTable = /* @__PURE__ */ __name((pairs) => {
@@ -32,12 +42,26 @@ var formatPayloadsForTable = /* @__PURE__ */ __name((pairs) => {
   };
 }, "formatPayloadsForTable");
 
+// src/lib/formatResults.ts
+var formatResults = /* @__PURE__ */ __name((results) => {
+  const result = {
+    labels: [],
+    values: []
+  };
+  for (const [label, value] of Object.entries(results)) {
+    result.labels.push(label);
+    result.values.push(value);
+  }
+  return result;
+}, "formatResults");
+
 // src/components/BwPayloadTable.tsx
 import { FlexCol } from "@xylabs/react-flexbox";
 import { BoundWitnessPayloadTableBody, BoundWitnessPayloadTableHead, HeadingPaper } from "@xyo-network/react-boundwitness-plugin";
 import { TableEx } from "@xyo-network/react-table";
 import React from "react";
 import { VscSymbolMethod } from "react-icons/vsc";
+var clickableFields = "hash";
 var BWPayloadTableFlexbox = /* @__PURE__ */ __name(({ IconComponent, eventNoun, hashes, schemas, headingTitle, ...props }) => {
   const resolvedIconComponent = IconComponent ?? /* @__PURE__ */ React.createElement(VscSymbolMethod, null);
   return /* @__PURE__ */ React.createElement(FlexCol, {
@@ -50,17 +74,170 @@ var BWPayloadTableFlexbox = /* @__PURE__ */ __name(({ IconComponent, eventNoun,
   }), /* @__PURE__ */ React.createElement(TableEx, null, /* @__PURE__ */ React.createElement(BoundWitnessPayloadTableHead, null), /* @__PURE__ */ React.createElement(BoundWitnessPayloadTableBody, {
     payloadHashes: hashes,
     payloadSchemas: schemas,
-    eventNoun
+    eventNoun,
+    clickableFields: [
+      clickableFields
+    ]
   })));
 }, "BWPayloadTableFlexbox");
 
+// src/components/block/card/Card.tsx
+import { Card, CardContent, Grid } from "@mui/material";
+import { DetailsStack, LabelValueStack } from "@xyo-network/react-chain-shared";
+import React3 from "react";
+import { GrSteps } from "react-icons/gr";
+import { IoStatsChartOutline } from "react-icons/io5";
+import { VscSymbolNamespace } from "react-icons/vsc";
+
+// src/components/block/card/CardHeader.tsx
+import { CardHeader, Link, Tooltip, Typography } from "@mui/material";
+import { BlockiesAvatarAddress } from "@xyo-network/react-chain-blockies";
+import { useEvent } from "@xyo-network/react-event";
+import React2 from "react";
+var BlockBoundWitnessCardHeader = /* @__PURE__ */ __name(({ linked = true, address }) => {
+  const [ref, dispatch] = useEvent();
+  return /* @__PURE__ */ React2.createElement(CardHeader, {
+    ref,
+    title: /* @__PURE__ */ React2.createElement(Typography, {
+      onClick: /* @__PURE__ */ __name(() => linked && dispatch("address", "click", address), "onClick"),
+      variant: "body2",
+      sx: {
+        maxWidth: "100%",
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        fontFamily: "monospace"
+      }
+    }, linked ? /* @__PURE__ */ React2.createElement(Link, {
+      sx: {
+        cursor: "pointer"
+      }
+    }, address) : address),
+    avatar: /* @__PURE__ */ React2.createElement(Tooltip, {
+      title: `Address - ${address}`
+    }, /* @__PURE__ */ React2.createElement(BlockiesAvatarAddress, {
+      address,
+      onClick: /* @__PURE__ */ __name(() => dispatch("address", "click", address), "onClick"),
+      size: 21,
+      sx: {
+        cursor: "pointer"
+      }
+    }))
+  });
+}, "BlockBoundWitnessCardHeader");
+
+// src/components/block/card/hooks/useDetails.ts
+import { useMemo } from "react";
+var useBlockDetails = /* @__PURE__ */ __name((wrapper) => {
+  const stats = useMemo(() => {
+    const stats2 = {
+      Height: wrapper.boundWitness.block.toLocaleString(navigator.language ?? "en-US"),
+      Protocol: wrapper.boundWitness.protocol.toString(),
+      Signatures: wrapper.signatureCount.toLocaleString(navigator.language ?? "en-US"),
+      $epoch: wrapper.boundWitness.$epoch.toString()
+    };
+    return formatResults(stats2);
+  }, [
+    wrapper
+  ]);
+  const payloads = useMemo(() => {
+    const payloads2 = {
+      "Transactions": wrapper.transactionCount.toLocaleString(navigator.language ?? "en-US"),
+      "Public Payloads": wrapper.publicPayloadCount.toLocaleString(navigator.language ?? "en-US"),
+      "Private Payloads": wrapper.privatePayloadCount.toLocaleString(navigator.language ?? "en-US"),
+      "Total Payloads": wrapper.payloadCount.toLocaleString(navigator.language ?? "en-US")
+    };
+    return formatResults(payloads2);
+  }, [
+    wrapper
+  ]);
+  const stepHashes = useMemo(() => {
+    const stepHashes2 = {};
+    let step = 0;
+    for (const hash of wrapper.boundWitness.step_hashes) {
+      step++;
+      stepHashes2[`Step Hash ${step}`] = hash.toString();
+    }
+    return formatResults(stepHashes2);
+  }, [
+    wrapper
+  ]);
+  return {
+    stats,
+    payloads,
+    stepHashes
+  };
+}, "useBlockDetails");
+
+// src/components/block/card/Card.tsx
+var BlockBoundWitnessCard = /* @__PURE__ */ __name(({ linkedAddress = true, wrapper, ...props }) => {
+  if (!wrapper) return null;
+  const { stats, payloads, stepHashes } = useBlockDetails(wrapper);
+  return /* @__PURE__ */ React3.createElement(Card, props, wrapper?.boundWitness.addresses.map((address) => /* @__PURE__ */ React3.createElement(BlockBoundWitnessCardHeader, {
+    key: address,
+    address,
+    linked: linkedAddress
+  })), /* @__PURE__ */ React3.createElement(CardContent, null, /* @__PURE__ */ React3.createElement(Grid, {
+    container: true,
+    spacing: 6,
+    sx: {
+      width: "100%"
+    }
+  }, /* @__PURE__ */ React3.createElement(Grid, {
+    size: {
+      xs: 12,
+      sm: 6,
+      md: 4
+    }
+  }, /* @__PURE__ */ React3.createElement(DetailsStack, {
+    IconComponent: IoStatsChartOutline,
+    heading: "Stats",
+    tooltipTitle: "Transaction Statistics"
+  }, /* @__PURE__ */ React3.createElement(LabelValueStack, {
+    labels: stats.labels,
+    values: stats.values
+  }))), /* @__PURE__ */ React3.createElement(Grid, {
+    size: {
+      xs: 12,
+      sm: 6,
+      md: 4
+    }
+  }, /* @__PURE__ */ React3.createElement(DetailsStack, {
+    IconComponent: VscSymbolNamespace,
+    heading: "Payloads",
+    tooltipTitle: "Payloads within the Block"
+  }, /* @__PURE__ */ React3.createElement(LabelValueStack, {
+    labels: payloads.labels,
+    values: payloads.values
+  }))), /* @__PURE__ */ React3.createElement(Grid, {
+    size: {
+      xs: 12,
+      sm: 6,
+      md: 4
+    }
+  }, /* @__PURE__ */ React3.createElement(DetailsStack, {
+    IconComponent: GrSteps,
+    heading: "Step Hashes",
+    tooltipTitle: "Step Hashes for the Block"
+  }, /* @__PURE__ */ React3.createElement(LabelValueStack, {
+    labels: stepHashes.labels,
+    values: stepHashes.values
+  }))))));
+}, "BlockBoundWitnessCard");
+
 // src/components/block/BlockBoundWitnessDetails.tsx
 var BlockBoundWitnessDetails = /* @__PURE__ */ __name(({ block, paper, children, ...props }) => {
+  const [wrapper, wrapperError] = usePromise(async () => {
+    if (block) {
+      return await SignedHydratedBlockWrapper.parse(block);
+    }
+  }, [
+    block
+  ]);
   const boundWitness = block?.[0];
   const payloads = block?.[1];
   const hash = usePayloadHash(boundWitness);
   const [transactions, txFromBlockError] = useTxsFromBlock(block);
-  const { hashes: txHashes, schemas: txSchemas } = useMemo(() => formatPayloadsForTable(transactions ?? []), [
+  const { hashes: txHashes, schemas: txSchemas } = useMemo2(() => formatPayloadsForTable(transactions ?? []), [
     transactions
   ]);
   const [nonTxBoundWitnesses, bwsFromBlockError] = usePromise(async () => {
@@ -69,35 +246,39 @@ var BlockBoundWitnessDetails = /* @__PURE__ */ __name(({ block, paper, children,
   }, [
     payloads
   ]);
-  const { hashes: nonTxBwHashes, schemas: nonTxBwSchemas } = useMemo(() => formatPayloadsForTable(nonTxBoundWitnesses ?? []), [
+  const { hashes: nonTxBwHashes, schemas: nonTxBwSchemas } = useMemo2(() => formatPayloadsForTable(nonTxBoundWitnesses ?? []), [
     nonTxBoundWitnesses
   ]);
   const hasNonTxBoundWitnesses = (nonTxBoundWitnesses?.length ?? 0) > 0;
-  return /* @__PURE__ */ React2.createElement(FlexCol2, {
+  return /* @__PURE__ */ React4.createElement(FlexCol2, {
     alignItems: "stretch",
     rowGap: 4,
     ...props
-  }, /* @__PURE__ */ React2.createElement(ErrorRender, {
+  }, /* @__PURE__ */ React4.createElement(ErrorRender, {
     error: txFromBlockError ?? bwsFromBlockError,
     scope: "BlockBoundWitnessDetails.tsx"
-  }), /* @__PURE__ */ React2.createElement(HashHeadingPaper, {
+  }), /* @__PURE__ */ React4.createElement(ErrorRender, {
+    error: wrapperError,
+    scope: "BlockBoundWitnessDetails.tsx:wrapperError"
+  }), /* @__PURE__ */ React4.createElement(HashHeadingPaper, {
     hash,
     paperProps: {
       sx: {
         p: 2
       }
     },
-    AdornmentEnd: /* @__PURE__ */ React2.createElement(BWActions, {
+    AdornmentEnd: /* @__PURE__ */ React4.createElement(BWActions, {
       boundwitness: boundWitness
     }),
     identiconProps: {
       p: 0.75,
       size: 24
     }
-  }), /* @__PURE__ */ React2.createElement(Divider, {
-    flexItem: true
-  }), (transactions?.length ?? 0) > 0 && /* @__PURE__ */ React2.createElement(BWPayloadTableFlexbox, {
-    IconComponent: /* @__PURE__ */ React2.createElement(GrTransaction, null),
+  }), /* @__PURE__ */ React4.createElement(BlockBoundWitnessCard, {
+    elevation: 4,
+    wrapper
+  }), (transactions?.length ?? 0) > 0 && /* @__PURE__ */ React4.createElement(BWPayloadTableFlexbox, {
+    IconComponent: /* @__PURE__ */ React4.createElement(GrTransaction, null),
     eventNoun: "transaction",
     hashes: txHashes,
     headingTitle: "Transactions",
@@ -105,17 +286,17 @@ var BlockBoundWitnessDetails = /* @__PURE__ */ __name(({ block, paper, children,
     sx: {
       mb: 1
     }
-  }), /* @__PURE__ */ React2.createElement(FlexCol2, {
+  }), /* @__PURE__ */ React4.createElement(FlexCol2, {
     alignItems: "stretch",
     rowGap: 1,
     mb: 1
-  }, /* @__PURE__ */ React2.createElement(HeadingPaper2, {
-    IconComponent: /* @__PURE__ */ React2.createElement(VscSymbolNamespace, null),
+  }, /* @__PURE__ */ React4.createElement(HeadingPaper2, {
+    IconComponent: /* @__PURE__ */ React4.createElement(VscSymbolNamespace2, null),
     heading: "Payloads"
-  }), /* @__PURE__ */ React2.createElement(BoundWitnessPayloadsTable, {
+  }), /* @__PURE__ */ React4.createElement(BoundWitnessPayloadsTable, {
     boundwitness: boundWitness
-  })), hasNonTxBoundWitnesses ? /* @__PURE__ */ React2.createElement(BWPayloadTableFlexbox, {
-    IconComponent: /* @__PURE__ */ React2.createElement(VscSymbolMethod2, null),
+  })), hasNonTxBoundWitnesses ? /* @__PURE__ */ React4.createElement(BWPayloadTableFlexbox, {
+    IconComponent: /* @__PURE__ */ React4.createElement(VscSymbolMethod2, null),
     eventNoun: "boundwitness",
     hashes: nonTxBwHashes,
     headingTitle: "Bound Witnesses",
@@ -123,151 +304,144 @@ var BlockBoundWitnessDetails = /* @__PURE__ */ __name(({ block, paper, children,
     sx: {
       mb: 1
     }
-  }) : null, /* @__PURE__ */ React2.createElement(FlexCol2, {
+  }) : null, /* @__PURE__ */ React4.createElement(FlexCol2, {
     alignItems: "stretch",
     rowGap: 1,
     mb: 1
-  }, /* @__PURE__ */ React2.createElement(HeadingPaper2, {
-    IconComponent: /* @__PURE__ */ React2.createElement(FaSignature, null),
+  }, /* @__PURE__ */ React4.createElement(HeadingPaper2, {
+    IconComponent: /* @__PURE__ */ React4.createElement(FaSignature, null),
     heading: "Signatures"
-  }), /* @__PURE__ */ React2.createElement(BoundWitnessSignatureTable, {
+  }), /* @__PURE__ */ React4.createElement(BoundWitnessSignatureTable, {
     block: boundWitness
   })));
 }, "BlockBoundWitnessDetails");
 
 // src/components/transactions/card/Card.tsx
-import { Card, CardContent, Grid, Typography } from "@mui/material";
-import { isUndefined } from "@xylabs/typeof";
-import { bigIntToFixedPointString } from "@xyo-network/chain-utils";
-import { DetailsStack, LabelValueStack } from "@xyo-network/react-chain-shared";
-import React3, { useMemo as useMemo2 } from "react";
+import { Card as Card2, CardContent as CardContent2, CardHeader as CardHeader2, Grid as Grid2, Link as Link2, Tooltip as Tooltip2, Typography as Typography2 } from "@mui/material";
+import { BlockiesAvatarAddress as BlockiesAvatarAddress2 } from "@xyo-network/react-chain-blockies";
+import { DetailsStack as DetailsStack2, LabelValueStack as LabelValueStack2 } from "@xyo-network/react-chain-shared";
+import { useEvent as useEvent2 } from "@xyo-network/react-event";
+import React5 from "react";
 import { GiReceiveMoney, GiSandsOfTime } from "react-icons/gi";
-import { IoStatsChartOutline } from "react-icons/io5";
-import { MdOutlineAlternateEmail } from "react-icons/md";
-var formatFee = /* @__PURE__ */ __name((fee) => {
-  if (isUndefined(fee)) return;
-  const stringValue = bigIntToFixedPointString(fee, 12);
-  if (stringValue === "0") return "0.0";
-  return stringValue;
-}, "formatFee");
-var TransactionBoundWitnessCard = /* @__PURE__ */ __name(({ wrapper, ...props }) => {
-  if (!wrapper) return null;
-  const stats = useMemo2(() => {
-    const labels = [
-      "Reward",
-      "Elevated Payloads",
-      "Total Payloads",
-      "Signatures"
-    ];
-    const values = [
-      wrapper.reward().toLocaleString(navigator.language ?? "en-US"),
-      wrapper.elevatedPayloadCount.toLocaleString(navigator.language ?? "en-US"),
-      wrapper.payloadCount.toLocaleString(navigator.language ?? "en-US"),
-      wrapper.signatureCount.toLocaleString(navigator.language ?? "en-US"),
-      ,
-    ];
-    return {
-      labels,
-      values
+import { IoStatsChartOutline as IoStatsChartOutline2 } from "react-icons/io5";
+
+// src/components/transactions/card/hooks/useDetails.ts
+import { useMemo as useMemo3 } from "react";
+var useTransactionDetails = /* @__PURE__ */ __name((wrapper) => {
+  const stats = useMemo3(() => {
+    const stats2 = {
+      "Reward": wrapper.reward().toLocaleString(navigator.language ?? "en-US"),
+      "Elevated Payloads": wrapper.elevatedPayloadCount.toLocaleString(navigator.language ?? "en-US"),
+      "Total Payloads": wrapper.payloadCount.toLocaleString(navigator.language ?? "en-US"),
+      "Signatures": wrapper.signatureCount.toLocaleString(navigator.language ?? "en-US")
     };
+    return formatResults(stats2);
   }, [
     wrapper
   ]);
-  const fees = useMemo2(() => {
-    const labels = [
-      "Base",
-      "Gas",
-      "Priority",
-      "Gas Limit"
-    ];
-    const values = [
-      formatFee(wrapper.fees.base),
-      formatFee(wrapper.fees.gasPrice),
-      formatFee(wrapper.fees.priority),
-      formatFee(wrapper.fees.gasLimit)
-    ];
-    return {
-      labels,
-      values
+  const fees = useMemo3(() => {
+    const fees2 = {
+      "Base": formatFee(wrapper.fees.base),
+      "Gas": formatFee(wrapper.fees.gasPrice),
+      "Priority": formatFee(wrapper.fees.priority),
+      "Gas Limit": formatFee(wrapper.fees.gasLimit)
     };
+    return formatResults(fees2);
   }, [
     wrapper
   ]);
-  const blockDuration = useMemo2(() => {
-    const labels = [
-      "Expiration",
-      "Not Before"
-    ];
-    const values = [
-      wrapper.boundWitness.exp.toLocaleString(navigator.language ?? "en-US"),
-      wrapper.boundWitness.nbf.toLocaleString(navigator.language ?? "en-US")
-    ];
-    return {
-      labels,
-      values
+  const blockDuration = useMemo3(() => {
+    const blockDuration2 = {
+      "Expiration": wrapper.boundWitness.exp.toLocaleString(navigator.language ?? "en-US"),
+      "Not Before": wrapper.boundWitness.nbf.toLocaleString(navigator.language ?? "en-US")
     };
+    return formatResults(blockDuration2);
   }, [
     wrapper
   ]);
-  return /* @__PURE__ */ React3.createElement(Card, props, /* @__PURE__ */ React3.createElement(CardContent, null, /* @__PURE__ */ React3.createElement(Grid, {
+  return {
+    stats,
+    fees,
+    blockDuration
+  };
+}, "useTransactionDetails");
+
+// src/components/transactions/card/Card.tsx
+var TransactionBoundWitnessCard = /* @__PURE__ */ __name(({ linkedAddress = true, wrapper, ...props }) => {
+  if (!wrapper) return null;
+  const { stats, fees, blockDuration } = useTransactionDetails(wrapper);
+  const [ref, dispatch] = useEvent2();
+  return /* @__PURE__ */ React5.createElement(Card2, {
+    ref,
+    ...props
+  }, /* @__PURE__ */ React5.createElement(CardHeader2, {
+    title: /* @__PURE__ */ React5.createElement(Typography2, {
+      onClick: /* @__PURE__ */ __name(() => linkedAddress && dispatch("address", "click", wrapper.boundWitness.from), "onClick"),
+      variant: "body2",
+      sx: {
+        maxWidth: "100%",
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        fontFamily: "monospace"
+      }
+    }, linkedAddress ? /* @__PURE__ */ React5.createElement(Link2, {
+      sx: {
+        cursor: "pointer"
+      }
+    }, wrapper?.boundWitness.from) : wrapper?.boundWitness.from),
+    avatar: /* @__PURE__ */ React5.createElement(Tooltip2, {
+      title: `From Address - ${wrapper?.boundWitness.from}`
+    }, /* @__PURE__ */ React5.createElement(BlockiesAvatarAddress2, {
+      address: wrapper?.boundWitness.from,
+      onClick: /* @__PURE__ */ __name(() => dispatch("address", "click", wrapper.boundWitness.from), "onClick"),
+      size: 21,
+      sx: {
+        cursor: "pointer"
+      }
+    }))
+  }), /* @__PURE__ */ React5.createElement(CardContent2, null, /* @__PURE__ */ React5.createElement(Grid2, {
     container: true,
     spacing: 6,
     sx: {
       width: "100%"
     }
-  }, /* @__PURE__ */ React3.createElement(Grid, {
-    size: {
-      xs: 12
-    }
-  }, /* @__PURE__ */ React3.createElement(DetailsStack, {
-    IconComponent: MdOutlineAlternateEmail,
-    heading: "From:",
-    tooltipTitle: "Address of the sender"
-  }, /* @__PURE__ */ React3.createElement(Typography, {
-    variant: "body2",
-    sx: {
-      maxWidth: "100%",
-      textOverflow: "ellipsis",
-      overflow: "hidden",
-      fontFamily: "monospace"
-    }
-  }, wrapper?.boundWitness.from))), /* @__PURE__ */ React3.createElement(Grid, {
+  }, /* @__PURE__ */ React5.createElement(Grid2, {
     size: {
       xs: 12,
       sm: 6,
       md: 4
     }
-  }, /* @__PURE__ */ React3.createElement(DetailsStack, {
-    IconComponent: IoStatsChartOutline,
+  }, /* @__PURE__ */ React5.createElement(DetailsStack2, {
+    IconComponent: IoStatsChartOutline2,
     heading: "Stats",
     tooltipTitle: "Transaction Statistics"
-  }, /* @__PURE__ */ React3.createElement(LabelValueStack, {
+  }, /* @__PURE__ */ React5.createElement(LabelValueStack2, {
     labels: stats.labels,
     values: stats.values
-  }))), /* @__PURE__ */ React3.createElement(Grid, {
+  }))), /* @__PURE__ */ React5.createElement(Grid2, {
     size: {
       xs: 12,
       sm: 6,
       md: 4
     }
-  }, /* @__PURE__ */ React3.createElement(DetailsStack, {
+  }, /* @__PURE__ */ React5.createElement(DetailsStack2, {
     IconComponent: GiReceiveMoney,
     heading: "Fees",
     tooltipTitle: "Fees offered to the producer"
-  }, /* @__PURE__ */ React3.createElement(LabelValueStack, {
+  }, /* @__PURE__ */ React5.createElement(LabelValueStack2, {
     labels: fees.labels,
     values: fees.values
-  }))), /* @__PURE__ */ React3.createElement(Grid, {
+  }))), /* @__PURE__ */ React5.createElement(Grid2, {
     size: {
       xs: 12,
       sm: 6,
       md: 4
     }
-  }, /* @__PURE__ */ React3.createElement(DetailsStack, {
+  }, /* @__PURE__ */ React5.createElement(DetailsStack2, {
     IconComponent: GiSandsOfTime,
     heading: "Block Duration",
     tooltipTitle: "Block window for the transaction to be valid"
-  }, /* @__PURE__ */ React3.createElement(LabelValueStack, {
+  }, /* @__PURE__ */ React5.createElement(LabelValueStack2, {
     labels: blockDuration.labels,
     values: blockDuration.values
   }))))));
@@ -281,7 +455,7 @@ import { isDefined } from "@xylabs/typeof";
 import { SignedHydratedTransactionWrapper } from "@xyo-network/chain-wrappers";
 import { PayloadBuilder as PayloadBuilder2 } from "@xyo-network/payload-builder";
 import { BoundWitnessSignatureTable as BoundWitnessSignatureTable2, BWActions as BWActions2, HashHeadingPaper as HashHeadingPaper2, HeadingPaper as HeadingPaper3 } from "@xyo-network/react-boundwitness-plugin";
-import React4 from "react";
+import React6 from "react";
 import { FaSignature as FaSignature2 } from "react-icons/fa";
 import { VscSymbolMethod as VscSymbolMethod3 } from "react-icons/vsc";
 var TransactionBoundWitnessDetails = /* @__PURE__ */ __name(({ transaction, ...props }) => {
@@ -307,49 +481,49 @@ var TransactionBoundWitnessDetails = /* @__PURE__ */ __name(({ transaction, ...p
     wrapper
   ]);
   const { hashes: elevatedPayloadHashes, schemas: elevatedPayloadSchemas } = elevatedPayloadSets ?? {};
-  return /* @__PURE__ */ React4.createElement(FlexCol3, {
+  return /* @__PURE__ */ React6.createElement(FlexCol3, {
     alignItems: "stretch",
     rowGap: 2,
     ...props
-  }, /* @__PURE__ */ React4.createElement(HashHeadingPaper2, {
+  }, /* @__PURE__ */ React6.createElement(HashHeadingPaper2, {
     hash: wrapper?.boundWitness?._hash,
     paperProps: {
       sx: {
         p: 2
       }
     },
-    AdornmentEnd: /* @__PURE__ */ React4.createElement(BWActions2, {
+    AdornmentEnd: /* @__PURE__ */ React6.createElement(BWActions2, {
       boundwitness: wrapper?.boundWitness
     }),
     identiconProps: {
       p: 0.75,
       size: 24
     }
-  }), /* @__PURE__ */ React4.createElement(ErrorRender2, {
+  }), /* @__PURE__ */ React6.createElement(ErrorRender2, {
     error: wrapperError,
     scope: "wrapperError:TransactionBoundWitnessDetails.tsx"
-  }), /* @__PURE__ */ React4.createElement(ErrorRender2, {
+  }), /* @__PURE__ */ React6.createElement(ErrorRender2, {
     error: elevatedPayloadSetsError,
     scope: "elevatedPayloadSetsError:TransactionBoundWitnessDetails.tsx"
-  }), /* @__PURE__ */ React4.createElement(TransactionBoundWitnessCard, {
+  }), /* @__PURE__ */ React6.createElement(TransactionBoundWitnessCard, {
     elevation: 4,
     wrapper
-  }), /* @__PURE__ */ React4.createElement(BWPayloadTableFlexbox, {
-    IconComponent: /* @__PURE__ */ React4.createElement(VscSymbolMethod3, null),
+  }), /* @__PURE__ */ React6.createElement(BWPayloadTableFlexbox, {
+    IconComponent: /* @__PURE__ */ React6.createElement(VscSymbolMethod3, null),
     hashes: elevatedPayloadHashes,
     headingTitle: "Elevated Payloads",
     schemas: elevatedPayloadSchemas,
     sx: {
       mb: 1
     }
-  }), /* @__PURE__ */ React4.createElement(FlexCol3, {
+  }), /* @__PURE__ */ React6.createElement(FlexCol3, {
     alignItems: "stretch",
     rowGap: 1,
     mb: 1
-  }, /* @__PURE__ */ React4.createElement(HeadingPaper3, {
-    IconComponent: /* @__PURE__ */ React4.createElement(FaSignature2, null),
+  }, /* @__PURE__ */ React6.createElement(HeadingPaper3, {
+    IconComponent: /* @__PURE__ */ React6.createElement(FaSignature2, null),
     heading: "Signatures"
-  }), /* @__PURE__ */ React4.createElement(BoundWitnessSignatureTable2, {
+  }), /* @__PURE__ */ React6.createElement(BoundWitnessSignatureTable2, {
     block: wrapper?.boundWitness
   })));
 }, "TransactionBoundWitnessDetails");