[SDK] feat: Redesign token selection flow in PayEmbed

Author: joaquim-verges

apps/playground-web/src/components/pay/direct-payment.tsx

@@ -1,6 +1,5 @@
 "use client";
-
-import { sepolia } from "thirdweb/chains";
+import { base } from "thirdweb/chains";
 import { PayEmbed, getDefaultToken } from "thirdweb/react";
 import { THIRDWEB_CLIENT } from "../../lib/client";
 import { StyledConnectButton } from "../styled-connect-button";
@@ -16,9 +15,9 @@ export function BuyMerchPreview() {
         payOptions={{
           mode: "direct_payment",
           paymentInfo: {
-            amount: "0.1",
-            chain: sepolia,
-            token: getDefaultToken(sepolia, "USDC"),
+            amount: "2",
+            chain: base,
+            token: getDefaultToken(base, "USDC"),
             sellerAddress: "0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675",
           },
           metadata: {

apps/playground-web/src/components/pay/transaction-button.tsx

@@ -2,7 +2,7 @@
 
 import { useTheme } from "next-themes";
 import { getContract } from "thirdweb";
-import { base, sepolia } from "thirdweb/chains";
+import { base, polygon } from "thirdweb/chains";
 import { transfer } from "thirdweb/extensions/erc20";
 import { claimTo, getNFT } from "thirdweb/extensions/erc1155";
 import {
@@ -21,12 +21,12 @@ const nftContract = getContract({
   client: THIRDWEB_CLIENT,
 });
 
-const USDC = getDefaultToken(sepolia, "USDC");
+const USDC = getDefaultToken(polygon, "USDC");
 
 const usdcContract = getContract({
   // biome-ignore lint/style/noNonNullAssertion: its there
   address: USDC!.address,
-  chain: sepolia,
+  chain: polygon,
   client: THIRDWEB_CLIENT,
 });
 
@@ -55,6 +55,7 @@ export function PayTransactionPreview() {
               to: account?.address || "",
             }),
             metadata: nft?.metadata,
+            buyWithFiat: false,
           }}
         />
       )}
@@ -69,6 +70,7 @@ export function PayTransactionButtonPreview() {
   return (
     <>
       <StyledConnectButton />
+      <div className="h-10" />
       {account && (
         <div className="flex flex-col items-center justify-center gap-2">
           <div className="flex items-center gap-2">

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -8,11 +8,9 @@ import type { BuyWithFiatStatus } from "../../../../../../pay/buyWithFiat/getSta
 import { formatNumber } from "../../../../../../utils/formatNumber.js";
 import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
 import type { WalletId } from "../../../../../../wallets/wallet-types.js";
-import { useCustomTheme } from "../../../../../core/design-system/CustomThemeProvider.js";
 import {
   type Theme,
   fontSize,
-  radius,
   spacing,
 } from "../../../../../core/design-system/index.js";
 import type {
@@ -27,10 +25,9 @@ import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
 import type { PayEmbedConnectOptions } from "../../../PayEmbed.js";
 import { ChainName } from "../../../components/ChainName.js";
 import { Spacer } from "../../../components/Spacer.js";
-import { Container, ModalHeader } from "../../../components/basic.js";
+import { Container, Line, ModalHeader } from "../../../components/basic.js";
 import { Button } from "../../../components/buttons.js";
 import { Input } from "../../../components/formElements.js";
-import { Text } from "../../../components/text.js";
 import { TokenSymbol } from "../../../components/token/TokenSymbol.js";
 import { ConnectButton } from "../../ConnectButton.js";
 import { ChainButton, NetworkSelectorContent } from "../../NetworkSelector.js";
@@ -432,67 +429,6 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     );
   }
 
-  if (
-    screen.id === "select-from-token" &&
-    supportedSourcesQuery.data &&
-    sourceSupportedTokens
-  ) {
-    const chains = supportedSourcesQuery.data.map((x) => x.chain);
-    const goBack = () => setScreen(screen.backScreen);
-    // if token selection is disabled - only show network selector screen
-    if (
-      payOptions.buyWithCrypto !== false &&
-      payOptions.buyWithCrypto?.prefillSource?.allowEdits?.token === false
-    ) {
-      return (
-        <ChainSelectionScreen
-          chains={chains}
-          client={props.client}
-          connectLocale={props.connectLocale}
-          setChain={setFromChain}
-          goBack={goBack}
-        />
-      );
-    }
-
-    return (
-      <TokenSelectorScreen
-        onBack={goBack}
-        onConnect={() => {
-          setScreen({
-            id: "connect-payer-wallet",
-            backScreen: screen,
-          });
-        }}
-        modalTitle="Available tokens"
-        connectLocale={props.connectLocale}
-        client={props.client}
-        sourceTokens={sourceSupportedTokens}
-        sourceSupportedTokens={sourceSupportedTokens}
-        toChain={toChain}
-        toToken={toToken}
-        tokenAmount={tokenAmount}
-        fromChain={fromChain}
-        fromToken={fromToken}
-        mode={payOptions.mode}
-        hiddenWallets={props.hiddenWallets}
-        onSelect={(w, token, chain) => {
-          const account = w.getAccount();
-          if (account) {
-            setPayer({
-              account,
-              chain,
-              wallet: w,
-            });
-            setFromToken(token);
-            setFromChain(chain);
-          }
-          goBack();
-        }}
-      />
-    );
-  }
-
   return (
     <Container animate="fadein">
       <div>
@@ -526,19 +462,10 @@ function BuyScreenContent(props: BuyScreenContentProps) {
 
         {(screen.id === "select-payment-method" ||
           screen.id === "buy-with-crypto" ||
-          screen.id === "buy-with-fiat") &&
+          screen.id === "buy-with-fiat" ||
+          screen.id === "select-from-token") &&
           payer && (
             <TokenSelectedLayout
-              isBuyWithFiatEnabled={enabledPaymentMethods.buyWithFiatEnabled}
-              isBuyWithCryptoEnabled={
-                enabledPaymentMethods.buyWithCryptoEnabled
-              }
-              mode={screen.id === "buy-with-fiat" ? "buy" : "swap"}
-              onModeChange={(mode) => {
-                setScreen({
-                  id: mode === "swap" ? "buy-with-crypto" : "buy-with-fiat",
-                });
-              }}
               disabled={
                 ("prefillBuy" in payOptions &&
                   payOptions.prefillBuy?.allowEdits?.amount === false) ||
@@ -551,7 +478,19 @@ function BuyScreenContent(props: BuyScreenContentProps) {
               setTokenAmount={setTokenAmount}
               client={client}
               onBack={() => {
-                setScreen({ id: "main" });
+                if (
+                  screen.id === "buy-with-crypto" ||
+                  screen.id === "buy-with-fiat"
+                ) {
+                  setScreen({
+                    id: "select-from-token",
+                    backScreen: { id: "main" },
+                  });
+                } else if (screen.id === "select-from-token") {
+                  setScreen(screen.backScreen);
+                } else {
+                  setScreen({ id: "main" });
+                }
               }}
             >
               {screen.id === "buy-with-crypto" && activeAccount && (
@@ -614,6 +553,45 @@ function BuyScreenContent(props: BuyScreenContentProps) {
                   setHasEditedAmount={setHasEditedAmount}
                 />
               )}
+
+              {screen.id === "select-from-token" &&
+                supportedSourcesQuery.data &&
+                sourceSupportedTokens && (
+                  <TokenSelectorScreen
+                    client={props.client}
+                    sourceTokens={sourceSupportedTokens}
+                    sourceSupportedTokens={sourceSupportedTokens}
+                    toChain={toChain}
+                    toToken={toToken}
+                    tokenAmount={tokenAmount}
+                    mode={payOptions.mode}
+                    hiddenWallets={props.hiddenWallets}
+                    onConnect={() => {
+                      setScreen({
+                        id: "connect-payer-wallet",
+                        backScreen: screen,
+                      });
+                    }}
+                    onPayWithFiat={() => {
+                      setScreen({
+                        id: "buy-with-fiat",
+                      });
+                    }}
+                    onSelectToken={(w, token, chain) => {
+                      const account = w.getAccount();
+                      if (account) {
+                        setPayer({
+                          account,
+                          chain,
+                          wallet: w,
+                        });
+                        setFromToken(token);
+                        setFromChain(chain);
+                      }
+                      setScreen({ id: "buy-with-crypto" });
+                    }}
+                  />
+                )}
             </TokenSelectedLayout>
           )}
       </div>
@@ -802,7 +780,10 @@ function MainScreen(props: {
             if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
               props.setScreen({ id: "buy-with-fiat" });
             } else {
-              props.setScreen({ id: "buy-with-crypto" });
+              props.setScreen({
+                id: "select-from-token",
+                backScreen: { id: "main" },
+              });
             }
           }}
         />
@@ -825,7 +806,10 @@ function MainScreen(props: {
             if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
               props.setScreen({ id: "buy-with-fiat" });
             } else {
-              props.setScreen({ id: "buy-with-crypto" });
+              props.setScreen({
+                id: "select-from-token",
+                backScreen: { id: "main" },
+              });
             }
           }}
         />
@@ -888,7 +872,10 @@ function MainScreen(props: {
                   if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
                     props.setScreen({ id: "buy-with-fiat" });
                   } else {
-                    props.setScreen({ id: "buy-with-crypto" });
+                    props.setScreen({
+                      id: "select-from-token",
+                      backScreen: { id: "main" },
+                    });
                   }
                 }}
               >
@@ -912,12 +899,7 @@ function TokenSelectedLayout(props: {
   client: ThirdwebClient;
   onBack: () => void;
   disabled?: boolean;
-  mode: "buy" | "swap";
-  onModeChange: (mode: "buy" | "swap") => void;
-  isBuyWithFiatEnabled: boolean;
-  isBuyWithCryptoEnabled: boolean;
 }) {
-  const theme = useCustomTheme();
   return (
     <Container>
       <Container p="lg">
@@ -940,78 +922,9 @@ function TokenSelectedLayout(props: {
           disabled={props.disabled}
         />
 
-        <Spacer y="lg" />
-        <Container flex="row" gap="md" center="y">
-          <Text size="sm"> Pay with </Text>
-          {props.isBuyWithFiatEnabled && props.isBuyWithCryptoEnabled && (
-            <Container
-              flex="row"
-              style={{
-                flex: 1,
-                justifyContent: "center",
-                borderRadius: radius.xl,
-                border: `1px solid ${theme.colors.borderColor}`,
-                alignItems: "stretch",
-              }}
-            >
-              <Button
-                variant="ghost"
-                style={{
-                  flex: 1,
-                  background:
-                    props.mode === "swap"
-                      ? theme.colors.tertiaryBg
-                      : "transparent",
-                  borderRadius: radius.xl,
-                  borderTopRightRadius: 0,
-                  borderBottomRightRadius: 0,
-                  padding: spacing.xs,
-                }}
-                onClick={() => props.onModeChange("swap")}
-              >
-                <Text
-                  size="sm"
-                  color={
-                    props.mode === "swap" ? "primaryText" : "secondaryText"
-                  }
-                >
-                  Crypto
-                </Text>
-              </Button>
-              <div
-                style={{
-                  width: "1px",
-                  background: theme.colors.borderColor,
-                }}
-              />
-              <Button
-                variant="ghost"
-                style={{
-                  flex: 1,
-                  background:
-                    props.mode === "buy"
-                      ? theme.colors.tertiaryBg
-                      : "transparent",
-                  borderRadius: radius.xl,
-                  borderTopLeftRadius: 0,
-                  borderBottomLeftRadius: 0,
-                  padding: spacing.xs,
-                }}
-                onClick={() => props.onModeChange("buy")}
-              >
-                <Text
-                  size="sm"
-                  color={props.mode === "buy" ? "primaryText" : "secondaryText"}
-                >
-                  Card
-                </Text>
-              </Button>
-            </Container>
-          )}
-        </Container>
-
-        <Spacer y="lg" />
-
+        <Spacer y="sm" />
+        <Line />
+        <Spacer y="sm" />
         {props.children}
       </Container>
     </Container>

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx

@@ -33,7 +33,7 @@ import {
   isNativeToken,
 } from "../nativeToken.js";
 import { useTransactionCostAndData } from "./main/useBuyTxStates.js";
-import { WalletRow } from "./swap/TokenSelectorScreen.js";
+import { WalletRow } from "./swap/WalletRow.js";
 import type { SupportedChainAndTokens } from "./swap/useSwapSupportedChains.js";
 
 export function TransactionModeScreen(props: {

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatScreenContent.tsx

@@ -199,6 +199,7 @@ export function FiatScreenContent(props: {
       )}
 
       <Container flex="column" gap="sm">
+        <Text size="sm">Pay with</Text>
         <div>
           <PayWithCreditCard
             isLoading={fiatQuoteQuery.isLoading}