@xyo-network/xl1-react-transaction 1.21.3 → 1.23.0

package/dist/browser/confirmation/components/TransactionStackProgress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionStackProgress.d.ts","sourceRoot":"","sources":["../../../../src/confirmation/components/TransactionStackProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG/C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,KAIN,MAAM,OAAO,CAAA;AAMd,MAAM,WAAW,6BAA8B,SAAQ,UAAU;IAC/D,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAiE5E,CAAA"}
+{"version":3,"file":"TransactionStackProgress.d.ts","sourceRoot":"","sources":["../../../../src/confirmation/components/TransactionStackProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG/C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,KAIN,MAAM,OAAO,CAAA;AAMd,MAAM,WAAW,6BAA8B,SAAQ,UAAU;IAC/D,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAyE5E,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"BlockConfirmationStats.d.ts","sourceRoot":"","sources":["../../../../../src/confirmation/components/support/BlockConfirmationStats.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,2BAA2B;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;CACxB;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA4BxE,CAAA"}
+{"version":3,"file":"BlockConfirmationStats.d.ts","sourceRoot":"","sources":["../../../../../src/confirmation/components/support/BlockConfirmationStats.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,2BAA2B;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;CACxB;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAiCxE,CAAA"}

package/dist/browser/index.mjs

@@ -147,7 +147,7 @@ var useBlockRangeState = /* @__PURE__ */ __name((blockRange, confirmedInBlock, c
 }, "useBlockRangeState");
 
 // src/confirmation/components/support/BlockConfirmationStats.tsx
-import { CheckCircleOutline } from "@mui/icons-material";
+import { CheckCircleOutlined } from "@mui/icons-material";
 import { Grow, Stack, Typography } from "@mui/material";
 import { isDefined as isDefined6 } from "@xylabs/sdk-js";
 import React from "react";
@@ -162,7 +162,7 @@ var BlockConfirmationStats = /* @__PURE__ */ __name(({ confirmed, currentBlockCo
     }
   }, "Current Block:", " ", currentBlockNumberValue, " ", /* @__PURE__ */ React.createElement(Grow, {
     in: confirmed
-  }, /* @__PURE__ */ React.createElement(CheckCircleOutline, {
+  }, /* @__PURE__ */ React.createElement(CheckCircleOutlined, {
     sx: {
       width: "0.8em",
       height: "0.8em"
@@ -170,8 +170,8 @@ var BlockConfirmationStats = /* @__PURE__ */ __name(({ confirmed, currentBlockCo
     color: "success"
   }))), /* @__PURE__ */ React.createElement(Typography, {
     variant: "caption",
-    color: "warning.light",
     sx: {
+      color: "warning.light",
       opacity: 0.75
     }
   }, "Passed Blocks:", " ", isDefined6(passedBlocks) && passedBlocks.length > 0 ? passedBlocks.map((block) => new Intl.NumberFormat().format(block)).join(", ") : "N/A"));
@@ -261,8 +261,10 @@ var TransactionStackProgress = /* @__PURE__ */ __name(({ blockRange, confirmedIn
     direction: "row",
     ...props
   }, /* @__PURE__ */ React3.createElement(Stack3, {
-    width: "100%",
-    gap: 1
+    sx: {
+      width: "100%",
+      gap: 1
+    }
   }, /* @__PURE__ */ React3.createElement(Stack3, null, /* @__PURE__ */ React3.createElement(LinearProgress, {
     ref: progressElementRef,
     variant: "determinate",
@@ -270,7 +272,9 @@ var TransactionStackProgress = /* @__PURE__ */ __name(({ blockRange, confirmedIn
     color: progressColor
   }), /* @__PURE__ */ React3.createElement(Stack3, {
     direction: "row",
-    justifyContent: "space-between"
+    sx: {
+      justifyContent: "space-between"
+    }
   }, range.map((block) => {
     const blockColor = blockFormatters.color(block);
     const blockStatus = blockFormatters.confirmationStatus(block);

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<Record<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\ninterface 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":";;;;AACA,SAASA,gBAAgBC,SAAAA,cAAa;AACtC,SAASC,aAAAA,kBAAiB;AAE1B,OAAOC,UACLC,iBACAC,WAAAA,UACAC,QAAQC,gBACH;;;ACRP,SAASC,iBAAiB;AASnB,IAAMC,kBAAN,MAAMA;EATb,OASaA;;;EACMC;EAEjB,YAAYA,QAA+B;AACzC,SAAKA,SAASA;EAChB;EAEAC,MAAMC,aAA6B;AACjC,UAAM,EAAEC,oBAAoBC,iBAAgB,IAAK,KAAKJ;AACtD,QAAIE,gBAAgBC,oBAAoB;AACtC,aAAOE,UAAUD,gBAAAA,KAAqBA,qBAAqBF,cAAc,iBAAiB;IAC5F;AACA,UAAMI,SAAS,KAAKC,mBAAmBL,WAAAA;AACvC,YAAQI,QAAAA;MACN,KAAK,aAAa;AAChB,eAAO;MACT;MACA,KAAK,UAAU;AACb,eAAO;MACT;MACA,KAAK,WAAW;AACd,eAAO;MACT;MACA,SAAS;AACP,eAAO;MACT;IACF;EACF;EAEAC,mBAAmBL,aAA0D;AAC3E,UAAM,EAAEC,oBAAoBC,iBAAgB,IAAK,KAAKJ;AACtD,QAAIK,UAAUF,kBAAAA,GAAqB;AACjC,UAAIE,UAAUD,gBAAAA,KAAqBF,gBAAgBE,kBAAkB;AACnE,eAAO;MACT;AACA,aAAOD,qBAAqBD,cAAc,WAAW;IACvD;EACF;EAEAM,aAAaN,aAAqB;AAChC,WAAOA,YAAYO,SAAQ,EAAGC,UAAU,IAAI,IAAIC,KAAKC,aAAY,EAAGC,OAAOX,WAAAA,IAAe,GAAGA,YAAYO,SAAQ,EAAGK,MAAM,EAAC,CAAA;EAC7H;AACF;;;AClDA,SAASC,aAAAA,kBAAiB;AAEnB,IAAMC,qBAAqB,wBAChCC,kBACAC,cAAAA;AAEA,MAAIC,WAAUF,gBAAAA,GAAmB;AAC/B,WAAO;EACT;AACA,MAAIC,WAAW;AACb,WAAO;EACT;AACA,SAAO;AACT,GAXkC;;;ACHlC,SAASE,mBAAmB;AAErB,IAAMC,oBAAoB,wBAACC,UAAAA;AAChC,MAAIC,YAAYD,KAAAA,GAAQ;AACtB,WAAO,CAAA;EACT;AACA,QAAM,CAACE,OAAOC,GAAAA,IAAOH;AACrB,MAAIG,MAAMD,OAAO;AACfE,YAAQC,KAAK,uCAAA;AACb,WAAO,CAAA;EACT;AAEA,QAAMC,SAAmB,CAAA;AAEzB,WAASC,IAAIL,OAAOK,KAAKJ,KAAKI,KAAK;AACjCD,WAAOE,KAAKD,CAAAA;EACd;AAEA,SAAOD;AACT,GAjBiC;;;ACFjC,SAASG,eAAAA,cAAaC,yBAAyB;AAExC,IAAMC,mBAAmB,wBAC9BC,oBACAC,iBACAC,uBAAAA;AAEA,MAAIC,aAAYH,kBAAAA,KAAuBI,kBAAkBH,eAAAA,KAAoBG,kBAAkBF,kBAAAA,GAAqB;AAClH,WAAO;EACT;AAEA,QAAMG,yBAAyBJ,gBAAgBK;AAC/C,QAAMC,0BAA0BN,gBAAgBO,cAAc;AAC9D,QAAMC,+BAA+BJ,yBAAyBE;AAC9D,QAAMG,mBAAmBR,mBAAmBI;AAC5C,QAAMK,cAAcT,mBAAmBM;AAEvC,QAAMI,mBAAmBH,+BAA+BC;AACxD,QAAMG,WAAYD,mBAAmBD,cAAe;AAEpD,SAAOG,KAAKC,IAAID,KAAKE,IAAIH,UAAU,CAAA,GAAI,GAAA;AACzC,GAnBgC;;;ACFhC,SAASI,aAAAA,kBAAiB;AAGnB,IAAMC,4BAA4B,wBACvCC,YACAC,uBAAAA;AAEA,MAAI,CAACC,WAAUF,UAAAA,KAAe,CAACE,WAAUD,kBAAAA,GAAqB;AAC5D,WAAO;EACT;AACA,QAAM,CAAA,EAAGE,GAAAA,IAAOH;AAChB,SAAOC,qBAAqBE;AAC9B,GATyC;;;ACHzC,SAASC,aAAAA,kBAAiB;AAEnB,IAAMC,sBAAsB,wBACjCC,OACAC,uBAAAA;AAEA,MAAI,CAACC,WAAUD,kBAAAA,KAAuB,CAACC,WAAUF,KAAAA,GAAQ;AACvD,WAAO,CAAA;EACT;AACA,QAAM,CAACG,KAAAA,IAASH;AAChB,SAAOA,MAAMI,OAAOC,CAAAA,UAASA,QAAQJ,sBAAsBI,SAASF,KAAAA;AACtE,GATmC;;;ACDnC,SAASG,aAAAA,kBAAiB;AAE1B,SAASC,eAAe;AAcjB,IAAMC,qBAAqB,wBAChCC,YACAC,kBACAC,uBAAAA;AAEA,QAAMC,QAAQC,QAAQ,MAAMC,kBAAmBL,UAAAA,GAAc;IAACA;GAAW;AAEzE,QAAMM,YAAYF,QAAQ,MAAMG,0BAA0BP,YAAYE,kBAAAA,GAAqB;IAACF;IAAYE;GAAmB;AAE3H,QAAMM,eAAeJ,QAAQ,MAAMK,oBAAoBN,OAAOD,kBAAAA,GAAqB;IAACA;IAAoBC;GAAM;AAE9G,QAAMO,gBAAgBN,QAAQ,MAAMO,mBAAmBV,kBAAkBK,SAAAA,GAAY;IAACL;IAAkBK;GAAU;AAElH,QAAMM,cAAcC,WAAUZ,gBAAAA;AAE9B,SAAO;IACLW;IAAaN;IAAWE;IAAcE;IAAeP;EACvD;AACF,GAlBkC;;;ACjBlC,SAASW,0BAA0B;AACnC,SACEC,MAAMC,OAAOC,kBACR;AACP,SAASC,aAAAA,kBAAiB;AAC1B,OAAOC,WAAW;AASX,IAAMC,yBAAgE,wBAAC,EAC5EC,WAAWC,mBAAmBC,yBAAyBC,aAAY,MACpE;AACC,SACE,sBAAA,cAACC,OAAAA,MACC,sBAAA,cAACC,YAAAA;IACCC,SAAQ;IACRC,OAAON;IACPO,IAAI;MACFC,SAAS;MAAeC,YAAY;MAAUC,KAAK;IACrD;KACD,kBAEE,KACAT,yBACA,KACD,sBAAA,cAACU,MAAAA;IAAKC,IAAIb;KACR,sBAAA,cAACc,oBAAAA;IAAmBN,IAAI;MAAEO,OAAO;MAASC,QAAQ;IAAQ;IAAGT,OAAM;QAGvE,sBAAA,cAACF,YAAAA;IAAWC,SAAQ;IAAUC,OAAM;IAAgBC,IAAI;MAAES,SAAS;IAAK;KAAG,kBAExE,KACAC,WAAUf,YAAAA,KAAiBA,aAAagB,SAAS,IAAIhB,aAAaiB,IAAIC,CAAAA,UAAS,IAAIC,KAAKC,aAAY,EAAGC,OAAOH,KAAAA,CAAAA,EAAQI,KAAK,IAAA,IAAQ,KAAA,CAAA;AAK5I,GA5B6E;;;ACb7E,SACEC,KAAKC,SAAAA,QAAOC,QAAQC,SAASC,cAAAA,mBACxB;AACP,OAAOC,YAAW;AAYX,IAAMC,uBAA4D,wBAAC,EACxEC,OAAOC,YAAYC,aAAaC,sBAAsBC,yBAAyBC,IAAI,GAAGC,MAAAA,MACvF;AACC,SACE,gBAAAC,OAAA,cAACC,QAAAA;IACCC,KAAK,wBAACA,QAAAA;AAAU,UAAIL,wBAAyBA,yBAAwBJ,OAAOS,GAAAA;IAAK,GAA5E;IACLC,KAAKV;IACLK,IAAI;MAAEM,UAAU;MAAY,GAAGN;IAAG;IACjC,GAAGC;KAEJ,gBAAAC,OAAA,cAACK,KAAAA;IACCC,WAAU;IACVR,IAAI;MACFS,SAAS;MAAQH,UAAU;MAAYI,OAAO;MAAQC,QAAQ;IAChE;KAEA,gBAAAT,OAAA,cAACU,4BAAAA;IAA2BJ,WAAU;IAAOR,IAAI;MAAEa,iBAAiBjB;IAAW;OAEjF,gBAAAM,OAAA,cAACY,SAAAA;IACCC,OAAO,UAAU,IAAIC,KAAKC,aAAY,EAAGC,OAAOvB,KAAAA,CAAAA,KAAWE,WAAAA;IAC3DsB,WAAU;IACVC,OAAAA;KAEA,gBAAAlB,OAAA,cAACmB,aAAAA;IACCC,SAAQ;IACRtB,IAAI;MACFuB,OAAO3B;MACP4B,QAAQ;MACRC,SAAS5B,gBAAgB,WAAW,OAAO;IAC7C;KAECC,oBAAAA,CAAAA,CAAAA;AAKX,GApCyE;AAsCzE,IAAMc,6BAA6Bc,OAAOnB,KAAK;EAAEoB,MAAM;AAA6B,CAAA,EAAa,CAAC,EAAEC,MAAK,MAAE;AACzG,SAAOA,MAAMC,YAAY;IACvBvB,UAAU;IACVwB,MAAM;IACNC,WAAW;IACXpB,QAAQ;IACRD,OAAO;IACPG,iBAAiB;EACnB,CAAA;AACF,CAAA;;;AT3CO,IAAMmB,2BAAoE,wBAAC,EAChFC,YAAYC,kBAAkBC,oBAAoB,GAAGC,MAAAA,MACtD;AACC,QAAMC,oBAAoBC,OAA+C,CAAC,CAAA;AAC1E,QAAMC,0BAA0B,wBAACC,aAAqBC,QAAAA;AACpDJ,sBAAkBK,QAAQF,WAAAA,IAAeC;EAC3C,GAFgC;AAIhC,QAAME,qBAAqBL,OAA8B,IAAA;AAEzD,QAAM,EACJM,cAAcC,eAAeC,OAAOC,aAAaC,UAAS,IACxDC,mBAAmBhB,YAAYC,kBAAkBC,kBAAAA;AAErD,QAAMe,kBAAkBC,SAAQ,MAAM,IAAIC,gBAAgB;IAAElB;IAAkBC;EAAmB,CAAA,GAAI;IAACD;IAAkBC;GAAmB;AAE3I,QAAM,CAACkB,eAAeC,gBAAAA,IAAoBC,SAAS,CAAA;AAEnDC,kBAAgB,MAAA;AAEd,QAAIC,WAAUtB,kBAAAA,KAAuBsB,WAAUvB,gBAAAA,KAAqBC,qBAAqBD,kBAAkB;AACzG;IACF;AACA,UAAMwB,4BAA4BD,WAAUtB,kBAAAA,IAAsBE,kBAAkBK,QAAQP,kBAAAA,IAAsB;AAClH,UAAMwB,kBAAkBhB,mBAAmBD;AAE3CY,qBAAiBM,iBACfzB,oBACAuB,2BACAC,eAAAA,CAAAA;EAEJ,GAAG;IAACzB;IAAkBC;GAAmB;AAEzC,SACE,gBAAA0B,OAAA,cAACC,QAAAA;IAAMC,WAAU;IAAO,GAAG3B;KACzB,gBAAAyB,OAAA,cAACC,QAAAA;IAAME,OAAM;IAAOC,KAAK;KACvB,gBAAAJ,OAAA,cAACC,QAAAA,MACC,gBAAAD,OAAA,cAACK,gBAAAA;IAAezB,KAAKE;IAAoBwB,SAAQ;IAAcC,OAAOpB,YAAY,MAAMK;IAAegB,OAAOxB;MAC9G,gBAAAgB,OAAA,cAACC,QAAAA;IAAMC,WAAU;IAAMO,gBAAe;KACnCxB,MAAMyB,IAAI,CAACC,UAAAA;AACV,UAAMC,aAAavB,gBAAgBmB,MAAMG,KAAAA;AACzC,UAAME,cAAcxB,gBAAgByB,mBAAmBH,KAAAA;AACvD,UAAMI,uBAAuB1B,gBAAgB2B,aAAaL,KAAAA;AAC1D,WACE,gBAAAX,OAAA,cAACiB,sBAAAA;MACCC,KAAKP;MACLA;MACAC;MACAC;MACAE;MACArC;;EAGN,CAAA,CAAA,CAAA,GAGJ,gBAAAsB,OAAA,cAACmB,wBAAAA;IACCC,WAAWlC;IACXmC,mBAAmBzB,WAAUtB,kBAAAA,IAAsBe,gBAAgBmB,MAAMlC,kBAAAA,IAAsB;IAC/FgD,yBAAyB1B,WAAUtB,kBAAAA,IAAsB,IAAIiD,KAAKC,aAAY,EAAGC,OAAOnD,kBAAAA,IAAsB;IAC9GS;;AAKV,GAjEiF;","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<Record<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\n        sx={{\n          width: '100%',\n          gap: 1,\n        }}\n      >\n        <Stack>\n          <LinearProgress ref={progressElementRef} variant=\"determinate\" value={isExpired ? 100 : progressValue} color={progressColor} />\n          <Stack\n            direction=\"row\"\n            sx={{ justifyContent: 'space-between' }}\n          >\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\ninterface 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 { CheckCircleOutlined } 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          <CheckCircleOutlined sx={{ width: '0.8em', height: '0.8em' }} color=\"success\" />\n        </Grow>\n      </Typography>\n      <Typography\n        variant=\"caption\"\n        sx={{\n          color: 'warning.light',\n          opacity: 0.75,\n        }}\n      >\n        Passed Blocks:\n        {' '}\n        {isDefined(passedBlocks) && passedBlocks.length > 0 ? passedBlocks.map(block => new Intl.NumberFormat().format(block)).join(', ') : 'N/A'}\n      </Typography>\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","CheckCircleOutlined","Grow","Stack","Typography","isDefined","React","BlockConfirmationStats","confirmed","currentBlockColor","currentBlockNumberValue","passedBlocks","Stack","Typography","variant","color","sx","display","alignItems","gap","Grow","in","CheckCircleOutlined","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","sx","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.21.3",
+  "version": "1.23.0",
   "description": "XYO Layer One API",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -40,11 +40,11 @@
   ],
   "devDependencies": {
     "@bitauth/libauth": "~3.0.0",
-    "@metamask/json-rpc-engine": "^10.3.0",
+    "@metamask/json-rpc-engine": "^10.5.0",
     "@metamask/providers": "^22.1.1",
     "@metamask/utils": "~11.11.0",
-    "@mui/icons-material": "^7.3.11",
-    "@mui/material": "^7.3.11",
+    "@mui/icons-material": "~9.0",
+    "@mui/material": "~9.0",
     "@opentelemetry/api": "^1.9.1",
     "@opentelemetry/sdk-trace-base": "^2.7.1",
     "@scure/base": "~2.2.0",
@@ -55,10 +55,10 @@
     "@xylabs/geo": "^5.1.2",
     "@xylabs/sdk-js": "^5.1.2",
     "@xylabs/threads": "~5.1.2",
-    "@xylabs/toolchain": "~7.13.15",
-    "@xylabs/tsconfig": "~7.13.15",
-    "@xylabs/tsconfig-dom": "~7.13.15",
-    "@xylabs/tsconfig-react": "~7.13.15",
+    "@xylabs/toolchain": "~7.13.24",
+    "@xylabs/tsconfig": "~7.13.24",
+    "@xylabs/tsconfig-dom": "~7.13.24",
+    "@xylabs/tsconfig-react": "~7.13.24",
     "@xyo-network/account": "~5.6.2",
     "@xyo-network/account-model": "~5.6.3",
     "@xyo-network/api": "~5.6.2",
@@ -78,7 +78,7 @@
     "@xyo-network/sdk-protocol-js": "~5.6.3",
     "@xyo-network/wallet": "~5.6.2",
     "@xyo-network/wallet-model": "^5.6.3",
-    "@xyo-network/xl1-sdk": "^1.28.5",
+    "@xyo-network/xl1-sdk": "^1.30.1",
     "ajv": "^8.20.0",
     "async-mutex": "^0.5.0",
     "bn.js": "^5.2.3",
@@ -101,8 +101,8 @@
     "storybook": "^10.3.6",
     "typescript": "~5.9.3",
     "uuid": "~14.0.0",
-    "vite": "^8.0.10",
-    "vitest": "^4.1.5",
+    "vite": "^8.0.12",
+    "vitest": "^4.1.6",
     "wasm-feature-detect": "~1.8.0",
     "webextension-polyfill": "^0.12.0",
     "zod": "~4.4.3"
@@ -112,8 +112,8 @@
     "@metamask/json-rpc-engine": "^10.3",
     "@metamask/providers": "^22.1",
     "@metamask/utils": "~11.11",
-    "@mui/icons-material": "^7.3",
-    "@mui/material": "^7.3",
+    "@mui/icons-material": "~9.0",
+    "@mui/material": "~9.0",
     "@opentelemetry/api": "^1.9",
     "@opentelemetry/sdk-trace-base": "^2.7",
     "@scure/base": "~2.2",