thirdweb 5.39.0 → 5.40.0

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -1,21 +1,21 @@
 import { IdCardIcon } from "@radix-ui/react-icons";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import type { Chain } from "../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../constants/addresses.js";
 import type { GetBuyWithCryptoQuoteParams } from "../../../../../../pay/buyWithCrypto/getQuote.js";
 import { isSwapRequiredPostOnramp } from "../../../../../../pay/buyWithFiat/isSwapRequiredPostOnramp.js";
 import { formatNumber } from "../../../../../../utils/formatNumber.js";
-import { toEther, toTokens } from "../../../../../../utils/units.js";
 import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
 import {
   type Theme,
-  fontSize,
   iconSize,
   spacing,
 } from "../../../../../core/design-system/index.js";
-import type { PayUIOptions } from "../../../../../core/hooks/connection/ConnectButtonProps.js";
-import { useChainName } from "../../../../../core/hooks/others/useChainQuery.js";
+import type {
+  FundWalletOptions,
+  PayUIOptions,
+} from "../../../../../core/hooks/connection/ConnectButtonProps.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";
@@ -29,11 +29,9 @@ import {
   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";
@@ -44,28 +42,28 @@ import { CoinsIcon } from "../../icons/CoinsIcon.js";
 import type { ConnectLocale } from "../../locale/types.js";
 import { TokenSelector } from "../TokenSelector.js";
 import { WalletSwitcherConnectionScreen } from "../WalletSwitcherConnectionScreen.js";
-import {
-  type ERC20OrNativeToken,
-  NATIVE_TOKEN,
-  isNativeToken,
-} from "../nativeToken.js";
+import { type ERC20OrNativeToken, 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 type { CurrencyMeta } from "./fiat/currencies.js";
-import type { BuyForTx, SelectedScreen } from "./main/types.js";
-import { useBuyTxStates } from "./main/useBuyTxStates.js";
-import { useEnabledPaymentMethods } from "./main/useEnabledPaymentMethods.js";
+import type { SelectedScreen } from "./main/types.js";
+import {
+  type PaymentMethods,
+  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 {
@@ -80,10 +78,8 @@ export type BuyScreenProps = {
   title: string;
   onBack: (() => void) | undefined;
   supportedTokens: SupportedTokens | undefined;
-  onViewPendingTx: () => void;
   client: ThirdwebClient;
   connectLocale: ConnectLocale;
-  buyForTx: BuyForTx | undefined;
   payOptions: PayUIOptions;
   theme: "light" | "dark" | Theme;
   onDone: () => void;
@@ -104,9 +100,7 @@ export default function BuyScreen(props: BuyScreenProps) {
   return (
     <BuyScreenContent
       {...props}
-      onViewPendingTx={props.onViewPendingTx}
       supportedDestinations={supportedDestinationsQuery.data}
-      buyForTx={props.buyForTx}
     />
   );
 }
@@ -116,10 +110,8 @@ type BuyScreenContentProps = {
   client: ThirdwebClient;
   onBack?: () => void;
   supportedTokens?: SupportedTokens;
-  onViewPendingTx: () => void;
   supportedDestinations: SupportedChainAndTokens;
   connectLocale: ConnectLocale;
-  buyForTx?: BuyForTx;
   theme: "light" | "dark" | Theme;
   payOptions: PayUIOptions;
   onDone: () => void;
@@ -131,8 +123,7 @@ type BuyScreenContentProps = {
  * @internal
  */
 function BuyScreenContent(props: BuyScreenContentProps) {
-  const { client, supportedDestinations, connectLocale, payOptions, buyForTx } =
-    props;
+  const { client, supportedDestinations, connectLocale, payOptions } = props;
 
   const activeAccount = useActiveAccount();
   const { payer, setPayer } = usePayerSetup();
@@ -143,6 +134,11 @@ function BuyScreenContent(props: BuyScreenContentProps) {
 
   const [hasEditedAmount, setHasEditedAmount] = useState(false);
 
+  const onDone = useCallback(() => {
+    setScreen({ id: "main" });
+    props.onDone();
+  }, [props.onDone]);
+
   // UI selection
   const {
     tokenAmount,
@@ -160,7 +156,6 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     setSelectedCurrency,
   } = useUISelectionStates({
     payOptions,
-    buyForTx,
     supportedDestinations,
   });
 
@@ -195,6 +190,18 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     );
   }, [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") {
@@ -231,7 +238,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     return (
       <SwapFlow
         title={props.title}
-        isBuyForTx={!!props.buyForTx}
+        transactionMode={payOptions.mode === "transaction"}
         isEmbed={props.isEmbed}
         client={client}
         onBack={() => {
@@ -241,9 +248,8 @@ function BuyScreenContent(props: BuyScreenContentProps) {
         }}
         buyWithCryptoQuote={screen.quote}
         payer={payer}
-        onViewPendingTx={props.onViewPendingTx}
         isFiatFlow={false}
-        onDone={props.onDone}
+        onDone={onDone}
         onTryAgain={() => {
           setScreen({
             id: "buy-with-crypto",
@@ -257,7 +263,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     return (
       <FiatFlow
         title={props.title}
-        isBuyForTx={!!props.buyForTx}
+        transactionMode={payOptions.mode === "transaction"}
         quote={screen.quote}
         onBack={() => {
           setScreen({
@@ -270,15 +276,37 @@ function BuyScreenContent(props: BuyScreenContentProps) {
           props.payOptions.buyWithFiat?.testMode === true
         }
         theme={typeof props.theme === "string" ? props.theme : props.theme.type}
-        onViewPendingTx={props.onViewPendingTx}
         openedWindow={screen.openedWindow}
-        onDone={props.onDone}
+        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 as Extract<PayUIOptions, { mode: "direct_payment" }>
+    )?.paymentInfo?.sellerAddress;
+    const receiverAddress = defaultRecipientAddress || activeAccount.address;
+    return (
+      <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);
     return (
@@ -295,8 +323,10 @@ function BuyScreenContent(props: BuyScreenContentProps) {
   if (screen.id === "select-to-token") {
     const chains = supportedDestinations.map((x) => x.chain);
     const goBack = () => setScreen(screen.backScreen);
+    const allowEdits = (payOptions as FundWalletOptions)?.prefillBuy
+      ?.allowEdits;
     // if token selection is disabled - only show network selector screen
-    if (payOptions.prefillBuy?.allowEdits?.token === false) {
+    if (allowEdits?.token === false) {
       return (
         <ChainSelectionScreen
           chains={chains}
@@ -322,7 +352,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
         chain={toChain}
         chainSelection={
           // hide chain selection if it's disabled
-          payOptions.prefillBuy?.allowEdits?.chain !== false
+          allowEdits?.chain !== false
             ? {
                 chains: chains,
                 select: (c) => {
@@ -397,28 +427,32 @@ function BuyScreenContent(props: BuyScreenContentProps) {
           <MainScreen
             title={props.title}
             payerAccount={payer?.account}
-            buyForTx={buyForTx}
             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}
-            onViewPendingTx={props.onViewPendingTx}
             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 && (
@@ -430,11 +464,14 @@ function BuyScreenContent(props: BuyScreenContentProps) {
               client={client}
               onBack={() => {
                 if (
-                  screen.id === "buy-with-crypto" ||
-                  screen.id === "buy-with-fiat"
+                  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" });
                 }
               }}
@@ -443,6 +480,38 @@ function BuyScreenContent(props: BuyScreenContentProps) {
                 <PaymentMethodSelection setScreen={(id) => setScreen({ id })} />
               )}
 
+              {screen.id === "select-wallet" && (
+                <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 && (
                 <SwapScreenContent
                   setScreen={setScreen}
@@ -458,11 +527,9 @@ function BuyScreenContent(props: BuyScreenContentProps) {
                     });
                   }}
                   payer={payer}
-                  buyForTx={buyForTx || null}
                   client={client}
                   isEmbed={props.isEmbed}
-                  onDone={props.onDone}
-                  onViewPendingTx={props.onViewPendingTx}
+                  onDone={onDone}
                   payOptions={payOptions}
                   connectLocale={connectLocale}
                   connectOptions={props.connectOptions}
@@ -471,6 +538,14 @@ function BuyScreenContent(props: BuyScreenContentProps) {
                   activeAccount={activeAccount}
                   setTokenAmount={setTokenAmount}
                   setHasEditedAmount={setHasEditedAmount}
+                  disableTokenSelection={
+                    payDisabled === true ||
+                    (payOptions.buyWithCrypto !== false &&
+                      payOptions.buyWithCrypto?.prefillSource?.allowEdits
+                        ?.chain === false &&
+                      payOptions.buyWithCrypto?.prefillSource?.allowEdits
+                        ?.token === false)
+                  }
                 />
               )}
 
@@ -481,11 +556,9 @@ function BuyScreenContent(props: BuyScreenContentProps) {
                   toChain={toChain}
                   toToken={toToken}
                   selectedCurrency={selectedCurrency}
-                  buyForTx={buyForTx || null}
                   client={client}
                   isEmbed={props.isEmbed}
-                  onDone={props.onDone}
-                  onViewPendingTx={props.onViewPendingTx}
+                  onDone={onDone}
                   payOptions={payOptions}
                   theme={props.theme}
                   showCurrencySelector={() => {
@@ -556,9 +629,12 @@ function SelectedTokenInfo(props: {
 
 function MainScreen(props: {
   title: string;
-  buyForTx: BuyForTx | undefined;
   client: ThirdwebClient;
   setTokenAmount: (amount: string) => void;
+  setFromChain: (chain: Chain) => void;
+  setFromToken: (token: ERC20OrNativeToken) => void;
+  setToChain: (chain: Chain) => void;
+  setToToken: (token: ERC20OrNativeToken) => void;
   payerAccount: Account | undefined;
   tokenAmount: string;
   payOptions: PayUIOptions;
@@ -566,148 +642,159 @@ function MainScreen(props: {
   toChain: Chain;
   onSelectBuyToken: () => void;
   connectOptions: PayEmbedConnectOptions | undefined;
-  onViewPendingTx: () => void;
   setScreen: (screen: SelectedScreen) => void;
   supportedDestinations: SupportedChainAndTokens;
   onBack: (() => void) | undefined;
   theme: "light" | "dark" | Theme;
   hasEditedAmount: boolean;
   setHasEditedAmount: (hasEdited: boolean) => void;
+  enabledPaymentMethods: PaymentMethods;
 }) {
-  const { showPaymentSelection, buyWithCryptoEnabled, buyWithFiatEnabled } =
-    useEnabledPaymentMethods({
-      payOptions: props.payOptions,
-      supportedDestinations: props.supportedDestinations,
-      toChain: props.toChain,
-      toToken: props.toToken,
-    });
-
   const {
-    buyForTx,
     setTokenAmount,
+    setToChain,
+    setToToken,
+    setFromChain,
+    setFromToken,
     payerAccount,
     client,
     tokenAmount,
     payOptions,
     toToken,
     toChain,
+    supportedDestinations,
+    enabledPaymentMethods,
   } = props;
 
-  // Buy Transaction flow states
-  const { amountNeeded } = useBuyTxStates({
-    setTokenAmount,
-    buyForTx: buyForTx || null,
-    hasEditedAmount: props.hasEditedAmount,
-    account: payerAccount || null,
-  });
-
+  const { showPaymentSelection, buyWithCryptoEnabled, buyWithFiatEnabled } =
+    enabledPaymentMethods;
   const disableContinue = !tokenAmount;
 
-  return (
-    <Container p="lg">
-      <ModalHeader
-        title={
-          props.buyForTx
-            ? `Not enough ${props.buyForTx.tokenSymbol}`
-            : props.title
-        }
-        onBack={props.onBack}
-      />
-
-      {/* Amount needed for Send Tx */}
-      {amountNeeded && props.buyForTx ? (
-        <>
-          <Spacer y="lg" />
-          <BuyForTxUI
-            amountNeeded={String(
-              formatNumber(
-                Number(toTokens(amountNeeded, props.buyForTx.tokenDecimals)),
-                6,
-              ),
-            )}
-            buyForTx={props.buyForTx}
-            client={client}
-          />
-        </>
-      ) : (
-        <Spacer y="xl" />
-      )}
-
-      {/* To */}
-      <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}
-      />
+  switch (payOptions.mode) {
+    case "transaction": {
+      return (
+        <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 (
+        <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 (
+        <Container p="lg">
+          <ModalHeader title={props.title} onBack={props.onBack} />
 
-      <Spacer y="xl" />
+          <Spacer y="xl" />
 
-      {/* Continue */}
-      <Container flex="column" gap="sm">
-        {!payerAccount ? (
-          <div>
-            <ConnectButton
-              {...props.connectOptions}
-              client={props.client}
-              theme={props.theme}
-              connectButton={{
-                style: {
-                  width: "100%",
-                },
-              }}
-            />
-          </div>
-        ) : (
-          <Button
-            variant="accent"
-            fullWidth
-            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");
-              }
+          {/* To */}
+          <BuyTokenInput
+            value={tokenAmount}
+            onChange={async (value) => {
+              props.setHasEditedAmount(true);
+              setTokenAmount(value);
             }}
-          >
-            Continue
-          </Button>
-        )}
+            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}
+          />
 
-        {/* Do we want to remove this? */}
-        {payerAccount && (
-          <Button
-            variant="outline"
-            fullWidth
-            style={{
-              padding: spacing.xs,
-              fontSize: fontSize.sm,
-            }}
-            onClick={props.onViewPendingTx}
-          >
-            View all transactions
-          </Button>
-        )}
-      </Container>
-    </Container>
-  );
+          <Spacer y="xl" />
+
+          {/* Continue */}
+          <Container flex="column" gap="sm">
+            {!payerAccount ? (
+              <div>
+                <ConnectButton
+                  {...props.connectOptions}
+                  client={props.client}
+                  theme={props.theme}
+                  connectButton={{
+                    style: {
+                      width: "100%",
+                    },
+                  }}
+                />
+              </div>
+            ) : (
+              <Button
+                variant="accent"
+                fullWidth
+                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");
+                  }
+                }}
+              >
+                Continue
+              </Button>
+            )}
+          </Container>
+        </Container>
+      );
+    }
+  }
 }
 
 function TokenSelectedLayout(props: {
@@ -753,7 +840,7 @@ function TokenSelectedLayout(props: {
 }
 
 function PaymentMethodSelection(props: {
-  setScreen: (screenId: "buy-with-crypto" | "buy-with-fiat") => void;
+  setScreen: (screenId: "select-wallet" | "buy-with-fiat") => void;
 }) {
   return (
     <Container animate="fadein">
@@ -782,7 +869,7 @@ function PaymentMethodSelection(props: {
             <Text size="md" color="primaryText">
               Credit Card
             </Text>
-            <Text size="xs">Easily and securely make payments</Text>
+            <Text size="xs">Securely pay with credit card</Text>
           </Container>
         </Button>
 
@@ -790,7 +877,7 @@ function PaymentMethodSelection(props: {
         <Button
           variant="outline"
           bg="tertiaryBg"
-          onClick={() => props.setScreen("buy-with-crypto")}
+          onClick={() => props.setScreen("select-wallet")}
           style={{
             justifyContent: "flex-start",
           }}
@@ -804,7 +891,7 @@ function PaymentMethodSelection(props: {
             <Text size="md" color="primaryText">
               Crypto
             </Text>
-            <Text size="xs">Pay with confidence using crypto</Text>
+            <Text size="xs">Pay with your connected wallet</Text>
           </Container>
         </Button>
       </Container>
@@ -823,9 +910,7 @@ function SwapScreenContent(props: {
   payer: PayerInfo;
   client: ThirdwebClient;
   payOptions: PayUIOptions;
-  buyForTx: BuyForTx | null;
   isEmbed: boolean;
-  onViewPendingTx: () => void;
   onDone: () => void;
   connectOptions: PayEmbedConnectOptions | undefined;
   connectLocale: ConnectLocale;
@@ -833,6 +918,7 @@ function SwapScreenContent(props: {
   activeAccount: Account;
   setTokenAmount: (amount: string) => void;
   setHasEditedAmount: (hasEdited: boolean) => void;
+  disableTokenSelection: boolean;
 }) {
   const {
     setScreen,
@@ -845,11 +931,14 @@ function SwapScreenContent(props: {
     fromToken,
     showFromTokenSelector,
     payOptions,
+    disableTokenSelection,
   } = props;
 
-  const [receiverAddress, setReceiverAddress] = useState(
-    props.payOptions.recipientAddress || props.activeAccount.address,
-  );
+  const defaultRecipientAddress = (
+    props.payOptions as Extract<PayUIOptions, { mode: "direct_payment" }>
+  )?.paymentInfo?.sellerAddress;
+  const receiverAddress =
+    defaultRecipientAddress || props.activeAccount.address;
   const { drawerRef, drawerOverlayRef, isOpen, setIsOpen } = useDrawer();
   const [drawerScreen, setDrawerScreen] = useState<
     "fees" | "receiver" | "payer"
@@ -862,27 +951,35 @@ function SwapScreenContent(props: {
     client,
   });
 
-  const quoteParams: GetBuyWithCryptoQuoteParams | undefined =
-    tokenAmount && !(fromChain.id === toChain.id && fromToken === toToken)
-      ? {
-          // wallets
-          fromAddress: payer.account.address,
-          toAddress: receiverAddress,
-          // from
-          fromChainId: fromChain.id,
-          fromTokenAddress: isNativeToken(fromToken)
-            ? NATIVE_TOKEN_ADDRESS
-            : fromToken.address,
-          // to
-          toChainId: toChain.id,
-          toTokenAddress: isNativeToken(toToken)
-            ? NATIVE_TOKEN_ADDRESS
-            : toToken.address,
-          toAmount: tokenAmount,
-          client,
-          purchaseData: payOptions.purchaseData,
-        }
-      : undefined;
+  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: GetBuyWithCryptoQuoteParams | undefined = swapRequired
+    ? {
+        // wallets
+        fromAddress: payer.account.address,
+        toAddress: receiverAddress,
+        // from
+        fromChainId: fromChain.id,
+        fromTokenAddress: isNativeToken(fromToken)
+          ? NATIVE_TOKEN_ADDRESS
+          : fromToken.address,
+        // to
+        toChainId: toChain.id,
+        toTokenAddress: isNativeToken(toToken)
+          ? NATIVE_TOKEN_ADDRESS
+          : toToken.address,
+        toAmount: tokenAmount,
+        client,
+        purchaseData: payOptions.purchaseData,
+      }
+    : undefined;
 
   const quoteQuery = useBuyWithCryptoQuote(quoteParams, {
     // refetch every 30 seconds
@@ -891,14 +988,17 @@ function SwapScreenContent(props: {
     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>
@@ -935,6 +1035,25 @@ function SwapScreenContent(props: {
       : 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;
     }
@@ -954,13 +1073,6 @@ function SwapScreenContent(props: {
     setDrawerScreen("fees");
   }
 
-  const prefillSource =
-    payOptions.buyWithCrypto !== false
-      ? payOptions.buyWithCrypto?.prefillSource
-      : undefined;
-
-  const disableReceiverSelection = !!props.payOptions.recipientAddress;
-
   return (
     <Container flex="column" gap="md" animate="fadein">
       {isOpen && (
@@ -976,46 +1088,6 @@ function SwapScreenContent(props: {
                 <SwapFees quote={quoteQuery.data} align="left" />
               </div>
             )}
-
-            {drawerScreen === "receiver" && (
-              <ReceiverWalletDrawerScreen
-                client={props.client}
-                onSelect={(x) => setReceiverAddress(x)}
-                receiverAddress={receiverAddress}
-                onBack={() => setIsOpen(false)}
-              />
-            )}
-
-            {drawerScreen === "payer" && (
-              <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}
-              />
-            )}
           </Drawer>
         </>
       )}
@@ -1025,8 +1097,7 @@ function SwapScreenContent(props: {
         <WalletSelectorButton
           client={props.client}
           onClick={() => {
-            setIsOpen(true);
-            setDrawerScreen("payer");
+            setScreen({ id: "select-wallet" });
           }}
           address={props.payer.account.address}
           walletId={props.payer.wallet.id}
@@ -1043,34 +1114,20 @@ function SwapScreenContent(props: {
           token={fromToken}
           isLoading={quoteQuery.isLoading && !sourceTokenAmount}
           client={client}
-          freezeChainAndTokenSelection={
-            prefillSource?.allowEdits?.chain === false &&
-            prefillSource?.allowEdits?.token === false
-          }
+          freezeChainAndTokenSelection={disableTokenSelection}
           payerAccount={props.payer.account}
+          swapRequired={swapRequired}
         />
-        <EstimatedTimeAndFees
-          quoteIsLoading={quoteQuery.isLoading}
-          estimatedSeconds={
-            quoteQuery.data?.swapDetails.estimated.durationSeconds
-          }
-          onViewFees={showFees}
-        />
-
+        {swapRequired && (
+          <EstimatedTimeAndFees
+            quoteIsLoading={quoteQuery.isLoading}
+            estimatedSeconds={
+              quoteQuery.data?.swapDetails.estimated.durationSeconds
+            }
+            onViewFees={showFees}
+          />
+        )}
         <Spacer y="md" />
-        <Text size="sm">Send to</Text>
-        <Spacer y="xs" />
-        <WalletSelectorButton
-          client={props.client}
-          disabled={disableReceiverSelection}
-          disableChevron={disableReceiverSelection}
-          onClick={() => {
-            setIsOpen(true);
-            setDrawerScreen("receiver");
-          }}
-          address={receiverAddress}
-          walletId={undefined}
-        />
       </div>
 
       {/* Error message */}
@@ -1097,6 +1154,17 @@ function SwapScreenContent(props: {
         </div>
       )}
 
+      {!errorMsg && isNotEnoughBalance && (
+        <div>
+          <Text color="danger" size="sm" center multiline>
+            Not enough funds.
+          </Text>
+          <Text color="danger" size="sm" center multiline>
+            Try a different wallet or token.
+          </Text>
+        </div>
+      )}
+
       {/* Button */}
       {errorMsg?.minAmount ? (
         <Button
@@ -1133,9 +1201,7 @@ function SwapScreenContent(props: {
           }}
           gap="xs"
         >
-          {isNotEnoughBalance ? (
-            <Text color="danger">Not Enough Funds</Text>
-          ) : quoteQuery.isLoading ? (
+          {quoteQuery.isLoading ? (
             <>
               Getting price quote
               <Spinner size="sm" color="accentText" />
@@ -1158,9 +1224,7 @@ function FiatScreenContent(props: {
   showCurrencySelector: () => void;
   payOptions: PayUIOptions;
   theme: "light" | "dark" | Theme;
-  buyForTx: BuyForTx | null;
   client: ThirdwebClient;
-  onViewPendingTx: () => void;
   onDone: () => void;
   isEmbed: boolean;
   payer: PayerInfo;
@@ -1177,11 +1241,13 @@ function FiatScreenContent(props: {
     showCurrencySelector,
     selectedCurrency,
   } = props;
-  const [receiverAddress, setReceiverAddress] = useState(
-    props.payOptions.recipientAddress || props.payer.account.address,
-  );
+  const defaultRecipientAddress = (
+    props.payOptions as Extract<PayUIOptions, { mode: "direct_payment" }>
+  )?.paymentInfo?.sellerAddress;
+  const receiverAddress =
+    defaultRecipientAddress || props.payer.account.address;
   const { drawerRef, drawerOverlayRef, isOpen, setIsOpen } = useDrawer();
-  const [drawerScreen, setDrawerScreen] = useState<"fees" | "receiver">("fees");
+  const [drawerScreen, setDrawerScreen] = useState<"fees">("fees");
 
   const buyWithFiatOptions = props.payOptions.buyWithFiat;
 
@@ -1269,8 +1335,6 @@ function FiatScreenContent(props: {
 
   const disableSubmit = !fiatQuoteQuery.data;
 
-  const disableReceiverSelection = !!props.payOptions.recipientAddress;
-
   const errorMsg =
     !fiatQuoteQuery.isLoading && fiatQuoteQuery.error
       ? getErrorMessage(fiatQuoteQuery.error)
@@ -1292,15 +1356,6 @@ function FiatScreenContent(props: {
                 <FiatFees quote={fiatQuoteQuery.data} />
               </div>
             )}
-
-            {drawerScreen === "receiver" && (
-              <ReceiverWalletDrawerScreen
-                client={props.client}
-                onSelect={(x) => setReceiverAddress(x)}
-                receiverAddress={receiverAddress}
-                onBack={() => setIsOpen(false)}
-              />
-            )}
           </Drawer>
         </>
       )}
@@ -1320,19 +1375,6 @@ function FiatScreenContent(props: {
           onViewFees={showFees}
         />
         <Spacer y="md" />
-        <Text size="sm">Send to</Text>
-        <Spacer y="xs" />
-        <WalletSelectorButton
-          client={props.client}
-          onClick={() => {
-            setDrawerScreen("receiver");
-            setIsOpen(true);
-          }}
-          address={receiverAddress}
-          disabled={disableReceiverSelection}
-          disableChevron={disableReceiverSelection}
-          walletId={undefined}
-        />
       </div>
 
       {/* Error message */}
@@ -1393,86 +1435,6 @@ function FiatScreenContent(props: {
   );
 }
 
-function BuyForTxUI(props: {
-  amountNeeded: string;
-  buyForTx: BuyForTx;
-  client: ThirdwebClient;
-}) {
-  const chainNameQuery = useChainName(props.buyForTx.tx.chain);
-
-  return (
-    <Container>
-      <Spacer y="xs" />
-      <Container
-        flex="row"
-        style={{
-          justifyContent: "space-between",
-        }}
-      >
-        <Text size="sm">Amount Needed</Text>
-        <Container
-          flex="column"
-          style={{
-            alignItems: "flex-end",
-          }}
-        >
-          <Container flex="row" gap="xs" center="y">
-            <Text color="primaryText" size="sm">
-              {props.amountNeeded} {props.buyForTx.tokenSymbol}
-            </Text>
-            <TokenIcon
-              chain={props.buyForTx.tx.chain}
-              client={props.client}
-              size="sm"
-              token={NATIVE_TOKEN}
-            />
-          </Container>
-          <Spacer y="xxs" />
-          {chainNameQuery.name ? (
-            <Text size="sm">{chainNameQuery.name}</Text>
-          ) : (
-            <Skeleton height={fontSize.sm} width="50px" />
-          )}
-        </Container>
-      </Container>
-
-      <Spacer y="md" />
-      <Line />
-      <Spacer y="md" />
-
-      <Container
-        flex="row"
-        style={{
-          justifyContent: "space-between",
-        }}
-      >
-        <Text size="sm">Your Balance</Text>
-        <Container flex="row" gap="xs">
-          <Text color="primaryText" size="sm">
-            {formatNumber(Number(toEther(props.buyForTx.balance)), 6)}{" "}
-            {props.buyForTx.tokenSymbol}
-          </Text>
-          <TokenIcon
-            chain={props.buyForTx.tx.chain}
-            client={props.client}
-            size="sm"
-            token={NATIVE_TOKEN}
-          />
-        </Container>
-      </Container>
-
-      <Spacer y="md" />
-      <Line />
-      <Spacer y="xl" />
-
-      <Text center size="sm">
-        Purchase
-      </Text>
-      <Spacer y="xxs" />
-    </Container>
-  );
-}
-
 function createSupportedTokens(
   data: SupportedChainAndTokens,
   payOptions: PayUIOptions,
@@ -1483,6 +1445,8 @@ function createSupportedTokens(
   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