[React] Fix native token fallback when insight query fails

Author: joaquim-verges

.changeset/eighty-rings-think.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix native token fallback when insight query fails

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

@@ -70,10 +70,10 @@ export function usePaymentMethods(options: {
         getInsightEnabledChainIds(),
       ]);
 
-      // 2. Check insight availability for all chains
-      const insightEnabledChains = allChains.filter((c) =>
-        insightEnabledChainIds.includes(c.chainId),
-      );
+      // 2. Check insight availability for all chains, limited to 50 chains (FIXME move this logic to the backend)
+      const insightEnabledChains = allChains
+        .filter((c) => insightEnabledChainIds.includes(c.chainId))
+        .slice(0, 50);
 
       // 3. Get all owned tokens for insight-enabled chains
       let allOwnedTokens: Array<{
@@ -119,6 +119,25 @@ export function usePaymentMethods(options: {
             .filter((result) => result.status === "fulfilled")
             .map((result) => result.value)
             .filter((balance) => balance.value > 0n);
+
+          // Convert to our format
+          const tokensWithBalance = batch.map((b) => ({
+            balance: b.value,
+            originToken: {
+              address: b.tokenAddress,
+              chainId: b.chainId,
+              decimals: b.decimals,
+              iconUri: "",
+              name: b.name,
+              prices: {
+                USD: 0,
+              },
+              symbol: b.symbol,
+            } as Token,
+          }));
+
+          allOwnedTokens = [...allOwnedTokens, ...tokensWithBalance];
+          break;
         }
 
         if (batch.length === 0) {