@imtbl/sdk 1.76.0 → 1.76.1

package/dist/browser/checkout/{AddTokensWidget-Ov8QlKCk.js → AddTokensWidget-B0aMPpaf.js}

@@ -1,9 +1,9 @@
-import { r as reactExports, I as IMTBLWidgetEvents, A as AddTokensEventType, w as getDefaultExportFromCjs, x as commonjsGlobal, u as useTranslation, p as jsxs, o as jsx, M as MenuItem, y as tokenValueFormat, D as DEFAULT_TOKEN_FORMATTING_DECIMALS, z as BigNumber, F as Sticker, G as Fragment, H as Stack, J as Body, K as hFlex, N as centerFlexChildren, Q as Icon, R as Badge, T as getRemoteVideo, U as FramedVideo, X as listVariants, Y as motion, Z as listItemVariants, _ as Banner, $ as Divider, a0 as useAnalytics, a1 as useProvidersContext, a2 as UserJourney, a3 as EllipsizedText, a4 as Drawer, a5 as isPassportProvider, a6 as Tooltip, a7 as Box, a8 as Heading, a9 as Button, aa as WalletDrawer, ab as UnableToConnectDrawer, ac as WalletProviderRdns, ad as removeSpace, ae as getProviderSlugFromRdns, af as Web3Provider, ag as connectEIP6963Provider, ah as identifyUser, ai as ConnectEIP6963ProviderError, aj as ProvidersContextActions, j as ChainId, ak as commonjsRequire, al as getRemoteImage, am as vFlex, an as OnboardingPagination, ao as ViewContext, ap as useHandover, aq as HandoverTarget, ar as EventTargetContext, V as ViewActions, as as getRemoteRive, at as Trans, au as Link, av as keyframes, aw as getDefaultTokenImage, ax as TokenFilterTypes, h as getL2ChainId, ay as isNativeToken, az as getTokenImageByAddress, aA as SmartClone, aB as FramedImage, aC as FramedIcon, aD as ButtCon, aE as TextInput, aF as VerticalMenu, aG as fetchRiskAssessment, aH as isAddressSanctioned, aI as useInjectedProviders, aJ as trackFlow, aK as HeroFormControl, aL as SimpleLayout, m as SharedViews, aM as orchestrationEvents, aN as HeroTextInput, aO as requireSecp256k1$1, aP as requireLib_commonjs, aQ as require$$0$2, aR as bech32$2, aS as bnExports$1, aT as require$$0$3, aU as getAugmentedNamespace, aV as require$$0$4, aW as minimalisticAssert, aX as require$$2, aY as hash$6, aZ as trackError, a_ as MaxUint256, a$ as merge$2, b0 as SvgIcon, b1 as WalletWarningHero, b2 as Environment, b3 as t, b4 as PriceDisplay, L as LoadingView, b5 as useTheme, b6 as viewReducer, b7 as initialViewState, b8 as isValidAddress, b9 as amountInputValidation, ba as CloudImage, E as ErrorView, bb as ServiceUnavailableErrorView } from './index-CNE2GoPm.js';
-import { f as formatUnits, p as parseUnits } from './index-jI6ZFdoK.js';
-import { r as retry, T as TokenImage } from './TokenImage-1PBGOvLH.js';
-import { H as HandoverContent } from './HandoverContent-BGe-FSBI.js';
-import { C as Contract } from './index-C-kBUpgB.js';
-import { F as FeesBreakdown } from './FeesBreakdown-CYOq1UYb.js';
+import { r as reactExports, I as IMTBLWidgetEvents, A as AddTokensEventType, w as getDefaultExportFromCjs, x as commonjsGlobal, y as useProvidersContext, z as useAnalytics, U as UserJourney, D as isPassportProvider, F as BigNumber, o as jsx, p as jsxs, G as Box, u as useTranslation, H as Drawer, J as Divider, K as Heading, M as Button, N as WalletDrawer, Q as UnableToConnectDrawer, R as Fragment, T as WalletProviderRdns, X as removeSpace, Y as getProviderSlugFromRdns, Z as Web3Provider, _ as connectEIP6963Provider, $ as identifyUser, a0 as ConnectEIP6963ProviderError, a1 as ProvidersContextActions, a2 as MenuItem, j as ChainId, a3 as commonjsRequire, a4 as getRemoteImage, a5 as vFlex, a6 as OnboardingPagination, a7 as ViewContext, a8 as useHandover, a9 as HandoverTarget, aa as EventTargetContext, V as ViewActions, ab as getRemoteRive, ac as Trans, ad as Link, ae as Body, af as keyframes, ag as getDefaultTokenImage, ah as TokenFilterTypes, h as getL2ChainId, ai as isNativeToken, aj as getTokenImageByAddress, ak as SmartClone, al as FramedImage, am as FramedIcon, an as ButtCon, ao as TextInput, ap as VerticalMenu, aq as EllipsizedText, ar as Tooltip, as as Sticker, at as tokenValueFormat, au as DEFAULT_TOKEN_FORMATTING_DECIMALS, av as Stack, aw as hFlex, ax as centerFlexChildren, ay as Icon, az as Badge, aA as getRemoteVideo, aB as FramedVideo, aC as listVariants, aD as motion, aE as listItemVariants, aF as Banner, aG as fetchRiskAssessment, aH as isAddressSanctioned, aI as useInjectedProviders, aJ as trackFlow, aK as HeroFormControl, aL as SimpleLayout, m as SharedViews, aM as orchestrationEvents, aN as HeroTextInput, aO as requireSecp256k1$1, aP as requireLib_commonjs, aQ as require$$0$2, aR as bech32$2, aS as bnExports$1, aT as require$$0$3, aU as getAugmentedNamespace, aV as require$$0$4, aW as minimalisticAssert, aX as require$$2, aY as hash$6, aZ as trackError, a_ as MaxUint256, a$ as merge$2, b0 as SvgIcon, b1 as WalletWarningHero, b2 as Environment, b3 as t, b4 as PriceDisplay, L as LoadingView, b5 as useTheme, b6 as viewReducer, b7 as initialViewState, b8 as isValidAddress, b9 as amountInputValidation, ba as CloudImage, E as ErrorView, bb as ServiceUnavailableErrorView } from './index-C4rT0Sv6.js';
+import { r as retry, T as TokenImage } from './TokenImage-DVwKafFC.js';
+import { f as formatUnits, p as parseUnits } from './index-D_SSOEje.js';
+import { H as HandoverContent } from './HandoverContent-CjAdkJyP.js';
+import { C as Contract } from './index-W518Tkp4.js';
+import { F as FeesBreakdown } from './FeesBreakdown-ux_kv2hV.js';
 
 /**
  * The function `useInterval` sets up an interval that repeatedly calls a given callback function with
@@ -1285,240 +1285,6 @@ Object.defineProperty(gas, "__esModule", { value: true });
 	
 } (dist$3));
 
-var FiatOptionType;
-(function (FiatOptionType) {
-    FiatOptionType["CREDIT"] = "credit";
-    FiatOptionType["DEBIT"] = "debit";
-})(FiatOptionType || (FiatOptionType = {}));
-var RiveStateMachineInput;
-(function (RiveStateMachineInput) {
-    RiveStateMachineInput[RiveStateMachineInput["START"] = 0] = "START";
-    RiveStateMachineInput[RiveStateMachineInput["WAITING"] = 1] = "WAITING";
-    RiveStateMachineInput[RiveStateMachineInput["PROCESSING"] = 2] = "PROCESSING";
-    RiveStateMachineInput[RiveStateMachineInput["COMPLETED"] = 3] = "COMPLETED";
-    RiveStateMachineInput[RiveStateMachineInput["ERROR"] = 4] = "ERROR";
-})(RiveStateMachineInput || (RiveStateMachineInput = {}));
-var AddTokensErrorTypes;
-(function (AddTokensErrorTypes) {
-    AddTokensErrorTypes["DEFAULT"] = "DEFAULT_ERROR";
-    AddTokensErrorTypes["INVALID_PARAMETERS"] = "INVALID_PARAMETERS";
-    AddTokensErrorTypes["SERVICE_BREAKDOWN"] = "SERVICE_BREAKDOWN";
-    AddTokensErrorTypes["TRANSACTION_FAILED"] = "TRANSACTION_FAILED";
-    AddTokensErrorTypes["UNRECOGNISED_CHAIN"] = "UNRECOGNISED_CHAIN";
-    AddTokensErrorTypes["PROVIDER_ERROR"] = "PROVIDER_ERROR";
-    AddTokensErrorTypes["WALLET_FAILED"] = "WALLET_FAILED";
-    AddTokensErrorTypes["WALLET_REJECTED"] = "WALLET_REJECTED";
-    AddTokensErrorTypes["WALLET_REJECTED_NO_FUNDS"] = "WALLET_REJECTED_NO_FUNDS";
-    AddTokensErrorTypes["WALLET_POPUP_BLOCKED"] = "WALLET_POPUP_BLOCKED";
-    AddTokensErrorTypes["ENVIRONMENT_ERROR"] = "ENVIRONMENT_ERROR";
-    AddTokensErrorTypes["ROUTE_ERROR"] = "ROUTE_ERROR";
-})(AddTokensErrorTypes || (AddTokensErrorTypes = {}));
-var AddTokensExperiments;
-(function (AddTokensExperiments) {
-    AddTokensExperiments["PRESELECTED_TOKEN"] = "addTokensPreselectedToken";
-})(AddTokensExperiments || (AddTokensExperiments = {}));
-
-function FiatOption({ type, onClick, disabled = false, size = 'small', rc = jsx("span", {}), }) {
-    const { t } = useTranslation();
-    const icon = {
-        [FiatOptionType.DEBIT]: 'BankCard',
-        [FiatOptionType.CREDIT]: 'Craft',
-    };
-    const handleClick = () => {
-        onClick?.(type);
-    };
-    const menuItemProps = {
-        disabled,
-        emphasized: true,
-        onClick: disabled ? undefined : handleClick,
-        size,
-        rc,
-    };
-    return (jsxs(MenuItem, { ...menuItemProps, children: [jsx(MenuItem.FramedIcon, { icon: icon[type], variant: "bold", emphasized: false }), jsx(MenuItem.Label, { children: t(`views.ADD_TOKENS.drawer.options.${type}.heading`) }), jsx(MenuItem.Caption, { children: t(`views.ADD_TOKENS.drawer.options.${type}.${disabled ? 'disabledCaption' : 'caption'}`) }), !disabled && jsx(MenuItem.IntentIcon, {})] }));
-}
-
-function getDurationFormatted(estimatedRouteDuration, minutesText, minuteText, secondText) {
-    const seconds = estimatedRouteDuration;
-    if (seconds >= 60) {
-        const minutes = Math.round(seconds / 60);
-        return minutes === 1 ? `1 ${minuteText}` : `${minutes} ${minutesText}`;
-    }
-    return `${seconds.toFixed(0)}${secondText}`;
-}
-
-/**
- * Get the total fees for a route
- */
-function getTotalRouteFees(route) {
-    const [fees, feesUsd] = route?.route.estimate.feeCosts.reduce(([acc, accUsd], fee) => [
-        acc + parseFloat(fee.amount),
-        accUsd + parseFloat(fee.amountUsd),
-    ], [0, 0]) ?? [0, 0];
-    const [gasFees, gasFeesUsd] = route?.route.estimate.gasCosts.reduce(([acc, accUsd], fee) => [
-        acc + parseFloat(fee.amount),
-        accUsd + parseFloat(fee.amountUsd),
-    ], [0, 0]) ?? [0, 0];
-    const totalFees = fees + gasFees;
-    const totalFeesUsd = feesUsd + gasFeesUsd;
-    return {
-        fees,
-        feesUsd,
-        gasFees,
-        gasFeesUsd,
-        totalFees,
-        totalFeesUsd,
-    };
-}
-
-/**
- * Formats a number to a string with a maximum number of decimals
- * removing trailing zeros
- */
-const getFormattedAmounts = (value, maxDecimals = DEFAULT_TOKEN_FORMATTING_DECIMALS) => {
-    const amount = typeof value === 'number' ? value : parseFloat(value);
-    if (Number.isNaN(amount)) {
-        return '-.--';
-    }
-    if (amount > 0 && amount < 1) {
-        return tokenValueFormat(value, maxDecimals).replace(/\.?0+$/, '');
-    }
-    return tokenValueFormat(amount, maxDecimals);
-};
-/**
- * Converts a crypto amount to a formatted string
- */
-function getFormattedNumber(value, decimals, maxDecimals = 5) {
-    const amount = String(value);
-    let formattedValue = '';
-    try {
-        if (Number.isNaN(amount) || !decimals) {
-            throw new Error('Invalid amount or decimals');
-        }
-        formattedValue = formatUnits(BigNumber.from(amount), decimals)
-            .toString();
-    }
-    catch {
-        return '-.--';
-    }
-    return getFormattedAmounts(formattedValue, maxDecimals);
-}
-
-const emptyRouteBalance = {
-    routeBalance: getFormattedAmounts(''),
-    routeBalanceUsd: getFormattedAmounts(''),
-    fromAmount: getFormattedAmounts(''),
-    fromAmountUsd: getFormattedAmounts(''),
-};
-function getRouteAndTokenBalances(routeData) {
-    if (!routeData) {
-        return emptyRouteBalance;
-    }
-    const usdPrice = routeData?.route.route.estimate.fromToken.usdPrice;
-    if (!usdPrice) {
-        return emptyRouteBalance;
-    }
-    const { balance } = routeData.amountData;
-    const routeBalance = getFormattedNumber(balance.balance, balance?.decimals, balance?.decimals);
-    const routeBalanceUsd = (parseFloat(routeBalance) * usdPrice).toString();
-    const fromAmount = getFormattedNumber(routeData.route.route.estimate.fromAmount, routeData.route.route.estimate.fromToken.decimals);
-    const fromAmountUsd = getFormattedAmounts(routeData.route.route.estimate.fromAmountUSD ?? '');
-    return {
-        fromAmount,
-        fromAmountUsd,
-        routeBalance: getFormattedAmounts(routeBalance),
-        routeBalanceUsd: getFormattedAmounts(routeBalanceUsd),
-    };
-}
-
-function RouteOption({ routeData, onClick, chains, disabled = false, isFastest = false, size = 'small', rc = jsx("span", {}), selected = false, }) {
-    const { t } = useTranslation();
-    const { fromToken } = routeData.amountData;
-    const { estimate } = routeData.route.route;
-    const chain = chains?.find((c) => c.id === fromToken.chainId);
-    const estimatedDurationFormatted = getDurationFormatted(estimate.estimatedRouteDuration, t('views.ADD_TOKENS.routeSelection.minutesText'), t('views.ADD_TOKENS.routeSelection.minuteText'), t('views.ADD_TOKENS.routeSelection.secondsText'));
-    const { totalFeesUsd } = reactExports.useMemo(() => getTotalRouteFees(routeData.route), [routeData]);
-    const { routeBalanceUsd, fromAmount, fromAmountUsd } = reactExports.useMemo(() => getRouteAndTokenBalances(routeData), [routeData]);
-    const handleClick = () => {
-        onClick(routeData);
-    };
-    const menuItemProps = {
-        selected,
-        disabled,
-        emphasized: true,
-        rc,
-        size,
-        onClick: disabled ? undefined : handleClick,
-    };
-    return (jsxs(MenuItem, { ...menuItemProps, children: [jsx(MenuItem.Label, { children: fromToken.name }), chain && (jsxs(Sticker, { position: { x: 'right', y: 'bottom' }, children: [jsx(Sticker.FramedImage, { use: jsx("img", { src: chain.iconUrl, alt: chain.name }), size: "xSmall" }), jsx(MenuItem.FramedImage, { circularFrame: true, use: jsx("img", { src: fromToken.iconUrl, alt: fromToken.name }) })] })), jsxs(MenuItem.Caption, { children: [`${t('views.ADD_TOKENS.fees.balance')} ${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${routeBalanceUsd}`, routeData.isInsufficientGas && (jsxs(Fragment, { children: [jsx("br", {}), jsx("span", { style: { color: '#FF637F' }, children: t('views.ADD_TOKENS.noGasRouteMessage', {
-                                    token: routeData.route.route.estimate.gasCosts[0].token.symbol,
-                                }) })] }))] }), jsx(MenuItem.PriceDisplay, { price: fromAmount, children: jsx(MenuItem.PriceDisplay.Caption, { children: `${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${fromAmountUsd}` }) }), jsxs(MenuItem.BottomSlot, { children: [jsx(MenuItem.BottomSlot.Divider, {}), jsxs(Stack, { rc: jsx("span", {}), direction: "row", justifyContent: "space-between", sx: {
-                            w: '100%',
-                        }, children: [jsxs(Body, { sx: {
-                                    ...hFlex,
-                                    ...centerFlexChildren,
-                                    gap: 'base.spacing.x1',
-                                    c: 'base.color.text.body.secondary',
-                                }, size: "xSmall", children: [jsx(Icon, { icon: "Countdown", sx: {
-                                            w: 'base.icon.size.200',
-                                            fill: 'base.color.text.body.secondary',
-                                        }, variant: "bold" }), estimatedDurationFormatted] }), jsxs(Body, { size: "xSmall", sx: { ...hFlex, ...centerFlexChildren }, children: [isFastest && (jsx(Badge, { badgeContent: t('views.ADD_TOKENS.routeSelection.fastestBadge'), variant: "emphasis", sx: { mr: 'base.spacing.x2' } })), `${t('views.ADD_TOKENS.fees.fee')} ${t('views.ADD_TOKENS.fees.fiatPricePrefix')} 
-              $${getFormattedAmounts(totalFeesUsd)}`] })] })] })] }));
-}
-
-const defaultFiatOptions = [
-    FiatOptionType.DEBIT,
-    FiatOptionType.CREDIT,
-];
-function Options({ checkout, routes, chains, onCardClick, onRouteClick, size, showOnrampOption, insufficientBalance, selectedIndex, }) {
-    const { t } = useTranslation();
-    // @NOTE: early exit with loading related UI, when the
-    // routes are not yet available
-    if (!routes?.length && !insufficientBalance) {
-        return (jsxs(Stack, { sx: { pt: 'base.spacing.x3' }, alignItems: "stretch", gap: "base.spacing.x1", children: [jsx(MenuItem, { shimmer: "withBottomSlot", size: "small", emphasized: true }), jsx(MenuItem, { shimmer: "withBottomSlot", size: "small", emphasized: true }), jsxs(Body, { sx: { textAlign: 'center', mt: 'base.spacing.x6' }, size: "small", children: [t('views.ADD_TOKENS.drawer.options.loadingText1'), jsx("br", {}), t('views.ADD_TOKENS.drawer.options.loadingText2')] }), jsx(FramedVideo, { mimeType: "video/mp4", videoUrl: getRemoteVideo(checkout.config.environment, '/loading_bubble-small.mp4'), sx: { alignSelf: 'center', mt: 'base.spacing.x2' }, size: "large", circularFrame: true })] }));
-    }
-    const noRoutes = !(!insufficientBalance || routes?.length);
-    return (jsxs(Stack, { sx: { py: 'base.spacing.x3' }, alignItems: "stretch", gap: "base.spacing.x1", testId: "options-list", justifyContent: "center", rc: jsx(motion.div, { variants: listVariants, initial: "hidden", animate: "show" }), children: [routes?.map((routeData, index) => (jsx(RouteOption, { size: size, routeData: routeData, chains: chains, onClick: () => onRouteClick(routeData, index), isFastest: index === 0, selected: index === selectedIndex, rc: jsx(motion.div, { variants: listItemVariants }) }, `route-option-${routeData.amountData.fromToken.chainId}-${routeData.amountData.fromToken.address}`))), noRoutes && (jsxs(Banner, { children: [jsx(Banner.Icon, { icon: "InformationCircle" }), jsx(Banner.Title, { children: t('views.ADD_TOKENS.drawer.options.noRoutes.heading') }), jsx(Banner.Caption, { children: t('views.ADD_TOKENS.drawer.options.noRoutes.caption') })] })), showOnrampOption && (jsxs(Fragment, { children: [jsx(Divider, { size: "xSmall", sx: { my: 'base.spacing.x2' }, children: t('views.ADD_TOKENS.drawer.options.moreOptionsDividerText') }), defaultFiatOptions.map((type, idx) => (jsx(FiatOption, { type: type, size: size, onClick: onCardClick, rc: jsx(motion.div, { custom: idx, variants: listItemVariants }) }, `fiat-option-${type}`)))] }))] }));
-}
-
-function OptionsDrawer({ checkout, routes, visible, onClose, onRouteClick, onCardClick, showOnrampOption, 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-showSwapOption, 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-showBridgeOption, insufficientBalance, }) {
-    const { t } = useTranslation();
-    const { track } = useAnalytics();
-    const { addTokensState: { id, chains }, } = reactExports.useContext(AddTokensContext);
-    const { providersState: { fromProviderInfo, fromAddress }, } = useProvidersContext();
-    const selectedRouteIndex = reactExports.useRef(0);
-    const handleOnRouteClick = (route, index) => {
-        selectedRouteIndex.current = index;
-        onRouteClick(route);
-    };
-    reactExports.useEffect(() => {
-        if (!visible) {
-            return;
-        }
-        track({
-            userJourney: UserJourney.ADD_TOKENS,
-            screen: 'InputScreen',
-            control: 'RoutesMenu',
-            controlType: 'MenuItem',
-            action: 'Opened',
-            extras: {
-                contextId: id,
-                showOnrampOption: Boolean(showOnrampOption),
-                showSwapOption: Boolean(showSwapOption),
-                insufficientBalance: Boolean(insufficientBalance),
-                routesAvailable: routes?.length ?? 0,
-            },
-        });
-    }, [visible]);
-    return (jsx(Drawer, { size: "full", visible: visible, showHeaderBar: false, onCloseDrawer: onClose, children: jsxs(Drawer.Content, { rc: jsx(motion.div, { variants: listVariants, initial: "hidden", animate: "show" }), sx: {
-                pt: 'base.spacing.x3',
-                px: 'base.spacing.x3',
-            }, children: [jsxs(MenuItem, { size: "xSmall", children: [jsx(MenuItem.FramedImage, { padded: true, emphasized: true, use: (jsx("img", { src: fromProviderInfo?.icon, alt: fromProviderInfo?.name })), sx: { mx: 'base.spacing.x2' } }), jsx(MenuItem.Label, { children: t('views.ADD_TOKENS.drawer.options.heading') }), jsxs(MenuItem.Caption, { children: [fromProviderInfo?.name, ' • ', jsx(EllipsizedText, { text: fromAddress ?? '', sx: { c: 'inherit', fontSize: 'inherit' } })] }), jsx(MenuItem.StatefulButtCon, { icon: "ChevronExpand", onClick: onClose })] }), jsx(Options, { size: "small", checkout: checkout, routes: routes, chains: chains, onCardClick: onCardClick, onRouteClick: handleOnRouteClick, showOnrampOption: showOnrampOption, insufficientBalance: insufficientBalance, selectedIndex: selectedRouteIndex.current })] }) }));
-}
-
 const delay = (ms) => new Promise((resolve) => {
     setTimeout(resolve, ms);
 });
@@ -1779,70 +1545,30 @@ const useRoutes = () => {
     };
 };
 
-function SelectedRouteOptionContainer({ children, onClick, selected, }) {
-    return (jsx(Stack, { direction: "row", alignItems: "center", gap: "base.spacing.x4", sx: {
-            ml: ({ base }) => (selected
-                ? `calc(${base.spacing.x12} * -1)`
-                : `calc(${base.spacing.x16} * -1)`),
-            w: ({ base }) => (selected
-                ? `calc(100% + (${base.spacing.x12}))`
-                : `calc(100% + (${base.spacing.x16}))`),
-        }, rc: jsx("span", { ...(onClick ? { onClick } : {}) }), children: children }));
-}
-function SelectedRouteOption({ checkout, routeData, chains, loading = false, withSelectedWallet = false, insufficientBalance = false, showOnrampOption = false, onClick, }) {
-    const { t } = useTranslation();
-    const { fromToken } = routeData?.amountData ?? {};
-    const chain = chains?.find((c) => c.id === fromToken?.chainId);
-    const { routeBalanceUsd, fromAmount, fromAmountUsd } = reactExports.useMemo(() => getRouteAndTokenBalances(routeData), [routeData]);
-    const insufficientBalancePayWithCard = insufficientBalance && showOnrampOption;
-    const handleOnClick = reactExports.useCallback((event) => {
-        event.stopPropagation();
-        if (!loading && !routeData && !insufficientBalancePayWithCard)
-            return false;
-        onClick?.(event);
-        return true;
-    }, [onClick, loading, routeData]);
-    if (!routeData && loading) {
-        return (jsxs(SelectedRouteOptionContainer, { onClick: handleOnClick, selected: withSelectedWallet, children: [jsx(MenuItem.FramedVideo, { videoUrl: getRemoteVideo(checkout.config.environment, '/loading_bubble-small.mp4'), padded: true, mimeType: "video/mp4", circularFrame: true }), jsx(MenuItem.Caption, { children: t('views.ADD_TOKENS.routeSelection.loadingText') })] }));
-    }
-    if ((!routeData && !loading) || insufficientBalance) {
-        let icon = 'Sparkle';
-        let copy = '';
-        if (insufficientBalance) {
-            icon = 'InformationCircle';
-            copy = t('views.ADD_TOKENS.routeSelection.noRoute');
-        }
-        if (insufficientBalancePayWithCard) {
-            icon = 'BankCard';
-            copy = t('views.ADD_TOKENS.routeSelection.payWithCard');
-        }
-        return (jsxs(SelectedRouteOptionContainer, { onClick: handleOnClick, selected: withSelectedWallet, children: [jsx(MenuItem.FramedIcon, { icon: icon, variant: "bold", circularFrame: true, emphasized: false }), jsx(MenuItem.Caption, { children: copy })] }));
-    }
-    return (jsxs(SelectedRouteOptionContainer, { onClick: handleOnClick, selected: withSelectedWallet, children: [chain && (jsxs(Sticker, { position: { x: 'rightInside', y: 'bottomInside' }, children: [jsxs(Tooltip, { size: "small", children: [jsx(Tooltip.Target, { children: jsx(Sticker.FramedImage, { use: jsx("img", { src: chain.iconUrl, alt: chain.name }), size: "xSmall" }) }), jsx(Tooltip.Content, { id: "route_tooltip_content", children: chain.name })] }), jsx(MenuItem.FramedImage, { circularFrame: true, padded: true, use: jsx("img", { src: fromToken?.iconUrl, alt: fromToken?.name }) })] })), jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { w: '100%' }, children: [jsxs(Stack, { gap: "0px", children: [jsx(MenuItem.Label, { children: fromToken?.name }), jsxs(MenuItem.Caption, { children: [`${t('views.ADD_TOKENS.fees.balance')} ${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${routeBalanceUsd}`, routeData?.isInsufficientGas && (jsxs(Fragment, { children: [jsx("br", {}), jsx("span", { style: { color: '#FF637F' }, children: t('views.ADD_TOKENS.noGasRouteMessage', {
-                                                    token: routeData.route.route.estimate.gasCosts[0].token.symbol,
-                                                }) })] }))] })] }), jsx(MenuItem.PriceDisplay, { price: fromAmount, children: jsx(MenuItem.PriceDisplay.Caption, { children: `${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${fromAmountUsd}` }) })] })] }));
-}
-
-const disabledStyles = {
-    cursor: 'not-allowed',
-    bg: 'base.color.translucent.inverse.800',
-};
-function SelectedWallet({ label, caption, children, onClick, providerInfo, chainInfo, disabled, sx, }) {
-    const selected = !!children && providerInfo?.rdns;
-    const size = selected ? 'xSmall' : 'small';
-    const getMenuItemImage = () => {
-        const menuItemImage = !providerInfo?.icon ? (jsx(MenuItem.FramedIcon, { icon: "Wallet", variant: "bold", emphasized: false })) : (jsx(MenuItem.FramedImage, { padded: true, sx: { mx: selected ? 'base.spacing.x2' : undefined }, use: jsx("img", { src: providerInfo.icon, alt: providerInfo.name }) }));
-        if (chainInfo && providerInfo?.rdns) {
-            return (jsxs(Sticker, { position: { x: 'rightInside', y: 'bottomInside' }, children: [jsxs(Tooltip, { size: "small", children: [jsx(Tooltip.Target, { children: jsx(Sticker.FramedImage, { use: jsx("img", { src: chainInfo.iconUrl, alt: chainInfo.name }), size: "xSmall", sx: { bottom: 'base.spacing.x2', right: 'base.spacing.x2' } }) }), jsx(Tooltip.Content, { id: "route_tooltip_content", children: chainInfo.name })] }), menuItemImage] }));
-        }
-        return menuItemImage;
-    };
-    return (jsxs(MenuItem, { size: size, disabled: disabled, emphasized: !disabled, onClick: disabled ? undefined : onClick, sx: {
-            py: selected ? 'base.spacing.x3' : undefined,
-            ...(disabled ? disabledStyles : {}),
-            ...sx,
-        }, children: [getMenuItemImage(), jsx(MenuItem.Label, { children: label }), providerInfo?.name ? (jsxs(MenuItem.Caption, { children: [providerInfo?.name, ' • ', jsx(EllipsizedText, { text: providerInfo.address ?? '', sx: { c: 'inherit', fontSize: 'inherit' } })] })) : (jsx(MenuItem.Caption, { children: caption })), jsx(MenuItem.BottomSlot, { children: children })] }));
-}
+var FiatOptionType;
+(function (FiatOptionType) {
+    FiatOptionType["CREDIT"] = "credit";
+    FiatOptionType["DEBIT"] = "debit";
+})(FiatOptionType || (FiatOptionType = {}));
+var AddTokensErrorTypes;
+(function (AddTokensErrorTypes) {
+    AddTokensErrorTypes["DEFAULT"] = "DEFAULT_ERROR";
+    AddTokensErrorTypes["INVALID_PARAMETERS"] = "INVALID_PARAMETERS";
+    AddTokensErrorTypes["SERVICE_BREAKDOWN"] = "SERVICE_BREAKDOWN";
+    AddTokensErrorTypes["TRANSACTION_FAILED"] = "TRANSACTION_FAILED";
+    AddTokensErrorTypes["UNRECOGNISED_CHAIN"] = "UNRECOGNISED_CHAIN";
+    AddTokensErrorTypes["PROVIDER_ERROR"] = "PROVIDER_ERROR";
+    AddTokensErrorTypes["WALLET_FAILED"] = "WALLET_FAILED";
+    AddTokensErrorTypes["WALLET_REJECTED"] = "WALLET_REJECTED";
+    AddTokensErrorTypes["WALLET_REJECTED_NO_FUNDS"] = "WALLET_REJECTED_NO_FUNDS";
+    AddTokensErrorTypes["WALLET_POPUP_BLOCKED"] = "WALLET_POPUP_BLOCKED";
+    AddTokensErrorTypes["ENVIRONMENT_ERROR"] = "ENVIRONMENT_ERROR";
+    AddTokensErrorTypes["ROUTE_ERROR"] = "ROUTE_ERROR";
+})(AddTokensErrorTypes || (AddTokensErrorTypes = {}));
+var AddTokensExperiments;
+(function (AddTokensExperiments) {
+    AddTokensExperiments["PRESELECTED_TOKEN"] = "addTokensPreselectedToken";
+})(AddTokensExperiments || (AddTokensExperiments = {}));
 
 function WarningHero() {
     return (jsx(Box, { testId: "warning-hero", sx: {
@@ -4942,6 +4668,15 @@ const EXECUTE_TXN_ANIMATION = '/swapping_coins.riv';
 const TOKEN_PRIORITY_ORDER = ['IMX', 'USDC', 'ETH'];
 const TOOLKIT_SQUID_URL = 'https://toolkit.immutable.com/squid-bridge/';
 
+var RiveStateMachineInput;
+(function (RiveStateMachineInput) {
+    RiveStateMachineInput[RiveStateMachineInput["START"] = 0] = "START";
+    RiveStateMachineInput[RiveStateMachineInput["WAITING"] = 1] = "WAITING";
+    RiveStateMachineInput[RiveStateMachineInput["PROCESSING"] = 2] = "PROCESSING";
+    RiveStateMachineInput[RiveStateMachineInput["COMPLETED"] = 3] = "COMPLETED";
+    RiveStateMachineInput[RiveStateMachineInput["ERROR"] = 4] = "ERROR";
+})(RiveStateMachineInput || (RiveStateMachineInput = {}));
+
 const useError = (environment) => {
     const { viewDispatch } = reactExports.useContext(ViewContext);
     const { page } = useAnalytics();
@@ -5231,11 +4966,6 @@ function TokenDrawerMenu({ checkout, config, toTokenAddress, addTokensState, add
                             && tokenChoiceOptions.map((token) => (jsxs(MenuItem, { size: "medium", onClick: () => handleTokenChange(token), selected: isSelected(token), emphasized: true, children: [jsx(MenuItem.FramedImage, { circularFrame: true, use: (jsx(TokenImage, { src: token.icon, name: token.name, defaultImage: defaultTokenImage })), emphasized: false }), jsx(MenuItem.Label, { children: token.symbol }), token.symbol !== token.name && (jsx(MenuItem.Caption, { children: token.name }))] }, token.name))) })] })] }));
 }
 
-const checkSanctionedAddresses = async (addresses, config) => {
-    const result = await fetchRiskAssessment(addresses, config);
-    return isAddressSanctioned(result);
-};
-
 function NoGasHero() {
     return (jsx(Box, { testId: "no-gas-hero", children: jsxs("svg", { width: "431", height: "243", viewBox: "0 0 431 243", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M143.152 175.023C143.116 180.739 146.858 186.445 154.383 190.79C161.909 195.135 171.795 197.295 181.697 197.274C191.598 197.254 201.51 195.053 209.093 190.677C216.675 186.301 220.484 180.574 220.52 174.863V185.172C220.484 190.888 216.67 196.609 209.093 200.986C201.51 205.362 191.598 207.563 181.697 207.583C171.795 207.604 161.909 205.444 154.383 201.099C146.858 196.754 143.116 191.048 143.152 185.332V175.023Z", fill: "#F7F7F7", stroke: "#0D0D0D", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M181.697 197.275C171.795 197.295 161.909 195.135 154.383 190.79C146.858 186.445 143.116 180.739 143.152 175.023V185.332C143.116 191.048 146.858 196.754 154.383 201.099C161.909 205.444 171.795 207.604 181.697 207.583V197.275Z", fill: "#0D0D0D" }), jsx("path", { d: "M181.964 197.301C203.329 197.167 220.585 187.059 220.508 174.724C220.43 162.389 203.048 152.499 181.683 152.633C160.319 152.767 143.063 162.875 143.14 175.21C143.218 187.545 160.6 197.435 181.964 197.301Z", fill: "#F7F7F7", stroke: "#0D0D0D", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M176.573 168.751L176.382 167.359L175.717 162.535L179.202 160.499L180.46 169.725C180.46 169.725 178.661 169.648 178.058 169.627C177.253 169.591 176.614 169.215 176.573 168.756V168.751ZM161.496 170.849C161.496 170.849 175.094 171.472 179.63 171.483C180.346 171.483 180.754 171.787 180.81 172.194C181.027 173.689 181.016 173.72 181.016 173.72L158.033 172.874L161.496 170.849ZM188.8 180.622L188.99 182.013L189.655 186.838L186.171 188.874L184.913 179.647C184.913 179.647 186.712 179.725 187.315 179.745C188.119 179.781 188.758 180.158 188.8 180.616V180.622ZM181.357 176.215C181.851 179.957 183.32 190.539 183.32 190.539L179.578 192.729L177.692 178.395C177.63 177.936 176.991 177.57 176.213 177.55L151.559 176.653L155.161 174.544L179.991 175.467C180.676 175.519 181.3 175.818 181.362 176.209L181.357 176.215ZM203.825 178.555L186.923 177.905L186.042 177.848C185.248 177.818 184.599 177.436 184.558 176.977L182.073 158.818L185.666 156.715L187.836 174.797C187.877 175.256 188.526 175.637 189.32 175.668L207.577 176.359L203.825 178.555ZM210.449 174.684C210.449 174.684 196.799 174.153 192.243 173.977C191.722 173.957 191.253 173.787 190.995 173.539C190.872 173.39 190.794 173.189 190.779 173.029L190.671 171.849L213.856 172.694L210.449 174.689V174.684Z", fill: "#0D0D0D" }), jsx("path", { d: "M143.152 159.559C143.116 165.276 146.858 170.982 154.383 175.327C161.909 179.672 171.795 181.832 181.697 181.811C191.598 181.791 201.51 179.59 209.093 175.214C216.675 170.837 220.484 165.111 220.52 159.4V169.709C220.484 175.425 216.67 181.146 209.093 185.523C201.51 189.899 191.598 192.1 181.697 192.12C171.795 192.141 161.909 189.981 154.383 185.636C146.858 181.291 143.116 175.585 143.152 169.868V159.559Z", fill: "#F7F7F7", stroke: "#0D0D0D", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M181.697 181.811C171.795 181.832 161.909 179.672 154.383 175.327C146.858 170.982 143.116 165.276 143.152 159.56V169.869C143.116 175.585 146.858 181.291 154.383 185.636C161.909 189.981 171.795 192.141 181.697 192.12V181.811Z", fill: "#0D0D0D" }), jsx("path", { d: "M181.964 181.838C203.329 181.704 220.585 171.595 220.508 159.261C220.43 146.926 203.048 137.036 181.683 137.17C160.319 137.304 143.063 147.412 143.14 159.747C143.218 172.082 160.6 181.972 181.964 181.838Z", fill: "#F7F7F7", stroke: "#0D0D0D", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M176.573 153.287L176.382 151.895L175.717 147.071L179.202 145.035L180.46 154.261C180.46 154.261 178.661 154.184 178.058 154.163C177.253 154.127 176.614 153.751 176.573 153.292V153.287ZM161.496 155.385C161.496 155.385 175.094 156.009 179.63 156.019C180.346 156.019 180.754 156.323 180.81 156.73C181.027 158.225 181.016 158.256 181.016 158.256L158.033 157.411L161.496 155.385ZM188.8 165.158L188.99 166.549L189.655 171.374L186.171 173.41L184.913 164.183C184.913 164.183 186.712 164.261 187.315 164.282C188.119 164.318 188.758 164.694 188.8 165.153V165.158ZM181.357 160.751C181.851 164.493 183.32 175.075 183.32 175.075L179.578 177.266L177.692 162.931C177.63 162.472 176.991 162.106 176.213 162.086L151.559 161.189L155.161 159.081L179.991 160.003C180.676 160.055 181.3 160.354 181.362 160.745L181.357 160.751ZM203.825 163.091L186.923 162.441L186.042 162.385C185.248 162.354 184.599 161.972 184.558 161.514L182.073 143.354L185.666 141.251L187.836 159.333C187.877 159.792 188.526 160.173 189.32 160.204L207.577 160.895L203.825 163.091ZM210.449 159.22C210.449 159.22 196.799 158.689 192.243 158.514C191.722 158.493 191.253 158.323 190.995 158.076C190.872 157.926 190.794 157.725 190.779 157.565L190.671 156.385L213.856 157.23L210.449 159.225V159.22Z", fill: "#0D0D0D" }), jsx("path", { d: "M143.152 144.096C143.116 149.812 146.858 155.518 154.383 159.864C161.909 164.209 171.795 166.369 181.697 166.348C191.598 166.327 201.51 164.126 209.093 159.75C216.675 155.374 220.484 149.647 220.52 143.936V154.245C220.484 159.962 216.67 165.683 209.093 170.059C201.51 174.435 191.598 176.636 181.697 176.657C171.795 176.678 161.909 174.518 154.383 170.173C146.858 165.827 143.116 160.121 143.152 154.405V144.096Z", fill: "#F7F7F7", stroke: "#0D0D0D", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M181.697 166.348C171.795 166.369 161.909 164.209 154.383 159.864C146.858 155.518 143.116 149.813 143.152 144.096V154.405C143.116 160.121 146.858 165.827 154.383 170.173C161.909 174.518 171.795 176.678 181.697 176.657V166.348Z", fill: "#0D0D0D" }), jsx("path", { d: "M181.964 166.374C203.329 166.24 220.585 156.132 220.508 143.797C220.43 131.463 203.048 121.572 181.683 121.707C160.319 121.841 143.063 131.949 143.14 144.284C143.218 156.618 160.6 166.509 181.964 166.374Z", fill: "#F7F7F7", stroke: "#0D0D0D", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M176.573 137.824L176.382 136.432L175.717 131.608L179.202 129.572L180.46 138.798C180.46 138.798 178.661 138.721 178.058 138.7C177.253 138.664 176.614 138.288 176.573 137.829V137.824ZM161.496 139.922C161.496 139.922 175.094 140.546 179.63 140.556C180.346 140.556 180.754 140.86 180.81 141.267C181.027 142.762 181.016 142.793 181.016 142.793L158.033 141.948L161.496 139.922ZM188.8 149.695L188.99 151.087L189.655 155.911L186.171 157.947L184.913 148.721C184.913 148.721 186.712 148.798 187.315 148.819C188.119 148.855 188.758 149.231 188.8 149.69V149.695ZM181.357 145.288C181.851 149.03 183.32 159.612 183.32 159.612L179.578 161.803L177.692 147.468C177.63 147.009 176.991 146.643 176.213 146.623L151.559 145.726L155.161 143.618L179.991 144.54C180.676 144.592 181.3 144.891 181.362 145.283L181.357 145.288ZM203.825 147.628L186.923 146.978L186.042 146.922C185.248 146.891 184.599 146.509 184.558 146.051L182.073 127.891L185.666 125.788L187.836 143.87C187.877 144.329 188.526 144.71 189.32 144.741L207.577 145.432L203.825 147.628ZM210.449 143.757C210.449 143.757 196.799 143.226 192.243 143.051C191.722 143.03 191.253 142.86 190.995 142.613C190.872 142.463 190.794 142.262 190.779 142.102L190.671 140.922L213.856 141.767L210.449 143.762V143.757Z", fill: "#0D0D0D" }), jsx("path", { d: "M143.152 128.632C143.116 134.349 146.858 140.055 154.383 144.4C161.909 148.745 171.795 150.905 181.697 150.884C191.598 150.864 201.51 148.663 209.093 144.287C216.675 139.91 220.484 134.184 220.52 128.473V138.782C220.484 144.498 216.67 150.219 209.093 154.596C201.51 158.972 191.598 161.173 181.697 161.193C171.795 161.214 161.909 159.054 154.383 154.709C146.858 150.364 143.116 144.658 143.152 138.941V128.632Z", fill: "#F7F7F7", stroke: "#0D0D0D", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M181.697 150.884C171.795 150.905 161.909 148.745 154.383 144.4C146.858 140.055 143.116 134.349 143.152 128.633V138.942C143.116 144.658 146.858 150.364 154.383 154.709C161.909 159.054 171.795 161.214 181.697 161.193V150.884Z", fill: "#0D0D0D" }), jsx("path", { d: "M181.964 150.911C203.329 150.777 220.585 140.668 220.508 128.334C220.43 115.999 203.048 106.109 181.683 106.243C160.319 106.377 143.063 116.485 143.14 128.82C143.218 141.155 160.6 151.045 181.964 150.911Z", fill: "#F7F7F7", stroke: "#0D0D0D", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M217.788 148.205C202.374 174.772 202.374 203.421 217.788 212.188C233.202 220.955 258.19 206.526 273.604 179.959C289.018 153.392 289.018 124.743 273.604 115.976C258.19 107.209 233.202 121.638 217.788 148.205ZM228.948 154.556C236.24 141.987 247.097 133.954 255.9 133.695L224.324 188.126C220.122 180.463 221.656 167.124 228.948 154.556ZM262.437 173.608C255.145 186.177 244.288 194.21 235.484 194.469L267.061 140.038C271.263 147.701 269.729 161.04 262.437 173.608Z", fill: "#FF637F", stroke: "#0D0D0D", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M273.612 115.976L260.777 108.565C245.363 99.7984 220.374 114.227 204.96 140.801C189.546 167.368 189.546 196.018 204.96 204.785L217.795 212.195C202.381 203.429 202.381 174.779 217.795 148.212C233.202 121.638 258.19 107.209 273.605 115.983", fill: "#FF637F" }), jsx("path", { d: "M273.612 115.976L260.777 108.565C245.363 99.7984 220.374 114.227 204.96 140.801C189.546 167.368 189.546 196.018 204.96 204.785L217.795 212.195C202.381 203.429 202.381 174.779 217.795 148.212C233.202 121.638 258.19 107.209 273.605 115.983", stroke: "#0D0D0D", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M228.948 154.555C236.24 141.987 247.097 133.954 255.901 133.695L224.324 188.126C220.122 180.463 221.656 167.124 228.948 154.555Z", fill: "#0D0D0D", stroke: "#0D0D0D", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M262.444 173.616C255.152 186.184 244.296 194.217 235.492 194.476L267.068 140.045C271.27 147.708 269.736 161.047 262.444 173.616Z", fill: "#0D0D0D", stroke: "#0D0D0D", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M204.953 140.794C189.539 167.361 189.539 196.011 204.953 204.777L217.788 212.188C202.374 203.421 202.374 174.772 217.788 148.205L204.953 140.794Z", fill: "#0D0D0D", stroke: "#0D0D0D", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) }));
 }
@@ -5267,6 +4997,277 @@ function NotEnoughGasDrawer({ visible, routeData, onTryAgainClick, onToolkitClic
                     }, children: [jsx(Button, { sx: { width: '100%', mb: 'base.spacing.x4' }, testId: "non-passport-cta-button", variant: "primary", size: "large", onClick: onTryAgainClick, children: t('views.ADD_TOKENS.noGasDrawer.primaryAction') }), jsx(Button, { sx: { width: '100%', marginBottom: 'base.spacing.x10' }, testId: "non-passport-cta-button", variant: "tertiary", size: "large", onClick: onToolkitClick, children: t('views.ADD_TOKENS.noGasDrawer.secondaryAction', { token: tokenName }) })] })] }) }));
 }
 
+const disabledStyles = {
+    cursor: 'not-allowed',
+    bg: 'base.color.translucent.inverse.800',
+};
+function SelectedWallet({ label, caption, children, onClick, providerInfo, chainInfo, disabled, sx, }) {
+    const selected = !!children && providerInfo?.rdns;
+    const size = selected ? 'xSmall' : 'small';
+    const getMenuItemImage = () => {
+        const menuItemImage = !providerInfo?.icon ? (jsx(MenuItem.FramedIcon, { icon: "Wallet", variant: "bold", emphasized: false })) : (jsx(MenuItem.FramedImage, { padded: true, sx: { mx: selected ? 'base.spacing.x2' : undefined }, use: jsx("img", { src: providerInfo.icon, alt: providerInfo.name }) }));
+        if (chainInfo && providerInfo?.rdns) {
+            return (jsxs(Sticker, { position: { x: 'rightInside', y: 'bottomInside' }, children: [jsxs(Tooltip, { size: "small", children: [jsx(Tooltip.Target, { children: jsx(Sticker.FramedImage, { use: jsx("img", { src: chainInfo.iconUrl, alt: chainInfo.name }), size: "xSmall", sx: { bottom: 'base.spacing.x2', right: 'base.spacing.x2' } }) }), jsx(Tooltip.Content, { id: "route_tooltip_content", children: chainInfo.name })] }), menuItemImage] }));
+        }
+        return menuItemImage;
+    };
+    return (jsxs(MenuItem, { size: size, disabled: disabled, emphasized: !disabled, onClick: disabled ? undefined : onClick, sx: {
+            py: selected ? 'base.spacing.x3' : undefined,
+            ...(disabled ? disabledStyles : {}),
+            ...sx,
+        }, children: [getMenuItemImage(), jsx(MenuItem.Label, { children: label }), providerInfo?.name ? (jsxs(MenuItem.Caption, { children: [providerInfo?.name, ' • ', jsx(EllipsizedText, { text: providerInfo.address ?? '', sx: { c: 'inherit', fontSize: 'inherit' } })] })) : (jsx(MenuItem.Caption, { children: caption })), jsx(MenuItem.BottomSlot, { children: children })] }));
+}
+
+/**
+ * Formats a number to a string with a maximum number of decimals
+ * removing trailing zeros
+ */
+const getFormattedAmounts = (value, maxDecimals = DEFAULT_TOKEN_FORMATTING_DECIMALS) => {
+    const amount = typeof value === 'number' ? value : parseFloat(value);
+    if (Number.isNaN(amount)) {
+        return '-.--';
+    }
+    if (amount > 0 && amount < 1) {
+        return tokenValueFormat(value, maxDecimals).replace(/\.?0+$/, '');
+    }
+    return tokenValueFormat(amount, maxDecimals);
+};
+/**
+ * Converts a crypto amount to a formatted string
+ */
+function getFormattedNumber(value, decimals, maxDecimals = 5) {
+    const amount = String(value);
+    let formattedValue = '';
+    try {
+        if (Number.isNaN(amount) || !decimals) {
+            throw new Error('Invalid amount or decimals');
+        }
+        formattedValue = formatUnits(BigNumber.from(amount), decimals)
+            .toString();
+    }
+    catch {
+        return '-.--';
+    }
+    return getFormattedAmounts(formattedValue, maxDecimals);
+}
+
+const emptyRouteBalance = {
+    routeBalance: getFormattedAmounts(''),
+    routeBalanceUsd: getFormattedAmounts(''),
+    fromAmount: getFormattedAmounts(''),
+    fromAmountUsd: getFormattedAmounts(''),
+};
+function getRouteAndTokenBalances(routeData) {
+    if (!routeData) {
+        return emptyRouteBalance;
+    }
+    const usdPrice = routeData?.route.route.estimate.fromToken.usdPrice;
+    if (!usdPrice) {
+        return emptyRouteBalance;
+    }
+    const { balance } = routeData.amountData;
+    const routeBalance = getFormattedNumber(balance.balance, balance?.decimals, balance?.decimals);
+    const routeBalanceUsd = (parseFloat(routeBalance) * usdPrice).toString();
+    const fromAmount = getFormattedNumber(routeData.route.route.estimate.fromAmount, routeData.route.route.estimate.fromToken.decimals);
+    const fromAmountUsd = getFormattedAmounts(routeData.route.route.estimate.fromAmountUSD ?? '');
+    return {
+        fromAmount,
+        fromAmountUsd,
+        routeBalance: getFormattedAmounts(routeBalance),
+        routeBalanceUsd: getFormattedAmounts(routeBalanceUsd),
+    };
+}
+
+/**
+ * Get the total fees for a route
+ */
+function getTotalRouteFees(route) {
+    const [fees, feesUsd] = route?.route.estimate.feeCosts.reduce(([acc, accUsd], fee) => [
+        acc + parseFloat(fee.amount),
+        accUsd + parseFloat(fee.amountUsd),
+    ], [0, 0]) ?? [0, 0];
+    const [gasFees, gasFeesUsd] = route?.route.estimate.gasCosts.reduce(([acc, accUsd], fee) => [
+        acc + parseFloat(fee.amount),
+        accUsd + parseFloat(fee.amountUsd),
+    ], [0, 0]) ?? [0, 0];
+    const totalFees = fees + gasFees;
+    const totalFeesUsd = feesUsd + gasFeesUsd;
+    return {
+        fees,
+        feesUsd,
+        gasFees,
+        gasFeesUsd,
+        totalFees,
+        totalFeesUsd,
+    };
+}
+
+function getDurationFormatted(estimatedRouteDuration, minutesText, minuteText, secondText) {
+    const seconds = estimatedRouteDuration;
+    if (seconds >= 60) {
+        const minutes = Math.round(seconds / 60);
+        return minutes === 1 ? `1 ${minuteText}` : `${minutes} ${minutesText}`;
+    }
+    return `${seconds.toFixed(0)}${secondText}`;
+}
+
+function RouteOption({ routeData, onClick, chains, disabled = false, isFastest = false, size = 'small', rc = jsx("span", {}), selected = false, }) {
+    const { t } = useTranslation();
+    const { fromToken } = routeData.amountData;
+    const { estimate } = routeData.route.route;
+    const chain = chains?.find((c) => c.id === fromToken.chainId);
+    const estimatedDurationFormatted = getDurationFormatted(estimate.estimatedRouteDuration, t('views.ADD_TOKENS.routeSelection.minutesText'), t('views.ADD_TOKENS.routeSelection.minuteText'), t('views.ADD_TOKENS.routeSelection.secondsText'));
+    const { totalFeesUsd } = reactExports.useMemo(() => getTotalRouteFees(routeData.route), [routeData]);
+    const { routeBalanceUsd, fromAmount, fromAmountUsd } = reactExports.useMemo(() => getRouteAndTokenBalances(routeData), [routeData]);
+    const handleClick = () => {
+        onClick(routeData);
+    };
+    const menuItemProps = {
+        selected,
+        disabled,
+        emphasized: true,
+        rc,
+        size,
+        onClick: disabled ? undefined : handleClick,
+    };
+    return (jsxs(MenuItem, { ...menuItemProps, children: [jsx(MenuItem.Label, { children: fromToken.name }), chain && (jsxs(Sticker, { position: { x: 'right', y: 'bottom' }, children: [jsx(Sticker.FramedImage, { use: jsx("img", { src: chain.iconUrl, alt: chain.name }), size: "xSmall" }), jsx(MenuItem.FramedImage, { circularFrame: true, use: jsx("img", { src: fromToken.iconUrl, alt: fromToken.name }) })] })), jsxs(MenuItem.Caption, { children: [`${t('views.ADD_TOKENS.fees.balance')} ${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${routeBalanceUsd}`, routeData.isInsufficientGas && (jsxs(Fragment, { children: [jsx("br", {}), jsx("span", { style: { color: '#FF637F' }, children: t('views.ADD_TOKENS.noGasRouteMessage', {
+                                    token: routeData.route.route.estimate.gasCosts[0].token.symbol,
+                                }) })] }))] }), jsx(MenuItem.PriceDisplay, { price: fromAmount, children: jsx(MenuItem.PriceDisplay.Caption, { children: `${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${fromAmountUsd}` }) }), jsxs(MenuItem.BottomSlot, { children: [jsx(MenuItem.BottomSlot.Divider, {}), jsxs(Stack, { rc: jsx("span", {}), direction: "row", justifyContent: "space-between", sx: {
+                            w: '100%',
+                        }, children: [jsxs(Body, { sx: {
+                                    ...hFlex,
+                                    ...centerFlexChildren,
+                                    gap: 'base.spacing.x1',
+                                    c: 'base.color.text.body.secondary',
+                                }, size: "xSmall", children: [jsx(Icon, { icon: "Countdown", sx: {
+                                            w: 'base.icon.size.200',
+                                            fill: 'base.color.text.body.secondary',
+                                        }, variant: "bold" }), estimatedDurationFormatted] }), jsxs(Body, { size: "xSmall", sx: { ...hFlex, ...centerFlexChildren }, children: [isFastest && (jsx(Badge, { badgeContent: t('views.ADD_TOKENS.routeSelection.fastestBadge'), variant: "emphasis", sx: { mr: 'base.spacing.x2' } })), `${t('views.ADD_TOKENS.fees.fee')} ${t('views.ADD_TOKENS.fees.fiatPricePrefix')} 
+              $${getFormattedAmounts(totalFeesUsd)}`] })] })] })] }));
+}
+
+function FiatOption({ type, onClick, disabled = false, size = 'small', rc = jsx("span", {}), }) {
+    const { t } = useTranslation();
+    const icon = {
+        [FiatOptionType.DEBIT]: 'BankCard',
+        [FiatOptionType.CREDIT]: 'Craft',
+    };
+    const handleClick = () => {
+        onClick?.(type);
+    };
+    const menuItemProps = {
+        disabled,
+        emphasized: true,
+        onClick: disabled ? undefined : handleClick,
+        size,
+        rc,
+    };
+    return (jsxs(MenuItem, { ...menuItemProps, children: [jsx(MenuItem.FramedIcon, { icon: icon[type], variant: "bold", emphasized: false }), jsx(MenuItem.Label, { children: t(`views.ADD_TOKENS.drawer.options.${type}.heading`) }), jsx(MenuItem.Caption, { children: t(`views.ADD_TOKENS.drawer.options.${type}.${disabled ? 'disabledCaption' : 'caption'}`) }), !disabled && jsx(MenuItem.IntentIcon, {})] }));
+}
+
+const defaultFiatOptions = [
+    FiatOptionType.DEBIT,
+    FiatOptionType.CREDIT,
+];
+function RouteOptions({ checkout, routes, chains, onCardClick, onRouteClick, size, showOnrampOption, insufficientBalance, selectedIndex, }) {
+    const { t } = useTranslation();
+    // @NOTE: early exit with loading related UI, when the
+    // routes are not yet available
+    if (!routes?.length && !insufficientBalance) {
+        return (jsxs(Stack, { sx: { pt: 'base.spacing.x3' }, alignItems: "stretch", gap: "base.spacing.x1", children: [jsx(MenuItem, { shimmer: "withBottomSlot", size: "small", emphasized: true }), jsx(MenuItem, { shimmer: "withBottomSlot", size: "small", emphasized: true }), jsxs(Body, { sx: { textAlign: 'center', mt: 'base.spacing.x6' }, size: "small", children: [t('views.ADD_TOKENS.drawer.options.loadingText1'), jsx("br", {}), t('views.ADD_TOKENS.drawer.options.loadingText2')] }), jsx(FramedVideo, { mimeType: "video/mp4", videoUrl: getRemoteVideo(checkout.config.environment, '/loading_bubble-small.mp4'), sx: { alignSelf: 'center', mt: 'base.spacing.x2' }, size: "large", circularFrame: true })] }));
+    }
+    const noRoutes = !(!insufficientBalance || routes?.length);
+    return (jsxs(Stack, { sx: { py: 'base.spacing.x3' }, alignItems: "stretch", gap: "base.spacing.x1", testId: "options-list", justifyContent: "center", rc: jsx(motion.div, { variants: listVariants, initial: "hidden", animate: "show" }), children: [routes?.map((routeData, index) => (jsx(RouteOption, { size: size, routeData: routeData, chains: chains, onClick: () => onRouteClick(routeData, index), isFastest: index === 0, selected: index === selectedIndex, rc: jsx(motion.div, { variants: listItemVariants }) }, `route-option-${routeData.amountData.fromToken.chainId}-${routeData.amountData.fromToken.address}`))), noRoutes && (jsxs(Banner, { children: [jsx(Banner.Icon, { icon: "InformationCircle" }), jsx(Banner.Title, { children: t('views.ADD_TOKENS.drawer.options.noRoutes.heading') }), jsx(Banner.Caption, { children: t('views.ADD_TOKENS.drawer.options.noRoutes.caption') })] })), showOnrampOption && (jsxs(Fragment, { children: [jsx(Divider, { size: "xSmall", sx: { my: 'base.spacing.x2' }, children: t('views.ADD_TOKENS.drawer.options.moreOptionsDividerText') }), defaultFiatOptions.map((type, idx) => (jsx(FiatOption, { type: type, size: size, onClick: onCardClick, rc: jsx(motion.div, { custom: idx, variants: listItemVariants }) }, `fiat-option-${type}`)))] }))] }));
+}
+
+function RouteOptionsDrawer({ checkout, routes, visible, onClose, onRouteClick, onCardClick, showOnrampOption, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+showSwapOption, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+showBridgeOption, insufficientBalance, }) {
+    const { t } = useTranslation();
+    const { track } = useAnalytics();
+    const { addTokensState: { id, chains }, } = reactExports.useContext(AddTokensContext);
+    const { providersState: { fromProviderInfo, fromAddress }, } = useProvidersContext();
+    const selectedRouteIndex = reactExports.useRef(0);
+    const handleOnRouteClick = (route, index) => {
+        selectedRouteIndex.current = index;
+        onRouteClick(route);
+    };
+    reactExports.useEffect(() => {
+        if (!visible) {
+            return;
+        }
+        track({
+            userJourney: UserJourney.ADD_TOKENS,
+            screen: 'InputScreen',
+            control: 'RoutesMenu',
+            controlType: 'MenuItem',
+            action: 'Opened',
+            extras: {
+                contextId: id,
+                showOnrampOption: Boolean(showOnrampOption),
+                showSwapOption: Boolean(showSwapOption),
+                insufficientBalance: Boolean(insufficientBalance),
+                routesAvailable: routes?.length ?? 0,
+            },
+        });
+    }, [visible]);
+    return (jsx(Drawer, { size: "full", visible: visible, showHeaderBar: false, onCloseDrawer: onClose, children: jsxs(Drawer.Content, { rc: jsx(motion.div, { variants: listVariants, initial: "hidden", animate: "show" }), sx: {
+                pt: 'base.spacing.x3',
+                px: 'base.spacing.x3',
+            }, children: [jsxs(MenuItem, { size: "xSmall", children: [jsx(MenuItem.FramedImage, { padded: true, emphasized: true, use: (jsx("img", { src: fromProviderInfo?.icon, alt: fromProviderInfo?.name })), sx: { mx: 'base.spacing.x2' } }), jsx(MenuItem.Label, { children: t('views.ADD_TOKENS.drawer.options.heading') }), jsxs(MenuItem.Caption, { children: [fromProviderInfo?.name, ' • ', jsx(EllipsizedText, { text: fromAddress ?? '', sx: { c: 'inherit', fontSize: 'inherit' } })] }), jsx(MenuItem.StatefulButtCon, { icon: "ChevronExpand", onClick: onClose })] }), jsx(RouteOptions, { size: "small", checkout: checkout, routes: routes, chains: chains, onCardClick: onCardClick, onRouteClick: handleOnRouteClick, showOnrampOption: showOnrampOption, insufficientBalance: insufficientBalance, selectedIndex: selectedRouteIndex.current })] }) }));
+}
+
+function SelectedRouteOptionContainer({ children, onClick, selected, }) {
+    return (jsx(Stack, { direction: "row", alignItems: "center", gap: "base.spacing.x4", sx: {
+            ml: ({ base }) => (selected
+                ? `calc(${base.spacing.x12} * -1)`
+                : `calc(${base.spacing.x16} * -1)`),
+            w: ({ base }) => (selected
+                ? `calc(100% + (${base.spacing.x12}))`
+                : `calc(100% + (${base.spacing.x16}))`),
+        }, rc: jsx("span", { ...(onClick ? { onClick } : {}) }), children: children }));
+}
+function SelectedRouteOption({ checkout, routeData, chains, loading = false, withSelectedWallet = false, insufficientBalance = false, showOnrampOption = false, onClick, }) {
+    const { t } = useTranslation();
+    const { fromToken } = routeData?.amountData ?? {};
+    const chain = chains?.find((c) => c.id === fromToken?.chainId);
+    const { routeBalanceUsd, fromAmount, fromAmountUsd } = reactExports.useMemo(() => getRouteAndTokenBalances(routeData), [routeData]);
+    const insufficientBalancePayWithCard = insufficientBalance && showOnrampOption;
+    const handleOnClick = reactExports.useCallback((event) => {
+        event.stopPropagation();
+        if (!loading && !routeData && !insufficientBalancePayWithCard)
+            return false;
+        onClick?.(event);
+        return true;
+    }, [onClick, loading, routeData]);
+    if (!routeData && loading) {
+        return (jsxs(SelectedRouteOptionContainer, { onClick: handleOnClick, selected: withSelectedWallet, children: [jsx(MenuItem.FramedVideo, { videoUrl: getRemoteVideo(checkout.config.environment, '/loading_bubble-small.mp4'), padded: true, mimeType: "video/mp4", circularFrame: true }), jsx(MenuItem.Caption, { children: t('views.ADD_TOKENS.routeSelection.loadingText') })] }));
+    }
+    if ((!routeData && !loading) || insufficientBalance) {
+        let icon = 'Sparkle';
+        let copy = '';
+        if (insufficientBalance) {
+            icon = 'InformationCircle';
+            copy = t('views.ADD_TOKENS.routeSelection.noRoute');
+        }
+        if (insufficientBalancePayWithCard) {
+            icon = 'BankCard';
+            copy = t('views.ADD_TOKENS.routeSelection.payWithCard');
+        }
+        return (jsxs(SelectedRouteOptionContainer, { onClick: handleOnClick, selected: withSelectedWallet, children: [jsx(MenuItem.FramedIcon, { icon: icon, variant: "bold", circularFrame: true, emphasized: false }), jsx(MenuItem.Caption, { children: copy })] }));
+    }
+    return (jsxs(SelectedRouteOptionContainer, { onClick: handleOnClick, selected: withSelectedWallet, children: [chain && (jsxs(Sticker, { position: { x: 'rightInside', y: 'bottomInside' }, children: [jsxs(Tooltip, { size: "small", children: [jsx(Tooltip.Target, { children: jsx(Sticker.FramedImage, { use: jsx("img", { src: chain.iconUrl, alt: chain.name }), size: "xSmall" }) }), jsx(Tooltip.Content, { id: "route_tooltip_content", children: chain.name })] }), jsx(MenuItem.FramedImage, { circularFrame: true, padded: true, use: jsx("img", { src: fromToken?.iconUrl, alt: fromToken?.name }) })] })), jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { w: '100%' }, children: [jsxs(Stack, { gap: "0px", children: [jsx(MenuItem.Label, { children: fromToken?.name }), jsxs(MenuItem.Caption, { children: [`${t('views.ADD_TOKENS.fees.balance')} ${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${routeBalanceUsd}`, routeData?.isInsufficientGas && (jsxs(Fragment, { children: [jsx("br", {}), jsx("span", { style: { color: '#FF637F' }, children: t('views.ADD_TOKENS.noGasRouteMessage', {
+                                                    token: routeData.route.route.estimate.gasCosts[0].token.symbol,
+                                                }) })] }))] })] }), jsx(MenuItem.PriceDisplay, { price: fromAmount, children: jsx(MenuItem.PriceDisplay.Caption, { children: `${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${fromAmountUsd}` }) })] })] }));
+}
+
+const checkSanctionedAddresses = async (addresses, config) => {
+    const result = await fetchRiskAssessment(addresses, config);
+    return isAddressSanctioned(result);
+};
+
 function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOption = true, showSwapOption = true, showBridgeOption = true, onCloseButtonClick, showBackButton, onBackButtonClick, }) {
     const inputRef = reactExports.useRef(null);
     const { fetchRoutesWithRateLimit, resetRoutes } = useRoutes();
@@ -5694,7 +5695,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
                                             : {}, label: t('views.ADD_TOKENS.walletSelection.to.label'), caption: t('views.ADD_TOKENS.walletSelection.to.caption'), providerInfo: {
                                             ...toProviderInfo,
                                             address: toAddress,
-                                        }, chainInfo: getChainInfo(), onClick: () => setShowDeliverToDrawer(true), disabled: lockedToProvider })] }), jsx(Button, { testId: "add-tokens-button", size: "large", variant: readyToReview ? 'primary' : 'secondary', disabled: !readyToReview, onClick: handleReviewClick, sx: { opacity: readyToReview ? 1 : 0.5 }, children: t('views.ADD_TOKENS.review.buttonText') }), jsx(SquidFooter, {}), jsx(PayWithWalletDrawer, { visible: showPayWithDrawer, walletOptions: walletOptions, onClose: () => setShowPayWithDrawer(false), onPayWithCard: handleCardClick, onConnect: handleWalletConnected, insufficientBalance: insufficientBalance, showOnRampOption: shouldShowOnRampOption || !selectedToken }), jsx(OptionsDrawer, { checkout: checkout, routes: routes, showOnrampOption: shouldShowOnRampOption, showSwapOption: showSwapOption, showBridgeOption: showBridgeOption, visible: showOptionsDrawer, onClose: () => setShowOptionsDrawer(false), onCardClick: handleCardClick, onRouteClick: handleRouteClick, insufficientBalance: insufficientBalance }), jsx(DeliverToWalletDrawer, { visible: showDeliverToDrawer, walletOptions: walletOptions, onClose: handleDeliverToClose, onConnect: handleWalletConnected }), jsx(OnboardingDrawer, { environment: checkout?.config.environment })] })] }), jsx(NotEnoughGasDrawer, { visible: showNotEnoughGasDrawer, routeData: selectedRouteData, onTryAgainClick: () => setShowNotEnoughGasDrawer(false), onToolkitClick: handleToolkitClick })] }));
+                                        }, chainInfo: getChainInfo(), onClick: () => setShowDeliverToDrawer(true), disabled: lockedToProvider })] }), jsx(Button, { testId: "add-tokens-button", size: "large", variant: readyToReview ? 'primary' : 'secondary', disabled: !readyToReview, onClick: handleReviewClick, sx: { opacity: readyToReview ? 1 : 0.5 }, children: t('views.ADD_TOKENS.review.buttonText') }), jsx(SquidFooter, {}), jsx(PayWithWalletDrawer, { visible: showPayWithDrawer, walletOptions: walletOptions, onClose: () => setShowPayWithDrawer(false), onPayWithCard: handleCardClick, onConnect: handleWalletConnected, insufficientBalance: insufficientBalance, showOnRampOption: shouldShowOnRampOption || !selectedToken }), jsx(RouteOptionsDrawer, { checkout: checkout, routes: routes, showOnrampOption: shouldShowOnRampOption, showSwapOption: showSwapOption, showBridgeOption: showBridgeOption, visible: showOptionsDrawer, onClose: () => setShowOptionsDrawer(false), onCardClick: handleCardClick, onRouteClick: handleRouteClick, insufficientBalance: insufficientBalance }), jsx(DeliverToWalletDrawer, { visible: showDeliverToDrawer, walletOptions: walletOptions, onClose: handleDeliverToClose, onConnect: handleWalletConnected }), jsx(OnboardingDrawer, { environment: checkout?.config.environment })] })] }), jsx(NotEnoughGasDrawer, { visible: showNotEnoughGasDrawer, routeData: selectedRouteData, onTryAgainClick: () => setShowNotEnoughGasDrawer(false), onToolkitClick: handleToolkitClick })] }));
 }
 
 var dist$2 = {};
@@ -173024,6 +173025,47 @@ function SquidIcon({ sx = {}, className, }) {
                 d: "M23.7183 11.2782C23.8008 10.984 23.8565 10.6787 23.8891 10.3676C23.8891 10.3691 23.8896 10.371 23.8896 10.371C23.7207 9.12732 23.3616 7.94412 22.8423 6.85164C22.9051 7.21308 22.9464 7.61484 22.9738 8.08236C23.0458 9.30588 22.5907 11.2187 21.829 12.267C21.1258 13.2347 19.5394 14.1476 18.0279 13.3417C17.2296 12.916 16.3743 11.2883 17.3319 7.87404C17.8498 6.02796 18.0979 3.95148 16.825 2.19084C15.7546 0.710036 13.7962 0.331317 12.1051 0.793076C9.99025 1.37052 8.81665 3.03948 8.33569 5.10972C7.99345 6.58092 8.22145 8.07132 8.80657 9.4806C9.80833 11.8936 11.1394 12.6486 11.1835 14.7428C11.1979 15.4321 11.1456 16.8059 12.1935 16.7056C13.1856 16.6105 13.0627 15.484 12.8467 14.7865C12.5117 13.7036 11.6357 12.7878 10.8139 11.3776C10.1986 10.322 9.79105 9.54924 9.70369 8.37036C9.61345 7.14684 9.94801 5.80812 10.6618 4.7382C11.3237 3.74604 12.7459 2.80956 14.1999 3.49068C14.7298 3.73884 15.0533 4.19772 15.2055 4.6926C15.6821 6.24588 15.0634 7.76364 14.9079 9.67308C14.6487 12.8526 16.7928 17.2144 20.9165 15.1955C22.2413 14.548 23.2776 12.8521 23.7183 11.2782Z", fill: "black" })] }));
 }
 
+/**
+ * Find a chain by its id
+ * @param chainId - The id of the chain to find
+ * @param chains - The chains to search through
+ * @returns The chain with the matching id, or undefined if no chain is found
+ */
+function findChainById(chainId, chains) {
+    return chains?.find((chain) => chain.id === chainId);
+}
+/**
+ * Get the chains from the route
+ * @param chains - The chains to search through
+ * @param route - The route to get the chains from
+ * @returns The chains from the route
+ */
+const getRouteChains = (chains, route) => ({
+    fromChain: findChainById(route?.route.estimate.fromToken.chainId, chains),
+    toChain: findChainById(route?.route.estimate.toToken.chainId, chains),
+});
+
+const convertToNetworkChangeableProvider = async (provider) => new Web3Provider(provider.provider, 'any');
+
+function AddressMissmatchDrawer({ visible, onClick, }) {
+    const { t } = useTranslation();
+    return (jsx(Drawer, { size: "full", visible: visible, showHeaderBar: false, children: jsxs(Drawer.Content, { children: [jsx(WalletWarningHero, {}), jsxs(Box, { sx: { px: 'base.spacing.x6' }, children: [jsx(Heading, { sx: {
+                                marginTop: 'base.spacing.x6',
+                                marginBottom: 'base.spacing.x2',
+                                textAlign: 'center',
+                            }, children: t('views.ADD_TOKENS.error.addressMismatch.heading') }), jsx(Body, { size: "medium", sx: {
+                                display: 'block',
+                                textAlign: 'center',
+                                color: 'base.color.text.body.secondary',
+                                marginBottom: 'base.spacing.x21',
+                            }, children: t('views.ADD_TOKENS.error.addressMismatch.body') })] }), jsx(Box, { sx: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        paddingX: 'base.spacing.x6',
+                        width: '100%',
+                    }, children: jsx(Button, { sx: { width: '100%', marginBottom: 'base.spacing.x10' }, testId: "non-passport-cta-button", variant: "primary", size: "large", onClick: onClick, children: t('views.ADD_TOKENS.error.addressMismatch.buttonText') }) })] }) }));
+}
+
 function RouteFees({ visible, onClose, routeData, totalAmount, totalFiatAmount, }) {
     const { t } = useTranslation();
     const feeCosts = reactExports.useMemo(() => routeData?.route.estimate.feeCosts.map((fee) => ({
@@ -173061,47 +173103,6 @@ function RouteFees({ visible, onClose, routeData, totalAmount, totalFiatAmount,
     return (jsx(FeesBreakdown, { visible: visible, loading: !routeData, fees: [...feeCosts, ...gasCosts], tokenSymbol: tokenSymbol, totalAmount: getFormattedNumber(totalAmount, feesToken?.decimals), totalFiatAmount: getFormattedAmounts(totalFiatAmount), onCloseDrawer: onClose }));
 }
 
-function AddressMissmatchDrawer({ visible, onClick, }) {
-    const { t } = useTranslation();
-    return (jsx(Drawer, { size: "full", visible: visible, showHeaderBar: false, children: jsxs(Drawer.Content, { children: [jsx(WalletWarningHero, {}), jsxs(Box, { sx: { px: 'base.spacing.x6' }, children: [jsx(Heading, { sx: {
-                                marginTop: 'base.spacing.x6',
-                                marginBottom: 'base.spacing.x2',
-                                textAlign: 'center',
-                            }, children: t('views.ADD_TOKENS.error.addressMismatch.heading') }), jsx(Body, { size: "medium", sx: {
-                                display: 'block',
-                                textAlign: 'center',
-                                color: 'base.color.text.body.secondary',
-                                marginBottom: 'base.spacing.x21',
-                            }, children: t('views.ADD_TOKENS.error.addressMismatch.body') })] }), jsx(Box, { sx: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        paddingX: 'base.spacing.x6',
-                        width: '100%',
-                    }, children: jsx(Button, { sx: { width: '100%', marginBottom: 'base.spacing.x10' }, testId: "non-passport-cta-button", variant: "primary", size: "large", onClick: onClick, children: t('views.ADD_TOKENS.error.addressMismatch.buttonText') }) })] }) }));
-}
-
-/**
- * Find a chain by its id
- * @param chainId - The id of the chain to find
- * @param chains - The chains to search through
- * @returns The chain with the matching id, or undefined if no chain is found
- */
-function findChainById(chainId, chains) {
-    return chains?.find((chain) => chain.id === chainId);
-}
-/**
- * Get the chains from the route
- * @param chains - The chains to search through
- * @param route - The route to get the chains from
- * @returns The chains from the route
- */
-const getRouteChains = (chains, route) => ({
-    fromChain: findChainById(route?.route.estimate.fromToken.chainId, chains),
-    toChain: findChainById(route?.route.estimate.toToken.chainId, chains),
-});
-
-const convertToNetworkChangeableProvider = async (provider) => new Web3Provider(provider.provider, 'any');
-
 const dividerSx = {
     content: "''",
     pos: 'absolute',