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

package/src/components/rate/gauge/Pointer.tsx

@@ -1,67 +0,0 @@
-import { useTheme } from '@mui/material'
-import { useGaugeState } from '@mui/x-charts/Gauge'
-import { isDefined } from '@xylabs/sdk-js'
-import { useEffect, useState } from 'react'
-
-export interface GaugePointerProps {
-  pointerColor?: string
-  startAngle?: number
-}
-
-export const GaugePointer: React.FC<GaugePointerProps> = ({ pointerColor, startAngle = 0 }) => {
-  const theme = useTheme()
-  const strokeColor = isDefined(pointerColor) ? pointerColor : theme.palette.error.dark
-  const {
-    valueAngle, outerRadius, cx, cy,
-  } = useGaugeState()
-
-  const [currentAngle, setCurrentAngle] = useState(startAngle)
-
-  useEffect(() => {
-    if (valueAngle === null) return
-
-    const duration = 500 // 0.5 second animation
-    const startTime = Date.now()
-    const animationStartAngle = currentAngle // Start from current position
-    const endAngle = valueAngle
-
-    const animate = () => {
-      const now = Date.now()
-      const elapsed = now - startTime
-      const progress = Math.min(elapsed / duration, 1)
-
-      // Ease-out cubic for smooth deceleration
-      const easeProgress = 1 - Math.pow(1 - progress, 3)
-
-      // take the current angle and add the difference to the end angle based on progress
-      const newAngle = animationStartAngle + (endAngle - animationStartAngle) * easeProgress
-      setCurrentAngle(newAngle)
-
-      if (progress < 1) {
-        globalThis.requestAnimationFrame(animate)
-      }
-    }
-
-    globalThis.requestAnimationFrame(animate)
-  }, [currentAngle, valueAngle])
-
-  if (valueAngle === null) {
-    // No value to display
-    return null
-  }
-
-  const target = {
-    x: cx + outerRadius * Math.sin(currentAngle),
-    y: cy - outerRadius * Math.cos(currentAngle),
-  }
-  return (
-    <g className="GaugePointer">
-      <circle cx={cx} cy={cy} r={5} fill={strokeColor} />
-      <path
-        d={`M ${cx} ${cy} L ${target.x} ${target.y}`}
-        stroke={strokeColor}
-        strokeWidth={3}
-      />
-    </g>
-  )
-}

package/src/components/rate/gauge/Ticks.tsx

@@ -1,122 +0,0 @@
-import { useTheme } from '@mui/material'
-import { useGaugeState } from '@mui/x-charts/Gauge'
-import { isDefined } from '@xylabs/sdk-js'
-import type { JSX } from 'react'
-
-export interface GaugeTicksProps {
-  /**
-   * Length of major ticks as a percentage of the radius
-   * @default 0.15
-   */
-  majorTickLength?: number
-  /**
-   * Width of major ticks in pixels
-   * @default 2
-   */
-  majorTickWidth?: number
-  /**
-   * Length of minor ticks as a percentage of the radius
-   * @default 0.08
-   */
-  minorTickLength?: number
-  /**
-   * Width of minor ticks in pixels
-   * @default 1
-   */
-  minorTickWidth?: number
-  /**
-   * Number of minor ticks between major ticks
-   * @default 4
-   */
-  minorTicksPerMajor?: number
-  /**
-   * Number of major ticks to display
-   * @default 11
-   */
-  numTicks?: number
-  /**
-   * Color of the ticks
-   */
-  tickColor?: string
-}
-
-export const GaugeTicks: React.FC<GaugeTicksProps> = ({
-  numTicks = 11,
-  minorTicksPerMajor = 4,
-  majorTickLength = 0.2,
-  minorTickLength = 0.15,
-  majorTickWidth = 2,
-  minorTickWidth = 1,
-  tickColor,
-}) => {
-  const theme = useTheme()
-  const {
-    startAngle, endAngle, outerRadius, cx, cy,
-  } = useGaugeState()
-
-  const color = isDefined(tickColor) ? tickColor : theme.vars.palette.text.secondary
-
-  if (startAngle === null || endAngle === null) {
-    return null
-  }
-
-  const ticks: JSX.Element[] = []
-  const totalAngle = endAngle - startAngle
-
-  // Generate major ticks
-  for (let i = 0; i < numTicks; i++) {
-    const angle = startAngle + (i / (numTicks - 1)) * totalAngle
-    const tickLength = outerRadius * majorTickLength
-    const tickStart = outerRadius
-    const innerRadius = tickStart - tickLength
-
-    const x1 = cx + tickStart * Math.sin(angle)
-    const y1 = cy - tickStart * Math.cos(angle)
-    const x2 = cx + innerRadius * Math.sin(angle)
-    const y2 = cy - innerRadius * Math.cos(angle)
-
-    ticks.push(
-      <line
-        className={`GaugeTick-major-${i}`}
-        key={`major-${i}`}
-        x1={x1}
-        y1={y1}
-        x2={x2}
-        y2={y2}
-        stroke={color}
-        strokeWidth={majorTickWidth}
-        // strokeLinecap="round"
-      />,
-    )
-    // Generate minor ticks between major ticks (except after the last major tick)
-    if (i < numTicks - 1) {
-      const angleStep = totalAngle / (numTicks - 1) / (minorTicksPerMajor + 1)
-      for (let j = 1; j <= minorTicksPerMajor; j++) {
-        const minorAngle = angle + angleStep * j
-        const minorTickLen = outerRadius * minorTickLength
-        const minorTickStart = outerRadius
-        const minorInnerRadius = minorTickStart - minorTickLen
-
-        const mx1 = cx + minorTickStart * Math.sin(minorAngle)
-        const my1 = cy - minorTickStart * Math.cos(minorAngle)
-        const mx2 = cx + minorInnerRadius * Math.sin(minorAngle)
-        const my2 = cy - minorInnerRadius * Math.cos(minorAngle)
-
-        ticks.push(
-          <line
-            key={`minor-${i}-${j}`}
-            x1={mx1}
-            y1={my1}
-            x2={mx2}
-            y2={my2}
-            stroke={color}
-            strokeWidth={minorTickWidth}
-            // strokeLinecap="round"
-          />,
-        )
-      }
-    }
-  }
-
-  return <g className="GaugeTicks">{ticks}</g>
-}

package/src/components/rate/gauge/WithLabel.stories.tsx

@@ -1,73 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import type { BlockRate } from '@xyo-network/xl1-sdk'
-import { asXL1BlockRange } from '@xyo-network/xl1-sdk'
-
-import type { GaugeConfig } from './Container.tsx'
-import { BlockRateSpeedGaugeWithLabel } from './WithLabel.tsx'
-
-const blockRateSeconds: BlockRate = {
-  range: asXL1BlockRange([100, 200], true),
-  span: 100,
-  rate: 0.083_33,
-  timeUnit: 'seconds',
-  timeDifference: (100 * 12),
-  timePerBlock: 12,
-}
-
-const blockRateMinutes: BlockRate = {
-  range: asXL1BlockRange([100, 200], true),
-  span: 100,
-  rate: 5,
-  timeUnit: 'minutes',
-  timeDifference: (100 * 12) / 60,
-  timePerBlock: 12,
-}
-
-const blockRateHour: BlockRate = {
-  range: asXL1BlockRange([100, 200], true),
-  span: 100,
-  rate: 7 * 60,
-  timeUnit: 'hours',
-  timeDifference: (100 * 12) / 60,
-  timePerBlock: 12,
-}
-
-const gaugeConfigHours: GaugeConfig = {
-  targetBlockRate: 5 * 60,
-  targetBlockRateUnit: 'hours',
-  targetPosition: 75,
-}
-
-const gaugeConfigMinutes: GaugeConfig = {
-  targetBlockRate: 5,
-  targetBlockRateUnit: 'minutes',
-  targetPosition: 75,
-}
-
-export default {
-  title: 'BlockRate/Gauge/Label',
-  component: BlockRateSpeedGaugeWithLabel,
-} satisfies Meta<typeof BlockRateSpeedGaugeWithLabel>
-
-const Template: StoryFn<typeof BlockRateSpeedGaugeWithLabel> = (args) => {
-  return <BlockRateSpeedGaugeWithLabel {...args} />
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithBlockRateSeconds = Template.bind({})
-WithBlockRateSeconds.args = { blockRate: blockRateSeconds }
-
-const WithBlockRateMinutes = Template.bind({})
-WithBlockRateMinutes.args = { blockRate: blockRateMinutes, gaugeConfig: gaugeConfigMinutes }
-
-const WithBlockRateHours = Template.bind({})
-WithBlockRateHours.args = { blockRate: blockRateHour, gaugeConfig: gaugeConfigHours }
-
-export {
-  Default,
-  WithBlockRateHours,
-  WithBlockRateMinutes,
-  WithBlockRateSeconds,
-}

package/src/components/rate/gauge/WithLabel.tsx

@@ -1,20 +0,0 @@
-import { FlexCol } from '@xylabs/react-flexbox'
-import { isDefined } from '@xylabs/sdk-js'
-
-import { rateUnitToLabel } from '../../../helpers/rate/index.ts'
-import { BlockRateSpeedTypography } from '../SpeedTypography.tsx'
-import type { BlockRateSpeedGaugeProps } from './Container.tsx'
-import { BlockRateSpeedGaugeContainer } from './Container.tsx'
-
-export interface BlockRateSpeedGaugeWithLabelProps extends BlockRateSpeedGaugeProps {}
-
-export const BlockRateSpeedGaugeWithLabel: React.FC<BlockRateSpeedGaugeProps> = ({ blockRate, ...props }) => {
-  const rateUnitLabel = isDefined(blockRate?.rate) ? rateUnitToLabel(blockRate?.timeUnit) : ''
-
-  return (
-    <FlexCol>
-      <BlockRateSpeedGaugeContainer blockRate={blockRate} {...props} />
-      <BlockRateSpeedTypography rate={blockRate?.rate} rateUnitLabel={rateUnitLabel} />
-    </FlexCol>
-  )
-}

package/src/components/rate/gauge/helpers/blockRateConversions.ts

@@ -1,104 +0,0 @@
-import { isDefined, isUndefined } from '@xylabs/sdk-js'
-import type { TimeDurations } from '@xyo-network/xl1-sdk'
-
-export type BlockRateConverter = (rateValue: number, unit?: keyof TimeDurations) => number
-
-const toBlocksPerMillisecond: BlockRateConverter = (rateValue: number, unit?: keyof TimeDurations): number => {
-  if (isUndefined(unit)) return rateValue
-
-  const conversions: Record<keyof TimeDurations, number> = {
-    millis: 1, // already in milliseconds
-    seconds: 1000, // 1 second = 1000 milliseconds
-    minutes: 60_000, // 1 minute = 60000 milliseconds
-    hours: 3_600_000, // 1 hour = 3600000 milliseconds
-    days: 86_400_000, // 1 day = 86400000 milliseconds
-    weeks: 604_800_000, // 1 week = 604800000 milliseconds
-  }
-
-  return rateValue * (isDefined(conversions[unit]) ? conversions[unit] : 1)
-}
-
-const toBlocksPerSecond: BlockRateConverter = (rateValue: number, unit?: keyof TimeDurations): number => {
-  if (isUndefined(unit)) return rateValue
-
-  const conversions: Record<keyof TimeDurations, number> = {
-    millis: 0.001, // 1 millisecond = 0.001 seconds
-    seconds: 1, // already in seconds
-    minutes: 60, // 1 minute = 60 seconds
-    hours: 3600, // 1 hour = 3600 seconds
-    days: 86_400, // 1 day = 86400 seconds
-    weeks: 604_800, // 1 week = 604800 seconds
-  }
-
-  return rateValue * (isDefined(conversions[unit]) ? conversions[unit] : 1)
-}
-
-// Convert rate to blocks per minute based on the unit
-const toBlocksPerMinute: BlockRateConverter = (rateValue: number, unit?: keyof TimeDurations): number => {
-  if (isUndefined(unit)) return rateValue
-
-  const conversions: Record<keyof TimeDurations, number> = {
-    millis: 60_000, // 1 minute = 60000 milliseconds
-    seconds: 60, // 1 minute = 60 seconds
-    minutes: 1, // already in minutes
-    hours: 1 / 60, // 1 hour = 60 minutes
-    days: 1 / 1440, // 1 day = 1440 minutes
-    weeks: 1 / 10_080, // 1 week = 10080 minutes
-  }
-
-  return rateValue * (isDefined(conversions[unit]) ? conversions[unit] : 1)
-}
-
-const toBlocksPerHour: BlockRateConverter = (rateValue: number, unit?: keyof TimeDurations): number => {
-  if (isUndefined(unit)) return rateValue
-
-  const conversions: Record<keyof TimeDurations, number> = {
-    millis: 3_600_000, // 1 hour = 3600000 milliseconds
-    seconds: 3600, // 1 hour = 3600 seconds
-    minutes: 60, // 1 hour = 60 minutes
-    hours: 1, // already in hours
-    days: 1 / 24, // 1 day = 24 hours
-    weeks: 1 / 168, // 1 week = 168 hours
-  }
-
-  return rateValue * (isDefined(conversions[unit]) ? conversions[unit] : 1)
-}
-
-const toBlocksPerDay: BlockRateConverter = (rateValue: number, unit?: keyof TimeDurations): number => {
-  if (isUndefined(unit)) return rateValue
-
-  const conversions: Record<keyof TimeDurations, number> = {
-    millis: 86_400_000, // 1 day = 86400000 milliseconds
-    seconds: 86_400, // 1 day = 86400 seconds
-    minutes: 1440, // 1 day = 1440 minutes
-    hours: 24, // 1 day = 24 hours
-    days: 1, // already in days
-    weeks: 1 / 7, // 1 week = 7 days
-  }
-
-  return rateValue * (isDefined(conversions[unit]) ? conversions[unit] : 1)
-}
-
-const toBlocksPerWeek: BlockRateConverter = (rateValue: number, unit?: keyof TimeDurations): number => {
-  if (isUndefined(unit)) return rateValue
-
-  const conversions: Record<keyof TimeDurations, number> = {
-    millis: 604_800_000, // 1 week = 604800000 milliseconds
-    seconds: 604_800, // 1 week = 604800 seconds
-    minutes: 10_080, // 1 week = 10080 minutes
-    hours: 168, // 1 week = 168 hours
-    days: 7, // 1 week = 7 days
-    weeks: 1, // already in weeks
-  }
-
-  return rateValue * (isDefined(conversions[unit]) ? conversions[unit] : 1)
-}
-
-export const BlockRateConversions: Record<keyof TimeDurations, BlockRateConverter> = {
-  millis: toBlocksPerMillisecond,
-  seconds: toBlocksPerSecond,
-  minutes: toBlocksPerMinute,
-  hours: toBlocksPerHour,
-  days: toBlocksPerDay,
-  weeks: toBlocksPerWeek,
-}

package/src/components/rate/gauge/helpers/index.ts

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

package/src/components/rate/gauge/index.ts

@@ -1,4 +0,0 @@
-export * from './Container.tsx'
-export * from './Pointer.tsx'
-export * from './Ticks.tsx'
-export * from './WithLabel.tsx'

package/src/components/rate/index.ts

@@ -1,6 +0,0 @@
-export * from './flexbox/index.ts'
-export * from './gauge/index.ts'
-export * from './SpanTypography.tsx'
-export * from './SpeedTypography.tsx'
-export * from './support/index.ts'
-export * from './TimeTypography.tsx'

package/src/components/rate/support/MetricTypography.tsx

@@ -1,78 +0,0 @@
-import type { TypographyProps } from '@mui/material'
-import { Icon, Typography } from '@mui/material'
-import { isUndefined } from '@xylabs/sdk-js'
-import type { ReactNode } from 'react'
-import { useEffect, useState } from 'react'
-
-export interface MetricTypographyProps extends TypographyProps {
-  animationDurationMs?: number
-  disableAnimation?: boolean
-  icon?: ReactNode
-  label?: ReactNode
-  metric?: number
-}
-
-export const MetricTypography: React.FC<MetricTypographyProps> = ({
-  animationDurationMs = 1000, disableAnimation, icon, label, metric, sx, ...props
-}) => {
-  const [displayValue, setDisplayValue] = useState(0)
-
-  if (isUndefined(metric) && displayValue !== 0) {
-    setDisplayValue(0)
-  }
-
-  useEffect(() => {
-    if (isUndefined(metric)) return
-    const duration = animationDurationMs
-    const startTime = Date.now()
-    const startValue = 0
-    const endValue = metric
-
-    const animate = () => {
-      const now = Date.now()
-      const elapsed = now - startTime
-      const progress = Math.min(elapsed / duration, 1)
-
-      // Easing function for smooth animation (ease-out
-      const easeProgress = 1 - Math.pow(1 - progress, 3)
-
-      const currentValue = startValue + (endValue - startValue) * easeProgress
-      setDisplayValue(currentValue)
-
-      if (progress < 1) {
-        requestAnimationFrame(animate)
-      }
-    }
-
-    globalThis.requestAnimationFrame(animate)
-  }, [animationDurationMs, metric])
-
-  // Check if metric is a whole number
-  const isWholeNumber = metric !== undefined && Number.isInteger(metric)
-
-  // Format based on whether the target is a whole number
-  const formattedValue = disableAnimation
-    ? metric
-    : displayValue.toLocaleString(navigator.language, {
-        minimumFractionDigits: 0,
-        maximumFractionDigits: isWholeNumber ? 0 : 2,
-      })
-
-  return (
-    <Typography
-      variant="h4"
-      mb={1}
-      sx={{
-        display: 'flex', alignItems: 'end', gap: 0.5, ...sx,
-      }}
-      {...props}
-    >
-      <Icon fontSize="large">{icon}</Icon>
-      {formattedValue}
-      {' '}
-      <Typography component="span" variant="caption" lineHeight={1.86}>
-        {label}
-      </Typography>
-    </Typography>
-  )
-}

package/src/components/rate/support/index.ts

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

package/src/components/table/StyledLinkableTableRow.tsx

@@ -1,12 +0,0 @@
-import type { TableRowProps } from '@mui/material'
-import { styled, TableRow } from '@mui/material'
-import { alphaCss } from '@xylabs/react-theme'
-
-export const StyledLinkableTableRow = styled(TableRow, { shouldForwardProp: prop => prop !== 'linked' })<
-  TableRowProps & { linked?: boolean }
->(({ theme, linked }) => ({
-  'cursor': linked ? 'pointer' : 'default',
-  'overflowY': 'scroll',
-  '&:hover': { backgroundColor: alphaCss(theme.vars.palette.secondary.light, 0.15) },
-}
-))

package/src/components/table/index.ts

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

package/src/components/transactions/TransactionCountChip.tsx

@@ -1,34 +0,0 @@
-import CompareArrowsIcon from '@mui/icons-material/CompareArrows'
-import type { ChipProps } from '@mui/material'
-import { Chip, Icon } from '@mui/material'
-import type { Hash } from '@xylabs/sdk-js'
-import React, { useMemo } from 'react'
-
-export interface TransactionCountChipProps extends ChipProps {
-  transactions?: Hash[]
-}
-
-export const TransactionCountChip: React.FC<TransactionCountChipProps> = ({
-  transactions, sx, ...props
-}) => {
-  const label = useMemo(() => {
-    if (!transactions) return '0'
-    return transactions?.length > 10 ? '+10' : transactions.length
-  }, [transactions])
-
-  return (
-    <Chip
-      avatar={(
-        <Icon>
-          <CompareArrowsIcon />
-        </Icon>
-      )}
-      label={label}
-      title={transactions ? `Block contains ${transactions.length} transactions` : undefined}
-      sx={{
-        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', ...sx,
-      }}
-      {...props}
-    />
-  )
-}

package/src/components/transactions/TransactionsQuickTipButton.tsx

@@ -1,86 +0,0 @@
-import { ContentCopy as ContentCopyIcon, Paid } from '@mui/icons-material'
-import {
-  Alert, AlertTitle, Collapse, Snackbar, Typography,
-} from '@mui/material'
-import { ErrorRender } from '@xylabs/react-error'
-import {
-  FlexGrowCol, FlexGrowRow, FlexRow,
-} from '@xylabs/react-flexbox'
-import type { QuickTipButtonProps } from '@xylabs/react-quick-tip-button'
-import { QuickTipButton } from '@xylabs/react-quick-tip-button'
-import { type Hash, isDefined } from '@xylabs/sdk-js'
-import type { HydratedBlockWithHashMeta } from '@xyo-network/xl1-sdk'
-import React, { Fragment, useState } from 'react'
-
-import { useTxsFromBlock } from '../../hooks/index.ts'
-
-export interface TransactionsQuickTipButtonQuickTipButtonProps extends QuickTipButtonProps {
-  block?: HydratedBlockWithHashMeta
-}
-
-export const TransactionsQuickTipButton: React.FC<TransactionsQuickTipButtonQuickTipButtonProps> = ({ block, ...props }) => {
-  const [transactions, transactionsError] = useTxsFromBlock(block)
-
-  const [copied, setCopied] = useState(false)
-
-  const [closeDialog, setCloseDialog] = useState(false)
-  const open = isDefined(transactionsError)
-
-  // if the error changes, reopen the dialog
-  const [previousTransactionError, setPreviousTransactionError] = useState<Error | undefined>(transactionsError)
-  if (isDefined(transactionsError) && transactionsError !== previousTransactionError) {
-    setPreviousTransactionError(transactionsError)
-    setCloseDialog(false)
-  }
-
-  const onCopy = async (transactionHash: Hash) => {
-    await navigator.clipboard.writeText(transactionHash)
-    setCopied(true)
-    setTimeout(() => {
-      setCopied(false)
-    }, 5000)
-  }
-
-  return (
-    <>
-      <QuickTipButton
-        Icon={Paid}
-        disabled={transactions?.length === 0}
-        hoverText={`Transaction Count: ${transactions?.length ?? 0}`}
-        disableDialog={transactions?.length === 0}
-        dialogProps={{ fullWidth: true, maxWidth: 'md' }}
-        {...props}
-      >
-        {transactions?.length === 0
-          ? null
-          : (
-              <FlexGrowCol gap={1} alignItems="stretch">
-                {transactions?.map(([_transaction, hash]) => (
-                  <Fragment key={hash}>
-                    <FlexGrowRow gap={2} justifyContent="start">
-                      <ContentCopyIcon sx={{ cursor: 'pointer' }} onClick={() => void onCopy(hash)} />
-                      <Typography sx={{
-                        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-                      }}
-                      >
-                        {hash}
-                      </Typography>
-                    </FlexGrowRow>
-                    <FlexRow>
-                      <Collapse in={copied} unmountOnExit>
-                        <Alert>
-                          <AlertTitle>Previous hash copied to clipboard</AlertTitle>
-                        </Alert>
-                      </Collapse>
-                    </FlexRow>
-                  </Fragment>
-                ))}
-              </FlexGrowCol>
-            )}
-      </QuickTipButton>
-      <Snackbar open={open && closeDialog === false} onClose={() => setCloseDialog(true)}>
-        <ErrorRender error={transactionsError} scope="TransactionsQuickTipButton" />
-      </Snackbar>
-    </>
-  )
-}

package/src/components/transactions/index.ts

@@ -1,3 +0,0 @@
-export * from './submit/index.ts'
-export * from './TransactionCountChip.tsx'
-export * from './TransactionsQuickTipButton.tsx'

package/src/components/transactions/submit/Builder.tsx

@@ -1,55 +0,0 @@
-import {
-  Button, FormControl, TextField,
-} from '@mui/material'
-import { FlexCol } from '@xylabs/react-flexbox'
-import { toHex } from '@xylabs/sdk-js'
-import type { ChainId, TransactionBoundWitnessFields } from '@xyo-network/xl1-sdk'
-import { defaultTransactionFees, toXL1BlockNumber } from '@xyo-network/xl1-sdk'
-import React from 'react'
-
-export interface ChainTransactionBuilder {
-  onSubmitTx?: (chainTx: Omit<TransactionBoundWitnessFields, 'from'>) => Promise<void>
-}
-
-export const ChainTransactionBuilder: React.FC<ChainTransactionBuilder> = ({ onSubmitTx }) => {
-  const handleSubmit = async (event: React.SubmitEvent<HTMLFormElement>) => {
-    event.preventDefault()
-    const formData = new FormData(event.currentTarget)
-
-    // TODO - more field level validation
-    const chainTx: Omit<TransactionBoundWitnessFields, 'from'> = {
-      chain: formData.get('chain') as ChainId,
-      nbf: toXL1BlockNumber(formData.get('nbf'), true),
-      exp: toXL1BlockNumber(formData.get('exp'), true),
-      fees: {
-        gasLimit: toHex(defaultTransactionFees.gasLimit),
-        gasPrice: toHex(defaultTransactionFees.gasPrice),
-        base: toHex(defaultTransactionFees.base),
-        priority: toHex(defaultTransactionFees.priority),
-      },
-    }
-
-    await onSubmitTx?.(chainTx)
-  }
-
-  return (
-    <form onSubmit={event => void handleSubmit(event)} style={{ width: '100%' }}>
-      <FlexCol gap={2}>
-        <FormControl fullWidth>
-          <TextField label="Chain Address" name="chain" required />
-        </FormControl>
-        <FormControl fullWidth>
-          <TextField label="Gas" name="gas" required />
-        </FormControl>
-        <FormControl fullWidth>
-          <TextField label="Not Before Block" name="nbf" required />
-        </FormControl>
-        <FormControl fullWidth>
-          <TextField label="Not After Block" name="exp" required />
-        </FormControl>
-
-        <Button type="submit" variant="contained">Submit</Button>
-      </FlexCol>
-    </form>
-  )
-}