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

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

@@ -1,24 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { IdCardIcon } from "@radix-ui/react-icons";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../constants/addresses.js";
 import { isSwapRequiredPostOnramp } from "../../../../../../pay/buyWithFiat/isSwapRequiredPostOnramp.js";
 import { formatNumber } from "../../../../../../utils/formatNumber.js";
-import { toEther, toTokens } from "../../../../../../utils/units.js";
-import { fontSize, iconSize, spacing, } from "../../../../../core/design-system/index.js";
-import { useChainName } from "../../../../../core/hooks/others/useChainQuery.js";
+import { iconSize, spacing, } from "../../../../../core/design-system/index.js";
 import { useWalletBalance } from "../../../../../core/hooks/others/useWalletBalance.js";
 import { useBuyWithCryptoQuote } from "../../../../../core/hooks/pay/useBuyWithCryptoQuote.js";
 import { useBuyWithFiatQuote } from "../../../../../core/hooks/pay/useBuyWithFiatQuote.js";
-import { useActiveAccount } from "../../../../hooks/wallets/useActiveAccount.js";
+import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
 import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
 import { ChainName } from "../../../components/ChainName.js";
 import { Drawer, DrawerOverlay, useDrawer, } from "../../../components/Drawer.js";
-import { Skeleton } from "../../../components/Skeleton.js";
 import { Spacer } from "../../../components/Spacer.js";
 import { Spinner } from "../../../components/Spinner.js";
 import { SwitchNetworkButton } from "../../../components/SwitchNetwork.js";
-import { TokenIcon } from "../../../components/TokenIcon.js";
 import { Container, Line, ModalHeader } from "../../../components/basic.js";
 import { Button } from "../../../components/buttons.js";
 import { Text } from "../../../components/text.js";
@@ -28,22 +24,23 @@ import { ChainButton, NetworkSelectorContent } from "../../NetworkSelector.js";
 import { CoinsIcon } from "../../icons/CoinsIcon.js";
 import { TokenSelector } from "../TokenSelector.js";
 import { WalletSwitcherConnectionScreen } from "../WalletSwitcherConnectionScreen.js";
-import { NATIVE_TOKEN, isNativeToken, } from "../nativeToken.js";
+import { isNativeToken } from "../nativeToken.js";
+import { DirectPaymentModeScreen } from "./DirectPaymentModeScreen.js";
 import { EstimatedTimeAndFees } from "./EstimatedTimeAndFees.js";
 import { PayTokenIcon } from "./PayTokenIcon.js";
 import { PayWithCreditCard } from "./PayWIthCreditCard.js";
-import { ReceiverWalletDrawerScreen } from "./ReceiverWalletSelectionScreen.js";
+import { TransactionModeScreen } from "./TransactionModeScreen.js";
 import { WalletSelectorButton } from "./WalletSelectorButton.js";
 import { CurrencySelection } from "./fiat/CurrencySelection.js";
 import { FiatFlow } from "./fiat/FiatFlow.js";
-import { useBuyTxStates } from "./main/useBuyTxStates.js";
-import { useEnabledPaymentMethods } from "./main/useEnabledPaymentMethods.js";
+import { useEnabledPaymentMethods, } from "./main/useEnabledPaymentMethods.js";
 import { useUISelectionStates } from "./main/useUISelectionStates.js";
 import { openOnrampPopup } from "./openOnRamppopup.js";
 import { BuyTokenInput } from "./swap/BuyTokenInput.js";
 import { FiatFees, SwapFees } from "./swap/Fees.js";
 import { PayWithCrypto } from "./swap/PayWithCrypto.js";
 import { SwapFlow } from "./swap/SwapFlow.js";
+import { TransferFlow } from "./swap/TransferFlow.js";
 import { WalletSwitcherDrawerContent } from "./swap/WalletSwitcherDrawerContent.js";
 import { addPendingTx } from "./swap/pendingSwapTx.js";
 import { useBuySupportedDestinations, useBuySupportedSources, } from "./swap/useSwapSupportedChains.js";
@@ -56,23 +53,26 @@ export default function BuyScreen(props) {
     if (!supportedDestinationsQuery.data) {
         return _jsx(LoadingScreen, {});
     }
-    return (_jsx(BuyScreenContent, { ...props, onViewPendingTx: props.onViewPendingTx, supportedDestinations: supportedDestinationsQuery.data, buyForTx: props.buyForTx }));
+    return (_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 = useActiveAccount();
     const { payer, setPayer } = usePayerSetup();
     const [screen, setScreen] = useState({
         id: "main",
     });
     const [hasEditedAmount, setHasEditedAmount] = useState(false);
+    const onDone = useCallback(() => {
+        setScreen({ id: "main" });
+        props.onDone();
+    }, [props.onDone]);
     // UI selection
     const { tokenAmount, setTokenAmount, toChain, setToChain, deferredTokenAmount, fromChain, setFromChain, toToken, setToToken, fromToken, setFromToken, selectedCurrency, setSelectedCurrency, } = useUISelectionStates({
         payOptions,
-        buyForTx,
         supportedDestinations,
     });
     // check if the screen is expanded or not
@@ -93,6 +93,15 @@ function BuyScreenContent(props) {
         }
         return createSupportedTokens(supportedSourcesQuery.data, payOptions, props.supportedTokens);
     }, [props.supportedTokens, supportedSourcesQuery.data, payOptions]);
+    const enabledPaymentMethods = 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 (_jsx(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) => {
@@ -108,23 +117,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 (_jsx(SwapFlow, { title: props.title, isBuyForTx: !!props.buyForTx, isEmbed: props.isEmbed, client: client, onBack: () => {
+        return (_jsx(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 (_jsx(FiatFlow, { title: props.title, isBuyForTx: !!props.buyForTx, quote: screen.quote, onBack: () => {
+        return (_jsx(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 (_jsx(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);
@@ -136,8 +152,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 (_jsx(ChainSelectionScreen, { chains: chains, client: props.client, connectLocale: props.connectLocale, setChain: setToChain, goBack: goBack }));
         }
         return (_jsx(TokenSelector, { onBack: goBack, tokenList: ((toChain?.id ? destinationSupportedTokens[toChain.id] : undefined) ||
@@ -146,7 +164,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) => {
@@ -179,25 +197,55 @@ function BuyScreenContent(props) {
                 }
                 : undefined, connectLocale: connectLocale, client: client, modalTitle: "Pay with" }));
     }
-    return (_jsx(Container, { animate: "fadein", children: _jsxs("div", { children: [screen.id === "main" && (_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 (_jsx(Container, { animate: "fadein", children: _jsxs("div", { children: [screen.id === "main" && (_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 && (_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" && (_jsx(PaymentMethodSelection, { setScreen: (id) => setScreen({ id }) })), screen.id === "buy-with-crypto" && activeAccount && (_jsx(SwapScreenContent, { setScreen: setScreen, tokenAmount: deferredTokenAmount, toChain: toChain, toToken: toToken, fromChain: fromChain, fromToken: fromToken, showFromTokenSelector: () => {
+                    }, children: [screen.id === "select-payment-method" && (_jsx(PaymentMethodSelection, { setScreen: (id) => setScreen({ id }) })), screen.id === "select-wallet" && (_jsx(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 && (_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" && (_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" && (_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,
@@ -210,48 +258,79 @@ function SelectedTokenInfo(props) {
             }, children: [_jsxs(Container, { flex: "row", gap: "xs", center: "y", children: [_jsx(Text, { color: "primaryText", "data-testid": "tokenAmount", size: "xl", children: formatNumber(Number(props.tokenAmount), 6) }), _jsxs(Container, { flex: "row", gap: "xxs", center: "y", children: [_jsx(TokenSymbol, { token: props.selectedToken, chain: props.selectedChain, size: "md", color: "secondaryText" }), _jsx(PayTokenIcon, { chain: props.selectedChain, client: props.client, size: "sm", token: props.selectedToken })] })] }), _jsx(ChainName, { chain: props.selectedChain, client: props.client, size: "sm", short: true })] }) }));
 }
 function MainScreen(props) {
-    const { showPaymentSelection, buyWithCryptoEnabled, buyWithFiatEnabled } = 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 } = 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 (_jsxs(Container, { p: "lg", children: [_jsx(ModalHeader, { title: props.buyForTx
-                    ? `Not enough ${props.buyForTx.tokenSymbol}`
-                    : props.title, onBack: props.onBack }), amountNeeded && props.buyForTx ? (_jsxs(_Fragment, { children: [_jsx(Spacer, { y: "lg" }), _jsx(BuyForTxUI, { amountNeeded: String(formatNumber(Number(toTokens(amountNeeded, props.buyForTx.tokenDecimals)), 6)), buyForTx: props.buyForTx, client: client })] })) : (_jsx(Spacer, { y: "xl" })), _jsx(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 }), _jsx(Spacer, { y: "xl" }), _jsxs(Container, { flex: "column", gap: "sm", children: [!payerAccount ? (_jsx("div", { children: _jsx(ConnectButton, { ...props.connectOptions, client: props.client, theme: props.theme, connectButton: {
-                                style: {
-                                    width: "100%",
-                                },
-                            } }) })) : (_jsx(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 && (_jsx(Button, { variant: "outline", fullWidth: true, style: {
-                            padding: spacing.xs,
-                            fontSize: fontSize.sm,
-                        }, onClick: props.onViewPendingTx, children: "View all transactions" }))] })] }));
+    switch (payOptions.mode) {
+        case "transaction": {
+            return (_jsx(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 (_jsx(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 (_jsxs(Container, { p: "lg", children: [_jsx(ModalHeader, { title: props.title, onBack: props.onBack }), _jsx(Spacer, { y: "xl" }), _jsx(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 }), _jsx(Spacer, { y: "xl" }), _jsx(Container, { flex: "column", gap: "sm", children: !payerAccount ? (_jsx("div", { children: _jsx(ConnectButton, { ...props.connectOptions, client: props.client, theme: props.theme, connectButton: {
+                                    style: {
+                                        width: "100%",
+                                    },
+                                } }) })) : (_jsx(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 (_jsxs(Container, { children: [_jsx(Container, { p: "lg", children: _jsx(ModalHeader, { title: props.title, onBack: props.onBack }) }), _jsxs(Container, { px: "lg", style: {
@@ -265,13 +344,14 @@ function PaymentMethodSelection(props) {
                     }, children: [_jsx(Container, { color: "secondaryText", flex: "row", center: "both", children: _jsx(IdCardIcon, { style: {
                                     width: iconSize.md,
                                     height: iconSize.md,
-                                } }) }), _jsxs(Container, { flex: "column", gap: "xxs", children: [_jsx(Text, { size: "md", color: "primaryText", children: "Credit Card" }), _jsx(Text, { size: "xs", children: "Easily and securely make payments" })] })] }), _jsxs(Button, { variant: "outline", bg: "tertiaryBg", onClick: () => props.setScreen("buy-with-crypto"), style: {
+                                } }) }), _jsxs(Container, { flex: "column", gap: "xxs", children: [_jsx(Text, { size: "md", color: "primaryText", children: "Credit Card" }), _jsx(Text, { size: "xs", children: "Securely pay with credit card" })] })] }), _jsxs(Button, { variant: "outline", bg: "tertiaryBg", onClick: () => props.setScreen("select-wallet"), style: {
                         justifyContent: "flex-start",
-                    }, gap: "sm", children: [_jsx(Container, { color: "secondaryText", flex: "row", center: "both", children: _jsx(CoinsIcon, { size: iconSize.md }) }), _jsxs(Container, { flex: "column", gap: "xxs", children: [_jsx(Text, { size: "md", color: "primaryText", children: "Crypto" }), _jsx(Text, { size: "xs", children: "Pay with confidence using crypto" })] })] })] }) }));
+                    }, gap: "sm", children: [_jsx(Container, { color: "secondaryText", flex: "row", center: "both", children: _jsx(CoinsIcon, { size: iconSize.md }) }), _jsxs(Container, { flex: "column", gap: "xxs", children: [_jsx(Text, { size: "md", color: "primaryText", children: "Crypto" }), _jsx(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] = 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 } = useDrawer();
     const [drawerScreen, setDrawerScreen] = useState("fees");
     const fromTokenBalanceQuery = useWalletBalance({
@@ -280,7 +360,15 @@ function SwapScreenContent(props) {
         tokenAddress: isNativeToken(fromToken) ? undefined : fromToken.address,
         client,
     });
-    const quoteParams = tokenAmount && !(fromChain.id === toChain.id && fromToken === toToken)
+    const fromTokenId = isNativeToken(fromToken)
+        ? NATIVE_TOKEN_ADDRESS
+        : fromToken.address.toLowerCase();
+    const toTokenId = isNativeToken(toToken)
+        ? NATIVE_TOKEN_ADDRESS
+        : toToken.address.toLowerCase();
+    const swapRequired = !!tokenAmount &&
+        !(fromChain.id === toChain.id && fromTokenId === toTokenId);
+    const quoteParams = swapRequired
         ? {
             // wallets
             fromAddress: payer.account.address,
@@ -306,11 +394,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) {
@@ -333,6 +423,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;
         }
@@ -348,40 +454,12 @@ function SwapScreenContent(props) {
         setIsOpen(true);
         setDrawerScreen("fees");
     }
-    const prefillSource = payOptions.buyWithCrypto !== false
-        ? payOptions.buyWithCrypto?.prefillSource
-        : undefined;
-    const disableReceiverSelection = !!props.payOptions.recipientAddress;
-    return (_jsxs(Container, { flex: "column", gap: "md", animate: "fadein", children: [isOpen && (_jsxs(_Fragment, { children: [_jsx(DrawerOverlay, { ref: drawerOverlayRef }), _jsxs(Drawer, { ref: drawerRef, close: () => setIsOpen(false), children: [drawerScreen === "fees" && quoteQuery.data && (_jsxs("div", { children: [_jsx(Text, { size: "lg", color: "primaryText", children: "Fees" }), _jsx(Spacer, { y: "lg" }), _jsx(SwapFees, { quote: quoteQuery.data, align: "left" })] })), drawerScreen === "receiver" && (_jsx(ReceiverWalletDrawerScreen, { client: props.client, onSelect: (x) => setReceiverAddress(x), receiverAddress: receiverAddress, onBack: () => setIsOpen(false) })), drawerScreen === "payer" && (_jsx(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 }))] })] })), _jsxs("div", { children: [_jsx(WalletSelectorButton, { client: props.client, onClick: () => {
-                            setIsOpen(true);
-                            setDrawerScreen("payer");
+    return (_jsxs(Container, { flex: "column", gap: "md", animate: "fadein", children: [isOpen && (_jsxs(_Fragment, { children: [_jsx(DrawerOverlay, { ref: drawerOverlayRef }), _jsx(Drawer, { ref: drawerRef, close: () => setIsOpen(false), children: drawerScreen === "fees" && quoteQuery.data && (_jsxs("div", { children: [_jsx(Text, { size: "lg", color: "primaryText", children: "Fees" }), _jsx(Spacer, { y: "lg" }), _jsx(SwapFees, { quote: quoteQuery.data, align: "left" })] })) })] })), _jsxs("div", { children: [_jsx(WalletSelectorButton, { client: props.client, onClick: () => {
+                            setScreen({ id: "select-wallet" });
                         }, address: props.payer.account.address, walletId: props.payer.wallet.id, containerStyle: {
                             borderBottomRightRadius: 0,
                             borderBottomLeftRadius: 0,
-                        } }), _jsx(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 }), _jsx(EstimatedTimeAndFees, { quoteIsLoading: quoteQuery.isLoading, estimatedSeconds: quoteQuery.data?.swapDetails.estimated.durationSeconds, onViewFees: showFees }), _jsx(Spacer, { y: "md" }), _jsx(Text, { size: "sm", children: "Send to" }), _jsx(Spacer, { y: "xs" }), _jsx(WalletSelectorButton, { client: props.client, disabled: disableReceiverSelection, disableChevron: disableReceiverSelection, onClick: () => {
-                            setIsOpen(true);
-                            setDrawerScreen("receiver");
-                        }, address: receiverAddress, walletId: undefined })] }), errorMsg && (_jsxs("div", { children: [errorMsg.minAmount && (_jsxs(Text, { color: "danger", size: "sm", center: true, multiline: true, children: ["Minimum amount is ", errorMsg.minAmount, " ", _jsx(TokenSymbol, { token: toToken, chain: toChain, size: "sm", inline: true, color: "danger" })] })), errorMsg.msg?.map((msg) => (_jsx(Text, { color: "danger", size: "sm", center: true, multiline: true, children: msg }, msg)))] })), errorMsg?.minAmount ? (_jsx(Button, { variant: "accent", fullWidth: true, onClick: () => {
+                        } }), _jsx(PayWithCrypto, { value: sourceTokenAmount || "", onSelectToken: showFromTokenSelector, chain: fromChain, token: fromToken, isLoading: quoteQuery.isLoading && !sourceTokenAmount, client: client, freezeChainAndTokenSelection: disableTokenSelection, payerAccount: props.payer.account, swapRequired: swapRequired }), swapRequired && (_jsx(EstimatedTimeAndFees, { quoteIsLoading: quoteQuery.isLoading, estimatedSeconds: quoteQuery.data?.swapDetails.estimated.durationSeconds, onViewFees: showFees })), _jsx(Spacer, { y: "md" })] }), errorMsg && (_jsxs("div", { children: [errorMsg.minAmount && (_jsxs(Text, { color: "danger", size: "sm", center: true, multiline: true, children: ["Minimum amount is ", errorMsg.minAmount, " ", _jsx(TokenSymbol, { token: toToken, chain: toChain, size: "sm", inline: true, color: "danger" })] })), errorMsg.msg?.map((msg) => (_jsx(Text, { color: "danger", size: "sm", center: true, multiline: true, children: msg }, msg)))] })), !errorMsg && isNotEnoughBalance && (_jsxs("div", { children: [_jsx(Text, { color: "danger", size: "sm", center: true, multiline: true, children: "Not enough funds." }), _jsx(Text, { color: "danger", size: "sm", center: true, multiline: true, children: "Try a different wallet or token." })] })), errorMsg?.minAmount ? (_jsx(Button, { variant: "accent", fullWidth: true, onClick: () => {
                     props.setTokenAmount(String(errorMsg.minAmount));
                     props.setHasEditedAmount(true);
                 }, children: "Set Minimum" })) : switchChainRequired &&
@@ -393,11 +471,12 @@ function SwapScreenContent(props) {
                     if (!disableContinue) {
                         showSwapFlow();
                     }
-                }, gap: "xs", children: isNotEnoughBalance ? (_jsx(Text, { color: "danger", children: "Not Enough Funds" })) : quoteQuery.isLoading ? (_jsxs(_Fragment, { children: ["Getting price quote", _jsx(Spinner, { size: "sm", color: "accentText" })] })) : ("Continue") }))] }));
+                }, gap: "xs", children: quoteQuery.isLoading ? (_jsxs(_Fragment, { children: ["Getting price quote", _jsx(Spinner, { size: "sm", color: "accentText" })] })) : ("Continue") }))] }));
 }
 function FiatScreenContent(props) {
     const { toToken, tokenAmount, payer, client, setScreen, toChain, showCurrencySelector, selectedCurrency, } = props;
-    const [receiverAddress, setReceiverAddress] = 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 } = useDrawer();
     const [drawerScreen, setDrawerScreen] = useState("fees");
     const buyWithFiatOptions = props.payOptions.buyWithFiat;
@@ -460,32 +539,19 @@ function FiatScreenContent(props) {
         };
     }
     const disableSubmit = !fiatQuoteQuery.data;
-    const disableReceiverSelection = !!props.payOptions.recipientAddress;
     const errorMsg = !fiatQuoteQuery.isLoading && fiatQuoteQuery.error
         ? getErrorMessage(fiatQuoteQuery.error)
         : undefined;
-    return (_jsxs(Container, { flex: "column", gap: "md", animate: "fadein", children: [isOpen && (_jsxs(_Fragment, { children: [_jsx(DrawerOverlay, { ref: drawerOverlayRef }), _jsxs(Drawer, { ref: drawerRef, close: () => setIsOpen(false), children: [drawerScreen === "fees" && fiatQuoteQuery.data && (_jsxs("div", { children: [_jsx(Text, { size: "lg", color: "primaryText", children: "Fees" }), _jsx(Spacer, { y: "lg" }), _jsx(FiatFees, { quote: fiatQuoteQuery.data })] })), drawerScreen === "receiver" && (_jsx(ReceiverWalletDrawerScreen, { client: props.client, onSelect: (x) => setReceiverAddress(x), receiverAddress: receiverAddress, onBack: () => setIsOpen(false) }))] })] })), _jsxs("div", { children: [_jsx(PayWithCreditCard, { isLoading: fiatQuoteQuery.isLoading, value: fiatQuoteQuery.data?.fromCurrencyWithFees.amount, client: client, currency: selectedCurrency, onSelectCurrency: showCurrencySelector }), _jsx(EstimatedTimeAndFees, { quoteIsLoading: fiatQuoteQuery.isLoading, estimatedSeconds: fiatQuoteQuery.data?.estimatedDurationSeconds, onViewFees: showFees }), _jsx(Spacer, { y: "md" }), _jsx(Text, { size: "sm", children: "Send to" }), _jsx(Spacer, { y: "xs" }), _jsx(WalletSelectorButton, { client: props.client, onClick: () => {
-                            setDrawerScreen("receiver");
-                            setIsOpen(true);
-                        }, address: receiverAddress, disabled: disableReceiverSelection, disableChevron: disableReceiverSelection, walletId: undefined })] }), errorMsg && (_jsxs("div", { children: [errorMsg.minAmount && (_jsxs(Text, { color: "danger", size: "sm", center: true, multiline: true, children: ["Minimum amount is ", errorMsg.minAmount, " ", _jsx(TokenSymbol, { token: toToken, chain: toChain, size: "sm", inline: true, color: "danger" })] })), errorMsg.msg?.map((msg) => (_jsx(Text, { color: "danger", size: "sm", center: true, multiline: true, children: msg }, msg)))] })), errorMsg?.minAmount ? (_jsx(Button, { variant: "accent", fullWidth: true, onClick: () => {
+    return (_jsxs(Container, { flex: "column", gap: "md", animate: "fadein", children: [isOpen && (_jsxs(_Fragment, { children: [_jsx(DrawerOverlay, { ref: drawerOverlayRef }), _jsx(Drawer, { ref: drawerRef, close: () => setIsOpen(false), children: drawerScreen === "fees" && fiatQuoteQuery.data && (_jsxs("div", { children: [_jsx(Text, { size: "lg", color: "primaryText", children: "Fees" }), _jsx(Spacer, { y: "lg" }), _jsx(FiatFees, { quote: fiatQuoteQuery.data })] })) })] })), _jsxs("div", { children: [_jsx(PayWithCreditCard, { isLoading: fiatQuoteQuery.isLoading, value: fiatQuoteQuery.data?.fromCurrencyWithFees.amount, client: client, currency: selectedCurrency, onSelectCurrency: showCurrencySelector }), _jsx(EstimatedTimeAndFees, { quoteIsLoading: fiatQuoteQuery.isLoading, estimatedSeconds: fiatQuoteQuery.data?.estimatedDurationSeconds, onViewFees: showFees }), _jsx(Spacer, { y: "md" })] }), errorMsg && (_jsxs("div", { children: [errorMsg.minAmount && (_jsxs(Text, { color: "danger", size: "sm", center: true, multiline: true, children: ["Minimum amount is ", errorMsg.minAmount, " ", _jsx(TokenSymbol, { token: toToken, chain: toChain, size: "sm", inline: true, color: "danger" })] })), errorMsg.msg?.map((msg) => (_jsx(Text, { color: "danger", size: "sm", center: true, multiline: true, children: msg }, msg)))] })), errorMsg?.minAmount ? (_jsx(Button, { variant: "accent", fullWidth: true, onClick: () => {
                     props.setTokenAmount(String(errorMsg.minAmount));
                     props.setHasEditedAmount(true);
                 }, children: "Set Minimum" })) : (_jsx(Button, { variant: disableSubmit ? "outline" : "accent", "data-disabled": disableSubmit, disabled: disableSubmit, fullWidth: true, onClick: handleSubmit, gap: "xs", children: fiatQuoteQuery.isLoading ? (_jsxs(_Fragment, { children: ["Getting price quote", _jsx(Spinner, { size: "sm", color: "accentText" })] })) : ("Continue") }))] }));
 }
-function BuyForTxUI(props) {
-    const chainNameQuery = useChainName(props.buyForTx.tx.chain);
-    return (_jsxs(Container, { children: [_jsx(Spacer, { y: "xs" }), _jsxs(Container, { flex: "row", style: {
-                    justifyContent: "space-between",
-                }, children: [_jsx(Text, { size: "sm", children: "Amount Needed" }), _jsxs(Container, { flex: "column", style: {
-                            alignItems: "flex-end",
-                        }, children: [_jsxs(Container, { flex: "row", gap: "xs", center: "y", children: [_jsxs(Text, { color: "primaryText", size: "sm", children: [props.amountNeeded, " ", props.buyForTx.tokenSymbol] }), _jsx(TokenIcon, { chain: props.buyForTx.tx.chain, client: props.client, size: "sm", token: NATIVE_TOKEN })] }), _jsx(Spacer, { y: "xxs" }), chainNameQuery.name ? (_jsx(Text, { size: "sm", children: chainNameQuery.name })) : (_jsx(Skeleton, { height: fontSize.sm, width: "50px" }))] })] }), _jsx(Spacer, { y: "md" }), _jsx(Line, {}), _jsx(Spacer, { y: "md" }), _jsxs(Container, { flex: "row", style: {
-                    justifyContent: "space-between",
-                }, children: [_jsx(Text, { size: "sm", children: "Your Balance" }), _jsxs(Container, { flex: "row", gap: "xs", children: [_jsxs(Text, { color: "primaryText", size: "sm", children: [formatNumber(Number(toEther(props.buyForTx.balance)), 6), " ", props.buyForTx.tokenSymbol] }), _jsx(TokenIcon, { chain: props.buyForTx.tx.chain, client: props.client, size: "sm", token: NATIVE_TOKEN })] })] }), _jsx(Spacer, { y: "md" }), _jsx(Line, {}), _jsx(Spacer, { y: "xl" }), _jsx(Text, { center: true, size: "sm", children: "Purchase" }), _jsx(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