@xyo-network/xl1-react-transaction 1.20.3 → 1.20.5

package/dist/browser/confirmation/components/support/BlockRangeEntryStack.d.ts

@@ -9,7 +9,4 @@ export interface BlockRangeEntryStackProps extends StackProps {
     updateBlockPositionRefs?: (blockNumber: number, ref: HTMLSpanElement | null) => void;
 }
 export declare const BlockRangeEntryStack: React.FC<BlockRangeEntryStackProps>;
-export declare const StyledBlockNumberIndicator: import("@emotion/styled").StyledComponent<Pick<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "key" | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
-    component?: React.ElementType | undefined;
-}, {}, {}>;
 //# sourceMappingURL=BlockRangeEntryStack.d.ts.map

package/dist/browser/confirmation/components/support/BlockRangeEntryStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockRangeEntryStack.d.ts","sourceRoot":"","sources":["../../../../../src/confirmation/components/support/BlockRangeEntryStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,UAAU,EAAE,MAAM,eAAe,CAAA;AAIzD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAA;AAErE,MAAM,WAAW,yBAA0B,SAAQ,UAAU;IAC3D,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,uBAAuB,GAAG,SAAS,CAAA;IAChD,oBAAoB,EAAE,MAAM,CAAA;IAC5B,uBAAuB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAA;CACrF;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAoCpE,CAAA;AAED,eAAO,MAAM,0BAA0B;;UASrC,CAAA"}
+{"version":3,"file":"BlockRangeEntryStack.d.ts","sourceRoot":"","sources":["../../../../../src/confirmation/components/support/BlockRangeEntryStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,UAAU,EAAE,MAAM,eAAe,CAAA;AAIzD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAA;AAErE,MAAM,WAAW,yBAA0B,SAAQ,UAAU;IAC3D,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,uBAAuB,GAAG,SAAS,CAAA;IAChD,oBAAoB,EAAE,MAAM,CAAA;IAC5B,uBAAuB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAA;CACrF;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAoCpE,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    // 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"]}
+{"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\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.3",
+  "version": "1.20.5",
   "description": "XYO Layer One API",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -50,13 +50,13 @@
     "@mui/material": "^7.3.9",
     "@storybook/react-vite": "^10.2.17",
     "@types/react": "~19.2.14",
-    "@xylabs/sdk-js": "~5.0.80",
-    "@xylabs/ts-scripts-yarn3": "~7.4.10",
-    "@xylabs/tsconfig": "~7.4.10",
-    "@xylabs/tsconfig-dom": "~7.4.10",
-    "@xylabs/tsconfig-react": "~7.4.10",
+    "@xylabs/sdk-js": "~5.0.83",
+    "@xylabs/ts-scripts-yarn3": "~7.4.13",
+    "@xylabs/tsconfig": "~7.4.13",
+    "@xylabs/tsconfig-dom": "~7.4.13",
+    "@xylabs/tsconfig-react": "~7.4.13",
     "@xyo-network/sdk-js": "~5.3.15",
-    "@xyo-network/xl1-sdk": "~1.25.20",
+    "@xyo-network/xl1-sdk": "~1.25.22",
     "axios": "^1.13.6",
     "ethers": "^6.16.0",
     "react": "^19.2.4",

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

@@ -52,7 +52,7 @@ export const BlockRangeEntryStack: React.FC<BlockRangeEntryStackProps> = ({
   )
 }
 
-export const StyledBlockNumberIndicator = styled(Box, { name: 'StyledBlockNumberIndicator' })<BoxProps>(({ theme }) => {
+const StyledBlockNumberIndicator = styled(Box, { name: 'StyledBlockNumberIndicator' })<BoxProps>(({ theme }) => {
   return theme.unstable_sx({
     position: 'absolute',
     left: 'calc(50% - 1px)',