@lifi/widget 4.5.0 → 4.7.0

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

@@ -59,8 +59,9 @@ const WidgetSkeleton = ({ config }) => {
 	const configTheme = config?.theme;
 	const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
 	const appearanceMode = !appearance || appearance === "system" ? prefersDarkMode ? "dark" : "light" : appearance;
+	const theme = useMemo(() => createTheme$1(configTheme), [configTheme]);
 	return /* @__PURE__ */ jsx(ThemeProvider, {
-		theme: useMemo(() => createTheme$1(configTheme), [configTheme]),
+		theme,
 		defaultMode: appearanceMode,
 		modeStorageKey: "li.fi-widget-mode",
 		colorSchemeStorageKey: "li.fi-widget-color-scheme",

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 data-testid=\"widget-skeleton-container\">\n        <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>\n          <SkeletonHeaderContainer>\n            {!hiddenUI?.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?.poweredBy ? 3 : 2,\n            }}\n          >\n            <SkeletonSelectCard />\n            <SkeletonSelectCard />\n            <SkeletonYouPayCard />\n            {requiredUI?.toAddress ? (\n              <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />\n            ) : null}\n            <SkeletonReviewButtonContainer>\n              <SkeletonReviewButton variant=\"contained\" fullWidth>\n                &nbsp;\n              </SkeletonReviewButton>\n              {!requiredUI?.toAddress ? (\n                <SkeletonSendToWalletButton variant=\"text\" fullWidth>\n                  &nbsp;\n                </SkeletonSendToWalletButton>\n              ) : null}\n            </SkeletonReviewButtonContainer>\n          </FlexContainer>\n          {!hiddenUI?.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 data-testid=\"widget-skeleton-container\">\n        <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>\n          <SkeletonHeaderContainer>\n            {!hiddenUI?.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?.poweredBy ? 3 : 2,\n            }}\n          >\n            <SkeletonSelectCard />\n            <SkeletonSelectCard />\n            <SkeletonYouPayCard />\n            {requiredUI?.toAddress ? (\n              <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />\n            ) : null}\n            <SkeletonReviewButtonContainer>\n              <SkeletonReviewButton variant=\"contained\" fullWidth>\n                &nbsp;\n              </SkeletonReviewButton>\n              {!requiredUI?.toAddress ? (\n                <SkeletonSendToWalletButton variant=\"text\" fullWidth>\n                  &nbsp;\n                </SkeletonSendToWalletButton>\n              ) : null}\n            </SkeletonReviewButtonContainer>\n          </FlexContainer>\n          {!hiddenUI?.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/StepActions.js

@@ -17,6 +17,21 @@ const StepActions = ({ route }) => {
 	const { mode, modeOptions, feeConfig, hiddenUI } = useWidgetConfig();
 	const { isGaslessStep } = useEthereumContext();
 	const headerIncludedSteps = route.steps.flatMap((step) => step.includedSteps);
+	const flatSteps = route.steps.flatMap((routeStep) => {
+		let steps = routeStep.includedSteps;
+		if (hiddenUI?.integratorStepDetails) {
+			const feeCollectionStep = steps.find((s) => s.tool === "feeCollection");
+			if (feeCollectionStep) {
+				steps = structuredClone(steps.filter((s) => s.tool !== "feeCollection"));
+				steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount;
+			}
+		}
+		const hasGaslessSupport = !!isGaslessStep?.(routeStep);
+		return steps.map((includedStep) => ({
+			includedStep,
+			hasGaslessSupport
+		}));
+	});
 	const tooltipContent = /* @__PURE__ */ jsx(Card$1, {
 		indented: true,
 		children: /* @__PURE__ */ jsx(Box, {
@@ -25,21 +40,7 @@ const StepActions = ({ route }) => {
 				gridTemplateColumns: "32px 1fr",
 				columnGap: 1.5
 			},
-			children: route.steps.flatMap((routeStep) => {
-				let steps = routeStep.includedSteps;
-				if (hiddenUI?.integratorStepDetails) {
-					const feeCollectionStep = steps.find((s) => s.tool === "feeCollection");
-					if (feeCollectionStep) {
-						steps = structuredClone(steps.filter((s) => s.tool !== "feeCollection"));
-						steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount;
-					}
-				}
-				const hasGaslessSupport = !!isGaslessStep?.(routeStep);
-				return steps.map((includedStep) => ({
-					includedStep,
-					hasGaslessSupport
-				}));
-			}).map(({ includedStep: step, hasGaslessSupport }, i, arr) => {
+			children: flatSteps.map(({ includedStep: step, hasGaslessSupport }, i, arr) => {
 				const showDivider = i !== arr.length - 1;
 				const isFeeCollection = step.type === "protocol" && step.tool === "feeCollection";
 				const toolName = isFeeCollection && feeConfig?.name ? feeConfig.name : step.toolDetails.name;
@@ -169,7 +170,8 @@ const CustomStepDetailsLabel = ({ step, mode, modeOptions }) => {
 	const { t } = useTranslation();
 	if (!mode) return null;
 	const toolDetails = mode === "custom" && step.includedSteps?.length > 0 ? step.includedSteps.find((step) => step.tool === "custom" && step.toolDetails.key !== "custom")?.toolDetails || step.toolDetails : step.toolDetails;
-	return /* @__PURE__ */ jsx(StepLabelTypography, { children: t(`main.${mode === "custom" && modeOptions?.custom?.type || "checkout"}StepDetails`, { tool: toolDetails.name }) });
+	const stepDetailsKey = mode === "custom" && modeOptions?.custom?.type || "checkout";
+	return /* @__PURE__ */ jsx(StepLabelTypography, { children: t(`main.${stepDetailsKey}StepDetails`, { tool: toolDetails.name }) });
 };
 const BridgeStepDetailsLabel = ({ step }) => {
 	const { t } = useTranslation();

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 type {\n  ModeOptions,\n  WidgetFeeConfig,\n  WidgetMode,\n} 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 {\n  StepActionsHeader,\n  StepActionsTitle,\n  StepLabelTypography,\n} from './StepActions.style.js'\n\ninterface StepDetailsLabelProps {\n  step: StepExtended\n  mode?: Extract<WidgetMode, 'custom'>\n  modeOptions?: ModeOptions\n  feeConfig?: WidgetFeeConfig\n  relayerSupport?: boolean\n}\n\nexport const StepActions: React.FC<{\n  route: RouteExtended\n}> = ({ route }) => {\n  const { t } = useTranslation()\n  const { mode, modeOptions, feeConfig, hiddenUI } = 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?.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' && mode === 'custom' ? (\n                  <CustomStepDetailsLabel\n                    step={step}\n                    mode={mode}\n                    modeOptions={modeOptions}\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  mode,\n  modeOptions,\n}) => {\n  const { t } = useTranslation()\n\n  if (!mode) {\n    return null\n  }\n\n  // FIXME: step transaction request overrides step tool details, but not included step tool details\n  const toolDetails =\n    mode === 'custom' && (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    (mode === 'custom' && modeOptions?.custom?.type) || '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 type {\n  ModeOptions,\n  WidgetFeeConfig,\n  WidgetMode,\n} 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 {\n  StepActionsHeader,\n  StepActionsTitle,\n  StepLabelTypography,\n} from './StepActions.style.js'\n\ninterface StepDetailsLabelProps {\n  step: StepExtended\n  mode?: Extract<WidgetMode, 'custom'>\n  modeOptions?: ModeOptions\n  feeConfig?: WidgetFeeConfig\n  relayerSupport?: boolean\n}\n\nexport const StepActions: React.FC<{\n  route: RouteExtended\n}> = ({ route }) => {\n  const { t } = useTranslation()\n  const { mode, modeOptions, feeConfig, hiddenUI } = 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?.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' && mode === 'custom' ? (\n                  <CustomStepDetailsLabel\n                    step={step}\n                    mode={mode}\n                    modeOptions={modeOptions}\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  mode,\n  modeOptions,\n}) => {\n  const { t } = useTranslation()\n\n  if (!mode) {\n    return null\n  }\n\n  // FIXME: step transaction request overrides step tool details, but not included step tool details\n  const toolDetails =\n    mode === 'custom' && (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    (mode === 'custom' && modeOptions?.custom?.type) || '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/SentToWalletRow.d.ts

@@ -3,7 +3,6 @@ interface SentToWalletRowProps {
   toAddress: string;
   toChainId: number;
 }
-declare const SentToWalletRow: React.FC<SentToWalletRowProps>;
+export declare const SentToWalletRow: React.FC<SentToWalletRowProps>;
 //#endregion
-export { SentToWalletRow };
 //# sourceMappingURL=SentToWalletRow.d.ts.map

package/dist/esm/components/StepActions/SentToWalletRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SentToWalletRow.d.ts","names":[],"sources":["../../../../src/components/StepActions/SentToWalletRow.tsx"],"mappings":";UAWU;EACR;EACA;;cAGW,iBAAiB,MAAM,GAAG"}
+{"version":3,"file":"SentToWalletRow.d.ts","names":[],"sources":["../../../../src/components/StepActions/SentToWalletRow.tsx"],"mappings":";UAWU;EACR;EACA;;qBAGW,iBAAiB,MAAM,GAAG"}

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

@@ -7,9 +7,10 @@ import OpenInNew from "@mui/icons-material/OpenInNew";
 //#region src/components/StepActions/StepActionRow.tsx
 const StepActionRow = ({ step, action, href, defaultLabelsOnly }) => {
 	const { title } = useActionMessage(step, action, defaultLabelsOnly);
+	const isFailed = action?.status === "FAILED";
 	return /* @__PURE__ */ jsx(ActionRow, {
 		startAdornment: /* @__PURE__ */ jsx(IconCircle, {
-			status: action?.status === "FAILED" ? "error" : "success",
+			status: isFailed ? "error" : "success",
 			size: 24
 		}),
 		message: title ?? "",

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

@@ -1 +1 @@
-{"version":3,"file":"StepActionRow.js","names":[],"sources":["../../../../src/components/StepActions/StepActionRow.tsx"],"sourcesContent":["import type { ExecutionAction, LiFiStepExtended } from '@lifi/sdk'\nimport OpenInNew from '@mui/icons-material/OpenInNew'\nimport type React from 'react'\nimport { useActionMessage } from '../../hooks/useActionMessage.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { ExternalLink } from './StepActionRow.style.js'\n\nexport const StepActionRow: React.FC<{\n  step: LiFiStepExtended\n  action: ExecutionAction\n  href: string\n  defaultLabelsOnly?: boolean\n}> = ({ step, action, href, defaultLabelsOnly }) => {\n  const { title } = useActionMessage(step, action, defaultLabelsOnly)\n  const isFailed = action?.status === 'FAILED'\n  return (\n    <ActionRow\n      startAdornment={\n        <IconCircle status={isFailed ? 'error' : 'success'} size={24} />\n      }\n      message={title ?? ''}\n      endAdornment={\n        <ExternalLink href={href} target=\"_blank\" rel=\"nofollow noreferrer\">\n          <OpenInNew sx={{ fontSize: 16 }} />\n        </ExternalLink>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;;AAQA,MAAa,iBAKP,EAAE,MAAM,QAAQ,MAAM,wBAAwB;CAClD,MAAM,EAAE,UAAU,iBAAiB,MAAM,QAAQ,iBAAiB;CAElE,OACE,oBAAC,WAAD;EACE,gBACE,oBAAC,YAAD;GAAY,QAJD,QAAQ,WAAW,WAIC,UAAU;GAAW,MAAM;EAAK,CAAA;EAEjE,SAAS,SAAS;EAClB,cACE,oBAAC,cAAD;GAAoB;GAAM,QAAO;GAAS,KAAI;GAC5C,UAAA,oBAAC,WAAD,EAAW,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;EACtB,CAAA;CAEjB,CAAA;AAEL"}
+{"version":3,"file":"StepActionRow.js","names":[],"sources":["../../../../src/components/StepActions/StepActionRow.tsx"],"sourcesContent":["import type { ExecutionAction, LiFiStepExtended } from '@lifi/sdk'\nimport OpenInNew from '@mui/icons-material/OpenInNew'\nimport type React from 'react'\nimport { useActionMessage } from '../../hooks/useActionMessage.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { ExternalLink } from './StepActionRow.style.js'\n\nexport const StepActionRow: React.FC<{\n  step: LiFiStepExtended\n  action: ExecutionAction\n  href: string\n  defaultLabelsOnly?: boolean\n}> = ({ step, action, href, defaultLabelsOnly }) => {\n  const { title } = useActionMessage(step, action, defaultLabelsOnly)\n  const isFailed = action?.status === 'FAILED'\n  return (\n    <ActionRow\n      startAdornment={\n        <IconCircle status={isFailed ? 'error' : 'success'} size={24} />\n      }\n      message={title ?? ''}\n      endAdornment={\n        <ExternalLink href={href} target=\"_blank\" rel=\"nofollow noreferrer\">\n          <OpenInNew sx={{ fontSize: 16 }} />\n        </ExternalLink>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;;AAQA,MAAa,iBAKP,EAAE,MAAM,QAAQ,MAAM,wBAAwB;CAClD,MAAM,EAAE,UAAU,iBAAiB,MAAM,QAAQ,iBAAiB;CAClE,MAAM,WAAW,QAAQ,WAAW;CACpC,OACE,oBAAC,WAAD;EACE,gBACE,oBAAC,YAAD;GAAY,QAAQ,WAAW,UAAU;GAAW,MAAM;EAAK,CAAA;EAEjE,SAAS,SAAS;EAClB,cACE,oBAAC,cAAD;GAAoB;GAAM,QAAO;GAAS,KAAI;GAC5C,UAAA,oBAAC,WAAD,EAAW,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;EACtB,CAAA;CAEjB,CAAA;AAEL"}

package/dist/esm/components/StepActions/StepActionRow.style.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import { Link } from "@mui/material";
 //#region src/components/StepActions/StepActionRow.style.d.ts
-declare const ExternalLink: React.FC<React.ComponentProps<typeof Link>>;
+export declare const ExternalLink: React.FC<React.ComponentProps<typeof Link>>;
 //#endregion
-export { ExternalLink };
 //# sourceMappingURL=StepActionRow.style.d.ts.map

package/dist/esm/components/StepActions/StepActionRow.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepActionRow.style.d.ts","names":[],"sources":["../../../../src/components/StepActions/StepActionRow.style.tsx"],"mappings":";;;cAGa,cAAc,MAAM,GAAG,MAAM,sBAAsB"}
+{"version":3,"file":"StepActionRow.style.d.ts","names":[],"sources":["../../../../src/components/StepActions/StepActionRow.style.tsx"],"mappings":";;;qBAGa,cAAc,MAAM,GAAG,MAAM,sBAAsB"}

package/dist/esm/components/StepActions/StepActionsList.d.ts

@@ -6,7 +6,6 @@ interface StepActionsListProps {
   toAddress?: string;
 }
 /** Non-animated list of completed execution step rows (transaction details view). */
-declare const StepActionsList: React.FC<StepActionsListProps>;
+export declare const StepActionsList: React.FC<StepActionsListProps>;
 //#endregion
-export { StepActionsList };
 //# sourceMappingURL=StepActionsList.d.ts.map

package/dist/esm/components/StepActions/StepActionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepActionsList.d.ts","names":[],"sources":["../../../../src/components/StepActions/StepActionsList.tsx"],"mappings":";;;UAMU;EACR,OAAO;EACP;;;cAIW,iBAAiB,MAAM,GAAG"}
+{"version":3,"file":"StepActionsList.d.ts","names":[],"sources":["../../../../src/components/StepActions/StepActionsList.tsx"],"mappings":";;;UAMU;EACR,OAAO;EACP;;;qBAIW,iBAAiB,MAAM,GAAG"}

package/dist/esm/components/StepActions/executionRows.d.ts

@@ -5,7 +5,7 @@ import { ReactNode } from "react";
  * A row in an execution list: either a completed/failed action with an explorer
  * link, or the recipient wallet row appended when a route has a `toAddress`.
  */
-type ExecutionRow = {
+export type ExecutionRow = {
   kind: "action";
   step: LiFiStepExtended;
   action: ExecutionAction;
@@ -20,7 +20,6 @@ type ExecutionRow = {
  * transaction link, plus a wallet row when `toAddress` is set. Shared by the
  * static step lists and the animated checklist.
  */
-declare function useExecutionRows(route: RouteExtended, toAddress?: string): ExecutionRow[];
+export declare function useExecutionRows(route: RouteExtended, toAddress?: string): ExecutionRow[];
 //#endregion
-export { ExecutionRow, useExecutionRows };
 //# sourceMappingURL=executionRows.d.ts.map

package/dist/esm/components/StepActions/executionRows.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"executionRows.d.ts","names":[],"sources":["../../../../src/components/StepActions/executionRows.tsx"],"mappings":";;;;;;;KAgBY;EAEN;EACA,MAAM;EACN,QAAQ;EACR;;EAEA;EAAgB;EAAmB;;;;;;;iBAOzB,iBACd,OAAO,eACP,qBACC"}
+{"version":3,"file":"executionRows.d.ts","names":[],"sources":["../../../../src/components/StepActions/executionRows.tsx"],"mappings":";;;;;;;YAgBY;EAEN;EACA,MAAM;EACN,QAAQ;EACR;;EAEA;EAAgB;EAAmB;;;;;;;wBAOzB,iBACd,OAAO,eACP,qBACC"}

package/dist/esm/components/Switch.js

@@ -35,7 +35,7 @@ const Switch$1 = styled(Switch)(({ theme }) => ({
 		height: 20
 	},
 	[`.${switchClasses.track}`]: {
-		borderRadius: 24 / 2,
+		borderRadius: 12,
 		opacity: 1,
 		transition: theme.transitions.create(["background-color"], { duration: theme.transitions.duration.standard }),
 		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["Switch","MuiSwitch"],"sources":["../../../src/components/Switch.tsx"],"sourcesContent":["import { Switch as MuiSwitch, styled, switchClasses } from '@mui/material'\nimport type React from 'react'\n\nexport const Switch: React.FC<React.ComponentProps<typeof MuiSwitch>> = styled(\n  MuiSwitch\n)(({ theme }) => ({\n  width: 42,\n  height: 24,\n  padding: 0,\n  [`.${switchClasses.switchBase}`]: {\n    padding: 0,\n    margin: theme.spacing(0.25),\n    transitionDuration: theme.transitions.duration.standard,\n    [`&.${switchClasses.checked}`]: {\n      transform: 'translateX(18px)',\n      color: theme.vars.palette.common.white,\n      [`& + .${switchClasses.track}`]: {\n        backgroundColor: theme.vars.palette.primary.main,\n        opacity: 1,\n        border: 0,\n      },\n      [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n        opacity: 0.5,\n      },\n    },\n    [`&.Mui-focusVisible .${switchClasses.thumb}`]: {\n      color: theme.vars.palette.primary.main,\n      border: '6px solid',\n      borderColor: theme.vars.palette.common.white,\n    },\n    [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {\n      color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,\n    },\n    [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n      opacity: 0.7,\n      ...theme.applyStyles('dark', {\n        opacity: 0.3,\n      }),\n    },\n  },\n  [`.${switchClasses.thumb}`]: {\n    boxSizing: 'border-box',\n    width: 20,\n    height: 20,\n  },\n  [`.${switchClasses.track}`]: {\n    borderRadius: 24 / 2,\n    opacity: 1,\n    transition: theme.transitions.create(['background-color'], {\n      duration: theme.transitions.duration.standard,\n    }),\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAaA,WAA2D,OACtEC,MACF,CAAC,EAAE,EAAE,aAAa;CAChB,OAAO;CACP,QAAQ;CACR,SAAS;EACR,IAAI,cAAc,eAAe;EAChC,SAAS;EACT,QAAQ,MAAM,QAAQ,GAAI;EAC1B,oBAAoB,MAAM,YAAY,SAAS;GAC9C,KAAK,cAAc,YAAY;GAC9B,WAAW;GACX,OAAO,MAAM,KAAK,QAAQ,OAAO;IAChC,QAAQ,cAAc,UAAU;IAC/B,iBAAiB,MAAM,KAAK,QAAQ,QAAQ;IAC5C,SAAS;IACT,QAAQ;GACV;IACC,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU,EACzD,SAAS,GACX;EACF;GACC,uBAAuB,cAAc,UAAU;GAC9C,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,QAAQ;GACR,aAAa,MAAM,KAAK,QAAQ,OAAO;EACzC;GACC,KAAK,cAAc,SAAS,IAAI,cAAc,UAAU,EACvD,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBACtE;GACC,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU;GACzD,SAAS;GACT,GAAG,MAAM,YAAY,QAAQ,EAC3B,SAAS,GACX,CAAC;EACH;CACF;EACC,IAAI,cAAc,UAAU;EAC3B,WAAW;EACX,OAAO;EACP,QAAQ;CACV;EACC,IAAI,cAAc,UAAU;EAC3B,cAAc,KAAK;EACnB,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,kBAAkB,GAAG,EACzD,UAAU,MAAM,YAAY,SAAS,SACvC,CAAC;EACD,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAChF;AACF,EAAE"}
+{"version":3,"file":"Switch.js","names":["Switch","MuiSwitch"],"sources":["../../../src/components/Switch.tsx"],"sourcesContent":["import { Switch as MuiSwitch, styled, switchClasses } from '@mui/material'\nimport type React from 'react'\n\nexport const Switch: React.FC<React.ComponentProps<typeof MuiSwitch>> = styled(\n  MuiSwitch\n)(({ theme }) => ({\n  width: 42,\n  height: 24,\n  padding: 0,\n  [`.${switchClasses.switchBase}`]: {\n    padding: 0,\n    margin: theme.spacing(0.25),\n    transitionDuration: theme.transitions.duration.standard,\n    [`&.${switchClasses.checked}`]: {\n      transform: 'translateX(18px)',\n      color: theme.vars.palette.common.white,\n      [`& + .${switchClasses.track}`]: {\n        backgroundColor: theme.vars.palette.primary.main,\n        opacity: 1,\n        border: 0,\n      },\n      [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n        opacity: 0.5,\n      },\n    },\n    [`&.Mui-focusVisible .${switchClasses.thumb}`]: {\n      color: theme.vars.palette.primary.main,\n      border: '6px solid',\n      borderColor: theme.vars.palette.common.white,\n    },\n    [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {\n      color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,\n    },\n    [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n      opacity: 0.7,\n      ...theme.applyStyles('dark', {\n        opacity: 0.3,\n      }),\n    },\n  },\n  [`.${switchClasses.thumb}`]: {\n    boxSizing: 'border-box',\n    width: 20,\n    height: 20,\n  },\n  [`.${switchClasses.track}`]: {\n    borderRadius: 24 / 2,\n    opacity: 1,\n    transition: theme.transitions.create(['background-color'], {\n      duration: theme.transitions.duration.standard,\n    }),\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAaA,WAA2D,OACtEC,MACF,CAAC,EAAE,EAAE,aAAa;CAChB,OAAO;CACP,QAAQ;CACR,SAAS;EACR,IAAI,cAAc,eAAe;EAChC,SAAS;EACT,QAAQ,MAAM,QAAQ,GAAI;EAC1B,oBAAoB,MAAM,YAAY,SAAS;GAC9C,KAAK,cAAc,YAAY;GAC9B,WAAW;GACX,OAAO,MAAM,KAAK,QAAQ,OAAO;IAChC,QAAQ,cAAc,UAAU;IAC/B,iBAAiB,MAAM,KAAK,QAAQ,QAAQ;IAC5C,SAAS;IACT,QAAQ;GACV;IACC,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU,EACzD,SAAS,GACX;EACF;GACC,uBAAuB,cAAc,UAAU;GAC9C,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,QAAQ;GACR,aAAa,MAAM,KAAK,QAAQ,OAAO;EACzC;GACC,KAAK,cAAc,SAAS,IAAI,cAAc,UAAU,EACvD,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBACtE;GACC,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU;GACzD,SAAS;GACT,GAAG,MAAM,YAAY,QAAQ,EAC3B,SAAS,GACX,CAAC;EACH;CACF;EACC,IAAI,cAAc,UAAU;EAC3B,WAAW;EACX,OAAO;EACP,QAAQ;CACV;EACC,IAAI,cAAc,UAAU;EAC3B,cAAc;EACd,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,kBAAkB,GAAG,EACzD,UAAU,MAAM,YAAY,SAAS,SACvC,CAAC;EACD,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAChF;AACF,EAAE"}

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

@@ -1,5 +1,6 @@
 import { Tab, Tabs, styled, tabClasses, tabsClasses } from "@mui/material";
-const CardTabs = styled(styled(Tabs)(({ theme }) => ({
+//#region src/components/Tabs/Tabs.style.tsx
+const Tabs$1 = styled(Tabs)(({ theme }) => ({
 	flex: 1,
 	[`.${tabsClasses.indicator}`]: {
 		top: theme.spacing(.5),
@@ -8,7 +9,8 @@ const CardTabs = styled(styled(Tabs)(({ theme }) => ({
 		width: `calc(100% - ${theme.spacing(1)})`
 	},
 	[`.${tabsClasses.fixed}`]: { padding: theme.spacing(.5) }
-})))(({ theme }) => ({
+}));
+const CardTabs = styled(Tabs$1)(({ theme }) => ({
 	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
 	[`.${tabsClasses.indicator}`]: { backgroundColor: theme.vars.palette.background.paper },
 	...theme.applyStyles("dark", {

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,IAAO,CAAC,EAAE,EAAE,aAAa;CAC3C,MAAM;EACL,IAAI,YAAY,cAAc;EAC7B,KAAK,MAAM,QAAQ,EAAG;EACtB,MAAM,MAAM,QAAQ,EAAG;EACvB,QAAQ,eAAe,MAAM,QAAQ,CAAC,EAAE;EACxC,OAAO,eAAe,MAAM,QAAQ,CAAC,EAAE;CACzC;EACC,IAAI,YAAY,UAAU,EACzB,SAAS,MAAM,QAAQ,EAAG,EAC5B;AACF,EAGED,CACF,CAAC,EAAE,EAAE,aAAa;CAChB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,MAAM,KAAK,QAAQ,WAAW,MACjD;CACA,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;GAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,WAAW,oBAC9E;CACF,CAAC;AACH,EAAE;AAEF,MAAaE,QAAqD,OAChEC,GACF,CAAC,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,aACnC;AACF,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":";;AAUA,MAAMA,SAAO,OAAOC,IAAO,CAAC,EAAE,EAAE,aAAa;CAC3C,MAAM;EACL,IAAI,YAAY,cAAc;EAC7B,KAAK,MAAM,QAAQ,EAAG;EACtB,MAAM,MAAM,QAAQ,EAAG;EACvB,QAAQ,eAAe,MAAM,QAAQ,CAAC,EAAE;EACxC,OAAO,eAAe,MAAM,QAAQ,CAAC,EAAE;CACzC;EACC,IAAI,YAAY,UAAU,EACzB,SAAS,MAAM,QAAQ,EAAG,EAC5B;AACF,EAAE;AAEF,MAAa,WAA2D,OACtED,MACF,CAAC,EAAE,EAAE,aAAa;CAChB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,MAAM,KAAK,QAAQ,WAAW,MACjD;CACA,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;GAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,WAAW,oBAC9E;CACF,CAAC;AACH,EAAE;AAEF,MAAaE,QAAqD,OAChEC,GACF,CAAC,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,aACnC;AACF,EAAE"}

package/dist/esm/components/Token/Token.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Token.d.ts","names":[],"sources":["../../../../src/components/Token/Token.tsx"],"mappings":";;;;UAeU;EACR,OAAO;EACP,cAAc;EACd;EACA,OAAO;EACP;EACA;EACA;;cAGW,SAAO,GAAG,aAAa"}
+{"version":3,"file":"Token.d.ts","names":[],"sources":["../../../../src/components/Token/Token.tsx"],"mappings":";;;;UAgBU;EACR,OAAO;EACP,cAAc;EACd;EACA,OAAO;EACP;EACA;EACA;;cAGW,SAAO,GAAG,aAAa"}

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

@@ -1,4 +1,5 @@
 import { formatTokenAmount, formatTokenPrice } from "../../utils/format.js";
+import { mergeFallbackToken } from "../../utils/token.js";
 import { useChain } from "../../hooks/useChain.js";
 import { useToken } from "../../hooks/useToken.js";
 import { getPriceImpact } from "../../utils/getPriceImpact.js";
@@ -24,10 +25,7 @@ const Token = ({ token, ...other }) => {
 const TokenFallback = ({ token, isLoading, ...other }) => {
 	const { token: chainToken, isLoading: isLoadingToken } = useToken(token.chainId, token.address);
 	return /* @__PURE__ */ jsx(TokenBase, {
-		token: {
-			...token,
-			...chainToken
-		},
+		token: mergeFallbackToken(token, chainToken),
 		isLoading: isLoading || isLoadingToken,
 		...other
 	});

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 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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"}
+{"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 { mergeFallbackToken } from '../../utils/token.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={mergeFallbackToken(token, chainToken)}\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/RecentTokensHeader.js

@@ -0,0 +1,44 @@
+import { FooterText, ToggleButton } from "../AmountInputCard/AmountInputCard.style.js";
+import { Box, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/TokenList/RecentTokensHeader.tsx
+const RecentTokensHeader = ({ atListStart, onClear }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			width: "100%",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			px: 1.5,
+			pt: atListStart ? 0 : 1,
+			pb: 1
+		},
+		children: [/* @__PURE__ */ jsx(Typography, {
+			sx: {
+				fontSize: 14,
+				fontWeight: 600,
+				lineHeight: "16px"
+			},
+			children: t("main.recentSearches")
+		}), onClear ? /* @__PURE__ */ jsx(ToggleButton, {
+			clickable: true,
+			sx: {
+				px: .75,
+				ml: 0,
+				mr: -.75
+			},
+			onClick: (e) => {
+				e.stopPropagation();
+				e.currentTarget.blur();
+				onClear();
+			},
+			children: /* @__PURE__ */ jsx(FooterText, { children: t("button.clear") })
+		}) : null]
+	});
+};
+//#endregion
+export { RecentTokensHeader };
+
+//# sourceMappingURL=RecentTokensHeader.js.map

package/dist/esm/components/TokenList/RecentTokensHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecentTokensHeader.js","names":[],"sources":["../../../../src/components/TokenList/RecentTokensHeader.tsx"],"sourcesContent":["import { Box, Typography } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport {\n  FooterText,\n  ToggleButton,\n} from '../AmountInputCard/AmountInputCard.style.js'\n\ninterface RecentTokensHeaderProps {\n  atListStart: boolean\n  onClear?: () => void\n}\n\nexport const RecentTokensHeader = ({\n  atListStart,\n  onClear,\n}: RecentTokensHeaderProps): JSX.Element => {\n  const { t } = useTranslation()\n\n  return (\n    <Box\n      sx={{\n        // ListItem is a flex container; claim the width for space-between.\n        width: '100%',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        px: 1.5,\n        pt: atListStart ? 0 : 1,\n        pb: 1,\n      }}\n    >\n      <Typography sx={{ fontSize: 14, fontWeight: 600, lineHeight: '16px' }}>\n        {t('main.recentSearches')}\n      </Typography>\n      {onClear ? (\n        <ToggleButton\n          clickable\n          // Right-aligned, so the padding hangs past the right edge instead.\n          sx={{ px: 0.75, ml: 0, mr: -0.75 }}\n          onClick={(e) => {\n            e.stopPropagation()\n            e.currentTarget.blur()\n            onClear()\n          }}\n        >\n          <FooterText>{t('button.clear')}</FooterText>\n        </ToggleButton>\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;AAaA,MAAa,sBAAsB,EACjC,aACA,cAC0C;CAC1C,MAAM,EAAE,MAAM,eAAe;CAE7B,OACE,qBAAC,KAAD;EACE,IAAI;GAEF,OAAO;GACP,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,IAAI;GACJ,IAAI,cAAc,IAAI;GACtB,IAAI;EACN;EAVF,UAAA,CAYE,oBAAC,YAAD;GAAY,IAAI;IAAE,UAAU;IAAI,YAAY;IAAK,YAAY;GAAO;GACjE,UAAA,EAAE,qBAAqB;EACd,CAAA,GACX,UACC,oBAAC,cAAD;GACE,WAAA;GAEA,IAAI;IAAE,IAAI;IAAM,IAAI;IAAG,IAAI;GAAM;GACjC,UAAU,MAAM;IACd,EAAE,gBAAgB;IAClB,EAAE,cAAc,KAAK;IACrB,QAAQ;GACV;GAEA,UAAA,oBAAC,YAAD,EAAA,UAAa,EAAE,cAAc,EAAc,CAAA;EAC/B,CAAA,IACZ,IACD;;AAET"}

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

@@ -0,0 +1,36 @@
+import { FooterText, ToggleButton } from "../AmountInputCard/AmountInputCard.style.js";
+import { Box } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ExpandLess from "@mui/icons-material/ExpandLess";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+//#region src/components/TokenList/RecentTokensToggle.tsx
+const RecentTokensToggle = ({ expanded, hiddenCount, onToggle }) => {
+	const { t } = useTranslation();
+	const ExpandIcon = expanded ? ExpandLess : ExpandMore;
+	return /* @__PURE__ */ jsx(Box, {
+		sx: {
+			width: "100%",
+			display: "flex",
+			px: 1.5,
+			pt: "1px",
+			pb: "7px"
+		},
+		children: /* @__PURE__ */ jsxs(ToggleButton, {
+			clickable: true,
+			onClick: (e) => {
+				e.stopPropagation();
+				e.currentTarget.blur();
+				onToggle();
+			},
+			children: [/* @__PURE__ */ jsx(FooterText, { children: expanded ? t("button.showLess") : t("button.showMore", { count: hiddenCount }) }), /* @__PURE__ */ jsx(ExpandIcon, { sx: {
+				fontSize: 14,
+				color: "text.secondary"
+			} })]
+		})
+	});
+};
+//#endregion
+export { RecentTokensToggle };
+
+//# sourceMappingURL=RecentTokensToggle.js.map

package/dist/esm/components/TokenList/RecentTokensToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecentTokensToggle.js","names":["ExpandLessIcon","ExpandMoreIcon"],"sources":["../../../../src/components/TokenList/RecentTokensToggle.tsx"],"sourcesContent":["import ExpandLessIcon from '@mui/icons-material/ExpandLess'\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore'\nimport { Box } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport {\n  FooterText,\n  ToggleButton,\n} from '../AmountInputCard/AmountInputCard.style.js'\n\ninterface RecentTokensToggleProps {\n  expanded: boolean\n  hiddenCount: number\n  onToggle: () => void\n}\n\nexport const RecentTokensToggle = ({\n  expanded,\n  hiddenCount,\n  onToggle,\n}: RecentTokensToggleProps): JSX.Element => {\n  const { t } = useTranslation()\n  const ExpandIcon = expanded ? ExpandLessIcon : ExpandMoreIcon\n\n  return (\n    // 1 + 18 + 7 fills the reserved 26px: text 8px below the band, 18px above the next header.\n    <Box sx={{ width: '100%', display: 'flex', px: 1.5, pt: '1px', pb: '7px' }}>\n      <ToggleButton\n        clickable\n        onClick={(e) => {\n          e.stopPropagation()\n          e.currentTarget.blur()\n          onToggle()\n        }}\n      >\n        <FooterText>\n          {expanded\n            ? t('button.showLess')\n            : t('button.showMore', { count: hiddenCount })}\n        </FooterText>\n        <ExpandIcon sx={{ fontSize: 14, color: 'text.secondary' }} />\n      </ToggleButton>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;AAgBA,MAAa,sBAAsB,EACjC,UACA,aACA,eAC0C;CAC1C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,aAAa,WAAWA,aAAiBC;CAE/C,OAEE,oBAAC,KAAD;EAAK,IAAI;GAAE,OAAO;GAAQ,SAAS;GAAQ,IAAI;GAAK,IAAI;GAAO,IAAI;EAAM;EACvE,UAAA,qBAAC,cAAD;GACE,WAAA;GACA,UAAU,MAAM;IACd,EAAE,gBAAgB;IAClB,EAAE,cAAc,KAAK;IACrB,SAAS;GACX;GANF,UAAA,CAQE,oBAAC,YAAD,EAAA,UACG,WACG,EAAE,iBAAiB,IACnB,EAAE,mBAAmB,EAAE,OAAO,YAAY,CAAC,EACrC,CAAA,GACZ,oBAAC,YAAD,EAAY,IAAI;IAAE,UAAU;IAAI,OAAO;GAAiB,EAAI,CAAA,CAChD;;CACX,CAAA;AAET"}

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

@@ -0,0 +1,32 @@
+import { useRecentTokensStore } from "../../stores/recentTokens/RecentTokensStore.js";
+import { IconButton } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Close from "@mui/icons-material/Close";
+//#region src/components/TokenList/RemoveRecentTokenButton.tsx
+const RemoveRecentTokenButton = ({ chainId, tokenAddress }) => {
+	const { t } = useTranslation();
+	const removeRecentToken = useRecentTokensStore((state) => state.removeRecentToken);
+	const handleClick = (e) => {
+		e.stopPropagation();
+		e.currentTarget.blur();
+		removeRecentToken(chainId, tokenAddress);
+	};
+	return /* @__PURE__ */ jsx(IconButton, {
+		"aria-label": t("button.delete"),
+		sx: {
+			width: 20,
+			height: 20
+		},
+		size: "small",
+		onClick: handleClick,
+		children: /* @__PURE__ */ jsx(Close, { sx: {
+			fontSize: 12,
+			color: "text.secondary"
+		} })
+	});
+};
+//#endregion
+export { RemoveRecentTokenButton };
+
+//# sourceMappingURL=RemoveRecentTokenButton.js.map

package/dist/esm/components/TokenList/RemoveRecentTokenButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoveRecentTokenButton.js","names":["CloseIcon"],"sources":["../../../../src/components/TokenList/RemoveRecentTokenButton.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRecentTokensStore } from '../../stores/recentTokens/RecentTokensStore.js'\n\ninterface RemoveRecentTokenButtonProps {\n  chainId: number\n  tokenAddress: string\n}\n\nexport const RemoveRecentTokenButton = ({\n  chainId,\n  tokenAddress,\n}: RemoveRecentTokenButtonProps): JSX.Element => {\n  const { t } = useTranslation()\n  // Selecting the action alone keeps this out of every store update.\n  const removeRecentToken = useRecentTokensStore(\n    (state) => state.removeRecentToken\n  )\n\n  const handleClick = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    ;(e.currentTarget as HTMLElement).blur()\n    removeRecentToken(chainId, tokenAddress)\n  }\n\n  return (\n    <IconButton\n      aria-label={t('button.delete')}\n      sx={{ width: 20, height: 20 }}\n      size=\"small\"\n      onClick={handleClick}\n    >\n      <CloseIcon sx={{ fontSize: 12, color: 'text.secondary' }} />\n    </IconButton>\n  )\n}\n"],"mappings":";;;;;;AAWA,MAAa,2BAA2B,EACtC,SACA,mBAC+C;CAC/C,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,oBAAoB,sBACvB,UAAU,MAAM,iBACnB;CAEA,MAAM,eAAe,MAAwB;EAC3C,EAAE,gBAAgB;EACjB,EAAG,cAA8B,KAAK;EACvC,kBAAkB,SAAS,YAAY;CACzC;CAEA,OACE,oBAAC,YAAD;EACE,cAAY,EAAE,eAAe;EAC7B,IAAI;GAAE,OAAO;GAAI,QAAQ;EAAG;EAC5B,MAAK;EACL,SAAS;EAET,UAAA,oBAACA,OAAD,EAAW,IAAI;GAAE,UAAU;GAAI,OAAO;EAAiB,EAAI,CAAA;CACjD,CAAA;AAEhB"}