fix: respect supported tokens in payment widgets

Author: gregfromstl

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",

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