[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
+      // 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,26 @@ 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) {