@imtbl/sdk 1.47.10-alpha.5 → 1.48.0-alpha

package/dist/browser/checkout/{SwapWidget-DRFyJjEa.js → SwapWidget-jOf_i-tX.js}

@@ -1,8 +1,8 @@
-import { l as useTranslation, b6 as WidgetTheme, b7 as getRemoteImage, n as jsxs, b8 as quickswapFooterStyles, a as Box, b9 as quickswapFooterLogoStyles, j as jsx, o as Body, ba as quickswapFooterDisclaimerTextStyles, r as reactExports, as as BigNumber, V as ViewContext, q as ConnectLoaderContext, t as useAnalytics, d as Button, U as UserJourney, x as getL2ChainId, p as ViewActions, w as isPassportProvider, J as CheckoutErrorType, K as SharedViews, bb as getImxTokenImage, a7 as Drawer, bc as CloudImage, a6 as Heading, bd as Logo, be as Icon, X as calculateCryptoToFiat, A as tokenValueFormat, aU as isGasFree, v as formatZeroAmount, bf as getDefaultTokenImage, G as isNativeToken, bg as NATIVE, bh as DEFAULT_QUOTE_REFRESH_INTERVAL, bi as amountInputValidation, bj as Tooltip, z as Environment, aC as Fragment, bk as ESTIMATE_DEBOUNCE, bl as DEFAULT_TOKEN_VALIDATION_DECIMALS, bm as DEFAULT_TOKEN_DECIMALS, E as EventTargetContext, Y as HeaderNavigation, bn as sendSwapWidgetCloseEvent, a2 as SimpleLayout, bo as IMX_TOKEN_SYMBOL, aj as LoadingView, ae as SimpleTextBody, bp as FooterButton, ah as viewReducer, ai as initialViewState, T as TokenFilterTypes, Q as DEFAULT_BALANCE_RETRY_POLICY, bq as Exchange, br as ImmutableConfiguration, bs as StatusView, bt as sendSwapSuccessEvent, aK as StatusType, bu as sendSwapFailedEvent, bv as sendSwapRejectedEvent, ak as ErrorView, I as IMTBLWidgetEvents } from './index-B4PflMJG.js';
-import { S as SelectForm, T as TextInputForm, a as TransactionRejected, F as Fees, N as NetworkSwitchDrawer, W as WalletApproveHero, g as getAllowedBalances } from './balance-Dpnr5wqM.js';
-import { p as parseUnits, S as SwapWidgetViews, f as formatUnits, C as CryptoFiatContext, a as CryptoFiatActions, c as parseEther, T as TopUpView, b as CryptoFiatProvider } from './TopUpView-CKizPnH0.js';
-import { u as useInterval } from './retry-C8XS-Xeo.js';
-import { S as SpendingCapHero } from './SpendingCapHero-D5yi8Bqy.js';
+import { l as useTranslation, b5 as WidgetTheme, b6 as getRemoteImage, n as jsxs, b7 as quickswapFooterStyles, a as Box, b8 as quickswapFooterLogoStyles, j as jsx, o as Body, b9 as quickswapFooterDisclaimerTextStyles, r as reactExports, d as Button, ba as getImxTokenImage, a7 as Drawer, bb as CloudImage, a6 as Heading, bc as Logo, bd as Icon, ar as BigNumber, X as calculateCryptoToFiat, A as tokenValueFormat, aT as isGasFree, v as formatZeroAmount, q as ConnectLoaderContext, be as getDefaultTokenImage, G as isNativeToken, bf as NATIVE, V as ViewContext, t as useAnalytics, bg as DEFAULT_QUOTE_REFRESH_INTERVAL, w as isPassportProvider, bh as amountInputValidation, bi as Tooltip, U as UserJourney, z as Environment, p as ViewActions, K as SharedViews, x as getL2ChainId, aB as Fragment, bj as ESTIMATE_DEBOUNCE, bk as DEFAULT_TOKEN_VALIDATION_DECIMALS, bl as DEFAULT_TOKEN_DECIMALS, E as EventTargetContext, bm as sendSwapWidgetCloseEvent, Y as HeaderNavigation, aj as LoadingView, a2 as SimpleLayout, bn as IMX_TOKEN_SYMBOL, J as CheckoutErrorType, ae as SimpleTextBody, bo as FooterButton, ah as viewReducer, ai as initialViewState, T as TokenFilterTypes, Q as DEFAULT_BALANCE_RETRY_POLICY, bp as SwapDirection$1, bq as StatusView, br as sendSwapSuccessEvent, aJ as StatusType, bs as sendSwapFailedEvent, bt as sendSwapRejectedEvent, ak as ErrorView, I as IMTBLWidgetEvents } from './index-B98fdYSj.js';
+import { S as SelectForm, T as TextInputForm, F as Fees, a as TransactionRejected, N as NetworkSwitchDrawer, W as WalletApproveHero, g as getAllowedBalances } from './balance-CxYIjdr3.js';
+import { f as formatUnits, p as parseUnits, C as CryptoFiatContext, a as CryptoFiatActions, c as parseEther, S as SwapWidgetViews, T as TopUpView, b as CryptoFiatProvider } from './TopUpView-CCWR_Ywt.js';
+import { u as useInterval } from './retry-B5JRrQBT.js';
+import { S as SpendingCapHero } from './SpendingCapHero-CFYmjAC9.js';
 
 function QuickswapFooter({ theme, environment }) {
     const { t } = useTranslation();
@@ -19,6 +19,7 @@ const initialSwapState = {
     tokenBalances: [],
     supportedTopUps: null,
     allowedTokens: [],
+    autoProceed: false,
 };
 var SwapActions;
 (function (SwapActions) {
@@ -28,6 +29,7 @@ var SwapActions;
     SwapActions["SET_SUPPORTED_TOP_UPS"] = "SET_SUPPORTED_TOP_UPS";
     SwapActions["SET_TOKEN_BALANCES"] = "SET_TOKEN_BALANCES";
     SwapActions["SET_ALLOWED_TOKENS"] = "SET_ALLOWED_TOKENS";
+    SwapActions["SET_AUTO_PROCEED"] = "SET_AUTO_PROCEED";
 })(SwapActions || (SwapActions = {}));
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const SwapContext = reactExports.createContext({
@@ -71,24 +73,17 @@ const swapReducer = (state, action) => {
                 ...state,
                 allowedTokens: action.payload.allowedTokens,
             };
+        case SwapActions.SET_AUTO_PROCEED:
+            return {
+                ...state,
+                autoProceed: action.payload.autoProceed,
+                direction: action.payload.direction,
+            };
         default:
             return state;
     }
 };
 
-const fromAmountIn = async (exchange, provider, fromToken, fromAmount, toToken) => {
-    const address = await provider.getSigner().getAddress();
-    return exchange.getUnsignedSwapTxFromAmountIn(address, fromToken.address, toToken.address, BigNumber.from(parseUnits(fromAmount, fromToken.decimals)));
-};
-const fromAmountOut = async (exchange, provider, toToken, toAmount, fromToken) => {
-    const address = await provider.getSigner().getAddress();
-    return exchange.getUnsignedSwapTxFromAmountOut(address, fromToken.address, toToken.address, BigNumber.from(parseUnits(toAmount, toToken.decimals)));
-};
-const quotesProcessor = {
-    fromAmountIn,
-    fromAmountOut,
-};
-
 const selectInputBoxStyle = {
     display: 'flex',
     flexDirection: 'row',
@@ -139,153 +134,15 @@ const swapButtonIconLoadingStyle = {
     width: 'base.icon.size.400',
 };
 
-function SwapButton({ loading, updateLoading, validator, transaction, data, insufficientFundsForGas, openNotEnoughImxDrawer, openNetworkSwitchDrawer, }) {
+function SwapButton({ loading, validator, sendTransaction, }) {
     const { t } = useTranslation();
-    const [showTxnRejectedState, setShowTxnRejectedState] = reactExports.useState(false);
-    const { viewDispatch } = reactExports.useContext(ViewContext);
-    const { connectLoaderState } = reactExports.useContext(ConnectLoaderContext);
-    const { checkout, provider } = connectLoaderState;
-    const { track } = useAnalytics();
-    const sendTransaction = async () => {
-        const isValid = validator();
-        // Tracking swap from data here and is valid or not to understand behaviour
-        track({
-            userJourney: UserJourney.SWAP,
-            screen: 'SwapCoins',
-            control: 'Swap',
-            controlType: 'Button',
-            extras: {
-                swapFromAddress: data?.fromTokenAddress,
-                swapFromAmount: data?.fromAmount,
-                swapFromTokenSymbol: data?.fromTokenSymbol,
-                swapToAddress: data?.toTokenAddress,
-                swapToAmount: data?.toAmount,
-                swapToTokenSymbol: data?.toTokenSymbol,
-                isSwapFormValid: isValid,
-                hasFundsForGas: !insufficientFundsForGas,
-            },
-        });
-        if (!isValid)
-            return;
-        if (!checkout || !provider || !transaction)
-            return;
-        if (insufficientFundsForGas) {
-            openNotEnoughImxDrawer();
-            return;
-        }
-        try {
-            // check for switch network here
-            const currentChainId = await provider.provider.request({ method: 'eth_chainId', params: [] });
-            // eslint-disable-next-line radix
-            const parsedChainId = parseInt(currentChainId.toString());
-            if (parsedChainId !== getL2ChainId(checkout.config)) {
-                openNetworkSwitchDrawer();
-                return;
-            }
-        }
-        catch (err) {
-            // eslint-disable-next-line no-console
-            console.error('Current network check failed', err);
-        }
-        if (!transaction)
-            return;
-        try {
-            updateLoading(true);
-            const prefilledSwapData = {
-                fromAmount: data?.fromAmount || '',
-                fromTokenAddress: data?.fromTokenAddress || '',
-                toTokenAddress: data?.toTokenAddress || '',
-                toAmount: data?.toAmount || '',
-            };
-            if (transaction.approval) {
-                // If we need to approve a spending limit first
-                // send user to Approve ERC20 Onbaording flow
-                viewDispatch({
-                    payload: {
-                        type: ViewActions.UPDATE_VIEW,
-                        view: {
-                            type: SwapWidgetViews.APPROVE_ERC20,
-                            data: {
-                                approveTransaction: transaction.approval.transaction,
-                                transaction: transaction.swap.transaction,
-                                info: transaction.quote,
-                                swapFormInfo: prefilledSwapData,
-                            },
-                        },
-                    },
-                });
-                return;
-            }
-            const txn = await checkout.sendTransaction({
-                provider,
-                transaction: {
-                    ...transaction.swap.transaction,
-                    gasPrice: (isPassportProvider(provider) ? BigNumber.from(0) : undefined),
-                },
-            });
-            viewDispatch({
-                payload: {
-                    type: ViewActions.UPDATE_VIEW,
-                    view: {
-                        type: SwapWidgetViews.IN_PROGRESS,
-                        data: {
-                            transactionResponse: txn.transactionResponse,
-                            swapForm: prefilledSwapData,
-                        },
-                    },
-                },
-            });
-        }
-        catch (err) {
-            // eslint-disable-next-line no-console
-            console.error(err);
-            updateLoading(false);
-            if (err.type === CheckoutErrorType.USER_REJECTED_REQUEST_ERROR) {
-                setShowTxnRejectedState(true);
-                return;
-            }
-            if (err.type === CheckoutErrorType.UNPREDICTABLE_GAS_LIMIT) {
-                viewDispatch({
-                    payload: {
-                        type: ViewActions.UPDATE_VIEW,
-                        view: {
-                            type: SwapWidgetViews.PRICE_SURGE,
-                            data: data,
-                        },
-                    },
-                });
-                return;
-            }
-            if (err.type === CheckoutErrorType.TRANSACTION_FAILED
-                || err.type === CheckoutErrorType.INSUFFICIENT_FUNDS
-                || (err.receipt && err.receipt.status === 0)) {
-                viewDispatch({
-                    payload: {
-                        type: ViewActions.UPDATE_VIEW,
-                        view: {
-                            type: SwapWidgetViews.FAIL,
-                            reason: 'Transaction failed',
-                            data: data,
-                        },
-                    },
-                });
-                return;
-            }
-            viewDispatch({
-                payload: {
-                    type: ViewActions.UPDATE_VIEW,
-                    view: {
-                        type: SharedViews.ERROR_VIEW,
-                        error: err,
-                    },
-                },
-            });
+    const handleClick = async () => {
+        const canSwap = validator();
+        if (canSwap) {
+            await sendTransaction();
         }
     };
-    return (jsxs(Box, { sx: swapButtonBoxStyle, children: [jsx(Button, { testId: "swap-button", disabled: loading, variant: "primary", onClick: sendTransaction, size: "large", children: loading ? (jsx(Button.Icon, { icon: "Loading", sx: swapButtonIconLoadingStyle })) : t('views.SWAP.swapForm.buttonText') }), jsx(TransactionRejected, { visible: showTxnRejectedState, showHeaderBar: false, onCloseDrawer: () => setShowTxnRejectedState(false), onRetry: () => {
-                    sendTransaction();
-                    setShowTxnRejectedState(false);
-                } })] }));
+    return (jsx(Box, { sx: swapButtonBoxStyle, children: jsx(Button, { testId: "swap-button", disabled: loading, variant: "primary", onClick: handleClick, size: "large", children: loading ? (jsx(Button.Icon, { icon: "Loading", sx: swapButtonIconLoadingStyle })) : t('views.SWAP.swapForm.buttonText') }) }));
 }
 
 const containerStyles$1 = {
@@ -639,9 +496,9 @@ const shouldSetToAddress = (toAddress, fromAddress) => {
     return true;
 };
 let quoteRequest;
-function SwapForm({ data, theme }) {
+function SwapForm({ data, theme, cancelAutoProceed }) {
     const { t } = useTranslation();
-    const { swapState: { allowedTokens, exchange, tokenBalances, network, }, } = reactExports.useContext(SwapContext);
+    const { swapState: { allowedTokens, tokenBalances, network, autoProceed, }, } = reactExports.useContext(SwapContext);
     const { connectLoaderState } = reactExports.useContext(ConnectLoaderContext);
     const { checkout, provider } = connectLoaderState;
     const defaultTokenImage = getDefaultTokenImage(checkout?.config.environment, theme);
@@ -667,6 +524,7 @@ function SwapForm({ data, theme }) {
     const [toToken, setToToken] = reactExports.useState();
     const [toTokenError, setToTokenError] = reactExports.useState('');
     const [fromFiatValue, setFromFiatValue] = reactExports.useState('');
+    const [loadedToAndFromTokens, setLoadedToAndFromTokens] = reactExports.useState(false);
     // Quote
     const [quote, setQuote] = reactExports.useState(null);
     const [gasFeeValue, setGasFeeValue] = reactExports.useState('');
@@ -685,6 +543,7 @@ function SwapForm({ data, theme }) {
     const [showNotEnoughImxDrawer, setShowNotEnoughImxDrawer] = reactExports.useState(false);
     const [showUnableToSwapDrawer, setShowUnableToSwapDrawer] = reactExports.useState(false);
     const [showNetworkSwitchDrawer, setShowNetworkSwitchDrawer] = reactExports.useState(false);
+    const [showTxnRejectedState, setShowTxnRejectedState] = reactExports.useState(false);
     reactExports.useEffect(() => {
         if (tokenBalances.length === 0)
             return;
@@ -716,6 +575,7 @@ function SwapForm({ data, theme }) {
         if (shouldSetToAddress(data?.toTokenAddress, data?.fromTokenAddress) && !toToken) {
             setToToken(allowedTokens.find((token) => (isNativeToken(token.address) && data?.toTokenAddress?.toLowerCase() === NATIVE) || (token.address?.toLowerCase() === data?.toTokenAddress?.toLowerCase())));
         }
+        setLoadedToAndFromTokens(true);
     }, [
         tokenBalances,
         allowedTokens,
@@ -766,14 +626,19 @@ function SwapForm({ data, theme }) {
     const processFetchQuoteFrom = async (silently = false) => {
         if (!provider)
             return;
-        if (!exchange)
+        if (!checkout)
             return;
         if (!fromToken)
             return;
         if (!toToken)
             return;
         try {
-            const quoteResultPromise = quotesProcessor.fromAmountIn(exchange, provider, fromToken, fromAmount, toToken);
+            const quoteResultPromise = checkout.swapQuote({
+                provider,
+                fromToken,
+                toToken,
+                fromAmount,
+            });
             const currentQuoteRequest = CancellablePromise.all([
                 quoteResultPromise,
             ]);
@@ -821,14 +686,20 @@ function SwapForm({ data, theme }) {
     const processFetchQuoteTo = async (silently = false) => {
         if (!provider)
             return;
-        if (!exchange)
+        if (!checkout)
             return;
         if (!fromToken)
             return;
         if (!toToken)
             return;
         try {
-            const quoteResultPromise = quotesProcessor.fromAmountOut(exchange, provider, toToken, toAmount, fromToken);
+            const quoteResultPromise = checkout.swapQuote({
+                provider,
+                fromToken,
+                toToken,
+                fromAmount: undefined,
+                toAmount,
+            });
             const currentQuoteRequest = CancellablePromise.all([
                 quoteResultPromise,
             ]);
@@ -927,7 +798,9 @@ function SwapForm({ data, theme }) {
             await fetchQuoteTo(silently);
     };
     // Silently refresh the quote
-    useInterval(() => fetchQuote(true), DEFAULT_QUOTE_REFRESH_INTERVAL);
+    useInterval(() => {
+        fetchQuote(true);
+    }, DEFAULT_QUOTE_REFRESH_INTERVAL);
     // Fetch quote triggers
     reactExports.useEffect(() => {
         if (direction === SwapDirection.FROM) {
@@ -1110,7 +983,103 @@ function SwapForm({ data, theme }) {
         });
         return isSwapFormValid;
     };
+    const isFormValidForAutoProceed = reactExports.useMemo(() => {
+        if (!autoProceed)
+            return false;
+        if (!loadedToAndFromTokens)
+            return false;
+        return !loading;
+    }, [autoProceed, loading, loadedToAndFromTokens]);
+    const canAutoSwap = reactExports.useMemo(() => {
+        if (!autoProceed)
+            return false;
+        if (!isFormValidForAutoProceed)
+            return false;
+        const isFormValid = SwapFormValidator();
+        if (!isFormValid) {
+            cancelAutoProceed();
+            return false;
+        }
+        return true;
+    }, [isFormValidForAutoProceed]);
+    const sendTransaction = async () => {
+        if (!quote)
+            return;
+        const transaction = quote;
+        const isValid = SwapFormValidator();
+        // Tracking swap from data here and is valid or not to understand behaviour
+        track({
+            userJourney: UserJourney.SWAP,
+            screen: 'SwapCoins',
+            control: 'Swap',
+            controlType: 'Button',
+            extras: {
+                swapFromAddress: data?.fromTokenAddress,
+                swapFromAmount: data?.fromAmount,
+                swapFromTokenSymbol: data?.fromTokenSymbol,
+                swapToAddress: data?.toTokenAddress,
+                swapToAmount: data?.toAmount,
+                swapToTokenSymbol: data?.toTokenSymbol,
+                isSwapFormValid: isValid,
+                hasFundsForGas: !insufficientFundsForGas,
+            },
+        });
+        if (!isValid)
+            return;
+        if (!checkout || !provider || !transaction)
+            return;
+        if (insufficientFundsForGas) {
+            cancelAutoProceed();
+            openNotEnoughImxDrawer();
+            return;
+        }
+        try {
+            // check for switch network here
+            const currentChainId = await provider.provider.request({ method: 'eth_chainId', params: [] });
+            // eslint-disable-next-line radix
+            const parsedChainId = parseInt(currentChainId.toString());
+            if (parsedChainId !== getL2ChainId(checkout.config)) {
+                setShowNetworkSwitchDrawer(true);
+                return;
+            }
+        }
+        catch (err) {
+            // eslint-disable-next-line no-console
+            console.error('Current network check failed', err);
+        }
+        if (!transaction)
+            return;
+        setLoading(true);
+        const prefilledSwapData = {
+            fromAmount: data?.fromAmount || '',
+            fromTokenAddress: data?.fromTokenAddress || '',
+            toTokenAddress: data?.toTokenAddress || '',
+            toAmount: data?.toAmount || '',
+        };
+        viewDispatch({
+            payload: {
+                type: ViewActions.UPDATE_VIEW,
+                view: {
+                    type: SwapWidgetViews.APPROVE_ERC20,
+                    data: {
+                        approveTransaction: transaction.approval?.transaction,
+                        transaction: transaction.swap.transaction,
+                        info: transaction.quote,
+                        swapFormInfo: prefilledSwapData,
+                    },
+                },
+            },
+        });
+    };
+    reactExports.useEffect(() => {
+        if (!autoProceed)
+            return;
+        if (!canAutoSwap)
+            return;
+        sendTransaction();
+    }, [canAutoSwap, autoProceed, sendTransaction]);
     return (jsxs(Fragment, { children: [jsxs(Box, { sx: {
+                    visibility: autoProceed ? 'hidden' : 'visible',
                     paddingX: 'base.spacing.x4',
                     marginBottom: 'base.spacing.x2',
                 }, children: [jsx(Heading, { size: "small", weight: "regular", sx: { paddingBottom: 'base.spacing.x4' }, children: t('views.SWAP.content.title') }), jsxs(Box, { sx: {
@@ -1144,16 +1113,10 @@ function SwapForm({ data, theme }) {
                             });
                         }, sx: {
                             paddingBottom: '0',
-                        }, loading: loading }))] }), jsx(SwapButton, { validator: SwapFormValidator, updateLoading: (value) => {
-                    setLoading(value);
-                }, loading: loading, transaction: quote, data: {
-                    fromAmount,
-                    toAmount,
-                    fromTokenSymbol: fromToken?.symbol,
-                    fromTokenAddress: fromToken?.address,
-                    toTokenSymbol: toToken?.symbol,
-                    toTokenAddress: toToken?.address,
-                }, insufficientFundsForGas: insufficientFundsForGas, openNotEnoughImxDrawer: openNotEnoughImxDrawer, openNetworkSwitchDrawer: () => setShowNetworkSwitchDrawer(true) }), jsx(NotEnoughImx, { environment: checkout?.config.environment ?? Environment.PRODUCTION, visible: showNotEnoughImxDrawer, showAdjustAmount: fromToken?.address === NATIVE, hasZeroImx: false, onAddCoinsClick: () => {
+                        }, loading: loading }))] }), !autoProceed && (jsx(SwapButton, { validator: SwapFormValidator, loading: loading, sendTransaction: sendTransaction })), jsx(TransactionRejected, { visible: showTxnRejectedState, showHeaderBar: false, onCloseDrawer: () => setShowTxnRejectedState(false), onRetry: () => {
+                    sendTransaction();
+                    setShowTxnRejectedState(false);
+                } }), jsx(NotEnoughImx, { environment: checkout?.config.environment ?? Environment.PRODUCTION, visible: showNotEnoughImxDrawer, showAdjustAmount: fromToken?.address === NATIVE, hasZeroImx: false, onAddCoinsClick: () => {
                     viewDispatch({
                         payload: {
                             type: ViewActions.UPDATE_VIEW,
@@ -1189,11 +1152,11 @@ const hasZeroBalance = (tokenBalances, symbol) => {
     return zeroBalance;
 };
 
-function SwapCoins({ theme, fromAmount, toAmount, fromTokenAddress, toTokenAddress, }) {
+function SwapCoins({ theme, cancelAutoProceed, fromAmount, toAmount, fromTokenAddress, toTokenAddress, }) {
     const { t } = useTranslation();
     const { viewDispatch } = reactExports.useContext(ViewContext);
     const { eventTargetState: { eventTarget } } = reactExports.useContext(EventTargetContext);
-    const { swapState: { tokenBalances, }, } = reactExports.useContext(SwapContext);
+    const { swapState: { tokenBalances, autoProceed, }, } = reactExports.useContext(SwapContext);
     const { connectLoaderState: { checkout, provider, }, } = reactExports.useContext(ConnectLoaderContext);
     const [showNotEnoughImxDrawer, setShowNotEnoughImxDrawer] = reactExports.useState(false);
     const { page } = useAnalytics();
@@ -1214,28 +1177,28 @@ function SwapCoins({ theme, fromAmount, toAmount, fromTokenAddress, toTokenAddre
             setShowNotEnoughImxDrawer(true);
         }
     }, [tokenBalances]);
-    return (jsx(SimpleLayout, { header: (jsx(HeaderNavigation, { title: t('views.SWAP.header.title'), onCloseButtonClick: () => sendSwapWidgetCloseEvent(eventTarget) })), footer: jsx(QuickswapFooter, { environment: checkout?.config.environment, theme: theme }), children: jsxs(Box, { sx: {
-                height: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'space-between',
-            }, children: [jsx(SwapForm, { data: {
-                        fromAmount,
-                        toAmount,
-                        fromTokenAddress,
-                        toTokenAddress,
-                    }, theme: theme }), jsx(NotEnoughImx, { environment: checkout?.config.environment ?? Environment.PRODUCTION, visible: showNotEnoughImxDrawer, showAdjustAmount: false, hasZeroImx: true, onAddCoinsClick: () => {
-                        viewDispatch({
-                            payload: {
-                                type: ViewActions.UPDATE_VIEW,
-                                view: {
-                                    type: SharedViews.TOP_UP_VIEW,
+    return (jsxs(SimpleLayout, { header: !autoProceed ? (jsx(HeaderNavigation, { title: t('views.SWAP.header.title'), onCloseButtonClick: () => sendSwapWidgetCloseEvent(eventTarget) })) : '', footer: jsx(QuickswapFooter, { environment: checkout?.config.environment, theme: theme }), children: [jsxs(Box, { sx: {
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-between',
+                }, children: [jsx(SwapForm, { cancelAutoProceed: cancelAutoProceed, data: {
+                            fromAmount,
+                            toAmount,
+                            fromTokenAddress,
+                            toTokenAddress,
+                        }, theme: theme }), jsx(NotEnoughImx, { environment: checkout?.config.environment ?? Environment.PRODUCTION, visible: showNotEnoughImxDrawer, showAdjustAmount: false, hasZeroImx: true, onAddCoinsClick: () => {
+                            viewDispatch({
+                                payload: {
+                                    type: ViewActions.UPDATE_VIEW,
+                                    view: {
+                                        type: SharedViews.TOP_UP_VIEW,
+                                    },
                                 },
-                            },
-                        });
-                    }, onCloseDrawer: () => {
-                        setShowNotEnoughImxDrawer(false);
-                    } })] }) }));
+                            });
+                        }, onCloseDrawer: () => {
+                            setShowNotEnoughImxDrawer(false);
+                        } })] }), autoProceed && jsx(LoadingView, { loadingText: t('views.SWAP.PREPARE_SWAP.loading.text') })] }));
 }
 
 function SwapInProgress({ transactionResponse, swapForm, }) {
@@ -1309,10 +1272,11 @@ function ApproveERC20Onboarding({ data }) {
     const { viewDispatch } = reactExports.useContext(ViewContext);
     const { eventTargetState: { eventTarget } } = reactExports.useContext(EventTargetContext);
     const isPassport = isPassportProvider(provider);
+    const noApprovalTransaction = data.approveTransaction === undefined;
     // Local state
     const [actionDisabled, setActionDisabled] = reactExports.useState(false);
     const [approvalTxnLoading, setApprovalTxnLoading] = reactExports.useState(false);
-    const [showSwapTxnStep, setShowSwapTxnStep] = reactExports.useState(false);
+    const [showSwapTxnStep, setShowSwapTxnStep] = reactExports.useState(noApprovalTransaction);
     const [loading, setLoading] = reactExports.useState(false);
     // reject transaction flags
     const [rejectedSpending, setRejectedSpending] = reactExports.useState(false);
@@ -1539,7 +1503,7 @@ function ApproveERC20Onboarding({ data }) {
     return (jsxs(Fragment, { children: [approvalTxnLoading && (jsx(LoadingView, { loadingText: t('views.APPROVE_ERC20.approveSpending.loading.text') })), !approvalTxnLoading && (jsx(SimpleLayout, { header: (jsx(HeaderNavigation, { transparent: true, showBack: true, onCloseButtonClick: () => sendSwapWidgetCloseEvent(eventTarget), onBackButtonClick: goBackWithSwapData })), floatHeader: true, heroContent: showSwapTxnStep ? jsx(WalletApproveHero, {}) : jsx(SpendingCapHero, {}), footer: showSwapTxnStep ? approveSwapFooter : approveSpendingFooter, children: showSwapTxnStep ? approveSwapContent : approveSpendingContent }))] }));
 }
 
-function SwapWidget({ amount, fromTokenAddress, toTokenAddress, config, }) {
+function SwapWidget({ amount, fromTokenAddress, toTokenAddress, config, autoProceed, direction, }) {
     const { t } = useTranslation();
     const { eventTargetState: { eventTarget }, } = reactExports.useContext(EventTargetContext);
     const { environment, theme, isOnRampEnabled, isSwapEnabled, isBridgeEnabled, } = config;
@@ -1617,26 +1581,6 @@ function SwapWidget({ amount, fromTokenAddress, toTokenAddress, config, }) {
             // connect loader handle the switch network functionality
             if (network.chainId !== getL2ChainId(checkout.config))
                 return;
-            let dexConfig;
-            try {
-                dexConfig = (await checkout.config.remote.getConfig('dex'));
-            }
-            catch (err) {
-                showErrorView(err);
-                return;
-            }
-            const exchange = new Exchange({
-                chainId: network.chainId,
-                baseConfig: new ImmutableConfiguration({ environment }),
-                secondaryFees: dexConfig.secondaryFees,
-                overrides: dexConfig.overrides,
-            });
-            swapDispatch({
-                payload: {
-                    type: SwapActions.SET_EXCHANGE,
-                    exchange,
-                },
-            });
             swapDispatch({
                 payload: {
                     type: SwapActions.SET_NETWORK,
@@ -1650,8 +1594,29 @@ function SwapWidget({ amount, fromTokenAddress, toTokenAddress, config, }) {
             }
         })();
     }, [checkout, provider]);
-    return (jsx(ViewContext.Provider, { value: viewReducerValues, children: jsx(SwapContext.Provider, { value: swapReducerValues, children: jsxs(CryptoFiatProvider, { environment: environment, children: [viewState.view.type === SharedViews.LOADING_VIEW && (jsx(LoadingView, { loadingText: t('views.LOADING_VIEW.text') })), viewState.view.type === SwapWidgetViews.SWAP && (jsx(SwapCoins, { theme: theme, fromAmount: viewState.view.data?.fromAmount ?? amount, fromTokenAddress: viewState.view.data?.fromTokenAddress
-                            ?? fromTokenAddress, toTokenAddress: viewState.view.data?.toTokenAddress ?? toTokenAddress })), viewState.view.type === SwapWidgetViews.IN_PROGRESS && (jsx(SwapInProgress, { transactionResponse: viewState.view.data.transactionResponse, swapForm: viewState.view.data.swapForm })), viewState.view.type === SwapWidgetViews.APPROVE_ERC20 && (jsx(ApproveERC20Onboarding, { data: viewState.view.data })), viewState.view.type === SwapWidgetViews.SUCCESS && (jsx(StatusView, { statusText: t('views.SWAP.success.text'), actionText: t('views.SWAP.success.actionText'), onRenderEvent: () => {
+    reactExports.useEffect(() => {
+        swapDispatch({
+            payload: {
+                type: SwapActions.SET_AUTO_PROCEED,
+                autoProceed: autoProceed ?? false,
+                direction: direction ?? SwapDirection$1.FROM,
+            },
+        });
+    }, [autoProceed, direction]);
+    const cancelAutoProceed = reactExports.useCallback(() => {
+        if (autoProceed) {
+            swapDispatch({
+                payload: {
+                    type: SwapActions.SET_AUTO_PROCEED,
+                    autoProceed: false,
+                    direction: SwapDirection$1.FROM,
+                },
+            });
+        }
+    }, [autoProceed, swapDispatch]);
+    const fromAmount = direction === SwapDirection$1.FROM || direction == null ? amount : undefined;
+    const toAmount = direction === SwapDirection$1.TO ? amount : undefined;
+    return (jsx(ViewContext.Provider, { value: viewReducerValues, children: jsx(SwapContext.Provider, { value: swapReducerValues, children: jsxs(CryptoFiatProvider, { environment: environment, children: [viewState.view.type === SharedViews.LOADING_VIEW && (jsx(LoadingView, { loadingText: t('views.LOADING_VIEW.text') })), viewState.view.type === SwapWidgetViews.SWAP && (jsx(SwapCoins, { theme: theme, cancelAutoProceed: cancelAutoProceed, fromAmount: fromAmount, toAmount: toAmount, fromTokenAddress: viewState.view.data?.fromTokenAddress ?? fromTokenAddress, toTokenAddress: viewState.view.data?.toTokenAddress ?? toTokenAddress })), viewState.view.type === SwapWidgetViews.IN_PROGRESS && (jsx(SwapInProgress, { transactionResponse: viewState.view.data.transactionResponse, swapForm: viewState.view.data.swapForm })), viewState.view.type === SwapWidgetViews.APPROVE_ERC20 && (jsx(ApproveERC20Onboarding, { data: viewState.view.data })), viewState.view.type === SwapWidgetViews.SUCCESS && (jsx(StatusView, { statusText: t('views.SWAP.success.text'), actionText: t('views.SWAP.success.actionText'), onRenderEvent: () => {
                             page({
                                 userJourney: UserJourney.SWAP,
                                 screen: 'SwapSuccess',

package/dist/browser/checkout/{TopUpView-CKizPnH0.js → TopUpView-CCWR_Ywt.js}

@@ -1,4 +1,4 @@
-import { as as BigNumber, cv as Logger, cw as version$1, cx as hexZeroPad, cy as isBigNumberish, cz as arrayify, cA as isBytes, r as reactExports, z as Environment, bF as axios, j as jsx, n as jsxs, M as MenuItem, a as Box, l as useTranslation, V as ViewContext, E as EventTargetContext, t as useAnalytics, bZ as GasEstimateType, Y as HeaderNavigation, a6 as Heading, o as Body, a2 as SimpleLayout, I as IMTBLWidgetEvents, p as ViewActions, F as orchestrationEvents } from './index-B4PflMJG.js';
+import { ar as BigNumber, bF as Logger, cH as version$1, cI as hexZeroPad, cJ as isBigNumberish, bQ as arrayify, cK as isBytes, r as reactExports, z as Environment, bz as axios, j as jsx, n as jsxs, M as MenuItem, a as Box, l as useTranslation, V as ViewContext, E as EventTargetContext, t as useAnalytics, c8 as GasEstimateType, Y as HeaderNavigation, a6 as Heading, o as Body, a2 as SimpleLayout, I as IMTBLWidgetEvents, p as ViewActions, F as orchestrationEvents } from './index-B98fdYSj.js';
 
 const logger$1 = new Logger(version$1);
 const _constructorGuard = {};

package/dist/browser/checkout/{WalletWidget-BenJO1Gt.js → WalletWidget-DX6XyHRZ.js}

@@ -1,6 +1,6 @@
-import { B as ButtCon, _ as _objectWithoutProperties, u as useTheme, g as getStartingSize, D as DEFAULT_BUTTON_SIZE, m as merge, r as reactExports, f as flattenChildren, j as jsx, i as isChildSubcomponent, S as SmartClone, a as Box, b as getResponsiveSx, c as BUTTON_SIZES, s as setDefaultSxBackgroundColor, C as ClassNames, d as Button, e as ButtonIcon, h as ButtonLogo, k as _defineProperty, T as TokenFilterTypes, l as useTranslation, V as ViewContext, n as jsxs, o as Body, p as ViewActions, q as ConnectLoaderContext, t as useAnalytics, v as formatZeroAmount, E as EventTargetContext, w as isPassportProvider, x as getL2ChainId, y as getL1ChainId, z as Environment, M as MenuItem, A as tokenValueFormat, U as UserJourney, F as orchestrationEvents, I as IMTBLWidgetEvents, Z as ZERO_BALANCE_STRING, G as isNativeToken, H as sendNetworkSwitchEvent, J as CheckoutErrorType, K as SharedViews, N as NetworkFilterTypes, L as sortNetworksCompareFn, O as FramedImage, P as getChainImage, Q as DEFAULT_BALANCE_RETRY_POLICY, R as sortTokensByAmount, W as getTokenImageByAddress, X as calculateCryptoToFiat, Y as HeaderNavigation, $ as ButtonNavigationStyles, a0 as sendWalletWidgetCloseEvent, a1 as FooterLogo, a2 as SimpleLayout, a3 as WalletProviderName, a4 as getWalletProviderNameByProvider, a5 as abbreviateWalletAddress, a6 as Heading, a7 as Drawer, a8 as useWalletConnect, a9 as sendDisconnectWalletEvent, aa as isWalletConnectProvider, ab as heroBackGroundStyles, ac as heroImageStyles, ad as heroImageBottomAlign, ae as SimpleTextBody, af as FAQS_LINK, ag as Link, ah as viewReducer, ai as initialViewState, aj as LoadingView, ak as ErrorView } from './index-B4PflMJG.js';
-import { C as CryptoFiatContext, a as CryptoFiatActions, b as CryptoFiatProvider, T as TopUpView } from './TopUpView-CKizPnH0.js';
-import { T as TokenImage, r as retry, u as useInterval } from './retry-C8XS-Xeo.js';
+import { B as ButtCon, _ as _objectWithoutProperties, u as useTheme, g as getStartingSize, D as DEFAULT_BUTTON_SIZE, m as merge, r as reactExports, f as flattenChildren, j as jsx, i as isChildSubcomponent, S as SmartClone, a as Box, b as getResponsiveSx, c as BUTTON_SIZES, s as setDefaultSxBackgroundColor, C as ClassNames, d as Button, e as ButtonIcon, h as ButtonLogo, k as _defineProperty, T as TokenFilterTypes, l as useTranslation, V as ViewContext, n as jsxs, o as Body, p as ViewActions, q as ConnectLoaderContext, t as useAnalytics, v as formatZeroAmount, E as EventTargetContext, w as isPassportProvider, x as getL2ChainId, y as getL1ChainId, z as Environment, M as MenuItem, A as tokenValueFormat, U as UserJourney, F as orchestrationEvents, I as IMTBLWidgetEvents, Z as ZERO_BALANCE_STRING, G as isNativeToken, H as sendNetworkSwitchEvent, J as CheckoutErrorType, K as SharedViews, N as NetworkFilterTypes, L as sortNetworksCompareFn, O as FramedImage, P as getChainImage, Q as DEFAULT_BALANCE_RETRY_POLICY, R as sortTokensByAmount, W as getTokenImageByAddress, X as calculateCryptoToFiat, Y as HeaderNavigation, $ as ButtonNavigationStyles, a0 as sendWalletWidgetCloseEvent, a1 as FooterLogo, a2 as SimpleLayout, a3 as WalletProviderName, a4 as getWalletProviderNameByProvider, a5 as abbreviateWalletAddress, a6 as Heading, a7 as Drawer, a8 as useWalletConnect, a9 as sendDisconnectWalletEvent, aa as isWalletConnectProvider, ab as heroBackGroundStyles, ac as heroImageStyles, ad as heroImageBottomAlign, ae as SimpleTextBody, af as FAQS_LINK, ag as Link, ah as viewReducer, ai as initialViewState, aj as LoadingView, ak as ErrorView } from './index-B98fdYSj.js';
+import { C as CryptoFiatContext, a as CryptoFiatActions, b as CryptoFiatProvider, T as TopUpView } from './TopUpView-CCWR_Ywt.js';
+import { T as TokenImage, r as retry, u as useInterval } from './retry-B5JRrQBT.js';
 
 var horizontalMenuSxProps = {
   justifyContent: "stretch",

package/dist/browser/checkout/{auto-track-yKpxFpit.js → auto-track-HlFDs4AF.js}

@@ -1,4 +1,4 @@
-import { d4 as pTimeout } from './index-B4PflMJG.js';
+import { de as pTimeout } from './index-B98fdYSj.js';
 
 // Check if a user is opening the link in a new tab
 function userNewTab(event) {

package/dist/browser/checkout/{balance-Dpnr5wqM.js → balance-CxYIjdr3.js}

@@ -1,5 +1,5 @@
-import { cc as hFlex, j as jsx, aH as motion, _ as _objectWithoutProperties, u as useTheme, r as reactExports, cd as _slicedToArray, ce as useGetSubcomponentChild, m as merge, n as jsxs, cf as BaseClickable, B as ButtCon, S as SmartClone, cg as AnimatePresence, a as Box, aM as Stack, C as ClassNames, k as _defineProperty, ch as getTertiaryButtonStyles, f as flattenChildren, i as isChildSubcomponent, aO as Divider, l as useTranslation, b7 as getRemoteImage, z as Environment, bV as getChainNameById, y as getL1ChainId, aa as isWalletConnectProvider, bX as isMetaMaskProvider, bc as CloudImage, a6 as Heading, o as Body, d as Button, a1 as FooterLogo, a7 as Drawer, M as MenuItem, ci as Select, cj as FormControlWrapper, b6 as WidgetTheme, ck as TextInput, cl as PriceDisplay, aC as Fragment, A as tokenValueFormat, v as formatZeroAmount, bH as ShimmerBox, cm as DuoCon, ab as heroBackGroundStyles, ac as heroImageStyles, ad as heroImageBottomAlign, bg as NATIVE, W as getTokenImageByAddress, G as isNativeToken, Q as DEFAULT_BALANCE_RETRY_POLICY } from './index-B4PflMJG.js';
-import { T as TokenImage, r as retry } from './retry-C8XS-Xeo.js';
+import { co as hFlex, j as jsx, aG as motion, _ as _objectWithoutProperties, u as useTheme, r as reactExports, cp as _slicedToArray, cq as useGetSubcomponentChild, m as merge, n as jsxs, cr as BaseClickable, B as ButtCon, S as SmartClone, cs as AnimatePresence, a as Box, aL as Stack, C as ClassNames, k as _defineProperty, ct as getTertiaryButtonStyles, f as flattenChildren, i as isChildSubcomponent, aN as Divider, l as useTranslation, b6 as getRemoteImage, z as Environment, c4 as getChainNameById, y as getL1ChainId, aa as isWalletConnectProvider, c6 as isMetaMaskProvider, bb as CloudImage, a6 as Heading, o as Body, d as Button, a1 as FooterLogo, a7 as Drawer, M as MenuItem, cu as Select, cv as FormControlWrapper, b5 as WidgetTheme, cw as TextInput, cx as PriceDisplay, aB as Fragment, A as tokenValueFormat, v as formatZeroAmount, bS as ShimmerBox, cy as DuoCon, ab as heroBackGroundStyles, ac as heroImageStyles, ad as heroImageBottomAlign, bf as NATIVE, W as getTokenImageByAddress, G as isNativeToken, Q as DEFAULT_BALANCE_RETRY_POLICY } from './index-B98fdYSj.js';
+import { T as TokenImage, r as retry } from './retry-B5JRrQBT.js';
 
 function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }