@xyo-network/react-chain-boundwitness 1.3.13 → 1.3.15

package/README.md

@@ -1,6 +1,16 @@
+# @xyo-network/react-chain-boundwitness
+
 [![logo][]](https://xyo.network)
 
-Part of [@xyo-network/sdk-xyo-react](https://www.npmjs.com/package/@xyo-network/sdk-xyo-react)
+Version: 1.3.13
+
+XYO Layer One React SDK BoundWitness
+
+## Documentation
+
+[TypeDoc Generated Documentation](https://gitbook.xyo.network/xyo-data-lab/xyo-reference/package-documentation/xyo-network__react-chain-boundwitness)
+
+Part of [sdk-xyo-client-js](https://www.npmjs.com/package/@xyo-network/sdk-xyo-client-js)
 
 ## License
 

package/dist/browser/index.mjs

@@ -1,6 +1,101 @@
-// src/index.ts
-var index_default = {};
+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 { filterAs } from "@xylabs/array";
+import { ErrorRender } from "@xylabs/react-error";
+import { FlexCol } 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 { useTxsFromBlock } from "@xyo-network/react-chain-blockchain";
+import { HashTableCell, usePayloadHash } from "@xyo-network/react-shared";
+import { TableEx } from "@xyo-network/react-table";
+import { isTransactionBoundWitness } from "@xyo-network/xl1-protocol";
+import React 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 }) => {
+  const boundWitness = block?.[0];
+  const payloads = block?.[1];
+  const hash = usePayloadHash(boundWitness);
+  const [transactions, txFromBlockError] = useTxsFromBlock(block);
+  const [nonTxBoundWitnesses, bwsFromBlockError] = usePromise(async () => {
+    const bws = filterAs(payloads ?? [], (payload) => !isTransactionBoundWitness(payload) && isBoundWitness(payload) ? payload : void 0);
+    return await PayloadBuilder.hashPairs(bws);
+  }, [
+    payloads
+  ]);
+  const hasNonTxBoundWitnesses = (nonTxBoundWitnesses?.length ?? 0) > 0;
+  return /* @__PURE__ */ React.createElement(FlexCol, {
+    alignItems: "stretch",
+    rowGap: 4,
+    ...props
+  }, /* @__PURE__ */ React.createElement(ErrorRender, {
+    error: txFromBlockError ?? bwsFromBlockError,
+    scope: "BlockBoundWitnessDetails.tsx"
+  }), /* @__PURE__ */ React.createElement(HashHeadingPaper, {
+    hash,
+    paperProps: {
+      sx: {
+        p: 2
+      }
+    },
+    AdornmentEnd: /* @__PURE__ */ React.createElement(BWActions, {
+      boundwitness: boundWitness
+    }),
+    identiconProps: {
+      p: 0.75,
+      size: 24
+    }
+  }), /* @__PURE__ */ React.createElement(Divider, {
+    flexItem: true
+  }), transactions?.length && /* @__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, {
+    alignItems: "stretch",
+    rowGap: 1,
+    mb: 1
+  }, /* @__PURE__ */ React.createElement(HeadingPaper, {
+    IconComponent: /* @__PURE__ */ React.createElement(VscSymbolNamespace, null),
+    heading: "Payloads"
+  }), /* @__PURE__ */ React.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, {
+    alignItems: "stretch",
+    rowGap: 1,
+    mb: 1
+  }, /* @__PURE__ */ React.createElement(HeadingPaper, {
+    IconComponent: /* @__PURE__ */ React.createElement(FaSignature, null),
+    heading: "Signatures"
+  }), /* @__PURE__ */ React.createElement(BoundWitnessSignatureTable, {
+    block: boundWitness
+  })));
+}, "BlockBoundWitnessDetails");
 export {
-  index_default as default
+  BlockBoundWitnessDetails
 };
 //# sourceMappingURL=index.mjs.map

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export default {}\n"],"mappings":";AAAA,IAAA,gBAAe,CAAC;","names":[]}
+{"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 && (\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"]}

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

@@ -0,0 +1,10 @@
+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;
+//# sourceMappingURL=BlockBoundWitnessDetails.d.ts.map

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

@@ -0,0 +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"}

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

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

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

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

package/dist/types/index.d.ts

@@ -1,3 +1,2 @@
-declare const _default: {};
-export default _default;
+export * from './components/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,wBAAiB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-boundwitness",
-  "version": "1.3.13",
+  "version": "1.3.15",
   "description": "XYO Layer One React SDK BoundWitness",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -33,10 +33,30 @@
   },
   "module": "dist/browser/index.mjs",
   "types": "dist/types/index.d.ts",
+  "dependencies": {
+    "@xylabs/array": "^4.8.9",
+    "@xylabs/react-error": "^6.2.19",
+    "@xylabs/react-promise": "^6.2.19",
+    "@xyo-network/payload-builder": "^3.14.16",
+    "@xyo-network/react-boundwitness-plugin": "^5.2.7",
+    "@xyo-network/react-chain-blockchain": "^1.3.15",
+    "@xyo-network/react-payload-details": "^5.2.7",
+    "@xyo-network/react-shared": "^5.2.7",
+    "@xyo-network/react-table": "^5.2.7",
+    "@xyo-network/xl1-protocol": "^1.3.11",
+    "react-icons": "^5.5.0"
+  },
   "devDependencies": {
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@mui/icons-material": ">=6 <8",
+    "@mui/material": ">=6 <8",
     "@xylabs/ts-scripts-yarn3": "^6.5.5",
     "@xylabs/tsconfig-react": "^6.5.5",
     "knip": "^5.52.0",
+    "react": "^19",
+    "react-dom": "^19",
+    "react-router-dom": "^7",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {

package/src/components/BlockBoundWitnessDetails.stories.tsx

@@ -0,0 +1,72 @@
+import {
+  Alert, AlertTitle, List, ListItem, Stack,
+} 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 React, { useState } from 'react'
+
+import { BlockBoundWitnessDetails } from './BlockBoundWitnessDetails.tsx'
+
+export default {
+  title: 'BoundWitness/Block/Details/Flexbox',
+  component: BlockBoundWitnessDetails,
+} as Meta
+
+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,
+    }])
+  })
+
+  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>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithData = Template.bind({})
+WithData.args = { block: blocks[3] }
+
+// const WithDataEvents = TemplateWithEvents.bind({})
+// WithDataEvents.args = { block: blocks[0], transactions: undefined }
+
+export { Default, WithData }

package/src/components/BlockBoundWitnessDetails.tsx

@@ -0,0 +1,119 @@
+import {
+  Divider, TableCell, TableHead, TableRow,
+} from '@mui/material'
+import { filterAs } from '@xylabs/array'
+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 { 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 { useTxsFromBlock } from '@xyo-network/react-chain-blockchain'
+import { HashTableCell, usePayloadHash } from '@xyo-network/react-shared'
+import { TableEx } from '@xyo-network/react-table'
+import { isTransactionBoundWitness, type SignedHydratedBlock } from '@xyo-network/xl1-protocol'
+import React from 'react'
+import { FaSignature } from 'react-icons/fa'
+import { GrTransaction } from 'react-icons/gr'
+import { VscSymbolMethod, VscSymbolNamespace } from 'react-icons/vsc'
+
+export interface BoundWitnessDetailsProps extends FlexBoxProps {
+  block?: SignedHydratedBlock
+}
+
+export const BlockBoundWitnessDetails = ({
+  ref, block, paper, children, ...props
+}: BoundWitnessDetailsProps & { ref?: React.Ref<unknown | null> }) => {
+  const boundWitness = block?.[0]
+  const payloads = block?.[1]
+
+  const hash = usePayloadHash(boundWitness)
+
+  const [transactions, txFromBlockError] = useTxsFromBlock(block)
+
+  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
+
+  return (
+    <FlexCol alignItems="stretch" rowGap={4} {...props}>
+      <ErrorRender error={txFromBlockError ?? bwsFromBlockError} scope="BlockBoundWitnessDetails.tsx" />
+      <HashHeadingPaper
+        hash={hash}
+        paperProps={{ sx: { p: 2 } }}
+        AdornmentEnd={<BWActions boundwitness={boundWitness} />}
+        identiconProps={{ p: 0.75, size: 24 }}
+      />
+      <Divider flexItem />
+      {transactions?.length && (
+          <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>
+        )}
+      <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>
+          )
+        : null}
+      <FlexCol alignItems="stretch" rowGap={1} mb={1}>
+        <HeadingPaper IconComponent={<FaSignature />} heading="Signatures" />
+        <BoundWitnessSignatureTable block={boundWitness} />
+      </FlexCol>
+    </FlexCol>
+  )
+}

package/src/components/index.ts

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

package/src/index.ts

@@ -1 +1 @@
-export default {}
+export * from './components/index.ts'