[SDK] Optimize payment methods query by removing quotes and improving balance checks (#8493)

Author: joaquim-verges

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

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import type { Quote } from "../../../bridge/index.js";
 import { ApiError } from "../../../bridge/types/Errors.js";
-import type { Token, TokenWithPrices } from "../../../bridge/types/Token.js";
+import type { TokenWithPrices } from "../../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../../client/client.js";
 import { getThirdwebBaseUrl } from "../../../utils/domains.js";
 import { getClientFetch } from "../../../utils/fetch.js";
@@ -29,7 +29,7 @@ import { useActiveWallet } from "./wallets/useActiveWallet.js";
  * ```
  */
 export function usePaymentMethods(options: {
-  destinationToken: Token;
+  destinationToken: TokenWithPrices;
   destinationAmount: string;
   client: ThirdwebClient;
   payerWallet?: Wallet;
@@ -65,6 +65,8 @@ export function usePaymentMethods(options: {
         "amount",
         toUnits(destinationAmount, destinationToken.decimals).toString(),
       );
+      // dont include quotes to speed up the query
+      url.searchParams.set("includeQuotes", "false");
 
       const clientFetch = getClientFetch(client);
       const response = await clientFetch(url.toString());
@@ -80,8 +82,9 @@ export function usePaymentMethods(options: {
 
       const {
         data: allValidOriginTokens,
-      }: { data: { quote: Quote; balance: string; token: TokenWithPrices }[] } =
-        await response.json();
+      }: {
+        data: { quote?: Quote; balance: string; token: TokenWithPrices }[];
+      } = await response.json();
 
       // Sort by enough balance to pay THEN gross balance
       const validTokenQuotes = allValidOriginTokens.map((s) => ({
@@ -92,7 +95,7 @@ export function usePaymentMethods(options: {
         quote: s.quote,
       }));
 
-      const sufficientBalanceQuotes = validTokenQuotes
+      const sortedValidTokenQuotes = validTokenQuotes
         .filter((s) => !!s.originToken.prices.USD)
         .sort((a, b) => {
           return (
@@ -114,18 +117,29 @@ export function usePaymentMethods(options: {
           )
         : [];
       const finalQuotes = supportedTokens
-        ? sufficientBalanceQuotes.filter((q) =>
+        ? sortedValidTokenQuotes.filter((q) =>
             tokensToInclude.find(
               (t) =>
                 t.chainId === q.originToken.chainId &&
                 t.address.toLowerCase() === q.originToken.address.toLowerCase(),
             ),
           )
-        : sufficientBalanceQuotes;
-      return finalQuotes.map((x) => ({
-        ...x,
-        action: "buy",
-      }));
+        : sortedValidTokenQuotes;
+
+      const requiredUsdValue =
+        (destinationToken.prices?.["USD"] ?? 0) * Number(destinationAmount);
+
+      return finalQuotes.map((x) => {
+        const tokenUsdValue =
+          (x.originToken.prices?.["USD"] ?? 0) *
+          Number(toTokens(x.balance, x.originToken.decimals));
+        const hasEnoughBalance = tokenUsdValue >= requiredUsdValue;
+        return {
+          ...x,
+          action: "buy",
+          hasEnoughBalance,
+        };
+      });
     },
     queryKey: [
       "payment-methods",

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

@@ -1,7 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
 import { trackPayEvent } from "../../../../../analytics/track/pay.js";
-import type { Token } from "../../../../../bridge/types/Token.js";
+import type { TokenWithPrices } from "../../../../../bridge/types/Token.js";
 import { defineChain } from "../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
@@ -26,7 +26,7 @@ type PaymentSelectionProps = {
   /**
    * The destination token to bridge to
    */
-  destinationToken: Token;
+  destinationToken: TokenWithPrices;
 
   /**
    * The destination amount to bridge

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

@@ -47,10 +47,7 @@ function PaymentMethodTokenRow({
 }: PaymentMethodTokenRowProps) {
   const theme = useCustomTheme();
 
-  const displayOriginAmount = paymentMethod.quote.originAmount;
-  const hasEnoughBalance = displayOriginAmount
-    ? paymentMethod.balance >= displayOriginAmount
-    : false;
+  const hasEnoughBalance = paymentMethod.hasEnoughBalance;
   const currencyPrice = paymentMethod.originToken.prices[currency || "USD"];
 
   return (

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx

@@ -451,6 +451,7 @@ function SwapWidgetContent(
           balance: screen.sellTokenBalance,
           originToken: screen.sellToken,
           action: screen.mode,
+          hasEnoughBalance: true,
         }}
         preparedQuote={screen.preparedQuote}
         currency={props.currency}

packages/thirdweb/src/react/web/ui/Bridge/types.ts

@@ -37,7 +37,8 @@ export type PaymentMethod =
       payerWallet: Wallet;
       originToken: TokenWithPrices;
       balance: bigint;
-      quote: Quote;
+      quote?: Quote;
+      hasEnoughBalance: boolean;
     }
   | {
       type: "fiat";