@xyo-network/react-chain-boundwitness 1.0.1

package/src/components/_shared/Actions/previous-hash/DialogContent.tsx

@@ -0,0 +1,43 @@
+import { ContentCopy } from '@mui/icons-material'
+import {
+  Alert, AlertTitle, Collapse,
+  DialogContent, DialogContentProps,
+} from '@mui/material'
+import { FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'
+import { BoundWitness } from '@xyo-network/boundwitness-model'
+import { EllipsizeBox } from '@xyo-network/react-shared'
+import React, { useState } from 'react'
+
+export interface PreviousHashDialogProps extends DialogContentProps {
+  boundwitness?: BoundWitness
+}
+
+export const PreviousHashDialogContent: React.FC<PreviousHashDialogProps> = ({ boundwitness, ...props }) => {
+  const [copied, setCopied] = useState(false)
+
+  const onCopy = async () => {
+    await navigator.clipboard.writeText(boundwitness?.previous_hashes[0] ?? '')
+    setCopied(true)
+    setTimeout(() => {
+      setCopied(false)
+    }, 5000)
+  }
+
+  return (
+    <DialogContent {...props}>
+      <FlexGrowRow columnGap={2}>
+        <ContentCopy sx={{ cursor: 'pointer' }} onClick={() => void onCopy()} />
+        <EllipsizeBox flexGrow="1" typographyProps={{ variant: 'body1' }}>
+          {boundwitness?.previous_hashes.join(',')}
+        </EllipsizeBox>
+      </FlexGrowRow>
+      <FlexRow>
+        <Collapse in={copied} unmountOnExit>
+          <Alert>
+            <AlertTitle>Previous hash copied to clipboard</AlertTitle>
+          </Alert>
+        </Collapse>
+      </FlexRow>
+    </DialogContent>
+  )
+}

package/src/components/_shared/Actions/previous-hash/MenuItem.tsx

@@ -0,0 +1,35 @@
+import { Link } from '@mui/icons-material'
+import { ListItemIcon, MenuItem } from '@mui/material'
+import React, { MouseEventHandler, useState } from 'react'
+
+import { ActionMenuItemProps, MenuItemDialog } from '../_shared/index.ts'
+import { PreviousHashDialogContent } from './DialogContent.tsx'
+
+export interface BWPreviousHashMenuItemProps extends ActionMenuItemProps {}
+
+export const BWPreviousHashMenuItem: React.FC<BWPreviousHashMenuItemProps> = ({
+  boundwitness, onClick, onDialogClose, ...props
+}) => {
+  const [open, setOpen] = useState(false)
+  const onClose = () => {
+    onDialogClose?.()
+    setOpen(false)
+  }
+
+  const handleMenuClick: MouseEventHandler<HTMLLIElement> = (e) => {
+    onClick?.(e)
+    setOpen(true)
+  }
+
+  return (
+    <>
+      <MenuItem onClick={handleMenuClick} {...props}>
+        <ListItemIcon><Link /></ListItemIcon>
+        Previous Hash
+      </MenuItem>
+      <MenuItemDialog open={open} onClose={onClose} dialogTitle="Previous Hash">
+        <PreviousHashDialogContent boundwitness={boundwitness} />
+      </MenuItemDialog>
+    </>
+  )
+}

package/src/components/_shared/Actions/previous-hash/QuickTipButton.tsx

@@ -0,0 +1,31 @@
+import { LinkRounded as LinkRoundedIcon } from '@mui/icons-material'
+import { ellipsize } from '@xylabs/eth-address'
+import { QuickTipButton, QuickTipButtonProps } from '@xylabs/react-quick-tip-button'
+import { BoundWitness } from '@xyo-network/boundwitness-model'
+import React from 'react'
+
+import { PreviousHashDialogContent } from './DialogContent.tsx'
+
+export interface BWPreviousHashQuickTipButtonProps extends QuickTipButtonProps {
+  boundwitness?: BoundWitness
+}
+
+export const BWPreviousHashQuickTipButton: React.FC<BWPreviousHashQuickTipButtonProps> = ({ boundwitness, ...props }) => {
+  const previousHash = boundwitness?.previous_hashes[0] ?? null
+  const formattedPreviousHash = previousHash === null ? 'No Previous Hash' : `Previous Hash - ${ellipsize(previousHash, 8)}`
+
+  return (
+    <QuickTipButton
+      Icon={LinkRoundedIcon}
+      disabled={previousHash === null}
+      hoverText={formattedPreviousHash}
+      disableDialog={previousHash === null}
+      dialogProps={{ fullWidth: true, maxWidth: 'md' }}
+      {...props}
+    >
+      {previousHash === null
+        ? null
+        : <PreviousHashDialogContent boundwitness={boundwitness} />}
+    </QuickTipButton>
+  )
+}

package/src/components/_shared/Actions/previous-hash/index.ts

@@ -0,0 +1,3 @@
+export * from './DialogContent.tsx'
+export * from './MenuItem.tsx'
+export * from './QuickTipButton.tsx'

package/src/components/_shared/Heading/HashHeadingPaper/Adornment/BackPaperAdornment.tsx

@@ -0,0 +1,13 @@
+import { ArrowBackRounded } from '@mui/icons-material'
+import { IconButtonProps } from '@mui/material'
+import React from 'react'
+
+import { PaperAdornmentIconButton } from './PaperAdornmentIconButton.tsx'
+
+type BackPaperAdornmentProps = IconButtonProps
+
+export const BackPaperAdornment: React.FC<BackPaperAdornmentProps> = props => (
+  <PaperAdornmentIconButton {...props}>
+    <ArrowBackRounded />
+  </PaperAdornmentIconButton>
+)

package/src/components/_shared/Heading/HashHeadingPaper/Adornment/PaperAdornment.tsx

@@ -0,0 +1,14 @@
+import { styled } from '@mui/material'
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+
+export interface PaperAdornmentProps extends FlexBoxProps {
+  clickable?: boolean
+}
+
+export const PaperAdornment = styled(FlexCol, {
+  name: 'PaperAdornment',
+  shouldForwardProp: (prop: string) => !['clickable'].includes(prop),
+})<PaperAdornmentProps>(({ theme, clickable }) => ({
+  backgroundColor: theme.palette.secondary.dark,
+  cursor: clickable ? 'pointer' : 'auto',
+}))

package/src/components/_shared/Heading/HashHeadingPaper/Adornment/PaperAdornmentIconButton.tsx

@@ -0,0 +1,14 @@
+import {
+  IconButton, IconButtonProps, styled,
+} from '@mui/material'
+
+export interface PaperAdornmentIconButton extends IconButtonProps {
+  themePadding?: number
+}
+
+export const PaperAdornmentIconButton = styled(IconButton, { name: 'PaperAdornmentIconButton' })<PaperAdornmentIconButton>(
+  ({ theme, themePadding = 1 }) => ({
+    borderRadius: 0,
+    padding: theme.spacing(themePadding),
+  }),
+)

package/src/components/_shared/Heading/HashHeadingPaper/Adornment/index.ts

@@ -0,0 +1,3 @@
+export * from './BackPaperAdornment.tsx'
+export * from './PaperAdornment.tsx'
+export * from './PaperAdornmentIconButton.tsx'

package/src/components/_shared/Heading/HashHeadingPaper/HashHeadingPaper.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { BackPaperAdornment } from './Adornment/index.ts'
+import { HashHeadingPaper } from './HashHeadingPaper.tsx'
+
+export default {
+  component: HashHeadingPaper,
+  title: 'plugin/boundwitness/HashHeadingPaper',
+} as Meta
+
+const Template: StoryFn<typeof HashHeadingPaper> = props => <HashHeadingPaper {...props} />
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithHash = Template.bind({})
+WithHash.args = { hash: '7982da0e0da76819700079ee21511333d73395805cbeb3e44f25e2d584c8586e' }
+
+const WithSizes = Template.bind({})
+WithSizes.args = { hash: '7982da0e0da76819700079ee21511333d73395805cbeb3e44f25e2d584c8586e', size: 'large' }
+
+const WithAdornment = Template.bind({})
+WithAdornment.args = {
+  AdornmentStart: <BackPaperAdornment sx={{ padding: '24px' }} />,
+  hash: '7982da0e0da76819700079ee21511333d73395805cbeb3e44f25e2d584c8586e',
+  size: 'medium',
+  sx: { columnGap: 0.5 },
+}
+
+export {
+  Default, WithAdornment, WithHash, WithSizes,
+}

package/src/components/_shared/Heading/HashHeadingPaper/HashHeadingPaper.tsx

@@ -0,0 +1,43 @@
+import { useTheme } from '@mui/material'
+import { Identicon, IdenticonProps } from '@xylabs/react-identicon'
+import React, { forwardRef } from 'react'
+
+import { HeadingPaper, HeadingPaperProps } from '../HeadingPaper/index.ts'
+
+export interface HashHeadingPaperProps extends HeadingPaperProps {
+  hash?: string
+  identiconProps?: IdenticonProps
+}
+
+const HashHeadingPaper = forwardRef<HTMLDivElement, HashHeadingPaperProps>(({
+  hash, identiconProps, ...props
+}, ref) => {
+  const theme = useTheme()
+
+  return (
+    <HeadingPaper
+      heading={hash}
+      fallbackText="No hash provided"
+      ref={ref}
+      IconComponent={
+        hash
+          ? (
+              <Identicon
+                size={Number.parseInt(theme.spacing(3).replace('px', ''))}
+                p={0.25}
+                value={hash}
+                sx={{ background: theme.palette.background.paper }}
+                {...identiconProps}
+              />
+            )
+          : null
+      }
+      sx={{ columnGap: 1 }}
+      {...props}
+    />
+  )
+})
+
+HashHeadingPaper.displayName = 'HashHeadingPaper'
+
+export { HashHeadingPaper }

package/src/components/_shared/Heading/HashHeadingPaper/index.ts

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

package/src/components/_shared/Heading/Heading.tsx

@@ -0,0 +1,49 @@
+import { TypographyVariant } from '@mui/material'
+import { FlexGrowRow } from '@xylabs/react-flexbox'
+import { EllipsizeBox } from '@xyo-network/react-shared'
+import React, { useRef } from 'react'
+
+import { BWHeadingProps, HeadingTextSizes } from './HeadingProps.tsx'
+
+export const BWHeading: React.FC<BWHeadingProps> = ({
+  AdornmentEnd,
+  AdornmentStart,
+  heading,
+  headingProps,
+  IconComponent,
+  size = 'medium',
+  fallbackText = 'No heading Provided',
+  ...props
+}) => {
+  const ellipsizeRef = useRef<HTMLDivElement | null>(null)
+  const headingText = heading ?? fallbackText
+
+  const sizeParser = (size: HeadingTextSizes) => {
+    const map: Record<HeadingTextSizes, TypographyVariant> = {
+      large: 'h4',
+      medium: 'body1',
+      small: 'caption',
+    }
+    const mappedSize = map[size]
+    if (mappedSize === undefined) {
+      throw new Error(`${size} is not a recognized TextSize`)
+    }
+    return mappedSize
+  }
+
+  return (
+    <FlexGrowRow columnGap={2} {...props}>
+      {AdornmentStart}
+      {IconComponent}
+      <EllipsizeBox
+        title={headingText}
+        width="100%"
+        typographyProps={{ variant: sizeParser(size), ...headingProps }}
+        ref={ellipsizeRef}
+      >
+        {headingText}
+      </EllipsizeBox>
+      {AdornmentEnd}
+    </FlexGrowRow>
+  )
+}

package/src/components/_shared/Heading/HeadingPaper/HeadingPaper.tsx

@@ -0,0 +1,52 @@
+import {
+  Paper, PaperProps, styled,
+} from '@mui/material'
+import React, { forwardRef } from 'react'
+
+import { BWHeading } from '../Heading.tsx'
+import { BWHeadingProps } from '../HeadingProps.tsx'
+
+export interface HeadingPaperProps extends BWHeadingProps {
+  paperProps?: PaperProps
+}
+
+const HeadingPaper = forwardRef<HTMLDivElement, HeadingPaperProps>((props, ref) => {
+  const {
+    AdornmentStart, AdornmentEnd, paperProps,
+  } = props
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { paperProps: excludedPaperProps, ...bwHeadingProps } = props
+  return (
+    <StyledHeadingPaper hasAdornmentStart={!!AdornmentStart} hasAdornmentEnd={!!AdornmentEnd} elevation={4} ref={ref} {...paperProps}>
+      <BWHeading {...bwHeadingProps} />
+    </StyledHeadingPaper>
+  )
+})
+
+HeadingPaper.displayName = 'HeadingPaper'
+
+export { HeadingPaper }
+
+interface StyledHeadingPaperProps extends PaperProps {
+  hasAdornmentEnd?: boolean
+  hasAdornmentStart?: boolean
+}
+
+const StyledHeadingPaper = styled(Paper, {
+  name: 'StyledHeadingPaper',
+  shouldForwardProp: prop => !['hasAdornmentEnd', 'hasAdornmentStart', 'paperProps'].includes(prop as string),
+})<StyledHeadingPaperProps>(({
+  hasAdornmentEnd, hasAdornmentStart, theme,
+}) => ({
+  alignItems: 'center',
+  columnGap: theme.spacing(2),
+  display: 'flex',
+  flexDirection: 'row',
+  overflow: 'hidden',
+  padding: theme.spacing(1),
+  ...(hasAdornmentStart && { paddingLeft: 0 }),
+  ...(hasAdornmentEnd && { paddingRight: 0 }),
+  ...((hasAdornmentStart || hasAdornmentEnd) && { paddingBottom: 0, paddingTop: 0 }),
+  paddingRight: theme.spacing(1),
+}))

package/src/components/_shared/Heading/HeadingPaper/index.ts

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

package/src/components/_shared/Heading/HeadingProps.tsx

@@ -0,0 +1,15 @@
+import { TypographyProps } from '@mui/material'
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+import { ReactNode } from 'react'
+
+export type HeadingTextSizes = 'small' | 'medium' | 'large'
+
+export interface BWHeadingProps extends FlexBoxProps {
+  AdornmentEnd?: ReactNode
+  AdornmentStart?: ReactNode
+  IconComponent?: ReactNode
+  fallbackText?: string
+  heading?: string
+  headingProps?: TypographyProps
+  size?: HeadingTextSizes
+}

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

@@ -0,0 +1,4 @@
+export * from './HashHeadingPaper/index.ts'
+export * from './Heading.tsx'
+export * from './HeadingPaper/index.ts'
+export * from './HeadingProps.tsx'

package/src/components/_shared/Payloads/PayloadsPropertyGroup.tsx

@@ -0,0 +1,25 @@
+import { BoundWitness } from '@xyo-network/boundwitness-model'
+import { PayloadTableProps } from '@xyo-network/react-payload-table'
+import { PropertyGroup, PropertyGroupProps } from '@xyo-network/react-property'
+import React from 'react'
+
+import { BoundWitnessPayloadsTable } from './PayloadsTable.tsx'
+
+export type BoundWitnessPayloadsProps = PropertyGroupProps & {
+  payload?: BoundWitness
+  payloadTableProps?: PayloadTableProps
+}
+
+export const BoundWitnessPayloads: React.FC<BoundWitnessPayloadsProps> = ({
+  payload: boundwitness, payloadTableProps, ...props
+}) => {
+  let elevation = 2
+  if (props.paper) {
+    elevation += props.elevation ?? 0
+  }
+  return (
+    <PropertyGroup titleProps={{ elevation }} title="Payloads" tip="The hash and schema for each payload witnessed" {...props}>
+      <BoundWitnessPayloadsTable boundwitness={boundwitness} {...payloadTableProps} />
+    </PropertyGroup>
+  )
+}

package/src/components/_shared/Payloads/PayloadsTable.tsx

@@ -0,0 +1,51 @@
+import { BoundWitness, BoundWitnessSchema } from '@xyo-network/boundwitness-model'
+import { PayloadTableProps } from '@xyo-network/react-payload-table'
+import { usePayloadHash } from '@xyo-network/react-shared'
+import { TableEx } from '@xyo-network/react-table'
+import React, { PropsWithChildren } from 'react'
+
+import { BoundWitnessFilteredPayloadTableBody, BoundWitnessPayloadTableHead } from './payloads-table/index.ts'
+
+export interface BoundWitnessPayloadTableProps extends PayloadTableProps {
+  boundwitness?: BoundWitness
+}
+
+export const BoundWitnessPayloadsTable: React.FC<BoundWitnessPayloadTableProps> = ({ boundwitness, ...props }) => {
+  const hash = usePayloadHash(boundwitness)
+  return (
+    <BoundWitnessPayloadsTableInner {...props}>
+      <BoundWitnessFilteredPayloadTableBody
+        eventNoun="payload"
+        schemaFilter={BoundWitnessSchema}
+        bwFilterType="notEqual"
+        noResults={boundwitness?.payload_hashes.length === 0}
+        payloadHashes={boundwitness?.payload_hashes}
+        payloadSchemas={boundwitness?.payload_schemas}
+        boundwitnessHash={boundwitness ? hash : ''}
+      />
+    </BoundWitnessPayloadsTableInner>
+  )
+}
+
+export const BoundWitnessPayloadsTableForBWs: React.FC<BoundWitnessPayloadTableProps> = ({ boundwitness, ...props }) => {
+  const hash = usePayloadHash(boundwitness)
+  return (
+    <BoundWitnessPayloadsTableInner {...props}>
+      <BoundWitnessFilteredPayloadTableBody
+        eventNoun="boundwitness"
+        schemaFilter={BoundWitnessSchema}
+        noResults={boundwitness?.payload_hashes.length === 0}
+        payloadHashes={boundwitness?.payload_hashes}
+        payloadSchemas={boundwitness?.payload_schemas}
+        boundwitnessHash={boundwitness ? hash : ''}
+      />
+    </BoundWitnessPayloadsTableInner>
+  )
+}
+
+export const BoundWitnessPayloadsTableInner: React.FC<PropsWithChildren<BoundWitnessPayloadTableProps>> = ({ children, ...props }) => (
+  <TableEx {...props}>
+    <BoundWitnessPayloadTableHead />
+    {children}
+  </TableEx>
+)

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

@@ -0,0 +1,2 @@
+export * from './PayloadsPropertyGroup.tsx'
+export * from './PayloadsTable.tsx'

package/src/components/_shared/Payloads/payloads-table/TableBody.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  TableBody, TableCell, TableRow,
+} from '@mui/material'
+import { EventNoun, useEvent } from '@xyo-network/react-event'
+import { PayloadTableBodyProps, TableRowNoData } from '@xyo-network/react-payload-table'
+import { HashTableCell } from '@xyo-network/react-shared'
+import { useTableHeight } from '@xyo-network/react-table'
+import React, { useLayoutEffect, useRef } from 'react'
+
+export interface BoundWitnessPayloadTableBodyProps extends PayloadTableBodyProps {
+  boundwitnessHash?: string
+  eventNoun?: EventNoun
+  payloadHashes?: string[]
+  payloadSchemas?: string[]
+}
+
+export const BoundWitnessPayloadTableBody: React.FC<BoundWitnessPayloadTableBodyProps> = ({
+  boundwitnessHash,
+  eventNoun = 'payload',
+  payloadHashes,
+  payloadSchemas,
+  ...props
+}) => {
+  const {
+    payloads, archive, maxSchemaDepth, onRowClick, exploreDomain, emptyRows, noResults, NoResultRowComponent, ...tableProps
+  } = props
+  const ref = useRef<HTMLTableSectionElement | null>(null)
+  const [tableRef, dispatch] = useEvent<HTMLTableSectionElement>(undefined, ref)
+
+  const { setRowHeight } = useTableHeight()
+  const tableRowRef = useRef<HTMLTableRowElement | null>(null)
+
+  const handleOnClick = (hash: string) => {
+    dispatch(eventNoun, 'click', hash)
+  }
+
+  useLayoutEffect(() => {
+    if (tableRowRef.current) {
+      setRowHeight?.(tableRowRef.current.offsetHeight)
+    }
+  })
+
+  return (
+    <TableBody ref={tableRef} {...tableProps}>
+      {noResults && NoResultRowComponent
+        ? <NoResultRowComponent />
+        : null}
+      {(
+        payloadHashes
+        && payloadSchemas
+        && payloadHashes.length > 0
+        && payloadHashes?.map((hash, index) => {
+          return (
+            <TableRow ref={tableRowRef} key={boundwitnessHash + hash} onClick={() => handleOnClick(hash)} sx={{ cursor: 'pointer' }}>
+              <TableCell title={payloadSchemas[index]}>{payloadSchemas[index]}</TableCell>
+              <HashTableCell title={hash}>{hash}</HashTableCell>
+            </TableRow>
+          )
+        })) || (
+        <>
+          <TableRowNoData additionalCells={1} />
+        </>
+      )}
+    </TableBody>
+  )
+}

package/src/components/_shared/Payloads/payloads-table/TableBodyFiltered.tsx

@@ -0,0 +1,51 @@
+import React, { useMemo, useState } from 'react'
+
+import { BoundWitnessPayloadTableBody, BoundWitnessPayloadTableBodyProps } from './TableBody.tsx'
+
+export interface BoundWitnessFilteredPayloadTableBodyProps extends BoundWitnessPayloadTableBodyProps {
+  bwFilterType?: 'equal' | 'notEqual'
+  schemaFilter?: string
+}
+
+export const BoundWitnessFilteredPayloadTableBody: React.FC<BoundWitnessFilteredPayloadTableBodyProps> = ({
+  bwFilterType = 'equal',
+  eventNoun = 'payload',
+  payloadHashes,
+  payloadSchemas,
+  schemaFilter,
+  ...props
+}) => {
+  const [bwPayloadHashes, setBWPayloadHashes] = useState<string[]>()
+  const [bwPayloadSchemas, setBWPayloadSchemas] = useState<string[]>()
+
+  useMemo(() => {
+    // if no filter, display all hashes and schemas
+    if (!schemaFilter) {
+      setBWPayloadHashes(payloadHashes)
+      setBWPayloadSchemas(payloadSchemas)
+    }
+  }, [payloadHashes, payloadSchemas, schemaFilter])
+
+  useMemo(() => {
+    if (payloadSchemas && schemaFilter) {
+      const filteredSchemas = payloadSchemas.filter((schema) => {
+        return bwFilterType === 'equal' ? schema === schemaFilter : schema !== schemaFilter
+      })
+      setBWPayloadSchemas(filteredSchemas)
+    }
+  }, [bwFilterType, payloadSchemas, schemaFilter])
+
+  useMemo(() => {
+    if (payloadHashes && payloadSchemas && schemaFilter) {
+      // eslint-disable-next-line unicorn/no-array-reduce
+      const filteredHashes = payloadSchemas.reduce<string[]>((acc, schema, index) => {
+        if (bwFilterType === 'equal' ? schema === schemaFilter : schema !== schemaFilter) {
+          acc.push(payloadHashes[index])
+        }
+        return acc
+      }, [])
+      setBWPayloadHashes(filteredHashes)
+    }
+  }, [bwFilterType, payloadHashes, payloadSchemas, schemaFilter])
+  return <BoundWitnessPayloadTableBody payloadHashes={bwPayloadHashes} payloadSchemas={bwPayloadSchemas} eventNoun={eventNoun} {...props} />
+}

package/src/components/_shared/Payloads/payloads-table/TableHead.tsx

@@ -0,0 +1,27 @@
+import {
+  styled, TableHead, TableRow, Typography,
+} from '@mui/material'
+import { PayloadTableHeadProps } from '@xyo-network/react-payload-table'
+import { TableCellEx } from '@xyo-network/react-table'
+import React from 'react'
+
+export const BoundWitnessPayloadTableHead: React.FC<PayloadTableHeadProps> = (props) => {
+  const {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    columns, ...tableHeadProps
+  } = props
+  return (
+    <TableHead {...tableHeadProps}>
+      <TableRow>
+        <TableCellEx>
+          <TableCellTypography variant="caption">Schema</TableCellTypography>
+        </TableCellEx>
+        <TableCellEx>
+          <TableCellTypography variant="caption">Hash</TableCellTypography>
+        </TableCellEx>
+      </TableRow>
+    </TableHead>
+  )
+}
+
+const TableCellTypography = styled(Typography, { name: 'TableCellTypography' })(() => ({ fontWeight: 'bold' }))

package/src/components/_shared/Payloads/payloads-table/index.ts

@@ -0,0 +1,3 @@
+export * from './TableBody.tsx'
+export * from './TableBodyFiltered.tsx'
+export * from './TableHead.tsx'

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

@@ -0,0 +1,21 @@
+import { BoundWitness } from '@xyo-network/boundwitness-model'
+import { PropertyGroup, PropertyGroupProps } from '@xyo-network/react-property'
+import React from 'react'
+
+import { BoundWitnessSignatureTable } from './SignatureTable.tsx'
+
+export type BoundWitnessSignatureDetailsProps = PropertyGroupProps & {
+  block?: BoundWitness
+}
+
+export const BoundWitnessSignatureDetails: React.FC<BoundWitnessSignatureDetailsProps> = ({ block, ...props }) => {
+  let elevation = 2
+  if (props.paper) {
+    elevation += props.elevation ?? 0
+  }
+  return (
+    <PropertyGroup titleProps={{ elevation }} title="Signatures" tip="The list of signatures for this block" {...props}>
+      <BoundWitnessSignatureTable block={block} />
+    </PropertyGroup>
+  )
+}

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

@@ -0,0 +1,29 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { sampleBlock } from '@xyo-network/react-storybook'
+import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { BoundWitnessSignatureTable } from './SignatureTable.tsx'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: BoundWitnessSignatureTable,
+  parameters: { docs: { page: null } },
+  title: 'boundwitness/SignatureTable',
+} as Meta<typeof BoundWitnessSignatureTable>
+
+const Template: StoryFn<typeof BoundWitnessSignatureTable> = args => (
+  <BrowserRouter>
+    <BoundWitnessSignatureTable {...args}></BoundWitnessSignatureTable>
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithData = Template.bind({})
+WithData.args = { block: sampleBlock }
+
+export { Default, WithData }
+
+export default StorybookEntry