Handle token balance retrieval failures

.changeset/fallback-native-balance.md

@@ -0,0 +1,13 @@
+---
+"thirdweb": patch
+---
+
+Add fallback mechanism to usePaymentMethods hook for getOwnedTokens failures
+
+When getOwnedTokens batches fail in the usePaymentMethods hook, the system now falls back to getting native token balances for each chain using getWalletBalance. This ensures users can still access their native tokens as payment methods even when the insight API is experiencing issues, providing a more resilient user experience.
+
+The fallback mechanism:
+- Catches getOwnedTokens failures and logs warnings
+- Falls back to native balance fetching using getWalletBalance for each chain
+- Transforms results to match the expected format
+- Continues normal processing flow seamlessly

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

@@ -10,6 +10,7 @@
 import { getOwnedTokens } from "../../../insight/get-tokens.js";
 import { toTokens } from "../../../utils/units.js";
 import type { Wallet } from "../../../wallets/interfaces/wallet.js";
+import { getWalletBalance } from "../../../wallets/utils/getWalletBalance.js";
 import type { PaymentMethod } from "../machines/paymentMachine.js";
 import { useActiveWallet } from "./wallets/useActiveWallet.js";
 
@@ -80,16 +81,42 @@
       const limit = 500;
 
       while (true) {
-        const batch = await getOwnedTokens({
-          chains: insightEnabledChains.map((c) => getCachedChain(c.chainId)),
-          client,
-          ownerAddress: wallet.getAccount()?.address || "",
-          queryOptions: {
-            limit,
-            metadata: "false",
-            page,
-          },
-        });
+        let batch;
+        try {
+          batch = await getOwnedTokens({
+            chains: insightEnabledChains.map((c) => getCachedChain(c.chainId)),
+            client,
+            ownerAddress: wallet.getAccount()?.address || "",
+            queryOptions: {
+              limit,
+              metadata: "false",
+              page,
+            },
+          });
+        } catch (error) {
+          // If the batch fails, fall back to getting native balance for each chain
+          console.warn(`Failed to get owned tokens for batch ${page}:`, error);
+
+          const chainsInBatch = insightEnabledChains.map((c) =>
+            getCachedChain(c.chainId),
+          );
+          const nativeBalances = await Promise.allSettled(
+            chainsInBatch.map(async (chain) => {
+              const balance = await getWalletBalance({
+                address: wallet.getAccount()?.address || "",
+                chain,
+                client,
+              });
+              return balance;
+            }),
+          );
+
+          // Transform successful native balances into the same format as getOwnedTokens results
+          batch = nativeBalances
+            .filter((result) => result.status === "fulfilled")
+            .map((result) => result.value)
+            .filter((balance) => balance.value > 0n);
+        }
 
         if (batch.length === 0) {
           break;
@@ -126,7 +153,9 @@
 
       // Add destination token if included
       if (includeDestinationToken) {
-        const tokenKey = `${destinationToken.chainId}-${destinationToken.address.toLowerCase()}`;
+        const tokenKey = `${
+          destinationToken.chainId
+        }-${destinationToken.address.toLowerCase()}`;
         allValidOriginTokens.set(tokenKey, destinationToken);
       }
 
@@ -155,7 +184,9 @@
               ) {
                 continue;
               }
-              const tokenKey = `${route.originToken.chainId}-${route.originToken.address.toLowerCase()}`;
+              const tokenKey = `${
+                route.originToken.chainId
+              }-${route.originToken.address.toLowerCase()}`;
               allValidOriginTokens.set(tokenKey, route.originToken);
             }
           } catch (error) {
@@ -169,7 +200,9 @@
       const validOwnedTokens: OwnedTokenWithQuote[] = [];
 
       for (const ownedToken of allOwnedTokens) {
-        const tokenKey = `${ownedToken.originToken.chainId}-${ownedToken.originToken.address.toLowerCase()}`;
+        const tokenKey = `${
+          ownedToken.originToken.chainId
+        }-${ownedToken.originToken.address.toLowerCase()}`;
         const validOriginToken = allValidOriginTokens.get(tokenKey);
 
         if (validOriginToken) {