@xyo-network/react-chain-blockchain 1.18.0 → 1.18.1

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

@@ -0,0 +1,75 @@
+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, rateUnit } = 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, rateUnit)
+
+  // 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>
+  )
+}

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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,122 @@
+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

@@ -0,0 +1,70 @@
+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,
+  rateUnit: 'seconds',
+  timeDifference: (100 * 12),
+}
+
+const blockRateMinutes: BlockRate = {
+  range: asXL1BlockRange([100, 200], true),
+  span: 100,
+  rate: 5,
+  rateUnit: 'minutes',
+  timeDifference: (100 * 12) / 60,
+}
+
+const blockRateHour: BlockRate = {
+  range: asXL1BlockRange([100, 200], true),
+  span: 100,
+  rate: 7 * 60,
+  rateUnit: 'hours',
+  timeDifference: (100 * 12) / 60,
+}
+
+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

@@ -0,0 +1,20 @@
+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?.rateUnit) ? rateUnitToLabel(blockRate.rateUnit) : ''
+
+  return (
+    <FlexCol>
+      <BlockRateSpeedGaugeContainer blockRate={blockRate} {...props} />
+      <BlockRateSpeedTypography rate={blockRate?.rate} rateUnitLabel={rateUnitLabel} />
+    </FlexCol>
+  )
+}

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

@@ -0,0 +1,104 @@
+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

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

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

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

package/src/components/rate/index.ts

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,78 @@
+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

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

package/src/components/transactions/TransactionsQuickTipButton.tsx

@@ -8,11 +8,9 @@ import {
 } from '@xylabs/react-flexbox'
 import type { QuickTipButtonProps } from '@xylabs/react-quick-tip-button'
 import { QuickTipButton } from '@xylabs/react-quick-tip-button'
-import type { Hash } from '@xylabs/sdk-js'
+import { type Hash, isDefined } from '@xylabs/sdk-js'
 import type { HydratedBlockWithHashMeta } from '@xyo-network/xl1-protocol'
-import React, {
-  Fragment, useMemo, useState,
-} from 'react'
+import React, { Fragment, useState } from 'react'
 
 import { useTxsFromBlock } from '../../hooks/index.ts'
 
@@ -24,8 +22,16 @@ export const TransactionsQuickTipButton: React.FC<TransactionsQuickTipButtonQuic
   const [transactions, transactionsError] = useTxsFromBlock(block)
 
   const [copied, setCopied] = useState(false)
-  const [showError, setShowError] = useState(false)
-  useMemo(() => transactionsError ? setShowError(true) : setShowError(false), [transactionsError])
+
+  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)
@@ -49,8 +55,7 @@ export const TransactionsQuickTipButton: React.FC<TransactionsQuickTipButtonQuic
           ? null
           : (
               <FlexGrowCol gap={1} alignItems="stretch">
-                {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
-                {transactions?.map(([transaction, hash]) => (
+                {transactions?.map(([_transaction, hash]) => (
                   <Fragment key={hash}>
                     <FlexGrowRow gap={2} justifyContent="start">
                       <ContentCopyIcon sx={{ cursor: 'pointer' }} onClick={() => void onCopy(hash)} />
@@ -73,7 +78,7 @@ export const TransactionsQuickTipButton: React.FC<TransactionsQuickTipButtonQuic
               </FlexGrowCol>
             )}
       </QuickTipButton>
-      <Snackbar open={showError} onClose={() => setShowError(false)}>
+      <Snackbar open={open && closeDialog === false} onClose={() => setCloseDialog(true)}>
         <ErrorRender error={transactionsError} scope="TransactionsQuickTipButton" />
       </Snackbar>
     </>

package/src/context/analyzer/Provider.tsx

@@ -14,9 +14,9 @@ export interface ChainAnalyzersProviderProps extends PropsWithChildren {
 
 export const ChainAnalyzersProvider: React.FC<ChainAnalyzersProviderProps> = ({ analyzers: analyzersProp, children }) => {
   const [analyzersState, setAnalyzersState] = useState<ChainAnalyzers>(analyzersProp ?? {} as ChainAnalyzers)
-  const [statsUpdated, setStatsUpdated] = useState(Date.now())
+  const [statsUpdated, setStatsUpdated] = useState(1)
 
-  const analyzers = useMemo(() => ({ ...analyzersProp, ...analyzersState }), [analyzersProp])
+  const analyzers = useMemo(() => ({ ...analyzersProp, ...analyzersState }), [analyzersProp, analyzersState])
 
   const addAnalyzers: ChainAnalyzersState['addAnalyzers'] = useCallback((analyzers: ChainAnalyzersState['analyzers']) => {
     if (isUndefined(analyzers)) return

package/src/context/analyzer/state.ts

@@ -1,5 +1,5 @@
 import type { ContextExState } from '@xylabs/react-shared'
-import type { ChainAnalyzer, HydratedBlock } from '@xyo-network/xl1-protocol'
+import type { ChainAnalyzer, HydratedBlock } from '@xyo-network/xl1-sdk'
 
 export type ChainAnalyzerIds = 'producers'