@imtbl/sdk 1.77.4 → 1.77.5-alpha.2

package/dist/browser/checkout/{AddTokensWidget-CzAE1d3f.js → AddTokensWidget-ho7XUYky.js}

@@ -1,9 +1,9 @@
-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-D7zuN_2m.js';
-import { r as retry, T as TokenImage } from './TokenImage-Im5drCmP.js';
-import { f as formatUnits, p as parseUnits } from './index-CpPB7WU9.js';
-import { H as HandoverContent } from './HandoverContent-DACeI3Ql.js';
-import { C as Contract } from './index-C6VrFT0d.js';
-import { F as FeesBreakdown } from './FeesBreakdown-6N1PBhxc.js';
+import { r as reactExports, I as IMTBLWidgetEvents, A as AddTokensEventType, w as getDefaultExportFromCjs, x as commonjsGlobal, y as BigNumber, z as useProvidersContext, D as isPassportProvider, o as jsx, p as jsxs, F as Box, u as useTranslation, G as Drawer, H as Divider, J as Heading, K as Button, M as useAnalytics, N as WalletDrawer, U as UnableToConnectDrawer, Q as Fragment, R as WalletProviderRdns, T as UserJourney, 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 t, b3 as PriceDisplay, L as LoadingView, b4 as useTheme, b5 as viewReducer, b6 as initialViewState, b7 as Environment, b8 as isValidAddress, b9 as amountInputValidation, ba as CloudImage, E as ErrorView, bb as ServiceUnavailableErrorView } from './index-DD7N6gXr.js';
+import { r as retry, T as TokenImage } from './TokenImage-BIsOhmpw.js';
+import { p as parseUnits, f as formatUnits } from './index-BXHgeq5K.js';
+import { H as HandoverContent } from './HandoverContent-CnLMKDDD.js';
+import { C as Contract } from './index-B6MDZ65f.js';
+import { F as FeesBreakdown } from './FeesBreakdown-DgXe6Fa2.js';
 
 /**
  * The function `useInterval` sets up an interval that repeatedly calls a given callback function with
@@ -1312,6 +1312,18 @@ const TOOLKIT_SQUID_URL = 'https://toolkit.immutable.com/squid-bridge/';
 const FIXED_HANDOVER_DURATION = 2000;
 const TOKEN_PRIORITY_ORDER = ['IMX', 'USDC', 'ETH'];
 
+const findToken = (tokens, address, chainId) => tokens.find((value) => value.address.toLowerCase() === address.toLowerCase()
+    && value.chainId === chainId);
+
+const isRouteToAmountGreaterThanToAmount = (routeResponse, toAmount) => {
+    if (!routeResponse?.route?.estimate?.toAmount || !routeResponse?.route?.estimate?.toToken?.decimals) {
+        throw new Error('Invalid route response or token decimals');
+    }
+    const toAmountInBaseUnits = parseUnits(toAmount, routeResponse?.route.estimate.toToken.decimals);
+    const routeToAmountInBaseUnits = BigNumber.from(routeResponse.route.estimate.toAmount);
+    return routeToAmountInBaseUnits.gt(toAmountInBaseUnits);
+};
+
 const BASE_SLIPPAGE_HIGH_TIER = 0.005;
 const BASE_SLIPPAGE_MEDIUM_TIER = 0.01;
 const BASE_SLIPPAGE_LOW_TIER = 0.015;
@@ -1329,33 +1341,35 @@ const SLIPPAGE_TIERS = {
         value: BASE_SLIPPAGE_LOW_TIER,
     },
 };
-const getSlippageTier = (usdAmount) => {
-    if (usdAmount >= SLIPPAGE_TIERS.high.threshold) {
-        return SLIPPAGE_TIERS.high.value;
-    }
-    if (usdAmount >= SLIPPAGE_TIERS.medium.threshold) {
-        return SLIPPAGE_TIERS.medium.value;
-    }
-    return SLIPPAGE_TIERS.low.value;
-};
-const useRoutes = () => {
-    const latestRequestIdRef = reactExports.useRef(0);
-    const { addTokensState: { id }, addTokensDispatch } = reactExports.useContext(AddTokensContext);
-    const { providersState: { toProvider, }, } = useProvidersContext();
-    const { track } = useAnalytics();
-    const setRoutes = (routes) => {
-        addTokensDispatch({
-            payload: {
-                type: AddTokensActions.SET_ROUTES,
-                routes,
-            },
-        });
+/**
+ * Hook to calculate slippage based on thresholds
+ */
+const useSlippage = () => {
+    const getSlippageTier = (usdAmount) => {
+        if (usdAmount >= SLIPPAGE_TIERS.high.threshold)
+            return SLIPPAGE_TIERS.high.value;
+        if (usdAmount >= SLIPPAGE_TIERS.medium.threshold)
+            return SLIPPAGE_TIERS.medium.value;
+        return SLIPPAGE_TIERS.low.value;
     };
-    const resetRoutes = () => {
-        setRoutes([]);
+    const calculateAdjustedAmount = (baseAmount, usdAmount, additionalBuffer = 0) => {
+        const slippage = getSlippageTier(usdAmount);
+        return baseAmount * (1 + slippage + additionalBuffer);
     };
-    const findToken = (tokens, address, chainId) => tokens.find((value) => value.address.toLowerCase() === address.toLowerCase()
-        && value.chainId === chainId);
+    return reactExports.useMemo(() => ({
+        getSlippageTier,
+        calculateAdjustedAmount,
+    }), []);
+};
+
+/**
+ * Hook to handle route amount calculations.
+ */
+const useRouteCalculation = () => {
+    const { calculateAdjustedAmount } = useSlippage();
+    /**
+       * Calculate the fromAmount based on USD prices and slippage.
+       */
     const calculateFromAmount = (fromToken, toToken, toAmount, additionalBuffer = 0) => {
         const toAmountNumber = parseFloat(toAmount);
         // Calculate the USD value of the toAmount
@@ -1363,16 +1377,49 @@ const useRoutes = () => {
         // Calculate the amount of fromToken needed to match this USD value
         const baseFromAmount = toAmountInUsd / fromToken.usdPrice;
         // Add a buffer for price fluctuations and fees
-        const fromAmountWithBuffer = baseFromAmount * (1 + getSlippageTier(toAmountInUsd) + additionalBuffer);
+        const fromAmountWithBuffer = calculateAdjustedAmount(baseFromAmount, toAmountInUsd, additionalBuffer);
         return fromAmountWithBuffer.toString();
     };
+    /**
+       * Calculate the fromAmount using exchange rate returned from the route.
+       */
     const calculateFromAmountFromRoute = (exchangeRate, toAmount, toAmountUSD) => {
         const toAmountUSDNumber = toAmountUSD ? parseFloat(toAmountUSD) : 0;
         const fromAmount = parseFloat(toAmount) / parseFloat(exchangeRate);
-        const fromAmountWithBuffer = fromAmount * (1 + getSlippageTier(toAmountUSDNumber));
+        const fromAmountWithBuffer = calculateAdjustedAmount(fromAmount, toAmountUSDNumber);
         return fromAmountWithBuffer.toString();
     };
-    const getAmountData = (tokens, balance, toAmount, toChainId, toTokenAddress, additionalBuffer = 0) => {
+    /**
+       * Convert a string amount to a formatted amount with the specified number of decimals.
+       */
+    const convertToFormattedFromAmount = (amount, decimals) => {
+        const parsedFromAmount = parseFloat(amount).toFixed(decimals);
+        const formattedFromAmount = parseUnits(parsedFromAmount, decimals);
+        return formattedFromAmount.toString();
+    };
+    return reactExports.useMemo(() => ({
+        calculateFromAmount,
+        calculateFromAmountFromRoute,
+        convertToFormattedFromAmount,
+    }), []);
+};
+
+class RouteError extends Error {
+    message;
+    data;
+    constructor(message, data) {
+        super(message);
+        this.message = message;
+        this.data = data;
+        Object.setPrototypeOf(this, RouteError.prototype);
+    }
+}
+
+const useRoutes = () => {
+    const latestRequestIdRef = reactExports.useRef(0);
+    const { providersState: { toProvider, }, } = useProvidersContext();
+    const { calculateFromAmount, calculateFromAmountFromRoute, convertToFormattedFromAmount } = useRouteCalculation();
+    const getFromAmountData = (tokens, balance, toAmount, toChainId, toTokenAddress, additionalBuffer = 0) => {
         const fromToken = findToken(tokens, balance.address, balance.chainId.toString());
         const toToken = findToken(tokens, toTokenAddress, toChainId);
         if (!fromToken || !toToken) {
@@ -1390,114 +1437,48 @@ const useRoutes = () => {
     const getSufficientFromAmounts = (tokens, balances, toChainId, toTokenAddress, toAmount) => {
         const filteredBalances = balances.filter((balance) => !(balance.address.toLowerCase() === toTokenAddress.toLowerCase()
             && balance.chainId === toChainId));
-        const amountDataArray = filteredBalances
-            .map((balance) => getAmountData(tokens, balance, toAmount, toChainId, toTokenAddress))
+        const fromAmountDataArray = filteredBalances
+            .map((balance) => getFromAmountData(tokens, balance, toAmount, toChainId, toTokenAddress))
             .filter((value) => value !== undefined);
-        return amountDataArray.filter((data) => {
+        return fromAmountDataArray.filter((data) => {
             const formattedBalance = formatUnits(data.balance.balance, data.balance.decimals);
             return (parseFloat(formattedBalance.toString()) > parseFloat(data.fromAmount));
         });
     };
-    const convertToFormattedAmount = (amount, decimals) => {
-        const parsedFromAmount = parseFloat(amount).toFixed(decimals);
-        const formattedFromAmount = parseUnits(parsedFromAmount, decimals);
-        return formattedFromAmount.toString();
-    };
-    const getRouteWithRetry = async (squid, fromToken, toToken, toAddress, fromAmount, fromAddress, quoteOnly = true, postHook) => {
-        try {
-            return await retry(() => squid.getRoute({
-                fromChain: fromToken.chainId,
-                fromToken: fromToken.address,
-                fromAmount: convertToFormattedAmount(fromAmount, fromToken.decimals),
-                toChain: toToken.chainId,
-                toToken: toToken.address,
-                fromAddress,
-                toAddress,
-                quoteOnly,
-                enableBoost: true,
-                receiveGasOnDestination: !isPassportProvider(toProvider),
-                postHook,
-            }), {
-                retryIntervalMs: 1000,
-                retries: 5,
-                nonRetryable: (err) => err.response?.status !== 429,
-            });
-        }
-        catch (error) {
-            track({
-                userJourney: UserJourney.ADD_TOKENS,
-                screen: 'Routes',
-                action: 'Failed',
-                extras: {
-                    contextId: id,
-                    fromToken: fromToken.symbol,
-                    toToken: toToken.symbol,
-                    fromChain: fromToken.chainId,
-                    toChain: toToken.chainId,
-                    errorStatus: error.response?.status,
-                    errorMessage: error.response?.data?.message,
-                    errorStack: error.stack,
-                },
-            });
-            throw error;
-        }
-    };
-    const isRouteToAmountGreaterThanToAmount = (routeResponse, toAmount) => {
-        if (!routeResponse?.route?.estimate?.toAmount || !routeResponse?.route?.estimate?.toToken?.decimals) {
-            throw new Error('Invalid route response or token decimals');
-        }
-        const toAmountInBaseUnits = parseUnits(toAmount, routeResponse?.route.estimate.toToken.decimals);
-        const routeToAmountInBaseUnits = BigNumber.from(routeResponse.route.estimate.toAmount);
-        return routeToAmountInBaseUnits.gt(toAmountInBaseUnits);
-    };
+    const getRouteWithRetry = async (squid, fromToken, toToken, toAddress, fromAmount, fromAddress, quoteOnly = true, postHook) => retry(() => squid.getRoute({
+        fromChain: fromToken.chainId,
+        fromToken: fromToken.address,
+        fromAmount: convertToFormattedFromAmount(fromAmount, fromToken.decimals),
+        toChain: toToken.chainId,
+        toToken: toToken.address,
+        fromAddress,
+        toAddress,
+        quoteOnly,
+        enableBoost: true,
+        receiveGasOnDestination: !isPassportProvider(toProvider),
+        postHook,
+    }), {
+        retryIntervalMs: 1000,
+        retries: 5,
+        nonRetryable: (err) => err.response?.status !== 429,
+    });
     const getRoute = async (squid, fromToken, toToken, toAddress, fromAmount, toAmount, fromAddress, quoteOnly = true, postHook) => {
-        try {
-            const routeResponse = await getRouteWithRetry(squid, fromToken, toToken, toAddress, fromAmount, fromAddress, quoteOnly, postHook);
-            if (!routeResponse?.route) {
-                return {};
-            }
-            if (isRouteToAmountGreaterThanToAmount(routeResponse, toAmount)) {
-                return { route: routeResponse };
-            }
-            const newFromAmount = calculateFromAmountFromRoute(routeResponse.route.estimate.exchangeRate, toAmount, routeResponse.route.estimate.toAmountUSD);
-            const newRoute = await getRouteWithRetry(squid, fromToken, toToken, toAddress, newFromAmount, fromAddress, quoteOnly, postHook);
-            if (!newRoute?.route) {
-                return {};
-            }
-            if (isRouteToAmountGreaterThanToAmount(newRoute, toAmount)) {
-                return { route: newRoute };
-            }
-            track({
-                userJourney: UserJourney.ADD_TOKENS,
-                screen: 'Routes',
-                action: 'Failed',
-                extras: {
-                    contextId: id,
-                    fromToken: fromToken.symbol,
-                    toToken: toToken.symbol,
-                    fromChain: fromToken.chainId,
-                    toChain: toToken.chainId,
-                    initialRoute: {
-                        fromAmount,
-                        toAmount,
-                        exchangeRate: routeResponse.route.estimate.exchangeRate,
-                        routeFromAmount: routeResponse.route.estimate.fromAmount,
-                        routeToAmount: routeResponse.route.estimate.toAmount,
-                    },
-                    newRoute: {
-                        fromAmount: newFromAmount,
-                        toAmount,
-                        exchangeRate: newRoute.route.estimate.exchangeRate,
-                        routeFromAmount: newRoute.route.estimate.fromAmount,
-                        routeToAmount: newRoute.route.estimate.toAmount,
-                    },
-                },
-            });
+        const routeResponse = await getRouteWithRetry(squid, fromToken, toToken, toAddress, fromAmount, fromAddress, quoteOnly, postHook);
+        if (!routeResponse?.route) {
             return {};
         }
-        catch (error) {
+        if (isRouteToAmountGreaterThanToAmount(routeResponse, toAmount)) {
+            return { route: routeResponse };
+        }
+        const newFromAmount = calculateFromAmountFromRoute(routeResponse.route.estimate.exchangeRate, toAmount, routeResponse.route.estimate.toAmountUSD);
+        const newRoute = await getRouteWithRetry(squid, fromToken, toToken, toAddress, newFromAmount, fromAddress, quoteOnly, postHook);
+        if (!newRoute?.route) {
             return {};
         }
+        if (isRouteToAmountGreaterThanToAmount(newRoute, toAmount)) {
+            return { route: newRoute };
+        }
+        throw new Error('Unable to find a route with sufficient toAmount');
     };
     const getRoutesWithFeesValidation = async (squid, toTokenAddress, balances, fromAmountArray, postHook) => {
         const getGasCost = (route, chainId) => (route.route?.route.estimate.gasCosts || [])
@@ -1520,59 +1501,68 @@ const useRoutes = () => {
             return userBalance >= requiredAmount;
         };
         const routePromises = fromAmountArray.map(async (data) => {
-            try {
-                const routeResponse = await getRoute(squid, data.fromToken, data.toToken, toTokenAddress, data.fromAmount, data.toAmount, undefined, true, postHook);
-                if (!routeResponse?.route)
-                    return null;
-                const gasCost = getGasCost(routeResponse, data.balance.chainId);
-                const feeCost = getTotalFees(routeResponse, data.balance.chainId);
-                const userGasBalance = findUserGasBalance(data.balance.chainId);
-                return {
-                    amountData: data,
-                    route: routeResponse.route,
-                    isInsufficientGas: !hasSufficientNativeTokenBalance(userGasBalance, data.fromAmount, data.fromToken, gasCost, feeCost),
-                };
-            }
-            catch (error) {
+            const routeResponse = await getRoute(squid, data.fromToken, data.toToken, toTokenAddress, data.fromAmount, data.toAmount, undefined, true, postHook);
+            if (!routeResponse?.route)
                 return null;
-            }
+            const gasCost = getGasCost(routeResponse, data.balance.chainId);
+            const feeCost = getTotalFees(routeResponse, data.balance.chainId);
+            const userGasBalance = findUserGasBalance(data.balance.chainId);
+            return {
+                amountData: data,
+                route: routeResponse.route,
+                isInsufficientGas: !hasSufficientNativeTokenBalance(userGasBalance, data.fromAmount, data.fromToken, gasCost, feeCost),
+            };
         });
-        const routesData = (await Promise.all(routePromises)).filter((route) => route !== null);
+        const routesData = (await Promise.allSettled(routePromises))
+            .filter((result) => result.status === 'fulfilled')
+            .map((result) => result.value)
+            .filter((route) => route !== null);
         return routesData;
     };
-    const fetchRoutesWithRateLimit = async (squid, tokens, balances, toChanId, toTokenAddress, toAmount, bulkNumber = 5, delayMs = 1000, isSwapAllowed = true) => {
+    const fetchRoutes = async (squid, tokens, balances, toChainId, toTokenAddress, toAmount, bulkNumber = 5, delayMs = 1000, isSwapAllowed = true) => {
         const currentRequestId = ++latestRequestIdRef.current;
-        let fromAmountDataArray = getSufficientFromAmounts(tokens, balances, toChanId, toTokenAddress, toAmount);
-        if (!isSwapAllowed) {
-            fromAmountDataArray = fromAmountDataArray.filter((amountData) => amountData.balance.chainId !== toChanId);
-        }
-        let allRoutes = [];
-        await Promise.all(fromAmountDataArray
-            .reduce((acc, _, i) => {
-            if (i % bulkNumber === 0) {
-                acc.push(fromAmountDataArray.slice(i, i + bulkNumber));
+        try {
+            let fromAmountDataArray = getSufficientFromAmounts(tokens, balances, toChainId, toTokenAddress, toAmount);
+            if (!isSwapAllowed) {
+                fromAmountDataArray = fromAmountDataArray.filter((amountData) => amountData.balance.chainId !== toChainId);
             }
-            return acc;
-        }, [])
-            .map(async (slicedFromAmountDataArray) => {
-            allRoutes.push(...(await getRoutesWithFeesValidation(squid, toTokenAddress, balances, slicedFromAmountDataArray)));
-            await delay(delayMs);
-        }));
-        if (!isSwapAllowed) {
-            allRoutes = allRoutes.filter((routeData) => !routeData.route.route.estimate.actions.find((action) => action.type === dist$3.ActionType.SWAP));
+            let allRoutes = [];
+            await Promise.all(fromAmountDataArray
+                .reduce((acc, _, i) => {
+                if (i % bulkNumber === 0) {
+                    acc.push(fromAmountDataArray.slice(i, i + bulkNumber));
+                }
+                return acc;
+            }, [])
+                .map(async (slicedFromAmountDataArray) => {
+                allRoutes.push(...(await getRoutesWithFeesValidation(squid, toTokenAddress, balances, slicedFromAmountDataArray)));
+                await delay(delayMs);
+            }));
+            if (!isSwapAllowed) {
+                allRoutes = allRoutes.filter((routeData) => !routeData.route.route.estimate.actions.find((action) => action.type === dist$3.ActionType.SWAP));
+            }
+            const sortedRoutes = sortRoutesByFastestTime(allRoutes);
+            // Only return routes if the request is the latest one
+            if (currentRequestId === latestRequestIdRef.current) {
+                return sortedRoutes;
+            }
+            return [];
         }
-        const sortedRoutes = sortRoutesByFastestTime(allRoutes);
-        // Only update routes if the request is the latest one
-        if (currentRequestId === latestRequestIdRef.current) {
-            setRoutes(sortedRoutes);
+        catch (error) {
+            throw new RouteError('Failed to fetch routes', {
+                fromToken: tokens.find((token) => token.address === toTokenAddress)?.symbol,
+                toToken: tokens.find((token) => token.address === toTokenAddress)?.symbol,
+                toChain: toChainId,
+                errorStatus: error.response?.status,
+                errorMessage: error.response?.data?.message,
+                errorStack: error.stack,
+            });
         }
-        return sortedRoutes;
     };
     return {
-        fetchRoutesWithRateLimit,
-        getAmountData,
+        fetchRoutes,
+        getFromAmountData,
         getRoute,
-        resetRoutes,
     };
 };
 
@@ -5295,7 +5285,7 @@ const checkSanctionedAddresses = async (addresses, config) => {
 
 function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOption = true, showSwapOption = true, showBridgeOption = true, onCloseButtonClick, showBackButton, onBackButtonClick, }) {
     const inputRef = reactExports.useRef(null);
-    const { fetchRoutesWithRateLimit, resetRoutes } = useRoutes();
+    const { fetchRoutes } = useRoutes();
     const { showErrorHandover } = useError(config.environment);
     const { addTokensState, addTokensDispatch, } = reactExports.useContext(AddTokensContext);
     const { id, squid, chains, balances, tokens, selectedAmount, routes, selectedRouteData, selectedToken, isSwapAvailable, experiments, } = addTokensState;
@@ -5326,6 +5316,14 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
         setIsAmountInputSynced(false);
         debouncedSetSelectedAmount.current(value);
     };
+    const resetRoutes = () => {
+        addTokensDispatch({
+            payload: {
+                type: AddTokensActions.SET_ROUTES,
+                routes: [],
+            },
+        });
+    };
     reactExports.useEffect(() => {
         if (selectedAmount === inputValue) {
             setIsAmountInputSynced(true);
@@ -5450,25 +5448,47 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
                 && selectedToken?.address
                 && isValidAmount) {
                 setFetchingRoutes(true);
-                const availableRoutes = await fetchRoutesWithRateLimit(squid, tokens, balances, ChainId.IMTBL_ZKEVM_MAINNET.toString(), selectedToken.address === 'native'
-                    ? SQUID_NATIVE_TOKEN
-                    : selectedToken.address, selectedAmount, 5, 1000, isSwapAvailable);
-                setFetchingRoutes(false);
-                track({
-                    userJourney: UserJourney.ADD_TOKENS,
-                    screen: 'InputScreen',
-                    control: 'RoutesMenu',
-                    controlType: 'MenuItem',
-                    action: 'Request',
-                    extras: {
-                        contextId: id,
-                        routesAvailable: availableRoutes.length,
-                        geoBlocked: !isSwapAvailable,
-                    },
-                });
-                if (availableRoutes.length === 0) {
-                    setInsufficientBalance(true);
+                try {
+                    const availableRoutes = await fetchRoutes(squid, tokens, balances, ChainId.IMTBL_ZKEVM_MAINNET.toString(), selectedToken.address === 'native'
+                        ? SQUID_NATIVE_TOKEN
+                        : selectedToken.address, selectedAmount, 5, 1000, isSwapAvailable);
+                    addTokensDispatch({
+                        payload: {
+                            type: AddTokensActions.SET_ROUTES,
+                            routes: availableRoutes,
+                        },
+                    });
+                    if (availableRoutes.length === 0) {
+                        setInsufficientBalance(true);
+                    }
+                    track({
+                        userJourney: UserJourney.ADD_TOKENS,
+                        screen: 'InputScreen',
+                        control: 'RoutesMenu',
+                        controlType: 'MenuItem',
+                        action: 'Request',
+                        extras: {
+                            contextId: id,
+                            routesAvailable: availableRoutes.length,
+                            geoBlocked: !isSwapAvailable,
+                        },
+                    });
                 }
+                catch (error) {
+                    if (error instanceof RouteError && error.data) {
+                        track({
+                            userJourney: UserJourney.ADD_TOKENS,
+                            screen: 'Routes',
+                            action: 'Failed',
+                            extras: {
+                                contextId: id,
+                                message: error.message,
+                                ...error.data,
+                            },
+                        });
+                    }
+                }
+                setFetchingRoutes(false);
             }
         })();
     }, [balances, squid, selectedToken, selectedAmount]);
@@ -172836,10 +172856,8 @@ function isRejectedError(err) {
 }
 
 const TRANSACTION_NOT_COMPLETED = 'transaction not completed';
-const useExecute = (contextId, environment) => {
-    const { showErrorHandover } = useError(environment);
+const useExecute = (userJourney, onTransactionError) => {
     const { user } = useAnalytics();
-    const { eventTargetState: { eventTarget }, } = reactExports.useContext(EventTargetContext);
     const waitForReceipt = async (provider, txHash, maxAttempts = 120) => {
         const result = await retry(async () => {
             const receipt = await provider.getTransactionReceipt(txHash);
@@ -172860,62 +172878,6 @@ const useExecute = (contextId, environment) => {
         }
         return result;
     };
-    const handleTransactionError = (err) => {
-        const reason = `${err?.reason || err?.message || ''}`.toLowerCase();
-        let errorType = AddTokensErrorTypes.WALLET_FAILED;
-        if (reason.includes('failed') && reason.includes('open confirmation')) {
-            errorType = AddTokensErrorTypes.WALLET_POPUP_BLOCKED;
-        }
-        if (reason.includes('rejected') && reason.includes('user')) {
-            errorType = AddTokensErrorTypes.WALLET_REJECTED;
-        }
-        if (reason.includes('failed to submit')
-            && reason.includes('highest gas limit')) {
-            errorType = AddTokensErrorTypes.WALLET_REJECTED_NO_FUNDS;
-        }
-        if (reason.includes('status failed')
-            || reason.includes('transaction failed')) {
-            errorType = AddTokensErrorTypes.TRANSACTION_FAILED;
-            sendAddTokensFailedEvent(eventTarget, errorType);
-        }
-        if (reason.includes('unrecognized chain')
-            || reason.includes('unrecognized chain')) {
-            errorType = AddTokensErrorTypes.UNRECOGNISED_CHAIN;
-        }
-        const error = {
-            type: errorType,
-            data: { error: err },
-        };
-        showErrorHandover(errorType, { contextId, error });
-    };
-    // @TODO: Move to util function
-    const checkProviderChain = async (provider, chainId) => {
-        if (!provider.provider.request) {
-            throw new Error('provider does not have request method');
-        }
-        try {
-            const fromChainHex = `0x${parseInt(chainId, 10).toString(16)}`;
-            const providerChainId = await provider.provider.request({
-                method: 'eth_chainId',
-            });
-            if (fromChainHex !== providerChainId) {
-                await provider.provider.request({
-                    method: 'wallet_switchEthereumChain',
-                    params: [
-                        {
-                            chainId: fromChainHex,
-                        },
-                    ],
-                });
-                return true;
-            }
-            return true;
-        }
-        catch (error) {
-            handleTransactionError(error);
-            return false;
-        }
-    };
     const getAllowance = async (provider, routeResponse) => {
         try {
             if (!isSquidNativeToken(routeResponse?.route?.params.fromToken)) {
@@ -172935,7 +172897,7 @@ const useExecute = (contextId, environment) => {
             return MaxUint256; // no approval is needed for native tokens
         }
         catch (error) {
-            showErrorHandover(AddTokensErrorTypes.DEFAULT, { contextId, error });
+            onTransactionError?.(error);
             return undefined;
         }
     };
@@ -172971,12 +172933,12 @@ const useExecute = (contextId, environment) => {
     const approve = async (fromProviderInfo, provider, routeResponse) => {
         try {
             if (!isSquidNativeToken(routeResponse?.route?.params.fromToken)) {
-                return await withMetricsAsync((flow) => callApprove(flow, fromProviderInfo, provider, routeResponse), `${UserJourney.ADD_TOKENS}_Approve`, await getAnonymousId(), (error) => (isRejectedError(error) ? 'rejected' : ''));
+                return await withMetricsAsync((flow) => callApprove(flow, fromProviderInfo, provider, routeResponse), `${userJourney}_Approve`, await getAnonymousId(), (error) => (isRejectedError(error) ? 'rejected' : ''));
             }
             return undefined;
         }
         catch (error) {
-            handleTransactionError(error);
+            onTransactionError?.(error);
             return undefined;
         }
     };
@@ -172994,10 +172956,10 @@ const useExecute = (contextId, environment) => {
             throw new Error('provider does not have request method');
         }
         try {
-            return await withMetricsAsync((flow) => callExecute(flow, squid, fromProviderInfo, provider, routeResponse), `${UserJourney.ADD_TOKENS}_Execute`, await getAnonymousId(), (error) => (isRejectedError(error) ? 'rejected' : ''));
+            return await withMetricsAsync((flow) => callExecute(flow, squid, fromProviderInfo, provider, routeResponse), `${userJourney}_Execute`, await getAnonymousId(), (error) => (isRejectedError(error) ? 'rejected' : ''));
         }
         catch (error) {
-            handleTransactionError(error);
+            onTransactionError?.(error);
             return undefined;
         }
     };
@@ -173029,12 +172991,11 @@ const useExecute = (contextId, environment) => {
             });
         }
         catch (error) {
-            handleTransactionError(error);
+            onTransactionError?.(error);
             return undefined;
         }
     };
     return {
-        checkProviderChain,
         getAllowance,
         approve,
         execute,
@@ -173128,6 +173089,78 @@ 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 }));
 }
 
+/**
+ * Ensure the provider is connected to the correct chain.
+ * If not, attempts to switch to the desired chain.
+ */
+const verifyAndSwitchChain = async (provider, chainId) => {
+    if (!provider.provider.request) {
+        return {
+            isChainCorrect: false,
+            error: 'Provider does not support the request method.',
+        };
+    }
+    try {
+        const targetChainHex = `0x${parseInt(chainId, 10).toString(16)}`;
+        const currentChainId = await provider.provider.request({
+            method: 'eth_chainId',
+        });
+        if (targetChainHex !== currentChainId) {
+            await provider.provider.request({
+                method: 'wallet_switchEthereumChain',
+                params: [
+                    {
+                        chainId: targetChainHex,
+                    },
+                ],
+            });
+        }
+        return { isChainCorrect: true };
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+        return {
+            isChainCorrect: false,
+            error: errorMessage,
+        };
+    }
+};
+
+const useErrorHandler = () => {
+    const { addTokensState: { id: contextId }, } = reactExports.useContext(AddTokensContext);
+    const { providersState: { checkout, }, } = useProvidersContext();
+    const { showErrorHandover } = useError(checkout.config.environment);
+    const { eventTargetState: { eventTarget }, } = reactExports.useContext(EventTargetContext);
+    const onTransactionError = (err) => {
+        const reason = `${err?.reason || err?.message || ''}`.toLowerCase();
+        let errorType = AddTokensErrorTypes.WALLET_FAILED;
+        if (reason.includes('failed') && reason.includes('open confirmation')) {
+            errorType = AddTokensErrorTypes.WALLET_POPUP_BLOCKED;
+        }
+        if (reason.includes('rejected') && reason.includes('user')) {
+            errorType = AddTokensErrorTypes.WALLET_REJECTED;
+        }
+        if (reason.includes('failed to submit')
+            && reason.includes('highest gas limit')) {
+            errorType = AddTokensErrorTypes.WALLET_REJECTED_NO_FUNDS;
+        }
+        if (reason.includes('status failed')
+            || reason.includes('transaction failed')) {
+            errorType = AddTokensErrorTypes.TRANSACTION_FAILED;
+            sendAddTokensFailedEvent(eventTarget, errorType);
+        }
+        if (reason.includes('unrecognized chain')) {
+            errorType = AddTokensErrorTypes.UNRECOGNISED_CHAIN;
+        }
+        const error = {
+            type: errorType,
+            data: { error: err },
+        };
+        showErrorHandover(errorType, { contextId, error });
+    };
+    return { onTransactionError };
+};
+
 const dividerSx = {
     content: "''",
     pos: 'absolute',
@@ -173140,6 +173173,7 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
     const { track, page } = useAnalytics();
     const { addTokensState: { id, squid, chains, tokens, }, } = reactExports.useContext(AddTokensContext);
     const { providersState: { checkout, fromProvider, fromAddress, toAddress, fromProviderInfo, }, } = useProvidersContext();
+    const { showErrorHandover } = useError(checkout.config.environment);
     const { eventTargetState: { eventTarget }, } = reactExports.useContext(EventTargetContext);
     const [route, setRoute] = reactExports.useState();
     const [amountData, setAmountData] = reactExports.useState();
@@ -173147,12 +173181,12 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
     const [showFeeBreakdown, setShowFeeBreakdown] = reactExports.useState(false);
     const [showSecuringQuote, setShowSecuringQuote] = reactExports.useState(false);
     const [showAddressMissmatchDrawer, setShowAddressMissmatchDrawer] = reactExports.useState(false);
-    const { getAmountData, getRoute } = useRoutes();
+    const { getFromAmountData, getRoute } = useRoutes();
     const { addHandover, closeHandover } = useHandover({
         id: HandoverTarget.GLOBAL,
     });
-    const { showErrorHandover } = useError(checkout.config.environment);
-    const { checkProviderChain, getAllowance, approve, execute, getStatus, } = useExecute(id, checkout?.config.environment || Environment.SANDBOX);
+    const { onTransactionError } = useErrorHandler();
+    const { getAllowance, approve, execute, getStatus, } = useExecute(UserJourney.ADD_TOKENS, onTransactionError);
     reactExports.useEffect(() => {
         page({
             userJourney: UserJourney.ADD_TOKENS,
@@ -173171,7 +173205,7 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
         if (!fromAddress || !toAddress)
             return;
         setShowSecuringQuote(true);
-        const updatedAmountData = getAmountData(tokens, data.balance, data.toAmount, data.toChainId, data.toTokenAddress === 'native'
+        const updatedAmountData = getFromAmountData(tokens, data.balance, data.toAmount, data.toChainId, data.toTokenAddress === 'native'
             ? SQUID_NATIVE_TOKEN
             : data.toTokenAddress, data.additionalBuffer);
         if (!updatedAmountData)
@@ -173278,8 +173312,8 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
             headingText: t('views.ADD_TOKENS.handover.preparing.heading'),
         });
         const changeableProvider = await convertToNetworkChangeableProvider(fromProvider);
-        const isValidNetwork = await checkProviderChain(changeableProvider, route.route.params.fromChain);
-        if (!isValidNetwork) {
+        const verifyChainResult = await verifyAndSwitchChain(changeableProvider, route.route.params.fromChain);
+        if (!verifyChainResult.isChainCorrect) {
             return;
         }
         const allowance = await getAllowance(changeableProvider, route);
@@ -173434,7 +173468,6 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
         getRouteIntervalIdRef,
         approve,
         showHandover,
-        checkProviderChain,
         getAllowance,
         execute,
         closeHandover,