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

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

@@ -1,69 +0,0 @@
-import { Button, FormControl } from '@mui/material'
-import { usePromise } from '@xylabs/react-promise'
-import type { Address } from '@xylabs/sdk-js'
-import { createProducerChainStakeIntent } from '@xyo-network/chain-protocol'
-import type { XL1BlockNumber } from '@xyo-network/xl1-sdk'
-import type { MouseEventHandler } from 'react'
-import React, { useState } from 'react'
-
-import { BlockNumberTextField, XyoAddressTextField } from '../../fields/index.ts'
-import type { PayloadBuilderComponentProps } from '../BuilderComponentProps.ts'
-
-export interface ProducerIntentBuilderFormProps extends PayloadBuilderComponentProps {}
-
-export const ProducerIntentBuilderForm: React.FC<ProducerIntentBuilderFormProps> = ({ onBuild }) => {
-  const [delegate, setDelegate] = useState<Address>()
-  const [exp, setExp] = useState<XL1BlockNumber>()
-  const [nbf, setNbf] = useState<XL1BlockNumber>()
-  const [blockRangeError, setBlockRangeError] = useState<Error>()
-
-  const [intentPayload] = usePromise(async () => {
-    // confirm we have values for all fields
-    if (exp !== undefined && nbf !== undefined) {
-      // validate that expires is greater than not before
-      if (exp <= nbf) {
-        setBlockRangeError(new Error('Expires must be greater than Not Before'))
-      } else {
-        setBlockRangeError(undefined)
-        if (delegate !== undefined) {
-          // create the payload
-          const payload = await createProducerChainStakeIntent(delegate, exp, nbf)
-          return payload
-        }
-      }
-    }
-  }, [delegate, exp, nbf])
-
-  const onBuildLocal: MouseEventHandler<HTMLButtonElement> = () => {
-    if (onBuild && intentPayload) onBuild?.(intentPayload)
-  }
-
-  return (
-    <>
-      <FormControl fullWidth>
-        <XyoAddressTextField label="Delegate" name="delegate" onAddressChanged={setDelegate} required size="small" />
-      </FormControl>
-      <FormControl fullWidth>
-        <BlockNumberTextField
-          errorMessage={blockRangeError?.message}
-          label="Expires"
-          name="exp"
-          onBlockNumberChanged={setExp}
-          required
-          size="small"
-        />
-      </FormControl>
-      <FormControl fullWidth>
-        <BlockNumberTextField
-          errorMessage={blockRangeError?.message}
-          label="Not Before"
-          name="nbf"
-          onBlockNumberChanged={setNbf}
-          required
-          size="small"
-        />
-      </FormControl>
-      <Button disabled={!intentPayload} variant="contained" onClick={onBuildLocal}>Build</Button>
-    </>
-  )
-}

package/src/components/payload/builder/producer-intent/index.ts

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

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

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

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

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

package/src/components/payload/builder/transfer/Form.tsx

@@ -1,82 +0,0 @@
-import { Button, FormControl } from '@mui/material'
-import type { Address, Hex } from '@xylabs/sdk-js'
-import { isAddress } from '@xylabs/sdk-js'
-import type { Transfer } from '@xyo-network/xl1-sdk'
-import { TransferSchema } from '@xyo-network/xl1-sdk'
-import type { MouseEventHandler } from 'react'
-import React, { useMemo, useState } from 'react'
-
-import { XyoAddressTextField } from '../../fields/index.ts'
-import type { PayloadBuilderComponentProps } from '../BuilderComponentProps.ts'
-import { SingleTransferBuilderFlexbox } from './builder/index.ts'
-import type { TransferAmount } from './Transfer.ts'
-
-export interface TransferBuilderFormProps extends PayloadBuilderComponentProps {}
-
-export const TransferBuilderForm: React.FC<TransferBuilderFormProps> = ({ onBuild }) => {
-  const [fromAddress, setFromAddress] = useState<Address>()
-  const [transfers, setTransfers] = useState<TransferAmount[]>([])
-
-  const [epoch] = useState(() => Date.now())
-
-  const transferPayload: Transfer | undefined = useMemo(() => {
-    if (isAddress(fromAddress) && transfers.length > 0) {
-      const transfersRecord = {} as Transfer['transfers']
-      for (const transfer of transfers) {
-        transfersRecord[transfer.to] = transfer.amount
-      }
-
-      return {
-        from: fromAddress,
-        schema: TransferSchema,
-        transfers: transfersRecord,
-        epoch,
-      }
-    }
-  }, [fromAddress, transfers, epoch])
-
-  const onBuildLocal: MouseEventHandler<HTMLButtonElement> = () => {
-    if (onBuild && transferPayload) onBuild?.(transferPayload)
-  }
-
-  const onTransferAdded = () => {
-    const transferAmount: TransferAmount = {
-      amount: '' as Hex,
-      transferId: Date.now(),
-      to: '' as Address,
-    }
-    setTransfers(prev => [...prev, transferAmount])
-  }
-
-  const onTransferRemoved = (transferId: number) => {
-    setTransfers(prev => prev.filter(transfer => transfer.transferId !== transferId))
-  }
-
-  const onTransferUpdated = (singleTransfer: TransferAmount) => {
-    setTransfers(prev => prev.map((transfer) => {
-      if (transfer.transferId === singleTransfer.transferId) {
-        return singleTransfer
-      }
-      return transfer
-    }))
-  }
-
-  return (
-    <>
-      <FormControl fullWidth>
-        <XyoAddressTextField label="From" name="from" onAddressChanged={setFromAddress} required size="small" />
-      </FormControl>
-      <Button onClick={onTransferAdded} size="small" variant="contained">Add Transfer</Button>
-      {transfers.map(transfer => (
-        <SingleTransferBuilderFlexbox
-          key={transfer.transferId}
-          onTransferUpdated={onTransferUpdated}
-          onRemoveTransfer={onTransferRemoved}
-          singleTransfer={transfer}
-          sx={{ width: '100%' }}
-        />
-      ))}
-      <Button disabled={!transferPayload} variant="contained" onClick={onBuildLocal}>Build</Button>
-    </>
-  )
-}

package/src/components/payload/builder/transfer/Transfer.ts

@@ -1,3 +0,0 @@
-import type { Address, Hex } from '@xylabs/sdk-js'
-
-export type TransferAmount = { amount: Hex; to: Address; transferId: number }

package/src/components/payload/builder/transfer/builder/SingleFlexbox.tsx

@@ -1,51 +0,0 @@
-import { RemoveCircle } from '@mui/icons-material'
-import {
-  FormControl, Icon, IconButton,
-} from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexRow } from '@xylabs/react-flexbox'
-import type { Address } from '@xylabs/sdk-js'
-import {
-  isAddress, isDefinedNotNull, toHex,
-} from '@xylabs/sdk-js'
-import { BigIntInput } from '@xyo-network/react-shared'
-import React, { useEffect, useState } from 'react'
-
-import { XyoAddressTextField } from '../../../fields/index.ts'
-import type { TransferAmount } from '../Transfer.ts'
-
-export interface SingleTransferBuilderFlexboxProps extends FlexBoxProps {
-  onRemoveTransfer?: (transferId: number) => void
-  onTransferUpdated?: (transferAmount: TransferAmount) => void
-  singleTransfer: TransferAmount
-}
-
-export const SingleTransferBuilderFlexbox: React.FC<SingleTransferBuilderFlexboxProps> = ({
-  onTransferUpdated, onRemoveTransfer, singleTransfer, ...props
-}) => {
-  const [toAddress, setToAddress] = useState<Address>()
-  const [amount, setAmount] = useState<bigint>()
-
-  useEffect(() => {
-    const transferAmount = isAddress(toAddress) && isDefinedNotNull(amount)
-      ? {
-          ...singleTransfer,
-          amount: toHex(amount),
-          to: toAddress,
-        }
-      : undefined
-    if (transferAmount) onTransferUpdated?.(transferAmount)
-  }, [amount, onTransferUpdated, singleTransfer, toAddress])
-
-  return (
-    <FlexRow alignItems="start" gap={1} {...props}>
-      <FormControl fullWidth>
-        <XyoAddressTextField label="To" name="to" onAddressChanged={setToAddress} required size="small" />
-      </FormControl>
-      <FormControl fullWidth>
-        <BigIntInput.TextField label="Amount" name="amount" onChangeFixedPoint={setAmount} required size="small" />
-      </FormControl>
-      <IconButton onClick={() => onRemoveTransfer?.(singleTransfer.transferId)}><Icon><RemoveCircle /></Icon></IconButton>
-    </FlexRow>
-  )
-}

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

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

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

@@ -1,2 +0,0 @@
-export * from './Flexbox.tsx'
-export * from './Form.tsx'

package/src/components/payload/fields/BlockNumberTextField.tsx

@@ -1,40 +0,0 @@
-import type { StandardTextFieldProps } from '@mui/material'
-import {
-  FormControl, FormHelperText, TextField,
-} from '@mui/material'
-import { toXL1BlockNumber, type XL1BlockNumber } from '@xyo-network/xl1-sdk'
-import type { ChangeEventHandler } from 'react'
-import React, { useState } from 'react'
-
-interface BlockNumberTextFieldProps extends StandardTextFieldProps {
-  errorMessage?: string
-  onBlockNumberChanged?: (blockNumber?: XL1BlockNumber) => void
-}
-
-export const BlockNumberTextField: React.FC<BlockNumberTextFieldProps> = ({
-  errorMessage, onBlockNumberChanged, onChange, ...props
-}) => {
-  const [blockNumber, setBlockNumber] = useState<number>()
-
-  const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
-    const value = e.target.value.replaceAll(/\D/g, '') // Remove non-digit characters
-    setBlockNumber(value.length > 0 ? Number(value) : undefined)
-    onBlockNumberChanged?.(toXL1BlockNumber(value))
-    onChange?.(e)
-  }
-
-  const errored = errorMessage !== undefined
-
-  return (
-    <FormControl fullWidth>
-      <TextField
-        error={errored}
-        onChange={handleChange}
-        type="number"
-        value={blockNumber ?? ''}
-        {...props}
-      />
-      {errored ? <FormHelperText sx={{ color: 'error.main' }}>{errorMessage}</FormHelperText> : null}
-    </FormControl>
-  )
-}

package/src/components/payload/fields/XyoAddressTextField.tsx

@@ -1,71 +0,0 @@
-import type { StandardTextFieldProps } from '@mui/material'
-import {
-  FormControl, FormHelperText, TextField,
-} from '@mui/material'
-import type { Address } from '@xylabs/sdk-js'
-import {
-  asAddress, isAddress, isDefined,
-} from '@xylabs/sdk-js'
-import React, { useState } from 'react'
-
-interface XyoAddressTextFieldProps extends Omit<StandardTextFieldProps, 'value'> {
-  onAddressChanged?: (address?: Address) => void
-  // increment the value to trigger rerender with empty input
-  resetValue?: number
-}
-
-export const XyoAddressTextField: React.FC<XyoAddressTextFieldProps> = ({
-  onAddressChanged, onChange, resetValue, ...props
-}) => {
-  const [address, setAddress] = useState<string>('')
-  const [addressError, setAddressError] = useState<Error>()
-
-  const [previousResetValue, setPreviousResetValue] = useState<number | undefined>(resetValue)
-
-  if (isDefined(resetValue) && resetValue !== previousResetValue) {
-    setPreviousResetValue(resetValue)
-    setAddress('')
-  }
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { value } = event.target
-    // allow the parent component to also respond to the change if they need to
-    onChange?.(event)
-
-    // validate the address and call onAddressChanged if it's valid
-    const xyoAddress = asAddress(value)
-    if (isAddress(xyoAddress)) {
-      onAddressChanged?.(xyoAddress)
-      setAddressError(undefined)
-    } else if (value === '') {
-      // if the input is empty, we clear the error but don't call onAddressChanged because there's no address
-      setAddressError(undefined)
-    } else {
-      // if the address is invalid, we set an error and call onAddressChanged with undefined to clear any previously set address
-      setAddressError(new Error('Invalid address'))
-    }
-
-    setAddress(value)
-  }
-
-  const handleBlur = () => {
-    const xyoAddress = asAddress(address)
-    if (!isAddress(xyoAddress)) {
-      setAddressError(new Error('Invalid address'))
-      onAddressChanged?.()
-    }
-  }
-
-  return (
-    <FormControl fullWidth>
-      <TextField
-        error={!!addressError}
-        onBlur={handleBlur}
-        onChange={handleChange}
-        value={address}
-        {...props}
-      />
-      {addressError ? <FormHelperText sx={{ color: 'error.main' }}>{addressError.message}</FormHelperText> : null}
-    </FormControl>
-  )
-}

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

@@ -1,2 +0,0 @@
-export * from './BlockNumberTextField.tsx'
-export * from './XyoAddressTextField.tsx'

package/src/components/payload/index.ts

@@ -1,2 +0,0 @@
-export * from './builder/index.ts'
-export * from './fields/index.ts'

package/src/components/rate/SpanTypography.tsx

@@ -1,20 +0,0 @@
-import { ViewAgendaOutlined } from '@mui/icons-material'
-import { Tooltip, type TypographyProps } from '@mui/material'
-import type { XL1BlockRange } from '@xyo-network/xl1-sdk'
-
-import { MetricTypography } from './support/index.ts'
-
-export interface BlockRateSpanTypographyProps extends TypographyProps {
-  range?: XL1BlockRange
-  span?: number
-}
-
-export const BlockRateSpanTypography: React.FC<BlockRateSpanTypographyProps> = ({
-  range, span, sx, ...props
-}) => {
-  return (
-    <Tooltip title={`Block Range: ${range?.join(' - ')}`}>
-      <MetricTypography icon={<ViewAgendaOutlined fontSize="large" />} metric={span} label="blocks" {...props} />
-    </Tooltip>
-  )
-}

package/src/components/rate/SpeedTypography.tsx

@@ -1,17 +0,0 @@
-import { SpeedOutlined } from '@mui/icons-material'
-import type { TypographyProps } from '@mui/material'
-
-import { MetricTypography } from './support/index.ts'
-
-export interface BlockRateSpeedTypographyProps extends TypographyProps {
-  rate?: number
-  rateUnitLabel?: string
-}
-
-export const BlockRateSpeedTypography: React.FC<BlockRateSpeedTypographyProps> = ({
-  rate, rateUnitLabel, ...props
-}) => {
-  return (
-    <MetricTypography icon={<SpeedOutlined fontSize="large" />} metric={rate} label={rateUnitLabel} {...props} />
-  )
-}

package/src/components/rate/TimeTypography.tsx

@@ -1,17 +0,0 @@
-import { TimelapseOutlined } from '@mui/icons-material'
-import { type TypographyProps } from '@mui/material'
-
-import { MetricTypography } from './support/index.ts'
-
-export interface BlockRateTimeTypographyProps extends TypographyProps {
-  timeDifference?: number
-  timeUnit?: string
-}
-
-export const BlockRateTimeTypography: React.FC<BlockRateTimeTypographyProps> = ({
-  timeUnit, timeDifference, sx, ...props
-}) => {
-  return (
-    <MetricTypography icon={<TimelapseOutlined fontSize="large" />} metric={timeDifference} label={timeUnit} {...props} />
-  )
-}

package/src/components/rate/flexbox/FlexBox.stories.tsx

@@ -1,46 +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 { BlockRateFlexBox } from './FlexBox.tsx'
-
-const blockRateSeconds: BlockRate = {
-  range: asXL1BlockRange([100, 200], true),
-  span: 100,
-  rate: 0.12,
-  timeUnit: 'seconds',
-  timeDifference: (100 * 12),
-  timePerBlock: 12,
-}
-
-const blockRateMinutes: BlockRate = {
-  range: asXL1BlockRange([100, 200], true),
-  span: 100,
-  rate: 12,
-  timeUnit: 'minutes',
-  timeDifference: (100 * 12) / 60,
-  timePerBlock: 12 / 60,
-}
-
-export default {
-  title: 'BlockRate/FlexBox',
-  component: BlockRateFlexBox,
-} satisfies Meta<typeof BlockRateFlexBox>
-
-const Template: StoryFn<typeof BlockRateFlexBox> = (args) => {
-  return <BlockRateFlexBox {...args} />
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithBlockRateSeconds = Template.bind({})
-WithBlockRateSeconds.args = { blockRate: blockRateSeconds }
-
-const WithBlockRateMinutes = Template.bind({})
-WithBlockRateMinutes.args = { blockRate: blockRateMinutes }
-
-export {
-  Default, WithBlockRateMinutes,
-  WithBlockRateSeconds,
-}

package/src/components/rate/flexbox/FlexBox.tsx

@@ -1,31 +0,0 @@
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol } from '@xylabs/react-flexbox'
-import { isDefined } from '@xylabs/sdk-js'
-import type { BlockRate } from '@xyo-network/xl1-sdk'
-
-import { rateUnitToLabel } from '../../../helpers/rate/index.ts'
-import { BlockRateSpanTypography } from '../SpanTypography.tsx'
-import { BlockRateSpeedTypography } from '../SpeedTypography.tsx'
-import { BlockRateTimeTypography } from '../TimeTypography.tsx'
-
-export interface BlockRateFlexBoxProps extends FlexBoxProps {
-  blockRate?: BlockRate
-}
-
-export const BlockRateFlexBox: React.FC<BlockRateFlexBoxProps> = ({
-  blockRate,
-  ...flexBoxProps
-}) => {
-  const {
-    range, span, rate, timeUnit, timeDifference,
-  } = blockRate ?? {}
-  const rateUnitLabel = isDefined(timeUnit) ? rateUnitToLabel(timeUnit) : ''
-
-  return (
-    <FlexCol alignItems="start" {...flexBoxProps}>
-      <BlockRateSpeedTypography rate={rate} rateUnitLabel={rateUnitLabel} />
-      <BlockRateSpanTypography range={range} span={span} />
-      <BlockRateTimeTypography timeUnit={timeUnit} timeDifference={timeDifference} />
-    </FlexCol>
-  )
-}

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

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

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

@@ -1,80 +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 { BlockRateSpeedGaugeContainer } from './Container.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,
-  // up the block rate to test gauge scaling
-  rate: 7 * 60,
-  timeUnit: 'hours',
-  timeDifference: (100 * 12) / 60,
-  timePerBlock: 12,
-}
-
-const gaugeConfigHour: GaugeConfig = {
-  // The target block rate per hour is less than blockRateHour.rate
-  // this is to show the pointer as higher than the targetPosition of 75 out of 110 max
-  targetBlockRate: 5 * 60,
-  targetBlockRateUnit: 'hours',
-  targetPosition: 75,
-}
-
-const gaugeConfigHourWithoutTicks: GaugeConfig = {
-  targetBlockRate: 5 * 60,
-  targetBlockRateUnit: 'hours',
-  targetPosition: 75,
-  showTicks: false,
-}
-
-export default {
-  title: 'BlockRate/Gauge',
-  component: BlockRateSpeedGaugeContainer,
-} satisfies Meta<typeof BlockRateSpeedGaugeContainer>
-
-const Template: StoryFn<typeof BlockRateSpeedGaugeContainer> = (args) => {
-  return <BlockRateSpeedGaugeContainer {...args} />
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithBlockRateSeconds = Template.bind({})
-WithBlockRateSeconds.args = { blockRate: blockRateSeconds }
-
-const WithBlockRateMinutes = Template.bind({})
-WithBlockRateMinutes.args = { blockRate: blockRateMinutes }
-
-const WithBlockRateHoursHigherThanTarget = Template.bind({})
-WithBlockRateHoursHigherThanTarget.args = { blockRate: blockRateHour, gaugeConfig: gaugeConfigHour }
-
-const WithBlockRateHoursWithoutTicks = Template.bind({})
-WithBlockRateHoursWithoutTicks.args = { blockRate: blockRateHour, gaugeConfig: gaugeConfigHourWithoutTicks }
-
-export {
-  Default, WithBlockRateHoursHigherThanTarget,
-  WithBlockRateHoursWithoutTicks,
-  WithBlockRateMinutes,
-  WithBlockRateSeconds,
-}

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

@@ -1,75 +0,0 @@
-import type { GaugeContainerProps } from '@mui/x-charts'
-import {
-  GaugeContainer, GaugeReferenceArc, GaugeValueArc,
-} from '@mui/x-charts'
-import type { BlockRate, TimeDurations } from '@xyo-network/xl1-sdk'
-import type { PropsWithChildren } from 'react'
-
-import { BlockRateConversions } from './helpers/index.ts'
-import { GaugePointer } from './Pointer.tsx'
-import { GaugeTicks } from './Ticks.tsx'
-
-export type GaugeConfig = {
-  // whether to show ticks on the gauge
-  showTicks?: boolean
-  // the block rate to target on the gauge
-  targetBlockRate: number
-  // the unit of time for the target block rate (e.g., seconds, minutes)
-  targetBlockRateUnit: keyof TimeDurations
-  // the position of the pointer when the block rate matches the target rate
-  // should be approximately between 2/3 and 3/4 position of the gauge
-  targetPosition: number
-}
-
-export interface BlockRateSpeedGaugeProps extends GaugeContainerProps, PropsWithChildren {
-  blockRate?: BlockRate
-  gaugeConfig?: GaugeConfig
-}
-
-export const BlockRateSpeedGaugeContainer: React.FC<BlockRateSpeedGaugeProps> = ({
-  blockRate,
-  children,
-  gaugeConfig,
-  startAngle = -110,
-  endAngle = 110,
-  width = 200,
-  height = 150,
-  ...props
-}) => {
-  const { rate, timeUnit } = blockRate || {}
-  const {
-    targetBlockRate = 5, targetBlockRateUnit = 'minutes', targetPosition = 75, showTicks = true,
-  } = gaugeConfig || {}
-
-  // Get the appropriate converter function based on the target block rate unit
-  const converter = BlockRateConversions[targetBlockRateUnit]
-
-  // Normalize rate to the gauge
-  const maxGaugeValue = endAngle // matches endAngle
-  const blocksPerMinute = rate === undefined ? 0 : converter(rate, timeUnit)
-
-  // Scale: 5 blocks/min should map to 75 out of 110 max
-  // This means: normalizedValue = (blocksPerMinute / targetRate) * targetPosition
-  // And we want it capped at maxGaugeValue
-  const normalizedValue = Math.min((blocksPerMinute / targetBlockRate) * targetPosition, maxGaugeValue)
-
-  return (
-    <GaugeContainer
-      width={width}
-      height={height}
-      startAngle={startAngle}
-      endAngle={endAngle}
-      value={normalizedValue}
-      valueMax={endAngle}
-      innerRadius="95%"
-      outerRadius="100%"
-      {...props}
-    >
-      {showTicks && <GaugeTicks />}
-      <GaugeReferenceArc />
-      <GaugeValueArc />
-      <GaugePointer startAngle={-2} />
-      {children}
-    </GaugeContainer>
-  )
-}