@xyo-network/react-chain-blockchain 1.20.14 → 1.20.16

package/src/components/block/table/head/index.ts

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

package/src/components/block/table/index.ts

@@ -1,4 +0,0 @@
-export * from './cell/index.ts'
-export * from './Ex.tsx'
-export * from './head/index.ts'
-export * from './row/index.ts'

package/src/components/block/table/row/TableRow.stories.tsx

@@ -1,34 +0,0 @@
-import { Table, TableBody } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { buildRandomBlockChainBlocksOnly } from '@xyo-network/react-chain-shared'
-import React from 'react'
-
-import { BlockChainTableRow } from './TableRow.tsx'
-
-const [block] = await buildRandomBlockChainBlocksOnly(1)
-
-export default {
-  title: 'Block/TableRow',
-  component: BlockChainTableRow,
-} as Meta
-
-const Template: StoryFn<typeof BlockChainTableRow> = args => (
-  <Table>
-    <TableBody>
-      <BlockChainTableRow {...args} />
-    </TableBody>
-  </Table>
-)
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithData = Template.bind({})
-WithData.args = { block }
-
-const WithDataLinked = Template.bind({})
-WithDataLinked.args = { block, linked: true }
-
-export {
-  Default, WithData, WithDataLinked,
-}

package/src/components/block/table/row/TableRow.tsx

@@ -1,46 +0,0 @@
-import type { TableRowProps } from '@mui/material'
-import { usePayloadRootHash } from '@xyo-network/react-shared'
-import type { Ref } from 'react'
-import React, { useMemo } from 'react'
-
-import type { BlockComponentProps } from '../../../../types/index.ts'
-import { StyledLinkableTableRow } from '../../../table/index.ts'
-import { useLinkedBlockItem } from '../cell/hooks/index.ts'
-import {
-  BlockEpochTableCell,
-  BlockHashTableCell, BlockJsonViewTableCell, BlockNumberTableCell, BlockPayloadCountsTableCell,
-  BlockProducerTableCell,
-  BlockTransactionCountTableCell, BlockVerificationTableCell,
-} from '../cell/index.ts'
-
-export interface BlockChainTableRowProps extends BlockComponentProps, TableRowProps {
-  deepValidation?: boolean
-  linked?: boolean
-}
-
-export const BlockChainTableRow: React.FC<BlockChainTableRowProps> = ({
-  block, deepValidation, defaultExpanded, linked, ...props
-}) => {
-  const linkedTableCellProps = useMemo(() => ({ block, linked }), [block, linked])
-  const defaultTableCellProps = useMemo(() => ({ block }), [block])
-  const hash = usePayloadRootHash(block?.[0])
-  const [ref, handleClick] = useLinkedBlockItem('block-hash', hash)
-
-  return (
-    <StyledLinkableTableRow
-      onClick={linked ? handleClick : undefined}
-      ref={ref as Ref<HTMLTableRowElement> | undefined}
-      linked={linked}
-      {...props}
-    >
-      <BlockNumberTableCell align="left" {...linkedTableCellProps} />
-      <BlockHashTableCell align="left" {...linkedTableCellProps} />
-      <BlockEpochTableCell align="left" {...linkedTableCellProps} />
-      <BlockProducerTableCell align="left" {...linkedTableCellProps} />
-      <BlockTransactionCountTableCell align="left" {...linkedTableCellProps} />
-      <BlockPayloadCountsTableCell align="left" {...linkedTableCellProps} />
-      <BlockVerificationTableCell deepValidation={deepValidation} {...defaultTableCellProps} />
-      <BlockJsonViewTableCell {...defaultTableCellProps} />
-    </StyledLinkableTableRow>
-  )
-}

package/src/components/block/table/row/index.ts

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

package/src/components/chain/controls/PollingControlsFlexbox.tsx

@@ -1,76 +0,0 @@
-import {
-  Autorenew,
-  Pause,
-} from '@mui/icons-material'
-import {
-  Alert,
-  AlertTitle,
-  Grow,
-  Icon, IconButton, Tooltip,
-} from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexRow } from '@xylabs/react-flexbox'
-import React, { memo } from 'react'
-
-import type { PollingState } from '../hooks/index.ts'
-import { ChainAnalyzerStatsDialogFromContext } from '../stats/index.ts'
-import { StyledPulseSvgIcon } from './PulseSvgIcon.tsx'
-
-export interface PollingControlsFlexboxProps extends FlexBoxProps {
-  blocksBehind?: number
-  pollingState?: PollingState
-  setPollingState?: (newState: PollingState) => void
-}
-
-export const PollingControlsFlexbox: React.FC<PollingControlsFlexboxProps> = ({
-  blocksBehind, pollingState, setPollingState,
-}) => {
-  const paused = pollingState === 'paused'
-  const running = pollingState === 'running'
-
-  return (
-    <FlexRow justifyContent="space-between" width="100%">
-      <FlexRow gap={2}>
-        {running
-          ? (
-              <IconButton onClick={() => setPollingState?.('paused')} title="Pause Block Stream">
-                <Pause />
-              </IconButton>
-            )
-          : null}
-        {paused
-          ? (
-              <IconButton onClick={() => setPollingState?.('running')} title="Re-Sync Block Stream">
-                <Autorenew />
-              </IconButton>
-            )
-          : null}
-        <ChainAnalyzerStatsDialogFromContext />
-      </FlexRow>
-      <FlexRow gap={2}>
-        <Grow in={(blocksBehind ?? 0) > 0}>
-          <Tooltip title="Click to Re-Sync">
-            <Alert
-              sx={{
-                py: 0, px: 1, cursor: 'pointer',
-              }}
-              severity="warning"
-              onClick={() => setPollingState?.('running')}
-            >
-              <AlertTitle sx={{ mb: 0 }}>
-                Behind:
-                {' '}
-                {blocksBehind}
-              </AlertTitle>
-            </Alert>
-          </Tooltip>
-        </Grow>
-        <Icon>
-          <StyledPulseSvgIcon className={running ? '' : 'paused'} />
-        </Icon>
-      </FlexRow>
-    </FlexRow>
-  )
-}
-
-export const MemoizedPollingControlsFlexbox = memo(PollingControlsFlexbox)

package/src/components/chain/controls/PulseSvgIcon.tsx

@@ -1,71 +0,0 @@
-import {
-  createSvgIcon, keyframes, styled,
-} from '@mui/material'
-import React from 'react'
-
-// Adapted from - https://codepen.io/Taver/pen/PWyEqp
-export const PulseSvgIcon = createSvgIcon(
-  <svg viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <g transform="translate(34,34)">
-      <circle className="core" cx="0" cy="0" r="6"></circle>
-      <circle className="radar" cx="0" cy="0" r="6"></circle>
-    </g>
-  </svg>,
-  'PulseSvgIcon',
-)
-
-const pulse1 = keyframes`
-  0% {
-    opacity: 0;
-    transform: scale(0);
-  }
-  30% {
-    opacity: 1;
-    transform: scale(1.5);
-  }
-  60% {
-    opacity: 1;
-    transform: scale(2);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(2);
-  }
-`
-
-const pulse2 = keyframes`
-  0% {
-    transform: scale(1, 1);
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    transform: scale(6, 6);
-    opacity: 0;
-  }
-`
-
-export const StyledPulseSvgIcon = styled(PulseSvgIcon)(({ theme }) => {
-  return {
-    '& .core': {
-      animation: `${pulse1} 1.25s ease-in-out infinite`,
-      fill: theme.vars.palette.success.main,
-    },
-    '&.paused .core': {
-      animation: 'none',
-      fill: theme.vars.palette.divider,
-      transform: 'scale(2)',
-    },
-    '& .radar': {
-      animation: `${pulse2} 1.25s ease-in-out infinite`,
-      fill: `color-mix(in srgb, ${theme.vars.palette.success.main}, transparent 50%)`,
-    },
-    '&.paused .radar': {
-      animation: 'none',
-      fill: theme.vars.palette.divider,
-      transform: 'scale(6)',
-    },
-  }
-})

package/src/components/chain/controls/index.ts

@@ -1,2 +0,0 @@
-export * from './PollingControlsFlexbox.tsx'
-export * from './PulseSvgIcon.tsx'

package/src/components/chain/dialog/Dialog.tsx

@@ -1,20 +0,0 @@
-import type { DialogProps } from '@mui/material'
-import {
-  Button, Dialog, DialogActions, DialogContent,
-} from '@mui/material'
-import React from 'react'
-
-export interface TransactionsDialogProps extends DialogProps {}
-
-export const TransactionsDialog: React.FC<TransactionsDialogProps> = ({ onClose, ...props }) => {
-  return (
-    <Dialog onClose={onClose} {...props}>
-      <DialogContent>
-        Transactions Dialog
-      </DialogContent>
-      <DialogActions>
-        <Button variant="outlined" onClick={e => onClose?.(e, 'escapeKeyDown')}>Close</Button>
-      </DialogActions>
-    </Dialog>
-  )
-}

package/src/components/chain/dialog/index.ts

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

package/src/components/chain/hooks/index.ts

@@ -1 +0,0 @@
-export * from './useOnBlock.ts'

package/src/components/chain/hooks/useOnBlock.ts

@@ -1,55 +0,0 @@
-import type { HydratedBlock } from '@xyo-network/xl1-sdk'
-import { useEffect, useRef } from 'react'
-
-export type PollingState = 'paused' | 'running'
-
-export const useOnBlock = (
-  initialHeadNumber?: number,
-  onAddBlock?: (block: HydratedBlock) => Promise<void>,
-  liveHead?: HydratedBlock,
-  pollingState?: PollingState,
-) => {
-  /**
-   * blocksWhilePaused is a ref because we don't want to re-render the component when it changes.
-   * But, since we get new blockComponents regardless, the hook rerenders anyway so consumers can get
-   * the latest blocksWhilePaused value without having to rely on a state update.
-   */
-  const blocksWhilePausedRef = useRef<HydratedBlock[]>([])
-  // Because the useEffect has liveHead AND pollingState, every time the polling state changes, the hook will
-  // run a second time with the live head from the previous run. This is why we need to keep track of the last
-  // live head so we can compare it to the current live head and prevent the hook from adding the same block twice
-  const lastLiveHeadRef = useRef<HydratedBlock | undefined>(liveHead)
-
-  useEffect(() => {
-    const lastLiveHeadBlock = lastLiveHeadRef.current?.[0]
-    const blocksWhilePausedBlock = lastLiveHeadRef.current?.[0]
-    const liveHeadBlock = liveHead?.[0]
-
-    // use lastLiveHead to prevent the hook from adding the same block multiple times
-    if (lastLiveHeadBlock?.block === liveHeadBlock?.block) return
-
-    if (liveHead && onAddBlock) {
-      // update lastLiveHead
-      lastLiveHeadRef.current = liveHead
-
-      // if the polling state is paused and the block is new, add it to the blocksWhilePaused array
-      const isNewBlock = initialHeadNumber !== liveHeadBlock?.block && liveHeadBlock?.block !== blocksWhilePausedBlock?.block
-      if (pollingState === 'paused' && isNewBlock) {
-        blocksWhilePausedRef.current.push(liveHead)
-      } else if (pollingState === 'running') {
-        // if the polling state is running, add the blocksWhilePaused
-        if (blocksWhilePausedRef.current.length > 0) {
-          for (const block of blocksWhilePausedRef.current) {
-            void onAddBlock(block)
-          }
-          // clear the blocksWhilePaused array
-          blocksWhilePausedRef.current = []
-        }
-        // add the liveHead block
-        void onAddBlock(liveHead)
-      }
-    }
-  }, [initialHeadNumber, liveHead, onAddBlock, pollingState])
-
-  return blocksWhilePausedRef
-}

package/src/components/chain/index.ts

@@ -1,6 +0,0 @@
-export * from './controls/index.ts'
-export * from './dialog/index.ts'
-export * from './hooks/index.ts'
-export * from './pagination/index.ts'
-export * from './stats/index.ts'
-export * from './styled/index.ts'

package/src/components/chain/list/Animated.tsx

@@ -1,19 +0,0 @@
-import { AnimatedList } from '@xylabs/react-animation'
-import React from 'react'
-
-import type { BlockListComponentProps } from '../../../types/index.ts'
-import { BlockListWrapperFlexBox } from '../styled/index.ts'
-
-export const BlockListAnimated: React.FC<BlockListComponentProps> = ({ blockChainRenderComponents }) => {
-  return (
-    <BlockListWrapperFlexBox
-      alignItems="stretch"
-      width="100%"
-    >
-      <AnimatedList
-        fullWidth
-        items={blockChainRenderComponents}
-      />
-    </BlockListWrapperFlexBox>
-  )
-}

package/src/components/chain/list/TableEx.tsx

@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react'
-
-import type { BlockListComponentProps } from '../../../types/index.ts'
-import { BlockchainTableEx } from '../../block/index.ts'
-
-export const BlockListTableEx: React.FC<BlockListComponentProps> = ({ blockChainRenderComponents }) => {
-  return (
-    <BlockchainTableEx>
-      {blockChainRenderComponents?.map(({ child, key }) => <Fragment key={key}>{child}</Fragment>)}
-    </BlockchainTableEx>
-  )
-}

package/src/components/chain/list/index.ts

@@ -1,2 +0,0 @@
-export * from './Animated.tsx'
-export * from './TableEx.tsx'

package/src/components/chain/pagination/BlockChainPagination.tsx

@@ -1,11 +0,0 @@
-import type { TablePaginationActionsProps } from '@xyo-network/react-payload-table'
-import { TablePaginationActions } from '@xyo-network/react-payload-table'
-import React from 'react'
-
-export interface BlockChainPaginationProps extends TablePaginationActionsProps {}
-
-export const BlockChainPagination: React.FC<BlockChainPaginationProps> = ({
-  count = 0, onPageChange, page, rowsPerPage = 10,
-}) => {
-  return <TablePaginationActions count={count} onPageChange={onPageChange} page={page} rowsPerPage={rowsPerPage} />
-}

package/src/components/chain/pagination/hooks/index.ts

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

package/src/components/chain/pagination/hooks/usePagination.tsx

@@ -1,22 +0,0 @@
-import type { MouseEvent } from 'react'
-import { useMemo, useState } from 'react'
-
-import type { BlockChainRenderComponent } from '../../../../types/index.ts'
-
-export const useChainPagination = (pageSize: number, blockComponents?: BlockChainRenderComponent[]) => {
-  const [page, setPage] = useState(0)
-
-  const paginatedBlockComponents = useMemo(() => {
-    const startIndex = page * pageSize
-    const endIndex = startIndex + pageSize
-    return blockComponents?.slice(startIndex, endIndex)
-  }, [blockComponents, page, pageSize])
-
-  const onPageChange = (_event: MouseEvent<HTMLButtonElement>, newPage: number) => {
-    setPage(newPage)
-  }
-
-  return {
-    onPageChange, page, paginatedBlockComponents,
-  }
-}

package/src/components/chain/pagination/index.ts

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

package/src/components/chain/stats/Dialog.tsx

@@ -1,49 +0,0 @@
-import { QueryStats } from '@mui/icons-material'
-import type { DialogProps } from '@mui/material'
-import {
-  Dialog, DialogContent,
-  DialogTitle, IconButton,
-} from '@mui/material'
-import React, { useState } from 'react'
-
-import { useChainAnalyzersContext } from '../../../context/index.ts'
-import { BlockProducerStatsFlexbox } from './producer/index.ts'
-
-export interface ChainAnalyzerStatsDialogProps extends DialogProps {}
-
-export const ChainAnalyzerStatsDialog: React.FC<ChainAnalyzerStatsDialogProps> = (props) => {
-  const { analyzers, statsUpdated } = useChainAnalyzersContext()
-
-  return (
-    <Dialog {...props}>
-      <DialogTitle>Chain Analysis</DialogTitle>
-      <DialogContent>
-        {statsUpdated > 0
-          ? Object.entries(analyzers).map(([id, analyzer]) => (
-              <div key={id}>
-                {id === 'producers'
-                  ? (
-                      <BlockProducerStatsFlexbox payload={analyzer.result()} />
-                    )
-                  : null}
-              </div>
-            ))
-          : null}
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export const ChainAnalyzerStatsDialogFromContext: React.FC = (props) => {
-  const [open, setOpen] = useState(false)
-  const handleClose = () => setOpen(false)
-
-  return (
-    <>
-      <IconButton onClick={() => setOpen(true)}>
-        <QueryStats />
-      </IconButton>
-      <ChainAnalyzerStatsDialog onClose={handleClose} open={open} {...props} />
-    </>
-  )
-}

package/src/components/chain/stats/index.ts

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

package/src/components/chain/stats/producer/ProducerFlexbox.tsx

@@ -1,32 +0,0 @@
-import { Typography } from '@mui/material'
-import { ErrorRender } from '@xylabs/react-error'
-import { FlexCol } from '@xylabs/react-flexbox'
-import { isChainSummaryProducers } from '@xyo-network/chain-analyze'
-import type { Payload } from '@xyo-network/sdk-js'
-import React, { useMemo } from 'react'
-
-import { ChainProducerStatsTable } from './Table.tsx'
-
-export interface BlockProducerStatsFlexboxProps {
-  payload?: Payload
-}
-
-export const BlockProducerStatsFlexbox: React.FC<BlockProducerStatsFlexboxProps> = ({ payload, ...props }) => {
-  const [producer, producerError] = useMemo(() => {
-    if (payload) {
-      return isChainSummaryProducers(payload) ? [payload] : [undefined, new Error('Payload is not a Chain Producer')]
-    } else {
-      return []
-    }
-  }, [payload])
-
-  const producersArray = useMemo(() => Object.values(producer?.producers ?? {}), [producer])
-
-  return (
-    <FlexCol alignItems="start" gap={1} {...props}>
-      <ErrorRender error={producerError} scope="BlockProducerStatsFlexbox" />
-      <Typography fontSize="1rem">Block Producers</Typography>
-      <ChainProducerStatsTable producers={producersArray} />
-    </FlexCol>
-  )
-}

package/src/components/chain/stats/producer/Table.tsx

@@ -1,39 +0,0 @@
-import type { TableProps } from '@mui/material'
-import {
-  Table, TableBody, TableCell, TableHead,
-  TableRow,
-  useTheme,
-} from '@mui/material'
-import type { AnalyzedProducer } from '@xyo-network/chain-analyze'
-import { BlockiesAvatar } from '@xyo-network/react-chain-blockies'
-import React from 'react'
-
-export interface ChainProducerStatsTableProps extends TableProps {
-  producers?: AnalyzedProducer[]
-}
-
-export const ChainProducerStatsTable: React.FC<ChainProducerStatsTableProps> = ({ producers, ...props }) => {
-  const theme = useTheme()
-  return (
-    <Table {...props}>
-      <TableHead>
-        <TableRow>
-          <TableCell>Address</TableCell>
-          <TableCell>Blocks Produced</TableCell>
-          <TableCell>Rewards Earned Produced</TableCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {producers?.map(producer => (
-          <TableRow key={producer.address}>
-            <TableCell>
-              <BlockiesAvatar blockiesOptions={{ seed: producer.address }} sx={{ height: theme.spacing(2.75), width: theme.spacing(2.75) }} />
-            </TableCell>
-            <TableCell>{producer.blocksProduced.toString()}</TableCell>
-            <TableCell>{producer.rewardsEarned.toString()}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  )
-}

package/src/components/chain/stats/producer/index.ts

@@ -1,2 +0,0 @@
-export * from './ProducerFlexbox.tsx'
-export * from './Table.tsx'

package/src/components/chain/styled/BlockListWrapperFlexbox.tsx

@@ -1,15 +0,0 @@
-import { styled } from '@mui/material'
-import { FlexCol } from '@xylabs/react-flexbox'
-
-// Target the first visible child (first actual child is a hidden div) and hide the after pseudo element that visually links blocks together
-export const BlockListWrapperFlexBox = styled(FlexCol, { name: 'BlockListWrapperFlexbox' })(() => ({
-  '& > div:nth-of-type(2) .block-heading-flexbox .divider-spacer': {
-    // hide the spacer for the first element
-    visibility: 'hidden',
-  },
-  '& > div:nth-of-type(2) .block-heading-flexbox .divider': {
-    // keep the first element divider at 0 height so we can animate it to the correct height
-    // when the next block comes in
-    height: 0,
-  },
-}))

package/src/components/chain/styled/index.ts

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

package/src/components/index.ts

@@ -1,7 +0,0 @@
-export * from './account/index.ts'
-export * from './block/index.ts'
-export * from './chain/index.ts'
-export * from './FeatureNotAvailable.tsx'
-export * from './payload/index.ts'
-export * from './rate/index.ts'
-export * from './transactions/index.ts'

package/src/components/payload/builder/BuilderComponentProps.ts

@@ -1,5 +0,0 @@
-import type { Payload } from '@xyo-network/sdk-js'
-
-export interface PayloadBuilderComponentProps {
-  onBuild?: (payload: Payload) => void
-}

package/src/components/payload/builder/Flexbox.tsx

@@ -1,30 +0,0 @@
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol } from '@xylabs/react-flexbox'
-import { JsonViewerEx } from '@xyo-network/react-payload-raw-info'
-import type { Payload } from '@xyo-network/sdk-js'
-import type { ComponentType } from 'react'
-import React, { useState } from 'react'
-
-import type { PayloadBuilderComponentProps } from './BuilderComponentProps.ts'
-
-export interface PayloadBuilderFlexboxProps extends PayloadBuilderComponentProps, FlexBoxProps {
-  BuilderComponent: ComponentType<PayloadBuilderComponentProps>
-}
-
-export const PayloadBuilderFlexbox: React.FC<PayloadBuilderFlexboxProps> = ({
-  BuilderComponent, onBuild, ...props
-}) => {
-  const [payload, setPayload] = useState<Payload>()
-
-  const onBuildLocal = (payload: Payload) => {
-    onBuild?.(payload)
-    setPayload(payload)
-  }
-
-  return (
-    <FlexCol gap={2} {...props}>
-      <BuilderComponent onBuild={onBuildLocal} />
-      {payload ? <JsonViewerEx value={payload} /> : null}
-    </FlexCol>
-  )
-}

package/src/components/payload/builder/index.ts

@@ -1,4 +0,0 @@
-export * from './BuilderComponentProps.ts'
-export * from './Flexbox.tsx'
-export * from './producer-intent/index.ts'
-export * from './transfer/index.ts'

package/src/components/payload/builder/producer-intent/Flexbox.stories.tsx

@@ -1,14 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { ProducerIntentBuilderFlexbox } from './Flexbox.tsx'
-
-export default {
-  title: 'Payload/Builder/ProducerIntent',
-  component: ProducerIntentBuilderFlexbox,
-} as Meta
-
-const Template: StoryFn<typeof ProducerIntentBuilderFlexbox> = args => <ProducerIntentBuilderFlexbox {...args} />
-
-export const Default = Template.bind({})
-Default.args = {}

package/src/components/payload/builder/producer-intent/Flexbox.tsx

@@ -1,15 +0,0 @@
-import React from 'react'
-
-import type { PayloadBuilderComponentProps } from '../BuilderComponentProps.ts'
-import { PayloadBuilderFlexbox } from '../Flexbox.tsx'
-import { ProducerIntentBuilderForm } from './Form.tsx'
-
-export const ProducerIntentBuilderFlexbox: React.FC<PayloadBuilderComponentProps> = ({ onBuild, ...props }) => (
-  <PayloadBuilderFlexbox
-    gap={4}
-    alignItems="start"
-    BuilderComponent={ProducerIntentBuilderForm}
-    onBuild={onBuild}
-    {...props}
-  />
-)