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

package/src/components/block/menu/Expanded.tsx

@@ -1,34 +0,0 @@
-import { MoreVert } from '@mui/icons-material'
-import { IconButton, Menu } from '@mui/material'
-import { BWJsonMenuItem, BWPreviousHashMenuItem } from '@xyo-network/react-boundwitness-plugin'
-import type { HydratedBlock } from '@xyo-network/xl1-sdk'
-import React from 'react'
-
-import { useAnchorElement } from '../hooks/index.ts'
-
-export interface BlockExpandedMenuProps {
-  block?: HydratedBlock
-}
-
-export const BlockMenuExpanded: React.FC<BlockExpandedMenuProps> = ({ block }) => {
-  const {
-    anchorEl, anchorRef, open, handleClick, handleClose,
-  } = useAnchorElement()
-
-  return (
-    <>
-      <IconButton ref={anchorRef} size="small" onClick={handleClick}>
-        <MoreVert fontSize="inherit" />
-      </IconButton>
-      <Menu
-        open={open}
-        anchorEl={anchorEl}
-        anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
-        onClose={handleClose}
-      >
-        <BWPreviousHashMenuItem boundwitness={block?.[0]} dense onDialogClose={handleClose} />
-        <BWJsonMenuItem boundwitness={block?.[0]} dense onDialogClose={handleClose} />
-      </Menu>
-    </>
-  )
-}

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

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

package/src/components/block/table/Ex.stories.tsx

@@ -1,64 +0,0 @@
-import {
-  Alert, AlertTitle, Snackbar,
-} from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { buildRandomBlockChain } from '@xyo-network/react-chain-shared'
-import type { Event } from '@xyo-network/react-event'
-import React, { useState } from 'react'
-
-import { type BlockHeaderEventNouns, useBlockHeadingEvents } from '../hooks/index.ts'
-import { BlockchainTableEx } from './Ex.tsx'
-import { BlockChainTableRow } from './row/index.ts'
-
-const blocks = await buildRandomBlockChain()
-
-export default {
-  title: 'Block/TableEx',
-  component: BlockchainTableEx,
-  parameters: { layout: 'fullscreen' },
-} as Meta
-
-const Template: StoryFn<typeof BlockchainTableEx> = args => <BlockchainTableEx {...args} />
-
-const TemplateLinked: StoryFn<typeof BlockchainTableEx> = (args) => {
-  const [event, setEvent] = useState<Event<BlockHeaderEventNouns>>()
-  const [ref] = useBlockHeadingEvents<HTMLTableElement>((noun, verb, data) => setEvent({
-    noun, verb, data,
-  }))
-  return (
-    <>
-      <BlockchainTableEx ref={ref} {...args} />
-      <Snackbar open={!!event} autoHideDuration={5000} onClose={() => setEvent(undefined)}>
-        <Alert>
-          <AlertTitle>
-            Event -
-            {' '}
-            {event?.noun}
-          </AlertTitle>
-          <pre>{JSON.stringify(event, null, 2)}</pre>
-        </Alert>
-      </Snackbar>
-    </>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithData = Template.bind({})
-WithData.args = {
-  children: blocks.map((block) => {
-    return <BlockChainTableRow key={block[0].block} block={block} />
-  }),
-}
-
-const WithLinked = TemplateLinked.bind({})
-WithLinked.args = {
-  children: blocks.map((block) => {
-    return <BlockChainTableRow key={block[0].block} block={block} linked />
-  }),
-}
-
-export {
-  Default, WithData, WithLinked,
-}

package/src/components/block/table/Ex.tsx

@@ -1,21 +0,0 @@
-import { TableBody } from '@mui/material'
-import type { TableExProps } from '@xyo-network/react-table'
-import { TableEx } from '@xyo-network/react-table'
-import React from 'react'
-
-import { BlockchainTableHead } from './head/index.ts'
-
-export const BlockchainTableEx = ({
-  ref, children, ...props
-}: TableExProps) => {
-  return (
-    <TableEx ref={ref} {...props}>
-      <BlockchainTableHead />
-      <TableBody>
-        {children}
-      </TableBody>
-    </TableEx>
-  )
-}
-
-BlockchainTableEx.displayName = 'BlockchainTableEx'

package/src/components/block/table/cell/BlockNumber.tsx

@@ -1,35 +0,0 @@
-import {
-  Link, TableCell, Tooltip, Typography,
-} from '@mui/material'
-import React from 'react'
-
-import type { BlockHeaderEventNouns } from '../../hooks/index.ts'
-import { useLinkedBlockItem } from './hooks/index.ts'
-import type { BlockTableCellProps } from './lib/index.ts'
-
-export interface BlockNumberTableCellProps extends BlockTableCellProps {
-  eventNoun?: BlockHeaderEventNouns
-}
-
-export const BlockNumberTableCell: React.FC<BlockNumberTableCellProps> = ({
-  block, eventNoun = 'block-number', linked, ...props
-}) => {
-  const blockNumber = block?.[0].block
-
-  return <BlockNumberTableCellInner blockNumber={blockNumber} eventNoun={eventNoun} linked={linked} {...props} />
-}
-
-export const BlockNumberTableCellInner: React.FC<BlockNumberTableCellProps & { blockNumber?: number; linked?: boolean }> = ({
-  blockNumber, eventNoun = 'block-number', linked, ...props
-}) => {
-  const [ref, handleClick] = useLinkedBlockItem(eventNoun, blockNumber?.toLocaleString())
-  return (
-    <TableCell ref={ref} {...props}>
-      <Tooltip title={`Block Number: ${blockNumber}`}>
-        <Typography component="span" variant="body1">
-          {linked ? <Link onClick={handleClick} sx={{ cursor: 'pointer' }}>{blockNumber}</Link> : blockNumber}
-        </Typography>
-      </Tooltip>
-    </TableCell>
-  )
-}

package/src/components/block/table/cell/Epoch.tsx

@@ -1,46 +0,0 @@
-import {
-  Skeleton, TableCell, Tooltip, Typography,
-} from '@mui/material'
-import { isDefined } from '@xylabs/sdk-js'
-import React from 'react'
-
-import { dateFormat, timeAgo } from './helpers/index.ts'
-import { type BlockTableCellProps } from './lib/index.ts'
-
-export interface BlockEpochTableCellProps extends BlockTableCellProps {}
-
-export const BlockEpochTableCell: React.FC<BlockEpochTableCellProps> = ({
-  block, linked, ...props
-}) => {
-  const epoch = block?.[0]?.$epoch
-
-  const dateTime = dateFormat.format(epoch)
-  const age = isDefined(epoch) ? timeAgo(epoch) : undefined
-
-  return (
-    <TableCell {...props}>
-      <Tooltip title={`Block Epoch: ${dateTime}`}>
-        <Typography component="span" variant="body1">
-          {age ?? <Skeleton width={115} /> }
-        </Typography>
-      </Tooltip>
-    </TableCell>
-  )
-}
-
-export const BlockEpochTableCellInner: React.FC<BlockEpochTableCellProps & { epoch?: number }> = ({
-  epoch, linked, ...props
-}) => {
-  const dateTime = dateFormat.format(epoch)
-  const age = isDefined(epoch) ? timeAgo(epoch) : undefined
-
-  return (
-    <TableCell {...props}>
-      <Tooltip title={`Block Epoch: ${dateTime}`}>
-        <Typography component="span" variant="body1">
-          {age ?? <Skeleton width={115} /> }
-        </Typography>
-      </Tooltip>
-    </TableCell>
-  )
-}

package/src/components/block/table/cell/Hash.tsx

@@ -1,46 +0,0 @@
-import {
-  Link, TableCell, Tooltip,
-} from '@mui/material'
-import { isHash } from '@xylabs/sdk-js'
-import { usePayloadRootHash } from '@xyo-network/react-shared'
-import React, { useState } from 'react'
-
-import { FeatureNotAvailable } from '../../../FeatureNotAvailable.tsx'
-import { ChipSkeleton } from '../../ChipSkeleton.tsx'
-import { useLinkedBlockItem } from './hooks/index.ts'
-import type { BlockTableCellProps } from './lib/index.ts'
-
-export interface BlockHashTableCellProps extends BlockTableCellProps {
-  notAvailableDialog?: boolean
-}
-
-export const BlockHashTableCell: React.FC<BlockHashTableCellProps> = ({
-  block, notAvailableDialog, linked, ...props
-}) => {
-  const hash = usePayloadRootHash(block?.[0])
-
-  const [ref, handleClick] = useLinkedBlockItem('block-hash', hash)
-  const [notAvailable, setNotAvailable] = useState(false)
-
-  const shortenedHash = isHash(hash) ? `${hash.slice(0, 4)}...${hash.slice(-5, -1)}` : undefined
-
-  return (
-    <TableCell ref={ref} {...props}>
-      <Tooltip title={`Block Hash: ${hash}`}>
-        {linked
-          ? (
-              <Link
-                sx={{ cursor: 'pointer' }}
-                onClick={linked ? handleClick : () => setNotAvailable(true)}
-              >
-                {shortenedHash ?? <ChipSkeleton />}
-              </Link>
-            )
-          : <span>{shortenedHash ?? <ChipSkeleton />}</span>}
-      </Tooltip>
-      {(notAvailableDialog && notAvailable)
-        ? <FeatureNotAvailable featureName="Block Details" open={notAvailable} onClick={() => setNotAvailable(false)} />
-        : null}
-    </TableCell>
-  )
-}

package/src/components/block/table/cell/JsonView.tsx

@@ -1,44 +0,0 @@
-import { DataObject } from '@mui/icons-material'
-import {
-  Button,
-  Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TableCell,
-} from '@mui/material'
-import { FlexRow } from '@xylabs/react-flexbox'
-import { ellipsize, isHash } from '@xylabs/sdk-js'
-import { JsonViewerEx } from '@xyo-network/react-payload-raw-info'
-import { usePayloadRootHash } from '@xyo-network/react-shared'
-import React, { useState } from 'react'
-
-import type { BlockTableCellProps } from './lib/index.ts'
-
-export interface BlockJsonViewTableCellProps extends BlockTableCellProps {}
-
-export const BlockJsonViewTableCell: React.FC<BlockJsonViewTableCellProps> = ({ block, ...props }) => {
-  const [open, setOpen] = useState(false)
-  const onClose = () => setOpen(false)
-
-  const hash = usePayloadRootHash(block?.[0])
-  const title = isHash(hash) ? `JSON for ${ellipsize(hash, 5)}` : 'JSON'
-
-  return (
-    <TableCell {...props}>
-      <FlexRow onClick={e => e.stopPropagation()} sx={{ width: '100%' }}>
-        <IconButton onClick={() => setOpen(true)}>
-          <DataObject />
-        </IconButton>
-        <Dialog open={open} onClose={onClose}>
-          <DialogTitle>{title}</DialogTitle>
-          <DialogContent>
-            <JsonViewerEx value={block} />
-          </DialogContent>
-          <DialogActions sx={{
-            display: 'flex', flexDirection: 'row', justifyContent: 'end',
-          }}
-          >
-            <Button variant="contained" onClick={onClose}>Close</Button>
-          </DialogActions>
-        </Dialog>
-      </FlexRow>
-    </TableCell>
-  )
-}

package/src/components/block/table/cell/NumberChip.tsx

@@ -1,12 +0,0 @@
-import type { ChipProps } from '@mui/material'
-import { Chip } from '@mui/material'
-import React from 'react'
-
-export interface BlockNumberChipProps extends ChipProps {
-  blockNumber?: number
-}
-
-export const BlockNumberChip: React.FC<BlockNumberChipProps> = ({ blockNumber, ...props }) => {
-  // eslint-disable-next-line react-x/no-useless-fragment
-  return <Chip avatar={<></>} label={blockNumber} {...props} />
-}

package/src/components/block/table/cell/PayloadCounts.tsx

@@ -1,65 +0,0 @@
-import { Error } from '@mui/icons-material'
-import {
-  Link, TableCell, Tooltip,
-} from '@mui/material'
-import type { Hash } from '@xylabs/sdk-js'
-import React from 'react'
-
-import { usePayloadCountsFromBlock } from '../../hooks/index.ts'
-import { useLinkedBlockItem } from './hooks/index.ts'
-import type { BlockTableCellProps } from './lib/index.ts'
-
-export interface BlockPayloadCountsTableCellProps extends BlockTableCellProps {}
-
-export interface BlockPayloadCountsEventData {
-  block: Hash
-  privatePayloads: number
-  publicPayloads: number
-}
-
-export const BlockPayloadCountsTableCell: React.FC<BlockPayloadCountsTableCellProps> = ({
-  block, linked, ...props
-}) => {
-  const [publicPayloads, privatePayloads, error] = usePayloadCountsFromBlock(block)
-  const data: BlockPayloadCountsEventData | undefined = (block && privatePayloads !== undefined && publicPayloads !== undefined)
-    ? {
-        publicPayloads,
-        privatePayloads,
-        block: block[0]._hash,
-      }
-    : undefined
-  const payloadCount = (publicPayloads ?? 0) + (privatePayloads ?? 0)
-  const [ref, handleClick] = useLinkedBlockItem('payload-counts', data)
-
-  return (
-    <TableCell ref={ref} {...props}>
-      <span>
-        {error
-          ? (
-              <Tooltip title={error.message}>
-                <Error color="error" />
-              </Tooltip>
-            )
-          : null}
-        {linked
-          ? (
-              <Tooltip title={`Public Payloads: ${publicPayloads ?? '--'} Private Payloads: ${privatePayloads ?? '--'}`}>
-                <Link
-                  onClick={handleClick}
-                  sx={{ cursor: 'pointer' }}
-                >
-                  {payloadCount}
-                </Link>
-              </Tooltip>
-            )
-          : (
-              <Tooltip title={`Public Payloads: ${publicPayloads ?? '--'} Private Payloads: ${privatePayloads ?? '--'}`}>
-                <span>
-                  {payloadCount}
-                </span>
-              </Tooltip>
-            )}
-      </span>
-    </TableCell>
-  )
-}

package/src/components/block/table/cell/Producer.tsx

@@ -1,63 +0,0 @@
-import { TableCell, Tooltip } from '@mui/material'
-import type { MouseEvent } from 'react'
-import React, { useState } from 'react'
-
-import { FeatureNotAvailable } from '../../../FeatureNotAvailable.tsx'
-import { useBlockProducer } from '../../hooks/index.ts'
-import type { BlockProducerChipProps } from '../../ProducerChip.tsx'
-import { BlockAddressChip } from '../../ProducerChip.tsx'
-import { useLinkedBlockItem } from './hooks/index.ts'
-import type { BlockTableCellProps } from './lib/index.ts'
-
-export interface BlockProducerTableCell extends BlockTableCellProps {
-  notAvailableDialog?: boolean
-  producerChipProps?: BlockProducerChipProps
-}
-
-export const BlockProducerTableCell: React.FC<BlockProducerTableCell> = ({
-  block, linked, notAvailableDialog, producerChipProps, ...props
-}) => {
-  const [ref, handleClick] = useLinkedBlockItem('block-producer', JSON.stringify(block))
-  const producer = useBlockProducer(block)
-
-  return (
-    <BlockProducerTableCellInner
-      address={producer}
-      handleClick={handleClick}
-      linked={linked}
-      notAvailableDialog={notAvailableDialog}
-      producerChipProps={producerChipProps}
-      {...props}
-      ref={ref}
-    />
-  )
-}
-
-export interface BlockProducerTableCellInner extends BlockTableCellProps {
-  address?: string
-  handleClick?: (event: MouseEvent) => void
-  notAvailableDialog?: boolean
-  producerChipProps?: BlockProducerChipProps
-}
-
-export const BlockProducerTableCellInner: React.FC<BlockProducerTableCell & BlockProducerTableCellInner> = ({
-  address, handleClick, linked, notAvailableDialog, producerChipProps, ...props
-}) => {
-  const [notAvailable, setNotAvailable] = useState(false)
-  return (
-    <TableCell {...props}>
-      <Tooltip title={`Block Producer: ${address}`}>
-        <BlockAddressChip
-          sx={{ cursor: 'pointer' }}
-          onClick={linked ? handleClick : () => setNotAvailable(true)}
-          address={address}
-          toolTipTitle={`Block Producer: ${address}`}
-          {...producerChipProps}
-        />
-      </Tooltip>
-      {(notAvailableDialog && notAvailable)
-        ? <FeatureNotAvailable featureName="Producer Details" open={notAvailable} onClick={() => setNotAvailable(false)} />
-        : null}
-    </TableCell>
-  )
-}

package/src/components/block/table/cell/TransactionCount.tsx

@@ -1,56 +0,0 @@
-import { Error } from '@mui/icons-material'
-import {
-  Link, TableCell, Tooltip,
-} from '@mui/material'
-import type { Hash } from '@xylabs/sdk-js'
-import React, { useMemo } from 'react'
-
-import { useTxsFromBlock } from '../../../../hooks/index.ts'
-import { useLinkedBlockItem } from './hooks/index.ts'
-import type { BlockTableCellProps } from './lib/index.ts'
-
-export interface BlockTransactionCountTableCellProps extends BlockTableCellProps {}
-
-export interface BlockTransactionCountEventData {
-  block: Hash
-  transactions: number
-}
-
-export const BlockTransactionCountTableCell: React.FC<BlockTransactionCountTableCellProps> = ({
-  block, linked, ...props
-}) => {
-  const [transactions, error] = useTxsFromBlock(block)
-  const txHashes = useMemo(() => transactions?.map(([,hash]) => hash), [transactions])
-
-  const data: BlockTransactionCountEventData | undefined = (block && transactions !== undefined)
-    ? {
-        transactions: transactions.length,
-        block: block[0]._hash,
-      }
-    : undefined
-
-  const [ref, handleClick] = useLinkedBlockItem('transaction-count', data)
-
-  return (
-    <TableCell ref={ref} {...props}>
-      <span>
-        {error
-          ? (
-              <Tooltip title={error.message}>
-                <Error color="error" />
-              </Tooltip>
-            )
-          : null}
-        {linked
-          ? (
-              <Link onClick={handleClick} sx={{ cursor: 'pointer' }}>
-                {txHashes?.length}
-              </Link>
-            )
-          : (
-              txHashes?.length
-            )}
-      </span>
-    </TableCell>
-  )
-}

package/src/components/block/table/cell/Verification.tsx

@@ -1,25 +0,0 @@
-import { CheckCircleOutlineRounded } from '@mui/icons-material'
-import { TableCell } from '@mui/material'
-import { FlexRow } from '@xylabs/react-flexbox'
-import { BWVerification } from '@xyo-network/react-boundwitness-plugin'
-import React from 'react'
-
-import type { BlockTableCellProps } from './lib/index.ts'
-
-export interface BlockVerificationTableCellProps extends BlockTableCellProps {
-  deepValidation?: boolean
-}
-
-export const BlockVerificationTableCell: React.FC<BlockVerificationTableCellProps> = ({
-  block, linked, deepValidation, ...props
-}) => {
-  return (
-    <TableCell {...props}>
-      <FlexRow onClick={e => e.stopPropagation()} sx={{ width: '100%' }}>
-        {deepValidation
-          ? <BWVerification iconColors boundwitness={block?.[0]} />
-          : <CheckCircleOutlineRounded color="success" />}
-      </FlexRow>
-    </TableCell>
-  )
-}

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

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

package/src/components/block/table/cell/helpers/timeFunctions.ts

@@ -1,44 +0,0 @@
-export const dateFormat = Intl.DateTimeFormat(globalThis.navigator.language ?? 'en-US', {
-  year: 'numeric',
-  month: '2-digit',
-  day: '2-digit',
-  hour: '2-digit',
-  minute: '2-digit',
-  second: '2-digit',
-})
-
-export const timeAgo = (epoch: number, locale = navigator.language ?? 'en-US') => {
-  const now = Date.now()
-  const diffInSeconds = Math.floor((now - epoch) / 1000)
-
-  const units: { max: number; name: Intl.RelativeTimeFormatUnit; value: number }[] = [
-    {
-      max: 60, value: 1, name: 'second',
-    },
-    {
-      max: 3600, value: 60, name: 'minute',
-    },
-    {
-      max: 86_400, value: 3600, name: 'hour',
-    },
-    {
-      max: 604_800, value: 86_400, name: 'day',
-    },
-    {
-      max: 2_620_800, value: 604_800, name: 'week',
-    },
-    {
-      max: 31_449_600, value: 2_620_800, name: 'month',
-    },
-    {
-      max: Infinity, value: 31_449_600, name: 'year',
-    },
-  ]
-
-  for (const unit of units) {
-    if (Math.abs(diffInSeconds) < unit.max) {
-      const value = Math.round(diffInSeconds / unit.value)
-      return new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }).format(-value, unit.name)
-    }
-  }
-}

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

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

package/src/components/block/table/cell/hooks/useLinkedBlockItem.tsx

@@ -1,25 +0,0 @@
-import { useEvent } from '@xyo-network/react-event'
-import type { Ref } from 'react'
-
-import type { BlockHeaderEventNouns } from '../../../hooks/index.ts'
-
-export const useLinkedBlockItem = (noun?: BlockHeaderEventNouns, data?: string | object): [Ref<HTMLElement | null>, (event: React.MouseEvent) => void] => {
-  const [ref, dispatch] = useEvent<HTMLAnchorElement, BlockHeaderEventNouns, string, string | object>()
-
-  const handleClick = (event: React.MouseEvent) => {
-    event.preventDefault()
-    event.stopPropagation()
-    if (noun === undefined) {
-      console.warn('useLinkedBlockItem: noun is required')
-      return
-    }
-    const selection = globalThis.getSelection()
-    const isTextSelected = selection && selection.toString().length > 0
-
-    if (!isTextSelected) {
-      dispatch(noun, 'click', data, event.nativeEvent)
-    }
-  }
-
-  return [ref, handleClick]
-}

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

@@ -1,8 +0,0 @@
-export * from './BlockNumber.tsx'
-export * from './Epoch.tsx'
-export * from './Hash.tsx'
-export * from './JsonView.tsx'
-export * from './PayloadCounts.tsx'
-export * from './Producer.tsx'
-export * from './TransactionCount.tsx'
-export * from './Verification.tsx'

package/src/components/block/table/cell/lib/BlockTableCellProps.ts

@@ -1,7 +0,0 @@
-import type { TableCellProps } from '@mui/material'
-import type { HydratedBlockWithHashMeta } from '@xyo-network/xl1-sdk'
-
-export interface BlockTableCellProps extends TableCellProps {
-  block?: HydratedBlockWithHashMeta
-  linked?: boolean
-}

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

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

package/src/components/block/table/head/TableHead.tsx

@@ -1,48 +0,0 @@
-import { InfoOutline } from '@mui/icons-material'
-import type { TableCellProps } from '@mui/material'
-import {
-  TableCell, TableHead, TableRow,
-  Tooltip,
-  Typography,
-} from '@mui/material'
-import { FlexRow } from '@xylabs/react-flexbox'
-import React from 'react'
-
-const ToolTipTableCell: React.FC<TableCellProps> = ({
-  children, align, title, ...props
-}) => {
-  return (
-    <TableCell title={title} {...props}>
-      <FlexRow justifyContent={align}>
-        <Typography variant="body2">{children}</Typography>
-          &nbsp;
-        <Tooltip title={title}>
-          <InfoOutline fontSize="small" />
-        </Tooltip>
-      </FlexRow>
-    </TableCell>
-  )
-}
-
-export const BlockchainTableHead: React.FC = () => {
-  return (
-    <TableHead>
-      <TableRow>
-        <ToolTipTableCell align="left" title="The block number that is included in the block">Block</ToolTipTableCell>
-        <ToolTipTableCell title="The hash of the block" sx={{ width: '20%' }}>Hash</ToolTipTableCell>
-        <ToolTipTableCell title="The epoch of the block" sx={{ width: '20%' }}>Epoch</ToolTipTableCell>
-        <ToolTipTableCell
-          align="left"
-          title="The address of the block producer that produced the block"
-          sx={{ width: '20%' }}
-        >
-          Block Producer
-        </ToolTipTableCell>
-        <ToolTipTableCell align="left" title="Count of transactions that are included in the block">Transactions</ToolTipTableCell>
-        <ToolTipTableCell align="left" title="Count of public and private payload counts for the block">Payloads</ToolTipTableCell>
-        <ToolTipTableCell align="center" title="The result of the local validation check for the block">Valid</ToolTipTableCell>
-        <ToolTipTableCell align="center" title="Link to display the raw JSON of the block">JSON</ToolTipTableCell>
-      </TableRow>
-    </TableHead>
-  )
-}