@lifi/widget 4.0.0-beta.14 → 4.0.0-beta.18

package/dist/esm/components/SendToWallet/SendToWalletButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SendToWalletButton.js","names":["Card"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { useChainTypeFromAddress } from '@lifi/widget-provider'\nimport CloseRounded from '@mui/icons-material/CloseRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type MouseEventHandler, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { DisabledUI, HiddenUI } from '../../types/widget.js'\nimport { defaultChainIdsByType } from '../../utils/chainType.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AccountAvatar } from '../Avatar/AccountAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n  SendToWalletCardHeader,\n  SendToWalletCardTitleRow,\n  SendToWalletRequiredLabel,\n  SendToWalletRequiredLabelText,\n} from './SendToWalletButton.style.js'\n\nexport const SendToWalletButton: React.FC<CardProps> = (props) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const {\n    disabledUI,\n    hiddenUI,\n    toAddress,\n    toAddresses,\n    subvariant,\n    subvariantOptions,\n  } = useWidgetConfig()\n  const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(\n    'toAddress',\n    'toChain',\n    'toToken'\n  )\n  const { setFieldValue } = useFieldActions()\n  const { selectedBookmark } = useBookmarks()\n  const { setSelectedBookmark } = useBookmarkActions()\n  const { accounts } = useAccount()\n  const { getChainTypeFromAddress } = useChainTypeFromAddress()\n  const { requiredToAddress } = useToAddressRequirements()\n  const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress)\n  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress)\n\n  const address = toAddressFieldValue\n    ? shortenAddress(toAddressFieldValue)\n    : t('sendToWallet.enterAddress', {\n        context: 'short',\n      })\n\n  const matchingConnectedAccount = accounts.find(\n    (account) => account.address === toAddressFieldValue\n  )\n\n  const chainType = !matchingConnectedAccount\n    ? selectedBookmark?.chainType ||\n      (toAddressFieldValue\n        ? getChainTypeFromAddress(toAddressFieldValue)\n        : undefined)\n    : undefined\n\n  const chainId =\n    toChainId && toTokenAddress\n      ? toChainId\n      : matchingConnectedAccount\n        ? matchingConnectedAccount.chainId\n        : chainType\n          ? defaultChainIdsByType[chainType]\n          : undefined\n\n  const isConnectedAccount =\n    selectedBookmark?.isConnectedAccount &&\n    matchingConnectedAccount?.isConnected\n  const connectedAccountName = matchingConnectedAccount?.connector?.name\n  const bookmarkName = selectedBookmark?.name\n\n  const headerTitle = isConnectedAccount\n    ? connectedAccountName || address\n    : bookmarkName || connectedAccountName || address\n\n  const headerSubheader =\n    isConnectedAccount || bookmarkName || connectedAccountName ? address : null\n\n  const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress\n\n  const handleOnClick = () => {\n    navigate({\n      to: toAddresses?.length\n        ? navigationRoutes.configuredWallets\n        : navigationRoutes.sendToWallet,\n    })\n  }\n\n  const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.stopPropagation()\n    setFieldValue('toAddress', '', { isTouched: true })\n    setSelectedBookmark()\n  }\n\n  // The collapse opens instantly on first page load/component mount when there is an address to display\n  // After which it needs an animated transition for open and closing.\n  // collapseTransitionTime is used specify the transition time for opening and closing\n  const collapseTransitionTime = useRef(0)\n\n  // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      collapseTransitionTime.current = 225\n    }, 0)\n    return () => clearTimeout(timeout)\n  }, [])\n\n  const isOpenCollapse =\n    !hiddenToAddress && (requiredToAddress || !!toAddressFieldValue)\n\n  const title =\n    subvariant === 'custom' && subvariantOptions?.custom === 'deposit'\n      ? t('header.depositTo')\n      : t('header.sendToWallet')\n\n  return (\n    <Collapse\n      timeout={collapseTransitionTime.current as number}\n      in={isOpenCollapse}\n      mountOnEnter\n      unmountOnExit\n    >\n      <Card\n        role=\"button\"\n        onClick={disabledForChanges ? undefined : handleOnClick}\n        sx={{ width: '100%', ...props.sx }}\n      >\n        <SendToWalletCardTitleRow>\n          <CardTitle sx={{ p: 0 }}>{title}</CardTitle>\n          {requiredToAddress && !toAddressFieldValue ? (\n            <SendToWalletRequiredLabel variant=\"warning\">\n              <WarningRounded sx={{ fontSize: 14 }} />\n              <SendToWalletRequiredLabelText type=\"icon\">\n                {t('sendToWallet.required')}\n              </SendToWalletRequiredLabelText>\n            </SendToWalletRequiredLabel>\n          ) : null}\n        </SendToWalletCardTitleRow>\n        <Box\n          sx={{\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n          }}\n        >\n          <SendToWalletCardHeader\n            avatar={\n              <AccountAvatar\n                chainId={chainId}\n                account={matchingConnectedAccount}\n                toAddress={toAddress}\n                empty={!toAddressFieldValue}\n              />\n            }\n            title={headerTitle}\n            subheader={headerSubheader}\n            selected={!!toAddressFieldValue || disabledToAddress}\n            action={\n              !!toAddressFieldValue && !disabledForChanges ? (\n                <CardIconButton onClick={clearSelectedBookmark} size=\"small\">\n                  <CloseRounded fontSize=\"inherit\" />\n                </CardIconButton>\n              ) : null\n            }\n          />\n        </Box>\n      </Card>\n    </Collapse>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"SendToWalletButton.js","names":["Card"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { useChainTypeFromAddress } from '@lifi/widget-provider'\nimport CloseRounded from '@mui/icons-material/CloseRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type MouseEventHandler, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { DisabledUI, HiddenUI } from '../../types/widget.js'\nimport { defaultChainIdsByType } from '../../utils/chainType.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AccountAvatar } from '../Avatar/AccountAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n  SendToWalletCardHeader,\n  SendToWalletCardTitleRow,\n  SendToWalletRequiredLabel,\n  SendToWalletRequiredLabelText,\n} from './SendToWalletButton.style.js'\n\nexport const SendToWalletButton: React.FC<CardProps> = (props) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const {\n    disabledUI,\n    hiddenUI,\n    toAddress,\n    toAddresses,\n    subvariant,\n    subvariantOptions,\n  } = useWidgetConfig()\n  const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(\n    'toAddress',\n    'toChain',\n    'toToken'\n  )\n  const { setFieldValue } = useFieldActions()\n  const { selectedBookmark } = useBookmarks()\n  const { setSelectedBookmark } = useBookmarkActions()\n  const { accounts } = useAccount()\n  const { getChainTypeFromAddress } = useChainTypeFromAddress()\n  const { requiredToAddress } = useToAddressRequirements()\n  const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress)\n  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress)\n\n  const address = toAddressFieldValue\n    ? shortenAddress(toAddressFieldValue)\n    : t('sendToWallet.enterAddress', {\n        context: 'short',\n      })\n\n  const matchingConnectedAccount = accounts.find(\n    (account) => account.address === toAddressFieldValue\n  )\n\n  const chainType = !matchingConnectedAccount\n    ? selectedBookmark?.chainType ||\n      (toAddressFieldValue\n        ? getChainTypeFromAddress(toAddressFieldValue)\n        : undefined)\n    : undefined\n\n  const chainId =\n    toChainId && toTokenAddress\n      ? toChainId\n      : matchingConnectedAccount\n        ? matchingConnectedAccount.chainId\n        : chainType\n          ? defaultChainIdsByType[chainType]\n          : undefined\n\n  const isConnectedAccount =\n    selectedBookmark?.isConnectedAccount &&\n    matchingConnectedAccount?.isConnected\n  const connectedAccountName = matchingConnectedAccount?.connector?.name\n  const bookmarkName = selectedBookmark?.name\n\n  const headerTitle = isConnectedAccount\n    ? connectedAccountName || address\n    : bookmarkName || connectedAccountName || address\n\n  const headerSubheader =\n    isConnectedAccount || bookmarkName || connectedAccountName ? address : null\n\n  const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress\n\n  const handleOnClick = () => {\n    navigate({\n      to: toAddresses?.length\n        ? navigationRoutes.configuredWallets\n        : navigationRoutes.sendToWallet,\n    })\n  }\n\n  const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.stopPropagation()\n    setFieldValue('toAddress', '', { isTouched: true })\n    setSelectedBookmark()\n  }\n\n  // The collapse opens instantly on first page load/component mount when there is an address to display\n  // After which it needs an animated transition for open and closing.\n  // collapseTransitionTime is used specify the transition time for opening and closing\n  const collapseTransitionTime = useRef(0)\n\n  // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      collapseTransitionTime.current = 225\n    }, 0)\n    return () => clearTimeout(timeout)\n  }, [])\n\n  const isOpenCollapse =\n    !hiddenToAddress && (requiredToAddress || !!toAddressFieldValue)\n\n  const title =\n    subvariant === 'custom' && subvariantOptions?.custom === 'deposit'\n      ? t('header.depositTo')\n      : t('header.sendToWallet')\n\n  return (\n    <Collapse\n      timeout={collapseTransitionTime.current as number}\n      in={isOpenCollapse}\n      mountOnEnter\n      unmountOnExit\n    >\n      <Card\n        role=\"button\"\n        onClick={disabledForChanges ? undefined : handleOnClick}\n        sx={{ width: '100%', ...props.sx }}\n      >\n        <SendToWalletCardTitleRow>\n          <CardTitle sx={{ p: 0 }}>{title}</CardTitle>\n          {requiredToAddress && !toAddressFieldValue ? (\n            <SendToWalletRequiredLabel variant=\"warning\">\n              <WarningRounded sx={{ fontSize: 14 }} />\n              <SendToWalletRequiredLabelText type=\"icon\">\n                {t('sendToWallet.required')}\n              </SendToWalletRequiredLabelText>\n            </SendToWalletRequiredLabel>\n          ) : null}\n        </SendToWalletCardTitleRow>\n        <Box\n          sx={{\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n          }}\n        >\n          <SendToWalletCardHeader\n            avatar={\n              <AccountAvatar\n                chainId={chainId}\n                account={matchingConnectedAccount}\n                toAddress={toAddress}\n                empty={!toAddressFieldValue}\n              />\n            }\n            title={headerTitle}\n            subheader={headerSubheader}\n            selected={!!toAddressFieldValue || disabledToAddress}\n            action={\n              toAddressFieldValue && !disabledForChanges ? (\n                <CardIconButton onClick={clearSelectedBookmark} size=\"small\">\n                  <CloseRounded fontSize=\"inherit\" />\n                </CardIconButton>\n              ) : null\n            }\n          />\n        </Box>\n      </Card>\n    </Collapse>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/SendToWallet/SendToWalletExpandButton.js

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { DisabledUI, HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { navigationRoutes } from "../../utils/navigationRoutes.js";
 import { useFieldValues } from "../../stores/form/useFieldValues.js";
 import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
@@ -15,8 +15,8 @@ const SendToWalletExpandButton = () => {
 	const { t } = useTranslation();
 	const navigate = useNavigate();
 	const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig();
-	const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
-	const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress);
+	const hiddenToAddress = hiddenUI?.includes("toAddress");
+	const disabledToAddress = disabledUI?.includes("toAddress");
 	const { requiredToAddress } = useToAddressRequirements();
 	const [toAddressValue] = useFieldValues("toAddress");
 	const visible = !hiddenToAddress && !disabledToAddress && !toAddressValue && !requiredToAddress;

package/dist/esm/components/SendToWallet/SendToWalletExpandButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SendToWalletExpandButton.js","names":[],"sources":["../../../../src/components/SendToWallet/SendToWalletExpandButton.tsx"],"sourcesContent":["import Wallet from '@mui/icons-material/Wallet'\nimport Button from '@mui/material/Button'\nimport Collapse from '@mui/material/Collapse'\nimport Tooltip from '@mui/material/Tooltip'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { DisabledUI, HiddenUI } from '../../types/widget.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const SendToWalletExpandButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig()\n  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress)\n  const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress)\n  const { requiredToAddress } = useToAddressRequirements()\n  const [toAddressValue] = useFieldValues('toAddress')\n\n  const visible =\n    !hiddenToAddress &&\n    !disabledToAddress &&\n    !toAddressValue &&\n    !requiredToAddress\n\n  const handleClick = () =>\n    navigate({\n      to: toAddresses?.length\n        ? navigationRoutes.configuredWallets\n        : navigationRoutes.sendToWallet,\n    })\n\n  return (\n    <Collapse\n      orientation=\"horizontal\"\n      in={visible}\n      timeout={225}\n      mountOnEnter\n      unmountOnExit\n    >\n      <Tooltip title={t('main.sendToWallet')} placement=\"bottom-end\">\n        <Button\n          variant=\"text\"\n          onClick={handleClick}\n          sx={{\n            ml: 1.5,\n            minWidth: 48,\n            width: 48,\n            height: 48,\n          }}\n        >\n          <Wallet />\n        </Button>\n      </Tooltip>\n    </Collapse>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAa,iCAA8C;CACzD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,aAAa,YAAY,aAAa,iBAAiB;CAC/D,MAAM,kBAAkB,UAAU,SAAS,SAAS,UAAU;CAC9D,MAAM,oBAAoB,YAAY,SAAS,WAAW,UAAU;CACpE,MAAM,EAAE,sBAAsB,0BAA0B;CACxD,MAAM,CAAC,kBAAkB,eAAe,YAAY;CAEpD,MAAM,UACJ,CAAC,mBACD,CAAC,qBACD,CAAC,kBACD,CAAC;CAEH,MAAM,oBACJ,SAAS,EACP,IAAI,aAAa,SACb,iBAAiB,oBACjB,iBAAiB,cACtB,CAAC;AAEJ,QACE,oBAAC,UAAD;EACE,aAAY;EACZ,IAAI;EACJ,SAAS;EACT,cAAA;EACA,eAAA;YAEA,oBAAC,SAAD;GAAS,OAAO,EAAE,oBAAoB;GAAE,WAAU;aAChD,oBAAC,QAAD;IACE,SAAQ;IACR,SAAS;IACT,IAAI;KACF,IAAI;KACJ,UAAU;KACV,OAAO;KACP,QAAQ;KACT;cAED,oBAAC,QAAD,EAAU,CAAA;IACH,CAAA;GACD,CAAA;EACD,CAAA"}
+{"version":3,"file":"SendToWalletExpandButton.js","names":[],"sources":["../../../../src/components/SendToWallet/SendToWalletExpandButton.tsx"],"sourcesContent":["import Wallet from '@mui/icons-material/Wallet'\nimport Button from '@mui/material/Button'\nimport Collapse from '@mui/material/Collapse'\nimport Tooltip from '@mui/material/Tooltip'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { DisabledUI, HiddenUI } from '../../types/widget.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const SendToWalletExpandButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig()\n  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress)\n  const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress)\n  const { requiredToAddress } = useToAddressRequirements()\n  const [toAddressValue] = useFieldValues('toAddress')\n\n  const visible =\n    !hiddenToAddress &&\n    !disabledToAddress &&\n    !toAddressValue &&\n    !requiredToAddress\n\n  const handleClick = () =>\n    navigate({\n      to: toAddresses?.length\n        ? navigationRoutes.configuredWallets\n        : navigationRoutes.sendToWallet,\n    })\n\n  return (\n    <Collapse\n      orientation=\"horizontal\"\n      in={visible}\n      timeout={225}\n      mountOnEnter\n      unmountOnExit\n    >\n      <Tooltip title={t('main.sendToWallet')} placement=\"bottom-end\">\n        <Button\n          variant=\"text\"\n          onClick={handleClick}\n          sx={{\n            ml: 1.5,\n            minWidth: 48,\n            width: 48,\n            height: 48,\n          }}\n        >\n          <Wallet />\n        </Button>\n      </Tooltip>\n    </Collapse>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAa,iCAA8C;CACzD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,aAAa,YAAY,aAAa,iBAAiB;CAC/D,MAAM,kBAAkB,UAAU,SAAA,YAA4B;CAC9D,MAAM,oBAAoB,YAAY,SAAA,YAA8B;CACpE,MAAM,EAAE,sBAAsB,0BAA0B;CACxD,MAAM,CAAC,kBAAkB,eAAe,YAAY;CAEpD,MAAM,UACJ,CAAC,mBACD,CAAC,qBACD,CAAC,kBACD,CAAC;CAEH,MAAM,oBACJ,SAAS,EACP,IAAI,aAAa,SACb,iBAAiB,oBACjB,iBAAiB,cACtB,CAAC;AAEJ,QACE,oBAAC,UAAD;EACE,aAAY;EACZ,IAAI;EACJ,SAAS;EACT,cAAA;EACA,eAAA;YAEA,oBAAC,SAAD;GAAS,OAAO,EAAE,oBAAoB;GAAE,WAAU;aAChD,oBAAC,QAAD;IACE,SAAQ;IACR,SAAS;IACT,IAAI;KACF,IAAI;KACJ,UAAU;KACV,OAAO;KACP,QAAQ;KACT;cAED,oBAAC,QAAD,EAAU,CAAA;IACH,CAAA;GACD,CAAA;EACD,CAAA"}

package/dist/esm/components/Skeleton/WidgetSkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetSkeleton.js","names":["createTheme"],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"sourcesContent":["import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material'\nimport { type JSX, useMemo } from 'react'\nimport { createTheme } from '../../themes/createTheme.js'\nimport type { WidgetConfigPartialProps } from '../../types/widget.js'\nimport {\n  AppExpandedContainer,\n  FlexContainer,\n  RelativeContainer,\n} from '../AppContainer.js'\nimport {\n  SkeletonAmountContainer,\n  SkeletonCard,\n  SkeletonCardRow,\n  SkeletonHeaderAppBar,\n  SkeletonHeaderContainer,\n  SkeletonInputCard,\n  SkeletonPoweredByContainer,\n  SkeletonReviewButton,\n  SkeletonReviewButtonContainer,\n  SkeletonSendToWalletButton,\n  SkeletonWalletMenuButtonContainer,\n} from './WidgetSkeleton.style.js'\n\nconst SkeletonIcon = () => <Skeleton width={24} height={24} variant=\"rounded\" />\nconst SkeletonWalletMenuButton = () => (\n  <SkeletonWalletMenuButtonContainer>\n    <Skeleton width={98} height={24} variant=\"text\" />\n    <SkeletonIcon />\n  </SkeletonWalletMenuButtonContainer>\n)\n\ninterface SkeletonSelectCardProps {\n  titleWidth?: number\n  placeholderWidth?: number\n}\nconst SkeletonSelectCard = ({\n  titleWidth = 36,\n  placeholderWidth = 195,\n}: SkeletonSelectCardProps) => (\n  <SkeletonCard elevation={0}>\n    <Skeleton width={titleWidth} height={22} variant=\"text\" />\n    <SkeletonCardRow>\n      <Skeleton width={40} height={40} variant=\"circular\" />\n      <Skeleton width={placeholderWidth} height={27} variant=\"text\" />\n    </SkeletonCardRow>\n  </SkeletonCard>\n)\n\nconst SkeletonYouPayCard = () => (\n  <SkeletonInputCard elevation={0}>\n    <Skeleton width={55} height={22} variant=\"text\" />\n    <SkeletonCardRow>\n      <Skeleton width={40} height={40} variant=\"circular\" />\n      <SkeletonAmountContainer>\n        <Skeleton\n          width={48}\n          height={37}\n          variant=\"text\"\n          sx={{ marginTop: -0.75 }}\n        />\n        <Skeleton width={48} height={12} variant=\"text\" />\n      </SkeletonAmountContainer>\n    </SkeletonCardRow>\n  </SkeletonInputCard>\n)\n\nexport const WidgetSkeleton = ({\n  config,\n}: WidgetConfigPartialProps): JSX.Element => {\n  const appearance = config?.appearance\n  const hiddenUI = config?.hiddenUI || []\n  const requiredUI = config?.requiredUI || []\n  const configTheme = config?.theme\n  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')\n  const appearanceMode =\n    !appearance || appearance === 'system'\n      ? prefersDarkMode\n        ? 'dark'\n        : 'light'\n      : appearance\n\n  const theme = useMemo(() => createTheme(configTheme), [configTheme])\n\n  return (\n    <ThemeProvider\n      theme={theme}\n      defaultMode={appearanceMode}\n      modeStorageKey=\"li.fi-widget-mode\"\n      colorSchemeStorageKey=\"li.fi-widget-color-scheme\"\n      disableTransitionOnChange\n    >\n      <AppExpandedContainer>\n        <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>\n          <SkeletonHeaderContainer>\n            {!hiddenUI.includes('walletMenu') ? (\n              <SkeletonHeaderAppBar>\n                <SkeletonWalletMenuButton />\n              </SkeletonHeaderAppBar>\n            ) : null}\n            <SkeletonHeaderAppBar\n              sx={{ justifyContent: 'space-between', height: 52 }}\n            >\n              <Skeleton width={124} height={36} variant=\"text\" />\n              <SkeletonIcon />\n            </SkeletonHeaderAppBar>\n          </SkeletonHeaderContainer>\n\n          <FlexContainer\n            sx={{\n              gap: 2,\n              paddingBottom: hiddenUI.includes('poweredBy') ? 3 : 2,\n            }}\n          >\n            <SkeletonSelectCard />\n            <SkeletonSelectCard />\n            <SkeletonYouPayCard />\n            {requiredUI.includes('toAddress') ? (\n              <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />\n            ) : null}\n            <SkeletonReviewButtonContainer>\n              <SkeletonReviewButton variant=\"contained\" fullWidth>\n                &nbsp;\n              </SkeletonReviewButton>\n              {!requiredUI.includes('toAddress') ? (\n                <SkeletonSendToWalletButton variant=\"text\" fullWidth>\n                  &nbsp;\n                </SkeletonSendToWalletButton>\n              ) : null}\n            </SkeletonReviewButtonContainer>\n          </FlexContainer>\n          {!hiddenUI.includes('poweredBy') ? (\n            <SkeletonPoweredByContainer>\n              <Skeleton width={96} height={18} variant=\"text\" />\n            </SkeletonPoweredByContainer>\n          ) : null}\n        </RelativeContainer>\n      </AppExpandedContainer>\n    </ThemeProvider>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"WidgetSkeleton.js","names":["createTheme"],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"sourcesContent":["import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material'\nimport { type JSX, useMemo } from 'react'\nimport { createTheme } from '../../themes/createTheme.js'\nimport type { WidgetConfigPartialProps } from '../../types/widget.js'\nimport {\n  AppExpandedContainer,\n  FlexContainer,\n  RelativeContainer,\n} from '../AppContainer.js'\nimport {\n  SkeletonAmountContainer,\n  SkeletonCard,\n  SkeletonCardRow,\n  SkeletonHeaderAppBar,\n  SkeletonHeaderContainer,\n  SkeletonInputCard,\n  SkeletonPoweredByContainer,\n  SkeletonReviewButton,\n  SkeletonReviewButtonContainer,\n  SkeletonSendToWalletButton,\n  SkeletonWalletMenuButtonContainer,\n} from './WidgetSkeleton.style.js'\n\nconst SkeletonIcon = () => <Skeleton width={24} height={24} variant=\"rounded\" />\nconst SkeletonWalletMenuButton = () => (\n  <SkeletonWalletMenuButtonContainer>\n    <Skeleton width={98} height={24} variant=\"text\" />\n    <SkeletonIcon />\n  </SkeletonWalletMenuButtonContainer>\n)\n\ninterface SkeletonSelectCardProps {\n  titleWidth?: number\n  placeholderWidth?: number\n}\nconst SkeletonSelectCard = ({\n  titleWidth = 36,\n  placeholderWidth = 195,\n}: SkeletonSelectCardProps) => (\n  <SkeletonCard elevation={0}>\n    <Skeleton width={titleWidth} height={22} variant=\"text\" />\n    <SkeletonCardRow>\n      <Skeleton width={40} height={40} variant=\"circular\" />\n      <Skeleton width={placeholderWidth} height={27} variant=\"text\" />\n    </SkeletonCardRow>\n  </SkeletonCard>\n)\n\nconst SkeletonYouPayCard = () => (\n  <SkeletonInputCard elevation={0}>\n    <Skeleton width={55} height={22} variant=\"text\" />\n    <SkeletonCardRow>\n      <Skeleton width={40} height={40} variant=\"circular\" />\n      <SkeletonAmountContainer>\n        <Skeleton\n          width={48}\n          height={37}\n          variant=\"text\"\n          sx={{ marginTop: -0.75 }}\n        />\n        <Skeleton width={48} height={12} variant=\"text\" />\n      </SkeletonAmountContainer>\n    </SkeletonCardRow>\n  </SkeletonInputCard>\n)\n\nexport const WidgetSkeleton = ({\n  config,\n}: WidgetConfigPartialProps): JSX.Element => {\n  const appearance = config?.appearance\n  const hiddenUI = config?.hiddenUI || []\n  const requiredUI = config?.requiredUI || []\n  const configTheme = config?.theme\n  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')\n  const appearanceMode =\n    !appearance || appearance === 'system'\n      ? prefersDarkMode\n        ? 'dark'\n        : 'light'\n      : appearance\n\n  const theme = useMemo(() => createTheme(configTheme), [configTheme])\n\n  return (\n    <ThemeProvider\n      theme={theme}\n      defaultMode={appearanceMode}\n      modeStorageKey=\"li.fi-widget-mode\"\n      colorSchemeStorageKey=\"li.fi-widget-color-scheme\"\n      disableTransitionOnChange\n    >\n      <AppExpandedContainer>\n        <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>\n          <SkeletonHeaderContainer>\n            {!hiddenUI.includes('walletMenu') ? (\n              <SkeletonHeaderAppBar>\n                <SkeletonWalletMenuButton />\n              </SkeletonHeaderAppBar>\n            ) : null}\n            <SkeletonHeaderAppBar\n              sx={{ justifyContent: 'space-between', height: 52 }}\n            >\n              <Skeleton width={124} height={36} variant=\"text\" />\n              <SkeletonIcon />\n            </SkeletonHeaderAppBar>\n          </SkeletonHeaderContainer>\n\n          <FlexContainer\n            sx={{\n              gap: 2,\n              paddingBottom: hiddenUI.includes('poweredBy') ? 3 : 2,\n            }}\n          >\n            <SkeletonSelectCard />\n            <SkeletonSelectCard />\n            <SkeletonYouPayCard />\n            {requiredUI.includes('toAddress') ? (\n              <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />\n            ) : null}\n            <SkeletonReviewButtonContainer>\n              <SkeletonReviewButton variant=\"contained\" fullWidth>\n                &nbsp;\n              </SkeletonReviewButton>\n              {!requiredUI.includes('toAddress') ? (\n                <SkeletonSendToWalletButton variant=\"text\" fullWidth>\n                  &nbsp;\n                </SkeletonSendToWalletButton>\n              ) : null}\n            </SkeletonReviewButtonContainer>\n          </FlexContainer>\n          {!hiddenUI.includes('poweredBy') ? (\n            <SkeletonPoweredByContainer>\n              <Skeleton width={96} height={18} variant=\"text\" />\n            </SkeletonPoweredByContainer>\n          ) : null}\n        </RelativeContainer>\n      </AppExpandedContainer>\n    </ThemeProvider>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/Step/Step.js

@@ -38,10 +38,15 @@ const Step$1 = ({ step, fromToken, toToken, impactToken, toAddress }) => {
 				flex: 1
 			},
 			children: [/* @__PURE__ */ jsx(CardTitle, {
-				flex: 1,
+				sx: { flex: 1 },
 				children: getCardTitle()
-			}), /* @__PURE__ */ jsx(CardTitle, {
-				sx: { fontWeight: 600 },
+			}), /* @__PURE__ */ jsx(Box, {
+				sx: {
+					p: 2,
+					pb: 0,
+					fontSize: 14,
+					fontWeight: 600
+				},
 				children: /* @__PURE__ */ jsx(StepTimer, { step })
 			})]
 		}), /* @__PURE__ */ jsxs(Box, {
@@ -49,13 +54,17 @@ const Step$1 = ({ step, fromToken, toToken, impactToken, toAddress }) => {
 			children: [
 				fromToken ? /* @__PURE__ */ jsx(Token, {
 					token: fromToken,
-					px: 2,
-					py: 1
+					sx: {
+						px: 2,
+						py: 1
+					}
 				}) : null,
 				/* @__PURE__ */ jsx(StepActions, {
 					step,
-					px: 2,
-					py: 1,
+					sx: {
+						px: 2,
+						py: 1
+					},
 					dense: true
 				}),
 				prepareActions(step.execution?.actions ?? []).map((actionsGroup, index) => /* @__PURE__ */ jsx(StepAction, {
@@ -79,8 +88,10 @@ const Step$1 = ({ step, fromToken, toToken, impactToken, toAddress }) => {
 					token: toToken,
 					impactToken,
 					enableImpactTokenTooltip: true,
-					px: 2,
-					py: 1
+					sx: {
+						px: 2,
+						py: 1
+					}
 				}) : null
 			]
 		})]

package/dist/esm/components/Step/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","names":["Step","Card"],"sources":["../../../../src/components/Step/Step.tsx"],"sourcesContent":["import type {\n  ExecutionActionType,\n  LiFiStepExtended,\n  TokenAmount,\n} from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { Card } from '../../components/Card/Card.js'\nimport { CardTitle } from '../../components/Card/CardTitle.js'\nimport { StepActions } from '../../components/StepActions/StepActions.js'\nimport { Token } from '../../components/Token/Token.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { prepareActions } from '../../utils/prepareActions.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { StepTimer } from '../Timer/StepTimer.js'\nimport { DestinationWalletAddress } from './DestinationWalletAddress.js'\nimport { StepAction } from './StepAction.js'\n\nexport const Step: React.FC<{\n  step: LiFiStepExtended\n  fromToken?: TokenAmount\n  toToken?: TokenAmount\n  impactToken?: TokenAmount\n  toAddress?: string\n}> = ({ step, fromToken, toToken, impactToken, toAddress }) => {\n  const { t } = useTranslation()\n  const { subvariant, subvariantOptions } = useWidgetConfig()\n  const { getAddressLink } = useExplorer()\n\n  // If execution status is failed outside of actions scope,\n  // show a synthetic action to represent the failed execution\n  const actions = step.execution?.actions ?? []\n  const failedWithoutActions =\n    step.execution?.status === 'FAILED' &&\n    !actions.some((a) => a.status === 'FAILED')\n\n  const getCardTitle = () => {\n    const hasBridgeStep = step.includedSteps.some(\n      (step) => step.type === 'cross'\n    )\n    const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap')\n    const hasCustomStep = step.includedSteps.some(\n      (step) => step.type === 'custom'\n    )\n\n    const isCustomVariant = hasCustomStep && subvariant === 'custom'\n\n    if (hasBridgeStep && hasSwapStep) {\n      return isCustomVariant\n        ? subvariantOptions?.custom === 'deposit'\n          ? t('main.stepBridgeAndDeposit')\n          : t('main.stepBridgeAndBuy')\n        : t('main.stepSwapAndBridge')\n    }\n    if (hasBridgeStep) {\n      return isCustomVariant\n        ? subvariantOptions?.custom === 'deposit'\n          ? t('main.stepBridgeAndDeposit')\n          : t('main.stepBridgeAndBuy')\n        : t('main.stepBridge')\n    }\n    if (hasSwapStep) {\n      return isCustomVariant\n        ? subvariantOptions?.custom === 'deposit'\n          ? t('main.stepSwapAndDeposit')\n          : t('main.stepSwapAndBuy')\n        : t('main.stepSwap')\n    }\n    return isCustomVariant\n      ? subvariantOptions?.custom === 'deposit'\n        ? t('main.stepDeposit')\n        : t('main.stepBuy')\n      : t('main.stepSwap')\n  }\n\n  const formattedToAddress = shortenAddress(toAddress)\n  const toAddressLink = toAddress\n    ? getAddressLink(toAddress, step.action.toChainId)\n    : undefined\n\n  return (\n    <Card type={step.execution?.status === 'FAILED' ? 'error' : 'default'}>\n      <Box\n        sx={{\n          display: 'flex',\n          flex: 1,\n        }}\n      >\n        <CardTitle flex={1}>{getCardTitle()}</CardTitle>\n        <CardTitle sx={{ fontWeight: 600 }}>\n          <StepTimer step={step} />\n        </CardTitle>\n      </Box>\n      <Box\n        sx={{\n          py: 1,\n        }}\n      >\n        {fromToken ? <Token token={fromToken} px={2} py={1} /> : null}\n        <StepActions step={step} px={2} py={1} dense />\n        {prepareActions(step.execution?.actions ?? []).map(\n          (actionsGroup, index) => (\n            <StepAction key={index} step={step} actionsGroup={actionsGroup} />\n          )\n        )}\n        {failedWithoutActions ? (\n          <StepAction\n            step={step}\n            actionsGroup={[\n              {\n                status: 'FAILED',\n                type: 'EXECUTION' as ExecutionActionType, // synthetic action to represent a failed execution with no actions\n                error: step.execution?.error,\n              },\n            ]}\n          />\n        ) : null}\n        {formattedToAddress && toAddressLink ? (\n          <DestinationWalletAddress\n            step={step}\n            toAddress={formattedToAddress}\n            toAddressLink={toAddressLink}\n          />\n        ) : null}\n        {toToken ? (\n          <Token\n            token={toToken}\n            impactToken={impactToken}\n            enableImpactTokenTooltip\n            px={2}\n            py={1}\n          />\n        ) : null}\n      </Box>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAaA,UAMP,EAAE,MAAM,WAAW,SAAS,aAAa,gBAAgB;CAC7D,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,YAAY,sBAAsB,iBAAiB;CAC3D,MAAM,EAAE,mBAAmB,aAAa;CAIxC,MAAM,UAAU,KAAK,WAAW,WAAW,EAAE;CAC7C,MAAM,uBACJ,KAAK,WAAW,WAAW,YAC3B,CAAC,QAAQ,MAAM,MAAM,EAAE,WAAW,SAAS;CAE7C,MAAM,qBAAqB;EACzB,MAAM,gBAAgB,KAAK,cAAc,MACtC,SAAS,KAAK,SAAS,QACzB;EACD,MAAM,cAAc,KAAK,cAAc,MAAM,SAAS,KAAK,SAAS,OAAO;EAK3E,MAAM,kBAJgB,KAAK,cAAc,MACtC,SAAS,KAAK,SAAS,SACzB,IAEwC,eAAe;AAExD,MAAI,iBAAiB,YACnB,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,4BAA4B,GAC9B,EAAE,wBAAwB,GAC5B,EAAE,yBAAyB;AAEjC,MAAI,cACF,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,4BAA4B,GAC9B,EAAE,wBAAwB,GAC5B,EAAE,kBAAkB;AAE1B,MAAI,YACF,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,0BAA0B,GAC5B,EAAE,sBAAsB,GAC1B,EAAE,gBAAgB;AAExB,SAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,mBAAmB,GACrB,EAAE,eAAe,GACnB,EAAE,gBAAgB;;CAGxB,MAAM,qBAAqB,eAAe,UAAU;CACpD,MAAM,gBAAgB,YAClB,eAAe,WAAW,KAAK,OAAO,UAAU,GAChD,KAAA;AAEJ,QACE,qBAACC,QAAD;EAAM,MAAM,KAAK,WAAW,WAAW,WAAW,UAAU;YAA5D,CACE,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,MAAM;IACP;aAJH,CAME,oBAAC,WAAD;IAAW,MAAM;cAAI,cAAc;IAAa,CAAA,EAChD,oBAAC,WAAD;IAAW,IAAI,EAAE,YAAY,KAAK;cAChC,oBAAC,WAAD,EAAiB,MAAQ,CAAA;IACf,CAAA,CACR;MACN,qBAAC,KAAD;GACE,IAAI,EACF,IAAI,GACL;aAHH;IAKG,YAAY,oBAAC,OAAD;KAAO,OAAO;KAAW,IAAI;KAAG,IAAI;KAAK,CAAA,GAAG;IACzD,oBAAC,aAAD;KAAmB;KAAM,IAAI;KAAG,IAAI;KAAG,OAAA;KAAQ,CAAA;IAC9C,eAAe,KAAK,WAAW,WAAW,EAAE,CAAC,CAAC,KAC5C,cAAc,UACb,oBAAC,YAAD;KAA8B;KAAoB;KAAgB,EAAjD,MAAiD,CAErE;IACA,uBACC,oBAAC,YAAD;KACQ;KACN,cAAc,CACZ;MACE,QAAQ;MACR,MAAM;MACN,OAAO,KAAK,WAAW;MACxB,CACF;KACD,CAAA,GACA;IACH,sBAAsB,gBACrB,oBAAC,0BAAD;KACQ;KACN,WAAW;KACI;KACf,CAAA,GACA;IACH,UACC,oBAAC,OAAD;KACE,OAAO;KACM;KACb,0BAAA;KACA,IAAI;KACJ,IAAI;KACJ,CAAA,GACA;IACA;KACD"}
+{"version":3,"file":"Step.js","names":["Step","Card"],"sources":["../../../../src/components/Step/Step.tsx"],"sourcesContent":["import type {\n  ExecutionActionType,\n  LiFiStepExtended,\n  TokenAmount,\n} from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { Card } from '../../components/Card/Card.js'\nimport { CardTitle } from '../../components/Card/CardTitle.js'\nimport { StepActions } from '../../components/StepActions/StepActions.js'\nimport { Token } from '../../components/Token/Token.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { prepareActions } from '../../utils/prepareActions.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { StepTimer } from '../Timer/StepTimer.js'\nimport { DestinationWalletAddress } from './DestinationWalletAddress.js'\nimport { StepAction } from './StepAction.js'\n\nexport const Step: React.FC<{\n  step: LiFiStepExtended\n  fromToken?: TokenAmount\n  toToken?: TokenAmount\n  impactToken?: TokenAmount\n  toAddress?: string\n}> = ({ step, fromToken, toToken, impactToken, toAddress }) => {\n  const { t } = useTranslation()\n  const { subvariant, subvariantOptions } = useWidgetConfig()\n  const { getAddressLink } = useExplorer()\n\n  // If execution status is failed outside of actions scope,\n  // show a synthetic action to represent the failed execution\n  const actions = step.execution?.actions ?? []\n  const failedWithoutActions =\n    step.execution?.status === 'FAILED' &&\n    !actions.some((a) => a.status === 'FAILED')\n\n  const getCardTitle = () => {\n    const hasBridgeStep = step.includedSteps.some(\n      (step) => step.type === 'cross'\n    )\n    const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap')\n    const hasCustomStep = step.includedSteps.some(\n      (step) => step.type === 'custom'\n    )\n\n    const isCustomVariant = hasCustomStep && subvariant === 'custom'\n\n    if (hasBridgeStep && hasSwapStep) {\n      return isCustomVariant\n        ? subvariantOptions?.custom === 'deposit'\n          ? t('main.stepBridgeAndDeposit')\n          : t('main.stepBridgeAndBuy')\n        : t('main.stepSwapAndBridge')\n    }\n    if (hasBridgeStep) {\n      return isCustomVariant\n        ? subvariantOptions?.custom === 'deposit'\n          ? t('main.stepBridgeAndDeposit')\n          : t('main.stepBridgeAndBuy')\n        : t('main.stepBridge')\n    }\n    if (hasSwapStep) {\n      return isCustomVariant\n        ? subvariantOptions?.custom === 'deposit'\n          ? t('main.stepSwapAndDeposit')\n          : t('main.stepSwapAndBuy')\n        : t('main.stepSwap')\n    }\n    return isCustomVariant\n      ? subvariantOptions?.custom === 'deposit'\n        ? t('main.stepDeposit')\n        : t('main.stepBuy')\n      : t('main.stepSwap')\n  }\n\n  const formattedToAddress = shortenAddress(toAddress)\n  const toAddressLink = toAddress\n    ? getAddressLink(toAddress, step.action.toChainId)\n    : undefined\n\n  return (\n    <Card type={step.execution?.status === 'FAILED' ? 'error' : 'default'}>\n      <Box\n        sx={{\n          display: 'flex',\n          flex: 1,\n        }}\n      >\n        <CardTitle sx={{ flex: 1 }}>{getCardTitle()}</CardTitle>\n        <Box sx={{ p: 2, pb: 0, fontSize: 14, fontWeight: 600 }}>\n          <StepTimer step={step} />\n        </Box>\n      </Box>\n      <Box\n        sx={{\n          py: 1,\n        }}\n      >\n        {fromToken ? <Token token={fromToken} sx={{ px: 2, py: 1 }} /> : null}\n        <StepActions step={step} sx={{ px: 2, py: 1 }} dense />\n        {prepareActions(step.execution?.actions ?? []).map(\n          (actionsGroup, index) => (\n            <StepAction key={index} step={step} actionsGroup={actionsGroup} />\n          )\n        )}\n        {failedWithoutActions ? (\n          <StepAction\n            step={step}\n            actionsGroup={[\n              {\n                status: 'FAILED',\n                type: 'EXECUTION' as ExecutionActionType, // synthetic action to represent a failed execution with no actions\n                error: step.execution?.error,\n              },\n            ]}\n          />\n        ) : null}\n        {formattedToAddress && toAddressLink ? (\n          <DestinationWalletAddress\n            step={step}\n            toAddress={formattedToAddress}\n            toAddressLink={toAddressLink}\n          />\n        ) : null}\n        {toToken ? (\n          <Token\n            token={toToken}\n            impactToken={impactToken}\n            enableImpactTokenTooltip\n            sx={{ px: 2, py: 1 }}\n          />\n        ) : null}\n      </Box>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAaA,UAMP,EAAE,MAAM,WAAW,SAAS,aAAa,gBAAgB;CAC7D,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,YAAY,sBAAsB,iBAAiB;CAC3D,MAAM,EAAE,mBAAmB,aAAa;CAIxC,MAAM,UAAU,KAAK,WAAW,WAAW,EAAE;CAC7C,MAAM,uBACJ,KAAK,WAAW,WAAW,YAC3B,CAAC,QAAQ,MAAM,MAAM,EAAE,WAAW,SAAS;CAE7C,MAAM,qBAAqB;EACzB,MAAM,gBAAgB,KAAK,cAAc,MACtC,SAAS,KAAK,SAAS,QACzB;EACD,MAAM,cAAc,KAAK,cAAc,MAAM,SAAS,KAAK,SAAS,OAAO;EAK3E,MAAM,kBAJgB,KAAK,cAAc,MACtC,SAAS,KAAK,SAAS,SAGW,IAAI,eAAe;AAExD,MAAI,iBAAiB,YACnB,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,4BAA4B,GAC9B,EAAE,wBAAwB,GAC5B,EAAE,yBAAyB;AAEjC,MAAI,cACF,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,4BAA4B,GAC9B,EAAE,wBAAwB,GAC5B,EAAE,kBAAkB;AAE1B,MAAI,YACF,QAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,0BAA0B,GAC5B,EAAE,sBAAsB,GAC1B,EAAE,gBAAgB;AAExB,SAAO,kBACH,mBAAmB,WAAW,YAC5B,EAAE,mBAAmB,GACrB,EAAE,eAAe,GACnB,EAAE,gBAAgB;;CAGxB,MAAM,qBAAqB,eAAe,UAAU;CACpD,MAAM,gBAAgB,YAClB,eAAe,WAAW,KAAK,OAAO,UAAU,GAChD,KAAA;AAEJ,QACE,qBAACC,QAAD;EAAM,MAAM,KAAK,WAAW,WAAW,WAAW,UAAU;YAA5D,CACE,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,MAAM;IACP;aAJH,CAME,oBAAC,WAAD;IAAW,IAAI,EAAE,MAAM,GAAG;cAAG,cAAc;IAAa,CAAA,EACxD,oBAAC,KAAD;IAAK,IAAI;KAAE,GAAG;KAAG,IAAI;KAAG,UAAU;KAAI,YAAY;KAAK;cACrD,oBAAC,WAAD,EAAiB,MAAQ,CAAA;IACrB,CAAA,CACF;MACN,qBAAC,KAAD;GACE,IAAI,EACF,IAAI,GACL;aAHH;IAKG,YAAY,oBAAC,OAAD;KAAO,OAAO;KAAW,IAAI;MAAE,IAAI;MAAG,IAAI;MAAG;KAAI,CAAA,GAAG;IACjE,oBAAC,aAAD;KAAmB;KAAM,IAAI;MAAE,IAAI;MAAG,IAAI;MAAG;KAAE,OAAA;KAAQ,CAAA;IACtD,eAAe,KAAK,WAAW,WAAW,EAAE,CAAC,CAAC,KAC5C,cAAc,UACb,oBAAC,YAAD;KAA8B;KAAoB;KAAgB,EAAjD,MAAiD,CAErE;IACA,uBACC,oBAAC,YAAD;KACQ;KACN,cAAc,CACZ;MACE,QAAQ;MACR,MAAM;MACN,OAAO,KAAK,WAAW;MACxB,CACF;KACD,CAAA,GACA;IACH,sBAAsB,gBACrB,oBAAC,0BAAD;KACQ;KACN,WAAW;KACI;KACf,CAAA,GACA;IACH,UACC,oBAAC,OAAD;KACE,OAAO;KACM;KACb,0BAAA;KACA,IAAI;MAAE,IAAI;MAAG,IAAI;MAAG;KACpB,CAAA,GACA;IACA;KACD"}

package/dist/esm/components/Step/StepActions.js

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { useAvailableChains } from "../../hooks/useAvailableChains.js";
 import { formatTokenAmount, formatTokenPrice } from "../../utils/format.js";
 import { Card as Card$1 } from "../Card/Card.js";
@@ -28,7 +28,7 @@ const StepActions = ({ route }) => {
 			},
 			children: route.steps.flatMap((routeStep) => {
 				let steps = routeStep.includedSteps;
-				if (hiddenUI?.includes(HiddenUI.IntegratorStepDetails)) {
+				if (hiddenUI?.includes("integratorStepDetails")) {
 					const feeCollectionStep = steps.find((s) => s.tool === "feeCollection");
 					if (feeCollectionStep) {
 						steps = structuredClone(steps.filter((s) => s.tool !== "feeCollection"));

package/dist/esm/components/Step/StepActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepActions.js","names":["Card"],"sources":["../../../../src/components/Step/StepActions.tsx"],"sourcesContent":["import type { LiFiStep, RouteExtended, StepExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport ArrowForward from '@mui/icons-material/ArrowForward'\nimport { Box, Divider, Tooltip } from '@mui/material'\nimport { Fragment } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport type { StepDetailsLabelProps } from '../StepActions/types.js'\nimport {\n  StepActionsHeader,\n  StepActionsTitle,\n  StepLabelTypography,\n} from './StepActions.style.js'\n\nexport const StepActions: React.FC<{\n  route: RouteExtended\n}> = ({ route }) => {\n  const { t } = useTranslation()\n  const { subvariant, subvariantOptions, feeConfig, hiddenUI } =\n    useWidgetConfig()\n  const { isGaslessStep } = useEthereumContext()\n\n  const headerIncludedSteps = route.steps.flatMap((step) => step.includedSteps)\n\n  const flatSteps = route.steps.flatMap((routeStep) => {\n    let steps = routeStep.includedSteps\n    if (hiddenUI?.includes(HiddenUI.IntegratorStepDetails)) {\n      const feeCollectionStep = steps.find((s) => s.tool === 'feeCollection')\n      if (feeCollectionStep) {\n        steps = structuredClone(steps.filter((s) => s.tool !== 'feeCollection'))\n        steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount\n      }\n    }\n    const hasGaslessSupport = !!isGaslessStep?.(routeStep)\n    return steps.map((includedStep) => ({ includedStep, hasGaslessSupport }))\n  })\n\n  const tooltipContent = (\n    <Card indented>\n      <Box\n        sx={{\n          display: 'grid',\n          gridTemplateColumns: '32px 1fr',\n          columnGap: 1.5,\n        }}\n      >\n        {flatSteps.map(({ includedStep: step, hasGaslessSupport }, i, arr) => {\n          const showDivider = i !== arr.length - 1\n          const isFeeCollection =\n            step.type === 'protocol' && step.tool === 'feeCollection'\n          const toolName =\n            isFeeCollection && feeConfig?.name\n              ? feeConfig.name\n              : step.toolDetails.name\n          const toolLogoURI =\n            isFeeCollection && feeConfig?.logoURI\n              ? feeConfig.logoURI\n              : step.toolDetails.logoURI\n\n          return (\n            <Fragment key={step.id}>\n              <Box sx={{ display: 'flex', justifyContent: 'center' }}>\n                {toolLogoURI ? (\n                  <SmallAvatar\n                    src={toolLogoURI}\n                    alt={toolName}\n                    sx={{ width: 32, height: 32 }}\n                  >\n                    {toolName?.[0]}\n                  </SmallAvatar>\n                ) : null}\n              </Box>\n              <Box\n                sx={{ display: 'flex', flexDirection: 'column', minHeight: 32 }}\n              >\n                {step.type === 'custom' && subvariant === 'custom' ? (\n                  <CustomStepDetailsLabel\n                    step={step}\n                    subvariant={subvariant}\n                    subvariantOptions={subvariantOptions}\n                  />\n                ) : step.type === 'cross' ? (\n                  <BridgeStepDetailsLabel step={step} />\n                ) : step.type === 'protocol' ? (\n                  <ProtocolStepDetailsLabel\n                    step={step}\n                    feeConfig={feeConfig}\n                    relayerSupport={hasGaslessSupport}\n                  />\n                ) : (\n                  <SwapStepDetailsLabel step={step} />\n                )}\n                <StepDetailsContent step={step} />\n              </Box>\n              {showDivider && (\n                <Box sx={{ display: 'flex', alignItems: 'center', px: '15px' }}>\n                  <Divider\n                    orientation=\"vertical\"\n                    sx={{ my: 0.5, height: 8, borderRightWidth: 2 }}\n                  />\n                </Box>\n              )}\n              {showDivider && <Box />}\n            </Fragment>\n          )\n        })}\n      </Box>\n    </Card>\n  )\n\n  return (\n    <StepActionsHeader>\n      <StepActionsTitle>{t('main.route')}</StepActionsTitle>\n      <Tooltip\n        title={tooltipContent}\n        placement=\"bottom-end\"\n        arrow={false}\n        slotProps={{\n          tooltip: {\n            sx: {\n              bgcolor: 'transparent',\n              p: 0,\n              boxShadow: 'none',\n              maxWidth: 'none',\n            },\n          },\n          transition: {\n            style: { transformOrigin: 'right top' },\n          },\n        }}\n      >\n        <CardIconButton\n          size=\"small\"\n          sx={(theme) => ({\n            borderRadius: theme.vars.shape.borderRadiusSecondary,\n          })}\n        >\n          <Box sx={{ display: 'flex', alignItems: 'center' }}>\n            {headerIncludedSteps.map((includedStep, index) => (\n              <Fragment key={index}>\n                {index > 0 ? (\n                  <Divider sx={{ width: 8, mx: 0.5, borderWidth: 1 }} />\n                ) : null}\n                <SmallAvatar\n                  src={includedStep.toolDetails.logoURI}\n                  alt={includedStep.toolDetails.name}\n                  sx={{ width: 16, height: 16 }}\n                >\n                  {includedStep.toolDetails.name[0]}\n                </SmallAvatar>\n              </Fragment>\n            ))}\n          </Box>\n        </CardIconButton>\n      </Tooltip>\n    </StepActionsHeader>\n  )\n}\n\nconst StepDetailsContent: React.FC<{\n  step: StepExtended\n}> = ({ step }) => {\n  const { t } = useTranslation()\n\n  const sameTokenProtocolStep =\n    step.action.fromToken.chainId === step.action.toToken.chainId &&\n    step.action.fromToken.address === step.action.toToken.address\n\n  let fromAmount: string | undefined\n  if (sameTokenProtocolStep) {\n    const estimatedFromAmount =\n      BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount)\n\n    fromAmount =\n      estimatedFromAmount > 0n\n        ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals)\n        : formatTokenAmount(\n            BigInt(step.estimate.fromAmount),\n            step.action.fromToken.decimals\n          )\n  } else {\n    fromAmount = formatTokenAmount(\n      BigInt(step.estimate.fromAmount),\n      step.action.fromToken.decimals\n    )\n  }\n\n  const showToAmount =\n    step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep\n\n  return (\n    <StepLabelTypography>\n      {!showToAmount ? (\n        <>\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.estimate.fromAmount),\n              step.action.fromToken.decimals\n            ),\n          })}{' '}\n          {step.action.fromToken.symbol}\n          {' - '}\n        </>\n      ) : null}\n      {t('format.tokenAmount', {\n        value: fromAmount,\n      })}{' '}\n      {step.action.fromToken.symbol}\n      {showToAmount ? (\n        <>\n          <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.execution?.toAmount ?? step.estimate.toAmount),\n              step.execution?.toToken?.decimals ?? step.action.toToken.decimals\n            ),\n          })}{' '}\n          {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}\n        </>\n      ) : (\n        ` (${t('format.currency', {\n          value: formatTokenPrice(\n            fromAmount,\n            step.action.fromToken.priceUSD,\n            step.action.fromToken.decimals\n          ),\n        })})`\n      )}\n    </StepLabelTypography>\n  )\n}\n\nconst CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({\n  step,\n  subvariant,\n  subvariantOptions,\n}) => {\n  const { t } = useTranslation()\n\n  if (!subvariant) {\n    return null\n  }\n\n  // FIXME: step transaction request overrides step tool details, but not included step tool details\n  const toolDetails =\n    subvariant === 'custom' &&\n    (step as unknown as LiFiStep).includedSteps?.length > 0\n      ? (step as unknown as LiFiStep).includedSteps.find(\n          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'\n        )?.toolDetails || step.toolDetails\n      : step.toolDetails\n\n  const stepDetailsKey =\n    (subvariant === 'custom' && subvariantOptions?.custom) || 'checkout'\n\n  return (\n    <StepLabelTypography>\n      {t(`main.${stepDetailsKey}StepDetails`, {\n        tool: toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst BridgeStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.bridgeStepDetails', {\n        from: getChainById(step.action.fromChainId)?.name,\n        to: getChainById(step.action.toChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst SwapStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.swapStepDetails', {\n        chain: getChainById(step.action.fromChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst ProtocolStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step, feeConfig, relayerSupport }) => {\n  const { t } = useTranslation()\n  return (\n    <StepLabelTypography>\n      {step.toolDetails.key === 'feeCollection'\n        ? feeConfig?.name ||\n          (relayerSupport\n            ? t('main.fees.relayerService')\n            : t('main.fees.defaultIntegrator'))\n        : step.toolDetails.key === 'gasZip'\n          ? t('main.refuelStepDetails', {\n              tool: step.toolDetails.name,\n            })\n          : step.toolDetails.name}\n    </StepLabelTypography>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"StepActions.js","names":["Card"],"sources":["../../../../src/components/Step/StepActions.tsx"],"sourcesContent":["import type { LiFiStep, RouteExtended, StepExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport ArrowForward from '@mui/icons-material/ArrowForward'\nimport { Box, Divider, Tooltip } from '@mui/material'\nimport { Fragment } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport type { StepDetailsLabelProps } from '../StepActions/types.js'\nimport {\n  StepActionsHeader,\n  StepActionsTitle,\n  StepLabelTypography,\n} from './StepActions.style.js'\n\nexport const StepActions: React.FC<{\n  route: RouteExtended\n}> = ({ route }) => {\n  const { t } = useTranslation()\n  const { subvariant, subvariantOptions, feeConfig, hiddenUI } =\n    useWidgetConfig()\n  const { isGaslessStep } = useEthereumContext()\n\n  const headerIncludedSteps = route.steps.flatMap((step) => step.includedSteps)\n\n  const flatSteps = route.steps.flatMap((routeStep) => {\n    let steps = routeStep.includedSteps\n    if (hiddenUI?.includes(HiddenUI.IntegratorStepDetails)) {\n      const feeCollectionStep = steps.find((s) => s.tool === 'feeCollection')\n      if (feeCollectionStep) {\n        steps = structuredClone(steps.filter((s) => s.tool !== 'feeCollection'))\n        steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount\n      }\n    }\n    const hasGaslessSupport = !!isGaslessStep?.(routeStep)\n    return steps.map((includedStep) => ({ includedStep, hasGaslessSupport }))\n  })\n\n  const tooltipContent = (\n    <Card indented>\n      <Box\n        sx={{\n          display: 'grid',\n          gridTemplateColumns: '32px 1fr',\n          columnGap: 1.5,\n        }}\n      >\n        {flatSteps.map(({ includedStep: step, hasGaslessSupport }, i, arr) => {\n          const showDivider = i !== arr.length - 1\n          const isFeeCollection =\n            step.type === 'protocol' && step.tool === 'feeCollection'\n          const toolName =\n            isFeeCollection && feeConfig?.name\n              ? feeConfig.name\n              : step.toolDetails.name\n          const toolLogoURI =\n            isFeeCollection && feeConfig?.logoURI\n              ? feeConfig.logoURI\n              : step.toolDetails.logoURI\n\n          return (\n            <Fragment key={step.id}>\n              <Box sx={{ display: 'flex', justifyContent: 'center' }}>\n                {toolLogoURI ? (\n                  <SmallAvatar\n                    src={toolLogoURI}\n                    alt={toolName}\n                    sx={{ width: 32, height: 32 }}\n                  >\n                    {toolName?.[0]}\n                  </SmallAvatar>\n                ) : null}\n              </Box>\n              <Box\n                sx={{ display: 'flex', flexDirection: 'column', minHeight: 32 }}\n              >\n                {step.type === 'custom' && subvariant === 'custom' ? (\n                  <CustomStepDetailsLabel\n                    step={step}\n                    subvariant={subvariant}\n                    subvariantOptions={subvariantOptions}\n                  />\n                ) : step.type === 'cross' ? (\n                  <BridgeStepDetailsLabel step={step} />\n                ) : step.type === 'protocol' ? (\n                  <ProtocolStepDetailsLabel\n                    step={step}\n                    feeConfig={feeConfig}\n                    relayerSupport={hasGaslessSupport}\n                  />\n                ) : (\n                  <SwapStepDetailsLabel step={step} />\n                )}\n                <StepDetailsContent step={step} />\n              </Box>\n              {showDivider && (\n                <Box sx={{ display: 'flex', alignItems: 'center', px: '15px' }}>\n                  <Divider\n                    orientation=\"vertical\"\n                    sx={{ my: 0.5, height: 8, borderRightWidth: 2 }}\n                  />\n                </Box>\n              )}\n              {showDivider && <Box />}\n            </Fragment>\n          )\n        })}\n      </Box>\n    </Card>\n  )\n\n  return (\n    <StepActionsHeader>\n      <StepActionsTitle>{t('main.route')}</StepActionsTitle>\n      <Tooltip\n        title={tooltipContent}\n        placement=\"bottom-end\"\n        arrow={false}\n        slotProps={{\n          tooltip: {\n            sx: {\n              bgcolor: 'transparent',\n              p: 0,\n              boxShadow: 'none',\n              maxWidth: 'none',\n            },\n          },\n          transition: {\n            style: { transformOrigin: 'right top' },\n          },\n        }}\n      >\n        <CardIconButton\n          size=\"small\"\n          sx={(theme) => ({\n            borderRadius: theme.vars.shape.borderRadiusSecondary,\n          })}\n        >\n          <Box sx={{ display: 'flex', alignItems: 'center' }}>\n            {headerIncludedSteps.map((includedStep, index) => (\n              <Fragment key={index}>\n                {index > 0 ? (\n                  <Divider sx={{ width: 8, mx: 0.5, borderWidth: 1 }} />\n                ) : null}\n                <SmallAvatar\n                  src={includedStep.toolDetails.logoURI}\n                  alt={includedStep.toolDetails.name}\n                  sx={{ width: 16, height: 16 }}\n                >\n                  {includedStep.toolDetails.name[0]}\n                </SmallAvatar>\n              </Fragment>\n            ))}\n          </Box>\n        </CardIconButton>\n      </Tooltip>\n    </StepActionsHeader>\n  )\n}\n\nconst StepDetailsContent: React.FC<{\n  step: StepExtended\n}> = ({ step }) => {\n  const { t } = useTranslation()\n\n  const sameTokenProtocolStep =\n    step.action.fromToken.chainId === step.action.toToken.chainId &&\n    step.action.fromToken.address === step.action.toToken.address\n\n  let fromAmount: string | undefined\n  if (sameTokenProtocolStep) {\n    const estimatedFromAmount =\n      BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount)\n\n    fromAmount =\n      estimatedFromAmount > 0n\n        ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals)\n        : formatTokenAmount(\n            BigInt(step.estimate.fromAmount),\n            step.action.fromToken.decimals\n          )\n  } else {\n    fromAmount = formatTokenAmount(\n      BigInt(step.estimate.fromAmount),\n      step.action.fromToken.decimals\n    )\n  }\n\n  const showToAmount =\n    step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep\n\n  return (\n    <StepLabelTypography>\n      {!showToAmount ? (\n        <>\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.estimate.fromAmount),\n              step.action.fromToken.decimals\n            ),\n          })}{' '}\n          {step.action.fromToken.symbol}\n          {' - '}\n        </>\n      ) : null}\n      {t('format.tokenAmount', {\n        value: fromAmount,\n      })}{' '}\n      {step.action.fromToken.symbol}\n      {showToAmount ? (\n        <>\n          <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.execution?.toAmount ?? step.estimate.toAmount),\n              step.execution?.toToken?.decimals ?? step.action.toToken.decimals\n            ),\n          })}{' '}\n          {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}\n        </>\n      ) : (\n        ` (${t('format.currency', {\n          value: formatTokenPrice(\n            fromAmount,\n            step.action.fromToken.priceUSD,\n            step.action.fromToken.decimals\n          ),\n        })})`\n      )}\n    </StepLabelTypography>\n  )\n}\n\nconst CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({\n  step,\n  subvariant,\n  subvariantOptions,\n}) => {\n  const { t } = useTranslation()\n\n  if (!subvariant) {\n    return null\n  }\n\n  // FIXME: step transaction request overrides step tool details, but not included step tool details\n  const toolDetails =\n    subvariant === 'custom' &&\n    (step as unknown as LiFiStep).includedSteps?.length > 0\n      ? (step as unknown as LiFiStep).includedSteps.find(\n          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'\n        )?.toolDetails || step.toolDetails\n      : step.toolDetails\n\n  const stepDetailsKey =\n    (subvariant === 'custom' && subvariantOptions?.custom) || 'checkout'\n\n  return (\n    <StepLabelTypography>\n      {t(`main.${stepDetailsKey}StepDetails`, {\n        tool: toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst BridgeStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.bridgeStepDetails', {\n        from: getChainById(step.action.fromChainId)?.name,\n        to: getChainById(step.action.toChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst SwapStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.swapStepDetails', {\n        chain: getChainById(step.action.fromChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst ProtocolStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step, feeConfig, relayerSupport }) => {\n  const { t } = useTranslation()\n  return (\n    <StepLabelTypography>\n      {step.toolDetails.key === 'feeCollection'\n        ? feeConfig?.name ||\n          (relayerSupport\n            ? t('main.fees.relayerService')\n            : t('main.fees.defaultIntegrator'))\n        : step.toolDetails.key === 'gasZip'\n          ? t('main.refuelStepDetails', {\n              tool: step.toolDetails.name,\n            })\n          : step.toolDetails.name}\n    </StepLabelTypography>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/StepActions/StepActions.js

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { useAvailableChains } from "../../hooks/useAvailableChains.js";
 import { formatTokenAmount, formatTokenPrice } from "../../utils/format.js";
 import { CardIconButton } from "../Card/CardIconButton.js";
@@ -77,7 +77,7 @@ const IncludedSteps = ({ step }) => {
 	const { subvariant, subvariantOptions, feeConfig, hiddenUI } = useWidgetConfig();
 	const { isGaslessStep } = useEthereumContext();
 	let includedSteps = step.includedSteps;
-	if (hiddenUI?.includes(HiddenUI.IntegratorStepDetails)) {
+	if (hiddenUI?.includes("integratorStepDetails")) {
 		const feeCollectionStep = includedSteps.find((step) => step.tool === "feeCollection");
 		if (feeCollectionStep) {
 			includedSteps = structuredClone(includedSteps.filter((step) => step.tool !== "feeCollection"));

package/dist/esm/components/StepActions/StepActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepActions.js","names":["StepConnector","MuiStep","StepLabel"],"sources":["../../../../src/components/StepActions/StepActions.tsx"],"sourcesContent":["import type { LiFiStep, StepExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport ArrowForward from '@mui/icons-material/ArrowForward'\nimport ExpandLess from '@mui/icons-material/ExpandLess'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport type { StepIconProps } from '@mui/material'\nimport {\n  Badge,\n  Box,\n  Collapse,\n  Step as MuiStep,\n  Stepper,\n  Typography,\n} from '@mui/material'\nimport type { MouseEventHandler } from 'react'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { lifiLogoUrl } from '../../icons/lifi.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n  StepAvatar,\n  StepConnector,\n  StepContent,\n  StepLabel,\n  StepLabelTypography,\n} from './StepActions.style.js'\nimport type {\n  IncludedStepsProps,\n  StepActionsProps,\n  StepDetailsLabelProps,\n} from './types.js'\n\nexport const StepActions: React.FC<StepActionsProps> = ({\n  step,\n  dense,\n  ...other\n}) => {\n  const { t } = useTranslation()\n  const { subvariant } = useWidgetConfig()\n  const [cardExpanded, setCardExpanded] = useState(false)\n\n  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.stopPropagation()\n    setCardExpanded((expanded) => !expanded)\n  }\n\n  // FIXME: step transaction request overrides step tool details, but not included step tool details\n  const toolDetails =\n    subvariant === 'custom'\n      ? step.includedSteps.find(\n          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'\n        )?.toolDetails || step.toolDetails\n      : step.toolDetails\n\n  return (\n    <Box {...other}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n        }}\n      >\n        <Badge\n          overlap=\"circular\"\n          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n          badgeContent={<SmallAvatar src={lifiLogoUrl} />}\n        >\n          <StepAvatar\n            variant=\"circular\"\n            src={toolDetails.logoURI ?? lifiLogoUrl}\n            alt={toolDetails.name}\n          >\n            {toolDetails.name[0]}\n          </StepAvatar>\n        </Badge>\n        <Box\n          sx={{\n            flex: 1,\n          }}\n        >\n          <Typography\n            sx={{\n              fontSize: 18,\n              fontWeight: 600,\n              lineHeight: 1.3334,\n              ml: 2,\n            }}\n          >\n            {toolDetails.name?.includes('LI.FI')\n              ? toolDetails.name\n              : t('main.stepDetails', {\n                  tool: toolDetails.name,\n                })}\n          </Typography>\n          {/* <StepFees ml={2} step={step} /> */}\n        </Box>\n        {dense ? (\n          <CardIconButton onClick={handleExpand} size=\"small\">\n            {cardExpanded ? (\n              <ExpandLess fontSize=\"inherit\" />\n            ) : (\n              <ExpandMore fontSize=\"inherit\" />\n            )}\n          </CardIconButton>\n        ) : null}\n      </Box>\n      {dense ? (\n        <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>\n          <IncludedSteps step={step} />\n        </Collapse>\n      ) : (\n        <IncludedSteps step={step} />\n      )}\n    </Box>\n  )\n}\n\nconst IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {\n  const { subvariant, subvariantOptions, feeConfig, hiddenUI } =\n    useWidgetConfig()\n  const { isGaslessStep } = useEthereumContext()\n\n  let includedSteps = step.includedSteps\n  if (hiddenUI?.includes(HiddenUI.IntegratorStepDetails)) {\n    const feeCollectionStep = includedSteps.find(\n      (step) => step.tool === 'feeCollection'\n    )\n    if (feeCollectionStep) {\n      includedSteps = structuredClone(\n        includedSteps.filter((step) => step.tool !== 'feeCollection')\n      )\n      includedSteps[0].estimate.fromAmount =\n        feeCollectionStep.estimate.fromAmount\n    }\n  }\n\n  // biome-ignore lint/correctness/noNestedComponentDefinitions: part of the flow\n  const StepIconComponent = ({ icon }: StepIconProps) => {\n    const includedStep = includedSteps?.[Number(icon) - 1]\n    const feeCollectionStep =\n      includedStep?.type === 'protocol' &&\n      includedStep?.tool === 'feeCollection'\n    const toolName =\n      feeCollectionStep && feeConfig?.name\n        ? feeConfig?.name\n        : includedStep?.toolDetails.name\n    const toolLogoURI =\n      feeCollectionStep && feeConfig?.logoURI\n        ? feeConfig?.logoURI\n        : includedStep?.toolDetails.logoURI\n    return toolLogoURI ? (\n      <SmallAvatar\n        src={toolLogoURI}\n        alt={toolName}\n        sx={{ width: 20, height: 20 }}\n      >\n        {toolName?.[0]}\n      </SmallAvatar>\n    ) : null\n  }\n\n  const hasGaslessSupport = !!isGaslessStep?.(step)\n\n  return (\n    <Box\n      sx={{\n        mt: 1,\n      }}\n    >\n      <Stepper\n        orientation=\"vertical\"\n        connector={<StepConnector />}\n        activeStep={-1}\n      >\n        {includedSteps.map((step, i, includedSteps) => (\n          <MuiStep key={step.id} expanded>\n            <StepLabel\n              slots={{\n                stepIcon: StepIconComponent,\n              }}\n            >\n              {step.type === 'custom' && subvariant === 'custom' ? (\n                <CustomStepDetailsLabel\n                  step={step}\n                  subvariant={subvariant}\n                  subvariantOptions={subvariantOptions}\n                />\n              ) : step.type === 'cross' ? (\n                <BridgeStepDetailsLabel step={step} />\n              ) : step.type === 'protocol' ? (\n                <ProtocolStepDetailsLabel\n                  step={step}\n                  feeConfig={feeConfig}\n                  relayerSupport={hasGaslessSupport}\n                />\n              ) : (\n                <SwapStepDetailsLabel step={step} />\n              )}\n            </StepLabel>\n            <StepContent last={i === includedSteps.length - 1}>\n              <StepDetailsContent step={step} />\n            </StepContent>\n          </MuiStep>\n        ))}\n      </Stepper>\n    </Box>\n  )\n}\n\nconst StepDetailsContent: React.FC<{\n  step: StepExtended\n}> = ({ step }) => {\n  const { t } = useTranslation()\n\n  const sameTokenProtocolStep =\n    step.action.fromToken.chainId === step.action.toToken.chainId &&\n    step.action.fromToken.address === step.action.toToken.address\n\n  let fromAmount: string | undefined\n  if (sameTokenProtocolStep) {\n    const estimatedFromAmount =\n      BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount)\n\n    fromAmount =\n      estimatedFromAmount > 0n\n        ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals)\n        : formatTokenAmount(\n            BigInt(step.estimate.fromAmount),\n            step.action.fromToken.decimals\n          )\n  } else {\n    fromAmount = formatTokenAmount(\n      BigInt(step.estimate.fromAmount),\n      step.action.fromToken.decimals\n    )\n  }\n\n  const showToAmount =\n    step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep\n\n  return (\n    <Typography\n      sx={{\n        fontSize: 12,\n        lineHeight: 1,\n        fontWeight: '500',\n        color: 'text.secondary',\n        alignItems: 'center',\n        display: 'flex',\n      }}\n    >\n      {!showToAmount ? (\n        <>\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.estimate.fromAmount),\n              step.action.fromToken.decimals\n            ),\n          })}{' '}\n          {step.action.fromToken.symbol}\n          {' - '}\n        </>\n      ) : null}\n      {t('format.tokenAmount', {\n        value: fromAmount,\n      })}{' '}\n      {step.action.fromToken.symbol}\n      {showToAmount ? (\n        <>\n          <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.execution?.toAmount ?? step.estimate.toAmount),\n              step.execution?.toToken?.decimals ?? step.action.toToken.decimals\n            ),\n          })}{' '}\n          {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}\n        </>\n      ) : (\n        ` (${t('format.currency', {\n          value: formatTokenPrice(\n            fromAmount,\n            step.action.fromToken.priceUSD,\n            step.action.fromToken.decimals\n          ),\n        })})`\n      )}\n    </Typography>\n  )\n}\n\nconst CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({\n  step,\n  subvariant,\n  subvariantOptions,\n}) => {\n  const { t } = useTranslation()\n\n  if (!subvariant) {\n    return null\n  }\n\n  // FIXME: step transaction request overrides step tool details, but not included step tool details\n  const toolDetails =\n    subvariant === 'custom' &&\n    (step as unknown as LiFiStep).includedSteps?.length > 0\n      ? (step as unknown as LiFiStep).includedSteps.find(\n          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'\n        )?.toolDetails || step.toolDetails\n      : step.toolDetails\n\n  const stepDetailsKey =\n    (subvariant === 'custom' && subvariantOptions?.custom) || 'checkout'\n\n  return (\n    <StepLabelTypography>\n      {t(`main.${stepDetailsKey}StepDetails`, {\n        tool: toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst BridgeStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.bridgeStepDetails', {\n        from: getChainById(step.action.fromChainId)?.name,\n        to: getChainById(step.action.toChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst SwapStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.swapStepDetails', {\n        chain: getChainById(step.action.fromChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst ProtocolStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step, feeConfig, relayerSupport }) => {\n  const { t } = useTranslation()\n  return (\n    <StepLabelTypography>\n      {step.toolDetails.key === 'feeCollection'\n        ? feeConfig?.name ||\n          (relayerSupport\n            ? t('main.fees.relayerService')\n            : t('main.fees.defaultIntegrator'))\n        : step.toolDetails.key === 'gasZip'\n          ? t('main.refuelStepDetails', {\n              tool: step.toolDetails.name,\n            })\n          : step.toolDetails.name}\n    </StepLabelTypography>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"StepActions.js","names":["StepConnector","MuiStep","StepLabel"],"sources":["../../../../src/components/StepActions/StepActions.tsx"],"sourcesContent":["import type { LiFiStep, StepExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport ArrowForward from '@mui/icons-material/ArrowForward'\nimport ExpandLess from '@mui/icons-material/ExpandLess'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport type { StepIconProps } from '@mui/material'\nimport {\n  Badge,\n  Box,\n  Collapse,\n  Step as MuiStep,\n  Stepper,\n  Typography,\n} from '@mui/material'\nimport type { MouseEventHandler } from 'react'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { lifiLogoUrl } from '../../icons/lifi.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n  StepAvatar,\n  StepConnector,\n  StepContent,\n  StepLabel,\n  StepLabelTypography,\n} from './StepActions.style.js'\nimport type {\n  IncludedStepsProps,\n  StepActionsProps,\n  StepDetailsLabelProps,\n} from './types.js'\n\nexport const StepActions: React.FC<StepActionsProps> = ({\n  step,\n  dense,\n  ...other\n}) => {\n  const { t } = useTranslation()\n  const { subvariant } = useWidgetConfig()\n  const [cardExpanded, setCardExpanded] = useState(false)\n\n  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.stopPropagation()\n    setCardExpanded((expanded) => !expanded)\n  }\n\n  // FIXME: step transaction request overrides step tool details, but not included step tool details\n  const toolDetails =\n    subvariant === 'custom'\n      ? step.includedSteps.find(\n          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'\n        )?.toolDetails || step.toolDetails\n      : step.toolDetails\n\n  return (\n    <Box {...other}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n        }}\n      >\n        <Badge\n          overlap=\"circular\"\n          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n          badgeContent={<SmallAvatar src={lifiLogoUrl} />}\n        >\n          <StepAvatar\n            variant=\"circular\"\n            src={toolDetails.logoURI ?? lifiLogoUrl}\n            alt={toolDetails.name}\n          >\n            {toolDetails.name[0]}\n          </StepAvatar>\n        </Badge>\n        <Box\n          sx={{\n            flex: 1,\n          }}\n        >\n          <Typography\n            sx={{\n              fontSize: 18,\n              fontWeight: 600,\n              lineHeight: 1.3334,\n              ml: 2,\n            }}\n          >\n            {toolDetails.name?.includes('LI.FI')\n              ? toolDetails.name\n              : t('main.stepDetails', {\n                  tool: toolDetails.name,\n                })}\n          </Typography>\n          {/* <StepFees ml={2} step={step} /> */}\n        </Box>\n        {dense ? (\n          <CardIconButton onClick={handleExpand} size=\"small\">\n            {cardExpanded ? (\n              <ExpandLess fontSize=\"inherit\" />\n            ) : (\n              <ExpandMore fontSize=\"inherit\" />\n            )}\n          </CardIconButton>\n        ) : null}\n      </Box>\n      {dense ? (\n        <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>\n          <IncludedSteps step={step} />\n        </Collapse>\n      ) : (\n        <IncludedSteps step={step} />\n      )}\n    </Box>\n  )\n}\n\nconst IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {\n  const { subvariant, subvariantOptions, feeConfig, hiddenUI } =\n    useWidgetConfig()\n  const { isGaslessStep } = useEthereumContext()\n\n  let includedSteps = step.includedSteps\n  if (hiddenUI?.includes(HiddenUI.IntegratorStepDetails)) {\n    const feeCollectionStep = includedSteps.find(\n      (step) => step.tool === 'feeCollection'\n    )\n    if (feeCollectionStep) {\n      includedSteps = structuredClone(\n        includedSteps.filter((step) => step.tool !== 'feeCollection')\n      )\n      includedSteps[0].estimate.fromAmount =\n        feeCollectionStep.estimate.fromAmount\n    }\n  }\n\n  // biome-ignore lint/correctness/noNestedComponentDefinitions: part of the flow\n  const StepIconComponent = ({ icon }: StepIconProps) => {\n    const includedStep = includedSteps?.[Number(icon) - 1]\n    const feeCollectionStep =\n      includedStep?.type === 'protocol' &&\n      includedStep?.tool === 'feeCollection'\n    const toolName =\n      feeCollectionStep && feeConfig?.name\n        ? feeConfig?.name\n        : includedStep?.toolDetails.name\n    const toolLogoURI =\n      feeCollectionStep && feeConfig?.logoURI\n        ? feeConfig?.logoURI\n        : includedStep?.toolDetails.logoURI\n    return toolLogoURI ? (\n      <SmallAvatar\n        src={toolLogoURI}\n        alt={toolName}\n        sx={{ width: 20, height: 20 }}\n      >\n        {toolName?.[0]}\n      </SmallAvatar>\n    ) : null\n  }\n\n  const hasGaslessSupport = !!isGaslessStep?.(step)\n\n  return (\n    <Box\n      sx={{\n        mt: 1,\n      }}\n    >\n      <Stepper\n        orientation=\"vertical\"\n        connector={<StepConnector />}\n        activeStep={-1}\n      >\n        {includedSteps.map((step, i, includedSteps) => (\n          <MuiStep key={step.id} expanded>\n            <StepLabel\n              slots={{\n                stepIcon: StepIconComponent,\n              }}\n            >\n              {step.type === 'custom' && subvariant === 'custom' ? (\n                <CustomStepDetailsLabel\n                  step={step}\n                  subvariant={subvariant}\n                  subvariantOptions={subvariantOptions}\n                />\n              ) : step.type === 'cross' ? (\n                <BridgeStepDetailsLabel step={step} />\n              ) : step.type === 'protocol' ? (\n                <ProtocolStepDetailsLabel\n                  step={step}\n                  feeConfig={feeConfig}\n                  relayerSupport={hasGaslessSupport}\n                />\n              ) : (\n                <SwapStepDetailsLabel step={step} />\n              )}\n            </StepLabel>\n            <StepContent last={i === includedSteps.length - 1}>\n              <StepDetailsContent step={step} />\n            </StepContent>\n          </MuiStep>\n        ))}\n      </Stepper>\n    </Box>\n  )\n}\n\nconst StepDetailsContent: React.FC<{\n  step: StepExtended\n}> = ({ step }) => {\n  const { t } = useTranslation()\n\n  const sameTokenProtocolStep =\n    step.action.fromToken.chainId === step.action.toToken.chainId &&\n    step.action.fromToken.address === step.action.toToken.address\n\n  let fromAmount: string | undefined\n  if (sameTokenProtocolStep) {\n    const estimatedFromAmount =\n      BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount)\n\n    fromAmount =\n      estimatedFromAmount > 0n\n        ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals)\n        : formatTokenAmount(\n            BigInt(step.estimate.fromAmount),\n            step.action.fromToken.decimals\n          )\n  } else {\n    fromAmount = formatTokenAmount(\n      BigInt(step.estimate.fromAmount),\n      step.action.fromToken.decimals\n    )\n  }\n\n  const showToAmount =\n    step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep\n\n  return (\n    <Typography\n      sx={{\n        fontSize: 12,\n        lineHeight: 1,\n        fontWeight: '500',\n        color: 'text.secondary',\n        alignItems: 'center',\n        display: 'flex',\n      }}\n    >\n      {!showToAmount ? (\n        <>\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.estimate.fromAmount),\n              step.action.fromToken.decimals\n            ),\n          })}{' '}\n          {step.action.fromToken.symbol}\n          {' - '}\n        </>\n      ) : null}\n      {t('format.tokenAmount', {\n        value: fromAmount,\n      })}{' '}\n      {step.action.fromToken.symbol}\n      {showToAmount ? (\n        <>\n          <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.execution?.toAmount ?? step.estimate.toAmount),\n              step.execution?.toToken?.decimals ?? step.action.toToken.decimals\n            ),\n          })}{' '}\n          {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}\n        </>\n      ) : (\n        ` (${t('format.currency', {\n          value: formatTokenPrice(\n            fromAmount,\n            step.action.fromToken.priceUSD,\n            step.action.fromToken.decimals\n          ),\n        })})`\n      )}\n    </Typography>\n  )\n}\n\nconst CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({\n  step,\n  subvariant,\n  subvariantOptions,\n}) => {\n  const { t } = useTranslation()\n\n  if (!subvariant) {\n    return null\n  }\n\n  // FIXME: step transaction request overrides step tool details, but not included step tool details\n  const toolDetails =\n    subvariant === 'custom' &&\n    (step as unknown as LiFiStep).includedSteps?.length > 0\n      ? (step as unknown as LiFiStep).includedSteps.find(\n          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'\n        )?.toolDetails || step.toolDetails\n      : step.toolDetails\n\n  const stepDetailsKey =\n    (subvariant === 'custom' && subvariantOptions?.custom) || 'checkout'\n\n  return (\n    <StepLabelTypography>\n      {t(`main.${stepDetailsKey}StepDetails`, {\n        tool: toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst BridgeStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.bridgeStepDetails', {\n        from: getChainById(step.action.fromChainId)?.name,\n        to: getChainById(step.action.toChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst SwapStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.swapStepDetails', {\n        chain: getChainById(step.action.fromChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst ProtocolStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step, feeConfig, relayerSupport }) => {\n  const { t } = useTranslation()\n  return (\n    <StepLabelTypography>\n      {step.toolDetails.key === 'feeCollection'\n        ? feeConfig?.name ||\n          (relayerSupport\n            ? t('main.fees.relayerService')\n            : t('main.fees.defaultIntegrator'))\n        : step.toolDetails.key === 'gasZip'\n          ? t('main.refuelStepDetails', {\n              tool: step.toolDetails.name,\n            })\n          : step.toolDetails.name}\n    </StepLabelTypography>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/Tabs/Tabs.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.style.js","names":["Tabs","MuiTabs","Tab","MuiTab"],"sources":["../../../../src/components/Tabs/Tabs.style.tsx"],"sourcesContent":["import type { TabProps } from '@mui/material'\nimport {\n  Tab as MuiTab,\n  Tabs as MuiTabs,\n  styled,\n  tabClasses,\n  tabsClasses,\n} from '@mui/material'\nimport type React from 'react'\n\nconst Tabs = styled(MuiTabs)(({ theme }) => ({\n  flex: 1,\n  [`.${tabsClasses.indicator}`]: {\n    top: theme.spacing(0.5),\n    left: theme.spacing(0.5),\n    height: `calc(100% - ${theme.spacing(1)})`,\n    width: `calc(100% - ${theme.spacing(1)})`,\n  },\n  [`.${tabsClasses.fixed}`]: {\n    padding: theme.spacing(0.5),\n  },\n}))\n\nexport const CardTabs: React.FC<React.ComponentProps<typeof MuiTabs>> = styled(\n  Tabs\n)(({ theme }) => ({\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  [`.${tabsClasses.indicator}`]: {\n    backgroundColor: theme.vars.palette.background.paper,\n  },\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n    [`.${tabsClasses.indicator}`]: {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,\n    },\n  }),\n}))\n\nexport const Tab: React.FC<React.ComponentProps<typeof MuiTab>> = styled(\n  MuiTab\n)<TabProps>(({ theme }) => ({\n  zIndex: 1,\n  flex: 1,\n  textTransform: 'none',\n  fontSize: '1rem',\n  fontWeight: 700,\n  color: theme.vars.palette.common.onBackground,\n  [`&.${tabClasses.selected}`]: {\n    color: theme.vars.palette.common.onBackground,\n  },\n}))\n"],"mappings":";AAuBA,MAAa,WAA2D,OAb3D,OAAOC,KAAQ,EAAE,EAAE,aAAa;CAC3C,MAAM;EACL,IAAI,YAAY,cAAc;EAC7B,KAAK,MAAM,QAAQ,GAAI;EACvB,MAAM,MAAM,QAAQ,GAAI;EACxB,QAAQ,eAAe,MAAM,QAAQ,EAAE,CAAC;EACxC,OAAO,eAAe,MAAM,QAAQ,EAAE,CAAC;EACxC;EACA,IAAI,YAAY,UAAU,EACzB,SAAS,MAAM,QAAQ,GAAI,EAC5B;CACF,EAAE,CAIF,EAAE,EAAE,aAAa;CAChB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,MAAM,KAAK,QAAQ,WAAW,OAChD;CACD,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;GAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,WAAW,qBAC7E;EACF,CAAC;CACH,EAAE;AAEH,MAAaC,QAAqD,OAChEC,IACD,EAAY,EAAE,aAAa;CAC1B,QAAQ;CACR,MAAM;CACN,eAAe;CACf,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,OAAO;EAChC,KAAK,WAAW,aAAa,EAC5B,OAAO,MAAM,KAAK,QAAQ,OAAO,cAClC;CACF,EAAE"}
+{"version":3,"file":"Tabs.style.js","names":["Tabs","MuiTabs","Tab","MuiTab"],"sources":["../../../../src/components/Tabs/Tabs.style.tsx"],"sourcesContent":["import type { TabProps } from '@mui/material'\nimport {\n  Tab as MuiTab,\n  Tabs as MuiTabs,\n  styled,\n  tabClasses,\n  tabsClasses,\n} from '@mui/material'\nimport type React from 'react'\n\nconst Tabs = styled(MuiTabs)(({ theme }) => ({\n  flex: 1,\n  [`.${tabsClasses.indicator}`]: {\n    top: theme.spacing(0.5),\n    left: theme.spacing(0.5),\n    height: `calc(100% - ${theme.spacing(1)})`,\n    width: `calc(100% - ${theme.spacing(1)})`,\n  },\n  [`.${tabsClasses.fixed}`]: {\n    padding: theme.spacing(0.5),\n  },\n}))\n\nexport const CardTabs: React.FC<React.ComponentProps<typeof MuiTabs>> = styled(\n  Tabs\n)(({ theme }) => ({\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  [`.${tabsClasses.indicator}`]: {\n    backgroundColor: theme.vars.palette.background.paper,\n  },\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n    [`.${tabsClasses.indicator}`]: {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,\n    },\n  }),\n}))\n\nexport const Tab: React.FC<React.ComponentProps<typeof MuiTab>> = styled(\n  MuiTab\n)<TabProps>(({ theme }) => ({\n  zIndex: 1,\n  flex: 1,\n  textTransform: 'none',\n  fontSize: '1rem',\n  fontWeight: 700,\n  color: theme.vars.palette.common.onBackground,\n  [`&.${tabClasses.selected}`]: {\n    color: theme.vars.palette.common.onBackground,\n  },\n}))\n"],"mappings":";AAuBA,MAAa,WAA2D,OAb3D,OAAOC,KAAQ,EAAE,EAAE,aAAa;CAC3C,MAAM;EACL,IAAI,YAAY,cAAc;EAC7B,KAAK,MAAM,QAAQ,GAAI;EACvB,MAAM,MAAM,QAAQ,GAAI;EACxB,QAAQ,eAAe,MAAM,QAAQ,EAAE,CAAC;EACxC,OAAO,eAAe,MAAM,QAAQ,EAAE,CAAC;EACxC;EACA,IAAI,YAAY,UAAU,EACzB,SAAS,MAAM,QAAQ,GAAI,EAC5B;CACF,EAGCD,CACD,EAAE,EAAE,aAAa;CAChB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,MAAM,KAAK,QAAQ,WAAW,OAChD;CACD,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;GAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,WAAW,qBAC7E;EACF,CAAC;CACH,EAAE;AAEH,MAAaE,QAAqD,OAChEC,IACD,EAAY,EAAE,aAAa;CAC1B,QAAQ;CACR,MAAM;CACN,eAAe;CACf,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,OAAO;EAChC,KAAK,WAAW,aAAa,EAC5B,OAAO,MAAM,KAAK,QAAQ,OAAO,cAClC;CACF,EAAE"}

package/dist/esm/components/Timer/StepTimer.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepTimer.js","names":[],"sources":["../../../../src/components/Timer/StepTimer.tsx"],"sourcesContent":["import type { LiFiStepExtended } from '@lifi/sdk'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useExecutionTimer } from '../../hooks/timer/useExecutionTimer.js'\nimport { TimerContent } from './TimerContent.js'\n\nexport const getExpiryTimestamp = (step: LiFiStepExtended): Date => {\n  const execution = step?.execution\n  if (!execution) {\n    return new Date()\n  }\n  const expiry = new Date(\n    (execution.signedAt ?? Date.now()) + step.estimate.executionDuration * 1000\n  )\n  return expiry\n}\n\nexport const StepTimer: React.FC<{\n  step: LiFiStepExtended\n  hideInProgress?: boolean\n}> = ({ step, hideInProgress }) => {\n  const { i18n } = useTranslation()\n\n  if (\n    step.execution?.status === 'DONE' ||\n    step.execution?.status === 'FAILED'\n  ) {\n    return null\n  }\n\n  if (!step.execution?.signedAt) {\n    const showSeconds = step.estimate.executionDuration < 60\n    const duration = showSeconds\n      ? Math.floor(step.estimate.executionDuration)\n      : Math.floor(step.estimate.executionDuration / 60)\n    return (\n      <TimerContent>\n        {duration.toLocaleString(i18n.language, {\n          style: 'unit',\n          unit: showSeconds ? 'second' : 'minute',\n          unitDisplay: 'narrow',\n        })}\n      </TimerContent>\n    )\n  }\n\n  return (\n    <ExecutionTimer\n      expiryTimestamp={getExpiryTimestamp(step)}\n      hideInProgress={hideInProgress}\n    />\n  )\n}\n\nexport const ExecutionTimerText = ({\n  expiryTimestamp,\n}: {\n  expiryTimestamp: Date\n}): string | null => {\n  const { formatted } = useExecutionTimer(expiryTimestamp)\n  return formatted\n}\n\nexport const ExecutionTimer = ({\n  expiryTimestamp,\n  hideInProgress,\n}: {\n  expiryTimestamp: Date\n  hideInProgress?: boolean\n}): JSX.Element | string | null => {\n  const { t } = useTranslation()\n  const { formatted, isTimerExpired } = useExecutionTimer(expiryTimestamp)\n\n  if (isTimerExpired) {\n    if (hideInProgress) {\n      return null\n    }\n    return t('main.inProgress')\n  }\n\n  return <TimerContent>{formatted}</TimerContent>\n}\n"],"mappings":";;;;;AAMA,MAAa,sBAAsB,SAAiC;CAClE,MAAM,YAAY,MAAM;AACxB,KAAI,CAAC,UACH,wBAAO,IAAI,MAAM;AAKnB,QAHe,IAAI,MAChB,UAAU,YAAY,KAAK,KAAK,IAAI,KAAK,SAAS,oBAAoB,IACxE;;AAIH,MAAa,aAGP,EAAE,MAAM,qBAAqB;CACjC,MAAM,EAAE,SAAS,gBAAgB;AAEjC,KACE,KAAK,WAAW,WAAW,UAC3B,KAAK,WAAW,WAAW,SAE3B,QAAO;AAGT,KAAI,CAAC,KAAK,WAAW,UAAU;EAC7B,MAAM,cAAc,KAAK,SAAS,oBAAoB;AAItD,SACE,oBAAC,cAAD,EAAA,WAJe,cACb,KAAK,MAAM,KAAK,SAAS,kBAAkB,GAC3C,KAAK,MAAM,KAAK,SAAS,oBAAoB,GAAG,EAGtC,eAAe,KAAK,UAAU;GACtC,OAAO;GACP,MAAM,cAAc,WAAW;GAC/B,aAAa;GACd,CAAC,EACW,CAAA;;AAInB,QACE,oBAAC,gBAAD;EACE,iBAAiB,mBAAmB,KAAK;EACzB;EAChB,CAAA;;AAIN,MAAa,sBAAsB,EACjC,sBAGmB;CACnB,MAAM,EAAE,cAAc,kBAAkB,gBAAgB;AACxD,QAAO;;AAGT,MAAa,kBAAkB,EAC7B,iBACA,qBAIiC;CACjC,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,WAAW,mBAAmB,kBAAkB,gBAAgB;AAExE,KAAI,gBAAgB;AAClB,MAAI,eACF,QAAO;AAET,SAAO,EAAE,kBAAkB;;AAG7B,QAAO,oBAAC,cAAD,EAAA,UAAe,WAAyB,CAAA"}
+{"version":3,"file":"StepTimer.js","names":[],"sources":["../../../../src/components/Timer/StepTimer.tsx"],"sourcesContent":["import type { LiFiStepExtended } from '@lifi/sdk'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useExecutionTimer } from '../../hooks/timer/useExecutionTimer.js'\nimport { TimerContent } from './TimerContent.js'\n\nexport const getExpiryTimestamp = (step: LiFiStepExtended): Date => {\n  const execution = step?.execution\n  if (!execution) {\n    return new Date()\n  }\n  const expiry = new Date(\n    (execution.signedAt ?? Date.now()) + step.estimate.executionDuration * 1000\n  )\n  return expiry\n}\n\nexport const StepTimer: React.FC<{\n  step: LiFiStepExtended\n  hideInProgress?: boolean\n}> = ({ step, hideInProgress }) => {\n  const { i18n } = useTranslation()\n\n  if (\n    step.execution?.status === 'DONE' ||\n    step.execution?.status === 'FAILED'\n  ) {\n    return null\n  }\n\n  if (!step.execution?.signedAt) {\n    const showSeconds = step.estimate.executionDuration < 60\n    const duration = showSeconds\n      ? Math.floor(step.estimate.executionDuration)\n      : Math.floor(step.estimate.executionDuration / 60)\n    return (\n      <TimerContent>\n        {duration.toLocaleString(i18n.language, {\n          style: 'unit',\n          unit: showSeconds ? 'second' : 'minute',\n          unitDisplay: 'narrow',\n        })}\n      </TimerContent>\n    )\n  }\n\n  return (\n    <ExecutionTimer\n      expiryTimestamp={getExpiryTimestamp(step)}\n      hideInProgress={hideInProgress}\n    />\n  )\n}\n\nexport const ExecutionTimerText = ({\n  expiryTimestamp,\n}: {\n  expiryTimestamp: Date\n}): string | null => {\n  const { formatted } = useExecutionTimer(expiryTimestamp)\n  return formatted\n}\n\nexport const ExecutionTimer = ({\n  expiryTimestamp,\n  hideInProgress,\n}: {\n  expiryTimestamp: Date\n  hideInProgress?: boolean\n}): JSX.Element | string | null => {\n  const { t } = useTranslation()\n  const { formatted, isTimerExpired } = useExecutionTimer(expiryTimestamp)\n\n  if (isTimerExpired) {\n    if (hideInProgress) {\n      return null\n    }\n    return t('main.inProgress')\n  }\n\n  return <TimerContent>{formatted}</TimerContent>\n}\n"],"mappings":";;;;;AAMA,MAAa,sBAAsB,SAAiC;CAClE,MAAM,YAAY,MAAM;AACxB,KAAI,CAAC,UACH,wBAAO,IAAI,MAAM;AAKnB,QAAO,IAHY,MAChB,UAAU,YAAY,KAAK,KAAK,IAAI,KAAK,SAAS,oBAAoB,IAE5D;;AAGf,MAAa,aAGP,EAAE,MAAM,qBAAqB;CACjC,MAAM,EAAE,SAAS,gBAAgB;AAEjC,KACE,KAAK,WAAW,WAAW,UAC3B,KAAK,WAAW,WAAW,SAE3B,QAAO;AAGT,KAAI,CAAC,KAAK,WAAW,UAAU;EAC7B,MAAM,cAAc,KAAK,SAAS,oBAAoB;AAItD,SACE,oBAAC,cAAD,EAAA,WAJe,cACb,KAAK,MAAM,KAAK,SAAS,kBAAkB,GAC3C,KAAK,MAAM,KAAK,SAAS,oBAAoB,GAAG,EAGtC,eAAe,KAAK,UAAU;GACtC,OAAO;GACP,MAAM,cAAc,WAAW;GAC/B,aAAa;GACd,CAAC,EACW,CAAA;;AAInB,QACE,oBAAC,gBAAD;EACE,iBAAiB,mBAAmB,KAAK;EACzB;EAChB,CAAA;;AAIN,MAAa,sBAAsB,EACjC,sBAGmB;CACnB,MAAM,EAAE,cAAc,kBAAkB,gBAAgB;AACxD,QAAO;;AAGT,MAAa,kBAAkB,EAC7B,iBACA,qBAIiC;CACjC,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,WAAW,mBAAmB,kBAAkB,gBAAgB;AAExE,KAAI,gBAAgB;AAClB,MAAI,eACF,QAAO;AAET,SAAO,EAAE,kBAAkB;;AAG7B,QAAO,oBAAC,cAAD,EAAA,UAAe,WAAyB,CAAA"}

package/dist/esm/components/Timer/TimerContent.js

@@ -17,6 +17,7 @@ const TimerContent = ({ children }) => {
 				height: 14
 			},
 			children: [/* @__PURE__ */ jsx(IconTypography, {
+				component: "span",
 				sx: {
 					marginRight: .5,
 					fontSize: 16,

package/dist/esm/components/Timer/TimerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimerContent.js","names":[],"sources":["../../../../src/components/Timer/TimerContent.tsx"],"sourcesContent":["import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'\nimport { Box, Tooltip } from '@mui/material'\nimport type { FC, PropsWithChildren } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { IconTypography } from '../IconTypography.js'\n\nexport const TimerContent: FC<PropsWithChildren> = ({ children }) => {\n  const { t } = useTranslation()\n  return (\n    <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>\n      <Box\n        component=\"span\"\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          height: 14,\n        }}\n      >\n        <IconTypography\n          sx={{ marginRight: 0.5, fontSize: 16, display: 'inline-flex' }}\n        >\n          <AccessTimeFilled fontSize=\"inherit\" />\n        </IconTypography>\n        <Box\n          component=\"span\"\n          sx={{\n            fontVariantNumeric: 'tabular-nums',\n            cursor: 'help',\n          }}\n        >\n          {children}\n        </Box>\n      </Box>\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;AAMA,MAAa,gBAAuC,EAAE,eAAe;CACnE,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,oBAAC,SAAD;EAAS,OAAO,EAAE,wBAAwB;EAAE,IAAI,EAAE,QAAQ,QAAQ;YAChE,qBAAC,KAAD;GACE,WAAU;GACV,IAAI;IACF,SAAS;IACT,YAAY;IACZ,QAAQ;IACT;aANH,CAQE,oBAAC,gBAAD;IACE,IAAI;KAAE,aAAa;KAAK,UAAU;KAAI,SAAS;KAAe;cAE9D,oBAAC,kBAAD,EAAkB,UAAS,WAAY,CAAA;IACxB,CAAA,EACjB,oBAAC,KAAD;IACE,WAAU;IACV,IAAI;KACF,oBAAoB;KACpB,QAAQ;KACT;IAEA;IACG,CAAA,CACF;;EACE,CAAA"}
+{"version":3,"file":"TimerContent.js","names":[],"sources":["../../../../src/components/Timer/TimerContent.tsx"],"sourcesContent":["import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'\nimport { Box, Tooltip } from '@mui/material'\nimport type { FC, PropsWithChildren } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { IconTypography } from '../IconTypography.js'\n\nexport const TimerContent: FC<PropsWithChildren> = ({ children }) => {\n  const { t } = useTranslation()\n  return (\n    <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>\n      <Box\n        component=\"span\"\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          height: 14,\n        }}\n      >\n        <IconTypography\n          component=\"span\"\n          sx={{ marginRight: 0.5, fontSize: 16, display: 'inline-flex' }}\n        >\n          <AccessTimeFilled fontSize=\"inherit\" />\n        </IconTypography>\n        <Box\n          component=\"span\"\n          sx={{\n            fontVariantNumeric: 'tabular-nums',\n            cursor: 'help',\n          }}\n        >\n          {children}\n        </Box>\n      </Box>\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;AAMA,MAAa,gBAAuC,EAAE,eAAe;CACnE,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,oBAAC,SAAD;EAAS,OAAO,EAAE,wBAAwB;EAAE,IAAI,EAAE,QAAQ,QAAQ;YAChE,qBAAC,KAAD;GACE,WAAU;GACV,IAAI;IACF,SAAS;IACT,YAAY;IACZ,QAAQ;IACT;aANH,CAQE,oBAAC,gBAAD;IACE,WAAU;IACV,IAAI;KAAE,aAAa;KAAK,UAAU;KAAI,SAAS;KAAe;cAE9D,oBAAC,kBAAD,EAAkB,UAAS,WAAY,CAAA;IACxB,CAAA,EACjB,oBAAC,KAAD;IACE,WAAU;IACV,IAAI;KACF,oBAAoB;KACpB,QAAQ;KACT;IAEA;IACG,CAAA,CACF;;EACE,CAAA"}

package/dist/esm/components/Token/Token.js

@@ -88,7 +88,7 @@ const TokenBase = ({ token, impactToken, enableImpactTokenTooltip, step, stepVis
 			}), /* @__PURE__ */ jsxs(TextSecondaryContainer, { children: [
 				/* @__PURE__ */ jsx(TextSecondary, { children: t("format.currency", { value: tokenPrice }) }),
 				impactToken ? /* @__PURE__ */ jsx(TextSecondary, {
-					px: .5,
+					sx: { px: .5 },
 					dot: true,
 					children: "•"
 				}) : null,
@@ -107,7 +107,7 @@ const TokenBase = ({ token, impactToken, enableImpactTokenTooltip, step, stepVis
 					})
 				}) : null,
 				!disableDescription ? /* @__PURE__ */ jsx(TextSecondary, {
-					px: .5,
+					sx: { px: .5 },
 					dot: true,
 					children: "•"
 				}) : null,

package/dist/esm/components/Token/Token.js.map

@@ -1 +1 @@
-{"version":3,"file":"Token.js","names":[],"sources":["../../../../src/components/Token/Token.tsx"],"sourcesContent":["import type { LiFiStep, TokenAmount } from '@lifi/sdk'\nimport type { BoxProps } from '@mui/material'\nimport { Box, Grow, Skeleton, Tooltip } from '@mui/material'\nimport type { FC, PropsWithChildren, ReactElement } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { AvatarBadgedSkeleton } from '../Avatar/Avatar.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { TextFitter } from '../TextFitter/TextFitter.js'\nimport { TextSecondary, TextSecondaryContainer } from './Token.style.js'\n\ninterface TokenProps {\n  token: TokenAmount\n  impactToken?: TokenAmount\n  enableImpactTokenTooltip?: boolean\n  step?: LiFiStep\n  stepVisible?: boolean\n  disableDescription?: boolean\n  isLoading?: boolean\n}\n\nexport const Token: FC<TokenProps & BoxProps> = ({ token, ...other }) => {\n  if (!token.priceUSD || !token.logoURI) {\n    return <TokenFallback token={token} {...other} />\n  }\n  return <TokenBase token={token} {...other} />\n}\n\nconst TokenFallback: FC<TokenProps & BoxProps> = ({\n  token,\n  isLoading,\n  ...other\n}) => {\n  const { token: chainToken, isLoading: isLoadingToken } = useToken(\n    token.chainId,\n    token.address\n  )\n\n  return (\n    <TokenBase\n      token={{ ...token, ...chainToken } as TokenAmount}\n      isLoading={isLoading || isLoadingToken}\n      {...other}\n    />\n  )\n}\n\nconst TokenBase: FC<TokenProps & BoxProps> = ({\n  token,\n  impactToken,\n  enableImpactTokenTooltip,\n  step,\n  stepVisible,\n  disableDescription,\n  isLoading,\n  ...other\n}) => {\n  const { t, i18n } = useTranslation()\n  const { chain } = useChain(token?.chainId)\n\n  if (isLoading) {\n    return (\n      <TokenSkeleton\n        token={token}\n        step={step}\n        disableDescription={disableDescription}\n        {...other}\n      />\n    )\n  }\n\n  const tokenAmount = formatTokenAmount(token.amount, token.decimals)\n  const tokenPrice = formatTokenPrice(\n    token.amount,\n    token.priceUSD,\n    token.decimals\n  )\n\n  let priceImpact: number | undefined\n  let priceImpactPercent: number | undefined\n  if (impactToken) {\n    priceImpact = getPriceImpact({\n      fromToken: impactToken,\n      fromAmount: impactToken.amount,\n      toToken: token,\n      toAmount: token.amount,\n    })\n    priceImpactPercent = priceImpact * 100\n  }\n\n  const tokenOnChain = !disableDescription ? (\n    <TextSecondary>\n      {t('main.tokenOnChain', {\n        tokenSymbol: token.symbol,\n        chainName: chain?.name,\n      })}\n    </TextSecondary>\n  ) : null\n\n  return (\n    <Box\n      {...other}\n      sx={[\n        {\n          flex: 1,\n          display: 'flex',\n          alignItems: 'center',\n        },\n        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n      ]}\n    >\n      <TokenAvatar\n        token={token}\n        chain={chain}\n        isLoading={isLoading}\n        sx={{ marginRight: 2 }}\n      />\n      <Box\n        sx={{\n          flex: 1,\n        }}\n      >\n        <Box\n          sx={{\n            mb: 0.5,\n            height: 24,\n            display: 'flex',\n            alignItems: 'center',\n          }}\n          title={tokenAmount}\n        >\n          <TextFitter\n            height={30}\n            textStyle={{\n              fontWeight: 700,\n            }}\n          >\n            {t('format.tokenAmount', {\n              value: tokenAmount,\n            })}\n          </TextFitter>\n        </Box>\n        <TextSecondaryContainer>\n          <TextSecondary>\n            {t('format.currency', {\n              value: tokenPrice,\n            })}\n          </TextSecondary>\n          {impactToken ? (\n            <TextSecondary px={0.5} dot>\n              &#x2022;\n            </TextSecondary>\n          ) : null}\n          {impactToken ? (\n            enableImpactTokenTooltip ? (\n              <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>\n                <TextSecondary>\n                  {t('format.percent', {\n                    value: priceImpact,\n                    usePlusSign: true,\n                  })}\n                </TextSecondary>\n              </Tooltip>\n            ) : (\n              <TextSecondary\n                title={priceImpactPercent?.toLocaleString(i18n.language, {\n                  maximumFractionDigits: 9,\n                })}\n              >\n                {t('format.percent', { value: priceImpact, usePlusSign: true })}\n              </TextSecondary>\n            )\n          ) : null}\n          {!disableDescription ? (\n            <TextSecondary px={0.5} dot>\n              &#x2022;\n            </TextSecondary>\n          ) : null}\n          {!disableDescription && step ? (\n            <TokenStep\n              step={step}\n              stepVisible={stepVisible}\n              disableDescription={disableDescription}\n            >\n              {tokenOnChain}\n            </TokenStep>\n          ) : (\n            tokenOnChain\n          )}\n        </TextSecondaryContainer>\n      </Box>\n    </Box>\n  )\n}\n\nconst TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({\n  step,\n  stepVisible,\n  disableDescription,\n  children,\n}) => {\n  return (\n    <Box\n      sx={{\n        flex: 1,\n        position: 'relative',\n        overflow: 'hidden',\n        height: 16,\n      }}\n    >\n      <Grow\n        in={!stepVisible && !disableDescription}\n        style={{\n          position: 'absolute',\n        }}\n        appear={false}\n        timeout={225}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            height: 16,\n          }}\n        >\n          {children as ReactElement}\n        </Box>\n      </Grow>\n      <Grow\n        in={stepVisible}\n        style={{\n          position: 'absolute',\n        }}\n        appear={false}\n        timeout={225}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            height: 16,\n          }}\n        >\n          <Box\n            sx={{\n              mr: 0.75,\n              height: 16,\n            }}\n          >\n            <SmallAvatar\n              src={step?.toolDetails.logoURI}\n              alt={step?.toolDetails.name}\n            >\n              {step?.toolDetails.name[0]}\n            </SmallAvatar>\n          </Box>\n          <TextSecondary>{step?.toolDetails.name}</TextSecondary>\n        </Box>\n      </Grow>\n    </Box>\n  )\n}\n\nexport const TokenSkeleton: FC<Partial<TokenProps> & BoxProps> = ({\n  step,\n  disableDescription,\n  ...other\n}) => {\n  return (\n    <Box\n      {...other}\n      sx={[\n        {\n          flex: 1,\n        },\n        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n      ]}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          flex: 1,\n          alignItems: 'center',\n        }}\n      >\n        <AvatarBadgedSkeleton sx={{ marginRight: 2 }} />\n        <Box\n          sx={{\n            flex: 1,\n          }}\n        >\n          <Skeleton width={112} height={28} variant=\"text\" />\n          <TextSecondaryContainer>\n            <Skeleton\n              width={48}\n              height={12}\n              variant=\"rounded\"\n              sx={{ marginTop: 0.5 }}\n            />\n            {!step && !disableDescription ? (\n              <Skeleton\n                width={96}\n                height={12}\n                variant=\"rounded\"\n                sx={{ marginTop: 0.5, marginLeft: 1.5 }}\n              />\n            ) : null}\n          </TextSecondaryContainer>\n        </Box>\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Token.js","names":[],"sources":["../../../../src/components/Token/Token.tsx"],"sourcesContent":["import type { LiFiStep, TokenAmount } from '@lifi/sdk'\nimport type { BoxProps } from '@mui/material'\nimport { Box, Grow, Skeleton, Tooltip } from '@mui/material'\nimport type { FC, PropsWithChildren, ReactElement } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { AvatarBadgedSkeleton } from '../Avatar/Avatar.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { TextFitter } from '../TextFitter/TextFitter.js'\nimport { TextSecondary, TextSecondaryContainer } from './Token.style.js'\n\ninterface TokenProps {\n  token: TokenAmount\n  impactToken?: TokenAmount\n  enableImpactTokenTooltip?: boolean\n  step?: LiFiStep\n  stepVisible?: boolean\n  disableDescription?: boolean\n  isLoading?: boolean\n}\n\nexport const Token: FC<TokenProps & BoxProps> = ({ token, ...other }) => {\n  if (!token.priceUSD || !token.logoURI) {\n    return <TokenFallback token={token} {...other} />\n  }\n  return <TokenBase token={token} {...other} />\n}\n\nconst TokenFallback: FC<TokenProps & BoxProps> = ({\n  token,\n  isLoading,\n  ...other\n}) => {\n  const { token: chainToken, isLoading: isLoadingToken } = useToken(\n    token.chainId,\n    token.address\n  )\n\n  return (\n    <TokenBase\n      token={{ ...token, ...chainToken } as TokenAmount}\n      isLoading={isLoading || isLoadingToken}\n      {...other}\n    />\n  )\n}\n\nconst TokenBase: FC<TokenProps & BoxProps> = ({\n  token,\n  impactToken,\n  enableImpactTokenTooltip,\n  step,\n  stepVisible,\n  disableDescription,\n  isLoading,\n  ...other\n}) => {\n  const { t, i18n } = useTranslation()\n  const { chain } = useChain(token?.chainId)\n\n  if (isLoading) {\n    return (\n      <TokenSkeleton\n        token={token}\n        step={step}\n        disableDescription={disableDescription}\n        {...other}\n      />\n    )\n  }\n\n  const tokenAmount = formatTokenAmount(token.amount, token.decimals)\n  const tokenPrice = formatTokenPrice(\n    token.amount,\n    token.priceUSD,\n    token.decimals\n  )\n\n  let priceImpact: number | undefined\n  let priceImpactPercent: number | undefined\n  if (impactToken) {\n    priceImpact = getPriceImpact({\n      fromToken: impactToken,\n      fromAmount: impactToken.amount,\n      toToken: token,\n      toAmount: token.amount,\n    })\n    priceImpactPercent = priceImpact * 100\n  }\n\n  const tokenOnChain = !disableDescription ? (\n    <TextSecondary>\n      {t('main.tokenOnChain', {\n        tokenSymbol: token.symbol,\n        chainName: chain?.name,\n      })}\n    </TextSecondary>\n  ) : null\n\n  return (\n    <Box\n      {...other}\n      sx={[\n        {\n          flex: 1,\n          display: 'flex',\n          alignItems: 'center',\n        },\n        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n      ]}\n    >\n      <TokenAvatar\n        token={token}\n        chain={chain}\n        isLoading={isLoading}\n        sx={{ marginRight: 2 }}\n      />\n      <Box\n        sx={{\n          flex: 1,\n        }}\n      >\n        <Box\n          sx={{\n            mb: 0.5,\n            height: 24,\n            display: 'flex',\n            alignItems: 'center',\n          }}\n          title={tokenAmount}\n        >\n          <TextFitter\n            height={30}\n            textStyle={{\n              fontWeight: 700,\n            }}\n          >\n            {t('format.tokenAmount', {\n              value: tokenAmount,\n            })}\n          </TextFitter>\n        </Box>\n        <TextSecondaryContainer>\n          <TextSecondary>\n            {t('format.currency', {\n              value: tokenPrice,\n            })}\n          </TextSecondary>\n          {impactToken ? (\n            <TextSecondary sx={{ px: 0.5 }} dot>\n              &#x2022;\n            </TextSecondary>\n          ) : null}\n          {impactToken ? (\n            enableImpactTokenTooltip ? (\n              <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>\n                <TextSecondary>\n                  {t('format.percent', {\n                    value: priceImpact,\n                    usePlusSign: true,\n                  })}\n                </TextSecondary>\n              </Tooltip>\n            ) : (\n              <TextSecondary\n                title={priceImpactPercent?.toLocaleString(i18n.language, {\n                  maximumFractionDigits: 9,\n                })}\n              >\n                {t('format.percent', { value: priceImpact, usePlusSign: true })}\n              </TextSecondary>\n            )\n          ) : null}\n          {!disableDescription ? (\n            <TextSecondary sx={{ px: 0.5 }} dot>\n              &#x2022;\n            </TextSecondary>\n          ) : null}\n          {!disableDescription && step ? (\n            <TokenStep\n              step={step}\n              stepVisible={stepVisible}\n              disableDescription={disableDescription}\n            >\n              {tokenOnChain}\n            </TokenStep>\n          ) : (\n            tokenOnChain\n          )}\n        </TextSecondaryContainer>\n      </Box>\n    </Box>\n  )\n}\n\nconst TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({\n  step,\n  stepVisible,\n  disableDescription,\n  children,\n}) => {\n  return (\n    <Box\n      sx={{\n        flex: 1,\n        position: 'relative',\n        overflow: 'hidden',\n        height: 16,\n      }}\n    >\n      <Grow\n        in={!stepVisible && !disableDescription}\n        style={{\n          position: 'absolute',\n        }}\n        appear={false}\n        timeout={225}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            height: 16,\n          }}\n        >\n          {children as ReactElement}\n        </Box>\n      </Grow>\n      <Grow\n        in={stepVisible}\n        style={{\n          position: 'absolute',\n        }}\n        appear={false}\n        timeout={225}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            height: 16,\n          }}\n        >\n          <Box\n            sx={{\n              mr: 0.75,\n              height: 16,\n            }}\n          >\n            <SmallAvatar\n              src={step?.toolDetails.logoURI}\n              alt={step?.toolDetails.name}\n            >\n              {step?.toolDetails.name[0]}\n            </SmallAvatar>\n          </Box>\n          <TextSecondary>{step?.toolDetails.name}</TextSecondary>\n        </Box>\n      </Grow>\n    </Box>\n  )\n}\n\nexport const TokenSkeleton: FC<Partial<TokenProps> & BoxProps> = ({\n  step,\n  disableDescription,\n  ...other\n}) => {\n  return (\n    <Box\n      {...other}\n      sx={[\n        {\n          flex: 1,\n        },\n        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n      ]}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          flex: 1,\n          alignItems: 'center',\n        }}\n      >\n        <AvatarBadgedSkeleton sx={{ marginRight: 2 }} />\n        <Box\n          sx={{\n            flex: 1,\n          }}\n        >\n          <Skeleton width={112} height={28} variant=\"text\" />\n          <TextSecondaryContainer>\n            <Skeleton\n              width={48}\n              height={12}\n              variant=\"rounded\"\n              sx={{ marginTop: 0.5 }}\n            />\n            {!step && !disableDescription ? (\n              <Skeleton\n                width={96}\n                height={12}\n                variant=\"rounded\"\n                sx={{ marginTop: 0.5, marginLeft: 1.5 }}\n              />\n            ) : null}\n          </TextSecondaryContainer>\n        </Box>\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/TokenList/TokenDetailsSheetContent.js

@@ -49,10 +49,12 @@ const TokenDetailsSheetContent = forwardRef(({ tokenAddress, chainId, withoutCon
 				width: 80,
 				height: 16
 			})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Typography, {
-				fontWeight: 700,
-				fontSize: "24px",
-				lineHeight: "24px",
-				color: "text.primary",
+				sx: {
+					fontWeight: 700,
+					fontSize: "24px",
+					lineHeight: "24px",
+					color: "text.primary"
+				},
 				children: token?.symbol || noDataLabel
 			}), /* @__PURE__ */ jsx(Label, { children: token?.name || noDataLabel })] }) })]
 		}), /* @__PURE__ */ jsx(IconButton, {