thirdweb 5.40.0-nightly-3848327373e49aa83c5902e6a16d5b8e96cf1eeb-20240726000343 → 5.40.1-nightly-b128530355f0dc47d897bd2ef7c3823752ea9b6c-20240727000321

package/dist/cjs/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.js

@@ -7,21 +7,17 @@ const react_1 = require("react");
 const addresses_js_1 = require("../../../../../../constants/addresses.js");
 const isSwapRequiredPostOnramp_js_1 = require("../../../../../../pay/buyWithFiat/isSwapRequiredPostOnramp.js");
 const formatNumber_js_1 = require("../../../../../../utils/formatNumber.js");
-const units_js_1 = require("../../../../../../utils/units.js");
 const index_js_1 = require("../../../../../core/design-system/index.js");
-const useChainQuery_js_1 = require("../../../../../core/hooks/others/useChainQuery.js");
 const useWalletBalance_js_1 = require("../../../../../core/hooks/others/useWalletBalance.js");
 const useBuyWithCryptoQuote_js_1 = require("../../../../../core/hooks/pay/useBuyWithCryptoQuote.js");
 const useBuyWithFiatQuote_js_1 = require("../../../../../core/hooks/pay/useBuyWithFiatQuote.js");
-const useActiveAccount_js_1 = require("../../../../hooks/wallets/useActiveAccount.js");
+const useActiveAccount_js_1 = require("../../../../../core/hooks/wallets/useActiveAccount.js");
 const LoadingScreen_js_1 = require("../../../../wallets/shared/LoadingScreen.js");
 const ChainName_js_1 = require("../../../components/ChainName.js");
 const Drawer_js_1 = require("../../../components/Drawer.js");
-const Skeleton_js_1 = require("../../../components/Skeleton.js");
 const Spacer_js_1 = require("../../../components/Spacer.js");
 const Spinner_js_1 = require("../../../components/Spinner.js");
 const SwitchNetwork_js_1 = require("../../../components/SwitchNetwork.js");
-const TokenIcon_js_1 = require("../../../components/TokenIcon.js");
 const basic_js_1 = require("../../../components/basic.js");
 const buttons_js_1 = require("../../../components/buttons.js");
 const text_js_1 = require("../../../components/text.js");
@@ -32,14 +28,14 @@ const CoinsIcon_js_1 = require("../../icons/CoinsIcon.js");
 const TokenSelector_js_1 = require("../TokenSelector.js");
 const WalletSwitcherConnectionScreen_js_1 = require("../WalletSwitcherConnectionScreen.js");
 const nativeToken_js_1 = require("../nativeToken.js");
+const DirectPaymentModeScreen_js_1 = require("./DirectPaymentModeScreen.js");
 const EstimatedTimeAndFees_js_1 = require("./EstimatedTimeAndFees.js");
 const PayTokenIcon_js_1 = require("./PayTokenIcon.js");
 const PayWIthCreditCard_js_1 = require("./PayWIthCreditCard.js");
-const ReceiverWalletSelectionScreen_js_1 = require("./ReceiverWalletSelectionScreen.js");
+const TransactionModeScreen_js_1 = require("./TransactionModeScreen.js");
 const WalletSelectorButton_js_1 = require("./WalletSelectorButton.js");
 const CurrencySelection_js_1 = require("./fiat/CurrencySelection.js");
 const FiatFlow_js_1 = require("./fiat/FiatFlow.js");
-const useBuyTxStates_js_1 = require("./main/useBuyTxStates.js");
 const useEnabledPaymentMethods_js_1 = require("./main/useEnabledPaymentMethods.js");
 const useUISelectionStates_js_1 = require("./main/useUISelectionStates.js");
 const openOnRamppopup_js_1 = require("./openOnRamppopup.js");
@@ -47,6 +43,7 @@ const BuyTokenInput_js_1 = require("./swap/BuyTokenInput.js");
 const Fees_js_1 = require("./swap/Fees.js");
 const PayWithCrypto_js_1 = require("./swap/PayWithCrypto.js");
 const SwapFlow_js_1 = require("./swap/SwapFlow.js");
+const TransferFlow_js_1 = require("./swap/TransferFlow.js");
 const WalletSwitcherDrawerContent_js_1 = require("./swap/WalletSwitcherDrawerContent.js");
 const pendingSwapTx_js_1 = require("./swap/pendingSwapTx.js");
 const useSwapSupportedChains_js_1 = require("./swap/useSwapSupportedChains.js");
@@ -59,23 +56,26 @@ function BuyScreen(props) {
     if (!supportedDestinationsQuery.data) {
         return (0, jsx_runtime_1.jsx)(LoadingScreen_js_1.LoadingScreen, {});
     }
-    return ((0, jsx_runtime_1.jsx)(BuyScreenContent, { ...props, onViewPendingTx: props.onViewPendingTx, supportedDestinations: supportedDestinationsQuery.data, buyForTx: props.buyForTx }));
+    return ((0, jsx_runtime_1.jsx)(BuyScreenContent, { ...props, supportedDestinations: supportedDestinationsQuery.data }));
 }
 /**
  * @internal
  */
 function BuyScreenContent(props) {
-    const { client, supportedDestinations, connectLocale, payOptions, buyForTx } = props;
+    const { client, supportedDestinations, connectLocale, payOptions } = props;
     const activeAccount = (0, useActiveAccount_js_1.useActiveAccount)();
     const { payer, setPayer } = (0, usePayerSetup_js_1.usePayerSetup)();
     const [screen, setScreen] = (0, react_1.useState)({
         id: "main",
     });
     const [hasEditedAmount, setHasEditedAmount] = (0, react_1.useState)(false);
+    const onDone = (0, react_1.useCallback)(() => {
+        setScreen({ id: "main" });
+        props.onDone();
+    }, [props.onDone]);
     // UI selection
     const { tokenAmount, setTokenAmount, toChain, setToChain, deferredTokenAmount, fromChain, setFromChain, toToken, setToToken, fromToken, setFromToken, selectedCurrency, setSelectedCurrency, } = (0, useUISelectionStates_js_1.useUISelectionStates)({
         payOptions,
-        buyForTx,
         supportedDestinations,
     });
     // check if the screen is expanded or not
@@ -96,6 +96,15 @@ function BuyScreenContent(props) {
         }
         return createSupportedTokens(supportedSourcesQuery.data, payOptions, props.supportedTokens);
     }, [props.supportedTokens, supportedSourcesQuery.data, payOptions]);
+    const enabledPaymentMethods = (0, useEnabledPaymentMethods_js_1.useEnabledPaymentMethods)({
+        payOptions: props.payOptions,
+        supportedDestinations: props.supportedDestinations,
+        toChain: toChain,
+        toToken: toToken,
+    });
+    const payDisabled = enabledPaymentMethods.showPaymentSelection === false &&
+        enabledPaymentMethods.buyWithCryptoEnabled === false &&
+        enabledPaymentMethods.buyWithFiatEnabled === false;
     // screens ----------------------------
     if (screen.id === "connect-payer-wallet") {
         return ((0, jsx_runtime_1.jsx)(WalletSwitcherConnectionScreen_js_1.WalletSwitcherConnectionScreen, { accountAbstraction: props.connectOptions?.accountAbstraction, appMetadata: props.connectOptions?.appMetadata, chain: props.connectOptions?.chain, chains: props.connectOptions?.chains, client: props.client, connectLocale: props.connectLocale, isEmbed: props.isEmbed, onBack: () => setScreen(screen.backScreen), onSelect: (w) => {
@@ -111,23 +120,30 @@ function BuyScreenContent(props) {
             }, recommendedWallets: props.connectOptions?.recommendedWallets, showAllWallets: !!props.connectOptions?.showAllWallets, walletConnect: props.connectOptions?.walletConnect, wallets: props.connectOptions?.wallets }));
     }
     if (screen.id === "swap-flow" && payer) {
-        return ((0, jsx_runtime_1.jsx)(SwapFlow_js_1.SwapFlow, { title: props.title, isBuyForTx: !!props.buyForTx, isEmbed: props.isEmbed, client: client, onBack: () => {
+        return ((0, jsx_runtime_1.jsx)(SwapFlow_js_1.SwapFlow, { title: props.title, transactionMode: payOptions.mode === "transaction", isEmbed: props.isEmbed, client: client, onBack: () => {
                 setScreen({
                     id: "buy-with-crypto",
                 });
-            }, buyWithCryptoQuote: screen.quote, payer: payer, onViewPendingTx: props.onViewPendingTx, isFiatFlow: false, onDone: props.onDone, onTryAgain: () => {
+            }, buyWithCryptoQuote: screen.quote, payer: payer, isFiatFlow: false, onDone: onDone, onTryAgain: () => {
                 setScreen({
                     id: "buy-with-crypto",
                 });
             } }));
     }
     if (screen.id === "fiat-flow" && payer) {
-        return ((0, jsx_runtime_1.jsx)(FiatFlow_js_1.FiatFlow, { title: props.title, isBuyForTx: !!props.buyForTx, quote: screen.quote, onBack: () => {
+        return ((0, jsx_runtime_1.jsx)(FiatFlow_js_1.FiatFlow, { title: props.title, transactionMode: payOptions.mode === "transaction", quote: screen.quote, onBack: () => {
                 setScreen({
                     id: "buy-with-fiat",
                 });
             }, client: client, testMode: props.payOptions.buyWithFiat !== false &&
-                props.payOptions.buyWithFiat?.testMode === true, theme: typeof props.theme === "string" ? props.theme : props.theme.type, onViewPendingTx: props.onViewPendingTx, openedWindow: screen.openedWindow, onDone: props.onDone, isEmbed: props.isEmbed, payer: payer }));
+                props.payOptions.buyWithFiat?.testMode === true, theme: typeof props.theme === "string" ? props.theme : props.theme.type, openedWindow: screen.openedWindow, onDone: onDone, isEmbed: props.isEmbed, payer: payer }));
+    }
+    if (screen.id === "transfer-flow" && payer && activeAccount) {
+        const goBack = () => setScreen({ id: "buy-with-crypto" });
+        // TODO (pay) pass it via screen props
+        const defaultRecipientAddress = props.payOptions?.paymentInfo?.sellerAddress;
+        const receiverAddress = defaultRecipientAddress || activeAccount.address;
+        return ((0, jsx_runtime_1.jsx)(TransferFlow_js_1.TransferFlow, { title: props.title, onBack: goBack, payer: payer, client: props.client, onDone: onDone, chain: toChain, token: toToken, tokenAmount: tokenAmount, receiverAddress: receiverAddress, transactionMode: props.payOptions.mode === "transaction" }));
     }
     if (screen.id === "select-currency") {
         const goBack = () => setScreen(screen.backScreen);
@@ -139,8 +155,10 @@ function BuyScreenContent(props) {
     if (screen.id === "select-to-token") {
         const chains = supportedDestinations.map((x) => x.chain);
         const goBack = () => setScreen(screen.backScreen);
+        const allowEdits = payOptions?.prefillBuy
+            ?.allowEdits;
         // if token selection is disabled - only show network selector screen
-        if (payOptions.prefillBuy?.allowEdits?.token === false) {
+        if (allowEdits?.token === false) {
             return ((0, jsx_runtime_1.jsx)(ChainSelectionScreen, { chains: chains, client: props.client, connectLocale: props.connectLocale, setChain: setToChain, goBack: goBack }));
         }
         return ((0, jsx_runtime_1.jsx)(TokenSelector_js_1.TokenSelector, { onBack: goBack, tokenList: ((toChain?.id ? destinationSupportedTokens[toChain.id] : undefined) ||
@@ -149,7 +167,7 @@ function BuyScreenContent(props) {
                 goBack();
             }, chain: toChain, chainSelection: 
             // hide chain selection if it's disabled
-            payOptions.prefillBuy?.allowEdits?.chain !== false
+            allowEdits?.chain !== false
                 ? {
                     chains: chains,
                     select: (c) => {
@@ -182,25 +200,55 @@ function BuyScreenContent(props) {
                 }
                 : undefined, connectLocale: connectLocale, client: client, modalTitle: "Pay with" }));
     }
-    return ((0, jsx_runtime_1.jsx)(basic_js_1.Container, { animate: "fadein", children: (0, jsx_runtime_1.jsxs)("div", { children: [screen.id === "main" && ((0, jsx_runtime_1.jsx)(MainScreen, { title: props.title, payerAccount: payer?.account, buyForTx: buyForTx, client: client, onSelectBuyToken: () => setScreen({ id: "select-to-token", backScreen: screen }), payOptions: payOptions, setTokenAmount: setTokenAmount, toChain: toChain, toToken: toToken, tokenAmount: tokenAmount, connectOptions: props.connectOptions, onViewPendingTx: props.onViewPendingTx, setScreen: setScreen, supportedDestinations: supportedDestinations, onBack: props.onBack, theme: props.theme, hasEditedAmount: hasEditedAmount, setHasEditedAmount: setHasEditedAmount })), (screen.id === "select-payment-method" ||
+    return ((0, jsx_runtime_1.jsx)(basic_js_1.Container, { animate: "fadein", children: (0, jsx_runtime_1.jsxs)("div", { children: [screen.id === "main" && ((0, jsx_runtime_1.jsx)(MainScreen, { title: props.title, payerAccount: payer?.account, client: client, onSelectBuyToken: () => setScreen({ id: "select-to-token", backScreen: screen }), payOptions: payOptions, setTokenAmount: setTokenAmount, setToChain: setToChain, setToToken: setToToken, setFromChain: setFromChain, setFromToken: setFromToken, toChain: toChain, toToken: toToken, tokenAmount: tokenAmount, connectOptions: props.connectOptions, setScreen: setScreen, supportedDestinations: supportedDestinations, onBack: props.onBack, theme: props.theme, hasEditedAmount: hasEditedAmount, setHasEditedAmount: setHasEditedAmount, enabledPaymentMethods: enabledPaymentMethods })), (screen.id === "select-payment-method" ||
+                    screen.id === "select-wallet" ||
                     screen.id === "buy-with-crypto" ||
                     screen.id === "buy-with-fiat") &&
                     payer && ((0, jsx_runtime_1.jsxs)(TokenSelectedLayout, { title: props.title, selectedChain: toChain, selectedToken: toToken, tokenAmount: tokenAmount, client: client, onBack: () => {
-                        if (screen.id === "buy-with-crypto" ||
-                            screen.id === "buy-with-fiat") {
+                        if (enabledPaymentMethods.showPaymentSelection &&
+                            (screen.id === "select-wallet" ||
+                                screen.id === "buy-with-fiat")) {
                             setScreen({ id: "select-payment-method" });
                         }
-                        else if (screen.id === "select-payment-method") {
+                        else if (screen.id === "buy-with-crypto") {
+                            setScreen({ id: "select-wallet" });
+                        }
+                        else {
                             setScreen({ id: "main" });
                         }
-                    }, children: [screen.id === "select-payment-method" && ((0, jsx_runtime_1.jsx)(PaymentMethodSelection, { setScreen: (id) => setScreen({ id }) })), screen.id === "buy-with-crypto" && activeAccount && ((0, jsx_runtime_1.jsx)(SwapScreenContent, { setScreen: setScreen, tokenAmount: deferredTokenAmount, toChain: toChain, toToken: toToken, fromChain: fromChain, fromToken: fromToken, showFromTokenSelector: () => {
+                    }, children: [screen.id === "select-payment-method" && ((0, jsx_runtime_1.jsx)(PaymentMethodSelection, { setScreen: (id) => setScreen({ id }) })), screen.id === "select-wallet" && ((0, jsx_runtime_1.jsx)(WalletSwitcherDrawerContent_js_1.WalletSwitcherDrawerContent, { client: client, onSelect: (w) => {
+                                const chain = w.getChain();
+                                const account = w.getAccount();
+                                if (chain && account) {
+                                    setPayer({
+                                        account,
+                                        chain,
+                                        wallet: w,
+                                    });
+                                    setScreen({ id: "buy-with-crypto" });
+                                }
+                            }, showAllWallets: !!props.connectOptions?.showAllWallets, wallets: props.connectOptions?.wallets, onBack: () => {
+                                // no-op
+                            }, onConnect: () => {
+                                setScreen({
+                                    id: "connect-payer-wallet",
+                                    backScreen: {
+                                        id: "select-wallet",
+                                    },
+                                });
+                            }, selectedAddress: payer.account.address })), screen.id === "buy-with-crypto" && activeAccount && ((0, jsx_runtime_1.jsx)(SwapScreenContent, { setScreen: setScreen, tokenAmount: deferredTokenAmount, toChain: toChain, toToken: toToken, fromChain: fromChain, fromToken: fromToken, showFromTokenSelector: () => {
                                 setScreen({
                                     id: "select-from-token",
                                     backScreen: screen,
                                 });
-                            }, payer: payer, buyForTx: buyForTx || null, client: client, isEmbed: props.isEmbed, onDone: props.onDone, onViewPendingTx: props.onViewPendingTx, payOptions: payOptions, connectLocale: connectLocale, connectOptions: props.connectOptions, setPayer: setPayer, 
+                            }, payer: payer, client: client, isEmbed: props.isEmbed, onDone: onDone, payOptions: payOptions, connectLocale: connectLocale, connectOptions: props.connectOptions, setPayer: setPayer, 
                             // pass it even though we are passing payer, because payer might be different
-                            activeAccount: activeAccount, setTokenAmount: setTokenAmount, setHasEditedAmount: setHasEditedAmount })), screen.id === "buy-with-fiat" && ((0, jsx_runtime_1.jsx)(FiatScreenContent, { setScreen: setScreen, tokenAmount: deferredTokenAmount, toChain: toChain, toToken: toToken, selectedCurrency: selectedCurrency, buyForTx: buyForTx || null, client: client, isEmbed: props.isEmbed, onDone: props.onDone, onViewPendingTx: props.onViewPendingTx, payOptions: payOptions, theme: props.theme, showCurrencySelector: () => {
+                            activeAccount: activeAccount, setTokenAmount: setTokenAmount, setHasEditedAmount: setHasEditedAmount, disableTokenSelection: payDisabled === true ||
+                                (payOptions.buyWithCrypto !== false &&
+                                    payOptions.buyWithCrypto?.prefillSource?.allowEdits
+                                        ?.chain === false &&
+                                    payOptions.buyWithCrypto?.prefillSource?.allowEdits
+                                        ?.token === false) })), screen.id === "buy-with-fiat" && ((0, jsx_runtime_1.jsx)(FiatScreenContent, { setScreen: setScreen, tokenAmount: deferredTokenAmount, toChain: toChain, toToken: toToken, selectedCurrency: selectedCurrency, client: client, isEmbed: props.isEmbed, onDone: onDone, payOptions: payOptions, theme: props.theme, showCurrencySelector: () => {
                                 setScreen({
                                     id: "select-currency",
                                     backScreen: screen,
@@ -213,48 +261,79 @@ function SelectedTokenInfo(props) {
             }, children: [(0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "xs", center: "y", children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { color: "primaryText", "data-testid": "tokenAmount", size: "xl", children: (0, formatNumber_js_1.formatNumber)(Number(props.tokenAmount), 6) }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "xxs", center: "y", children: [(0, jsx_runtime_1.jsx)(TokenSymbol_js_1.TokenSymbol, { token: props.selectedToken, chain: props.selectedChain, size: "md", color: "secondaryText" }), (0, jsx_runtime_1.jsx)(PayTokenIcon_js_1.PayTokenIcon, { chain: props.selectedChain, client: props.client, size: "sm", token: props.selectedToken })] })] }), (0, jsx_runtime_1.jsx)(ChainName_js_1.ChainName, { chain: props.selectedChain, client: props.client, size: "sm", short: true })] }) }));
 }
 function MainScreen(props) {
-    const { showPaymentSelection, buyWithCryptoEnabled, buyWithFiatEnabled } = (0, useEnabledPaymentMethods_js_1.useEnabledPaymentMethods)({
-        payOptions: props.payOptions,
-        supportedDestinations: props.supportedDestinations,
-        toChain: props.toChain,
-        toToken: props.toToken,
-    });
-    const { buyForTx, setTokenAmount, payerAccount, client, tokenAmount, payOptions, toToken, toChain, } = props;
-    // Buy Transaction flow states
-    const { amountNeeded } = (0, useBuyTxStates_js_1.useBuyTxStates)({
-        setTokenAmount,
-        buyForTx: buyForTx || null,
-        hasEditedAmount: props.hasEditedAmount,
-        account: payerAccount || null,
-    });
+    const { setTokenAmount, setToChain, setToToken, setFromChain, setFromToken, payerAccount, client, tokenAmount, payOptions, toToken, toChain, supportedDestinations, enabledPaymentMethods, } = props;
+    const { showPaymentSelection, buyWithCryptoEnabled, buyWithFiatEnabled } = enabledPaymentMethods;
     const disableContinue = !tokenAmount;
-    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { p: "lg", children: [(0, jsx_runtime_1.jsx)(basic_js_1.ModalHeader, { title: props.buyForTx
-                    ? `Not enough ${props.buyForTx.tokenSymbol}`
-                    : props.title, onBack: props.onBack }), amountNeeded && props.buyForTx ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsx)(BuyForTxUI, { amountNeeded: String((0, formatNumber_js_1.formatNumber)(Number((0, units_js_1.toTokens)(amountNeeded, props.buyForTx.tokenDecimals)), 6)), buyForTx: props.buyForTx, client: client })] })) : ((0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xl" })), (0, jsx_runtime_1.jsx)(BuyTokenInput_js_1.BuyTokenInput, { value: tokenAmount, onChange: async (value) => {
-                    props.setHasEditedAmount(true);
-                    setTokenAmount(value);
-                }, freezeAmount: payOptions.prefillBuy?.allowEdits?.amount === false, freezeChainAndToken: payOptions.prefillBuy?.allowEdits?.chain === false &&
-                    payOptions.prefillBuy?.allowEdits?.token === false, token: toToken, chain: toChain, onSelectToken: props.onSelectBuyToken, client: props.client, hideTokenSelector: !!props.buyForTx }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xl" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "sm", children: [!payerAccount ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ConnectButton_js_1.ConnectButton, { ...props.connectOptions, client: props.client, theme: props.theme, connectButton: {
-                                style: {
-                                    width: "100%",
-                                },
-                            } }) })) : ((0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "accent", fullWidth: true, disabled: disableContinue, "data-disabled": disableContinue, onClick: () => {
-                            if (showPaymentSelection) {
-                                props.setScreen({ id: "select-payment-method" });
-                            }
-                            else if (buyWithCryptoEnabled) {
-                                props.setScreen({ id: "buy-with-crypto" });
-                            }
-                            else if (buyWithFiatEnabled) {
-                                props.setScreen({ id: "buy-with-fiat" });
-                            }
-                            else {
-                                console.error("No payment method enabled");
-                            }
-                        }, children: "Continue" })), payerAccount && ((0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "outline", fullWidth: true, style: {
-                            padding: index_js_1.spacing.xs,
-                            fontSize: index_js_1.fontSize.sm,
-                        }, onClick: props.onViewPendingTx, children: "View all transactions" }))] })] }));
+    switch (payOptions.mode) {
+        case "transaction": {
+            return ((0, jsx_runtime_1.jsx)(TransactionModeScreen_js_1.TransactionModeScreen, { supportedDestinations: supportedDestinations, payUiOptions: payOptions, payerAccount: payerAccount, connectOptions: props.connectOptions, client: client, onContinue: (tokenAmount, toChain, toToken) => {
+                    setTokenAmount(tokenAmount);
+                    setToChain(toChain);
+                    setFromChain(toChain);
+                    setFromToken(toToken);
+                    setToToken(toToken);
+                    if (showPaymentSelection) {
+                        props.setScreen({ id: "select-payment-method" });
+                    }
+                    else if (buyWithCryptoEnabled) {
+                        props.setScreen({ id: "select-wallet" });
+                    }
+                    else if (buyWithFiatEnabled) {
+                        props.setScreen({ id: "buy-with-fiat" });
+                    }
+                    else {
+                        // default to buy with crypto with connected wallet if chain not supported by pay
+                        props.setScreen({ id: "select-wallet" });
+                    }
+                } }));
+        }
+        case "direct_payment": {
+            return ((0, jsx_runtime_1.jsx)(DirectPaymentModeScreen_js_1.DirectPaymentModeScreen, { client: client, payUiOptions: payOptions, payerAccount: payerAccount, connectOptions: props.connectOptions, supportedDestinations: supportedDestinations, onContinue: (tokenAmount, toChain, toToken) => {
+                    setTokenAmount(tokenAmount);
+                    setToChain(toChain);
+                    setFromChain(toChain);
+                    setFromToken(toToken);
+                    setToToken(toToken);
+                    if (showPaymentSelection) {
+                        props.setScreen({ id: "select-payment-method" });
+                    }
+                    else if (buyWithCryptoEnabled) {
+                        props.setScreen({ id: "buy-with-crypto" });
+                    }
+                    else if (buyWithFiatEnabled) {
+                        props.setScreen({ id: "buy-with-fiat" });
+                    }
+                    else {
+                        // default to buy with crypto with connected wallet if chain not supported by pay
+                        props.setScreen({ id: "select-wallet" });
+                    }
+                } }));
+        }
+        default: {
+            return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { p: "lg", children: [(0, jsx_runtime_1.jsx)(basic_js_1.ModalHeader, { title: props.title, onBack: props.onBack }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xl" }), (0, jsx_runtime_1.jsx)(BuyTokenInput_js_1.BuyTokenInput, { value: tokenAmount, onChange: async (value) => {
+                            props.setHasEditedAmount(true);
+                            setTokenAmount(value);
+                        }, freezeAmount: payOptions.prefillBuy?.allowEdits?.amount === false, freezeChainAndToken: payOptions.prefillBuy?.allowEdits?.chain === false &&
+                            payOptions.prefillBuy?.allowEdits?.token === false, token: toToken, chain: toChain, onSelectToken: props.onSelectBuyToken, client: props.client }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xl" }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "column", gap: "sm", children: !payerAccount ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ConnectButton_js_1.ConnectButton, { ...props.connectOptions, client: props.client, theme: props.theme, connectButton: {
+                                    style: {
+                                        width: "100%",
+                                    },
+                                } }) })) : ((0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "accent", fullWidth: true, disabled: disableContinue, "data-disabled": disableContinue, onClick: () => {
+                                if (showPaymentSelection) {
+                                    props.setScreen({ id: "select-payment-method" });
+                                }
+                                else if (buyWithCryptoEnabled) {
+                                    props.setScreen({ id: "buy-with-crypto" });
+                                }
+                                else if (buyWithFiatEnabled) {
+                                    props.setScreen({ id: "buy-with-fiat" });
+                                }
+                                else {
+                                    console.error("No payment method enabled");
+                                }
+                            }, children: "Continue" })) })] }));
+        }
+    }
 }
 function TokenSelectedLayout(props) {
     return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { children: [(0, jsx_runtime_1.jsx)(basic_js_1.Container, { p: "lg", children: (0, jsx_runtime_1.jsx)(basic_js_1.ModalHeader, { title: props.title, onBack: props.onBack }) }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { px: "lg", style: {
@@ -268,13 +347,14 @@ function PaymentMethodSelection(props) {
                     }, children: [(0, jsx_runtime_1.jsx)(basic_js_1.Container, { color: "secondaryText", flex: "row", center: "both", children: (0, jsx_runtime_1.jsx)(react_icons_1.IdCardIcon, { style: {
                                     width: index_js_1.iconSize.md,
                                     height: index_js_1.iconSize.md,
-                                } }) }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "xxs", children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "md", color: "primaryText", children: "Credit Card" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "xs", children: "Easily and securely make payments" })] })] }), (0, jsx_runtime_1.jsxs)(buttons_js_1.Button, { variant: "outline", bg: "tertiaryBg", onClick: () => props.setScreen("buy-with-crypto"), style: {
+                                } }) }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "xxs", children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "md", color: "primaryText", children: "Credit Card" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "xs", children: "Securely pay with credit card" })] })] }), (0, jsx_runtime_1.jsxs)(buttons_js_1.Button, { variant: "outline", bg: "tertiaryBg", onClick: () => props.setScreen("select-wallet"), style: {
                         justifyContent: "flex-start",
-                    }, gap: "sm", children: [(0, jsx_runtime_1.jsx)(basic_js_1.Container, { color: "secondaryText", flex: "row", center: "both", children: (0, jsx_runtime_1.jsx)(CoinsIcon_js_1.CoinsIcon, { size: index_js_1.iconSize.md }) }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "xxs", children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "md", color: "primaryText", children: "Crypto" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "xs", children: "Pay with confidence using crypto" })] })] })] }) }));
+                    }, gap: "sm", children: [(0, jsx_runtime_1.jsx)(basic_js_1.Container, { color: "secondaryText", flex: "row", center: "both", children: (0, jsx_runtime_1.jsx)(CoinsIcon_js_1.CoinsIcon, { size: index_js_1.iconSize.md }) }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "xxs", children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "md", color: "primaryText", children: "Crypto" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "xs", children: "Pay with your connected wallet" })] })] })] }) }));
 }
 function SwapScreenContent(props) {
-    const { setScreen, payer, client, toChain, tokenAmount, toToken, fromChain, fromToken, showFromTokenSelector, payOptions, } = props;
-    const [receiverAddress, setReceiverAddress] = (0, react_1.useState)(props.payOptions.recipientAddress || props.activeAccount.address);
+    const { setScreen, payer, client, toChain, tokenAmount, toToken, fromChain, fromToken, showFromTokenSelector, payOptions, disableTokenSelection, } = props;
+    const defaultRecipientAddress = props.payOptions?.paymentInfo?.sellerAddress;
+    const receiverAddress = defaultRecipientAddress || props.activeAccount.address;
     const { drawerRef, drawerOverlayRef, isOpen, setIsOpen } = (0, Drawer_js_1.useDrawer)();
     const [drawerScreen, setDrawerScreen] = (0, react_1.useState)("fees");
     const fromTokenBalanceQuery = (0, useWalletBalance_js_1.useWalletBalance)({
@@ -283,7 +363,15 @@ function SwapScreenContent(props) {
         tokenAddress: (0, nativeToken_js_1.isNativeToken)(fromToken) ? undefined : fromToken.address,
         client,
     });
-    const quoteParams = tokenAmount && !(fromChain.id === toChain.id && fromToken === toToken)
+    const fromTokenId = (0, nativeToken_js_1.isNativeToken)(fromToken)
+        ? addresses_js_1.NATIVE_TOKEN_ADDRESS
+        : fromToken.address.toLowerCase();
+    const toTokenId = (0, nativeToken_js_1.isNativeToken)(toToken)
+        ? addresses_js_1.NATIVE_TOKEN_ADDRESS
+        : toToken.address.toLowerCase();
+    const swapRequired = !!tokenAmount &&
+        !(fromChain.id === toChain.id && fromTokenId === toTokenId);
+    const quoteParams = swapRequired
         ? {
             // wallets
             fromAddress: payer.account.address,
@@ -309,11 +397,13 @@ function SwapScreenContent(props) {
         refetchInterval: 30 * 1000,
         gcTime: 30 * 1000,
     });
-    const sourceTokenAmount = quoteQuery.data?.swapDetails.fromAmount;
+    const sourceTokenAmount = swapRequired
+        ? quoteQuery.data?.swapDetails.fromAmount
+        : tokenAmount;
     const isNotEnoughBalance = !!sourceTokenAmount &&
         !!fromTokenBalanceQuery.data &&
         Number(fromTokenBalanceQuery.data.displayValue) < Number(sourceTokenAmount);
-    const disableContinue = !quoteQuery.data || isNotEnoughBalance;
+    const disableContinue = (swapRequired && !quoteQuery.data) || isNotEnoughBalance;
     const switchChainRequired = props.payer.chain.id !== fromChain.id;
     // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     function getErrorMessage(err) {
@@ -336,6 +426,22 @@ function SwapScreenContent(props) {
         ? getErrorMessage(quoteQuery.error)
         : undefined;
     function showSwapFlow() {
+        if ((props.payOptions.mode === "transaction" ||
+            props.payOptions.mode === "direct_payment") &&
+            !isNotEnoughBalance &&
+            !swapRequired) {
+            if (payer.account.address !== receiverAddress) {
+                // same currency, just transfer, but from another wallet
+                setScreen({
+                    id: "transfer-flow",
+                });
+            }
+            else {
+                // has enough balance to just do the transaction directly
+                props.onDone();
+            }
+            return;
+        }
         if (!quoteQuery.data) {
             return;
         }
@@ -351,40 +457,12 @@ function SwapScreenContent(props) {
         setIsOpen(true);
         setDrawerScreen("fees");
     }
-    const prefillSource = payOptions.buyWithCrypto !== false
-        ? payOptions.buyWithCrypto?.prefillSource
-        : undefined;
-    const disableReceiverSelection = !!props.payOptions.recipientAddress;
-    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "md", animate: "fadein", children: [isOpen && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Drawer_js_1.DrawerOverlay, { ref: drawerOverlayRef }), (0, jsx_runtime_1.jsxs)(Drawer_js_1.Drawer, { ref: drawerRef, close: () => setIsOpen(false), children: [drawerScreen === "fees" && quoteQuery.data && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "lg", color: "primaryText", children: "Fees" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsx)(Fees_js_1.SwapFees, { quote: quoteQuery.data, align: "left" })] })), drawerScreen === "receiver" && ((0, jsx_runtime_1.jsx)(ReceiverWalletSelectionScreen_js_1.ReceiverWalletDrawerScreen, { client: props.client, onSelect: (x) => setReceiverAddress(x), receiverAddress: receiverAddress, onBack: () => setIsOpen(false) })), drawerScreen === "payer" && ((0, jsx_runtime_1.jsx)(WalletSwitcherDrawerContent_js_1.WalletSwitcherDrawerContent, { client: client, onSelect: (w) => {
-                                    const chain = w.getChain();
-                                    const account = w.getAccount();
-                                    if (chain && account) {
-                                        props.setPayer({
-                                            account,
-                                            chain,
-                                            wallet: w,
-                                        });
-                                    }
-                                }, showAllWallets: !!props.connectOptions?.showAllWallets, wallets: props.connectOptions?.wallets, onBack: () => {
-                                    setIsOpen(false);
-                                }, onConnect: () => {
-                                    setScreen({
-                                        id: "connect-payer-wallet",
-                                        backScreen: {
-                                            id: "buy-with-crypto",
-                                        },
-                                    });
-                                }, selectedAddress: payer.account.address }))] })] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(WalletSelectorButton_js_1.WalletSelectorButton, { client: props.client, onClick: () => {
-                            setIsOpen(true);
-                            setDrawerScreen("payer");
+    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "md", animate: "fadein", children: [isOpen && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Drawer_js_1.DrawerOverlay, { ref: drawerOverlayRef }), (0, jsx_runtime_1.jsx)(Drawer_js_1.Drawer, { ref: drawerRef, close: () => setIsOpen(false), children: drawerScreen === "fees" && quoteQuery.data && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "lg", color: "primaryText", children: "Fees" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsx)(Fees_js_1.SwapFees, { quote: quoteQuery.data, align: "left" })] })) })] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(WalletSelectorButton_js_1.WalletSelectorButton, { client: props.client, onClick: () => {
+                            setScreen({ id: "select-wallet" });
                         }, address: props.payer.account.address, walletId: props.payer.wallet.id, containerStyle: {
                             borderBottomRightRadius: 0,
                             borderBottomLeftRadius: 0,
-                        } }), (0, jsx_runtime_1.jsx)(PayWithCrypto_js_1.PayWithCrypto, { value: sourceTokenAmount || "", onSelectToken: showFromTokenSelector, chain: fromChain, token: fromToken, isLoading: quoteQuery.isLoading && !sourceTokenAmount, client: client, freezeChainAndTokenSelection: prefillSource?.allowEdits?.chain === false &&
-                            prefillSource?.allowEdits?.token === false, payerAccount: props.payer.account }), (0, jsx_runtime_1.jsx)(EstimatedTimeAndFees_js_1.EstimatedTimeAndFees, { quoteIsLoading: quoteQuery.isLoading, estimatedSeconds: quoteQuery.data?.swapDetails.estimated.durationSeconds, onViewFees: showFees }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", children: "Send to" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xs" }), (0, jsx_runtime_1.jsx)(WalletSelectorButton_js_1.WalletSelectorButton, { client: props.client, disabled: disableReceiverSelection, disableChevron: disableReceiverSelection, onClick: () => {
-                            setIsOpen(true);
-                            setDrawerScreen("receiver");
-                        }, address: receiverAddress, walletId: undefined })] }), errorMsg && ((0, jsx_runtime_1.jsxs)("div", { children: [errorMsg.minAmount && ((0, jsx_runtime_1.jsxs)(text_js_1.Text, { color: "danger", size: "sm", center: true, multiline: true, children: ["Minimum amount is ", errorMsg.minAmount, " ", (0, jsx_runtime_1.jsx)(TokenSymbol_js_1.TokenSymbol, { token: toToken, chain: toChain, size: "sm", inline: true, color: "danger" })] })), errorMsg.msg?.map((msg) => ((0, jsx_runtime_1.jsx)(text_js_1.Text, { color: "danger", size: "sm", center: true, multiline: true, children: msg }, msg)))] })), errorMsg?.minAmount ? ((0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "accent", fullWidth: true, onClick: () => {
+                        } }), (0, jsx_runtime_1.jsx)(PayWithCrypto_js_1.PayWithCrypto, { value: sourceTokenAmount || "", onSelectToken: showFromTokenSelector, chain: fromChain, token: fromToken, isLoading: quoteQuery.isLoading && !sourceTokenAmount, client: client, freezeChainAndTokenSelection: disableTokenSelection, payerAccount: props.payer.account, swapRequired: swapRequired }), swapRequired && ((0, jsx_runtime_1.jsx)(EstimatedTimeAndFees_js_1.EstimatedTimeAndFees, { quoteIsLoading: quoteQuery.isLoading, estimatedSeconds: quoteQuery.data?.swapDetails.estimated.durationSeconds, onViewFees: showFees })), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" })] }), errorMsg && ((0, jsx_runtime_1.jsxs)("div", { children: [errorMsg.minAmount && ((0, jsx_runtime_1.jsxs)(text_js_1.Text, { color: "danger", size: "sm", center: true, multiline: true, children: ["Minimum amount is ", errorMsg.minAmount, " ", (0, jsx_runtime_1.jsx)(TokenSymbol_js_1.TokenSymbol, { token: toToken, chain: toChain, size: "sm", inline: true, color: "danger" })] })), errorMsg.msg?.map((msg) => ((0, jsx_runtime_1.jsx)(text_js_1.Text, { color: "danger", size: "sm", center: true, multiline: true, children: msg }, msg)))] })), !errorMsg && isNotEnoughBalance && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { color: "danger", size: "sm", center: true, multiline: true, children: "Not enough funds." }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { color: "danger", size: "sm", center: true, multiline: true, children: "Try a different wallet or token." })] })), errorMsg?.minAmount ? ((0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "accent", fullWidth: true, onClick: () => {
                     props.setTokenAmount(String(errorMsg.minAmount));
                     props.setHasEditedAmount(true);
                 }, children: "Set Minimum" })) : switchChainRequired &&
@@ -396,11 +474,12 @@ function SwapScreenContent(props) {
                     if (!disableContinue) {
                         showSwapFlow();
                     }
-                }, gap: "xs", children: isNotEnoughBalance ? ((0, jsx_runtime_1.jsx)(text_js_1.Text, { color: "danger", children: "Not Enough Funds" })) : quoteQuery.isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Getting price quote", (0, jsx_runtime_1.jsx)(Spinner_js_1.Spinner, { size: "sm", color: "accentText" })] })) : ("Continue") }))] }));
+                }, gap: "xs", children: quoteQuery.isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Getting price quote", (0, jsx_runtime_1.jsx)(Spinner_js_1.Spinner, { size: "sm", color: "accentText" })] })) : ("Continue") }))] }));
 }
 function FiatScreenContent(props) {
     const { toToken, tokenAmount, payer, client, setScreen, toChain, showCurrencySelector, selectedCurrency, } = props;
-    const [receiverAddress, setReceiverAddress] = (0, react_1.useState)(props.payOptions.recipientAddress || props.payer.account.address);
+    const defaultRecipientAddress = props.payOptions?.paymentInfo?.sellerAddress;
+    const receiverAddress = defaultRecipientAddress || props.payer.account.address;
     const { drawerRef, drawerOverlayRef, isOpen, setIsOpen } = (0, Drawer_js_1.useDrawer)();
     const [drawerScreen, setDrawerScreen] = (0, react_1.useState)("fees");
     const buyWithFiatOptions = props.payOptions.buyWithFiat;
@@ -463,32 +542,19 @@ function FiatScreenContent(props) {
         };
     }
     const disableSubmit = !fiatQuoteQuery.data;
-    const disableReceiverSelection = !!props.payOptions.recipientAddress;
     const errorMsg = !fiatQuoteQuery.isLoading && fiatQuoteQuery.error
         ? getErrorMessage(fiatQuoteQuery.error)
         : undefined;
-    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "md", animate: "fadein", children: [isOpen && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Drawer_js_1.DrawerOverlay, { ref: drawerOverlayRef }), (0, jsx_runtime_1.jsxs)(Drawer_js_1.Drawer, { ref: drawerRef, close: () => setIsOpen(false), children: [drawerScreen === "fees" && fiatQuoteQuery.data && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "lg", color: "primaryText", children: "Fees" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsx)(Fees_js_1.FiatFees, { quote: fiatQuoteQuery.data })] })), drawerScreen === "receiver" && ((0, jsx_runtime_1.jsx)(ReceiverWalletSelectionScreen_js_1.ReceiverWalletDrawerScreen, { client: props.client, onSelect: (x) => setReceiverAddress(x), receiverAddress: receiverAddress, onBack: () => setIsOpen(false) }))] })] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(PayWIthCreditCard_js_1.PayWithCreditCard, { isLoading: fiatQuoteQuery.isLoading, value: fiatQuoteQuery.data?.fromCurrencyWithFees.amount, client: client, currency: selectedCurrency, onSelectCurrency: showCurrencySelector }), (0, jsx_runtime_1.jsx)(EstimatedTimeAndFees_js_1.EstimatedTimeAndFees, { quoteIsLoading: fiatQuoteQuery.isLoading, estimatedSeconds: fiatQuoteQuery.data?.estimatedDurationSeconds, onViewFees: showFees }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", children: "Send to" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xs" }), (0, jsx_runtime_1.jsx)(WalletSelectorButton_js_1.WalletSelectorButton, { client: props.client, onClick: () => {
-                            setDrawerScreen("receiver");
-                            setIsOpen(true);
-                        }, address: receiverAddress, disabled: disableReceiverSelection, disableChevron: disableReceiverSelection, walletId: undefined })] }), errorMsg && ((0, jsx_runtime_1.jsxs)("div", { children: [errorMsg.minAmount && ((0, jsx_runtime_1.jsxs)(text_js_1.Text, { color: "danger", size: "sm", center: true, multiline: true, children: ["Minimum amount is ", errorMsg.minAmount, " ", (0, jsx_runtime_1.jsx)(TokenSymbol_js_1.TokenSymbol, { token: toToken, chain: toChain, size: "sm", inline: true, color: "danger" })] })), errorMsg.msg?.map((msg) => ((0, jsx_runtime_1.jsx)(text_js_1.Text, { color: "danger", size: "sm", center: true, multiline: true, children: msg }, msg)))] })), errorMsg?.minAmount ? ((0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "accent", fullWidth: true, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "md", animate: "fadein", children: [isOpen && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Drawer_js_1.DrawerOverlay, { ref: drawerOverlayRef }), (0, jsx_runtime_1.jsx)(Drawer_js_1.Drawer, { ref: drawerRef, close: () => setIsOpen(false), children: drawerScreen === "fees" && fiatQuoteQuery.data && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "lg", color: "primaryText", children: "Fees" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsx)(Fees_js_1.FiatFees, { quote: fiatQuoteQuery.data })] })) })] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(PayWIthCreditCard_js_1.PayWithCreditCard, { isLoading: fiatQuoteQuery.isLoading, value: fiatQuoteQuery.data?.fromCurrencyWithFees.amount, client: client, currency: selectedCurrency, onSelectCurrency: showCurrencySelector }), (0, jsx_runtime_1.jsx)(EstimatedTimeAndFees_js_1.EstimatedTimeAndFees, { quoteIsLoading: fiatQuoteQuery.isLoading, estimatedSeconds: fiatQuoteQuery.data?.estimatedDurationSeconds, onViewFees: showFees }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" })] }), errorMsg && ((0, jsx_runtime_1.jsxs)("div", { children: [errorMsg.minAmount && ((0, jsx_runtime_1.jsxs)(text_js_1.Text, { color: "danger", size: "sm", center: true, multiline: true, children: ["Minimum amount is ", errorMsg.minAmount, " ", (0, jsx_runtime_1.jsx)(TokenSymbol_js_1.TokenSymbol, { token: toToken, chain: toChain, size: "sm", inline: true, color: "danger" })] })), errorMsg.msg?.map((msg) => ((0, jsx_runtime_1.jsx)(text_js_1.Text, { color: "danger", size: "sm", center: true, multiline: true, children: msg }, msg)))] })), errorMsg?.minAmount ? ((0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "accent", fullWidth: true, onClick: () => {
                     props.setTokenAmount(String(errorMsg.minAmount));
                     props.setHasEditedAmount(true);
                 }, children: "Set Minimum" })) : ((0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: disableSubmit ? "outline" : "accent", "data-disabled": disableSubmit, disabled: disableSubmit, fullWidth: true, onClick: handleSubmit, gap: "xs", children: fiatQuoteQuery.isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Getting price quote", (0, jsx_runtime_1.jsx)(Spinner_js_1.Spinner, { size: "sm", color: "accentText" })] })) : ("Continue") }))] }));
 }
-function BuyForTxUI(props) {
-    const chainNameQuery = (0, useChainQuery_js_1.useChainName)(props.buyForTx.tx.chain);
-    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xs" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", style: {
-                    justifyContent: "space-between",
-                }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", children: "Amount Needed" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", style: {
-                            alignItems: "flex-end",
-                        }, children: [(0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "xs", center: "y", children: [(0, jsx_runtime_1.jsxs)(text_js_1.Text, { color: "primaryText", size: "sm", children: [props.amountNeeded, " ", props.buyForTx.tokenSymbol] }), (0, jsx_runtime_1.jsx)(TokenIcon_js_1.TokenIcon, { chain: props.buyForTx.tx.chain, client: props.client, size: "sm", token: nativeToken_js_1.NATIVE_TOKEN })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xxs" }), chainNameQuery.name ? ((0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", children: chainNameQuery.name })) : ((0, jsx_runtime_1.jsx)(Skeleton_js_1.Skeleton, { height: index_js_1.fontSize.sm, width: "50px" }))] })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(basic_js_1.Line, {}), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", style: {
-                    justifyContent: "space-between",
-                }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", children: "Your Balance" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "xs", children: [(0, jsx_runtime_1.jsxs)(text_js_1.Text, { color: "primaryText", size: "sm", children: [(0, formatNumber_js_1.formatNumber)(Number((0, units_js_1.toEther)(props.buyForTx.balance)), 6), " ", props.buyForTx.tokenSymbol] }), (0, jsx_runtime_1.jsx)(TokenIcon_js_1.TokenIcon, { chain: props.buyForTx.tx.chain, client: props.client, size: "sm", token: nativeToken_js_1.NATIVE_TOKEN })] })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(basic_js_1.Line, {}), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xl" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { center: true, size: "sm", children: "Purchase" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xxs" })] }));
-}
 function createSupportedTokens(data, payOptions, supportedTokensOverrides) {
     const tokens = {};
     const isBuyWithFiatDisabled = payOptions.buyWithFiat === false;
     const isBuyWithCryptoDisabled = payOptions.buyWithCrypto === false;
+    // FIXME (pay) when buywithFiat is disabled, missing a bunch of tokens on base??
     for (const x of data) {
         tokens[x.chain.id] = x.tokens.filter((t) => {
             // it token supports both - include it