@xyo-network/xl1-react-transaction 1.20.14 → 1.20.16

package/dist/browser/confirmation/hooks/useBlockRangeState.d.ts

@@ -1,9 +1,12 @@
+import type { LinearProgressProps } from '@mui/material';
 import type { BlockRange } from '@xyo-network/xl1-sdk';
-export declare const useBlockRangeState: (blockRange: BlockRange | undefined, confirmedInBlock: number | undefined, currentBlockNumber?: number | undefined) => {
+interface BlockRangeState {
     isConfirmed: boolean;
     isExpired: boolean;
     passedBlocks: number[];
-    progressColor: import("@mui/types").OverridableStringUnion<"primary" | "secondary" | "error" | "info" | "success" | "warning" | "inherit", import("@mui/material").LinearProgressPropsColorOverrides> | undefined;
+    progressColor: LinearProgressProps['color'];
     range: number[];
-};
+}
+export declare const useBlockRangeState: (blockRange: BlockRange | undefined, confirmedInBlock: number | undefined, currentBlockNumber?: number | undefined) => BlockRangeState;
+export {};
 //# sourceMappingURL=useBlockRangeState.d.ts.map

package/dist/browser/confirmation/hooks/useBlockRangeState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBlockRangeState.d.ts","sourceRoot":"","sources":["../../../../src/confirmation/hooks/useBlockRangeState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAOtD,eAAO,MAAM,kBAAkB,GAC7B,YAAY,UAAU,GAAG,SAAS,EAClC,kBAAkB,MAAM,GAAG,SAAS,EACpC,qBAAqB,MAAM,GAAG,SAAS;;;;;;CAexC,CAAA"}
+{"version":3,"file":"useBlockRangeState.d.ts","sourceRoot":"","sources":["../../../../src/confirmation/hooks/useBlockRangeState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAOtD,UAAU,eAAe;IACvB,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,aAAa,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAA;IAC3C,KAAK,EAAE,MAAM,EAAE,CAAA;CAChB;AAED,eAAO,MAAM,kBAAkB,GAC7B,YAAY,UAAU,GAAG,SAAS,EAClC,kBAAkB,MAAM,GAAG,SAAS,EACpC,qBAAqB,MAAM,GAAG,SAAS,KACtC,eAcF,CAAA"}

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/confirmation/components/TransactionStackProgress.tsx","../../src/confirmation/helpers/BlockFormatters.ts","../../src/confirmation/helpers/blockProgressColor.ts","../../src/confirmation/helpers/createFilledRange.ts","../../src/confirmation/helpers/getBlockProgress.ts","../../src/confirmation/helpers/isCurrentBlockPassedRange.ts","../../src/confirmation/helpers/passedBlocksInRange.ts","../../src/confirmation/hooks/useBlockRangeState.ts","../../src/confirmation/components/support/BlockConfirmationStats.tsx","../../src/confirmation/components/support/BlockRangeEntryStack.tsx"],"sourcesContent":["import type { StackProps } from '@mui/material'\nimport { LinearProgress, Stack } from '@mui/material'\nimport { isDefined } from '@xylabs/sdk-js'\nimport { type BlockRange } from '@xyo-network/xl1-sdk'\nimport React, {\n  useLayoutEffect,\n  useMemo,\n  useRef, useState,\n} from 'react'\n\nimport { BlockFormatters, getBlockProgress } from '../helpers/index.ts'\nimport { useBlockRangeState } from '../hooks/index.ts'\nimport { BlockConfirmationStats, BlockRangeEntryStack } from './support/index.ts'\n\nexport interface TransactionStackProgressProps extends StackProps {\n  blockRange?: BlockRange\n  confirmedInBlock?: number\n  currentBlockNumber?: number\n}\n\nexport const TransactionStackProgress: React.FC<TransactionStackProgressProps> = ({\n  blockRange, confirmedInBlock, currentBlockNumber, ...props\n}) => {\n  const blockPositionsRef = useRef<{ [blockNumber: number]: HTMLSpanElement | null }>({})\n  const updateBlockPositionRefs = (blockNumber: number, ref: HTMLSpanElement | null) => {\n    blockPositionsRef.current[blockNumber] = ref\n  }\n\n  const progressElementRef = useRef<HTMLDivElement | null>(null)\n\n  const {\n    passedBlocks, progressColor, range, isConfirmed, isExpired,\n  } = useBlockRangeState(blockRange, confirmedInBlock, currentBlockNumber)\n\n  const blockFormatters = useMemo(() => new BlockFormatters({ confirmedInBlock, currentBlockNumber }), [confirmedInBlock, currentBlockNumber])\n\n  const [progressValue, setProgressValue] = useState(0)\n\n  useLayoutEffect(() => {\n    // prevent updates if the current block is past the confirmed block\n    if (isDefined(currentBlockNumber) && isDefined(confirmedInBlock) && currentBlockNumber > confirmedInBlock) {\n      return\n    }\n    const currentBlockNumberElement = isDefined(currentBlockNumber) ? blockPositionsRef.current[currentBlockNumber] : null\n    const progressElement = progressElementRef.current\n    // since we are relying on htmlElements, we have to use layout effect\n    setProgressValue(getBlockProgress(\n      currentBlockNumber,\n      currentBlockNumberElement,\n      progressElement,\n    ))\n  }, [confirmedInBlock, currentBlockNumber])\n\n  return (\n    <Stack direction=\"row\" {...props}>\n      <Stack width=\"100%\" gap={1}>\n        <Stack>\n          <LinearProgress ref={progressElementRef} variant=\"determinate\" value={isExpired ? 100 : progressValue} color={progressColor} />\n          <Stack direction=\"row\" justifyContent=\"space-between\">\n            {range.map((block) => {\n              const blockColor = blockFormatters.color(block)\n              const blockStatus = blockFormatters.confirmationStatus(block)\n              const formattedBlockNumber = blockFormatters.formatNumber(block)\n              return (\n                <BlockRangeEntryStack\n                  key={block}\n                  block={block}\n                  blockColor={blockColor}\n                  blockStatus={blockStatus}\n                  formattedBlockNumber={formattedBlockNumber}\n                  updateBlockPositionRefs={updateBlockPositionRefs}\n                />\n              )\n            })}\n          </Stack>\n        </Stack>\n        <BlockConfirmationStats\n          confirmed={isConfirmed}\n          currentBlockColor={isDefined(currentBlockNumber) ? blockFormatters.color(currentBlockNumber) : 'text.secondary'}\n          currentBlockNumberValue={isDefined(currentBlockNumber) ? new Intl.NumberFormat().format(currentBlockNumber) : 'N/A'}\n          passedBlocks={passedBlocks}\n        />\n      </Stack>\n    </Stack>\n  )\n}\n","import { isDefined } from '@xylabs/sdk-js'\n\nexport type BlockConfirmationStatus = 'confirmed' | 'missed' | 'pending'\n\ntype BlockFormattersParams = {\n  confirmedInBlock: number | undefined\n  currentBlockNumber: number | undefined\n}\n\nexport class BlockFormatters {\n  private readonly params: BlockFormattersParams\n\n  constructor(params: BlockFormattersParams) {\n    this.params = params\n  }\n\n  color(blockNumber: number): string {\n    const { currentBlockNumber, confirmedInBlock } = this.params\n    if (blockNumber === currentBlockNumber) {\n      return isDefined(confirmedInBlock) && confirmedInBlock === blockNumber ? 'success.dark' : 'text'\n    }\n    const status = this.confirmationStatus(blockNumber)\n    switch (status) {\n      case 'confirmed': {\n        return 'success.dark'\n      }\n      case 'missed': {\n        return 'warning.light'\n      }\n      case 'pending': {\n        return 'text.secondary'\n      }\n      default: {\n        return 'text.secondary'\n      }\n    }\n  }\n\n  confirmationStatus(blockNumber: number): BlockConfirmationStatus | undefined {\n    const { currentBlockNumber, confirmedInBlock } = this.params\n    if (isDefined(currentBlockNumber)) {\n      if (isDefined(confirmedInBlock) && blockNumber === confirmedInBlock) {\n        return 'confirmed'\n      }\n      return currentBlockNumber > blockNumber ? 'missed' : 'pending'\n    }\n  }\n\n  formatNumber(blockNumber: number) {\n    return blockNumber.toString().length <= 5 ? new Intl.NumberFormat().format(blockNumber) : `${blockNumber.toString().slice(-2)}`\n  }\n}\n","import type { LinearProgressProps } from '@mui/material'\nimport { isDefined } from '@xylabs/sdk-js'\n\nexport const blockProgressColor = (\n  confirmedInBlock: number | undefined,\n  isExpired: boolean | undefined,\n): LinearProgressProps['color'] => {\n  if (isDefined(confirmedInBlock)) {\n    return 'success'\n  }\n  if (isExpired) {\n    return 'error'\n  }\n  return 'primary'\n}\n","import { isUndefined } from '@xylabs/sdk-js'\n\nexport const createFilledRange = (range?: [number, number]): number[] => {\n  if (isUndefined(range)) {\n    return []\n  }\n  const [start, end] = range\n  if (end < start) {\n    console.warn('Invalid range: end is less than start')\n    return []\n  }\n\n  const result: number[] = []\n\n  for (let i = start; i <= end; i++) {\n    result.push(i)\n  }\n\n  return result\n}\n","import { isUndefined, isUndefinedOrNull } from '@xylabs/sdk-js'\n\nexport const getBlockProgress = (\n  currentBlockNumber: number | undefined,\n  currentBlockRef: HTMLSpanElement | null,\n  progressElementRef: HTMLDivElement | null,\n) => {\n  if (isUndefined(currentBlockNumber) || isUndefinedOrNull(currentBlockRef) || isUndefinedOrNull(progressElementRef)) {\n    return 0\n  }\n\n  const currentBlockOffsetLeft = currentBlockRef.offsetLeft\n  const currentBlockOffsetWidth = currentBlockRef.clientWidth / 2\n  const currentBlockCenterOffsetLeft = currentBlockOffsetLeft + currentBlockOffsetWidth\n  const parentOffsetLeft = progressElementRef.offsetLeft\n  const parentWidth = progressElementRef.clientWidth\n\n  const relativePosition = currentBlockCenterOffsetLeft - parentOffsetLeft\n  const progress = (relativePosition / parentWidth) * 100\n\n  return Math.min(Math.max(progress, 0), 100)\n}\n","import { isDefined } from '@xylabs/sdk-js'\nimport type { BlockRange } from '@xyo-network/xl1-sdk'\n\nexport const isCurrentBlockPassedRange = (\n  blockRange: BlockRange | undefined,\n  currentBlockNumber: number | undefined,\n) => {\n  if (!isDefined(blockRange) || !isDefined(currentBlockNumber)) {\n    return false\n  }\n  const [, end] = blockRange\n  return currentBlockNumber > end\n}\n","import { isDefined } from '@xylabs/sdk-js'\n\nexport const passedBlocksInRange = (\n  range: number[] | undefined,\n  currentBlockNumber: number | undefined,\n) => {\n  if (!isDefined(currentBlockNumber) || !isDefined(range)) {\n    return []\n  }\n  const [start] = range\n  return range.filter(block => block < currentBlockNumber && block >= start)\n}\n","import { isDefined } from '@xylabs/sdk-js'\nimport type { BlockRange } from '@xyo-network/xl1-sdk'\nimport { useMemo } from 'react'\n\nimport {\n  blockProgressColor, createFilledRange, isCurrentBlockPassedRange, passedBlocksInRange,\n} from '../helpers/index.ts'\n\nexport const useBlockRangeState = (\n  blockRange: BlockRange | undefined,\n  confirmedInBlock: number | undefined,\n  currentBlockNumber?: number | undefined,\n) => {\n  const range = useMemo(() => createFilledRange((blockRange)), [blockRange])\n\n  const isExpired = useMemo(() => isCurrentBlockPassedRange(blockRange, currentBlockNumber), [blockRange, currentBlockNumber])\n\n  const passedBlocks = useMemo(() => passedBlocksInRange(range, currentBlockNumber), [currentBlockNumber, range])\n\n  const progressColor = useMemo(() => blockProgressColor(confirmedInBlock, isExpired), [confirmedInBlock, isExpired])\n\n  const isConfirmed = isDefined(confirmedInBlock)\n\n  return {\n    isConfirmed, isExpired, passedBlocks, progressColor, range,\n  }\n}\n","import { CheckCircleOutline } from '@mui/icons-material'\nimport {\n  Grow, Stack, Typography,\n} from '@mui/material'\nimport { isDefined } from '@xylabs/sdk-js'\nimport React from 'react'\n\nexport interface BlockConfirmationStatsProps {\n  confirmed?: boolean\n  currentBlockColor?: string\n  currentBlockNumberValue?: string\n  passedBlocks?: number[]\n}\n\nexport const BlockConfirmationStats: React.FC<BlockConfirmationStatsProps> = ({\n  confirmed, currentBlockColor, currentBlockNumberValue, passedBlocks,\n}) => {\n  return (\n    <Stack>\n      <Typography\n        variant=\"caption\"\n        color={currentBlockColor}\n        sx={{\n          display: 'inline-flex', alignItems: 'center', gap: 0.5,\n        }}\n      >\n        Current Block:\n        {' '}\n        {currentBlockNumberValue}\n        {' '}\n        <Grow in={confirmed}>\n          <CheckCircleOutline sx={{ width: '0.8em', height: '0.8em' }} color=\"success\" />\n        </Grow>\n      </Typography>\n      <Typography variant=\"caption\" color=\"warning.light\" sx={{ opacity: 0.75 }}>\n        Passed Blocks:\n        {' '}\n        {isDefined(passedBlocks) && passedBlocks.length > 0 ? passedBlocks.map(block => new Intl.NumberFormat().format(block)).join(', ') : 'N/A'}\n      </Typography>\n\n    </Stack>\n  )\n}\n","import type { BoxProps, StackProps } from '@mui/material'\nimport {\n  Box, Stack, styled, Tooltip, Typography,\n} from '@mui/material'\nimport React from 'react'\n\nimport type { BlockConfirmationStatus } from '../../helpers/index.ts'\n\nexport interface BlockRangeEntryStackProps extends StackProps {\n  block: number\n  blockColor: string\n  blockStatus: BlockConfirmationStatus | undefined\n  formattedBlockNumber: string\n  updateBlockPositionRefs?: (blockNumber: number, ref: HTMLSpanElement | null) => void\n}\n\nexport const BlockRangeEntryStack: React.FC<BlockRangeEntryStackProps> = ({\n  block, blockColor, blockStatus, formattedBlockNumber, updateBlockPositionRefs, sx, ...props\n}) => {\n  return (\n    <Stack\n      ref={(ref) => { if (updateBlockPositionRefs) updateBlockPositionRefs(block, ref) }}\n      key={block}\n      sx={{ position: 'relative', ...sx }}\n      {...props}\n    >\n      <Box\n        component=\"span\"\n        sx={{\n          display: 'flex', position: 'relative', width: '100%', height: 5,\n        }}\n      >\n        <StyledBlockNumberIndicator component=\"span\" sx={{ backgroundColor: blockColor }} />\n      </Box>\n      <Tooltip\n        title={`Block: ${new Intl.NumberFormat().format(block)} (${blockStatus})`}\n        placement=\"top\"\n        arrow\n      >\n        <Typography\n          variant=\"caption\"\n          sx={{\n            color: blockColor,\n            cursor: 'pointer',\n            opacity: blockStatus === 'missed' ? 0.75 : 1,\n          }}\n        >\n          {formattedBlockNumber}\n        </Typography>\n      </Tooltip>\n    </Stack>\n  )\n}\n\nconst StyledBlockNumberIndicator = styled(Box, { name: 'StyledBlockNumberIndicator' })<BoxProps>(({ theme }) => {\n  return theme.unstable_sx({\n    position: 'absolute',\n    left: 'calc(50% - 1px)',\n    transform: 'calc(translateX(-50%) - 1px)',\n    height: 3,\n    width: '1px',\n    backgroundColor: 'primary.main',\n  })\n})\n"],"mappings":"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","names":["LinearProgress","Stack","isDefined","React","useLayoutEffect","useMemo","useRef","useState","isDefined","BlockFormatters","params","color","blockNumber","currentBlockNumber","confirmedInBlock","isDefined","status","confirmationStatus","formatNumber","toString","length","Intl","NumberFormat","format","slice","isDefined","blockProgressColor","confirmedInBlock","isExpired","isDefined","isUndefined","createFilledRange","range","isUndefined","start","end","console","warn","result","i","push","isUndefined","isUndefinedOrNull","getBlockProgress","currentBlockNumber","currentBlockRef","progressElementRef","isUndefined","isUndefinedOrNull","currentBlockOffsetLeft","offsetLeft","currentBlockOffsetWidth","clientWidth","currentBlockCenterOffsetLeft","parentOffsetLeft","parentWidth","relativePosition","progress","Math","min","max","isDefined","isCurrentBlockPassedRange","blockRange","currentBlockNumber","isDefined","end","isDefined","passedBlocksInRange","range","currentBlockNumber","isDefined","start","filter","block","isDefined","useMemo","useBlockRangeState","blockRange","confirmedInBlock","currentBlockNumber","range","useMemo","createFilledRange","isExpired","isCurrentBlockPassedRange","passedBlocks","passedBlocksInRange","progressColor","blockProgressColor","isConfirmed","isDefined","CheckCircleOutline","Grow","Stack","Typography","isDefined","React","BlockConfirmationStats","confirmed","currentBlockColor","currentBlockNumberValue","passedBlocks","Stack","Typography","variant","color","sx","display","alignItems","gap","Grow","in","CheckCircleOutline","width","height","opacity","isDefined","length","map","block","Intl","NumberFormat","format","join","Box","Stack","styled","Tooltip","Typography","React","BlockRangeEntryStack","block","blockColor","blockStatus","formattedBlockNumber","updateBlockPositionRefs","sx","props","React","Stack","ref","key","position","Box","component","display","width","height","StyledBlockNumberIndicator","backgroundColor","Tooltip","title","Intl","NumberFormat","format","placement","arrow","Typography","variant","color","cursor","opacity","styled","name","theme","unstable_sx","left","transform","TransactionStackProgress","blockRange","confirmedInBlock","currentBlockNumber","props","blockPositionsRef","useRef","updateBlockPositionRefs","blockNumber","ref","current","progressElementRef","passedBlocks","progressColor","range","isConfirmed","isExpired","useBlockRangeState","blockFormatters","useMemo","BlockFormatters","progressValue","setProgressValue","useState","useLayoutEffect","isDefined","currentBlockNumberElement","progressElement","getBlockProgress","React","Stack","direction","width","gap","LinearProgress","variant","value","color","justifyContent","map","block","blockColor","blockStatus","confirmationStatus","formattedBlockNumber","formatNumber","BlockRangeEntryStack","key","BlockConfirmationStats","confirmed","currentBlockColor","currentBlockNumberValue","Intl","NumberFormat","format"]}
+{"version":3,"sources":["../../src/confirmation/components/TransactionStackProgress.tsx","../../src/confirmation/helpers/BlockFormatters.ts","../../src/confirmation/helpers/blockProgressColor.ts","../../src/confirmation/helpers/createFilledRange.ts","../../src/confirmation/helpers/getBlockProgress.ts","../../src/confirmation/helpers/isCurrentBlockPassedRange.ts","../../src/confirmation/helpers/passedBlocksInRange.ts","../../src/confirmation/hooks/useBlockRangeState.ts","../../src/confirmation/components/support/BlockConfirmationStats.tsx","../../src/confirmation/components/support/BlockRangeEntryStack.tsx"],"sourcesContent":["import type { StackProps } from '@mui/material'\nimport { LinearProgress, Stack } from '@mui/material'\nimport { isDefined } from '@xylabs/sdk-js'\nimport { type BlockRange } from '@xyo-network/xl1-sdk'\nimport React, {\n  useLayoutEffect,\n  useMemo,\n  useRef, useState,\n} from 'react'\n\nimport { BlockFormatters, getBlockProgress } from '../helpers/index.ts'\nimport { useBlockRangeState } from '../hooks/index.ts'\nimport { BlockConfirmationStats, BlockRangeEntryStack } from './support/index.ts'\n\nexport interface TransactionStackProgressProps extends StackProps {\n  blockRange?: BlockRange\n  confirmedInBlock?: number\n  currentBlockNumber?: number\n}\n\nexport const TransactionStackProgress: React.FC<TransactionStackProgressProps> = ({\n  blockRange, confirmedInBlock, currentBlockNumber, ...props\n}) => {\n  const blockPositionsRef = useRef<{ [blockNumber: number]: HTMLSpanElement | null }>({})\n  const updateBlockPositionRefs = (blockNumber: number, ref: HTMLSpanElement | null) => {\n    blockPositionsRef.current[blockNumber] = ref\n  }\n\n  const progressElementRef = useRef<HTMLDivElement | null>(null)\n\n  const {\n    passedBlocks, progressColor, range, isConfirmed, isExpired,\n  } = useBlockRangeState(blockRange, confirmedInBlock, currentBlockNumber)\n\n  const blockFormatters = useMemo(() => new BlockFormatters({ confirmedInBlock, currentBlockNumber }), [confirmedInBlock, currentBlockNumber])\n\n  const [progressValue, setProgressValue] = useState(0)\n\n  useLayoutEffect(() => {\n    // prevent updates if the current block is past the confirmed block\n    if (isDefined(currentBlockNumber) && isDefined(confirmedInBlock) && currentBlockNumber > confirmedInBlock) {\n      return\n    }\n    const currentBlockNumberElement = isDefined(currentBlockNumber) ? blockPositionsRef.current[currentBlockNumber] : null\n    const progressElement = progressElementRef.current\n    // since we are relying on htmlElements, we have to use layout effect\n    setProgressValue(getBlockProgress(\n      currentBlockNumber,\n      currentBlockNumberElement,\n      progressElement,\n    ))\n  }, [confirmedInBlock, currentBlockNumber])\n\n  return (\n    <Stack direction=\"row\" {...props}>\n      <Stack width=\"100%\" gap={1}>\n        <Stack>\n          <LinearProgress ref={progressElementRef} variant=\"determinate\" value={isExpired ? 100 : progressValue} color={progressColor} />\n          <Stack direction=\"row\" justifyContent=\"space-between\">\n            {range.map((block) => {\n              const blockColor = blockFormatters.color(block)\n              const blockStatus = blockFormatters.confirmationStatus(block)\n              const formattedBlockNumber = blockFormatters.formatNumber(block)\n              return (\n                <BlockRangeEntryStack\n                  key={block}\n                  block={block}\n                  blockColor={blockColor}\n                  blockStatus={blockStatus}\n                  formattedBlockNumber={formattedBlockNumber}\n                  updateBlockPositionRefs={updateBlockPositionRefs}\n                />\n              )\n            })}\n          </Stack>\n        </Stack>\n        <BlockConfirmationStats\n          confirmed={isConfirmed}\n          currentBlockColor={isDefined(currentBlockNumber) ? blockFormatters.color(currentBlockNumber) : 'text.secondary'}\n          currentBlockNumberValue={isDefined(currentBlockNumber) ? new Intl.NumberFormat().format(currentBlockNumber) : 'N/A'}\n          passedBlocks={passedBlocks}\n        />\n      </Stack>\n    </Stack>\n  )\n}\n","import { isDefined } from '@xylabs/sdk-js'\n\nexport type BlockConfirmationStatus = 'confirmed' | 'missed' | 'pending'\n\ntype BlockFormattersParams = {\n  confirmedInBlock: number | undefined\n  currentBlockNumber: number | undefined\n}\n\nexport class BlockFormatters {\n  private readonly params: BlockFormattersParams\n\n  constructor(params: BlockFormattersParams) {\n    this.params = params\n  }\n\n  color(blockNumber: number): string {\n    const { currentBlockNumber, confirmedInBlock } = this.params\n    if (blockNumber === currentBlockNumber) {\n      return isDefined(confirmedInBlock) && confirmedInBlock === blockNumber ? 'success.dark' : 'text'\n    }\n    const status = this.confirmationStatus(blockNumber)\n    switch (status) {\n      case 'confirmed': {\n        return 'success.dark'\n      }\n      case 'missed': {\n        return 'warning.light'\n      }\n      case 'pending': {\n        return 'text.secondary'\n      }\n      default: {\n        return 'text.secondary'\n      }\n    }\n  }\n\n  confirmationStatus(blockNumber: number): BlockConfirmationStatus | undefined {\n    const { currentBlockNumber, confirmedInBlock } = this.params\n    if (isDefined(currentBlockNumber)) {\n      if (isDefined(confirmedInBlock) && blockNumber === confirmedInBlock) {\n        return 'confirmed'\n      }\n      return currentBlockNumber > blockNumber ? 'missed' : 'pending'\n    }\n  }\n\n  formatNumber(blockNumber: number) {\n    return blockNumber.toString().length <= 5 ? new Intl.NumberFormat().format(blockNumber) : `${blockNumber.toString().slice(-2)}`\n  }\n}\n","import type { LinearProgressProps } from '@mui/material'\nimport { isDefined } from '@xylabs/sdk-js'\n\nexport const blockProgressColor = (\n  confirmedInBlock: number | undefined,\n  isExpired: boolean | undefined,\n): LinearProgressProps['color'] => {\n  if (isDefined(confirmedInBlock)) {\n    return 'success'\n  }\n  if (isExpired) {\n    return 'error'\n  }\n  return 'primary'\n}\n","import { isUndefined } from '@xylabs/sdk-js'\n\nexport const createFilledRange = (range?: [number, number]): number[] => {\n  if (isUndefined(range)) {\n    return []\n  }\n  const [start, end] = range\n  if (end < start) {\n    console.warn('Invalid range: end is less than start')\n    return []\n  }\n\n  const result: number[] = []\n\n  for (let i = start; i <= end; i++) {\n    result.push(i)\n  }\n\n  return result\n}\n","import { isUndefined, isUndefinedOrNull } from '@xylabs/sdk-js'\n\nexport const getBlockProgress = (\n  currentBlockNumber: number | undefined,\n  currentBlockRef: HTMLSpanElement | null,\n  progressElementRef: HTMLDivElement | null,\n) => {\n  if (isUndefined(currentBlockNumber) || isUndefinedOrNull(currentBlockRef) || isUndefinedOrNull(progressElementRef)) {\n    return 0\n  }\n\n  const currentBlockOffsetLeft = currentBlockRef.offsetLeft\n  const currentBlockOffsetWidth = currentBlockRef.clientWidth / 2\n  const currentBlockCenterOffsetLeft = currentBlockOffsetLeft + currentBlockOffsetWidth\n  const parentOffsetLeft = progressElementRef.offsetLeft\n  const parentWidth = progressElementRef.clientWidth\n\n  const relativePosition = currentBlockCenterOffsetLeft - parentOffsetLeft\n  const progress = (relativePosition / parentWidth) * 100\n\n  return Math.min(Math.max(progress, 0), 100)\n}\n","import { isDefined } from '@xylabs/sdk-js'\nimport type { BlockRange } from '@xyo-network/xl1-sdk'\n\nexport const isCurrentBlockPassedRange = (\n  blockRange: BlockRange | undefined,\n  currentBlockNumber: number | undefined,\n) => {\n  if (!isDefined(blockRange) || !isDefined(currentBlockNumber)) {\n    return false\n  }\n  const [, end] = blockRange\n  return currentBlockNumber > end\n}\n","import { isDefined } from '@xylabs/sdk-js'\n\nexport const passedBlocksInRange = (\n  range: number[] | undefined,\n  currentBlockNumber: number | undefined,\n) => {\n  if (!isDefined(currentBlockNumber) || !isDefined(range)) {\n    return []\n  }\n  const [start] = range\n  return range.filter(block => block < currentBlockNumber && block >= start)\n}\n","import type { LinearProgressProps } from '@mui/material'\nimport { isDefined } from '@xylabs/sdk-js'\nimport type { BlockRange } from '@xyo-network/xl1-sdk'\nimport { useMemo } from 'react'\n\nimport {\n  blockProgressColor, createFilledRange, isCurrentBlockPassedRange, passedBlocksInRange,\n} from '../helpers/index.ts'\n\ninterface BlockRangeState {\n  isConfirmed: boolean\n  isExpired: boolean\n  passedBlocks: number[]\n  progressColor: LinearProgressProps['color']\n  range: number[]\n}\n\nexport const useBlockRangeState = (\n  blockRange: BlockRange | undefined,\n  confirmedInBlock: number | undefined,\n  currentBlockNumber?: number | undefined,\n): BlockRangeState => {\n  const range = useMemo(() => createFilledRange((blockRange)), [blockRange])\n\n  const isExpired = useMemo(() => isCurrentBlockPassedRange(blockRange, currentBlockNumber), [blockRange, currentBlockNumber])\n\n  const passedBlocks = useMemo(() => passedBlocksInRange(range, currentBlockNumber), [currentBlockNumber, range])\n\n  const progressColor = useMemo(() => blockProgressColor(confirmedInBlock, isExpired), [confirmedInBlock, isExpired])\n\n  const isConfirmed = isDefined(confirmedInBlock)\n\n  return {\n    isConfirmed, isExpired, passedBlocks, progressColor, range,\n  }\n}\n","import { CheckCircleOutline } from '@mui/icons-material'\nimport {\n  Grow, Stack, Typography,\n} from '@mui/material'\nimport { isDefined } from '@xylabs/sdk-js'\nimport React from 'react'\n\nexport interface BlockConfirmationStatsProps {\n  confirmed?: boolean\n  currentBlockColor?: string\n  currentBlockNumberValue?: string\n  passedBlocks?: number[]\n}\n\nexport const BlockConfirmationStats: React.FC<BlockConfirmationStatsProps> = ({\n  confirmed, currentBlockColor, currentBlockNumberValue, passedBlocks,\n}) => {\n  return (\n    <Stack>\n      <Typography\n        variant=\"caption\"\n        color={currentBlockColor}\n        sx={{\n          display: 'inline-flex', alignItems: 'center', gap: 0.5,\n        }}\n      >\n        Current Block:\n        {' '}\n        {currentBlockNumberValue}\n        {' '}\n        <Grow in={confirmed}>\n          <CheckCircleOutline sx={{ width: '0.8em', height: '0.8em' }} color=\"success\" />\n        </Grow>\n      </Typography>\n      <Typography variant=\"caption\" color=\"warning.light\" sx={{ opacity: 0.75 }}>\n        Passed Blocks:\n        {' '}\n        {isDefined(passedBlocks) && passedBlocks.length > 0 ? passedBlocks.map(block => new Intl.NumberFormat().format(block)).join(', ') : 'N/A'}\n      </Typography>\n\n    </Stack>\n  )\n}\n","import type { BoxProps, StackProps } from '@mui/material'\nimport {\n  Box, Stack, styled, Tooltip, Typography,\n} from '@mui/material'\nimport React from 'react'\n\nimport type { BlockConfirmationStatus } from '../../helpers/index.ts'\n\nexport interface BlockRangeEntryStackProps extends StackProps {\n  block: number\n  blockColor: string\n  blockStatus: BlockConfirmationStatus | undefined\n  formattedBlockNumber: string\n  updateBlockPositionRefs?: (blockNumber: number, ref: HTMLSpanElement | null) => void\n}\n\nexport const BlockRangeEntryStack: React.FC<BlockRangeEntryStackProps> = ({\n  block, blockColor, blockStatus, formattedBlockNumber, updateBlockPositionRefs, sx, ...props\n}) => {\n  return (\n    <Stack\n      ref={(ref) => { if (updateBlockPositionRefs) updateBlockPositionRefs(block, ref) }}\n      key={block}\n      sx={{ position: 'relative', ...sx }}\n      {...props}\n    >\n      <Box\n        component=\"span\"\n        sx={{\n          display: 'flex', position: 'relative', width: '100%', height: 5,\n        }}\n      >\n        <StyledBlockNumberIndicator component=\"span\" sx={{ backgroundColor: blockColor }} />\n      </Box>\n      <Tooltip\n        title={`Block: ${new Intl.NumberFormat().format(block)} (${blockStatus})`}\n        placement=\"top\"\n        arrow\n      >\n        <Typography\n          variant=\"caption\"\n          sx={{\n            color: blockColor,\n            cursor: 'pointer',\n            opacity: blockStatus === 'missed' ? 0.75 : 1,\n          }}\n        >\n          {formattedBlockNumber}\n        </Typography>\n      </Tooltip>\n    </Stack>\n  )\n}\n\nconst StyledBlockNumberIndicator = styled(Box, { name: 'StyledBlockNumberIndicator' })<BoxProps>(({ theme }) => {\n  return theme.unstable_sx({\n    position: 'absolute',\n    left: 'calc(50% - 1px)',\n    transform: 'calc(translateX(-50%) - 1px)',\n    height: 3,\n    width: '1px',\n    backgroundColor: 'primary.main',\n  })\n})\n"],"mappings":"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","names":["LinearProgress","Stack","isDefined","React","useLayoutEffect","useMemo","useRef","useState","isDefined","BlockFormatters","params","color","blockNumber","currentBlockNumber","confirmedInBlock","isDefined","status","confirmationStatus","formatNumber","toString","length","Intl","NumberFormat","format","slice","isDefined","blockProgressColor","confirmedInBlock","isExpired","isDefined","isUndefined","createFilledRange","range","isUndefined","start","end","console","warn","result","i","push","isUndefined","isUndefinedOrNull","getBlockProgress","currentBlockNumber","currentBlockRef","progressElementRef","isUndefined","isUndefinedOrNull","currentBlockOffsetLeft","offsetLeft","currentBlockOffsetWidth","clientWidth","currentBlockCenterOffsetLeft","parentOffsetLeft","parentWidth","relativePosition","progress","Math","min","max","isDefined","isCurrentBlockPassedRange","blockRange","currentBlockNumber","isDefined","end","isDefined","passedBlocksInRange","range","currentBlockNumber","isDefined","start","filter","block","isDefined","useMemo","useBlockRangeState","blockRange","confirmedInBlock","currentBlockNumber","range","useMemo","createFilledRange","isExpired","isCurrentBlockPassedRange","passedBlocks","passedBlocksInRange","progressColor","blockProgressColor","isConfirmed","isDefined","CheckCircleOutline","Grow","Stack","Typography","isDefined","React","BlockConfirmationStats","confirmed","currentBlockColor","currentBlockNumberValue","passedBlocks","Stack","Typography","variant","color","sx","display","alignItems","gap","Grow","in","CheckCircleOutline","width","height","opacity","isDefined","length","map","block","Intl","NumberFormat","format","join","Box","Stack","styled","Tooltip","Typography","React","BlockRangeEntryStack","block","blockColor","blockStatus","formattedBlockNumber","updateBlockPositionRefs","sx","props","React","Stack","ref","key","position","Box","component","display","width","height","StyledBlockNumberIndicator","backgroundColor","Tooltip","title","Intl","NumberFormat","format","placement","arrow","Typography","variant","color","cursor","opacity","styled","name","theme","unstable_sx","left","transform","TransactionStackProgress","blockRange","confirmedInBlock","currentBlockNumber","props","blockPositionsRef","useRef","updateBlockPositionRefs","blockNumber","ref","current","progressElementRef","passedBlocks","progressColor","range","isConfirmed","isExpired","useBlockRangeState","blockFormatters","useMemo","BlockFormatters","progressValue","setProgressValue","useState","useLayoutEffect","isDefined","currentBlockNumberElement","progressElement","getBlockProgress","React","Stack","direction","width","gap","LinearProgress","variant","value","color","justifyContent","map","block","blockColor","blockStatus","confirmationStatus","formattedBlockNumber","formatNumber","BlockRangeEntryStack","key","BlockConfirmationStats","confirmed","currentBlockColor","currentBlockNumberValue","Intl","NumberFormat","format"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/xl1-react-transaction",
-  "version": "1.20.14",
+  "version": "1.20.16",
   "description": "XYO Layer One API",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -25,70 +25,115 @@
       "types": "./dist/browser/index.d.ts",
       "browser": {
         "types": "./dist/browser/index.d.ts",
-        "source": "./src/index.ts",
         "default": "./dist/browser/index.mjs"
       },
-      "source": "./src/index.ts",
       "default": "./dist/browser/index.mjs"
     },
     "./package.json": "./package.json"
   },
   "module": "./dist/browser/index.mjs",
-  "source": "./src/index.ts",
   "types": "./dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src",
     "!**/*.bench.*",
     "!**/*.spec.*",
-    "!**/*.test.*"
+    "!**/*.test.*",
+    "README.md"
   ],
+  "dependencies": {
+    "@mui/icons-material": "^7",
+    "@xyo-network/xl1-sdk": "^1.26.19"
+  },
   "devDependencies": {
     "@emotion/react": "~11.14.0",
     "@emotion/styled": "~11.14.1",
-    "@mui/icons-material": "^7.3.9",
     "@mui/material": "^7.3.9",
-    "@storybook/react-vite": "^10.3.3",
+    "@opentelemetry/api": "^1",
+    "@storybook/react-vite": "^10.3.5",
+    "@types/node": "^25.5.2",
     "@types/react": "~19.2.14",
-    "@xylabs/sdk-js": "~5.0.90",
-    "@xylabs/ts-scripts-common": "~7.5.11",
-    "@xylabs/ts-scripts-yarn3": "~7.5.11",
-    "@xylabs/tsconfig": "~7.5.11",
-    "@xylabs/tsconfig-dom": "~7.5.11",
-    "@xylabs/tsconfig-react": "~7.5.11",
-    "@xyo-network/sdk-js": "~5.3.20",
-    "@xyo-network/xl1-sdk": "~1.26.11",
-    "axios": "^1.13.6",
-    "dotenv": "~17.3.1",
+    "@xylabs/sdk-js": "~5.0.95",
+    "@xylabs/ts-scripts-common": "~7.9.3",
+    "@xylabs/ts-scripts-pnpm": "~7.9.3",
+    "@xylabs/tsconfig": "~7.9.3",
+    "@xylabs/tsconfig-dom": "~7.9.3",
+    "@xylabs/tsconfig-react": "~7.9.3",
+    "@xyo-network/account": "~5.3.30",
+    "@xyo-network/account-model": "~5.3.30",
+    "@xyo-network/api-models": "~5.3.30",
+    "@xyo-network/archivist-abstract": "~5.3.30",
+    "@xyo-network/archivist-generic": "~5.3.30",
+    "@xyo-network/archivist-memory": "~5.3.30",
+    "@xyo-network/archivist-model": "~5.3.30",
+    "@xyo-network/archivist-view": "~5.3.30",
+    "@xyo-network/archivist-wrapper": "~5.3",
+    "@xyo-network/boundwitness-builder": "~5.3.30",
+    "@xyo-network/boundwitness-validator": "~5.3.30",
+    "@xyo-network/bridge-abstract": "~5.3.30",
+    "@xyo-network/bridge-model": "~5.3.30",
+    "@xyo-network/config-payload-plugin": "~5.3.30",
+    "@xyo-network/data": "~5.3.30",
+    "@xyo-network/diviner-abstract": "~5.3",
+    "@xyo-network/diviner-boundwitness-memory": "~5.3.30",
+    "@xyo-network/diviner-identity": "~5.3.30",
+    "@xyo-network/diviner-model": "~5.3.30",
+    "@xyo-network/diviner-payload-generic": "~5.3.30",
+    "@xyo-network/diviner-payload-model": "~5.3.30",
+    "@xyo-network/diviner-wrapper": "~5.3",
+    "@xyo-network/dns": "~5.3.30",
+    "@xyo-network/domain-payload-plugin": "~5.3.30",
+    "@xyo-network/elliptic": "~5.3.30",
+    "@xyo-network/hash": "~5.3.30",
+    "@xyo-network/huri": "~5.3.30",
+    "@xyo-network/manifest-model": "~5.3.30",
+    "@xyo-network/module-abstract": "~5.3.30",
+    "@xyo-network/module-model": "~5.3.30",
+    "@xyo-network/module-resolver": "~5.3.30",
+    "@xyo-network/module-wrapper": "~5.3",
+    "@xyo-network/network": "~5.3.30",
+    "@xyo-network/node-abstract": "~5.3.30",
+    "@xyo-network/node-memory": "~5.3.30",
+    "@xyo-network/node-model": "~5.3.30",
+    "@xyo-network/node-view": "~5.3.30",
+    "@xyo-network/node-wrapper": "~5.3",
+    "@xyo-network/payload-builder": "~5.3.30",
+    "@xyo-network/payload-model": "~5.3.30",
+    "@xyo-network/payload-validator": "~5.3.30",
+    "@xyo-network/previous-hash-store-model": "~5.3.30",
+    "@xyo-network/sdk-js": "~5.3.30",
+    "@xyo-network/sentinel-abstract": "~5.3.30",
+    "@xyo-network/sentinel-memory": "~5.3.30",
+    "@xyo-network/sentinel-model": "~5.3.30",
+    "@xyo-network/wallet-model": "~5.3.30",
+    "@xyo-network/wasm": "~5.3.30",
+    "@xyo-network/witness-adhoc": "~5.3.30",
+    "@xyo-network/witness-model": "~5.3.30",
+    "ajv": "^8",
+    "axios": "^1.14.0",
+    "dotenv": "~17.4.1",
+    "esbuild": "*",
     "ethers": "^6.16.0",
+    "pako": "~2.1.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "storybook": "^10.3.3",
+    "storybook": "^10.3.5",
     "typescript": "~5.9.3",
-    "vite": "^8.0.3",
-    "vitest": "^4.1.2",
+    "vite": "^8.0.7",
+    "vitest": "^4.1.3",
     "zod": "^4.3.6"
   },
   "peerDependencies": {
-    "@mui/icons-material": "^7",
-    "@mui/material": "^7",
-    "@xylabs/sdk-js": "^5",
-    "@xyo-network/sdk-js": "^5",
-    "@xyo-network/xl1-sdk": "^1",
-    "axios": "^1",
-    "react": "^19",
-    "react-dom": "^19",
-    "zod": "^4"
+    "@mui/material": "^7.3.9",
+    "@xylabs/sdk-js": "~5.0.93",
+    "react": "^19.2.4"
   },
-  "packageManager": "yarn@4.6.0",
   "engines": {
-    "node": ">=22"
+    "node": ">=24"
   },
   "volta": {
-    "node": "22.5.1",
-    "yarn": "4.6.0"
+    "node": ">=24"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/confirmation/components/TransactionStackProgress.stories.tsx

@@ -1,56 +0,0 @@
-import type { StoryFn } from '@storybook/react-vite'
-import { isUndefined } from '@xylabs/sdk-js'
-import { asBlockRange } from '@xyo-network/xl1-sdk'
-import React, { useEffect, useState } from 'react'
-
-import { TransactionStackProgress } from './TransactionStackProgress.tsx'
-
-export default {
-  title: 'transaction/stack/progress',
-  component: TransactionStackProgress,
-}
-
-const START_BLOCK = 100_001
-const END_BLOCK = 100_010
-
-const Template: StoryFn<typeof TransactionStackProgress> = args => <TransactionStackProgress {...args} />
-const TemplateWithChangingValues: StoryFn<typeof TransactionStackProgress> = (args) => {
-  const [currentBlockNumber, setCurrentBlockNumber] = useState<number>()
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentBlockNumber((prev) => {
-        if (isUndefined(prev)) {
-          return START_BLOCK
-        }
-        if (prev >= END_BLOCK + 2) {
-          return START_BLOCK
-        }
-        return prev + 1
-      })
-    }, 1000)
-    return () => clearInterval(interval)
-  }, [])
-  return <TransactionStackProgress currentBlockNumber={currentBlockNumber} {...args} />
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithValues = Template.bind({})
-WithValues.args = { currentBlockNumber: 100_003, blockRange: asBlockRange([START_BLOCK, END_BLOCK]) }
-
-const WithConfirmed = Template.bind({})
-WithConfirmed.args = {
-  currentBlockNumber: 100_004, blockRange: asBlockRange([START_BLOCK, END_BLOCK]), confirmedInBlock: 100_004,
-}
-
-const WithExpired = Template.bind({})
-WithExpired.args = { currentBlockNumber: END_BLOCK + 2, blockRange: asBlockRange([START_BLOCK, END_BLOCK]) }
-
-const WithChangingValues = TemplateWithChangingValues.bind({})
-WithChangingValues.args = { blockRange: asBlockRange([START_BLOCK, END_BLOCK]) }
-
-export {
-  Default, WithChangingValues, WithConfirmed, WithExpired,
-  WithValues,
-}

package/src/confirmation/components/TransactionStackProgress.tsx

@@ -1,86 +0,0 @@
-import type { StackProps } from '@mui/material'
-import { LinearProgress, Stack } from '@mui/material'
-import { isDefined } from '@xylabs/sdk-js'
-import { type BlockRange } from '@xyo-network/xl1-sdk'
-import React, {
-  useLayoutEffect,
-  useMemo,
-  useRef, useState,
-} from 'react'
-
-import { BlockFormatters, getBlockProgress } from '../helpers/index.ts'
-import { useBlockRangeState } from '../hooks/index.ts'
-import { BlockConfirmationStats, BlockRangeEntryStack } from './support/index.ts'
-
-export interface TransactionStackProgressProps extends StackProps {
-  blockRange?: BlockRange
-  confirmedInBlock?: number
-  currentBlockNumber?: number
-}
-
-export const TransactionStackProgress: React.FC<TransactionStackProgressProps> = ({
-  blockRange, confirmedInBlock, currentBlockNumber, ...props
-}) => {
-  const blockPositionsRef = useRef<{ [blockNumber: number]: HTMLSpanElement | null }>({})
-  const updateBlockPositionRefs = (blockNumber: number, ref: HTMLSpanElement | null) => {
-    blockPositionsRef.current[blockNumber] = ref
-  }
-
-  const progressElementRef = useRef<HTMLDivElement | null>(null)
-
-  const {
-    passedBlocks, progressColor, range, isConfirmed, isExpired,
-  } = useBlockRangeState(blockRange, confirmedInBlock, currentBlockNumber)
-
-  const blockFormatters = useMemo(() => new BlockFormatters({ confirmedInBlock, currentBlockNumber }), [confirmedInBlock, currentBlockNumber])
-
-  const [progressValue, setProgressValue] = useState(0)
-
-  useLayoutEffect(() => {
-    // prevent updates if the current block is past the confirmed block
-    if (isDefined(currentBlockNumber) && isDefined(confirmedInBlock) && currentBlockNumber > confirmedInBlock) {
-      return
-    }
-    const currentBlockNumberElement = isDefined(currentBlockNumber) ? blockPositionsRef.current[currentBlockNumber] : null
-    const progressElement = progressElementRef.current
-    // since we are relying on htmlElements, we have to use layout effect
-    setProgressValue(getBlockProgress(
-      currentBlockNumber,
-      currentBlockNumberElement,
-      progressElement,
-    ))
-  }, [confirmedInBlock, currentBlockNumber])
-
-  return (
-    <Stack direction="row" {...props}>
-      <Stack width="100%" gap={1}>
-        <Stack>
-          <LinearProgress ref={progressElementRef} variant="determinate" value={isExpired ? 100 : progressValue} color={progressColor} />
-          <Stack direction="row" justifyContent="space-between">
-            {range.map((block) => {
-              const blockColor = blockFormatters.color(block)
-              const blockStatus = blockFormatters.confirmationStatus(block)
-              const formattedBlockNumber = blockFormatters.formatNumber(block)
-              return (
-                <BlockRangeEntryStack
-                  key={block}
-                  block={block}
-                  blockColor={blockColor}
-                  blockStatus={blockStatus}
-                  formattedBlockNumber={formattedBlockNumber}
-                  updateBlockPositionRefs={updateBlockPositionRefs}
-                />
-              )
-            })}
-          </Stack>
-        </Stack>
-        <BlockConfirmationStats
-          confirmed={isConfirmed}
-          currentBlockColor={isDefined(currentBlockNumber) ? blockFormatters.color(currentBlockNumber) : 'text.secondary'}
-          currentBlockNumberValue={isDefined(currentBlockNumber) ? new Intl.NumberFormat().format(currentBlockNumber) : 'N/A'}
-          passedBlocks={passedBlocks}
-        />
-      </Stack>
-    </Stack>
-  )
-}

package/src/confirmation/components/index.ts

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

package/src/confirmation/components/support/BlockConfirmationStats.tsx

@@ -1,43 +0,0 @@
-import { CheckCircleOutline } from '@mui/icons-material'
-import {
-  Grow, Stack, Typography,
-} from '@mui/material'
-import { isDefined } from '@xylabs/sdk-js'
-import React from 'react'
-
-export interface BlockConfirmationStatsProps {
-  confirmed?: boolean
-  currentBlockColor?: string
-  currentBlockNumberValue?: string
-  passedBlocks?: number[]
-}
-
-export const BlockConfirmationStats: React.FC<BlockConfirmationStatsProps> = ({
-  confirmed, currentBlockColor, currentBlockNumberValue, passedBlocks,
-}) => {
-  return (
-    <Stack>
-      <Typography
-        variant="caption"
-        color={currentBlockColor}
-        sx={{
-          display: 'inline-flex', alignItems: 'center', gap: 0.5,
-        }}
-      >
-        Current Block:
-        {' '}
-        {currentBlockNumberValue}
-        {' '}
-        <Grow in={confirmed}>
-          <CheckCircleOutline sx={{ width: '0.8em', height: '0.8em' }} color="success" />
-        </Grow>
-      </Typography>
-      <Typography variant="caption" color="warning.light" sx={{ opacity: 0.75 }}>
-        Passed Blocks:
-        {' '}
-        {isDefined(passedBlocks) && passedBlocks.length > 0 ? passedBlocks.map(block => new Intl.NumberFormat().format(block)).join(', ') : 'N/A'}
-      </Typography>
-
-    </Stack>
-  )
-}

package/src/confirmation/components/support/BlockRangeEntryStack.tsx

@@ -1,64 +0,0 @@
-import type { BoxProps, StackProps } from '@mui/material'
-import {
-  Box, Stack, styled, Tooltip, Typography,
-} from '@mui/material'
-import React from 'react'
-
-import type { BlockConfirmationStatus } from '../../helpers/index.ts'
-
-export interface BlockRangeEntryStackProps extends StackProps {
-  block: number
-  blockColor: string
-  blockStatus: BlockConfirmationStatus | undefined
-  formattedBlockNumber: string
-  updateBlockPositionRefs?: (blockNumber: number, ref: HTMLSpanElement | null) => void
-}
-
-export const BlockRangeEntryStack: React.FC<BlockRangeEntryStackProps> = ({
-  block, blockColor, blockStatus, formattedBlockNumber, updateBlockPositionRefs, sx, ...props
-}) => {
-  return (
-    <Stack
-      ref={(ref) => { if (updateBlockPositionRefs) updateBlockPositionRefs(block, ref) }}
-      key={block}
-      sx={{ position: 'relative', ...sx }}
-      {...props}
-    >
-      <Box
-        component="span"
-        sx={{
-          display: 'flex', position: 'relative', width: '100%', height: 5,
-        }}
-      >
-        <StyledBlockNumberIndicator component="span" sx={{ backgroundColor: blockColor }} />
-      </Box>
-      <Tooltip
-        title={`Block: ${new Intl.NumberFormat().format(block)} (${blockStatus})`}
-        placement="top"
-        arrow
-      >
-        <Typography
-          variant="caption"
-          sx={{
-            color: blockColor,
-            cursor: 'pointer',
-            opacity: blockStatus === 'missed' ? 0.75 : 1,
-          }}
-        >
-          {formattedBlockNumber}
-        </Typography>
-      </Tooltip>
-    </Stack>
-  )
-}
-
-const StyledBlockNumberIndicator = styled(Box, { name: 'StyledBlockNumberIndicator' })<BoxProps>(({ theme }) => {
-  return theme.unstable_sx({
-    position: 'absolute',
-    left: 'calc(50% - 1px)',
-    transform: 'calc(translateX(-50%) - 1px)',
-    height: 3,
-    width: '1px',
-    backgroundColor: 'primary.main',
-  })
-})

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

@@ -1,2 +0,0 @@
-export * from './BlockConfirmationStats.tsx'
-export * from './BlockRangeEntryStack.tsx'

package/src/confirmation/helpers/BlockFormatters.ts

@@ -1,52 +0,0 @@
-import { isDefined } from '@xylabs/sdk-js'
-
-export type BlockConfirmationStatus = 'confirmed' | 'missed' | 'pending'
-
-type BlockFormattersParams = {
-  confirmedInBlock: number | undefined
-  currentBlockNumber: number | undefined
-}
-
-export class BlockFormatters {
-  private readonly params: BlockFormattersParams
-
-  constructor(params: BlockFormattersParams) {
-    this.params = params
-  }
-
-  color(blockNumber: number): string {
-    const { currentBlockNumber, confirmedInBlock } = this.params
-    if (blockNumber === currentBlockNumber) {
-      return isDefined(confirmedInBlock) && confirmedInBlock === blockNumber ? 'success.dark' : 'text'
-    }
-    const status = this.confirmationStatus(blockNumber)
-    switch (status) {
-      case 'confirmed': {
-        return 'success.dark'
-      }
-      case 'missed': {
-        return 'warning.light'
-      }
-      case 'pending': {
-        return 'text.secondary'
-      }
-      default: {
-        return 'text.secondary'
-      }
-    }
-  }
-
-  confirmationStatus(blockNumber: number): BlockConfirmationStatus | undefined {
-    const { currentBlockNumber, confirmedInBlock } = this.params
-    if (isDefined(currentBlockNumber)) {
-      if (isDefined(confirmedInBlock) && blockNumber === confirmedInBlock) {
-        return 'confirmed'
-      }
-      return currentBlockNumber > blockNumber ? 'missed' : 'pending'
-    }
-  }
-
-  formatNumber(blockNumber: number) {
-    return blockNumber.toString().length <= 5 ? new Intl.NumberFormat().format(blockNumber) : `${blockNumber.toString().slice(-2)}`
-  }
-}

package/src/confirmation/helpers/blockProgressColor.ts

@@ -1,15 +0,0 @@
-import type { LinearProgressProps } from '@mui/material'
-import { isDefined } from '@xylabs/sdk-js'
-
-export const blockProgressColor = (
-  confirmedInBlock: number | undefined,
-  isExpired: boolean | undefined,
-): LinearProgressProps['color'] => {
-  if (isDefined(confirmedInBlock)) {
-    return 'success'
-  }
-  if (isExpired) {
-    return 'error'
-  }
-  return 'primary'
-}

package/src/confirmation/helpers/createFilledRange.ts

@@ -1,20 +0,0 @@
-import { isUndefined } from '@xylabs/sdk-js'
-
-export const createFilledRange = (range?: [number, number]): number[] => {
-  if (isUndefined(range)) {
-    return []
-  }
-  const [start, end] = range
-  if (end < start) {
-    console.warn('Invalid range: end is less than start')
-    return []
-  }
-
-  const result: number[] = []
-
-  for (let i = start; i <= end; i++) {
-    result.push(i)
-  }
-
-  return result
-}