@imtbl/sdk 1.63.0 → 1.64.0-alpha.2

package/dist/{blockchain_data-Dpv5muPl.js → blockchain_data-Nd9tDahm.js}

@@ -1,5 +1,5 @@
-import { A as APIError, B as BlockchainData } from './index-BI-lDUrN.js';
-import { i as index } from './index-B7ZGqefm.js';
+import { A as APIError, B as BlockchainData } from './index-ulndU_eA.js';
+import { i as index } from './index-B7Ry_G0i.js';
 
 var blockchain_data = /*#__PURE__*/Object.freeze({
 	__proto__: null,

package/dist/blockchain_data.js

@@ -1,6 +1,6 @@
-export { A as APIError, B as BlockchainData } from './index-BI-lDUrN.js';
-export { i as Types } from './index-B7ZGqefm.js';
-import './index-CK8NRXyO.js';
+export { A as APIError, B as BlockchainData } from './index-ulndU_eA.js';
+export { i as Types } from './index-B7Ry_G0i.js';
+import './index-DB4LpDqf.js';
 import 'axios';
 import 'lru-memorise';
 import 'global-const';

package/dist/browser/checkout/{AddTokensWidget-BfDY0LwB.js → AddTokensWidget-BQw-P60S.js}

@@ -1,9 +1,9 @@
-import { _ as _objectWithoutProperties, x as useTheme, y as useForwardLocalDomRef, z as useGetSubcomponentChild, A as useSplitApartChildrenAndSubComponents, r as reactExports, D as merge$2, F as useResizeObserver, q as jsxs, j as jsx, G as SmartClone, H as Box, J as isChildSubcomponent, K as flattenChildren, M as Body, N as useTheme$1, Q as Icon, R as ButtCon, T as Button, U as _defineProperty, X as isDualVariantIcon, Y as _slicedToArray, Z as isNumberWithinTotal, $ as getStartingSize, a0 as BaseClickable, a1 as ClassNames, a2 as _toConsumableArray, a3 as isError, a4 as Badge, a5 as FramedIcon, a6 as FramedImage, a7 as FramedLogo, a8 as Stack, a9 as hFlex, aa as usePrevious, ab as useBrowserEffect, ac as getHeadingTextStyles, ad as vFlex, ae as centerFlexChildren, af as FormControlLabel, ag as FormControlValidation, ah as FormControlCaption, I as IMTBLWidgetEvents, ai as AddTokensEventType, aj as getDefaultExportFromCjs, ak as commonjsGlobal, l as useTranslation, al as MenuItem, am as tokenValueFormat, an as DEFAULT_TOKEN_FORMATTING_DECIMALS, ao as BigNumber, ap as getRemoteVideo, aq as FramedVideo, ar as motion, as as listItemVariants, at as Divider, au as Fragment, av as listVariants, aw as useProvidersContext, ax as Drawer, ay as useAnalytics, az as UserJourney, aA as Heading, aB as WalletDrawer, aC as UnableToConnectDrawer, aD as ChangedYourMindDrawer, aE as WalletProviderRdns, aF as getProviderSlugFromRdns, aG as Web3Provider, aH as connectEIP6963Provider, aI as identifyUser, aJ as ConnectEIP6963ProviderError, aK as ProvidersContextActions, aL as ViewContext, V as ViewActions, o as SharedViews, k as ChainId, aM as commonjsRequire, aN as getRemoteImage, aO as useHandover, aP as HandoverTarget, aQ as EventTargetContext, aR as getRemoteRive, aS as Trans, aT as Link, aU as useInjectedProviders, aV as getDefaultTokenImage, aW as OverflowDrawerMenu, aX as SimpleLayout, aY as TokenFilterTypes, h as getL2ChainId, aZ as isNativeToken, a_ as getTokenImageByAddress, a$ as orchestrationEvents, b0 as requireSecp256k1$1, b1 as requireLib_commonjs, b2 as require$$0$2, b3 as bech32$2, b4 as bnExports$1, b5 as require$$0$3, b6 as getAugmentedNamespace, b7 as require$$0$4, b8 as minimalisticAssert, b9 as require$$2, ba as hash$6, bb as MaxUint256, bc as merge$3, bd as SvgIcon, be as WalletWarningHero, bf as Environment, bg as t, bh as PriceDisplay, L as LoadingView, bi as viewReducer, bj as initialViewState, bk as isValidAddress, bl as amountInputValidation, bm as CloudImage, E as ErrorView, bn as ServiceUnavailableErrorView, bo as ServiceType } from './index-Co93fBqn.js';
-import { f as formatUnits, p as parseUnits } from './index-DzrC5Kuy.js';
-import { E as EllipsizedText, C as Contract } from './EllipsizedText-_yDoxF8V.js';
-import { r as retry, T as TokenImage } from './retry-DqIpQ6wO.js';
-import { H as HandoverContent } from './HandoverContent-D0HXf455.js';
-import { F as FeesBreakdown } from './FeesBreakdown-CQVi4M-W.js';
+import { _ as _objectWithoutProperties, w as useTheme, x as useForwardLocalDomRef, y as useGetSubcomponentChild, z as useSplitApartChildrenAndSubComponents, r as reactExports, A as merge$2, D as useResizeObserver, p as jsxs, o as jsx, F as SmartClone, G as Box, H as isChildSubcomponent, J as flattenChildren, K as Body, M as useTheme$1, N as Icon, Q as ButtCon, R as Button, T as _defineProperty, U as isDualVariantIcon, X as _slicedToArray, Y as isNumberWithinTotal, Z as getStartingSize, $ as BaseClickable, a0 as ClassNames, a1 as _toConsumableArray, a2 as isError, a3 as Badge, a4 as FramedIcon, a5 as FramedImage, a6 as FramedLogo, a7 as Stack, a8 as hFlex, a9 as usePrevious, aa as useBrowserEffect, ab as getHeadingTextStyles, ac as vFlex, ad as centerFlexChildren, ae as FormControlLabel, af as FormControlValidation, ag as FormControlCaption, I as IMTBLWidgetEvents, ah as AddTokensEventType, ai as getDefaultExportFromCjs, aj as commonjsGlobal, u as useTranslation, ak as MenuItem, al as tokenValueFormat, am as DEFAULT_TOKEN_FORMATTING_DECIMALS, an as BigNumber, ao as getRemoteVideo, ap as FramedVideo, aq as motion, ar as listItemVariants, as as Divider, at as Fragment, au as listVariants, av as useProvidersContext, aw as Drawer, ax as useAnalytics, ay as UserJourney, az as isPassportProvider, aA as Heading, aB as WalletDrawer, aC as UnableToConnectDrawer, aD as ChangedYourMindDrawer, aE as WalletProviderRdns, aF as getProviderSlugFromRdns, aG as Web3Provider, aH as connectEIP6963Provider, aI as identifyUser, aJ as ConnectEIP6963ProviderError, aK as ProvidersContextActions, aL as ViewContext, V as ViewActions, m as SharedViews, j as ChainId, aM as commonjsRequire, aN as getRemoteImage, aO as useHandover, aP as HandoverTarget, aQ as EventTargetContext, aR as getRemoteRive, aS as Trans, aT as Link, aU as useInjectedProviders, aV as getDefaultTokenImage, aW as OverflowDrawerMenu, aX as SimpleLayout, aY as TokenFilterTypes, h as getL2ChainId, aZ as isNativeToken, a_ as getTokenImageByAddress, a$ as orchestrationEvents, b0 as requireSecp256k1$1, b1 as requireLib_commonjs, b2 as require$$0$2, b3 as bech32$2, b4 as bnExports$1, b5 as require$$0$3, b6 as getAugmentedNamespace, b7 as require$$0$4, b8 as minimalisticAssert, b9 as require$$2, ba as hash$6, bb as MaxUint256, bc as merge$3, bd as SvgIcon, be as WalletWarningHero, bf as Environment, bg as t, bh as PriceDisplay, L as LoadingView, bi as viewReducer, bj as initialViewState, bk as isValidAddress, bl as amountInputValidation, bm as CloudImage, E as ErrorView, bn as ServiceUnavailableErrorView, bo as ServiceType } from './index-CluzFQyb.js';
+import { f as formatUnits, p as parseUnits } from './index-D8cKqUD1.js';
+import { E as EllipsizedText, C as Contract } from './EllipsizedText-CpY-fwmV.js';
+import { r as retry, T as TokenImage } from './retry-DekCi5fl.js';
+import { H as HandoverContent } from './HandoverContent-BENLzW4n.js';
+import { F as FeesBreakdown } from './FeesBreakdown-C6qrQVEs.js';
 
 var bannerSx = {
   d: "flex",
@@ -1695,6 +1695,7 @@ function getRouteAndTokenBalances(routeData) {
 }
 
 function RouteOption({ routeData, onClick, chains, disabled = false, isFastest = false, size = 'small', rc = jsx("span", {}), selected = false, }) {
+    const { t } = useTranslation();
     const { fromToken } = routeData.amountData;
     const { estimate } = routeData.route.route;
     const chain = chains?.find((c) => c.id === fromToken.chainId);
@@ -1712,7 +1713,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, 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 ${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${routeBalanceUsd}` }), jsx(MenuItem.PriceDisplay, { price: fromAmount, children: jsx(MenuItem.PriceDisplay.Caption, { children: `${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${fromAmountUsd}` }) }), jsxs(MenuItem.BottomSlot, { children: [jsx(MenuItem.BottomSlot.Divider, {}), jsxs(Stack, { rc: jsx("span", {}), direction: "row", justifyContent: "space-between", sx: {
                             w: '100%',
                         }, children: [jsxs(Body, { sx: {
                                     ...hFlex,
@@ -1722,7 +1723,7 @@ function RouteOption({ routeData, onClick, chains, disabled = false, isFastest =
                                 }, size: "xSmall", children: [jsx(Icon, { icon: "Countdown", sx: {
                                             w: 'base.icon.size.200',
                                             fill: 'base.color.text.body.secondary',
-                                        }, variant: "bold" }), estimatedDurationFormatted] }), jsxs(Body, { size: "xSmall", sx: { ...hFlex, ...centerFlexChildren }, children: [isFastest && (jsx(Badge, { badgeContent: "Fastest", variant: "emphasis", sx: { mr: 'base.spacing.x2' } })), `Fee ~ USD $${getFormattedAmounts(totalFeesUsd)}`] })] })] })] }));
+                                        }, variant: "bold" }), estimatedDurationFormatted] }), jsxs(Body, { size: "xSmall", sx: { ...hFlex, ...centerFlexChildren }, children: [isFastest && (jsx(Badge, { badgeContent: "Fastest", variant: "emphasis", sx: { mr: 'base.spacing.x2' } })), `Fee ${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${getFormattedAmounts(totalFeesUsd)}`] })] })] })] }));
 }
 
 const defaultFiatOptions = [
@@ -2425,6 +2426,7 @@ const BASE_SLIPPAGE = 0.02;
 const useRoutes = () => {
     const latestRequestIdRef = reactExports.useRef(0);
     const { addTokensDispatch } = reactExports.useContext(AddTokensContext);
+    const { providersState: { toProvider, }, } = useProvidersContext();
     const { track } = useAnalytics();
     const setRoutes = (routes) => {
         addTokensDispatch({
@@ -2495,6 +2497,7 @@ const useRoutes = () => {
         toAddress,
         quoteOnly,
         enableBoost: true,
+        receiveGasOnDestination: !isPassportProvider(toProvider),
     }), {
         retryIntervalMs: 1000,
         retries: 5,
@@ -2618,6 +2621,7 @@ function SelectedRouteOptionContainer({ children, onClick, selected, }) {
         }, rc: jsx("span", { ...(onClick ? { onClick } : {}) }), children: children }));
 }
 function SelectedRouteOption({ checkout, routeData, chains, loading = false, withSelectedWallet = false, withSelectedToken = false, withSelectedAmount = false, insufficientBalance = false, showOnrampOption = false, onClick, }) {
+    const { t } = useTranslation();
     const { fromToken } = routeData?.amountData ?? {};
     const chain = chains?.find((c) => c.id === fromToken?.chainId);
     const { routeBalanceUsd, fromAmount, fromAmountUsd } = reactExports.useMemo(() => getRouteAndTokenBalances(routeData), [routeData]);
@@ -2654,7 +2658,7 @@ function SelectedRouteOption({ checkout, routeData, chains, loading = false, wit
         }
         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 }), 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}` }) })] })] }));
+    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 ${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${routeBalanceUsd}` })] }), jsx(MenuItem.PriceDisplay, { price: fromAmount, children: jsx(MenuItem.PriceDisplay.Caption, { children: `${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${fromAmountUsd}` }) })] })] }));
 }
 
 const disabledStyles = {
@@ -2871,7 +2875,7 @@ function PayWithWalletDrawer({ visible, onClose, onConnect, onPayWithCard, walle
                 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 }));
+    return (jsx(ConnectWalletDrawer, { heading: insufficientBalance ? 'Choose another option' : 'Send from', visible: visible, onClose: onClose, providerType: "from", walletOptions: walletOptions, disabledOptions: disabledOptions, bottomSlot: payWithCardItem, onConnect: handleOnConnect, onError: handleOnError }));
 }
 
 function convertToUsd(tokens, amount, token) {
@@ -5926,7 +5930,9 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
     const { addTokensState: { squid, chains, balances, tokens, selectedAmount, routes, selectedRouteData, selectedToken, isSwapAvailable, }, addTokensDispatch, } = reactExports.useContext(AddTokensContext);
     const { viewDispatch } = reactExports.useContext(ViewContext);
     const { track, page } = useAnalytics();
+    const { t } = useTranslation();
     const { eventTargetState: { eventTarget }, } = reactExports.useContext(EventTargetContext);
+    const [payWithCardClicked, setPayWithCardClicked] = reactExports.useState(false);
     const [showOptionsDrawer, setShowOptionsDrawer] = reactExports.useState(false);
     const [showPayWithDrawer, setShowPayWithDrawer] = reactExports.useState(false);
     const [showDeliverToDrawer, setShowDeliverToDrawer] = reactExports.useState(false);
@@ -6002,7 +6008,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
         setInputValue(value);
         setSelectedAmount(value);
     };
-    const { providersState: { fromProviderInfo, toProviderInfo, fromAddress, toAddress, lockedToProvider, }, } = useProvidersContext();
+    const { providersState: { fromProviderInfo, toProviderInfo, toProvider, fromAddress, toAddress, lockedToProvider, }, } = useProvidersContext();
     const { providers } = useInjectedProviders({ checkout });
     const walletOptions = reactExports.useMemo(() => providers
         // TODO: Check if must filter passport on L1
@@ -6086,9 +6092,9 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
                     });
                     setAllowedTokens(updatedTokens);
                     if (toTokenAddress) {
-                        const token = tokenResponse.tokens.find((t) => t.address?.toLowerCase() === toTokenAddress.toLowerCase());
-                        if (token) {
-                            setSelectedToken(token);
+                        const preselectedToken = updatedTokens.find((token) => token.address?.toLowerCase() === toTokenAddress.toLowerCase());
+                        if (preselectedToken) {
+                            setSelectedToken(preselectedToken);
                         }
                     }
                     addTokensDispatch({
@@ -6128,7 +6134,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
     const handleTokenChange = reactExports.useCallback((token) => {
         setSelectedToken(token);
     }, []);
-    const handleCardClick = () => {
+    const sendRequestOnRampEvent = () => {
         track({
             userJourney: UserJourney.ADD_TOKENS,
             screen: 'InputScreen',
@@ -6143,15 +6149,35 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
             tokenAddress: selectedToken?.address ?? '',
             amount: selectedAmount ?? '',
             showBackButton: true,
+            provider: toProvider,
         };
         orchestrationEvents.sendRequestOnrampEvent(eventTarget, IMTBLWidgetEvents.IMTBL_ADD_TOKENS_WIDGET_EVENT, data);
     };
+    const handleCardClick = () => {
+        setPayWithCardClicked(true);
+        if (!toProvider) {
+            setShowDeliverToDrawer(true);
+            return;
+        }
+        sendRequestOnRampEvent();
+    };
+    reactExports.useEffect(() => {
+        if (toProvider && payWithCardClicked) {
+            sendRequestOnRampEvent();
+        }
+    }, [toProvider]);
     const handleRouteClick = (route) => {
         setShowOptionsDrawer(false);
         setShowPayWithDrawer(false);
         setShowDeliverToDrawer(false);
         setSelectedRouteData(route);
     };
+    const handleDeliverToClose = (connectedToAddress) => {
+        if (!connectedToAddress) {
+            setPayWithCardClicked(false);
+        }
+        setShowDeliverToDrawer(false);
+    };
     const handleReviewClick = () => {
         if (!selectedRouteData || !selectedToken?.address)
             return;
@@ -6187,8 +6213,8 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
     };
     const shouldShowOnRampOption = reactExports.useMemo(() => {
         if (showOnrampOption && selectedToken) {
-            const token = onRampAllowedTokens.find((t) => t.address?.toLowerCase() === selectedToken.address?.toLowerCase());
-            return !!token;
+            const isAllowedToken = onRampAllowedTokens.find((token) => token.address?.toLowerCase() === selectedToken.address?.toLowerCase());
+            return !!isAllowedToken;
         }
         return false;
     }, [selectedToken, onRampAllowedTokens, showOnrampOption]);
@@ -6240,14 +6266,15 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
                                                 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-tokens-amount-input", type: "number", value: inputValue, onChange: (value) => handleOnAmountInputChange(value), placeholder: "0", maxTextSize: "xLarge" }), jsxs(HeroFormControl.Caption, { children: ["USD $", getFormattedNumberWithDecimalPlaces(selectedAmountUsd)] })] }))] }), 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-tokens-amount-input", type: "number", value: inputValue, onChange: (value) => handleOnAmountInputChange(value), placeholder: "0", maxTextSize: "xLarge" }), jsx(HeroFormControl.Caption, { children: `${t('views.ADD_TOKENS.fees.fiatPricePrefix')} 
+                $${getFormattedNumberWithDecimalPlaces(selectedAmountUsd)}` })] }))] }), jsxs(Stack, { testId: "bottomSection", sx: {
                         alignSelf: 'stretch',
                         p: 'base.spacing.x3',
                         pb: 'base.spacing.x5',
                         bg: 'base.color.neutral.800',
                         bradtl: 'base.borderRadius.x8',
                         bradtr: 'base.borderRadius.x8',
-                    }, gap: "base.spacing.x4", children: [jsxs(Stack, { gap: "0px", children: [jsxs(SelectedWallet, { label: "Pay with", providerInfo: {
+                    }, gap: "base.spacing.x4", children: [jsxs(Stack, { gap: "0px", children: [jsxs(SelectedWallet, { label: "Send from", providerInfo: {
                                         ...fromProviderInfo,
                                         address: fromAddress,
                                     }, onClick: (event) => {
@@ -6261,7 +6288,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
                                         } }) }), jsx(SelectedWallet, { label: "Deliver to", providerInfo: {
                                         ...toProviderInfo,
                                         address: toAddress,
-                                    }, onClick: () => setShowDeliverToDrawer(true), disabled: lockedToProvider })] }), jsx(Button, { testId: "add-tokens-button", size: "large", variant: readyToReview ? 'primary' : 'secondary', disabled: !readyToReview, onClick: handleReviewClick, sx: { opacity: readyToReview ? 1 : 0.5 }, children: "Review" }), jsx(SquidFooter, {}), 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 })] })] }) }));
+                                    }, onClick: () => setShowDeliverToDrawer(true), disabled: lockedToProvider })] }), jsx(Button, { testId: "add-tokens-button", size: "large", variant: readyToReview ? 'primary' : 'secondary', disabled: !readyToReview, onClick: handleReviewClick, sx: { opacity: readyToReview ? 1 : 0.5 }, children: "Review" }), jsx(SquidFooter, {}), 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: handleDeliverToClose }), jsx(OnboardingDrawer, { environment: checkout?.config.environment })] })] }) }));
 }
 
 var dist$2 = {};
@@ -173493,10 +173520,11 @@ function SquidIcon({ sx = {}, className, }) {
 }
 
 function RouteFees({ visible, onClose, routeData, totalAmount, totalFiatAmount, }) {
+    const { t } = useTranslation();
     const feeCosts = reactExports.useMemo(() => routeData?.route.estimate.feeCosts.map((fee) => ({
         label: fee.name,
         amount: getFormattedNumber(fee.amount, fee.token.decimals),
-        fiatAmount: `USD ≈ ${getFormattedAmounts(fee.amountUsd)}`,
+        fiatAmount: `${t('views.ADD_TOKENS.fees.fiatPricePrefix')}${getFormattedAmounts(fee.amountUsd)}`,
         token: {
             name: fee.token.name,
             symbol: fee.token.symbol,
@@ -173509,7 +173537,7 @@ function RouteFees({ visible, onClose, routeData, totalAmount, totalFiatAmount,
     const gasCosts = reactExports.useMemo(() => routeData?.route.estimate.gasCosts.map((fee) => ({
         label: 'Gas (transaction)',
         amount: getFormattedNumber(fee.amount, fee.token.decimals),
-        fiatAmount: `USD ≈ ${getFormattedAmounts(fee.amountUsd)}`,
+        fiatAmount: `${t('views.ADD_TOKENS.fees.fiatPricePrefix')}${getFormattedAmounts(fee.amountUsd)}`,
         token: {
             name: fee.token.name,
             symbol: fee.token.symbol,
@@ -173628,7 +173656,7 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
                     alignItems: 'center',
                     c: 'base.color.text.body.secondary',
                     cursor: 'pointer',
-                }, children: ["Included fees", ` USD $${getFormattedAmounts(totalFeesUsd)}`, jsx(Icon, { icon: "ChevronExpand", sx: { ml: 'base.spacing.x2', w: 'base.icon.size.200' } })] }));
+                }, children: ["Included fees", ` ${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${getFormattedAmounts(totalFeesUsd)}`, jsx(Icon, { icon: "ChevronExpand", sx: { ml: 'base.spacing.x2', w: 'base.icon.size.200' } })] }));
         }
         return (jsx(Body, { size: "small", sx: {
                 ...hFlex,
@@ -173708,7 +173736,7 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
     const formattedDuration = route
         ? getDurationFormatted(route.route.estimate.estimatedRouteDuration)
         : '';
-    return (jsxs(SimpleLayout, { header: (jsxs(Stack, { rc: jsx("header", {}), direction: "row", sx: {
+    return (jsxs(SimpleLayout, { containerSx: { bg: 'transparent' }, header: (jsxs(Stack, { rc: jsx("header", {}), direction: "row", sx: {
                 pt: 'base.spacing.x4',
                 px: 'base.spacing.x5',
                 h: 'base.spacing.x18',
@@ -173725,7 +173753,7 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
                                                                     fontSize: 'inherit',
                                                                     lineHeight: 'inherit',
                                                                     c: 'inherit',
-                                                                } })] })] }), jsx(PriceDisplay, { price: getFormattedNumber(route.route.estimate.fromAmount, route.route.estimate.fromToken.decimals), sx: { flexShrink: 0, alignSelf: 'flex-start' }, children: jsx(PriceDisplay.Caption, { size: "small", children: `USD $${route?.route.estimate.fromAmountUSD ?? ''}` }) })] }), jsx(Stack, { sx: {
+                                                                } })] })] }), jsx(PriceDisplay, { price: getFormattedNumber(route.route.estimate.fromAmount, route.route.estimate.fromToken.decimals), sx: { flexShrink: 0, alignSelf: 'flex-start' }, children: jsx(PriceDisplay.Caption, { size: "small", children: `${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${route?.route.estimate.fromAmountUSD ?? ''}` }) })] }), jsx(Stack, { sx: {
                                             pos: 'relative',
                                             w: 'base.spacing.x16',
                                             ml: 'base.spacing.x7',
@@ -173745,7 +173773,7 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
                                                 top: '-26px',
                                                 h: 'base.spacing.x10',
                                             },
-                                        } }), jsxs(Stack, { direction: "row", sx: { py: 'base.spacing.x5', px: 'base.spacing.x7' }, gap: "base.spacing.x6", alignItems: "center", children: [jsxs(Sticker, { position: { x: 'right', y: 'bottom' }, children: [jsx(FramedImage, { use: (jsx("img", { src: toChain?.nativeCurrency.iconUrl, alt: toChain?.nativeCurrency.name })), circularFrame: true, size: "large" }), jsx(Sticker.FramedImage, { use: jsx("img", { src: toChain?.iconUrl, alt: toChain?.name }), emphasized: true, sx: {
+                                        } }), jsxs(Stack, { direction: "row", sx: { py: 'base.spacing.x5', px: 'base.spacing.x7' }, gap: "base.spacing.x6", alignItems: "center", children: [jsxs(Sticker, { position: { x: 'right', y: 'bottom' }, children: [jsx(FramedImage, { use: (jsx("img", { src: route.route.estimate.toToken.logoURI, alt: route.route.estimate.toToken.name })), circularFrame: true, size: "large" }), jsx(Sticker.FramedImage, { use: jsx("img", { src: toChain?.iconUrl, alt: toChain?.name }), emphasized: true, sx: {
                                                             bottom: 'base.spacing.x2',
                                                             right: 'base.spacing.x2',
                                                         } })] }), jsxs(Stack, { sx: { flex: 1 }, gap: "0px", children: [jsxs(Body, { weight: "bold", children: ["Receive", ' ', route?.route.estimate.toToken.name] }), jsxs(Body, { size: "small", sx: { c: 'base.color.text.body.secondary' }, children: [toChain?.name, jsx(EllipsizedText, { text: toAddress ?? '', sx: {
@@ -173753,7 +173781,7 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
                                                                     fontSize: 'inherit',
                                                                     lineHeight: 'inherit',
                                                                     c: 'inherit',
-                                                                } })] })] }), jsx(PriceDisplay, { price: getFormattedNumber(route?.route.estimate.toAmount, route?.route.estimate.toToken.decimals), sx: { flexShrink: 0, alignSelf: 'flex-start' }, children: jsx(PriceDisplay.Caption, { size: "small", children: `USD $${route?.route.estimate.toAmountUSD ?? ''}` }) })] }), jsx(Stack, { sx: {
+                                                                } })] })] }), jsx(PriceDisplay, { price: getFormattedNumber(route?.route.estimate.toAmount, route?.route.estimate.toToken.decimals), sx: { flexShrink: 0, alignSelf: 'flex-start' }, children: jsx(PriceDisplay.Caption, { size: "small", children: `${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${route?.route.estimate.toAmountUSD ?? ''}` }) })] }), jsx(Stack, { sx: {
                                             pos: 'relative',
                                             w: 'base.spacing.x16',
                                             ml: 'base.spacing.x7',
@@ -173763,7 +173791,7 @@ 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: { mx: 'base.spacing.x3' }, children: proceedDisabled ? 'Processing' : 'Proceed' }), jsx(SquidFooter, {})] })), !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: () => {
+                                        } }), 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: { mx: 'base.spacing.x3' }, children: proceedDisabled ? 'Processing' : 'Proceed' }), jsx(SquidFooter, {})] })), !route && !showAddressMissmatchDrawer && (jsx(LoadingView, { loadingText: "Securing quote", containerSx: { bg: 'transparent' } }))] }), jsx(RouteFees, { routeData: route, visible: showFeeBreakdown, onClose: () => setShowFeeBreakdown(false), totalAmount: totalFees, totalFiatAmount: totalFeesUsd }), jsx(AddressMissmatchDrawer, { visible: showAddressMissmatchDrawer, onClick: () => {
                     setShowAddressMissmatchDrawer(false);
                     viewDispatch({
                         payload: {

package/dist/browser/checkout/{BridgeWidget-DreWq2OO.js → BridgeWidget-Cyu5i2LL.js}

@@ -1,11 +1,12 @@
-import { c1 as axios, c2 as CheckoutErrorType, c3 as IMMUTABLE_API_BASE_URL, r as reactExports, I as IMTBLWidgetEvents, B as BridgeEventType, q as jsxs, j as jsx, c4 as ShimmerBox, al as MenuItem, a8 as Stack, l as useTranslation, M as Body, T as Button, H as Box, c5 as PASSPORT_URL, aT as Link, c6 as getChainIdBySlug, c7 as getChainImage, c8 as networkName, a6 as FramedImage, Q as Icon, ay as useAnalytics, az as UserJourney, at as Divider, aL as ViewContext, au as Fragment, V as ViewActions, c9 as useWalletConnect, ca as isWalletConnectProvider, cb as Logo, cc as RawImage, cd as AXELAR_SCAN_URL, aZ as isNativeToken, a_ as getTokenImageByAddress, ce as getNativeSymbolByChainSlug, by as calculateCryptoToFiat, aQ as EventTargetContext, bI as isPassportProvider, i as getL1ChainId, aY as TokenFilterTypes, h as getL2ChainId, aE as WalletProviderRdns, aG as Web3Provider, aU as useInjectedProviders, bF as HeaderNavigation, bJ as FooterLogo, aB as WalletDrawer, aX as SimpleLayout, cf as getChainSlugById, cg as JsonRpcProvider, ch as DEFAULT_TRANSACTIONS_RETRY_POLICY, L as LoadingView, k as ChainId, ci as getChainNameById, x as useTheme, aA as Heading, cj as getWalletProviderNameByProvider, ck as isAddressSanctioned, o as SharedViews, cl as isMetaMaskProvider, cm as WalletProviderName, ax as Drawer, R as ButtCon, cn as ButtonNavigationStyles, a$ as orchestrationEvents, am as tokenValueFormat, co as formatZeroAmount, cp as NATIVE, bl as amountInputValidation, aN as getRemoteImage, bm as CloudImage, cq as ETH_TOKEN_SYMBOL, ao as BigNumber, bf as Environment, cr as GasEstimateType, cs as DEFAULT_TOKEN_DECIMALS, ct as DEFAULT_QUOTE_REFRESH_INTERVAL, cu as addChainChangedListener, cv as removeChainChangedListener, cw as IMX_TOKEN_SYMBOL, cx as dist, cy as CHECKOUT_CDN_BASE_URL, cz as heroBackGroundStyles, cA as heroImageStyles, a4 as Badge, cB as SimpleTextBody, cC as FooterButton, cD as getEthTokenImage, cE as WITHDRAWAL_CLAIM_GAS_LIMIT, aV as getDefaultTokenImage, bi as viewReducer, bj as initialViewState, cF as BridgeConfiguration, cG as ImmutableConfiguration, cH as TokenBridge, cI as StatusView, bK as StatusType, E as ErrorView, bn as ServiceUnavailableErrorView, bo as ServiceType, cJ as ETH_SEPOLIA_TO_ZKEVM_TESTNET, cK as ETH_SEPOLIA_TO_ZKEVM_DEVNET, cL as ETH_MAINNET_TO_ZKEVM_MAINNET } from './index-Co93fBqn.js';
-import { B as BridgeWidgetViews, C as CryptoFiatContext, a as CryptoFiatActions, T as TopUpView, c as CryptoFiatProvider } from './TopUpView-Nbu5J6zy.js';
-import { T as TokenImage, r as retry } from './retry-DqIpQ6wO.js';
-import { E as EllipsizedText, C as Contract } from './EllipsizedText-_yDoxF8V.js';
-import { A as Accordion, S as SelectForm, T as TextInputForm, a as TransactionRejected, g as getAllowedBalances, F as Fees, N as NetworkSwitchDrawer, W as WalletApproveHero } from './WalletApproveHero-Cc6p3CkR.js';
-import { f as formatUnits, p as parseUnits } from './index-DzrC5Kuy.js';
-import { u as useInterval } from './useInterval-D42dwhRA.js';
-import './FeesBreakdown-CQVi4M-W.js';
+import { c0 as axios, c1 as CheckoutErrorType, c2 as IMMUTABLE_API_BASE_URL, r as reactExports, I as IMTBLWidgetEvents, B as BridgeEventType, p as jsxs, o as jsx, c3 as ShimmerBox, ak as MenuItem, a7 as Stack, u as useTranslation, K as Body, R as Button, G as Box, c4 as PASSPORT_URL, aT as Link, c5 as getChainIdBySlug, c6 as getChainImage, c7 as networkName, a5 as FramedImage, N as Icon, ax as useAnalytics, ay as UserJourney, as as Divider, aL as ViewContext, at as Fragment, V as ViewActions, c8 as useWalletConnect, c9 as isWalletConnectProvider, ca as Logo, cb as RawImage, cc as AXELAR_SCAN_URL, aZ as isNativeToken, a_ as getTokenImageByAddress, cd as getNativeSymbolByChainSlug, by as calculateCryptoToFiat, aQ as EventTargetContext, az as isPassportProvider, i as getL1ChainId, aY as TokenFilterTypes, h as getL2ChainId, aE as WalletProviderRdns, aG as Web3Provider, aU as useInjectedProviders, bF as HeaderNavigation, bI as FooterLogo, aB as WalletDrawer, aX as SimpleLayout, ce as getChainSlugById, cf as JsonRpcProvider, cg as DEFAULT_TRANSACTIONS_RETRY_POLICY, L as LoadingView, j as ChainId, ch as getChainNameById, w as useTheme, aA as Heading, ci as getWalletProviderNameByProvider, cj as isAddressSanctioned, m as SharedViews, ck as isMetaMaskProvider, cl as WalletProviderName, aw as Drawer, Q as ButtCon, cm as ButtonNavigationStyles, a$ as orchestrationEvents, al as tokenValueFormat, cn as formatZeroAmount, co as NATIVE, bl as amountInputValidation, aN as getRemoteImage, bm as CloudImage, cp as ETH_TOKEN_SYMBOL, an as BigNumber, bf as Environment, cq as GasEstimateType, cr as DEFAULT_TOKEN_DECIMALS, cs as DEFAULT_QUOTE_REFRESH_INTERVAL, ct as addChainChangedListener, cu as removeChainChangedListener, cv as IMX_TOKEN_SYMBOL, cw as dist, cx as CHECKOUT_CDN_BASE_URL, cy as heroBackGroundStyles, cz as heroImageStyles, a3 as Badge, cA as SimpleTextBody, cB as FooterButton, cC as getEthTokenImage, cD as WITHDRAWAL_CLAIM_GAS_LIMIT, aV as getDefaultTokenImage, bi as viewReducer, bj as initialViewState, cE as BridgeConfiguration, cF as ImmutableConfiguration, cG as TokenBridge, cH as StatusView, bJ as StatusType, E as ErrorView, bn as ServiceUnavailableErrorView, bo as ServiceType, cI as ETH_SEPOLIA_TO_ZKEVM_TESTNET, cJ as ETH_SEPOLIA_TO_ZKEVM_DEVNET, cK as ETH_MAINNET_TO_ZKEVM_MAINNET } from './index-CluzFQyb.js';
+import { C as CryptoFiatContext, a as CryptoFiatActions, b as CryptoFiatProvider } from './CryptoFiatProvider-3fUUkERi.js';
+import { T as TokenImage, r as retry } from './retry-DekCi5fl.js';
+import { E as EllipsizedText, C as Contract } from './EllipsizedText-CpY-fwmV.js';
+import { A as Accordion, S as SelectForm, T as TextInputForm, a as TransactionRejected, g as getAllowedBalances, F as Fees, N as NetworkSwitchDrawer, W as WalletApproveHero } from './WalletApproveHero-B5TXSbim.js';
+import { B as BridgeWidgetViews, T as TopUpView } from './TopUpView-3d5yxKuq.js';
+import { f as formatUnits, p as parseUnits } from './index-D8cKqUD1.js';
+import { u as useInterval } from './useInterval-BstnDnYa.js';
+import './FeesBreakdown-C6qrQVEs.js';
 
 // This module is intended to unwrap Axios default export as named.
 // Keep top-level export same with static properties

package/dist/browser/checkout/{CommerceWidget-BFEo_z63.js → CommerceWidget-C5vGYGbd.js}

@@ -1,72 +1,20 @@
-import { r as reactExports, u as useConnectLoaderState, j as jsx, I as IMTBLWidgetEvents, C as CommerceFlowType, P as ProviderEventType, a as CommerceEventType, b as ConnectEventType, c as CommerceFailureEventType, d as CommerceSuccessEventType, W as WalletEventType, e as CommerceUserActionEventType, S as SwapEventType, B as BridgeEventType, O as OnRampEventType, f as SaleEventType, g as OrchestrationEventType, V as ViewActions, h as getL2ChainId, i as getL1ChainId, k as ChainId, l as useTranslation, m as useViewState, n as useEventTargetState, o as SharedViews, p as commerceFlows, q as jsxs, L as LoadingView, E as ErrorView, s as ConnectWidget, t as ProvidersContextProvider, v as ConnectLoader, w as ViewContextProvider } from './index-Co93fBqn.js';
-import SwapWidget from './SwapWidget-Dm2cQUYh.js';
-import BridgeWidget from './BridgeWidget-DreWq2OO.js';
-import { O as OnRampWidget } from './OnRampWidget-BpRLbHli.js';
-import WalletWidget from './WalletWidget-C25SCVnz.js';
-import SaleWidget from './SaleWidget-C-ATgwRu.js';
-import AddTokensWidget from './AddTokensWidget-BfDY0LwB.js';
-import './WalletApproveHero-Cc6p3CkR.js';
-import './retry-DqIpQ6wO.js';
-import './FeesBreakdown-CQVi4M-W.js';
-import './TopUpView-Nbu5J6zy.js';
-import './index-DzrC5Kuy.js';
-import './useInterval-D42dwhRA.js';
-import './SpendingCapHero-DLdYNa0u.js';
-import './EllipsizedText-_yDoxF8V.js';
-import './HandoverContent-D0HXf455.js';
-
-const initialCommerceState = {
-    checkout: undefined,
-    provider: undefined,
-    passport: undefined,
-};
-var CommerceActions;
-(function (CommerceActions) {
-    CommerceActions["SET_CHECKOUT"] = "SET_CHECKOUT";
-    CommerceActions["SET_PROVIDER"] = "SET_PROVIDER";
-    CommerceActions["SET_PASSPORT"] = "SET_PASSPORT";
-})(CommerceActions || (CommerceActions = {}));
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const CommerceContext = reactExports.createContext({
-    commerceState: initialCommerceState,
-    commerceDispatch: () => { },
-});
-CommerceContext.displayName = 'CommerceContext'; // help with debugging Context in browser
-const commerceReducer = (state, action) => {
-    switch (action.payload.type) {
-        case CommerceActions.SET_CHECKOUT:
-            return {
-                ...state,
-                checkout: action.payload.checkout,
-            };
-        case CommerceActions.SET_PROVIDER:
-            return {
-                ...state,
-                provider: action.payload.provider,
-            };
-        case CommerceActions.SET_PASSPORT:
-            return {
-                ...state,
-                passport: action.payload.passport,
-            };
-        default:
-            return state;
-    }
-};
-
-const useCommerceWidgetState = () => {
-    const [viewState, viewDispatch] = reactExports.useReducer(commerceReducer, initialCommerceState);
-    return [viewState, viewDispatch];
-};
-function CommerceWidgetContextProvicer({ children, }) {
-    const [{ checkout, provider }] = useConnectLoaderState();
-    const [commerceState, commerceDispatch] = useCommerceWidgetState();
-    const values = reactExports.useMemo(() => ({
-        commerceState: { ...commerceState, checkout, provider },
-        commerceDispatch,
-    }), [commerceState, commerceDispatch, checkout, provider]);
-    return (jsx(CommerceContext.Provider, { value: values, children: children }));
-}
+import { I as IMTBLWidgetEvents, C as CommerceFlowType, P as ProviderEventType, a as CommerceEventType, b as ConnectEventType, c as CommerceFailureEventType, d as CommerceSuccessEventType, W as WalletEventType, e as CommerceUserActionEventType, S as SwapEventType, B as BridgeEventType, O as OnRampEventType, f as SaleEventType, g as OrchestrationEventType, r as reactExports, V as ViewActions, h as getL2ChainId, i as getL1ChainId, j as ChainId, u as useTranslation, k as useViewState, l as useEventTargetState, m as SharedViews, n as commerceFlows, o as jsx, p as jsxs, L as LoadingView, E as ErrorView, q as ConnectWidget, s as ProvidersContextProvider, t as ConnectLoader, v as ViewContextProvider } from './index-CluzFQyb.js';
+import SwapWidget from './SwapWidget-DSQPb69U.js';
+import BridgeWidget from './BridgeWidget-Cyu5i2LL.js';
+import { O as OnRampWidget } from './OnRampWidget-JkxC8nMN.js';
+import WalletWidget from './WalletWidget-C-_77Eb9.js';
+import SaleWidget from './SaleWidget-aIL3dbMH.js';
+import AddTokensWidget from './AddTokensWidget-BQw-P60S.js';
+import './WalletApproveHero-B5TXSbim.js';
+import './retry-DekCi5fl.js';
+import './FeesBreakdown-C6qrQVEs.js';
+import './CryptoFiatProvider-3fUUkERi.js';
+import './useInterval-BstnDnYa.js';
+import './index-D8cKqUD1.js';
+import './TopUpView-3d5yxKuq.js';
+import './SpendingCapHero-C_loMgYA.js';
+import './EllipsizedText-CpY-fwmV.js';
+import './HandoverContent-BENLzW4n.js';
 
 const sendCheckoutEvent = (eventTarget, detail) => {
     const event = new CustomEvent(IMTBLWidgetEvents.IMTBL_COMMERCE_WIDGET_EVENT, { detail });
@@ -424,7 +372,7 @@ const widgetEvents = [
 /**
  * Subscribe and Handle widget events
  */
-function useWidgetEvents(eventTarget, viewState) {
+function useWidgetEvents(eventTarget, viewState, handleProviderUpdated) {
     const [{ history }, viewDispatch] = viewState;
     /**
      * Change view as per orchestration event requests
@@ -440,6 +388,12 @@ function useWidgetEvents(eventTarget, viewState) {
             });
             return;
         }
+        if (type === OrchestrationEventType.REQUEST_ONRAMP) {
+            const onRampEvent = data;
+            if (onRampEvent.provider) {
+                handleProviderUpdated(onRampEvent.provider);
+            }
+        }
         const flow = getViewFromOrchestrationEventType(type);
         if (!flow)
             return;
@@ -526,13 +480,56 @@ function getConnectLoaderParams(view, checkout, web3Provider) {
     }
 }
 
+const initialCommerceState = {
+    checkout: undefined,
+    provider: undefined,
+    passport: undefined,
+};
+var CommerceActions;
+(function (CommerceActions) {
+    CommerceActions["SET_CHECKOUT"] = "SET_CHECKOUT";
+    CommerceActions["SET_PROVIDER"] = "SET_PROVIDER";
+    CommerceActions["SET_PASSPORT"] = "SET_PASSPORT";
+})(CommerceActions || (CommerceActions = {}));
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const CommerceContext = reactExports.createContext({
+    commerceState: initialCommerceState,
+    commerceDispatch: () => { },
+});
+CommerceContext.displayName = 'CommerceContext'; // help with debugging Context in browser
+const commerceReducer = (state, action) => {
+    switch (action.payload.type) {
+        case CommerceActions.SET_CHECKOUT:
+            return {
+                ...state,
+                checkout: action.payload.checkout,
+            };
+        case CommerceActions.SET_PROVIDER:
+            return {
+                ...state,
+                provider: action.payload.provider,
+            };
+        case CommerceActions.SET_PASSPORT:
+            return {
+                ...state,
+                passport: action.payload.passport,
+            };
+        default:
+            return state;
+    }
+};
+
 function CommerceWidget(props) {
     const { flowParams, flowConfig, widgetsConfig, checkout, web3Provider, } = props;
     const { t } = useTranslation();
     const viewState = useViewState();
     const [{ view, history }, viewDispatch] = viewState;
     const [{ eventTarget }] = useEventTargetState();
-    const connectLoaderParams = reactExports.useMemo(() => getConnectLoaderParams(view, checkout, web3Provider), [view, checkout, web3Provider]);
+    const [commerceState, commerceDispatch] = reactExports.useReducer(commerceReducer, initialCommerceState);
+    const commerceReducerValues = reactExports.useMemo(() => ({ commerceState, commerceDispatch }), [commerceState, commerceDispatch]);
+    const { provider } = commerceState;
+    const connectLoaderParams = reactExports.useMemo(() => getConnectLoaderParams(view, checkout, provider || web3Provider), [view, checkout, provider, web3Provider]);
+    const connectLoaderSuccessEvent = flowParams.flow === CommerceFlowType.ADD_TOKENS ? () => { } : undefined;
     const goToPreviousView = reactExports.useCallback(() => {
         const sharedViews = [
             SharedViews.LOADING_VIEW,
@@ -554,10 +551,29 @@ function CommerceWidget(props) {
             });
         }
     }, [history]);
+    const handleProviderUpdated = reactExports.useMemo(() => (updatedProvider) => {
+        commerceDispatch({
+            payload: {
+                type: CommerceActions.SET_PROVIDER,
+                provider: updatedProvider,
+            },
+        });
+    }, [commerceDispatch]);
     /**
      * Subscribe and Handle widget events
      */
-    useWidgetEvents(eventTarget, viewState);
+    useWidgetEvents(eventTarget, viewState, handleProviderUpdated);
+    reactExports.useEffect(() => {
+        if (!web3Provider) {
+            return;
+        }
+        commerceDispatch({
+            payload: {
+                type: CommerceActions.SET_PROVIDER,
+                provider: web3Provider,
+            },
+        });
+    }, [commerceDispatch, web3Provider]);
     /**
      * Mount the view according to set flow in params
      */
@@ -609,7 +625,7 @@ function CommerceWidget(props) {
      * Show back button
      */
     const showBackButton = !!view.data?.showBackButton;
-    return (jsx(ViewContextProvider, { children: jsxs(CommerceWidgetContextProvicer, { children: [view.type === SharedViews.LOADING_VIEW && (jsx(LoadingView, { loadingText: t('views.LOADING_VIEW.text') })), view.type === SharedViews.ERROR_VIEW && (jsx(ErrorView, { onCloseClick: () => {
+    return (jsx(ViewContextProvider, { children: jsxs(CommerceContext.Provider, { value: commerceReducerValues, children: [view.type === SharedViews.LOADING_VIEW && (jsx(LoadingView, { loadingText: t('views.LOADING_VIEW.text') })), view.type === SharedViews.ERROR_VIEW && (jsx(ErrorView, { onCloseClick: () => {
                         sendCheckoutEvent(eventTarget, {
                             type: CommerceEventType.CLOSE,
                             data: {},
@@ -621,7 +637,7 @@ function CommerceWidget(props) {
                             type: CommerceEventType.CLOSE,
                             data: {},
                         });
-                    }, ...(view.data.params || {}) })), view.type === CommerceFlowType.BRIDGE && (jsx(BridgeWidget, { config: widgetsConfig, checkout: checkout, web3Provider: web3Provider, showBackButton: showBackButton, ...(view.data.params || {}) })), shouldWrapWithProvidersContext && (jsx(ProvidersContextProvider, { initialState: { checkout }, children: view.type === CommerceFlowType.ADD_TOKENS && (jsx(AddTokensWidget, { config: widgetsConfig, ...(view.data.params || {}), ...(view.data.config || {}), showBackButton: showBackButton })) })), shouldWrapWithConnectLoader && (jsx(ConnectLoader, { widgetConfig: widgetsConfig, params: connectLoaderParams, closeEvent: () => {
+                    }, ...(view.data.params || {}) })), view.type === CommerceFlowType.BRIDGE && (jsx(BridgeWidget, { config: widgetsConfig, checkout: checkout, web3Provider: web3Provider, showBackButton: showBackButton, ...(view.data.params || {}) })), shouldWrapWithProvidersContext && (jsx(ProvidersContextProvider, { initialState: { checkout }, children: view.type === CommerceFlowType.ADD_TOKENS && (jsx(AddTokensWidget, { config: widgetsConfig, ...(view.data.params || {}), ...(view.data.config || {}), showBackButton: showBackButton })) })), shouldWrapWithConnectLoader && (jsx(ConnectLoader, { widgetConfig: widgetsConfig, params: connectLoaderParams, successEvent: connectLoaderSuccessEvent, closeEvent: () => {
                         sendCheckoutEvent(eventTarget, {
                             type: CommerceEventType.CLOSE,
                             data: {},