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

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/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/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.14",
   "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.14",
+    "@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>
+  )
+}