@xyo-network/react-chain-boundwitness 1.0.1

package/package.json

@@ -0,0 +1,92 @@
+{
+  "$schema": "http://json.schemastore.org/package.json",
+  "name": "@xyo-network/react-chain-boundwitness",
+  "version": "1.0.1",
+  "description": "XYO Layer One SDK",
+  "homepage": "https://xylabs.com",
+  "bugs": {
+    "url": "git+https://github.com/xylabs/xyo-chain/issues",
+    "email": "support@xylabs.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xylabs/xyo-chain.git"
+  },
+  "license": "LGPL-3.0-only",
+  "author": {
+    "name": "XY Labs Development Team",
+    "email": "support@xylabs.com",
+    "url": "https://xylabs.com"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "browser": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/browser/index.mjs"
+      },
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/browser/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "module": "dist/browser/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "dependencies": {
+    "@xylabs/arraybuffer": "^4.6.0",
+    "@xylabs/eth-address": "^4.6.0",
+    "@xylabs/react-flexbox": "^6.0.5",
+    "@xylabs/react-hooks": "^6.0.5",
+    "@xylabs/react-identicon": "^6.0.5",
+    "@xylabs/react-promise": "^6.0.5",
+    "@xylabs/react-quick-tip-button": "^6.0.5",
+    "@xyo-network/boundwitness-model": "^3.9.37",
+    "@xyo-network/boundwitness-validator": "^3.9.37",
+    "@xyo-network/payload-model": "^3.9.37",
+    "@xyo-network/react-card": "^5.0.3",
+    "@xyo-network/react-event": "^5.0.3",
+    "@xyo-network/react-payload-details": "^5.0.3",
+    "@xyo-network/react-payload-plugin": "^5.0.3",
+    "@xyo-network/react-payload-plugin-resolver": "^5.0.3",
+    "@xyo-network/react-payload-raw-info": "^5.0.3",
+    "@xyo-network/react-payload-table": "^5.0.3",
+    "@xyo-network/react-property": "^5.0.3",
+    "@xyo-network/react-shared": "^5.0.3",
+    "@xyo-network/react-table": "^5.0.3",
+    "react-icons": "^5.5.0"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.4.7",
+    "@mui/material": "^6.4.7",
+    "@mui/styles": "^6.4.7",
+    "@storybook/react": "^8.6.4",
+    "@types/react": "^19.0.10",
+    "@xylabs/hex": "^4.6.0",
+    "@xylabs/ts-scripts-yarn3": "^6.0.9",
+    "@xylabs/tsconfig-react": "^6.0.9",
+    "@xyo-network/react-storybook": "^5.0.3",
+    "eslint": "^9.22.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.3.0",
+    "storybook": "^8.6.4",
+    "typescript": "^5.8.2"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@mui/icons-material": "^6",
+    "@mui/material": "^6",
+    "@mui/styles": "^6",
+    "react": "^19",
+    "react-dom": "^19",
+    "react-router-dom": "^7"
+  },
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "docs": "dist/docs.json"
+}

package/src/Plugin.ts

@@ -0,0 +1,20 @@
+import { Payload } from '@xyo-network/payload-model'
+import { createPayloadRenderPlugin, PayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
+
+import {
+  BoundWitnessCardContent, BoundWitnessCardHeader, BoundWitnessDetailsBox,
+} from './components/index.ts'
+
+export const BoundWitnessRenderPlugin: PayloadRenderPlugin = {
+  ...createPayloadRenderPlugin({
+    canRender: (payload?: Payload) => payload?.schema === 'network.xyo.boundwitness',
+    components: {
+      box: { detailsBox: BoundWitnessDetailsBox },
+      card: {
+        content: BoundWitnessCardContent,
+        header: BoundWitnessCardHeader,
+      },
+    },
+    name: 'BoundWitness',
+  }),
+}

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { sampleBlock } from '@xyo-network/react-storybook'
+import React from 'react'
+
+import { BoundWitnessRendererCard } from './Card.tsx'
+
+export default {
+  component: BoundWitnessRendererCard,
+  title: 'plugin/boundwitness/CardRenderer',
+} as Meta
+
+const Template: StoryFn<typeof BoundWitnessRendererCard> = (props) => {
+  return <BoundWitnessRendererCard {...props} />
+}
+
+const Default = Template.bind({})
+Default.args = { payload: sampleBlock }
+
+const WithActive = Template.bind({})
+WithActive.args = { active: true, payload: sampleBlock }
+
+export { Default, WithActive }

package/src/components/Card/Card.tsx

@@ -0,0 +1,24 @@
+import { Card, CardProps } from '@mui/material'
+import { BoundWitness } from '@xyo-network/boundwitness-model'
+import { Payload } from '@xyo-network/payload-model'
+import React from 'react'
+
+import { BoundWitnessCardContent } from './CardContent/index.ts'
+import { BoundWitnessCardHeader } from './CardHeader/index.ts'
+
+export interface BoundWitnessCardProps extends CardProps {
+  active?: boolean
+  payload?: Payload
+}
+export const BoundWitnessRendererCard: React.FC<BoundWitnessCardProps> = ({
+  payload, active, ...props
+}) => {
+  const boundwitness = payload as BoundWitness
+
+  return (
+    <Card {...props}>
+      <BoundWitnessCardHeader payload={boundwitness} active={active} hideJSONButton hidePreviousHash hideValidation />
+      <BoundWitnessCardContent payload={boundwitness} active={active} />
+    </Card>
+  )
+}

package/src/components/Card/CardContent/AddressAvatarGroup.tsx

@@ -0,0 +1,28 @@
+import {
+  Avatar, AvatarGroup, AvatarGroupProps,
+} from '@mui/material'
+import { Identicon } from '@xylabs/react-identicon'
+import React, { useRef } from 'react'
+
+export interface AddressAvatarGroupProps extends AvatarGroupProps {
+  addresses?: string[]
+  maxAvatars?: number
+}
+
+export const AddressAvatarGroup: React.FC<AddressAvatarGroupProps> = ({
+  addresses, maxAvatars = 4, ...props
+}) => {
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  const size = ref.current ? ref.current.clientWidth * 0.65 : undefined
+
+  return (
+    <AvatarGroup max={maxAvatars} total={addresses?.length} {...props}>
+      {addresses?.map((address, index) => (
+        <Avatar key={index + address} title={address} ref={ref} sx={{ bgcolor: 'background.paper' }}>
+          <Identicon value={address} position="absolute" p={0.25} top={0} bottom={0} left={0} right={0} size={size} />
+        </Avatar>
+      ))}
+    </AvatarGroup>
+  )
+}

package/src/components/Card/CardContent/CardContent.tsx

@@ -0,0 +1,36 @@
+import { CardContentProps } from '@mui/material'
+import { BoundWitness } from '@xyo-network/boundwitness-model'
+import { Payload } from '@xyo-network/payload-model'
+import React, { forwardRef } from 'react'
+
+import { AddressAvatarGroup } from './AddressAvatarGroup.tsx'
+import {
+  CardColumnsFlex, CardColumnTitleH2, CardContentFlex,
+} from './layout/index.ts'
+import { SchemaAvatarGroup } from './SchemaAvatarGroup.tsx'
+
+export interface BoundWitnessCardContentProps extends CardContentProps {
+  active?: boolean
+  payload?: Payload
+}
+
+export const BoundWitnessCardContent = forwardRef<HTMLDivElement, BoundWitnessCardContentProps>(({
+  payload, active, ...props
+}, ref) => {
+  const boundwitness = payload as Payload<BoundWitness>
+
+  return (
+    <CardContentFlex ref={ref} active={active} {...props}>
+      <CardColumnsFlex>
+        <CardColumnTitleH2>Payloads</CardColumnTitleH2>
+        <SchemaAvatarGroup schemas={boundwitness?.payload_schemas} />
+      </CardColumnsFlex>
+      <CardColumnsFlex>
+        <CardColumnTitleH2>Signers</CardColumnTitleH2>
+        <AddressAvatarGroup addresses={boundwitness?.addresses} />
+      </CardColumnsFlex>
+    </CardContentFlex>
+  )
+})
+
+BoundWitnessCardContent.displayName = 'BoundWitnessCardContent'

package/src/components/Card/CardContent/SchemaAvatarGroup.tsx

@@ -0,0 +1,45 @@
+import {
+  Avatar, AvatarGroup, AvatarGroupProps,
+} from '@mui/material'
+import { BoundWitnessSchema } from '@xyo-network/boundwitness-model'
+import { usePayloadRenderPluginResolver } from '@xyo-network/react-payload-plugin-resolver'
+import React, { useCallback } from 'react'
+// eslint-disable-next-line import-x/no-internal-modules
+import { VscSymbolMethod, VscSymbolNamespace } from 'react-icons/vsc'
+
+interface SchemaAvatarGroupProps extends AvatarGroupProps {
+  maxAvatars?: number
+  schemas?: string[]
+}
+
+export const SchemaAvatarGroup: React.FC<SchemaAvatarGroupProps> = ({
+  schemas, maxAvatars = 4, ...props
+}) => {
+  const { resolver } = usePayloadRenderPluginResolver()
+
+  const resolveSchemaToIcon = useCallback(
+    (schema: string, index: number) => {
+      const SchemaAvatar = resolver?.resolve({ schema })?.components.avatar.image
+      return SchemaAvatar
+        ? <SchemaAvatar key={index + schema} />
+        : (
+            <Avatar
+              key={index + schema}
+              title={schema}
+              sx={{ bgcolor: 'primary.main', color: 'primary.contrastText' }}
+            >
+              {schema === BoundWitnessSchema
+                ? <VscSymbolMethod />
+                : <VscSymbolNamespace />}
+            </Avatar>
+          )
+    },
+    [resolver],
+  )
+
+  return (
+    <AvatarGroup max={maxAvatars} total={schemas?.length} {...props}>
+      {schemas?.map((schema, index) => resolveSchemaToIcon(schema, index))}
+    </AvatarGroup>
+  )
+}

package/src/components/Card/CardContent/index.ts

@@ -0,0 +1,2 @@
+export * from './CardContent.tsx'
+export * from './layout/index.ts'

package/src/components/Card/CardContent/layout/CardColumnTitle.tsx

@@ -0,0 +1,11 @@
+import {
+  styled, Typography, TypographyProps,
+} from '@mui/material'
+import React from 'react'
+
+export const CardColumnTitle = styled(Typography, { name: 'CardColumnTitle' })(({ theme }) => ({
+  color: theme.palette.text.primary,
+  fontWeight: 500,
+}))
+
+export const CardColumnTitleH2: React.FC<TypographyProps> = props => <CardColumnTitle {...props} />

package/src/components/Card/CardContent/layout/CardColumnsFlex.tsx

@@ -0,0 +1,8 @@
+import { styled } from '@mui/material'
+import { FlexCol } from '@xylabs/react-flexbox'
+
+export const CardColumnsFlex = styled(FlexCol, { name: 'CardColumnsFlex' })(({ theme }) => ({
+  ['@media only screen and (min-width: 333px)']: { minWidth: '50%' },
+  minWidth: '100%',
+  rowGap: theme.spacing(1),
+}))

package/src/components/Card/CardContent/layout/CardContentFlex.tsx

@@ -0,0 +1,19 @@
+import {
+  alpha, CardContent, styled,
+} from '@mui/material'
+
+export interface CardContentFlexProps {
+  active?: boolean
+}
+
+export const CardContentFlex = styled(CardContent, { name: 'CardContentFlex', shouldForwardProp: prop => prop !== 'active' })<CardContentFlexProps>(
+  ({ theme, active }) => ({
+    [':last-child']: { paddingBottom: theme.spacing(1) },
+    ...(active && { background: alpha(theme.palette.secondary.dark, 0.33) }),
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    rowGap: theme.spacing(1),
+  }),
+)

package/src/components/Card/CardContent/layout/index.ts

@@ -0,0 +1,3 @@
+export * from './CardColumnsFlex.tsx'
+export * from './CardColumnTitle.tsx'
+export * from './CardContentFlex.tsx'

package/src/components/Card/CardHeader/CardHeader.tsx

@@ -0,0 +1,97 @@
+import {
+  CardHeader, CardHeaderProps,
+  styled, useTheme,
+} from '@mui/material'
+import { Identicon } from '@xylabs/react-identicon'
+import { BoundWitness } from '@xyo-network/boundwitness-model'
+import { Payload } from '@xyo-network/payload-model'
+import { usePayloadHash } from '@xyo-network/react-shared'
+import React, { forwardRef, ReactNode } from 'react'
+
+import { BWActions, BWHeading } from '../../_shared/index.ts'
+
+export interface BoundWitnessCardHeaderProps extends CardHeaderProps {
+  active?: boolean
+  activeBgColor?: boolean
+  additionalActions?: ReactNode
+  hideJSONButton?: boolean
+  hidePreviousHash?: boolean
+  hideValidation?: boolean
+  payload?: Payload
+}
+
+export const BoundWitnessCardHeader = forwardRef<HTMLDivElement, BoundWitnessCardHeaderProps>(
+
+  ({
+    active = false,
+    activeBgColor = true,
+    additionalActions,
+    hideJSONButton,
+    hidePreviousHash,
+    hideValidation,
+    payload,
+    ...props
+  }, ref) => {
+    const boundwitness = payload as BoundWitness
+    const theme = useTheme()
+    const hash = usePayloadHash(boundwitness)
+
+    return (
+      <CardHeaderHash
+        ref={ref}
+        active={active}
+        activeBgColor={activeBgColor}
+        title={(
+          <BWHeading
+            heading={hash}
+            IconComponent={(
+              <Identicon
+                size={Number.parseInt(theme.spacing(2.5).replace('px', ''))}
+                p={0.5}
+                value={hash}
+                sx={{ background: theme.palette.background.paper }}
+              />
+            )}
+          />
+        )}
+        action={(
+          <BWActions
+            hideJSONButton={hideJSONButton}
+            hideValidation={hideValidation}
+            hidePreviousHash={hidePreviousHash}
+            boundwitness={boundwitness}
+            additionalActions={additionalActions}
+          />
+        )}
+        {...props}
+      />
+    )
+  },
+)
+
+BoundWitnessCardHeader.displayName = 'BoundWitnessCardHeader'
+
+interface CardHeaderHashProps extends CardHeaderProps {
+  active?: boolean
+  activeBgColor?: boolean
+}
+
+const CardHeaderHash = styled(CardHeader, {
+  name: 'CardHeaderHash',
+  shouldForwardProp: prop => !['active', 'activeBgColor'].includes(prop as string),
+})<CardHeaderHashProps>(({
+  theme, active, activeBgColor,
+}) => ({
+  '& .MuiCardHeader-action': {
+    marginBottom: 0,
+    marginTop: 0,
+  },
+  '& .MuiCardHeader-content': { overflow: 'visible' },
+  '&.MuiCardHeader-root': {
+    ...(active && activeBgColor && { backgroundColor: theme.palette.info }),
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    paddingBottom: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+  },
+  'padding': `${theme.spacing(0.5)} ${theme.spacing(2)}`,
+}))

package/src/components/Card/CardHeader/index.ts

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

package/src/components/Card/index.ts

@@ -0,0 +1,3 @@
+export * from './Card.tsx'
+export * from './CardContent/index.ts'
+export * from './CardHeader/index.ts'

package/src/components/Details/BoundWitnessLinksDetails.tsx

@@ -0,0 +1,39 @@
+import { Typography } from '@mui/material'
+import { FlexRow } from '@xylabs/react-flexbox'
+import { BoundWitness } from '@xyo-network/boundwitness-model'
+import { useEvent } from '@xyo-network/react-event'
+import {
+  Property, PropertyGroup, PropertyGroupProps,
+} from '@xyo-network/react-property'
+import React from 'react'
+
+export type BoundWitnessLinksDetails = PropertyGroupProps & {
+  value?: BoundWitness
+}
+
+export const BoundWitnessLinksDetails: React.FC<BoundWitnessLinksDetails> = ({ value, ...props }) => {
+  let elevation = 2
+  if (props.paper) {
+    elevation += props.elevation ?? 0
+  }
+
+  const [ref, dispatch] = useEvent<HTMLDivElement>()
+
+  return (
+    <PropertyGroup titleProps={{ elevation }} title="Links" tip="Blocks that are linked to this block" {...props}>
+      {value?.previous_hashes.map((hash) => {
+        return (
+          <Property key={hash} titleProps={{ elevation }} flexGrow={1} title="Previous Hash" tip={hash}>
+            {hash
+              ? (
+                  <FlexRow ref={ref} onClick={() => dispatch?.('boundwitness', 'click', hash)}>
+                    <Typography fontFamily="monospace">{hash}</Typography>
+                  </FlexRow>
+                )
+              : 'None'}
+          </Property>
+        )
+      })}
+    </PropertyGroup>
+  )
+}

package/src/components/Details/Box/DetailsBox.stories.tsx

@@ -0,0 +1,65 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { Payload } from '@xyo-network/payload-model'
+import { useEvent } from '@xyo-network/react-event'
+import { sampleAddressHistory } from '@xyo-network/react-storybook'
+import React, { useRef } from 'react'
+
+import { BoundWitnessDetailsBox } from './DetailsBox.tsx'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: BoundWitnessDetailsBox,
+  parameters: { docs: { page: null } },
+  title: 'plugin/boundwitness/DetailsBox',
+} as Meta<typeof BoundWitnessDetailsBox>
+
+const Template: StoryFn<typeof BoundWitnessDetailsBox> = (args) => {
+  const sharedRef = useRef<HTMLDivElement>(null)
+  useEvent<HTMLDivElement>((noun, verb, data) => console.log(`[${noun}|${verb}|${data}]`), sharedRef)
+  useEvent<HTMLDivElement>(() => console.log('2nd Listener'), sharedRef)
+  useEvent<HTMLDivElement>(() => console.log('3rd Listener'), sharedRef)
+
+  return <BoundWitnessDetailsBox ref={sharedRef} {...args} />
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithNoData = Template.bind({})
+WithNoData.args = {
+  payload: {
+    _signatures: [],
+    addresses: [],
+    payload_hashes: [],
+    payload_schemas: [],
+    previous_hashes: [],
+    schema: 'network.xyo.boundwitness',
+  } as Payload,
+}
+
+const WithData = Template.bind({})
+WithData.args = { payload: sampleAddressHistory[1] }
+
+const WithNestedBWPayloads = Template.bind({})
+WithNestedBWPayloads.args = {
+  payload: {
+    $signatures: ['2a6c7e55d2344ec4f839296fcdc88b11dd27b474e832e1227d956838247d7183c2d47c24b4fe1b07c623e039c78babb08f1f12131747673175475c1abf0f719f'],
+    addresses: ['db8af7b3084f5a03589af4915e37cbeb3f19afb0'],
+    payload_hashes: [
+      '1d31053d99a3392f717c7f775df5fc0f999725fb57d705ddcbc01ee4f7288b6d',
+      '29fd0b9b3207a55be2bff6022176c041863c7074eb573e103fe571295d263952',
+      'c8ab93c970f4ef0d68ee22efd0119f228c089ae77551eda6e707b24bcec589ec',
+    ],
+    payload_schemas: ['network.xyo.boundwitness', 'network.xyo.id', 'network.xyo.query.archivist.insert'],
+    previous_hashes: ['d67b91381ca8015613361470ff3e5dad3618d0ba471af21a1db89b0024c9322e'],
+    query: 'c8ab93c970f4ef0d68ee22efd0119f228c089ae77551eda6e707b24bcec589ec',
+    schema: 'network.xyo.boundwitness.query',
+    timestamp: 1_676_043_487_737,
+  } as Payload,
+}
+
+export {
+  Default, WithData, WithNestedBWPayloads, WithNoData,
+}
+
+export default StorybookEntry

package/src/components/Details/Box/DetailsBox.tsx

@@ -0,0 +1,70 @@
+import { Divider } from '@mui/material'
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { BoundWitness, BoundWitnessSchema } from '@xyo-network/boundwitness-model'
+import { PayloadDetailsListRenderProps, PayloadDetailsRenderProps } from '@xyo-network/react-payload-plugin'
+import { usePayloadHash } from '@xyo-network/react-shared'
+import { TableHeightProvider } from '@xyo-network/react-table'
+import React, { forwardRef, useMemo } from 'react'
+// eslint-disable-next-line import-x/no-internal-modules
+import { FaSignature } from 'react-icons/fa'
+// eslint-disable-next-line import-x/no-internal-modules
+import { VscSymbolMethod, VscSymbolNamespace } from 'react-icons/vsc'
+
+import {
+  BoundWitnessPayloadsTable,
+  BoundWitnessPayloadsTableForBWs,
+  BoundWitnessSignatureTable,
+  BWActions,
+  HashHeadingPaper,
+  HeadingPaper,
+} from '../../_shared/index.ts'
+
+const BoundWitnessDetailsBox: React.FC<PayloadDetailsListRenderProps & FlexBoxProps> = ({ visibleRows, ...props }) => {
+  return (
+    <TableHeightProvider defaultVisibleRows={visibleRows} additionalRows={1}>
+      <BoundWitnessDetailsBoxInner {...props} />
+    </TableHeightProvider>
+  )
+}
+
+BoundWitnessDetailsBox.displayName = 'BoundWitnessDetailsBox'
+
+const BoundWitnessDetailsBoxInner: React.FC<PayloadDetailsRenderProps & FlexBoxProps> = ({ payload, ...props }) => {
+  const boundWitness = payload as BoundWitness
+  const partialBoundWitness = boundWitness as Partial<BoundWitness>
+  const hash = usePayloadHash(payload)
+
+  const hasBWPayloads = useMemo(() => (partialBoundWitness ? partialBoundWitness.payload_schemas?.includes(BoundWitnessSchema) : false), [partialBoundWitness])
+
+  return (
+    <FlexCol alignItems="stretch" rowGap={4} {...props}>
+      <HashHeadingPaper
+        hash={hash}
+        paperProps={{ sx: { p: 2 } }}
+        AdornmentEnd={<BWActions boundwitness={boundWitness} />}
+        identiconProps={{ p: 0.75, size: 24 }}
+      />
+      <Divider flexItem />
+      <FlexCol alignItems="stretch" rowGap={1} mb={1}>
+        <HeadingPaper IconComponent={<VscSymbolNamespace />} heading="Payloads" />
+        <BoundWitnessPayloadsTable boundwitness={boundWitness} />
+      </FlexCol>
+      {hasBWPayloads
+        ? (
+            <FlexCol alignItems="stretch" rowGap={1} mb={1}>
+              <HeadingPaper IconComponent={<VscSymbolMethod />} heading="Bound Witnesses" />
+              <BoundWitnessPayloadsTableForBWs boundwitness={boundWitness} />
+            </FlexCol>
+          )
+        : null}
+      <FlexCol alignItems="stretch" rowGap={1} mb={1}>
+        <HeadingPaper IconComponent={<FaSignature />} heading="Signatures" />
+        <BoundWitnessSignatureTable block={boundWitness} />
+      </FlexCol>
+    </FlexCol>
+  )
+}
+
+BoundWitnessDetailsBoxInner.displayName = 'BoundWitnessDetailsBoxInner'
+
+export { BoundWitnessDetailsBox }

package/src/components/Details/Box/index.ts

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

package/src/components/Details/Card/DetailsCard.stories.tsx

@@ -0,0 +1,37 @@
+import {
+  Decorator, Meta, StoryFn,
+} from '@storybook/react'
+import { useEvent } from '@xyo-network/react-event'
+import { sampleBlock } from '@xyo-network/react-storybook'
+import React, { useRef } from 'react'
+
+import { BoundWitnessDetailsCard } from './DetailsCard.tsx'
+
+const WithEventDecorator: Decorator = (Story, args) => {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const [tableRef] = useEvent<HTMLDivElement>((noun, verb, data) => console.log(`${noun}|${verb}|${data}`), ref)
+  args.args.ref = tableRef
+
+  return <Story {...args} />
+}
+
+export default {
+  component: BoundWitnessDetailsCard,
+  title: 'plugin/boundwitness/DetailsCard',
+} as Meta
+
+const Template: StoryFn<typeof BoundWitnessDetailsCard> = props => <BoundWitnessDetailsCard {...props} />
+
+const Default = Template.bind({})
+Default.args = { payload: sampleBlock }
+
+const WithRef = Template.bind({})
+WithRef.decorators = [WithEventDecorator]
+WithRef.args = { payload: sampleBlock }
+
+const WithVisibleRows = Template.bind({})
+WithVisibleRows.args = { payload: sampleBlock, visibleRows: 3 }
+
+export {
+  Default, WithRef, WithVisibleRows,
+}

package/src/components/Details/Card/DetailsCard.tsx

@@ -0,0 +1,18 @@
+import { CardProps } from '@mui/material'
+import { PayloadDetailsListRenderProps } from '@xyo-network/react-payload-plugin'
+import { TableHeightProvider } from '@xyo-network/react-table'
+import React, { forwardRef } from 'react'
+
+import { BoundWitnessDetailsCardInner } from './DetailsCardInner.tsx'
+
+const BoundWitnessDetailsCard = forwardRef<HTMLDivElement, PayloadDetailsListRenderProps & CardProps>(({ visibleRows, ...props }, ref) => {
+  return (
+    <TableHeightProvider defaultVisibleRows={visibleRows} additionalRows={1}>
+      <BoundWitnessDetailsCardInner ref={ref} {...props} />
+    </TableHeightProvider>
+  )
+})
+
+BoundWitnessDetailsCard.displayName = 'BoundWitnessDetailsCard'
+
+export { BoundWitnessDetailsCard }