@xyo-network/xl1-react-transaction 1.18.1 → 1.18.4

package/dist/browser/index.mjs

@@ -232,9 +232,9 @@ var StyledBlockNumberIndicator = styled(Box, {
 
 // src/confirmation/components/TransactionStackProgress.tsx
 var TransactionStackProgress = /* @__PURE__ */ __name(({ blockRange, confirmedInBlock, currentBlockNumber, ...props }) => {
-  const blockPositionRefs = useRef({});
+  const blockPositionsRef = useRef({});
   const updateBlockPositionRefs = /* @__PURE__ */ __name((blockNumber, ref) => {
-    blockPositionRefs.current[blockNumber] = ref;
+    blockPositionsRef.current[blockNumber] = ref;
   }, "updateBlockPositionRefs");
   const progressElementRef = useRef(null);
   const { passedBlocks, progressColor, range, isConfirmed, isExpired } = useBlockRangeState(blockRange, confirmedInBlock, currentBlockNumber);
@@ -250,7 +250,7 @@ var TransactionStackProgress = /* @__PURE__ */ __name(({ blockRange, confirmedIn
     if (isDefined7(currentBlockNumber) && isDefined7(confirmedInBlock) && currentBlockNumber > confirmedInBlock) {
       return;
     }
-    const currentBlockNumberElement = isDefined7(currentBlockNumber) ? blockPositionRefs.current[currentBlockNumber] : null;
+    const currentBlockNumberElement = isDefined7(currentBlockNumber) ? blockPositionsRef.current[currentBlockNumber] : null;
     const progressElement = progressElementRef.current;
     setProgressValue(getBlockProgress(currentBlockNumber, currentBlockNumberElement, progressElement));
   }, [

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 blockPositionRefs = useRef<{ [blockNumber: number]: HTMLSpanElement | null }>({})\n  const updateBlockPositionRefs = (blockNumber: number, ref: HTMLSpanElement | null) => {\n    blockPositionRefs.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) ? blockPositionRefs.current[currentBlockNumber] : null\n    const progressElement = progressElementRef.current\n    // since we are relying on htmlElements, we have to use layout effect\n    // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-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\nexport const 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","blockPositionRefs","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    // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-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\nexport const 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.18.1",
+  "version": "1.18.4",
   "description": "XYO Layer One API",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -46,18 +46,18 @@
   "dependencies": {
     "@mui/icons-material": "~7.3.7",
     "@mui/material": "~7.3.7",
-    "@xylabs/sdk-js": "~5.0.61",
-    "@xyo-network/xl1-sdk": "~1.18.2"
+    "@xylabs/sdk-js": "~5.0.64",
+    "@xyo-network/xl1-sdk": "~1.19.4"
   },
   "devDependencies": {
     "@emotion/react": "~11.14.0",
     "@emotion/styled": "~11.14.1",
-    "@storybook/react-vite": "~10.1.11",
-    "@types/react": "~19.2.8",
-    "@xylabs/ts-scripts-yarn3": "~7.2.32",
-    "@xylabs/tsconfig": "~7.2.32",
-    "@xylabs/tsconfig-dom": "~7.2.32",
-    "@xylabs/tsconfig-react": "~7.2.32",
+    "@storybook/react-vite": "~10.2.0",
+    "@types/react": "~19.2.9",
+    "@xylabs/ts-scripts-yarn3": "~7.3.2",
+    "@xylabs/tsconfig": "~7.3.2",
+    "@xylabs/tsconfig-dom": "~7.3.2",
+    "@xylabs/tsconfig-react": "~7.3.2",
     "typescript": "~5.9.3"
   },
   "peerDependencies": {

package/src/confirmation/components/TransactionStackProgress.tsx

@@ -21,9 +21,9 @@ export interface TransactionStackProgressProps extends StackProps {
 export const TransactionStackProgress: React.FC<TransactionStackProgressProps> = ({
   blockRange, confirmedInBlock, currentBlockNumber, ...props
 }) => {
-  const blockPositionRefs = useRef<{ [blockNumber: number]: HTMLSpanElement | null }>({})
+  const blockPositionsRef = useRef<{ [blockNumber: number]: HTMLSpanElement | null }>({})
   const updateBlockPositionRefs = (blockNumber: number, ref: HTMLSpanElement | null) => {
-    blockPositionRefs.current[blockNumber] = ref
+    blockPositionsRef.current[blockNumber] = ref
   }
 
   const progressElementRef = useRef<HTMLDivElement | null>(null)
@@ -41,7 +41,7 @@ export const TransactionStackProgress: React.FC<TransactionStackProgressProps> =
     if (isDefined(currentBlockNumber) && isDefined(confirmedInBlock) && currentBlockNumber > confirmedInBlock) {
       return
     }
-    const currentBlockNumberElement = isDefined(currentBlockNumber) ? blockPositionRefs.current[currentBlockNumber] : null
+    const currentBlockNumberElement = isDefined(currentBlockNumber) ? blockPositionsRef.current[currentBlockNumber] : null
     const progressElement = progressElementRef.current
     // since we are relying on htmlElements, we have to use layout effect
     // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect