@xyo-network/react-chain-boundwitness 1.0.1

package/src/components/_shared/Signatures/SignatureTable.tsx

@@ -0,0 +1,93 @@
+import {
+  TableBody, TableHead, TableRow, Typography,
+} from '@mui/material'
+import { BoundWitness } from '@xyo-network/boundwitness-model'
+import { TableRowNoData } from '@xyo-network/react-payload-table'
+import { usePayloadHash } from '@xyo-network/react-shared'
+import {
+  TableCellEx, TableEx, TableExProps,
+} from '@xyo-network/react-table'
+import React from 'react'
+
+import { BoundWitnessSignatureTableRow } from './SignatureTableRow.tsx'
+
+export interface BoundWitnessSignatureTableProps extends TableExProps {
+  block?: BoundWitness
+}
+
+interface SignatureData {
+  address: string
+  previous_hash: string | null
+  signature?: string
+}
+
+const signatureDataFromBoundWitness = (boundWitness: BoundWitness) => {
+  const result: SignatureData[] = []
+  for (let i = 0; i < boundWitness.addresses.length; i++) {
+    result.push({
+      address: boundWitness.addresses[i],
+      previous_hash: boundWitness.previous_hashes?.[i],
+      signature: boundWitness.$signatures?.[i] ?? [],
+    })
+  }
+  return result
+}
+
+export const BoundWitnessSignatureTable: React.FC<BoundWitnessSignatureTableProps> = ({ block, ...props }) => {
+  const signatureData = block ? signatureDataFromBoundWitness(block) : []
+  const hash = usePayloadHash(block)
+
+  return (
+    <TableEx {...props}>
+      <TableHead>
+        <TableRow>
+          <TableCellEx align="left">
+            <Typography variant="caption">
+              <strong>Address</strong>
+            </Typography>
+          </TableCellEx>
+          <TableCellEx
+            sx={{ display: { md: 'table-cell', xs: 'none' } }}
+            align="center"
+            width="10px"
+          >
+            <Typography variant="caption">
+              <strong>Previous</strong>
+            </Typography>
+          </TableCellEx>
+          <TableCellEx
+            sx={{ display: { sm: 'table-cell', xs: 'none' } }}
+            align="center"
+            width="10px"
+          >
+            <Typography variant="caption">
+              <strong>Signature</strong>
+            </Typography>
+          </TableCellEx>
+          <TableCellEx align="center" width="10px">
+            <Typography variant="caption">
+              <strong>Valid</strong>
+            </Typography>
+          </TableCellEx>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {!signatureData || signatureData.length === 0
+          ? <TableRowNoData additionalCells={3} />
+          : null}
+        {signatureData.map((data, index) => {
+          return (
+            <BoundWitnessSignatureTableRow
+              key={`${data.signature}-${data.previous_hash}-${index}`}
+              address={data.address}
+              previousHash={data.previous_hash}
+              hash={hash}
+              signature={data.signature}
+              clickableFields={['address']}
+            />
+          )
+        })}
+      </TableBody>
+    </TableEx>
+  )
+}

package/src/components/_shared/Signatures/SignatureTableRow.tsx

@@ -0,0 +1,88 @@
+import {
+  Link, TableCell, TableRow, TableRowProps,
+  Typography,
+} from '@mui/material'
+import { toUint8Array } from '@xylabs/arraybuffer'
+import { ellipsize } from '@xylabs/eth-address'
+import { usePromise } from '@xylabs/react-promise'
+import { BoundWitnessValidator } from '@xyo-network/boundwitness-validator'
+import { useEvent } from '@xyo-network/react-event'
+import { AddressTableCell } from '@xyo-network/react-shared'
+import React from 'react'
+// eslint-disable-next-line import-x/no-internal-modules
+import { MdClear, MdDone } from 'react-icons/md'
+
+type clickableFields = 'address' | 'signature'
+
+export interface BoundWitnessSignatureTableRowProps extends TableRowProps {
+  address?: string
+  archive?: string
+  clickableFields?: clickableFields[]
+  hash?: string
+  previousHash?: string | null
+  signature?: string
+}
+
+export const BoundWitnessSignatureTableRow: React.FC<BoundWitnessSignatureTableRowProps> = ({
+  address,
+  archive,
+  clickableFields,
+  hash,
+  previousHash,
+  signature,
+  ...props
+}) => {
+  const [errors] = usePromise(
+    async () =>
+      hash && address
+        ? await BoundWitnessValidator.validateSignature(
+          toUint8Array(hash).buffer,
+          toUint8Array(address).buffer,
+          toUint8Array(signature)?.buffer,
+        )
+        : [],
+    [hash, address, signature],
+  )
+
+  const [addressRef, addressDispatch] = useEvent<HTMLTableCellElement>()
+  const [signatureRef, signatureDispatch] = useEvent<HTMLTableCellElement>()
+
+  const formattedHash = (hash?: string | null) => (hash ? ellipsize(hash, 8) : '-')
+
+  return (
+    <TableRow {...props}>
+      <AddressTableCell
+        ref={addressRef}
+        archive={archive}
+        value={address}
+        onClick={() => addressDispatch('address', 'click', address)}
+        link={clickableFields?.includes('address')}
+      />
+      <TableCell
+        sx={{ display: { md: 'table-cell', xs: 'none' } }}
+        align="center"
+      >
+        <Typography variant="body2" fontFamily="monospace">
+          {formattedHash(previousHash)}
+        </Typography>
+      </TableCell>
+      <TableCell
+        sx={{ display: { sm: 'table-cell', xs: 'none' } }}
+        align="center"
+      >
+        <Typography variant="body2" fontFamily="monospace" ref={signatureRef} onClick={() => signatureDispatch('signature', 'click', signature)}>
+          {clickableFields?.includes('signature')
+            ? <Link>{formattedHash(signature)}</Link>
+            : formattedHash(signature)}
+        </Typography>
+      </TableCell>
+      <TableCell key="valid" align="center">
+        {errors === undefined
+          ? <MdDone fontSize={18} color="gray" />
+          : errors?.length === 0
+            ? <MdDone fontSize={18} color="green" />
+            : <MdClear color="red" fontSize={18} />}
+      </TableCell>
+    </TableRow>
+  )
+}

package/src/components/_shared/Signatures/index.ts

@@ -0,0 +1,2 @@
+export * from './SignatureDetails.tsx'
+export * from './SignatureTable.tsx'

package/src/components/_shared/index.ts

@@ -0,0 +1,4 @@
+export * from './Actions/index.ts'
+export * from './Heading/index.ts'
+export * from './Payloads/index.ts'
+export * from './Signatures/index.ts'

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './_shared/index.ts'
+export * from './Card/index.ts'
+export * from './Details/index.ts'

package/src/index.ts

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

package/typedoc.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "entryPoints": ["src/index.ts"],
+  "tsconfig": "./tsconfig.typedoc.json"
+}

package/xy.config.ts

@@ -0,0 +1,10 @@
+import { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
+const config: XyTsupConfig = {
+  compile: {
+    browser: { src: true },
+    node: {},
+    neutral: {},
+  },
+}
+
+export default config