@xyo-network/react-payload 2.26.37 → 2.26.38

package/dist/docs.json

@@ -10,7 +10,7 @@
 			"fileName": "index.ts",
 			"line": 1,
 			"character": 0,
-			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eeec410/packages/payload/src/index.ts#L1"
+			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/c31a96d/packages/payload/src/index.ts#L1"
 		}
 	]
 }

package/package.json

@@ -21,14 +21,14 @@
     "@xyo-network/api": "^2.22.15",
     "@xyo-network/network": "^2.22.15",
     "@xyo-network/payload": "^2.22.15",
-    "@xyo-network/react-archive": "^2.26.37",
-    "@xyo-network/react-archivist": "^2.26.37",
-    "@xyo-network/react-archivist-api": "^2.26.37",
-    "@xyo-network/react-auth-service": "^2.26.37",
-    "@xyo-network/react-network": "^2.26.37",
-    "@xyo-network/react-property": "^2.26.37",
-    "@xyo-network/react-schema": "^2.26.37",
-    "@xyo-network/react-shared": "^2.26.37",
+    "@xyo-network/react-archive": "^2.26.38",
+    "@xyo-network/react-archivist": "^2.26.38",
+    "@xyo-network/react-archivist-api": "^2.26.38",
+    "@xyo-network/react-auth-service": "^2.26.38",
+    "@xyo-network/react-network": "^2.26.38",
+    "@xyo-network/react-property": "^2.26.38",
+    "@xyo-network/react-schema": "^2.26.38",
+    "@xyo-network/react-shared": "^2.26.38",
     "@xyo-network/utils": "^2.22.15",
     "luxon": "^3.0.1",
     "react": "^18.2.0",
@@ -95,5 +95,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.26.37"
+  "version": "2.26.38"
 }

package/src/components/Details/DataDetails.tsx

@@ -0,0 +1,65 @@
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import VisibilityIcon from '@mui/icons-material/Visibility'
+import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material'
+import { ButtonEx } from '@xylabs/react-button'
+import { XyoPayload, XyoPayloadWrapper } from '@xyo-network/payload'
+import { Property, PropertyAction, PropertyProps } from '@xyo-network/react-property'
+import { SizeProp } from '@xyo-network/react-shared'
+import { useState } from 'react'
+
+import { PayloadHashSourceDetails } from './HashSourceDetails'
+
+export type PayloadDataDetailsProps = PropertyProps & {
+  payload?: XyoPayload
+  size?: SizeProp
+  badge?: boolean
+}
+
+export const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({ size, badge, payload, ...props }) => {
+  const wrapper = payload ? new XyoPayloadWrapper(payload) : undefined
+
+  const [viewSourceOpen, setViewSourceOpen] = useState(false)
+  const hash = wrapper?.hash
+
+  let elevation = 2
+  if (props.paper) {
+    elevation += props.elevation ?? 0
+  }
+
+  const actions: PropertyAction[] = [
+    {
+      icon: <VisibilityIcon />,
+      name: 'View',
+      onClick: () => setViewSourceOpen(true),
+    },
+    {
+      icon: <ContentCopyIcon />,
+      name: 'Copy',
+      onClick: async () => await navigator.clipboard.writeText(wrapper?.hash ?? ''),
+    },
+  ]
+
+  const onCopy = async () => {
+    await navigator.clipboard.writeText(wrapper?.stringified ?? '')
+  }
+
+  return (
+    <>
+      <Property titleProps={{ elevation }} badge={badge} size={size} actions={actions} title="Payload Hash" value={hash ?? '<Unknown>'} tip="This is the payload hash" {...props} />
+      <Dialog open={viewSourceOpen} onClose={() => setViewSourceOpen(false)}>
+        <DialogTitle>Hash Source</DialogTitle>
+        <DialogContent>
+          <PayloadHashSourceDetails noTitle payload={payload} />
+        </DialogContent>
+        <DialogActions>
+          <ButtonEx color="secondary" onClick={onCopy}>
+            Copy
+          </ButtonEx>
+          <ButtonEx color="secondary" onClick={() => setViewSourceOpen(false)}>
+            Close
+          </ButtonEx>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}

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

@@ -0,0 +1,62 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
+
+import { appThemeDecorator, samplePayload, samplePayloadFromBuilder } from '../../../../../.storybook'
+import { PayloadDetails } from './Details'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: PayloadDetails,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'payload/Details',
+} as ComponentMeta<typeof PayloadDetails>
+
+const Template: ComponentStory<typeof PayloadDetails> = (args) => (
+  <BrowserRouter>
+    <Routes>
+      <Route path="temp" element={<h1>Successfully navigated to archivePath</h1>} />
+      <Route path="*" element={<PayloadDetails {...args}></PayloadDetails>}></Route>
+    </Routes>
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = {}
+Default.decorators = [appThemeDecorator]
+
+const WithSample = Template.bind({})
+WithSample.args = { payload: samplePayload }
+WithSample.decorators = [appThemeDecorator]
+
+const WithBuilderSample = Template.bind({})
+WithBuilderSample.args = { payload: samplePayloadFromBuilder }
+WithBuilderSample.decorators = [appThemeDecorator]
+
+const WithArchiveLink = Template.bind({})
+WithArchiveLink.args = { archivePath: 'temp', payload: samplePayloadFromBuilder }
+WithArchiveLink.decorators = [appThemeDecorator]
+
+const DefaultPaper = Template.bind({})
+DefaultPaper.args = { paper: true }
+DefaultPaper.decorators = [appThemeDecorator]
+
+const WithSamplePaper = Template.bind({})
+WithSamplePaper.args = { paper: true, payload: samplePayload }
+WithSamplePaper.decorators = [appThemeDecorator]
+
+const WithBuilderSamplePaper = Template.bind({})
+WithBuilderSamplePaper.args = { paper: true, payload: samplePayloadFromBuilder }
+WithBuilderSamplePaper.decorators = [appThemeDecorator]
+
+const WithArchiveLinkPaper = Template.bind({})
+WithArchiveLinkPaper.args = { archivePath: 'temp', paper: true, payload: samplePayloadFromBuilder }
+WithArchiveLinkPaper.decorators = [appThemeDecorator]
+
+export { Default, DefaultPaper, WithArchiveLink, WithArchiveLinkPaper, WithBuilderSample, WithBuilderSamplePaper, WithSample, WithSamplePaper }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Details/Details.tsx

@@ -0,0 +1,27 @@
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { XyoPayload } from '@xyo-network/payload'
+
+import { PayloadDataDetails } from './DataDetails'
+import { PayloadJsonDetails } from './JsonDetails'
+import { PayloadMetaDetails } from './MetaDetails'
+import { PayloadValidationDetails } from './ValidationDetails'
+
+export type WithPaper<T> = T & { paper: true }
+export type WithoutPaper<T> = T & { paper?: false }
+
+export type PayloadDetailsProps = FlexBoxProps & {
+  payload?: XyoPayload
+  paper?: boolean
+  archivePath?: string
+}
+
+export const PayloadDetails: React.FC<PayloadDetailsProps> = ({ archivePath, paper, payload, ...props }) => {
+  return (
+    <FlexCol gap={1} justifyContent="flex-start" alignItems="stretch" marginTop={2} marginBottom={8} {...props}>
+      <PayloadDataDetails paper={paper} size="large" badge payload={payload} />
+      <PayloadMetaDetails archivePath={archivePath} paper={paper ? true : false} value={payload} />
+      <PayloadValidationDetails paper={paper} value={payload} />
+      <PayloadJsonDetails paper={paper} payload={payload} />
+    </FlexCol>
+  )
+}

package/src/components/Details/HashSourceDetails.tsx

@@ -0,0 +1,41 @@
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import { IconButton, Typography, useTheme } from '@mui/material'
+import { FlexBoxProps, FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'
+import { QuickTipButton } from '@xylabs/react-quick-tip-button'
+import { XyoPayload, XyoPayloadWrapper } from '@xyo-network/payload'
+
+export interface PayloadHashSourceDetailsProps extends FlexBoxProps {
+  noTitle?: boolean
+  payload?: XyoPayload
+}
+
+export const PayloadHashSourceDetails: React.FC<PayloadHashSourceDetailsProps> = ({ noTitle = false, payload, ...props }) => {
+  const theme = useTheme()
+  const payloadWrapper = payload ? new XyoPayloadWrapper(payload) : null
+
+  return (
+    <FlexCol alignItems="stretch" {...props}>
+      {noTitle ? null : (
+        <FlexRow margin={1} justifyContent="flex-start">
+          <Typography>Hash Source</Typography>
+          <QuickTipButton title="Hash Source">The actual string used to generate the hash (SHA256)</QuickTipButton>
+        </FlexRow>
+      )}
+      <FlexRow>
+        <FlexGrowRow background border={1} borderColor={theme.palette.divider} justifyContent="start">
+          <Typography padding={2} fontFamily="monospace" variant="body1" sx={{ overflowWrap: 'break-word', wordBreak: 'break-all' }}>
+            {payloadWrapper?.stringified ?? ''}
+          </Typography>
+        </FlexGrowRow>
+        <IconButton>
+          <ContentCopyIcon />
+        </IconButton>
+      </FlexRow>
+      {noTitle ? (
+        <FlexRow margin={1} justifyContent="flex-start">
+          <Typography variant="body2">The actual string used to generate the hash (SHA256). This can be used to validate the hash manually.</Typography>
+        </FlexRow>
+      ) : null}
+    </FlexCol>
+  )
+}

package/src/components/Details/JsonDetails.tsx

@@ -0,0 +1,44 @@
+import { Paper, useMediaQuery, useTheme } from '@mui/material'
+import { FlexGrowRow } from '@xylabs/react-flexbox'
+import { XyoPayload } from '@xyo-network/payload'
+import { PropertyGroup, PropertyGroupProps } from '@xyo-network/react-property'
+import { lazy, Suspense } from 'react'
+import { ReactJsonViewProps } from 'react-json-view'
+
+const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
+
+export type PayloadJsonDetailsProps = PropertyGroupProps & {
+  payload?: XyoPayload
+  jsonViewProps?: ReactJsonViewProps
+}
+
+export const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps> = ({ jsonViewProps, payload = {}, ...props }) => {
+  const { breakpoints, palette } = useTheme()
+  const belowSm = useMediaQuery(breakpoints.down('sm'))
+
+  let elevation = 2
+  if (props.paper) {
+    elevation += props.elevation ?? 0
+  }
+
+  const jsonTheme = palette.mode === 'dark' ? 'shapeshifter' : undefined
+
+  return (
+    <PropertyGroup titleProps={{ elevation }} title="JSON" tip="The raw JSON of the payload" {...props}>
+      <Paper square variant="elevation" style={{ overflow: 'hidden', padding: '16px', width: '100%' }}>
+        <Suspense fallback={<FlexGrowRow />}>
+          <JsonView
+            groupArraysAfterLength={5}
+            shouldCollapse={(props) => props.name !== 'root'}
+            style={{ backgroundColor: undefined, overflow: 'hidden' }}
+            src={payload}
+            enableClipboard
+            theme={jsonTheme}
+            collapseStringsAfterLength={belowSm ? 24 : 32}
+            {...jsonViewProps}
+          />
+        </Suspense>
+      </Paper>
+    </PropertyGroup>
+  )
+}

package/src/components/Details/MetaDetails.tsx

@@ -0,0 +1,38 @@
+import { XyoPayloadWithPartialMeta } from '@xyo-network/payload'
+import { ArchiveProperty } from '@xyo-network/react-archive'
+import { Property, PropertyGroup, PropertyGroupProps } from '@xyo-network/react-property'
+
+export type PayloadMetaDetailsProps = PropertyGroupProps & {
+  value?: XyoPayloadWithPartialMeta
+  archivePath?: string
+}
+
+export const PayloadMetaDetails: React.FC<PayloadMetaDetailsProps> = ({ archivePath, value, ...props }) => {
+  let elevation = 2
+  if (props.paper) {
+    elevation += props.elevation ?? 0
+  }
+  return (
+    <PropertyGroup titleProps={{ elevation }} title="Meta" tip="The meta fields added to the record by the archivist" {...props}>
+      {value?._client ? (
+        <Property titleProps={{ elevation }} flexGrow={1} title="Client" value={value?._client ?? '<Unknown>'} tip="This client used to create this payload" />
+      ) : null}
+      {value?._archive ? <ArchiveProperty titleProps={{ elevation }} flexGrow={1} payload={value} path={archivePath} /> : null}
+      {value?._reportedHash ? (
+        <Property titleProps={{ elevation }} flexGrow={1} title="Reported Hash" value={value?._reportedHash ?? '<Unknown>'} tip="The has reported by the payload" />
+      ) : null}
+      {value?._timestamp ? (
+        <Property titleProps={{ elevation }} flexGrow={1} title="Timestamp" value={value?._timestamp ?? '<Unknown>'} tip="This timestamp of the payload" />
+      ) : null}
+      {value?._observeDuration ? (
+        <Property
+          titleProps={{ elevation }}
+          flexGrow={1}
+          title="Observation Duration"
+          value={value?._observeDuration ?? '<Unknown>'}
+          tip="This duration of time observed by the witness"
+        />
+      ) : null}
+    </PropertyGroup>
+  )
+}

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

@@ -0,0 +1,55 @@
+import { ComponentStory, Meta } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { appThemeDecorator, samplePayload } from '../../../../../../.storybook'
+import { PayloadDetails } from '../Details'
+import { PayloadValidationDetails } from './ValidationDetails'
+
+const StorybookEntry: Meta = {
+  argTypes: {},
+  args: {
+    value: {
+      schema: 'network.xyo.schema',
+    },
+  },
+  component: PayloadDetails,
+  decorators: [appThemeDecorator],
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'payload/ValidationDetails',
+}
+
+const Template: ComponentStory<typeof PayloadValidationDetails> = (args) => (
+  <BrowserRouter>
+    <PayloadValidationDetails {...args} />
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = { skipBody: true }
+
+const WithViewSchemaLink = Template.bind({})
+WithViewSchemaLink.args = { viewSchemaUrl: 'http://beta.explore.xyo.network/6fe3f745b1179fefa74cc3c7eab58321bee1c9ca9e34d9585467364cc5d3bbe2/?huri=huri' }
+
+const WithErrorsInToolTip = Template.bind({})
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+WithErrorsInToolTip.args = { value: { ...samplePayload, ...{ _hash: '6fe3f745b1179fefa74cc3c7eab58321bee1c9ca9e34d9585467364cc5d3bbe2' } } }
+
+const SkipBody = Template.bind({})
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+SkipBody.args = { skipBody: true, value: { _hash: '44136fa355b3678a1146ad16f7e8649e94fb4fc21fe77e8310c060f61caaff8a', _timestamp: new Date().getTime() } }
+
+const SkipMeta = Template.bind({})
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+SkipMeta.args = { skipMeta: true, value: { _hash: null, schema: 'network.xyo.schema' } }
+
+export { Default, SkipBody, SkipMeta, WithErrorsInToolTip, WithViewSchemaLink }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Details/ValidationDetails/ValidationDetails.tsx

@@ -0,0 +1,42 @@
+import { Typography } from '@mui/material'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { XyoPayloadValidator, XyoPayloadWithMeta } from '@xyo-network/payload'
+import { Property, PropertyGroup } from '@xyo-network/react-property'
+import { SchemaProperty } from '@xyo-network/react-schema'
+
+import { PayloadValidationDetailsProps } from './ValidationDetailsProps'
+
+export const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> = ({ viewSchemaUrl, skipBody = false, value, ...props }) => {
+  const validator = value ? new XyoPayloadValidator(value as XyoPayloadWithMeta) : undefined
+
+  const bodyErrors = skipBody ? [] : validator?.body.validate() ?? []
+  const errors: Error[] = [...bodyErrors]
+
+  let elevation = 2
+  if (props.paper) {
+    elevation += props.elevation ?? 0
+  }
+
+  return (
+    <PropertyGroup titleProps={{ elevation }} title="Validation" tip="The results from validating the payload" {...props}>
+      <Property
+        titleProps={{ elevation }}
+        flexGrow={1}
+        title="Valid"
+        value={errors.length === 0 ? 'True' : 'False'}
+        tip={
+          errors.length > 0 ? (
+            <FlexCol>
+              {errors.map((error, index) => {
+                return <Typography key={index}>{error.toString()}</Typography>
+              })}
+            </FlexCol>
+          ) : (
+            <Typography>No Errors</Typography>
+          )
+        }
+      />
+      {value?.schema && <SchemaProperty flexGrow={1} titleProps={{ elevation }} value={value.schema} viewSchemaUrl={viewSchemaUrl} />}
+    </PropertyGroup>
+  )
+}

package/src/components/Details/ValidationDetails/ValidationDetailsProps.ts

@@ -0,0 +1,8 @@
+import { XyoPayloadWithPartialMeta } from '@xyo-network/payload'
+import { PropertyGroupProps } from '@xyo-network/react-property'
+
+export type PayloadValidationDetailsProps = PropertyGroupProps & {
+  skipBody?: boolean
+  value?: XyoPayloadWithPartialMeta
+  viewSchemaUrl?: string
+}

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

@@ -0,0 +1,2 @@
+export * from './ValidationDetails'
+export * from './ValidationDetailsProps'

package/src/components/Details/index.ts

@@ -0,0 +1,5 @@
+export * from './DataDetails'
+export * from './Details'
+export * from './JsonDetails'
+export * from './MetaDetails'
+export * from './ValidationDetails'

package/src/components/Table/PayloadTableColumnConfig.ts

@@ -0,0 +1,28 @@
+export type PayloadTableColumnSlug = 'hash' | 'archive' | 'client' | 'date' | 'time' | 'schema' | 'valid'
+
+export interface PayloadTableColumnConfig {
+  xs?: PayloadTableColumnSlug[]
+  sm?: PayloadTableColumnSlug[]
+  md?: PayloadTableColumnSlug[]
+  lg?: PayloadTableColumnSlug[]
+  xl?: PayloadTableColumnSlug[]
+}
+
+export const payloadColumnNames: Record<PayloadTableColumnSlug, string> = {
+  archive: 'Archive',
+  client: 'Client',
+  date: 'Date',
+  hash: 'Hash',
+  schema: 'Schema',
+  time: 'Time',
+  valid: 'Valid',
+}
+
+export const payloadTableColumnConfigDefaults = (): PayloadTableColumnConfig => {
+  const xs: PayloadTableColumnSlug[] = ['hash', 'time', 'valid']
+  const sm: PayloadTableColumnSlug[] = ['hash', 'time', 'archive', 'valid']
+  const md: PayloadTableColumnSlug[] = ['hash', 'schema', 'archive', 'time', 'valid']
+  const lg: PayloadTableColumnSlug[] = ['hash', 'schema', 'archive', 'date', 'time', 'valid']
+  const xl: PayloadTableColumnSlug[] = ['hash', 'schema', 'archive', 'client', 'date', 'time', 'valid']
+  return { lg, md, sm, xl, xs }
+}

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,43 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { appThemeDecorator, samplePayload } from '../../../../../.storybook'
+import { PayloadTable } from './Table'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: PayloadTable,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'payload/Table',
+} as ComponentMeta<typeof PayloadTable>
+
+const Template: ComponentStory<typeof PayloadTable> = (args) => (
+  <BrowserRouter>
+    <PayloadTable {...args}></PayloadTable>
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = {}
+Default.decorators = [appThemeDecorator]
+
+const WithData = Template.bind({})
+WithData.args = { payloads: [samplePayload, samplePayload] }
+WithData.decorators = [appThemeDecorator]
+
+const WithError = Template.bind({})
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const { _hash, ...badPayload } = samplePayload
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+WithError.args = { payloads: [samplePayload, badPayload] }
+
+export { Default, WithData, WithError }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Table/Table.tsx

@@ -0,0 +1,60 @@
+import { Alert, Table, TableBody, TableCell, TableHead, TableProps, TableRow, Typography } from '@mui/material'
+import { useBreakpoint } from '@xylabs/react-shared'
+import { XyoPayload, XyoPayloadWithPartialMeta } from '@xyo-network/payload'
+import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service'
+
+import { payloadColumnNames, PayloadTableColumnConfig, payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig'
+import { PayloadTableRow } from './TableRow'
+
+export interface PayloadTableProps extends TableProps {
+  exploreDomain?: string
+  onRowClick?: (value: XyoPayload) => void
+  payloads?: XyoPayloadWithPartialMeta[] | null
+  columns?: PayloadTableColumnConfig
+}
+
+export const PayloadTable: React.FC<PayloadTableProps> = ({ exploreDomain, onRowClick, payloads, children, columns = payloadTableColumnConfigDefaults(), ...props }) => {
+  const breakPoint = useBreakpoint()
+  return breakPoint ? (
+    <Table {...props}>
+      <TableHead>
+        <TableRow>
+          {columns[breakPoint]?.map((column, index) => {
+            return (
+              <TableCell key={index} width={index === 0 ? '100%' : undefined} align={index === 0 ? 'left' : 'center'}>
+                <Typography variant="caption" noWrap>
+                  <strong>{payloadColumnNames[column]}</strong>
+                </Typography>
+              </TableCell>
+            )
+          })}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {payloads?.map((payload, index) => (
+          <XyoApiThrownErrorBoundary
+            key={`${payload._hash}-${payload._timestamp}-${index}`}
+            errorComponent={(e) => (
+              <Alert severity="error">
+                Error Loading Payload: <Typography fontWeight="bold">{e.message}</Typography>
+              </Alert>
+            )}
+          >
+            <PayloadTableRow
+              onClick={
+                onRowClick
+                  ? () => {
+                      onRowClick(payload)
+                    }
+                  : undefined
+              }
+              exploreDomain={exploreDomain}
+              payload={payload}
+            />
+          </XyoApiThrownErrorBoundary>
+        ))}
+        {children}
+      </TableBody>
+    </Table>
+  ) : null
+}