feat: auto-add unsupported tokens

Author: gregfromstl

packages/thirdweb/src/bridge/Token.ts

@@ -182,3 +182,84 @@ export declare namespace tokens {
    */
   type Result = Token[];
 }
+
+/**
+ * Adds a token to the Universal Bridge for indexing.
+ *
+ * This function requests the Universal Bridge to index a specific token on a given chain.
+ * Once indexed, the token will be available for cross-chain operations.
+ *
+ * @example
+ * ```typescript
+ * import { Bridge } from "thirdweb";
+ *
+ * // Add a token for indexing
+ * const result = await Bridge.add({
+ *   client: thirdwebClient,
+ *   chainId: 1,
+ *   tokenAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", // USDC
+ * });
+ * ```
+ *
+ * @param options - The options for adding a token.
+ * @param options.client - Your thirdweb client.
+ * @param options.chainId - The chain ID where the token is deployed.
+ * @param options.tokenAddress - The contract address of the token to add.
+ *
+ * @returns A promise that resolves when the token has been successfully submitted for indexing.
+ *
+ * @throws Will throw an error if there is an issue adding the token.
+ * @bridge
+ * @beta
+ */
+export async function add(options: add.Options): Promise<add.Result> {
+  const { client, chainId, tokenAddress } = options;
+
+  const clientFetch = getClientFetch(client);
+  const url = `${getThirdwebBaseUrl("bridge")}/v1/tokens`;
+
+  const requestBody = {
+    chainId,
+    tokenAddress,
+  };
+
+  const response = await clientFetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(requestBody),
+  });
+
+  if (!response.ok) {
+    const errorJson = await response.json();
+    throw new ApiError({
+      code: errorJson.code || "UNKNOWN_ERROR",
+      message: errorJson.message || response.statusText,
+      correlationId: errorJson.correlationId || undefined,
+      statusCode: response.status,
+    });
+  }
+
+  const { data }: { data: Token } = await response.json();
+  return data;
+}
+
+export declare namespace add {
+  /**
+   * Input parameters for {@link add}.
+   */
+  type Options = {
+    /** Your {@link ThirdwebClient} instance. */
+    client: ThirdwebClient;
+    /** The chain ID where the token is deployed. */
+    chainId: number;
+    /** The contract address of the token to add. */
+    tokenAddress: string;
+  };
+
+  /**
+   * The result returned from {@link Bridge.add}.
+   */
+  type Result = Token;
+}

packages/thirdweb/src/pay/convert/get-token.ts

@@ -1,12 +1,13 @@
-import { tokens } from "../../bridge/Token.js";
+import { add, tokens } from "../../bridge/Token.js";
+import type { Token } from "../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../client/client.js";
 import { withCache } from "../../utils/promise/withCache.js";
 
 export async function getToken(
   client: ThirdwebClient,
   tokenAddress: string,
   chainId: number,
-) {
+): Promise<Token> {
   return withCache(
     async () => {
       const result = await tokens({
@@ -16,7 +17,15 @@ export async function getToken(
       });
       const token = result[0];
       if (!token) {
-        throw new Error("Token not found");
+        // Attempt to add the token
+        const tokenResult = await add({
+          client,
+          chainId,
+          tokenAddress,
+        }).catch(() => {
+          throw new Error("Token not supported");
+        });
+        return tokenResult;
       }
       return token;
     },

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

@@ -3,7 +3,6 @@ import { iconSize } from "../../../core/design-system/index.js";
 import { useChainMetadata } from "../../../core/hooks/others/useChainQuery.js";
 import { AccentFailIcon } from "../ConnectWallet/icons/AccentFailIcon.js";
 import { Spacer } from "../components/Spacer.js";
-import { Spinner } from "../components/Spinner.js";
 import { Container } from "../components/basic.js";
 import { Text } from "../components/text.js";
 
@@ -12,14 +11,6 @@ export interface UnsupportedTokenScreenProps {
    * The chain the token is on
    */
   chain: Chain;
-  /**
-   * Callback when user wants to try a different token
-   */
-  onTryDifferentToken: () => void;
-  /**
-   * Optional callback when user wants to contact support
-   */
-  onContactSupport?: () => void;
 }
 
 /**
@@ -69,13 +60,13 @@ export function UnsupportedTokenScreen(props: UnsupportedTokenScreenProps) {
       center="both"
       style={{ minHeight: "350px" }}
     >
-      {/* Loading Spinner */}
-      <Spinner size="xl" color="accentText" />
+      {/* Error Icon */}
+      <AccentFailIcon size={iconSize["3xl"]} />
       <Spacer y="lg" />
 
       {/* Title */}
       <Text center color="primaryText" size="lg" weight={600}>
-        Indexing Token
+        Token Not Supported
       </Text>
       <Spacer y="sm" />
 
@@ -86,8 +77,7 @@ export function UnsupportedTokenScreen(props: UnsupportedTokenScreenProps) {
         size="sm"
         style={{ maxWidth: "280px", lineHeight: 1.5 }}
       >
-        This token is being indexed by the Universal Bridge. Please check back
-        later.
+        This token or chain is not supported by the Universal Bridge.
       </Text>
     </Container>
   );

packages/thirdweb/src/react/web/ui/PayEmbed.tsx

@@ -2,6 +2,7 @@
 
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
+import type { Token } from "../../../bridge/index.js";
 import type { Chain } from "../../../chains/types.js";
 import type { ThirdwebClient } from "../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../constants/addresses.js";
@@ -163,9 +164,14 @@ export type PayEmbedProps = {
 // Enhanced UIOptions to handle unsupported token state
 type UIOptionsResult =
   | { type: "success"; data: UIOptions }
+  | {
+      type: "indexing_token";
+      token: Token;
+      chain: Chain;
+    }
   | {
       type: "unsupported_token";
-      token?: { address: string; symbol?: string; name?: string };
+      token: { address: string; symbol?: string; name?: string };
       chain: Chain;
     };
 
@@ -360,7 +366,9 @@ export function PayEmbed(props: PayEmbedProps) {
           prefillInfo.token?.address || NATIVE_TOKEN_ADDRESS,
           prefillInfo.chain.id,
         ).catch((err) =>
-          err.message.includes("not found") ? undefined : Promise.reject(err),
+          err.message.includes("not supported")
+            ? undefined
+            : Promise.reject(err),
         );
         if (!token) {
           return {
@@ -390,7 +398,9 @@ export function PayEmbed(props: PayEmbedProps) {
           paymentInfo.token?.address || NATIVE_TOKEN_ADDRESS,
           paymentInfo.chain.id,
         ).catch((err) =>
-          err.message.includes("not found") ? undefined : Promise.reject(err),
+          err.message.includes("not supported")
+            ? undefined
+            : Promise.reject(err),
         );
         if (!token) {
           return {
@@ -439,16 +449,6 @@ export function PayEmbed(props: PayEmbedProps) {
     },
   });
 
-  const handleTryDifferentToken = () => {
-    // Refetch to allow user to try again (they might have changed something)
-    bridgeDataQuery.refetch();
-  };
-
-  const handleContactSupport = () => {
-    // Open support link or modal (this could be configurable via props)
-    window.open("https://support.thirdweb.com", "_blank");
-  };
-
   let content = null;
   if (!localeQuery.data || bridgeDataQuery.isLoading) {
     content = (
@@ -465,13 +465,7 @@ export function PayEmbed(props: PayEmbedProps) {
     );
   } else if (bridgeDataQuery.data?.type === "unsupported_token") {
     // Show unsupported token screen
-    content = (
-      <UnsupportedTokenScreen
-        chain={bridgeDataQuery.data.chain}
-        onTryDifferentToken={handleTryDifferentToken}
-        onContactSupport={handleContactSupport}
-      />
-    );
+    content = <UnsupportedTokenScreen chain={bridgeDataQuery.data.chain} />;
   } else if (bridgeDataQuery.data?.type === "success") {
     // Show normal bridge orchestrator
     content = (

packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx

@@ -7,10 +7,6 @@ import {
 } from "../../react/web/ui/Bridge/UnsupportedTokenScreen.js";
 import { ModalThemeWrapper } from "../utils.js";
 
-// Mock functions for story interactions
-const mockTryDifferentToken = () => console.log("Try different token clicked");
-const mockContactSupport = () => console.log("Contact support clicked");
-
 // Props interface for the wrapper component
 interface UnsupportedTokenScreenWithThemeProps
   extends UnsupportedTokenScreenProps {
@@ -44,8 +40,6 @@ const meta = {
   tags: ["autodocs"],
   args: {
     chain: defineChain(1), // Ethereum mainnet
-    onTryDifferentToken: mockTryDifferentToken,
-    onContactSupport: mockContactSupport,
     theme: "dark",
   },
   argTypes: {
@@ -54,15 +48,13 @@ const meta = {
       options: ["light", "dark"],
       description: "Theme for the component",
     },
-    onTryDifferentToken: { action: "try different token clicked" },
-    onContactSupport: { action: "contact support clicked" },
   },
 } satisfies Meta<typeof UnsupportedTokenScreenWithTheme>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const IndexingToken: Story = {
+export const TokenNotSupported: Story = {
   args: {
     theme: "dark",
     chain: defineChain(1), // Ethereum mainnet - will show indexing spinner
@@ -78,7 +70,7 @@ export const IndexingToken: Story = {
   },
 };
 
-export const IndexingTokenLight: Story = {
+export const TokenNotSupportedLight: Story = {
   args: {
     theme: "light",
     chain: defineChain(1), // Ethereum mainnet - will show indexing spinner