[SDK] Fix: Adds BuyWidget fallback when native isn't supported (#7601)

Author: gregfromstl

apps/playground-web/src/hooks/useTokensData.ts

@@ -4,8 +4,10 @@ import { useQuery } from "@tanstack/react-query";
 import type { TokenMetadata } from "@/lib/types";
 
 async function fetchTokensFromApi(chainId?: number) {
-  const domain = process.env.NEXT_PUBLIC_BRIDGE_URL;
-  const url = new URL(`https://${domain}/v1/tokens`);
+  const domain = process.env.NEXT_PUBLIC_BRIDGE_URL || "bridge.thirdweb.com";
+  const url = new URL(
+    `${domain.includes("localhost") ? "http" : "https"}://${domain}/v1/tokens`,
+  );
 
   if (chainId) {
     url.searchParams.append("chainId", String(chainId));

packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx

@@ -312,7 +312,18 @@ export function BuyWidget(props: BuyWidgetProps) {
           props.client,
           NATIVE_TOKEN_ADDRESS,
           props.chain.id,
-        );
+        ).catch((err) => {
+          err.message.includes("not supported")
+            ? undefined
+            : Promise.reject(err);
+        });
+        if (!ETH) {
+          return {
+            chain: props.chain,
+            tokenAddress: props.tokenAddress || NATIVE_TOKEN_ADDRESS,
+            type: "unsupported_token",
+          };
+        }
         return {
           data: {
             destinationToken: ETH,