@xyo-network/react-chain-boundwitness 1.3.19 → 1.3.21

package/dist/browser/index.mjs

@@ -2,100 +2,138 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
 // src/components/BlockBoundWitnessDetails.tsx
-import { Divider, TableCell, TableHead, TableRow } from "@mui/material";
+import { Divider } from "@mui/material";
 import { filterAs } from "@xylabs/array";
 import { ErrorRender } from "@xylabs/react-error";
-import { FlexCol } from "@xylabs/react-flexbox";
+import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
 import { usePromise } from "@xylabs/react-promise";
 import { isBoundWitness } from "@xyo-network/boundwitness-model";
 import { PayloadBuilder } from "@xyo-network/payload-builder";
-import { BoundWitnessPayloadsTable, BoundWitnessSignatureTable, BWActions, HashHeadingPaper, HeadingPaper } from "@xyo-network/react-boundwitness-plugin";
+import { BoundWitnessPayloadsTable, BoundWitnessSignatureTable, BWActions, HashHeadingPaper, HeadingPaper as HeadingPaper2 } from "@xyo-network/react-boundwitness-plugin";
 import { useTxsFromBlock } from "@xyo-network/react-chain-blockchain";
-import { HashTableCell, usePayloadHash } from "@xyo-network/react-shared";
-import { TableEx } from "@xyo-network/react-table";
+import { usePayloadHash } from "@xyo-network/react-shared";
 import { isTransactionBoundWitness } from "@xyo-network/xl1-protocol";
-import React from "react";
+import React2, { useMemo } from "react";
 import { FaSignature } from "react-icons/fa";
 import { GrTransaction } from "react-icons/gr";
-import { VscSymbolMethod, VscSymbolNamespace } from "react-icons/vsc";
-var BlockBoundWitnessDetails = /* @__PURE__ */ __name(({ ref, block, paper, children, ...props }) => {
+import { VscSymbolMethod as VscSymbolMethod2, VscSymbolNamespace } from "react-icons/vsc";
+
+// 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 BWPayloadTableFlexbox = /* @__PURE__ */ __name(({ IconComponent, eventNoun, hashes, schemas, headingTitle, ...props }) => {
+  const resolvedIconComponent = IconComponent ?? /* @__PURE__ */ React.createElement(VscSymbolMethod, null);
+  return /* @__PURE__ */ React.createElement(FlexCol, {
+    alignItems: "stretch",
+    rowGap: 1,
+    ...props
+  }, /* @__PURE__ */ React.createElement(HeadingPaper, {
+    IconComponent: resolvedIconComponent,
+    heading: headingTitle
+  }), /* @__PURE__ */ React.createElement(TableEx, null, /* @__PURE__ */ React.createElement(BoundWitnessPayloadTableHead, null), /* @__PURE__ */ React.createElement(BoundWitnessPayloadTableBody, {
+    payloadHashes: hashes,
+    payloadSchemas: schemas,
+    eventNoun
+  })));
+}, "BWPayloadTableFlexbox");
+
+// src/components/BlockBoundWitnessDetails.tsx
+var formatBwsForTable = /* @__PURE__ */ __name((pairs) => {
+  let hashes = [];
+  let schemas = [];
+  for (const [bw, hash] of pairs ?? []) {
+    hashes.push(hash);
+    schemas.push(bw?.schema ?? "");
+  }
+  return {
+    hashes,
+    schemas
+  };
+}, "formatBwsForTable");
+var BlockBoundWitnessDetails = /* @__PURE__ */ __name(({ block, paper, children, ...props }) => {
   const boundWitness = block?.[0];
   const payloads = block?.[1];
   const hash = usePayloadHash(boundWitness);
   const [transactions, txFromBlockError] = useTxsFromBlock(block);
+  const { hashes: txHashes, schemas: txSchemas } = useMemo(() => formatBwsForTable(transactions ?? []), [
+    transactions
+  ]);
   const [nonTxBoundWitnesses, bwsFromBlockError] = usePromise(async () => {
     const bws = filterAs(payloads ?? [], (payload) => !isTransactionBoundWitness(payload) && isBoundWitness(payload) ? payload : void 0);
     return await PayloadBuilder.hashPairs(bws);
   }, [
     payloads
   ]);
+  const { hashes: nonTxBwHashes, schemas: nonTxBwSchemas } = useMemo(() => formatBwsForTable(nonTxBoundWitnesses ?? []), [
+    nonTxBoundWitnesses
+  ]);
   const hasNonTxBoundWitnesses = (nonTxBoundWitnesses?.length ?? 0) > 0;
-  return /* @__PURE__ */ React.createElement(FlexCol, {
+  return /* @__PURE__ */ React2.createElement(FlexCol2, {
     alignItems: "stretch",
     rowGap: 4,
     ...props
-  }, /* @__PURE__ */ React.createElement(ErrorRender, {
+  }, /* @__PURE__ */ React2.createElement(ErrorRender, {
     error: txFromBlockError ?? bwsFromBlockError,
     scope: "BlockBoundWitnessDetails.tsx"
-  }), /* @__PURE__ */ React.createElement(HashHeadingPaper, {
+  }), /* @__PURE__ */ React2.createElement(HashHeadingPaper, {
     hash,
     paperProps: {
       sx: {
         p: 2
       }
     },
-    AdornmentEnd: /* @__PURE__ */ React.createElement(BWActions, {
+    AdornmentEnd: /* @__PURE__ */ React2.createElement(BWActions, {
       boundwitness: boundWitness
     }),
     identiconProps: {
       p: 0.75,
       size: 24
     }
-  }), /* @__PURE__ */ React.createElement(Divider, {
+  }), /* @__PURE__ */ React2.createElement(Divider, {
     flexItem: true
-  }), (transactions?.length ?? 0) > 0 && /* @__PURE__ */ React.createElement(FlexCol, {
-    alignItems: "stretch",
-    rowGap: 1,
-    mb: 1
-  }, /* @__PURE__ */ React.createElement(HeadingPaper, {
-    IconComponent: /* @__PURE__ */ React.createElement(GrTransaction, null),
-    heading: "Transactions"
-  }), /* @__PURE__ */ React.createElement(TableEx, null, /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, /* @__PURE__ */ React.createElement(TableCell, null, "Hash"))), transactions?.map(([, txHash]) => /* @__PURE__ */ React.createElement(TableRow, {
-    key: hash + txHash
-  }, /* @__PURE__ */ React.createElement(HashTableCell, {
-    title: hash
-  }, hash))))), /* @__PURE__ */ React.createElement(FlexCol, {
+  }), (transactions?.length ?? 0) > 0 && /* @__PURE__ */ React2.createElement(BWPayloadTableFlexbox, {
+    IconComponent: /* @__PURE__ */ React2.createElement(GrTransaction, null),
+    eventNoun: "transaction",
+    hashes: txHashes,
+    headingTitle: "Transactions",
+    schemas: txSchemas,
+    sx: {
+      mb: 1
+    }
+  }), /* @__PURE__ */ React2.createElement(FlexCol2, {
     alignItems: "stretch",
     rowGap: 1,
     mb: 1
-  }, /* @__PURE__ */ React.createElement(HeadingPaper, {
-    IconComponent: /* @__PURE__ */ React.createElement(VscSymbolNamespace, null),
+  }, /* @__PURE__ */ React2.createElement(HeadingPaper2, {
+    IconComponent: /* @__PURE__ */ React2.createElement(VscSymbolNamespace, null),
     heading: "Payloads"
-  }), /* @__PURE__ */ React.createElement(BoundWitnessPayloadsTable, {
+  }), /* @__PURE__ */ React2.createElement(BoundWitnessPayloadsTable, {
     boundwitness: boundWitness
-  })), hasNonTxBoundWitnesses ? /* @__PURE__ */ React.createElement(FlexCol, {
-    alignItems: "stretch",
-    rowGap: 1,
-    mb: 1
-  }, /* @__PURE__ */ React.createElement(HeadingPaper, {
-    IconComponent: /* @__PURE__ */ React.createElement(VscSymbolMethod, null),
-    heading: "Bound Witnesses"
-  }), /* @__PURE__ */ React.createElement(TableEx, null, /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, /* @__PURE__ */ React.createElement(TableCell, null, "Schema"))), nonTxBoundWitnesses?.map(([, bwHash]) => /* @__PURE__ */ React.createElement(TableRow, {
-    key: hash + bwHash
-  }, /* @__PURE__ */ React.createElement(HashTableCell, {
-    title: hash
-  }, hash))))) : null, /* @__PURE__ */ React.createElement(FlexCol, {
+  })), hasNonTxBoundWitnesses ? /* @__PURE__ */ React2.createElement(BWPayloadTableFlexbox, {
+    IconComponent: /* @__PURE__ */ React2.createElement(VscSymbolMethod2, null),
+    eventNoun: "boundwitness",
+    hashes: nonTxBwHashes,
+    headingTitle: "Bound Witnesses",
+    schemas: nonTxBwSchemas,
+    sx: {
+      mb: 1
+    }
+  }) : null, /* @__PURE__ */ React2.createElement(FlexCol2, {
     alignItems: "stretch",
     rowGap: 1,
     mb: 1
-  }, /* @__PURE__ */ React.createElement(HeadingPaper, {
-    IconComponent: /* @__PURE__ */ React.createElement(FaSignature, null),
+  }, /* @__PURE__ */ React2.createElement(HeadingPaper2, {
+    IconComponent: /* @__PURE__ */ React2.createElement(FaSignature, null),
     heading: "Signatures"
-  }), /* @__PURE__ */ React.createElement(BoundWitnessSignatureTable, {
+  }), /* @__PURE__ */ React2.createElement(BoundWitnessSignatureTable, {
     block: boundWitness
   })));
 }, "BlockBoundWitnessDetails");
 export {
+  BWPayloadTableFlexbox,
   BlockBoundWitnessDetails
 };
 //# sourceMappingURL=index.mjs.map

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/BlockBoundWitnessDetails.tsx"],"sourcesContent":["import {\n  Divider, TableCell, TableHead, TableRow,\n} from '@mui/material'\nimport { filterAs } from '@xylabs/array'\nimport { ErrorRender } from '@xylabs/react-error'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { usePromise } from '@xylabs/react-promise'\nimport { isBoundWitness } from '@xyo-network/boundwitness-model'\nimport { PayloadBuilder } from '@xyo-network/payload-builder'\nimport {\n  BoundWitnessPayloadsTable,\n  BoundWitnessSignatureTable,\n  BWActions,\n  HashHeadingPaper,\n  HeadingPaper,\n} from '@xyo-network/react-boundwitness-plugin'\nimport { useTxsFromBlock } from '@xyo-network/react-chain-blockchain'\nimport { HashTableCell, usePayloadHash } from '@xyo-network/react-shared'\nimport { TableEx } from '@xyo-network/react-table'\nimport { isTransactionBoundWitness, type SignedHydratedBlock } from '@xyo-network/xl1-protocol'\nimport React from 'react'\nimport { FaSignature } from 'react-icons/fa'\nimport { GrTransaction } from 'react-icons/gr'\nimport { VscSymbolMethod, VscSymbolNamespace } from 'react-icons/vsc'\n\nexport interface BoundWitnessDetailsProps extends FlexBoxProps {\n  block?: SignedHydratedBlock\n}\n\nexport const BlockBoundWitnessDetails = ({\n  ref, block, paper, children, ...props\n}: BoundWitnessDetailsProps & { ref?: React.Ref<unknown | null> }) => {\n  const boundWitness = block?.[0]\n  const payloads = block?.[1]\n\n  const hash = usePayloadHash(boundWitness)\n\n  const [transactions, txFromBlockError] = useTxsFromBlock(block)\n\n  const [nonTxBoundWitnesses, bwsFromBlockError] = usePromise(async () => {\n    const bws = filterAs(payloads ?? [], payload =>\n      (!isTransactionBoundWitness(payload) && isBoundWitness(payload)) ? payload : undefined)\n    return await PayloadBuilder.hashPairs(bws)\n    }, [payloads])\n\n    const hasNonTxBoundWitnesses = (nonTxBoundWitnesses?.length ?? 0) > 0\n\n  return (\n    <FlexCol alignItems=\"stretch\" rowGap={4} {...props}>\n      <ErrorRender error={txFromBlockError ?? bwsFromBlockError} scope=\"BlockBoundWitnessDetails.tsx\" />\n      <HashHeadingPaper\n        hash={hash}\n        paperProps={{ sx: { p: 2 } }}\n        AdornmentEnd={<BWActions boundwitness={boundWitness} />}\n        identiconProps={{ p: 0.75, size: 24 }}\n      />\n      <Divider flexItem />\n      {(transactions?.length ?? 0) > 0 && (\n          <FlexCol alignItems=\"stretch\" rowGap={1} mb={1}>\n            <HeadingPaper IconComponent={<GrTransaction />} heading=\"Transactions\" />\n            <TableEx>\n              <TableHead>\n                <TableRow>\n                  <TableCell>\n                    Hash\n                  </TableCell>\n                </TableRow>\n              </TableHead>\n              {\n                transactions?.map(([, txHash]) => (\n                  <TableRow\n                    key={hash + txHash}\n                    // onClick={() => handleOnClick(hash)} sx={{ cursor: 'pointer' }}\n                  >\n                    <HashTableCell title={hash}>{hash}</HashTableCell>\n                  </TableRow>\n                ))\n              }\n            </TableEx>\n          </FlexCol>\n        )}\n      <FlexCol alignItems=\"stretch\" rowGap={1} mb={1}>\n        <HeadingPaper IconComponent={<VscSymbolNamespace />} heading=\"Payloads\" />\n        <BoundWitnessPayloadsTable boundwitness={boundWitness} />\n      </FlexCol>\n      {hasNonTxBoundWitnesses\n        ? (\n            <FlexCol alignItems=\"stretch\" rowGap={1} mb={1}>\n              <HeadingPaper IconComponent={<VscSymbolMethod />} heading=\"Bound Witnesses\" />\n              <TableEx>\n                <TableHead>\n                  <TableRow>\n                    <TableCell>\n                      Schema\n                    </TableCell>\n                  </TableRow>\n                </TableHead>\n                {\n                  nonTxBoundWitnesses?.map(([, bwHash]) => (\n                    <TableRow\n                      key={hash + bwHash}\n                      // onClick={() => handleOnClick(hash)} sx={{ cursor: 'pointer' }}\n                    >\n                      <HashTableCell title={hash}>{hash}</HashTableCell>\n                    </TableRow>\n                  ))\n                }\n              </TableEx>\n            </FlexCol>\n          )\n        : null}\n      <FlexCol alignItems=\"stretch\" rowGap={1} mb={1}>\n        <HeadingPaper IconComponent={<FaSignature />} heading=\"Signatures\" />\n        <BoundWitnessSignatureTable block={boundWitness} />\n      </FlexCol>\n    </FlexCol>\n  )\n}\n"],"mappings":"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","names":["Divider","TableCell","TableHead","TableRow","filterAs","ErrorRender","FlexCol","usePromise","isBoundWitness","PayloadBuilder","BoundWitnessPayloadsTable","BoundWitnessSignatureTable","BWActions","HashHeadingPaper","HeadingPaper","useTxsFromBlock","HashTableCell","usePayloadHash","TableEx","isTransactionBoundWitness","React","FaSignature","GrTransaction","VscSymbolMethod","VscSymbolNamespace","BlockBoundWitnessDetails","ref","block","paper","children","props","boundWitness","payloads","hash","usePayloadHash","transactions","txFromBlockError","useTxsFromBlock","nonTxBoundWitnesses","bwsFromBlockError","usePromise","bws","filterAs","payload","isTransactionBoundWitness","isBoundWitness","undefined","PayloadBuilder","hashPairs","hasNonTxBoundWitnesses","length","FlexCol","alignItems","rowGap","ErrorRender","error","scope","HashHeadingPaper","paperProps","sx","p","AdornmentEnd","BWActions","boundwitness","identiconProps","size","Divider","flexItem","mb","HeadingPaper","IconComponent","GrTransaction","heading","TableEx","TableHead","TableRow","TableCell","map","txHash","key","HashTableCell","title","VscSymbolNamespace","BoundWitnessPayloadsTable","VscSymbolMethod","bwHash","FaSignature","BoundWitnessSignatureTable"]}
+{"version":3,"sources":["../../src/components/BlockBoundWitnessDetails.tsx","../../src/components/BwPayloadTable.tsx"],"sourcesContent":["import { Divider } from '@mui/material'\nimport { filterAs } from '@xylabs/array'\nimport type { Hash } from '@xylabs/hex'\nimport { ErrorRender } from '@xylabs/react-error'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { usePromise } from '@xylabs/react-promise'\nimport type { BoundWitness } from '@xyo-network/boundwitness-model'\nimport { isBoundWitness } from '@xyo-network/boundwitness-model'\nimport { PayloadBuilder } from '@xyo-network/payload-builder'\nimport {\n  BoundWitnessPayloadsTable,\n  BoundWitnessSignatureTable,\n  BWActions,\n  HashHeadingPaper,\n  HeadingPaper,\n} from '@xyo-network/react-boundwitness-plugin'\nimport { useTxsFromBlock } from '@xyo-network/react-chain-blockchain'\nimport { useEvent } from '@xyo-network/react-event'\nimport { usePayloadHash } from '@xyo-network/react-shared'\nimport { isTransactionBoundWitness, type SignedHydratedBlock } from '@xyo-network/xl1-protocol'\nimport React, { useMemo } from 'react'\nimport { FaSignature } from 'react-icons/fa'\nimport { GrTransaction } from 'react-icons/gr'\nimport { VscSymbolMethod, VscSymbolNamespace } from 'react-icons/vsc'\n\nimport type { TransactionBoundWitnessEvents } from '../types/index.ts'\nimport { BWPayloadTableFlexbox } from './BwPayloadTable.tsx'\n\nconst formatBwsForTable = (pairs: [BoundWitness, Hash][]) => {\n  let hashes: Hash[] = []\n  let schemas: string[] = []\n  for (const [bw, hash] of pairs ?? []) {\n      hashes.push(hash)\n      schemas.push(bw?.schema ?? '')\n  }\n  return { hashes, schemas }\n}\n\nexport interface BoundWitnessDetailsProps extends FlexBoxProps {\n  block?: SignedHydratedBlock\n}\n\nexport const BlockBoundWitnessDetails = ({\n  block, paper, children, ...props\n}: BoundWitnessDetailsProps) => {\n  const boundWitness = block?.[0]\n  const payloads = block?.[1]\n\n  const hash = usePayloadHash(boundWitness)\n\n  const [transactions, txFromBlockError] = useTxsFromBlock(block)\n\n  const { hashes: txHashes, schemas: txSchemas } = useMemo(() => formatBwsForTable(transactions ?? []), [transactions])\n\n  const [nonTxBoundWitnesses, bwsFromBlockError] = usePromise(async () => {\n    const bws = filterAs(payloads ?? [], payload =>\n      (!isTransactionBoundWitness(payload) && isBoundWitness(payload)) ? payload : undefined)\n    return await PayloadBuilder.hashPairs(bws)\n    }, [payloads])\n\n  const { hashes: nonTxBwHashes, schemas: nonTxBwSchemas } = useMemo(() => formatBwsForTable(nonTxBoundWitnesses ?? []), [nonTxBoundWitnesses])\n  const hasNonTxBoundWitnesses = (nonTxBoundWitnesses?.length ?? 0) > 0\n\n  return (\n    <FlexCol alignItems=\"stretch\" rowGap={4} {...props}>\n      <ErrorRender error={txFromBlockError ?? bwsFromBlockError} scope=\"BlockBoundWitnessDetails.tsx\" />\n      <HashHeadingPaper\n        hash={hash}\n        paperProps={{ sx: { p: 2 } }}\n        AdornmentEnd={<BWActions boundwitness={boundWitness} />}\n        identiconProps={{ p: 0.75, size: 24 }}\n      />\n      <Divider flexItem />\n      {(transactions?.length ?? 0) > 0 && (\n        <BWPayloadTableFlexbox<TransactionBoundWitnessEvents>\n          IconComponent={<GrTransaction />}\n          eventNoun=\"transaction\"\n          hashes={txHashes}\n          headingTitle=\"Transactions\"\n          schemas={txSchemas}\n          sx={{ mb: 1 }}\n        />\n      )}\n      <FlexCol alignItems=\"stretch\" rowGap={1} mb={1}>\n        <HeadingPaper IconComponent={<VscSymbolNamespace />} heading=\"Payloads\" />\n        <BoundWitnessPayloadsTable boundwitness={boundWitness} />\n      </FlexCol>\n      {hasNonTxBoundWitnesses\n        ? (\n          <BWPayloadTableFlexbox<TransactionBoundWitnessEvents>\n            IconComponent={<VscSymbolMethod />}\n            eventNoun=\"boundwitness\"\n            hashes={nonTxBwHashes}\n            headingTitle=\"Bound Witnesses\"\n            schemas={nonTxBwSchemas}\n            sx={{ mb: 1 }}\n          />\n          )\n        : null}\n      <FlexCol alignItems=\"stretch\" rowGap={1} mb={1}>\n        <HeadingPaper IconComponent={<FaSignature />} heading=\"Signatures\" />\n        <BoundWitnessSignatureTable block={boundWitness} />\n      </FlexCol>\n    </FlexCol>\n  )\n}\n","import type { Hash } from '@xylabs/hex'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport {\n BoundWitnessPayloadTableBody, BoundWitnessPayloadTableHead, HeadingPaper,\n} from '@xyo-network/react-boundwitness-plugin'\nimport type { EventNoun, ExtendEventNoun } from '@xyo-network/react-event'\nimport { TableEx } from '@xyo-network/react-table'\nimport React from 'react'\nimport { VscSymbolMethod } from 'react-icons/vsc'\n\nexport interface BWPayloadTableFlexboxProps<TNoun extends ExtendEventNoun = EventNoun> extends FlexBoxProps {\n  IconComponent?: React.ReactNode\n  eventNoun?: TNoun\n  hashes?: Hash[]\n  headingTitle?: string\n  schemas?: string[]\n}\n\nexport const BWPayloadTableFlexbox = <TNoun extends ExtendEventNoun = EventNoun>({\n IconComponent,\n eventNoun,\n hashes,\n schemas,\n headingTitle,\n ...props\n}: BWPayloadTableFlexboxProps<TNoun>) => {\n  const resolvedIconComponent = IconComponent ?? <VscSymbolMethod />\n  return (\n    <FlexCol alignItems=\"stretch\" rowGap={1} {...props}>\n      <HeadingPaper IconComponent={resolvedIconComponent} heading={headingTitle} />\n      <TableEx>\n        <BoundWitnessPayloadTableHead />\n        <BoundWitnessPayloadTableBody<TNoun> payloadHashes={hashes} payloadSchemas={schemas} eventNoun={eventNoun} />\n      </TableEx>\n    </FlexCol>\n  )\n}\n"],"mappings":"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","names":["Divider","filterAs","ErrorRender","FlexCol","usePromise","isBoundWitness","PayloadBuilder","BoundWitnessPayloadsTable","BoundWitnessSignatureTable","BWActions","HashHeadingPaper","HeadingPaper","useTxsFromBlock","usePayloadHash","isTransactionBoundWitness","React","useMemo","FaSignature","GrTransaction","VscSymbolMethod","VscSymbolNamespace","FlexCol","BoundWitnessPayloadTableBody","BoundWitnessPayloadTableHead","HeadingPaper","TableEx","React","VscSymbolMethod","BWPayloadTableFlexbox","IconComponent","eventNoun","hashes","schemas","headingTitle","props","resolvedIconComponent","VscSymbolMethod","FlexCol","alignItems","rowGap","HeadingPaper","heading","TableEx","BoundWitnessPayloadTableHead","BoundWitnessPayloadTableBody","payloadHashes","payloadSchemas","formatBwsForTable","pairs","hashes","schemas","bw","hash","push","schema","BlockBoundWitnessDetails","block","paper","children","props","boundWitness","payloads","usePayloadHash","transactions","txFromBlockError","useTxsFromBlock","txHashes","txSchemas","useMemo","nonTxBoundWitnesses","bwsFromBlockError","usePromise","bws","filterAs","payload","isTransactionBoundWitness","isBoundWitness","undefined","PayloadBuilder","hashPairs","nonTxBwHashes","nonTxBwSchemas","hasNonTxBoundWitnesses","length","React","FlexCol","alignItems","rowGap","ErrorRender","error","scope","HashHeadingPaper","paperProps","sx","p","AdornmentEnd","BWActions","boundwitness","identiconProps","size","Divider","flexItem","BWPayloadTableFlexbox","IconComponent","GrTransaction","eventNoun","headingTitle","mb","HeadingPaper","VscSymbolNamespace","heading","BoundWitnessPayloadsTable","VscSymbolMethod","FaSignature","BoundWitnessSignatureTable"]}

package/dist/types/components/BlockBoundWitnessDetails.d.ts

@@ -1,10 +1,7 @@
 import type { FlexBoxProps } from '@xylabs/react-flexbox';
 import { type SignedHydratedBlock } from '@xyo-network/xl1-protocol';
-import React from 'react';
 export interface BoundWitnessDetailsProps extends FlexBoxProps {
     block?: SignedHydratedBlock;
 }
-export declare const BlockBoundWitnessDetails: ({ ref, block, paper, children, ...props }: BoundWitnessDetailsProps & {
-    ref?: React.Ref<unknown | null>;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const BlockBoundWitnessDetails: ({ block, paper, children, ...props }: BoundWitnessDetailsProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BlockBoundWitnessDetails.d.ts.map

package/dist/types/components/BlockBoundWitnessDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockBoundWitnessDetails.d.ts","sourceRoot":"","sources":["../../../src/components/BlockBoundWitnessDetails.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAezD,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAC/F,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,KAAK,CAAC,EAAE,mBAAmB,CAAA;CAC5B;AAED,eAAO,MAAM,wBAAwB,GAAI,2CAEtC,wBAAwB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;CAAE,4CAsFhE,CAAA"}
+{"version":3,"file":"BlockBoundWitnessDetails.d.ts","sourceRoot":"","sources":["../../../src/components/BlockBoundWitnessDetails.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAgBzD,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAmB/F,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,KAAK,CAAC,EAAE,mBAAmB,CAAA;CAC5B;AAED,eAAO,MAAM,wBAAwB,GAAI,sCAEtC,wBAAwB,4CA6D1B,CAAA"}

package/dist/types/components/BwPayloadTable.d.ts

@@ -0,0 +1,13 @@
+import type { Hash } from '@xylabs/hex';
+import type { FlexBoxProps } from '@xylabs/react-flexbox';
+import type { EventNoun, ExtendEventNoun } from '@xyo-network/react-event';
+import React from 'react';
+export interface BWPayloadTableFlexboxProps<TNoun extends ExtendEventNoun = EventNoun> extends FlexBoxProps {
+    IconComponent?: React.ReactNode;
+    eventNoun?: TNoun;
+    hashes?: Hash[];
+    headingTitle?: string;
+    schemas?: string[];
+}
+export declare const BWPayloadTableFlexbox: <TNoun extends ExtendEventNoun = EventNoun>({ IconComponent, eventNoun, hashes, schemas, headingTitle, ...props }: BWPayloadTableFlexboxProps<TNoun>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BwPayloadTable.d.ts.map

package/dist/types/components/BwPayloadTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BwPayloadTable.d.ts","sourceRoot":"","sources":["../../../src/components/BwPayloadTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAKzD,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1E,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,0BAA0B,CAAC,KAAK,SAAS,eAAe,GAAG,SAAS,CAAE,SAAQ,YAAY;IACzG,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,MAAM,CAAC,EAAE,IAAI,EAAE,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;CACnB;AAED,eAAO,MAAM,qBAAqB,GAAI,KAAK,SAAS,eAAe,GAAG,SAAS,EAAE,uEAO9E,0BAA0B,CAAC,KAAK,CAAC,4CAWnC,CAAA"}

package/dist/types/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './BlockBoundWitnessDetails.tsx';
+export * from './BwPayloadTable.tsx';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA"}

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components/index.ts';
+export * from './types/index.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA"}

package/dist/types/types/CustomBWEvents.d.ts

@@ -0,0 +1,3 @@
+import type { ExtendEventNoun } from '@xyo-network/react-event';
+export type TransactionBoundWitnessEvents = ExtendEventNoun<'transaction'>;
+//# sourceMappingURL=CustomBWEvents.d.ts.map

package/dist/types/types/CustomBWEvents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomBWEvents.d.ts","sourceRoot":"","sources":["../../../src/types/CustomBWEvents.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC/D,MAAM,MAAM,6BAA6B,GAAG,eAAe,CAAC,aAAa,CAAC,CAAA"}

package/dist/types/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CustomBWEvents.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-boundwitness",
-  "version": "1.3.19",
+  "version": "1.3.21",
   "description": "XYO Layer One React SDK BoundWitness",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -41,7 +41,8 @@
     "@xyo-network/boundwitness-model": "^3.15.5",
     "@xyo-network/payload-builder": "^3.15.5",
     "@xyo-network/react-boundwitness-plugin": "^5.3.2",
-    "@xyo-network/react-chain-blockchain": "^1.3.19",
+    "@xyo-network/react-chain-blockchain": "^1.3.21",
+    "@xyo-network/react-event": "^5.3.2",
     "@xyo-network/react-shared": "^5.3.2",
     "@xyo-network/react-table": "^5.3.2",
     "@xyo-network/xl1-protocol": "^1.3.13",
@@ -54,7 +55,7 @@
     "@mui/material": "^7.1.0",
     "@xylabs/ts-scripts-yarn3": "^6.5.5",
     "@xylabs/tsconfig-react": "^6.5.5",
-    "@xyo-network/react-chain-shared": "^1.3.19",
+    "@xyo-network/react-chain-shared": "^1.3.21",
     "knip": "^5.55.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

package/src/components/BlockBoundWitnessDetails.stories.tsx

@@ -1,9 +1,11 @@
 import {
-  Alert, AlertTitle, List, ListItem, Stack,
+  Alert, AlertTitle,
+  Snackbar,
 } from '@mui/material'
 import type { Meta, StoryFn } from '@storybook/react'
 import { type BlockHeaderEventNouns, useBlockHeadingEvents } from '@xyo-network/react-chain-blockchain'
 import { buildRandomBlockChain } from '@xyo-network/react-chain-shared'
+import type { Event } from '@xyo-network/react-event'
 import React, { useState } from 'react'
 
 import { BlockBoundWitnessDetails } from './BlockBoundWitnessDetails.tsx'
@@ -17,46 +19,26 @@ const blocks = await buildRandomBlockChain()
 
 const Template: StoryFn<typeof BlockBoundWitnessDetails> = args => <BlockBoundWitnessDetails {...args} />
 
-type EventData = {
-  data: string | undefined
-  noun: BlockHeaderEventNouns
-  verb: string
-}
-
-// TODO - bring back once we add events to the BlockBoundWitnessDetails tx table
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const TemplateWithEvents: StoryFn<typeof BlockBoundWitnessDetails> = (args) => {
-  const [eventData, setEventData] = useState<EventData[]>([])
-  const [ref] = useBlockHeadingEvents<HTMLDivElement>((noun, verb, data) => {
-    setEventData(previous => [...previous, {
-      noun, verb, data,
-    }])
-  })
+  const [event, setEvent] = useState<Event<BlockHeaderEventNouns>>()
+  const [ref] = useBlockHeadingEvents((noun, verb, data) => setEvent({
+    noun, verb, data,
+  }))
 
   return (
-    <div ref={ref}>
-      <BlockBoundWitnessDetails {...args} />
-      <Stack gap={2} flexDirection="column">
-        {eventData.length > 0 && eventData.map(event => (
-          <Alert key={event.data} sx={{ display: 'flex' }}>
-            <AlertTitle>Event Data</AlertTitle>
-            <List>
-              <ListItem>
-                Noun:
-                {event.noun}
-              </ListItem>
-              <ListItem>
-                Verb:
-                {event.verb}
-              </ListItem>
-            </List>
-            <pre>
-              <code>{event.data}</code>
-            </pre>
-          </Alert>
-        ))}
-      </Stack>
-    </div>
+    <>
+      <BlockBoundWitnessDetails ref={ref} {...args} />
+      <Snackbar open={!!event} onClose={() => setEvent(undefined)}>
+        <Alert>
+          <AlertTitle>
+            Event -
+            {' '}
+            {event?.noun}
+          </AlertTitle>
+          <pre>{JSON.stringify(event, null, 2)}</pre>
+        </Alert>
+      </Snackbar>
+    </>
   )
 }
 
@@ -66,7 +48,9 @@ Default.args = {}
 const WithData = Template.bind({})
 WithData.args = { block: blocks[3] }
 
-// const WithDataEvents = TemplateWithEvents.bind({})
-// WithDataEvents.args = { block: blocks[0], transactions: undefined }
+const WithDataEvents = TemplateWithEvents.bind({})
+WithDataEvents.args = { block: blocks[3] }
 
-export { Default, WithData }
+export {
+  Default, WithData, WithDataEvents,
+}

package/src/components/BlockBoundWitnessDetails.tsx

@@ -1,11 +1,11 @@
-import {
-  Divider, TableCell, TableHead, TableRow,
-} from '@mui/material'
+import { Divider } from '@mui/material'
 import { filterAs } from '@xylabs/array'
+import type { Hash } from '@xylabs/hex'
 import { ErrorRender } from '@xylabs/react-error'
 import type { FlexBoxProps } from '@xylabs/react-flexbox'
 import { FlexCol } from '@xylabs/react-flexbox'
 import { usePromise } from '@xylabs/react-promise'
+import type { BoundWitness } from '@xyo-network/boundwitness-model'
 import { isBoundWitness } from '@xyo-network/boundwitness-model'
 import { PayloadBuilder } from '@xyo-network/payload-builder'
 import {
@@ -16,21 +16,34 @@ import {
   HeadingPaper,
 } from '@xyo-network/react-boundwitness-plugin'
 import { useTxsFromBlock } from '@xyo-network/react-chain-blockchain'
-import { HashTableCell, usePayloadHash } from '@xyo-network/react-shared'
-import { TableEx } from '@xyo-network/react-table'
+import { useEvent } from '@xyo-network/react-event'
+import { usePayloadHash } from '@xyo-network/react-shared'
 import { isTransactionBoundWitness, type SignedHydratedBlock } from '@xyo-network/xl1-protocol'
-import React from 'react'
+import React, { useMemo } from 'react'
 import { FaSignature } from 'react-icons/fa'
 import { GrTransaction } from 'react-icons/gr'
 import { VscSymbolMethod, VscSymbolNamespace } from 'react-icons/vsc'
 
+import type { TransactionBoundWitnessEvents } from '../types/index.ts'
+import { BWPayloadTableFlexbox } from './BwPayloadTable.tsx'
+
+const formatBwsForTable = (pairs: [BoundWitness, Hash][]) => {
+  let hashes: Hash[] = []
+  let schemas: string[] = []
+  for (const [bw, hash] of pairs ?? []) {
+      hashes.push(hash)
+      schemas.push(bw?.schema ?? '')
+  }
+  return { hashes, schemas }
+}
+
 export interface BoundWitnessDetailsProps extends FlexBoxProps {
   block?: SignedHydratedBlock
 }
 
 export const BlockBoundWitnessDetails = ({
-  ref, block, paper, children, ...props
-}: BoundWitnessDetailsProps & { ref?: React.Ref<unknown | null> }) => {
+  block, paper, children, ...props
+}: BoundWitnessDetailsProps) => {
   const boundWitness = block?.[0]
   const payloads = block?.[1]
 
@@ -38,13 +51,16 @@ export const BlockBoundWitnessDetails = ({
 
   const [transactions, txFromBlockError] = useTxsFromBlock(block)
 
+  const { hashes: txHashes, schemas: txSchemas } = useMemo(() => formatBwsForTable(transactions ?? []), [transactions])
+
   const [nonTxBoundWitnesses, bwsFromBlockError] = usePromise(async () => {
     const bws = filterAs(payloads ?? [], payload =>
       (!isTransactionBoundWitness(payload) && isBoundWitness(payload)) ? payload : undefined)
     return await PayloadBuilder.hashPairs(bws)
     }, [payloads])
 
-    const hasNonTxBoundWitnesses = (nonTxBoundWitnesses?.length ?? 0) > 0
+  const { hashes: nonTxBwHashes, schemas: nonTxBwSchemas } = useMemo(() => formatBwsForTable(nonTxBoundWitnesses ?? []), [nonTxBoundWitnesses])
+  const hasNonTxBoundWitnesses = (nonTxBoundWitnesses?.length ?? 0) > 0
 
   return (
     <FlexCol alignItems="stretch" rowGap={4} {...props}>
@@ -57,57 +73,29 @@ export const BlockBoundWitnessDetails = ({
       />
       <Divider flexItem />
       {(transactions?.length ?? 0) > 0 && (
-          <FlexCol alignItems="stretch" rowGap={1} mb={1}>
-            <HeadingPaper IconComponent={<GrTransaction />} heading="Transactions" />
-            <TableEx>
-              <TableHead>
-                <TableRow>
-                  <TableCell>
-                    Hash
-                  </TableCell>
-                </TableRow>
-              </TableHead>
-              {
-                transactions?.map(([, txHash]) => (
-                  <TableRow
-                    key={hash + txHash}
-                    // onClick={() => handleOnClick(hash)} sx={{ cursor: 'pointer' }}
-                  >
-                    <HashTableCell title={hash}>{hash}</HashTableCell>
-                  </TableRow>
-                ))
-              }
-            </TableEx>
-          </FlexCol>
-        )}
+        <BWPayloadTableFlexbox<TransactionBoundWitnessEvents>
+          IconComponent={<GrTransaction />}
+          eventNoun="transaction"
+          hashes={txHashes}
+          headingTitle="Transactions"
+          schemas={txSchemas}
+          sx={{ mb: 1 }}
+        />
+      )}
       <FlexCol alignItems="stretch" rowGap={1} mb={1}>
         <HeadingPaper IconComponent={<VscSymbolNamespace />} heading="Payloads" />
         <BoundWitnessPayloadsTable boundwitness={boundWitness} />
       </FlexCol>
       {hasNonTxBoundWitnesses
         ? (
-            <FlexCol alignItems="stretch" rowGap={1} mb={1}>
-              <HeadingPaper IconComponent={<VscSymbolMethod />} heading="Bound Witnesses" />
-              <TableEx>
-                <TableHead>
-                  <TableRow>
-                    <TableCell>
-                      Schema
-                    </TableCell>
-                  </TableRow>
-                </TableHead>
-                {
-                  nonTxBoundWitnesses?.map(([, bwHash]) => (
-                    <TableRow
-                      key={hash + bwHash}
-                      // onClick={() => handleOnClick(hash)} sx={{ cursor: 'pointer' }}
-                    >
-                      <HashTableCell title={hash}>{hash}</HashTableCell>
-                    </TableRow>
-                  ))
-                }
-              </TableEx>
-            </FlexCol>
+          <BWPayloadTableFlexbox<TransactionBoundWitnessEvents>
+            IconComponent={<VscSymbolMethod />}
+            eventNoun="boundwitness"
+            hashes={nonTxBwHashes}
+            headingTitle="Bound Witnesses"
+            schemas={nonTxBwSchemas}
+            sx={{ mb: 1 }}
+          />
           )
         : null}
       <FlexCol alignItems="stretch" rowGap={1} mb={1}>

package/src/components/BwPayloadTable.tsx

@@ -0,0 +1,38 @@
+import type { Hash } from '@xylabs/hex'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexCol } from '@xylabs/react-flexbox'
+import {
+ BoundWitnessPayloadTableBody, BoundWitnessPayloadTableHead, HeadingPaper,
+} from '@xyo-network/react-boundwitness-plugin'
+import type { EventNoun, ExtendEventNoun } from '@xyo-network/react-event'
+import { TableEx } from '@xyo-network/react-table'
+import React from 'react'
+import { VscSymbolMethod } from 'react-icons/vsc'
+
+export interface BWPayloadTableFlexboxProps<TNoun extends ExtendEventNoun = EventNoun> extends FlexBoxProps {
+  IconComponent?: React.ReactNode
+  eventNoun?: TNoun
+  hashes?: Hash[]
+  headingTitle?: string
+  schemas?: string[]
+}
+
+export const BWPayloadTableFlexbox = <TNoun extends ExtendEventNoun = EventNoun>({
+ IconComponent,
+ eventNoun,
+ hashes,
+ schemas,
+ headingTitle,
+ ...props
+}: BWPayloadTableFlexboxProps<TNoun>) => {
+  const resolvedIconComponent = IconComponent ?? <VscSymbolMethod />
+  return (
+    <FlexCol alignItems="stretch" rowGap={1} {...props}>
+      <HeadingPaper IconComponent={resolvedIconComponent} heading={headingTitle} />
+      <TableEx>
+        <BoundWitnessPayloadTableHead />
+        <BoundWitnessPayloadTableBody<TNoun> payloadHashes={hashes} payloadSchemas={schemas} eventNoun={eventNoun} />
+      </TableEx>
+    </FlexCol>
+  )
+}

package/src/components/index.ts

@@ -1 +1,2 @@
 export * from './BlockBoundWitnessDetails.tsx'
+export * from './BwPayloadTable.tsx'

package/src/index.ts

@@ -1 +1,2 @@
 export * from './components/index.ts'
+export * from './types/index.ts'

package/src/types/CustomBWEvents.ts

@@ -0,0 +1,2 @@
+import type { ExtendEventNoun } from '@xyo-network/react-event'
+export type TransactionBoundWitnessEvents = ExtendEventNoun<'transaction'>

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './CustomBWEvents.ts'