@xyo-network/react-chain-boundwitness 1.0.1

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

@@ -0,0 +1,63 @@
+import { Collapse } from '@mui/material'
+import { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
+import { BoundWitness } from '@xyo-network/boundwitness-model'
+import { CardContentEx, CardContentExProps } from '@xyo-network/react-card'
+import { useTableHeight } from '@xyo-network/react-table'
+import React, {
+  Dispatch, forwardRef, SetStateAction, useState,
+} from 'react'
+
+import {
+  BoundWitnessPayloadsTable, BoundWitnessPayloadsTableForBWs, BoundWitnessSignatureTable,
+} from '../../_shared/index.ts'
+import { BoundWitnessBottomNavigation, BWNavigationTabs } from './Navigation/index.ts'
+
+export interface DetailsCardContentProps extends CardContentExProps {
+  boundwitness?: BoundWitness
+  collapsed?: boolean
+  setCollapsed?: Dispatch<SetStateAction<boolean>>
+}
+
+export const DetailsCardContent = forwardRef<HTMLDivElement, DetailsCardContentProps>(({
+  collapsed, boundwitness, setCollapsed, ...props
+}, ref) => {
+  const { height } = useTableHeight()
+  const [activeTab, setActiveTab] = useState(0)
+
+  return (
+    <CardContentEx removePadding>
+      <FlexGrowCol alignItems="stretch" height={height !== undefined && collapsed ? height : 'auto'} justifyContent="start" ref={ref}>
+        <Collapse in={collapsed}>
+          <FlexRow alignItems="stretch" height={height !== undefined && collapsed ? height : 'auto'} {...props}>
+            <BWNavigationTabs value={activeTab} setValue={setActiveTab} boundWitness={boundwitness} />
+            <FlexGrowCol
+              justifyContent="start"
+              overflow="scroll"
+              sx={{ borderLeft: '1px solid', borderLeftColor: 'divider' }}
+            >
+              {activeTab === 0
+                ? <BoundWitnessPayloadsTable boundwitness={boundwitness} variant="scrollable" />
+                : null}
+              {activeTab === 1
+                ? <BoundWitnessPayloadsTableForBWs boundwitness={boundwitness} variant="scrollable" />
+                : null}
+              {activeTab === 2
+                ? <BoundWitnessSignatureTable block={boundwitness} variant="scrollable" />
+                : null}
+            </FlexGrowCol>
+          </FlexRow>
+        </Collapse>
+      </FlexGrowCol>
+      <Collapse in={!collapsed} unmountOnExit>
+        <BoundWitnessBottomNavigation
+          onClick={() => setCollapsed?.(true)}
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          boundWitness={boundwitness}
+        />
+      </Collapse>
+    </CardContentEx>
+  )
+})
+
+DetailsCardContent.displayName = 'DetailsCardContent'

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

@@ -0,0 +1,55 @@
+import { ExpandLessRounded as ExpandLessRoundedIcon, ExpandMoreRounded as ExpandMoreRoundedIcon } from '@mui/icons-material'
+import {
+  Card, CardProps,
+  Divider, IconButton,
+} from '@mui/material'
+import { useResetState } from '@xylabs/react-hooks'
+import { BoundWitness } from '@xyo-network/boundwitness-model'
+import { PayloadDetailsRenderProps } from '@xyo-network/react-payload-plugin'
+import React, { forwardRef } from 'react'
+
+import { BoundWitnessCardHeader } from '../../Card/index.ts'
+import { DetailsCardContent } from './DetailsCardContent.tsx'
+
+const BoundWitnessDetailsCardInner = forwardRef<HTMLDivElement, PayloadDetailsRenderProps & CardProps>(
+
+  ({
+    payload, active, ...props
+  }, ref) => {
+    const boundwitness = payload as BoundWitness
+    const [collapsed, setCollapsed] = useResetState<boolean>(!active)
+
+    return (
+      <Card ref={ref} {...props}>
+        <BoundWitnessCardHeader
+          payload={payload}
+          active={active}
+          activeBgColor={false}
+          hideJSONButton={false}
+          hideValidation={false}
+          hidePreviousHash={false}
+          additionalActions={(
+            <>
+              <Divider
+                flexItem
+                orientation="vertical"
+                sx={{ ml: 2, mr: 1 }}
+              />
+              <IconButton onClick={() => setCollapsed(!collapsed)}>
+                {collapsed
+                  ? <ExpandMoreRoundedIcon />
+                  : <ExpandLessRoundedIcon />}
+              </IconButton>
+            </>
+          )}
+          sx={{ columnGap: 2 }}
+        />
+        <DetailsCardContent boundwitness={boundwitness} collapsed={collapsed} setCollapsed={setCollapsed} ref={ref} />
+      </Card>
+    )
+  },
+)
+
+BoundWitnessDetailsCardInner.displayName = 'BoundWitnessDetailsCardInner'
+
+export { BoundWitnessDetailsCardInner }

package/src/components/Details/Card/Navigation/BottomNavigation.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { FlexGrowRow } from '@xylabs/react-flexbox'
+import { sampleBlock } from '@xyo-network/react-storybook'
+import React from 'react'
+
+import { BoundWitnessBottomNavigation } from './BottomNavigation.tsx'
+
+export default {
+  component: BoundWitnessBottomNavigation,
+  title: 'plugin/boundwitness/BottomNavigation',
+} as Meta
+
+const Template: StoryFn<typeof BoundWitnessBottomNavigation> = (props) => {
+  return (
+    <FlexGrowRow height="calc(100vh - 20px)">
+      <BoundWitnessBottomNavigation {...props} />
+    </FlexGrowRow>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = { boundWitness: sampleBlock }
+
+export { Default }

package/src/components/Details/Card/Navigation/BottomNavigation.tsx

@@ -0,0 +1,50 @@
+import {
+  BottomNavigation, BottomNavigationAction, BottomNavigationProps,
+  styled,
+} from '@mui/material'
+import { BoundWitness, BoundWitnessSchema } from '@xyo-network/boundwitness-model'
+import React, {
+  Dispatch, forwardRef, SetStateAction,
+} 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'
+
+export interface BoundWitnessBottomNavigationProps extends BottomNavigationProps {
+  activeTab?: number
+  boundWitness?: BoundWitness
+  setActiveTab?: Dispatch<SetStateAction<number>>
+}
+
+const BoundWitnessBottomNavigation = forwardRef<HTMLDivElement, BoundWitnessBottomNavigationProps>(
+  ({
+    activeTab = 0, setActiveTab, boundWitness, ...props
+  }, ref) => {
+    const payloadCount = boundWitness?.payload_schemas.filter(schema => schema !== BoundWitnessSchema).length ?? 0
+    const boundWitnessCount = boundWitness?.payload_schemas.filter(schema => schema === BoundWitnessSchema).length ?? 0
+    const signers = boundWitness?.addresses.length ?? 0
+
+    return (
+      <StyledBottomNavigation
+        showLabels
+        value={activeTab}
+
+        onChange={(_event, newValue) => {
+          setActiveTab?.(newValue)
+        }}
+        ref={ref}
+        {...props}
+      >
+        <BottomNavigationAction label={`Payloads - ${payloadCount}`} icon={<VscSymbolNamespace />} />
+        <BottomNavigationAction label={`Bound Witnesses - ${boundWitnessCount}`} icon={<VscSymbolMethod />} />
+        <BottomNavigationAction label={`Signatures - ${signers}`} icon={<FaSignature />} />
+      </StyledBottomNavigation>
+    )
+  },
+)
+
+BoundWitnessBottomNavigation.displayName = 'BoundWitnessBottomNavigation'
+export { BoundWitnessBottomNavigation }
+
+const StyledBottomNavigation = styled(BottomNavigation, { name: 'StyledBottomNavigation' })(() => ({ background: 'inherit' }))

package/src/components/Details/Card/Navigation/NavigationTabs.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { FlexCol } from '@xylabs/react-flexbox'
+import React, { useState } from 'react'
+
+import { BWNavigationTabs } from './NavigationTabs.tsx'
+
+export default {
+  component: BWNavigationTabs,
+  parameters: { actions: { argTypesRegex: '(?!^onChange)^on[A-Z].*' } },
+  title: 'plugin/boundwitness/BWNavigationTabs',
+} as Meta
+
+const Template: StoryFn<typeof BWNavigationTabs> = (props) => {
+  const [value, setValue] = useState(0)
+
+  return (
+    <FlexCol alignItems="start">
+      <BWNavigationTabs value={value} setValue={setValue} {...props} />
+    </FlexCol>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+export { Default }

package/src/components/Details/Card/Navigation/NavigationTabs.tsx

@@ -0,0 +1,52 @@
+import {
+  Paper, Tab, TabProps, Tabs, TabsProps,
+  useTheme,
+} from '@mui/material'
+import { BoundWitness, BoundWitnessSchema } from '@xyo-network/boundwitness-model'
+import React, {
+  Dispatch, SetStateAction, SyntheticEvent,
+} 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'
+
+export interface BWNavigationTabs extends TabsProps {
+  boundWitness?: BoundWitness
+  setValue?: Dispatch<SetStateAction<number>>
+  value?: number
+}
+
+export const BWNavigationTabs: React.FC<BWNavigationTabs> = ({
+  setValue, value, boundWitness, ...props
+}) => {
+  const payloadCount = boundWitness?.payload_schemas.filter(schema => schema !== BoundWitnessSchema).length ?? 0
+  const boundWitnessCount = boundWitness?.payload_schemas.filter(schema => schema === BoundWitnessSchema).length ?? 0
+  const signers = boundWitness?.addresses.length ?? 0
+  const theme = useTheme()
+
+  const handleChange = (_event: SyntheticEvent, newValue: number) => {
+    setValue?.(newValue)
+  }
+
+  const tabProps: TabProps = {
+    iconPosition: 'start',
+    sx: {
+      boxShadow: 'none', fontSize: theme.spacing(1.75), justifyContent: 'start', lineHeight: 3, minHeight: 0, overflow: 'hidden',
+    },
+  }
+
+  return (
+    <Tabs orientation="vertical" value={value} onChange={handleChange} aria-label="BW Vertical tabs" {...props}>
+      <Tab component={Paper} elevation={value === 0 ? 3 : 0} {...tabProps} label={`Payloads - ${payloadCount}`} icon={<VscSymbolNamespace />} />
+      <Tab
+        component={Paper}
+        elevation={value === 1 ? 3 : 0}
+        {...tabProps}
+        label={`Bound Witnesses - ${boundWitnessCount}`}
+        icon={<VscSymbolMethod />}
+      />
+      <Tab component={Paper} elevation={value === 2 ? 3 : 0} {...tabProps} label={`Signatures - ${signers}`} icon={<FaSignature />} />
+    </Tabs>
+  )
+}

package/src/components/Details/Card/Navigation/index.ts

@@ -0,0 +1,2 @@
+export * from './BottomNavigation.tsx'
+export * from './NavigationTabs.tsx'

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

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

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

@@ -0,0 +1,77 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { Hash } from '@xylabs/hex'
+import { Payload } from '@xyo-network/payload-model'
+import { useEvent } from '@xyo-network/react-event'
+import { sampleBlock } from '@xyo-network/react-storybook'
+import React, { useRef } from 'react'
+import {
+  BrowserRouter, Route, Routes,
+} from 'react-router-dom'
+
+import { BoundWitnessLinksDetails } from './BoundWitnessLinksDetails.tsx'
+import { BoundWitnessDetails } from './Details.tsx'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: BoundWitnessDetails,
+  parameters: { docs: { page: null } },
+  title: 'plugin/boundwitness/Details',
+} as Meta<typeof BoundWitnessDetails>
+
+const Template: StoryFn<typeof BoundWitnessDetails> = (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 (
+    <BrowserRouter>
+      <Routes>
+        <Route path="temp" element={<h1>Successfully navigated to archivePath</h1>} />
+        <Route path="*" element={<BoundWitnessDetails ref={sharedRef} {...args} />} />
+      </Routes>
+    </BrowserRouter>
+  )
+}
+
+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: sampleBlock }
+
+const WithArchiveLink = Template.bind({})
+WithArchiveLink.args = { payload: sampleBlock }
+
+const WithPreviousHash = Template.bind({})
+const payload = { ...sampleBlock, previous_hashes: ['ebeb156c9aa0db6e5bf9fe3bfcab5e7f2765235587667adc34c1e8966f899349'] as Hash[] }
+WithPreviousHash.args = {
+  children: (
+    <>
+      <h2>For Testing events only</h2>
+      <BoundWitnessLinksDetails value={payload} />
+    </>
+  ),
+  payload,
+}
+
+const WithArchiveLinkPaper = Template.bind({})
+WithArchiveLinkPaper.args = { paper: true, payload: sampleBlock }
+
+export {
+  Default, WithArchiveLink, WithArchiveLinkPaper, WithData, WithNoData, WithPreviousHash,
+}
+
+export default StorybookEntry

package/src/components/Details/Details.tsx

@@ -0,0 +1,34 @@
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { BoundWitness } from '@xyo-network/boundwitness-model'
+import { Payload } from '@xyo-network/payload-model'
+import { PayloadDataDetails, PayloadJsonDetails } from '@xyo-network/react-payload-details'
+import React, { forwardRef } from 'react'
+
+import { BoundWitnessPayloads, BoundWitnessSignatureDetails } from '../_shared/index.ts'
+import { BoundWitnessValidationDetails } from './ValidationDetails.tsx'
+
+export interface BoundWitnessDetailsProps extends FlexBoxProps {
+  payload?: Payload
+  /** @field Fetched Payloads for the Bound Witness */
+  payloads?: Payload[]
+}
+
+const BoundWitnessDetails = forwardRef<unknown, BoundWitnessDetailsProps>(({
+  paper, payload, children, ...props
+}, ref) => {
+  const boundwitness = payload as BoundWitness | undefined
+  return (
+    <FlexCol justifyContent="flex-start" alignItems="stretch" gap={1} ref={ref} {...props}>
+      <PayloadDataDetails paper={paper} payload={boundwitness} size="large" badge />
+      <BoundWitnessPayloads paper={paper} payload={boundwitness} />
+      <BoundWitnessSignatureDetails paper={paper} block={boundwitness} />
+      <BoundWitnessValidationDetails paper={paper} value={boundwitness} />
+      <PayloadJsonDetails paper={paper} payload={boundwitness} />
+      {children}
+    </FlexCol>
+  )
+})
+
+BoundWitnessDetails.displayName = 'BoundWitnessDetails [XYO]'
+
+export { BoundWitnessDetails }

package/src/components/Details/ValidationDetails.tsx

@@ -0,0 +1,44 @@
+import { Typography } from '@mui/material'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { usePromise } from '@xylabs/react-promise'
+import { BoundWitness } from '@xyo-network/boundwitness-model'
+import { BoundWitnessValidator } from '@xyo-network/boundwitness-validator'
+import {
+  Property, PropertyGroup, PropertyGroupProps,
+} from '@xyo-network/react-property'
+import React from 'react'
+
+export type BoundWitnessValidationDetailsProps = PropertyGroupProps & {
+  value?: BoundWitness
+}
+
+export const BoundWitnessValidationDetails: React.FC<BoundWitnessValidationDetailsProps> = ({ value, ...props }) => {
+  const [errors = []] = usePromise(async () => await (value ? new BoundWitnessValidator(value).validate() : undefined), [value])
+
+  let elevation = 2
+  if (props.paper) {
+    elevation += props.elevation ?? 0
+  }
+
+  return (
+    <PropertyGroup titleProps={{ elevation }} title="Validation" tip="The results from validating the block" {...props}>
+      <Property
+        titleProps={{ elevation }}
+        flexGrow={1}
+        title="Valid"
+        value={errors.length === 0 ? 'True' : 'False'}
+        tip={
+          errors.length > 0
+            ? (
+                <FlexCol flexWrap="wrap">
+                  {errors.map((error, index) => {
+                    return <Typography key={index}>{error.toString()}</Typography>
+                  })}
+                </FlexCol>
+              )
+            : <Typography>No Errors</Typography>
+        }
+      />
+    </PropertyGroup>
+  )
+}

package/src/components/Details/index.ts

@@ -0,0 +1,4 @@
+export * from './Box/index.ts'
+export * from './Card/index.ts'
+export * from './Details.tsx'
+export * from './ValidationDetails.tsx'

package/src/components/_shared/Actions/BWActions.tsx

@@ -0,0 +1,53 @@
+import { DataObject as DataObjectIcon } from '@mui/icons-material'
+import { ellipsize } from '@xylabs/eth-address'
+import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+import { QuickTipButton } from '@xylabs/react-quick-tip-button'
+import { BoundWitness } from '@xyo-network/boundwitness-model'
+import { usePayloadHash } from '@xyo-network/react-shared'
+import React, { ReactNode } from 'react'
+
+import { BWPreviousHashQuickTipButton } from './previous-hash/index.ts'
+import { BWVerification } from './Verification.tsx'
+
+export interface BWActionsProps extends FlexBoxProps {
+  additionalActions?: ReactNode
+  boundwitness?: BoundWitness
+  hideJSONButton?: boolean
+  hidePreviousHash?: boolean
+  hideValidation?: boolean
+  priorActions?: ReactNode
+  validationIconColors?: boolean
+}
+
+export const BWActions: React.FC<BWActionsProps> = ({
+  additionalActions,
+  boundwitness,
+  hideJSONButton,
+  hideValidation,
+  hidePreviousHash,
+  priorActions,
+  validationIconColors,
+  ...props
+}) => {
+  const hash = usePayloadHash(boundwitness)
+
+  return (
+    <FlexRow {...props}>
+      {priorActions}
+      {hidePreviousHash || boundwitness?.previous_hashes.length === 0 ? null : <BWPreviousHashQuickTipButton boundwitness={boundwitness} />}
+      {hideValidation ? null : <BWVerification iconColors={validationIconColors} boundwitness={boundwitness} />}
+      {hideJSONButton
+        ? null
+        : (
+            <QuickTipButton
+              Icon={DataObjectIcon}
+              title={`JSON for ${ellipsize(hash ?? '', 8)}`}
+              dialogProps={{ fullWidth: true, maxWidth: 'md' }}
+            >
+              <pre style={{ wordBreak: 'break-all' }}>{boundwitness ? JSON.stringify(boundwitness, null, 2) : null}</pre>
+            </QuickTipButton>
+          )}
+      {additionalActions}
+    </FlexRow>
+  )
+}

package/src/components/_shared/Actions/Verification.tsx

@@ -0,0 +1,43 @@
+import { CancelRounded as CancelRoundedIcon, CheckCircleOutlineRounded as CheckCircleOutlineRoundedIcon } from '@mui/icons-material'
+import { SvgIconProps, Typography } from '@mui/material'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { usePromise } from '@xylabs/react-promise'
+import { QuickTipButton, QuickTipButtonProps } from '@xylabs/react-quick-tip-button'
+import { BoundWitness } from '@xyo-network/boundwitness-model'
+import { BoundWitnessValidator } from '@xyo-network/boundwitness-validator'
+import React, { forwardRef } from 'react'
+
+const InvalidIcon = forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => <CancelRoundedIcon color="error" ref={ref} {...props} />)
+InvalidIcon.displayName = 'InvalidIcon'
+
+export interface BWVerification extends QuickTipButtonProps {
+  boundwitness?: BoundWitness
+  iconColors?: boolean
+}
+
+export const BWVerification: React.FC<BWVerification> = ({ boundwitness, iconColors }) => {
+  const [errors = []] = usePromise(async () => await (boundwitness ? new BoundWitnessValidator(boundwitness) : undefined)?.validate(), [boundwitness])
+
+  return (
+    <QuickTipButton
+      Icon={errors.length > 0
+        ? forwardRef((props, ref) => {
+            return <InvalidIcon color={iconColors ? 'error' : undefined} ref={ref} {...props} />
+          })
+        : forwardRef((props, ref) => {
+            return <CheckCircleOutlineRoundedIcon color={iconColors ? 'success' : undefined} ref={ref} {...props} />
+          })}
+      hoverText={errors.length > 0 ? 'Invalid Bound Witness' : 'Valid'}
+    >
+      {errors.length > 0
+        ? (
+            <FlexCol flexWrap="wrap" alignItems="start">
+              {errors.map((error, index) => {
+                return <Typography key={index}>{error.toString()}</Typography>
+              })}
+            </FlexCol>
+          )
+        : <Typography>No Errors</Typography>}
+    </QuickTipButton>
+  )
+}

package/src/components/_shared/Actions/_shared/ActionMenuItemProps.ts

@@ -0,0 +1,7 @@
+import { MenuItemProps } from '@mui/material'
+import { BoundWitness } from '@xyo-network/boundwitness-model'
+
+export interface ActionMenuItemProps extends MenuItemProps {
+  boundwitness?: BoundWitness
+  onDialogClose?: () => void
+}

package/src/components/_shared/Actions/_shared/MenuItemDialog.tsx

@@ -0,0 +1,27 @@
+import {
+  Button, Dialog, DialogActions, DialogContent, DialogProps, DialogTitle,
+} from '@mui/material'
+import React from 'react'
+
+export interface MenuItemDialogProps extends DialogProps {
+  dialogTitle?: string
+}
+
+export const MenuItemDialog: React.FC<MenuItemDialogProps> = ({
+  children, dialogTitle, open, onClose, ...props
+}) => {
+  return (
+    <Dialog open={open} onClose={onClose} sx={{ '& .MuiPaper-root': { minWidth: '75%' } }} {...props}>
+      <DialogTitle>{dialogTitle}</DialogTitle>
+      <DialogContent>
+        {children}
+      </DialogContent>
+      <DialogActions sx={{
+        display: 'flex', flexDirection: 'row', justifyContent: 'end',
+      }}
+      >
+        <Button variant="contained" onClick={e => onClose?.(e, 'escapeKeyDown')}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,2 @@
+export * from './ActionMenuItemProps.ts'
+export * from './MenuItemDialog.tsx'

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

@@ -0,0 +1,4 @@
+export * from './BWActions.tsx'
+export * from './json/index.ts'
+export * from './previous-hash/index.ts'
+export * from './Verification.tsx'

package/src/components/_shared/Actions/json/MenuItem.tsx

@@ -0,0 +1,41 @@
+import { Code } from '@mui/icons-material'
+import { ListItemIcon, MenuItem } from '@mui/material'
+import { ellipsize } from '@xylabs/eth-address'
+import { JsonViewerEx } from '@xyo-network/react-payload-raw-info'
+import { usePayloadHash } from '@xyo-network/react-shared'
+import React, { MouseEventHandler, useState } from 'react'
+
+import { ActionMenuItemProps, MenuItemDialog } from '../_shared/index.ts'
+
+export interface BWJsonMenuItemProps extends ActionMenuItemProps {}
+
+export const BWJsonMenuItem: React.FC<BWJsonMenuItemProps> = ({
+  boundwitness, onClick, onDialogClose, ...props
+}) => {
+  const hash = usePayloadHash(boundwitness)
+
+  const [open, setOpen] = useState(false)
+  const onClose = () => {
+    onDialogClose?.()
+    setOpen(false)
+  }
+
+  const handleMenuClick: MouseEventHandler<HTMLLIElement> = (e) => {
+    onClick?.(e)
+    setOpen(true)
+  }
+
+  const title = hash ? `JSON for ${ellipsize(hash, 5)}` : 'JSON'
+
+  return (
+    <>
+      <MenuItem onClick={handleMenuClick} {...props}>
+        <ListItemIcon><Code /></ListItemIcon>
+        JSON
+      </MenuItem>
+      <MenuItemDialog open={open} onClose={onClose} dialogTitle={title}>
+        <JsonViewerEx value={boundwitness} />
+      </MenuItemDialog>
+    </>
+  )
+}

package/src/components/_shared/Actions/json/index.ts

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