@imtbl/sdk 1.57.0 → 1.58.0

package/dist/browser/checkout/{AddFundsWidget-C_PbSgrh.js → AddFundsWidget-CQ8eDnA4.js}

@@ -1,9 +1,9 @@
-import { _ as _objectWithoutProperties, z as useTheme, cA as useForwardLocalDomRef, cq as useGetSubcomponentChild, cB as useSplitApartChildrenAndSubComponents, r as reactExports, F as merge$2, cC as useResizeObserver, q as jsxs, j as jsx, J as SmartClone, K as Box, H as isChildSubcomponent, G as flattenChildren, Y as Body, cD as useTheme$1, bt as Icon, x as ButtCon, y as Button, T as _defineProperty, aq as isDualVariantIcon, cp as _slicedToArray, cE as isNumberWithinTotal, A as getStartingSize, cr as BaseClickable, R as ClassNames, cF as _toConsumableArray, cG as isError, cd as Badge, cH as FramedIcon, bV as FramedImage, cI as FramedLogo, b5 as Stack, co as hFlex, cJ as usePrevious, cK as useBrowserEffect, cL as getHeadingTextStyles, cM as vFlex, cN as centerFlexChildren, cO as FormControlLabel, cP as FormControlValidation, cQ as FormControlCaption, I as IMTBLWidgetEvents, cR as AddFundsEventType, cS as getDefaultExportFromCjs, cT as commonjsGlobal, l as useTranslation, a4 as MenuItem, a5 as tokenValueFormat, cU as DEFAULT_TOKEN_FORMATTING_DECIMALS, aM as BigNumber, cV as FramedVideo, a$ as motion, b1 as listItemVariants, b7 as Divider, aW as Fragment, b0 as listVariants, cW as useProvidersContext, at as Drawer, cX as WalletWarningHero, as as Heading, cY as Trans, aC as Link, b_ as Web3Provider, bZ as WalletProviderRdns, cZ as CheckoutError, c_ as addProviderListenersForWidgetRoot, c$ as getProviderSlugFromRdns, ab as CheckoutErrorType, $ as useAnalytics, c0 as WalletDrawer, d0 as UnableToConnectDrawer, d1 as ChangedYourMindDrawer, a6 as UserJourney, d2 as identifyUser, d3 as HAS_SEEN_NON_PASSPORT_WARNING_KEY, d4 as ProvidersContextActions, X as ViewContext, V as ViewActions, o as SharedViews, k as ChainId, d5 as commonjsRequire, bm as getRemoteImage, aX as useHandover, aY as HandoverTarget, a1 as EventTargetContext, aZ as getRemoteRive, b$ as useInjectedProviders, bu as getDefaultTokenImage, d6 as OverflowDrawerMenu, an as SimpleLayout, U as TokenFilterTypes, h as getL2ChainId, a7 as orchestrationEvents, d7 as requireSecp256k1$1, d8 as requireLib_commonjs, d9 as require$$0$2, da as bech32$2, db as bnExports$1, dc as require$$0$3, dd as getAugmentedNamespace, de as require$$0$4, df as minimalisticAssert, dg as require$$2, dh as hash$6, di as MaxUint256, dj as merge$3, dk as SvgIcon, a3 as Environment, dl as t, cx as PriceDisplay, L as LoadingView, aD as viewReducer, aE as initialViewState, dm as isValidAddress, bx as amountInputValidation, br as CloudImage, E as ErrorView, cj as ServiceUnavailableErrorView, ck as ServiceType } from './index-ClpwX2z9.js';
-import { f as formatUnits, p as parseUnits } from './index-BMKU17nO.js';
-import { E as EllipsizedText, C as Contract } from './EllipsizedText-Ppn9TC1R.js';
-import { r as retry, T as TokenImage } from './retry-D5EXmyEZ.js';
-import { H as HandoverContent } from './HandoverContent-8S6KoHhH.js';
-import { F as FeesBreakdown } from './FeesBreakdown-k6lIF8xc.js';
+import { _ as _objectWithoutProperties, z as useTheme, cA as useForwardLocalDomRef, cq as useGetSubcomponentChild, cB as useSplitApartChildrenAndSubComponents, r as reactExports, F as merge$2, cC as useResizeObserver, q as jsxs, j as jsx, J as SmartClone, K as Box, H as isChildSubcomponent, G as flattenChildren, Y as Body, cD as useTheme$1, bt as Icon, x as ButtCon, y as Button, T as _defineProperty, aq as isDualVariantIcon, cp as _slicedToArray, cE as isNumberWithinTotal, A as getStartingSize, cr as BaseClickable, R as ClassNames, cF as _toConsumableArray, cG as isError, cd as Badge, cH as FramedIcon, bV as FramedImage, cI as FramedLogo, b5 as Stack, co as hFlex, cJ as usePrevious, cK as useBrowserEffect, cL as getHeadingTextStyles, cM as vFlex, cN as centerFlexChildren, cO as FormControlLabel, cP as FormControlValidation, cQ as FormControlCaption, I as IMTBLWidgetEvents, cR as AddFundsEventType, cS as getDefaultExportFromCjs, cT as commonjsGlobal, l as useTranslation, a4 as MenuItem, a5 as tokenValueFormat, cU as DEFAULT_TOKEN_FORMATTING_DECIMALS, aM as BigNumber, cV as getRemoteVideo, cW as FramedVideo, a$ as motion, b1 as listItemVariants, b7 as Divider, aW as Fragment, b0 as listVariants, cX as useProvidersContext, at as Drawer, $ as useAnalytics, c0 as WalletDrawer, cY as UnableToConnectDrawer, cZ as ChangedYourMindDrawer, c_ as ConnectEIP6963ProviderError, a6 as UserJourney, c$ as getProviderSlugFromRdns, bZ as WalletProviderRdns, b_ as Web3Provider, d0 as connectEIP6963Provider, d1 as identifyUser, d2 as ProvidersContextActions, X as ViewContext, V as ViewActions, o as SharedViews, k as ChainId, d3 as commonjsRequire, bm as getRemoteImage, as as Heading, aX as useHandover, aY as HandoverTarget, a1 as EventTargetContext, aZ as getRemoteRive, b$ as useInjectedProviders, bu as getDefaultTokenImage, d4 as OverflowDrawerMenu, an as SimpleLayout, U as TokenFilterTypes, h as getL2ChainId, a7 as orchestrationEvents, d5 as requireSecp256k1$1, d6 as requireLib_commonjs, d7 as require$$0$2, d8 as bech32$2, d9 as bnExports$1, da as require$$0$3, db as getAugmentedNamespace, dc as require$$0$4, dd as minimalisticAssert, de as require$$2, df as hash$6, dg as MaxUint256, dh as merge$3, di as SvgIcon, dj as WalletWarningHero, a3 as Environment, dk as t, aC as Link, cx as PriceDisplay, L as LoadingView, aD as viewReducer, aE as initialViewState, dl as isValidAddress, bx as amountInputValidation, br as CloudImage, E as ErrorView, cj as ServiceUnavailableErrorView, ck as ServiceType } from './index-DVt2j3lK.js';
+import { f as formatUnits, p as parseUnits } from './index-4h8fLbUy.js';
+import { E as EllipsizedText, C as Contract } from './EllipsizedText-BezxpXlh.js';
+import { r as retry, T as TokenImage } from './retry-CJesv1Z0.js';
+import { H as HandoverContent } from './HandoverContent-D5DaYSVN.js';
+import { F as FeesBreakdown } from './FeesBreakdown-G2U4Al4H.js';
 
 var bannerSx = {
   d: "flex",
@@ -1565,6 +1565,7 @@ var AddFundsErrorTypes;
     AddFundsErrorTypes["WALLET_REJECTED"] = "WALLET_REJECTED";
     AddFundsErrorTypes["WALLET_REJECTED_NO_FUNDS"] = "WALLET_REJECTED_NO_FUNDS";
     AddFundsErrorTypes["WALLET_POPUP_BLOCKED"] = "WALLET_POPUP_BLOCKED";
+    AddFundsErrorTypes["ENVIRONMENT_ERROR"] = "ENVIRONMENT_ERROR";
 })(AddFundsErrorTypes || (AddFundsErrorTypes = {}));
 
 function FiatOption({ type, onClick, disabled = false, size = 'small', rc = jsx("span", {}), }) {
@@ -1623,7 +1624,13 @@ function getTotalRouteFees(route) {
  * Formats a number to a string with a maximum number of decimals
  * removing trailing zeros
  */
-const getFormattedAmounts = (amount, maxDecimals = DEFAULT_TOKEN_FORMATTING_DECIMALS) => tokenValueFormat(amount, maxDecimals).replace(/\.?0+$/, '');
+const getFormattedAmounts = (value, maxDecimals = DEFAULT_TOKEN_FORMATTING_DECIMALS) => {
+    const amount = typeof value === 'number' ? value : parseFloat(value);
+    if (amount > 0 && amount < 1) {
+        return tokenValueFormat(amount, maxDecimals).replace(/\.?0+$/, '');
+    }
+    return tokenValueFormat(amount, maxDecimals);
+};
 /**
  * Converts a crypto amount to a formatted string
  */
@@ -1653,13 +1660,12 @@ function getRouteAndTokenBalances(routeData) {
     if (!routeData) {
         return emptyRouteBalance;
     }
-    const { fromToken } = routeData.amountData;
     const usdPrice = routeData?.route.route.estimate.fromToken.usdPrice;
     if (!usdPrice) {
         return emptyRouteBalance;
     }
     const { balance } = routeData.amountData;
-    const routeBalance = getFormattedNumber(balance.balance, fromToken?.decimals, fromToken?.decimals);
+    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 ?? '');
@@ -1689,7 +1695,7 @@ function RouteOption({ routeData, onClick, chains, disabled = false, isFastest =
         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, padded: true, use: jsx("img", { src: fromToken.iconUrl, alt: fromToken.name }) })] })), jsx(MenuItem.Caption, { children: `Balance: USD ${routeBalanceUsd}` }), jsx(MenuItem.PriceDisplay, { price: fromAmount, children: jsx(MenuItem.PriceDisplay.Caption, { children: `USD $${fromAmountUsd}` }) }), jsxs(MenuItem.BottomSlot, { children: [jsx(MenuItem.BottomSlot.Divider, {}), jsxs(Stack, { rc: jsx("span", {}), direction: "row", justifyContent: "space-between", sx: {
+    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 }) })] })), jsx(MenuItem.Caption, { children: `Balance: USD ${routeBalanceUsd}` }), jsx(MenuItem.PriceDisplay, { price: fromAmount, children: jsx(MenuItem.PriceDisplay.Caption, { children: `USD $${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,
@@ -1706,11 +1712,11 @@ const defaultFiatOptions = [
     FiatOptionType.DEBIT,
     FiatOptionType.CREDIT,
 ];
-function Options({ routes, chains, onCardClick, onRouteClick, size, showOnrampOption, insufficientBalance, selectedIndex, }) {
+function Options({ checkout, routes, chains, onCardClick, onRouteClick, size, showOnrampOption, insufficientBalance, selectedIndex, }) {
     // @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: ["Finding the best value", jsx("br", {}), "across all chains"] }), jsx(FramedVideo, { mimeType: "video/mp4", videoUrl: "https://i.imgur.com/dVQoobw.mp4", sx: { alignSelf: 'center', mt: 'base.spacing.x2' }, size: "large", circularFrame: true })] }));
+        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: ["Finding the best value", jsx("br", {}), "across all chains"] }), 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 routeOptions = 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}`)));
     const fiatOptions = reactExports.useMemo(() => {
@@ -1726,12 +1732,12 @@ function Options({ routes, chains, onCardClick, onRouteClick, size, showOnrampOp
     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: [routeOptions, noFundsBanner, fiatOptions] }));
 }
 
-function OptionsDrawer({ routes, visible, onClose, onRouteClick, onCardClick, showOnrampOption, 
+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 { addFundsState: { chains } } = reactExports.useContext(AddFundsContext);
+    const { addFundsState: { chains }, } = reactExports.useContext(AddFundsContext);
     const { providersState: { fromProviderInfo, fromAddress }, } = useProvidersContext();
     const selectedRouteIndex = reactExports.useRef(0);
     const handleOnRouteClick = (route, index) => {
@@ -1741,7 +1747,7 @@ showBridgeOption, insufficientBalance, }) {
     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 }) }), jsx(MenuItem.Label, { children: "Pay from" }), 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", routes: routes, chains: chains, onCardClick: onCardClick, onRouteClick: handleOnRouteClick, showOnrampOption: showOnrampOption, insufficientBalance: insufficientBalance, selectedIndex: selectedRouteIndex.current })] }) }));
+            }, 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: "Pay from" }), 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) => {
@@ -1875,12 +1881,12 @@ const useRoutes = () => {
             allRoutes.push(...(await getRoutes(squid, slicedAmountDataArray, toTokenAddress)));
             await delay(delayMs);
         }));
+        const sortedRoutes = sortRoutesByFastestTime(allRoutes);
         // Only update routes if the request is the latest one
         if (currentRequestId === latestRequestIdRef.current) {
-            const sortedRoutes = sortRoutesByFastestTime(allRoutes);
             setRoutes(sortedRoutes);
         }
-        return allRoutes;
+        return sortedRoutes;
     };
     return {
         fetchRoutesWithRateLimit,
@@ -1907,7 +1913,7 @@ function SelectedRouteOptionContainer({ children, onClick, selected, }) {
                 : `calc(100% + (${base.spacing.x16}))`),
         }, rc: jsx("span", { ...(onClick ? { onClick } : {}) }), children: children }));
 }
-function SelectedRouteOption({ routeData, chains, loading = false, withSelectedWallet = false, withSelectedToken = false, withSelectedAmount = false, insufficientBalance = false, showOnrampOption = false, onClick, }) {
+function SelectedRouteOption({ checkout, routeData, chains, loading = false, withSelectedWallet = false, withSelectedToken = false, withSelectedAmount = false, insufficientBalance = false, showOnrampOption = false, onClick, }) {
     const { fromToken } = routeData?.amountData ?? {};
     const chain = chains?.find((c) => c.id === fromToken?.chainId);
     const { routeBalanceUsd, fromAmount, fromAmountUsd } = reactExports.useMemo(() => getRouteAndTokenBalances(routeData), [routeData]);
@@ -1920,7 +1926,7 @@ function SelectedRouteOption({ routeData, chains, loading = false, withSelectedW
         return true;
     }, [onClick, loading, routeData]);
     if (!routeData && loading) {
-        return (jsxs(SelectedRouteOptionContainer, { onClick: handleOnClick, selected: withSelectedWallet, children: [jsx(MenuItem.FramedVideo, { videoUrl: "https://i.imgur.com/dVQoobw.mp4", mimeType: "video/mp4", circularFrame: true }), jsx(MenuItem.Caption, { children: "Finding the best payment route..." })] }));
+        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: "Finding the best payment route..." })] }));
     }
     if ((!routeData && !loading) || insufficientBalance) {
         let icon = 'Sparkle';
@@ -1944,92 +1950,28 @@ function SelectedRouteOption({ routeData, chains, loading = false, withSelectedW
         }
         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: 'right', y: 'bottom' }, children: [jsx(Sticker.FramedImage, { use: jsx("img", { src: chain.iconUrl, alt: chain.name }), sx: { w: 'base.icon.size.200' } }), 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 }), jsx(MenuItem.Caption, { children: `Balance USD $${routeBalanceUsd}` })] }), jsx(MenuItem.PriceDisplay, { price: fromAmount, children: jsx(MenuItem.PriceDisplay.Caption, { children: `USD $${fromAmountUsd}` }) })] })] }));
+    return (jsxs(SelectedRouteOptionContainer, { onClick: handleOnClick, selected: withSelectedWallet, children: [chain && (jsxs(Sticker, { position: { x: 'right', y: 'bottom' }, children: [jsx(Sticker.FramedImage, { use: jsx("img", { src: chain.iconUrl, alt: chain.name }), size: "xSmall", sx: { bottom: 'base.spacing.x2', right: 'base.spacing.x2' } }), 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 }), jsx(MenuItem.Caption, { children: `Balance USD $${routeBalanceUsd}` })] }), jsx(MenuItem.PriceDisplay, { price: fromAmount, children: jsx(MenuItem.PriceDisplay.Caption, { children: `USD $${fromAmountUsd}` }) })] })] }));
 }
 
-function SelectedWallet({ label, children, onClick, providerInfo, }) {
+const disabledStyles = {
+    cursor: 'not-allowed',
+    bg: 'base.color.translucent.inverse.800',
+};
+function SelectedWallet({ label, children, onClick, providerInfo, disabled, }) {
     const selected = !!children && providerInfo?.rdns;
     const size = selected ? 'xSmall' : 'small';
-    return (jsxs(MenuItem, { size: size, emphasized: true, onClick: onClick, children: [!providerInfo?.icon && (jsx(MenuItem.FramedIcon, { icon: "Wallet", variant: "bold", emphasized: false })), providerInfo?.icon && (jsx(MenuItem.FramedImage, { padded: true, sx: { mx: selected ? 'base.spacing.x2' : undefined }, use: jsx("img", { src: providerInfo.icon, alt: providerInfo.name }) })), 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.BottomSlot, { children: children })] }));
+    return (jsxs(MenuItem, { size: size, disabled: disabled, emphasized: !disabled, onClick: disabled ? undefined : onClick, sx: {
+            py: selected ? 'base.spacing.x3' : undefined,
+            ...(disabled ? disabledStyles : {}),
+        }, children: [!providerInfo?.icon && (jsx(MenuItem.FramedIcon, { icon: "Wallet", variant: "bold", emphasized: false })), providerInfo?.icon && (jsx(MenuItem.FramedImage, { padded: true, sx: { mx: selected ? 'base.spacing.x2' : undefined }, use: jsx("img", { src: providerInfo.icon, alt: providerInfo.name }) })), 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.BottomSlot, { children: children })] }));
 }
 
-function NonPassportWarningDrawer({ visible, onCloseDrawer, handleCtaButtonClick, }) {
-    const { t } = useTranslation();
-    return (jsx(Drawer, { size: "full", visible: visible, showHeaderBar: false, children: jsxs(Drawer.Content, { children: [jsx(ButtCon, { icon: "Close", variant: "tertiary", sx: {
-                        pos: 'absolute',
-                        top: 'base.spacing.x5',
-                        left: 'base.spacing.x5',
-                        backdropFilter: 'blur(30px)',
-                    }, onClick: onCloseDrawer }), 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.CONNECT_WALLET.nonPassportDrawer.heading') }), jsxs(Body, { size: "medium", sx: {
-                                display: 'block',
-                                textAlign: 'center',
-                                color: 'base.color.text.body.secondary',
-                                marginBottom: 'base.spacing.x21',
-                            }, children: [jsx(Trans, { i18nKey: t('views.CONNECT_WALLET.nonPassportDrawer.body1'), components: {
-                                        layerswapLink: (jsx(Link, { size: "small", rc: (jsx("a", { target: "_blank", href: "https://toolkit.immutable.com/cex-deposit", rel: "noreferrer" })) })),
-                                    } }), jsx("br", {}), jsx("br", {}), t('views.CONNECT_WALLET.nonPassportDrawer.body2')] })] }), 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: handleCtaButtonClick, children: t('views.CONNECT_WALLET.nonPassportDrawer.buttonText') }) })] }) }));
-}
-
-var ConnectEIP6963ProviderError;
-(function (ConnectEIP6963ProviderError) {
-    ConnectEIP6963ProviderError["CONNECT_ERROR"] = "CONNECT_ERROR";
-    ConnectEIP6963ProviderError["SANCTIONED_ADDRESS"] = "SANCTIONED_ADDRESS";
-    ConnectEIP6963ProviderError["USER_REJECTED_REQUEST_ERROR"] = "USER_REJECTED_REQUEST_ERROR";
-})(ConnectEIP6963ProviderError || (ConnectEIP6963ProviderError = {}));
-const connectEIP6963Provider = async (providerDetail, checkout) => {
-    const web3Provider = new Web3Provider(providerDetail.provider);
-    try {
-        const requestWalletPermissions = providerDetail.info.rdns === WalletProviderRdns.METAMASK;
-        const connectResult = await checkout.connect({
-            provider: web3Provider,
-            requestWalletPermissions,
-        });
-        const address = await connectResult.provider.getSigner().getAddress();
-        const isSanctioned = await checkout.checkIsAddressSanctioned(address, checkout.config.environment);
-        if (isSanctioned) {
-            throw new CheckoutError('Sanctioned address', ConnectEIP6963ProviderError.SANCTIONED_ADDRESS);
-        }
-        addProviderListenersForWidgetRoot(connectResult.provider);
-        return {
-            provider: connectResult.provider,
-            providerName: getProviderSlugFromRdns(providerDetail.info.rdns),
-        };
-    }
-    catch (error) {
-        switch (error.type) {
-            case CheckoutErrorType.USER_REJECTED_REQUEST_ERROR:
-                throw new Error(ConnectEIP6963ProviderError.USER_REJECTED_REQUEST_ERROR);
-            case ConnectEIP6963ProviderError.SANCTIONED_ADDRESS:
-                throw new Error(ConnectEIP6963ProviderError.SANCTIONED_ADDRESS);
-            default:
-                throw new Error(ConnectEIP6963ProviderError.CONNECT_ERROR);
-        }
-    }
-};
-
-function ConnectWalletDrawer({ heading, visible, onClose, onConnect, onError, providerType, walletOptions, bottomSlot, menuItemSize = 'small', disabledOptions = [], }) {
+function ConnectWalletDrawer({ heading, visible, onClose, onConnect, onError, providerType, walletOptions, bottomSlot, menuItemSize = 'small', disabledOptions = [], getShouldRequestWalletPermissions, }) {
     const { providersState: { checkout }, providersDispatch, } = useProvidersContext();
     const { identify, track } = useAnalytics();
     const prevWalletChangeEvent = reactExports.useRef();
-    const [showNonPassportWarning, setShowNonPassportWarning] = reactExports.useState(false);
     const [showUnableToConnectDrawer, setShowUnableToConnectDrawer] = reactExports.useState(false);
     const [showChangedMindDrawer, setShowChangedMindDrawer] = reactExports.useState(false);
-    const shouldShowNonPassportWarning = (rdns) => {
-        const hasSeenWarning = localStorage.getItem(HAS_SEEN_NON_PASSPORT_WARNING_KEY);
-        if (rdns !== WalletProviderRdns.PASSPORT && !hasSeenWarning) {
-            return true;
-        }
-        return false;
-    };
     const setProviderInContext = async (provider, providerInfo) => {
         const address = await provider.getSigner().getAddress();
         if (providerType === 'from') {
@@ -2052,6 +1994,7 @@ function ConnectWalletDrawer({ heading, visible, onClose, onConnect, onError, pr
                 },
             });
         }
+        return address;
     };
     const handleOnWalletChangeEvent = async (event) => {
         if (!checkout) {
@@ -2063,11 +2006,6 @@ function ConnectWalletDrawer({ heading, visible, onClose, onConnect, onError, pr
         prevWalletChangeEvent.current = event;
         const { providerDetail } = event;
         const { info } = providerDetail;
-        // check if selected a non passport wallet
-        if (shouldShowNonPassportWarning(info.rdns)) {
-            setShowNonPassportWarning(true);
-            return;
-        }
         // Trigger analytics connect wallet, menu item, with wallet details
         track({
             userJourney: UserJourney.CONNECT,
@@ -2089,13 +2027,15 @@ function ConnectWalletDrawer({ heading, visible, onClose, onConnect, onError, pr
                 await checkout.passport?.logout();
             }
         }
+        let address;
         // Proceed to connect selected provider
+        const shouldRequestWalletPermissions = getShouldRequestWalletPermissions?.(info);
         try {
-            const { provider } = await connectEIP6963Provider(providerDetail, checkout);
+            const { provider } = await connectEIP6963Provider(providerDetail, checkout, shouldRequestWalletPermissions);
             // Identify connected wallet
             await identifyUser(identify, provider);
             // Store selected provider as fromProvider in context
-            setProviderInContext(provider, providerDetail.info);
+            address = await setProviderInContext(provider, providerDetail.info);
             // Notify successful connection
             onConnect?.(provider, providerDetail.info);
         }
@@ -2116,18 +2056,13 @@ function ConnectWalletDrawer({ heading, visible, onClose, onConnect, onError, pr
             onError?.(errorType);
             return;
         }
-        onClose();
+        onClose(address);
     };
     const retrySelectedWallet = () => {
         if (prevWalletChangeEvent.current) {
             handleOnWalletChangeEvent(prevWalletChangeEvent.current);
         }
     };
-    const handleCloseNonPassportWarningDrawer = () => {
-        localStorage.setItem(HAS_SEEN_NON_PASSPORT_WARNING_KEY, 'true');
-        setShowNonPassportWarning(false);
-        retrySelectedWallet();
-    };
     const handleCloseChangedMindDrawer = () => {
         setShowChangedMindDrawer(false);
         retrySelectedWallet();
@@ -2135,13 +2070,14 @@ function ConnectWalletDrawer({ heading, visible, onClose, onConnect, onError, pr
     return (jsxs(Fragment, { children: [jsx(WalletDrawer, { testId: "select-from-wallet-drawer", showWalletConnect: true, showDrawer: visible, drawerText: { heading }, walletOptions: walletOptions, disabledOptions: disabledOptions, menuItemSize: menuItemSize, setShowDrawer: (show) => {
                     if (show === false)
                         onClose();
-                }, onWalletChange: handleOnWalletChangeEvent, bottomSlot: bottomSlot }), jsx(NonPassportWarningDrawer, { visible: showNonPassportWarning, onCloseDrawer: handleCloseNonPassportWarningDrawer, handleCtaButtonClick: handleCloseNonPassportWarningDrawer }), jsx(UnableToConnectDrawer, { visible: showUnableToConnectDrawer, checkout: checkout, onCloseDrawer: () => setShowUnableToConnectDrawer(false), onTryAgain: () => setShowUnableToConnectDrawer(false) }), jsx(ChangedYourMindDrawer, { visible: showChangedMindDrawer, checkout: checkout, onCloseDrawer: () => setShowChangedMindDrawer(false), onTryAgain: handleCloseChangedMindDrawer })] }));
+                }, onWalletChange: handleOnWalletChangeEvent, bottomSlot: bottomSlot }), jsx(UnableToConnectDrawer, { visible: showUnableToConnectDrawer, checkout: checkout, onCloseDrawer: () => setShowUnableToConnectDrawer(false), onTryAgain: () => setShowUnableToConnectDrawer(false) }), jsx(ChangedYourMindDrawer, { visible: showChangedMindDrawer, checkout: checkout, onCloseDrawer: () => setShowChangedMindDrawer(false), onTryAgain: handleCloseChangedMindDrawer })] }));
 }
 
 function DeliverToWalletDrawer({ visible, onClose, onConnect, walletOptions, }) {
+    const { providersState: { fromProviderInfo }, } = useProvidersContext();
     const { viewDispatch } = reactExports.useContext(ViewContext);
     const handleOnConnect = (provider, providerInfo) => {
-        onConnect('to', provider, providerInfo);
+        onConnect?.('to', provider, providerInfo);
     };
     const handleOnError = (errorType) => {
         if (errorType === ConnectEIP6963ProviderError.SANCTIONED_ADDRESS) {
@@ -2157,7 +2093,11 @@ function DeliverToWalletDrawer({ visible, onClose, onConnect, walletOptions, })
             });
         }
     };
-    return (jsx(ConnectWalletDrawer, { heading: "Deliver To", visible: visible, onClose: onClose, providerType: "to", walletOptions: walletOptions, onConnect: handleOnConnect, onError: handleOnError }));
+    // Becuase wallets extensions don't support multiple wallet connections
+    // UX decides to have the user use the same wallet type they selected to pay with
+    // ie: Metamask to Metamsk, will send to same wallet address
+    const selectedSameFromWalletType = (providerInfo) => (fromProviderInfo?.rdns !== providerInfo.rdns ? undefined : false);
+    return (jsx(ConnectWalletDrawer, { heading: "Deliver To", visible: visible, onClose: onClose, providerType: "to", walletOptions: walletOptions, onConnect: handleOnConnect, onError: handleOnError, getShouldRequestWalletPermissions: selectedSameFromWalletType }));
 }
 
 function PayWithWalletDrawer({ visible, onClose, onConnect, onPayWithCard, walletOptions, insufficientBalance, showOnRampOption = true, }) {
@@ -2194,7 +2134,7 @@ function PayWithWalletDrawer({ visible, onClose, onConnect, onPayWithCard, walle
             return null;
         return (jsxs(MenuItem, { size: "small", emphasized: true, onClick: () => {
                 onClose();
-                onPayWithCard();
+                onPayWithCard?.();
             }, children: [jsx(MenuItem.FramedIcon, { icon: "BankCard", variant: "bold", emphasized: false }), jsx(MenuItem.Label, { children: "Pay with Card" })] }));
     }, [onClose, onPayWithCard]);
     return (jsx(ConnectWalletDrawer, { heading: insufficientBalance ? 'Choose another option' : 'Pay With', visible: visible, onClose: onClose, providerType: "from", walletOptions: walletOptions, disabledOptions: disabledOptions, bottomSlot: payWithCardItem, onConnect: handleOnConnect, onError: handleOnError }));
@@ -5192,6 +5132,12 @@ const useError = (environment) => {
             secondaryButtonText: 'Close',
             onSecondaryButtonClick: goBackToAddFundsView,
         },
+        [AddFundsErrorTypes.ENVIRONMENT_ERROR]: {
+            headingText: 'Unsupported environment',
+            subHeadingText: 'This is only supported in production environment.',
+            secondaryButtonText: 'Close',
+            onSecondaryButtonClick: closeWidget,
+        },
     };
     const getErrorConfig = (errorType) => errorConfig[errorType];
     const showErrorHandover = (errorType, data) => {
@@ -5206,7 +5152,7 @@ const useError = (environment) => {
         addHandover({
             animationUrl: getRemoteRive(environment, APPROVE_TXN_ANIMATION),
             inputValue: RiveStateMachineInput.ERROR,
-            children: jsx(HandoverContent, { headingText: getErrorConfig(errorType).headingText, subheadingText: getErrorConfig(errorType).subHeadingText, primaryButtonText: getErrorConfig(errorType).primaryButtonText, onPrimaryButtonClick: getErrorConfig(errorType).onPrimaryButtonClick, secondaryButtonText: getErrorConfig(errorType).secondaryButtonText, onSecondaryButtonClick: getErrorConfig(errorType).onSecondaryButtonClick }),
+            children: (jsx(HandoverContent, { headingText: getErrorConfig(errorType).headingText, subheadingText: getErrorConfig(errorType).subHeadingText, primaryButtonText: getErrorConfig(errorType).primaryButtonText, onPrimaryButtonClick: getErrorConfig(errorType).onPrimaryButtonClick, secondaryButtonText: getErrorConfig(errorType).secondaryButtonText, onSecondaryButtonClick: getErrorConfig(errorType).onSecondaryButtonClick })),
         });
     };
     return {
@@ -5265,20 +5211,22 @@ function AddFunds({ checkout, toAmount, config, toTokenAddress, showOnrampOption
         });
     };
     const setSelectedRouteData = (route) => {
-        track({
-            userJourney: UserJourney.ADD_FUNDS,
-            screen: 'InputScreen',
-            control: 'RoutesMenu',
-            controlType: 'MenuItem',
-            extras: {
-                toTokenAddress: route?.amountData.toToken.address,
-                toTokenChainId: route?.amountData.toToken.chainId,
-                fromTokenAddress: route?.amountData.fromToken.address,
-                fromTokenChainId: route?.amountData.fromToken.chainId,
-                toAmount: route?.amountData.toAmount,
-                fromAmount: route?.amountData.fromAmount,
-            },
-        });
+        if (route) {
+            track({
+                userJourney: UserJourney.ADD_FUNDS,
+                screen: 'InputScreen',
+                control: 'RoutesMenu',
+                controlType: 'MenuItem',
+                extras: {
+                    toTokenAddress: route.amountData.toToken.address,
+                    toTokenChainId: route.amountData.toToken.chainId,
+                    fromTokenAddress: route.amountData.fromToken.address,
+                    fromTokenChainId: route.amountData.fromToken.chainId,
+                    toAmount: route.amountData.toAmount,
+                    fromAmount: route.amountData.fromAmount,
+                },
+            });
+        }
         addFundsDispatch({
             payload: {
                 type: AddFundsActions.SET_SELECTED_ROUTE_DATA,
@@ -5294,7 +5242,7 @@ function AddFunds({ checkout, toAmount, config, toTokenAddress, showOnrampOption
         setInputValue(value);
         setSelectedAmount(value);
     };
-    const { providersState: { fromProviderInfo, toProviderInfo, fromAddress, toAddress, }, } = useProvidersContext();
+    const { providersState: { fromProviderInfo, toProviderInfo, fromAddress, toAddress, lockedToProvider, }, } = useProvidersContext();
     const { providers } = useInjectedProviders({ checkout });
     const walletOptions = reactExports.useMemo(() => providers
         // TODO: Check if must filter passport on L1
@@ -5485,10 +5433,7 @@ function AddFunds({ checkout, toAmount, config, toTokenAddress, showOnrampOption
         && validateToAmount(inputValue).isValid;
     const loading = (routeInputsReady || fetchingRoutes)
         && !(selectedRouteData || insufficientBalance);
-    const readyToReview = routeInputsReady
-        && !!toAddress
-        && !!selectedRouteData
-        && !loading;
+    const readyToReview = routeInputsReady && !!toAddress && !!selectedRouteData && !loading;
     const handleWalletConnected = (providerType, provider, providerInfo) => {
         track({
             userJourney: UserJourney.ADD_FUNDS,
@@ -5526,20 +5471,20 @@ function AddFunds({ checkout, toAmount, config, toTokenAddress, showOnrampOption
                                                 boxShadow: ({ base }) => `0 0 0 ${base.border.size[200]} ${base.color.text.body.primary}`,
                                             },
                                         } })),
-                                }), children: tokenChoiceOptions }), showInitialEmptyState ? (jsx(Body, { children: "Add Token" })) : (jsxs(HeroFormControl, { validationStatus: inputValue === '0' ? 'error' : 'success', children: [jsxs(HeroFormControl.Label, { children: ["Add", ' ', selectedToken.symbol] }), jsx(HeroTextInput, { testId: "add-funds-amount-input", type: "number", value: inputValue, onChange: (value) => handleOnAmountInputChange(value), placeholder: "0", maxTextSize: "xLarge" }), selectedAmountUsd > 0 && (jsxs(HeroFormControl.Caption, { children: ["USD $", selectedAmountUsd.toFixed(2)] }))] }))] }), jsxs(Stack, { testId: "bottomSection", sx: {
+                                }), children: tokenChoiceOptions }), showInitialEmptyState ? (jsx(Body, { children: "Add Token" })) : (jsxs(HeroFormControl, { validationStatus: inputValue === '0' ? 'error' : 'success', children: [jsxs(HeroFormControl.Label, { children: ["Add", ' ', selectedToken.symbol] }), jsx(HeroTextInput, { testId: "add-funds-amount-input", type: "number", value: inputValue, onChange: (value) => handleOnAmountInputChange(value), placeholder: "0", maxTextSize: "xLarge" }), jsxs(HeroFormControl.Caption, { children: ["USD $", selectedAmountUsd.toFixed(2)] })] }))] }), jsxs(Stack, { testId: "bottomSection", sx: {
                         alignSelf: 'stretch',
                         p: 'base.spacing.x3',
                         pb: 'base.spacing.x10',
                         bg: 'base.color.neutral.800',
+                        bradtl: 'base.borderRadius.x8',
+                        bradtr: 'base.borderRadius.x8',
                     }, gap: "base.spacing.x6", children: [jsxs(Stack, { gap: "0px", children: [jsxs(SelectedWallet, { label: "Pay with", providerInfo: {
                                         ...fromProviderInfo,
                                         address: fromAddress,
                                     }, onClick: (event) => {
                                         event.stopPropagation();
                                         setShowPayWithDrawer(true);
-                                    }, children: [jsx(MenuItem.BottomSlot.Divider, { sx: {
-                                                ml: fromAddress ? 'base.spacing.x2' : undefined,
-                                            } }), jsx(SelectedRouteOption, { loading: loading, chains: chains, routeData: selectedRouteData, onClick: () => setShowOptionsDrawer(true), withSelectedToken: !!selectedToken, withSelectedAmount: parseFloat(inputValue) > 0, withSelectedWallet: !!fromAddress, insufficientBalance: insufficientBalance, showOnrampOption: shouldShowOnRampOption })] }), jsx(Stack, { sx: { pos: 'relative', h: 'base.spacing.x3' }, alignItems: "center", children: jsx(FramedIcon, { icon: "ArrowDown", sx: {
+                                    }, children: [jsx(MenuItem.BottomSlot.Divider, { sx: fromAddress ? { ml: 'base.spacing.x4' } : undefined }), jsx(SelectedRouteOption, { checkout: checkout, loading: loading, chains: chains, routeData: selectedRouteData, onClick: () => setShowOptionsDrawer(true), withSelectedToken: !!selectedToken, withSelectedAmount: parseFloat(inputValue) > 0, withSelectedWallet: !!fromAddress, insufficientBalance: insufficientBalance, showOnrampOption: shouldShowOnRampOption })] }), jsx(Stack, { sx: { pos: 'relative', h: 'base.spacing.x3' }, alignItems: "center", children: jsx(FramedIcon, { icon: "ArrowDown", sx: {
                                             top: '0',
                                             pos: 'absolute',
                                             translate: '0 -30%',
@@ -5547,7 +5492,7 @@ function AddFunds({ checkout, toAmount, config, toTokenAddress, showOnrampOption
                                         } }) }), jsx(SelectedWallet, { label: "Deliver to", providerInfo: {
                                         ...toProviderInfo,
                                         address: toAddress,
-                                    }, onClick: () => setShowDeliverToDrawer(true) })] }), jsx(Button, { testId: "add-funds-button", size: "large", variant: readyToReview ? 'primary' : 'secondary', disabled: !readyToReview, onClick: handleReviewClick, sx: { opacity: readyToReview ? 1 : 0.5 }, children: "Review" }), jsx(PayWithWalletDrawer, { visible: showPayWithDrawer, walletOptions: walletOptions, onClose: () => setShowPayWithDrawer(false), onPayWithCard: handleCardClick, onConnect: handleWalletConnected, insufficientBalance: insufficientBalance, showOnRampOption: shouldShowOnRampOption }), jsx(OptionsDrawer, { 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: () => setShowDeliverToDrawer(false), onConnect: handleWalletConnected }), jsx(OnboardingDrawer, { environment: checkout?.config.environment })] })] }) }));
+                                    }, onClick: () => setShowDeliverToDrawer(true), disabled: lockedToProvider })] }), jsx(Button, { testId: "add-funds-button", size: "large", variant: readyToReview ? 'primary' : 'secondary', disabled: !readyToReview, onClick: handleReviewClick, sx: { opacity: readyToReview ? 1 : 0.5 }, children: "Review" }), jsx(PayWithWalletDrawer, { visible: showPayWithDrawer, walletOptions: walletOptions, onClose: () => setShowPayWithDrawer(false), onPayWithCard: handleCardClick, onConnect: handleWalletConnected, insufficientBalance: insufficientBalance, showOnRampOption: shouldShowOnRampOption }), 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: () => setShowDeliverToDrawer(false) }), jsx(OnboardingDrawer, { environment: checkout?.config.environment })] })] }) }));
 }
 
 var dist$3 = {};
@@ -173289,10 +173234,12 @@ const useExecute = (environment) => {
         if (reason.includes('rejected') && reason.includes('user')) {
             errorType = AddFundsErrorTypes.WALLET_REJECTED;
         }
-        if (reason.includes('failed to submit') && reason.includes('highest gas limit')) {
+        if (reason.includes('failed to submit')
+            && reason.includes('highest gas limit')) {
             errorType = AddFundsErrorTypes.WALLET_REJECTED_NO_FUNDS;
         }
-        if (reason.includes('status failed') || reason.includes('transaction failed')) {
+        if (reason.includes('status failed')
+            || reason.includes('transaction failed')) {
             errorType = AddFundsErrorTypes.TRANSACTION_FAILED;
         }
         const error = {
@@ -173301,7 +173248,7 @@ const useExecute = (environment) => {
         };
         showErrorHandover(errorType, { error });
     };
-    const convertToNetworkChangeableProvider = async (provider) => new Web3Provider(provider.provider, 'any');
+    // @TODO: Move to util function
     const checkProviderChain = async (provider, chainId) => {
         if (!provider.provider.request) {
             throw new Error('provider does not have request method');
@@ -173397,7 +173344,6 @@ const useExecute = (environment) => {
         }
     };
     return {
-        convertToNetworkChangeableProvider,
         checkProviderChain,
         getAllowance,
         approve,
@@ -173449,6 +173395,24 @@ 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, }) {
+    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: "Oops! It seems your payment wallet has changed" }), jsx(Body, { size: "medium", sx: {
+                                display: 'block',
+                                textAlign: 'center',
+                                color: 'base.color.text.body.secondary',
+                                marginBottom: 'base.spacing.x21',
+                            }, children: "You'll be ask to re-connect the same wallet you selected to pay with before proceeding." })] }), 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: "Re-select payment wallet" }) })] }) }));
+}
+
 /**
  * Find a chain by its id
  * @param chainId - The id of the chain to find
@@ -173469,6 +173433,8 @@ const getRouteChains = (chains, route) => ({
     toChain: findChainById(route?.route.estimate.toToken.chainId, chains),
 });
 
+const convertToNetworkChangeableProvider = async (provider) => new Web3Provider(provider.provider, 'any');
+
 const dividerSx = {
     content: "''",
     pos: 'absolute',
@@ -173484,11 +173450,12 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
     const [route, setRoute] = reactExports.useState();
     const [proceedDisabled, setProceedDisabled] = reactExports.useState(true);
     const [showFeeBreakdown, setShowFeeBreakdown] = reactExports.useState(false);
+    const [showAddressMissmatchDrawer, setShowAddressMissmatchDrawer] = reactExports.useState(false);
     const { getAmountData, getRoute } = useRoutes();
     const { addHandover, closeHandover } = useHandover({
         id: HandoverTarget.GLOBAL,
     });
-    const { convertToNetworkChangeableProvider, checkProviderChain, getAllowance, approve, execute, } = useExecute(checkout?.config.environment || Environment.SANDBOX);
+    const { checkProviderChain, getAllowance, approve, execute, } = useExecute(checkout?.config.environment || Environment.SANDBOX);
     reactExports.useEffect(() => {
         page({
             userJourney: UserJourney.ADD_FUNDS,
@@ -173547,6 +173514,11 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
         if (!squid || !fromProvider || !route) {
             return;
         }
+        const currentFromAddress = await fromProvider.getSigner().getAddress();
+        if (currentFromAddress !== fromAddress) {
+            setShowAddressMissmatchDrawer(true);
+            return;
+        }
         clearInterval(getRouteIntervalIdRef.current);
         setProceedDisabled(true);
         showHandover(APPROVE_TXN_ANIMATION, RiveStateMachineInput.START, 'Preparing');
@@ -173587,7 +173559,6 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
         approve,
         showHandover,
         checkProviderChain,
-        convertToNetworkChangeableProvider,
         getAllowance,
         execute,
         closeHandover,
@@ -173651,7 +173622,17 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
                                                 top: '-8px',
                                                 h: 'base.spacing.x5',
                                             },
-                                        } }), jsxs(Stack, { direction: "row", gap: "base.spacing.x6", sx: { py: 'base.spacing.x5', px: 'base.spacing.x7' }, alignItems: "center", children: [jsx(Stack, { direction: "row", sx: { w: 'base.spacing.x12' }, justifyContent: "center", children: jsx(FramedIcon, { icon: "Countdown", variant: "bold", size: "medium", circularFrame: true }) }), jsx(Body, { size: "small", sx: { flex: 1, c: 'base.color.text.body.secondary' }, children: formattedDuration }), routeFees] })] }), jsx(Button, { size: "large", onClick: handleTransaction, disabled: proceedDisabled, sx: { mt: 'auto', mb: 'base.spacing.x4', mx: 'base.spacing.x3' }, children: proceedDisabled ? 'Processing' : 'Proceed' })] })), !route && jsx(LoadingView, { loadingText: "Securing quote" })] }), jsx(RouteFees, { routeData: route, visible: showFeeBreakdown, onClose: () => setShowFeeBreakdown(false), totalAmount: totalFees, totalFiatAmount: totalFeesUsd })] }));
+                                        } }), jsxs(Stack, { direction: "row", gap: "base.spacing.x6", sx: { py: 'base.spacing.x5', px: 'base.spacing.x7' }, alignItems: "center", children: [jsx(Stack, { direction: "row", sx: { w: 'base.spacing.x12' }, justifyContent: "center", children: jsx(FramedIcon, { icon: "Countdown", variant: "bold", size: "medium", circularFrame: true }) }), jsx(Body, { size: "small", sx: { flex: 1, c: 'base.color.text.body.secondary' }, children: formattedDuration }), routeFees] })] }), jsx(Button, { size: "large", onClick: handleTransaction, disabled: proceedDisabled, sx: { mt: 'auto', mb: 'base.spacing.x4', mx: 'base.spacing.x3' }, children: proceedDisabled ? 'Processing' : 'Proceed' })] })), !route && !showAddressMissmatchDrawer && jsx(LoadingView, { loadingText: "Securing quote" })] }), jsx(RouteFees, { routeData: route, visible: showFeeBreakdown, onClose: () => setShowFeeBreakdown(false), totalAmount: totalFees, totalFiatAmount: totalFeesUsd }), jsx(AddressMissmatchDrawer, { visible: showAddressMissmatchDrawer, onClick: () => {
+                    setShowAddressMissmatchDrawer(false);
+                    viewDispatch({
+                        payload: {
+                            type: ViewActions.UPDATE_VIEW,
+                            view: {
+                                type: AddFundsWidgetViews.ADD_FUNDS,
+                            },
+                        },
+                    });
+                } })] }));
 }
 
 const fetchBalances = async (squid, chains, provider) => {
@@ -173730,6 +173711,7 @@ const useTokens = (checkout) => {
 
 function AddFundsWidget({ showOnrampOption = true, showSwapOption = true, showBridgeOption = true, toTokenAddress, toAmount, showBackButton, config, }) {
     const fetchingBalances = reactExports.useRef(false);
+    const { base: { colorMode } } = useTheme();
     const [viewState, viewDispatch] = reactExports.useReducer(viewReducer, {
         ...initialViewState,
         view: { type: AddFundsWidgetViews.ADD_FUNDS },
@@ -173751,6 +173733,11 @@ function AddFundsWidget({ showOnrampOption = true, showSwapOption = true, showBr
     const squidSdk = useSquid(checkout);
     const tokensResponse = useTokens(checkout);
     const { showErrorHandover } = useError(checkout.config.environment ?? Environment.SANDBOX);
+    reactExports.useEffect(() => {
+        if (config.environment !== Environment.PRODUCTION) {
+            showErrorHandover(AddFundsErrorTypes.ENVIRONMENT_ERROR);
+        }
+    }, [config]);
     reactExports.useEffect(() => {
         const isInvalidToTokenAddress = toTokenAddress && !isValidAddress(toTokenAddress);
         const isInvalidToAmount = toAmount && !amountInputValidation(toAmount);
@@ -173818,13 +173805,15 @@ function AddFundsWidget({ showOnrampOption = true, showSwapOption = true, showBr
             },
         });
     };
-    return (jsx(ViewContext.Provider, { value: viewReducerValues, children: jsx(AddFundsContext.Provider, { value: addFundsReducerValues, children: jsxs(Stack, { sx: { pos: 'relative' }, children: [jsx(CloudImage, { use: (jsx("img", { src: getRemoteImage(config.environment, '/add-funds-bg-texture.webp'), alt: "blurry bg texture" })), sx: {
+    return (jsx(ViewContext.Provider, { value: viewReducerValues, children: jsx(AddFundsContext.Provider, { value: addFundsReducerValues, children: jsxs(Stack, { sx: { pos: 'relative' }, children: [jsx(CloudImage, { use: (jsx("img", { src: getRemoteImage(config.environment, `/add-funds-bg-texture-${colorMode}.webp`), alt: "blurry bg texture" })), sx: {
                             pos: 'absolute',
                             h: '100%',
                             w: '100%',
                             objectFit: 'cover',
                             objectPosition: 'center',
-                        } }), viewState.view.type === AddFundsWidgetViews.ADD_FUNDS && (jsx(AddFunds, { config: config, checkout: checkout, toTokenAddress: toTokenAddress, toAmount: toAmount, showBackButton: showBackButton, showOnrampOption: showOnrampOption, showSwapOption: showSwapOption, showBridgeOption: showBridgeOption, onCloseButtonClick: () => sendAddFundsCloseEvent(eventTarget) })), viewState.view.type === AddFundsWidgetViews.REVIEW && (jsx(Review, { data: viewState.view.data, onCloseButtonClick: () => sendAddFundsCloseEvent(eventTarget), onBackButtonClick: () => {
+                        } }), viewState.view.type === AddFundsWidgetViews.ADD_FUNDS && (jsx(AddFunds, { config: config, checkout: checkout, toTokenAddress: toTokenAddress, toAmount: toAmount, showBackButton: showBackButton, showOnrampOption: showOnrampOption, showSwapOption: showSwapOption, showBridgeOption: showBridgeOption, onCloseButtonClick: () => sendAddFundsCloseEvent(eventTarget), onBackButtonClick: () => {
+                            orchestrationEvents.sendRequestGoBackEvent(eventTarget, IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT, {});
+                        } })), viewState.view.type === AddFundsWidgetViews.REVIEW && (jsx(Review, { data: viewState.view.data, onCloseButtonClick: () => sendAddFundsCloseEvent(eventTarget), onBackButtonClick: () => {
                             viewDispatch({
                                 payload: {
                                     type: ViewActions.GO_BACK,