[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

@@ -432,67 +432,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,7 +465,8 @@ 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}
@@ -551,7 +491,11 @@ function BuyScreenContent(props: BuyScreenContentProps) {
               setTokenAmount={setTokenAmount}
               client={client}
               onBack={() => {
-                setScreen({ id: "main" });
+                if (screen.id === "select-from-token") {
+                  setScreen({ id: "buy-with-crypto" });
+                } else {
+                  setScreen({ id: "main" });
+                }
               }}
             >
               {screen.id === "buy-with-crypto" && activeAccount && (
@@ -614,6 +558,40 @@ function BuyScreenContent(props: BuyScreenContentProps) {
                   setHasEditedAmount={setHasEditedAmount}
                 />
               )}
+
+              {screen.id === "select-from-token" &&
+                supportedSourcesQuery.data &&
+                sourceSupportedTokens && (
+                  <TokenSelectorScreen
+                    onConnect={() => {
+                      setScreen({
+                        id: "connect-payer-wallet",
+                        backScreen: screen,
+                      });
+                    }}
+                    client={props.client}
+                    sourceTokens={sourceSupportedTokens}
+                    sourceSupportedTokens={sourceSupportedTokens}
+                    toChain={toChain}
+                    toToken={toToken}
+                    tokenAmount={tokenAmount}
+                    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);
+                      }
+                      setScreen({ id: "buy-with-crypto" });
+                    }}
+                  />
+                )}
             </TokenSelectedLayout>
           )}
       </div>

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/main/useUISelectionStates.ts

@@ -76,14 +76,9 @@ export function useFromTokenSelectionStates(options: {
   payOptions: PayUIOptions;
   supportedSources: SupportedSourcesInputData[];
 }) {
-  const { payOptions, supportedSources } = options;
+  const { payOptions } = options;
 
-  // --------------------------------------------------------------------------
-  const firstSupportedSource = supportedSources?.length
-    ? supportedSources.length === 1
-      ? supportedSources[0]
-      : supportedSources.find((x) => x.chain.id !== 1) // dont use mainnet as a default source, unless its the only source
-    : undefined;
+  // TODO (pay) - auto select token based on connected wallet balances
 
   // Source token and chain selection ---------------------------------------------------
   const [fromChain_, setFromChain] = useState<Chain>();
@@ -95,12 +90,7 @@ export function useFromTokenSelectionStates(options: {
     (payOptions.mode === "transaction" && payOptions.transaction?.chain) ||
     (payOptions.mode === "direct_payment" && payOptions.paymentInfo?.chain);
 
-  const fromChainFromApi = firstSupportedSource?.chain
-    ? firstSupportedSource.chain
-    : undefined;
-
-  const fromChain =
-    fromChain_ || fromChainDevSpecified || fromChainFromApi || polygon;
+  const fromChain = fromChain_ || fromChainDevSpecified || undefined;
 
   const [fromToken_, setFromToken] = useState<ERC20OrNativeToken>();
 
@@ -110,12 +100,8 @@ export function useFromTokenSelectionStates(options: {
       payOptions.buyWithCrypto?.prefillSource?.token) ||
     (payOptions.mode === "direct_payment" && payOptions.paymentInfo.token);
 
-  // May be updated in the future
-  const fromTokenFromApi = NATIVE_TOKEN;
-
   // supported tokens query in here
-  const fromToken =
-    fromToken_ || fromTokenDevSpecified || fromTokenFromApi || NATIVE_TOKEN;
+  const fromToken = fromToken_ || fromTokenDevSpecified || undefined;
 
   return {
     fromChain,

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

@@ -12,15 +12,13 @@ import {
   type WaitForReceiptOptions,
   waitForReceipt,
 } from "../../../../../../../transaction/actions/wait-for-tx-receipt.js";
-import { shortenAddress } from "../../../../../../../utils/address.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
 import {
   fontSize,
   iconSize,
 } from "../../../../../../core/design-system/index.js";
 import { useChainName } from "../../../../../../core/hooks/others/useChainQuery.js";
-import { useEnsName } from "../../../../../../core/utils/wallet.js";
 import { Skeleton } from "../../../../components/Skeleton.js";
 import { Spacer } from "../../../../components/Spacer.js";
 import { Spinner } from "../../../../components/Spinner.js";
@@ -34,6 +32,7 @@ import type { ERC20OrNativeToken } from "../../nativeToken.js";
 import { PayTokenIcon } from "../PayTokenIcon.js";
 import { Step } from "../Stepper.js";
 import type { PayerInfo } from "../types.js";
+import { WalletRow } from "./WalletRow.js";
 import { formatSeconds } from "./formatSeconds.js";
 import { addPendingTx } from "./pendingSwapTx.js";
 
@@ -76,8 +75,6 @@ export function SwapConfirmationScreen(props: {
   const sender = props.quote.swapDetails.fromAddress;
   const isDifferentRecipient = receiver.toLowerCase() !== sender.toLowerCase();
 
-  const ensName = useEnsName({ client: props.client, address: receiver });
-
   return (
     <Container p="lg">
       <ModalHeader title={props.title} onBack={props.onBack} />
@@ -139,9 +136,12 @@ export function SwapConfirmationScreen(props: {
       {/* Send to  */}
       {isDifferentRecipient && (
         <ConfirmItem label="Receiver">
-          <Text color="primaryText" size="sm">
-            {ensName.data || shortenAddress(receiver)}
-          </Text>
+          <WalletRow
+            client={props.client}
+            address={receiver}
+            iconSize="sm"
+            textSize="sm"
+          />
         </ConfirmItem>
       )}
 

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

@@ -16,7 +16,7 @@ import { TokenRow } from "../../../../components/token/TokenRow.js";
 import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
 import { formatTokenBalance } from "../../formatTokenBalance.js";
 import { type NativeToken, isNativeToken } from "../../nativeToken.js";
-import { WalletRow } from "./TokenSelectorScreen.js";
+import { WalletRow } from "./WalletRow.js";
 
 /**
  * Shows an amount "value" and renders the selected token and chain
@@ -26,8 +26,8 @@ import { WalletRow } from "./TokenSelectorScreen.js";
  */
 export function PayWithCryptoQuoteInfo(props: {
   value: string;
-  chain: Chain;
-  token: TokenInfo | NativeToken;
+  chain: Chain | undefined;
+  token: TokenInfo | NativeToken | undefined;
   isLoading: boolean;
   client: ThirdwebClient;
   freezeChainAndTokenSelection?: boolean;
@@ -36,12 +36,19 @@ export function PayWithCryptoQuoteInfo(props: {
   onSelectToken: () => void;
 }) {
   const theme = useCustomTheme();
-  const balanceQuery = useWalletBalance({
-    address: props.payerAccount.address,
-    chain: props.chain,
-    tokenAddress: isNativeToken(props.token) ? undefined : props.token.address,
-    client: props.client,
-  });
+  const balanceQuery = useWalletBalance(
+    {
+      address: props.payerAccount.address,
+      chain: props.chain,
+      tokenAddress: isNativeToken(props.token)
+        ? undefined
+        : props.token?.address,
+      client: props.client,
+    },
+    {
+      enabled: !!props.chain && !!props.token,
+    },
+  );
 
   return (
     <Container
@@ -69,10 +76,10 @@ export function PayWithCryptoQuoteInfo(props: {
         }}
       >
         <WalletRow client={props.client} address={props.payerAccount.address} />
-        {balanceQuery.data ? (
+        {props.token && props.chain && balanceQuery.data ? (
           <Container flex="row" gap="3xs" center="y">
             <Text size="xs" color="secondaryText" weight={500}>
-              {formatTokenBalance(balanceQuery.data, false)}
+              {formatTokenBalance(balanceQuery.data, false, 4)}
             </Text>
             <TokenSymbol
               token={props.token}
@@ -81,11 +88,11 @@ export function PayWithCryptoQuoteInfo(props: {
               color="secondaryText"
             />
           </Container>
-        ) : (
+        ) : props.token && props.chain && balanceQuery.isLoading ? (
           <Skeleton width="70px" height={fontSize.xs} />
-        )}
+        ) : null}
       </Container>
-      {/* Quoted price */}
+      {/* Quoted price & token selector */}
       <TokenRow
         token={props.token}
         chain={props.chain}
@@ -96,6 +103,10 @@ export function PayWithCryptoQuoteInfo(props: {
         style={{
           border: "none",
           borderRadius: 0,
+          borderBottomLeftRadius:
+            !props.token || !props.chain || !props.swapRequired ? radius.lg : 0,
+          borderBottomRightRadius:
+            !props.token || !props.chain || !props.swapRequired ? radius.lg : 0,
         }}
       />
     </Container>