[SDK] Fix: Respect supported tokens in payment widgets (#7780)

Author: gregfromstl

apps/playground-web/src/components/ui/TokenSelector.tsx

@@ -10,13 +10,7 @@ import {
 import { shortenAddress } from "thirdweb/utils";
 import { Badge } from "@/components/ui/badge";
 import { Img } from "@/components/ui/Img";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { SelectWithSearch } from "@/components/ui/select-with-search";
 import { useAllChainsData } from "@/hooks/chains";
 import { useTokensData } from "@/hooks/useTokensData";
 import type { TokenMetadata } from "@/lib/types";
@@ -85,12 +79,41 @@ export function TokenSelector(props: {
     return value;
   }, [tokens]);
 
+  const options = useMemo(() => {
+    return tokens.map((token) => ({
+      label: token.symbol,
+      value: `${token.chainId}:${token.address}`,
+    }));
+  }, [tokens]);
+
   const selectedValue = props.selectedToken
     ? `${props.selectedToken.chainId}:${props.selectedToken.address}`
     : undefined;
 
+  const searchFn = useCallback(
+    (option: { label: string; value: string }, searchValue: string) => {
+      const token = addressChainToToken.get(option.value);
+      if (!token) {
+        return false;
+      }
+
+      const searchLower = searchValue.toLowerCase();
+      return (
+        token.symbol.toLowerCase().includes(searchLower) ||
+        token.name.toLowerCase().includes(searchLower) ||
+        token.address.toLowerCase().includes(searchLower)
+      );
+    },
+    [addressChainToToken],
+  );
+
   const renderTokenOption = useCallback(
-    (token: TokenMetadata) => {
+    (option: { label: string; value: string }) => {
+      const token = addressChainToToken.get(option.value);
+      if (!token) {
+        return option.label;
+      }
+
       const resolvedSrc = token.iconUri
         ? replaceIpfsUrl(token.iconUri, props.client)
         : fallbackChainIcon;
@@ -121,11 +144,13 @@ export function TokenSelector(props: {
         </div>
       );
     },
-    [props.disableAddress, props.client],
+    [props.disableAddress, props.client, addressChainToToken],
   );
 
   return (
-    <Select
+    <SelectWithSearch
+      className={cn("w-full", props.className)}
+      closeOnSelect={true}
       disabled={tokensQuery.isLoading || props.disabled}
       onValueChange={(tokenAddress) => {
         const token = addressChainToToken.get(tokenAddress);
@@ -134,27 +159,17 @@ export function TokenSelector(props: {
         }
         props.onChange(token);
       }}
+      options={options}
+      overrideSearchFn={searchFn}
+      placeholder={
+        tokensQuery.isLoading
+          ? "Loading Tokens..."
+          : props.placeholder || "Select Token"
+      }
+      renderOption={renderTokenOption}
+      searchPlaceholder="Search by Symbol, Name or Address"
+      showCheck={false}
       value={selectedValue}
-    >
-      <SelectTrigger className={cn("w-full", props.className)}>
-        <SelectValue
-          placeholder={
-            tokensQuery.isLoading
-              ? "Loading Tokens..."
-              : props.placeholder || "Select Token"
-          }
-        />
-      </SelectTrigger>
-      <SelectContent>
-        {tokens.map((token) => {
-          const value = `${token.chainId}:${token.address}`;
-          return (
-            <SelectItem key={value} value={value}>
-              {renderTokenOption(token)}
-            </SelectItem>
-          );
-        })}
-      </SelectContent>
-    </Select>
+    />
   );
 }

packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts

@@ -8,6 +8,7 @@ import { getClientFetch } from "../../../utils/fetch.js";
 import { toTokens, toUnits } from "../../../utils/units.js";
 import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { PaymentMethod } from "../machines/paymentMachine.js";
+import type { SupportedTokens } from "../utils/defaultTokens.js";
 import { useActiveWallet } from "./wallets/useActiveWallet.js";
 
 /**
@@ -33,13 +34,15 @@ export function usePaymentMethods(options: {
   client: ThirdwebClient;
   payerWallet?: Wallet;
   includeDestinationToken?: boolean;
+  supportedTokens?: SupportedTokens;
 }) {
   const {
     destinationToken,
     destinationAmount,
     client,
     payerWallet,
     includeDestinationToken,
+    supportedTokens,
   } = options;
   const localWallet = useActiveWallet(); // TODO (bridge): get all connected wallets
   const wallet = payerWallet || localWallet;
@@ -118,8 +121,28 @@ export function usePaymentMethods(options: {
               (a.originToken.prices.USD || 1)
           );
         });
-      // Move all sufficient balance quotes to the top
-      return [...sufficientBalanceQuotes, ...insufficientBalanceQuotes];
+
+      // Filter out quotes that are not included in the supportedTokens (if provided)
+      const tokensToInclude = supportedTokens
+        ? Object.keys(supportedTokens).flatMap(
+            (c: string) =>
+              supportedTokens[Number(c)]?.map((t) => ({
+                chainId: Number(c),
+                address: t.address,
+              })) ?? [],
+          )
+        : [];
+      const finalQuotes = supportedTokens
+        ? [...sufficientBalanceQuotes, ...insufficientBalanceQuotes].filter(
+            (q) =>
+              tokensToInclude.find(
+                (t) =>
+                  t.chainId === q.originToken.chainId &&
+                  t.address === q.originToken.address,
+              ),
+          )
+        : [...sufficientBalanceQuotes, ...insufficientBalanceQuotes];
+      return finalQuotes;
     },
     queryKey: [
       "payment-methods",
@@ -128,6 +151,7 @@ export function usePaymentMethods(options: {
       destinationAmount,
       payerWallet?.getAccount()?.address,
       includeDestinationToken,
+      supportedTokens,
     ], // 5 minutes
     refetchOnWindowFocus: false,
     staleTime: 5 * 60 * 1000,

packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx

@@ -17,6 +17,7 @@ import {
   type PaymentMethod,
   usePaymentMachine,
 } from "../../../core/machines/paymentMachine.js";
+import type { SupportedTokens } from "../../../core/utils/defaultTokens.js";
 import { webWindowAdapter } from "../../adapters/WindowAdapter.js";
 import en from "../ConnectWallet/locale/en.js";
 import type { ConnectLocale } from "../ConnectWallet/locale/types.js";
@@ -128,6 +129,7 @@ export interface BridgeOrchestratorProps {
    * @default true
    */
   showThirdwebBranding?: boolean;
+  supportedTokens?: SupportedTokens;
 }
 
 export function BridgeOrchestrator({
@@ -144,6 +146,7 @@ export function BridgeOrchestrator({
   presetOptions,
   paymentMethods = ["crypto", "card"],
   showThirdwebBranding = true,
+  supportedTokens,
 }: BridgeOrchestratorProps) {
   // Initialize adapters
   const adapters = useMemo(
@@ -313,6 +316,7 @@ export function BridgeOrchestrator({
             paymentMethods={paymentMethods}
             receiverAddress={state.context.receiverAddress}
             currency={uiOptions.currency}
+            supportedTokens={supportedTokens}
           />
         )}
 

packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx

@@ -398,6 +398,7 @@ export function BuyWidget(props: BuyWidgetProps) {
     // Show normal bridge orchestrator
     content = (
       <BridgeOrchestrator
+        supportedTokens={props.supportedTokens}
         client={props.client}
         connectLocale={localeQuery.data}
         connectOptions={props.connectOptions}

packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx

@@ -369,6 +369,7 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
         receiverAddress={props.seller}
         showThirdwebBranding={props.showThirdwebBranding}
         uiOptions={bridgeDataQuery.data.data}
+        supportedTokens={props.supportedTokens}
       />
     );
   }

packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx

@@ -409,6 +409,7 @@ export function TransactionWidget(props: TransactionWidgetProps) {
     // Show normal bridge orchestrator
     content = (
       <BridgeOrchestrator
+        supportedTokens={props.supportedTokens}
         client={props.client}
         connectLocale={localeQuery.data}
         connectOptions={props.connectOptions}

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx

@@ -13,6 +13,7 @@ import { usePaymentMethods } from "../../../../core/hooks/usePaymentMethods.js";
 import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
 import { useConnectedWallets } from "../../../../core/hooks/wallets/useConnectedWallets.js";
 import type { PaymentMethod } from "../../../../core/machines/paymentMachine.js";
+import type { SupportedTokens } from "../../../../core/utils/defaultTokens.js";
 import type { ConnectLocale } from "../../ConnectWallet/locale/types.js";
 import { WalletSwitcherConnectionScreen } from "../../ConnectWallet/screens/WalletSwitcherConnectionScreen.js";
 import { Container, ModalHeader } from "../../components/basic.js";
@@ -89,6 +90,8 @@ export interface PaymentSelectionProps {
    * @default "USD"
    */
   currency?: SupportedFiatCurrency;
+
+  supportedTokens?: SupportedTokens;
 }
 
 type Step =
@@ -109,6 +112,7 @@ export function PaymentSelection({
   connectLocale,
   includeDestinationToken,
   paymentMethods = ["crypto", "card"],
+  supportedTokens,
   feePayer,
   currency,
 }: PaymentSelectionProps) {
@@ -149,6 +153,7 @@ export function PaymentSelection({
       receiverAddress?.toLowerCase() !==
         payerWallet?.getAccount()?.address?.toLowerCase(),
     payerWallet,
+    supportedTokens,
   });
 
   // Handle error from usePaymentMethods