WIP brige embed

AGENTS.md

@@ -20,6 +20,7 @@ Welcome, AI copilots! This guide captures the coding standards, architectural de
 - Biome governs formatting and linting; its rules live in biome.json.
 - Run pnpm biome check --apply before committing.
 - Avoid editor‑specific configs; rely on the shared settings.
+- make sure everything builds after each file change by running `pnpm build`
 
 ⸻
 
@@ -39,7 +40,8 @@ Welcome, AI copilots! This guide captures the coding standards, architectural de
 - Co‑locate tests: foo.ts ↔ foo.test.ts.
 - Use real function invocations with stub data; avoid brittle mocks.
 - For network interactions, use Mock Service Worker (MSW) to intercept fetch/HTTP calls, mocking only scenarios that are hard to reproduce.
-- Keep tests deterministic and side‑effect free; Jest is pre‑configured.
+- Keep tests deterministic and side‑effect free; Vitest is pre‑configured.
+- to run the tests: `cd packages thirdweb & pnpm test:dev <filename>`
 
 ⸻
 

apps/playground-web/src/app/connect/pay/commerce/page.tsx

@@ -63,7 +63,8 @@ function BuyMerch() {
                   sellerAddress: "0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675",
                 },
                 metadata: {
-                  name: "Black Hoodie (Size L)",
+                  name: "Black Hoodie",
+                  description: "Size L. Ships worldwide.",
                   image: "/drip-hoodie.png",
                 },
               }}

apps/playground-web/src/app/connect/pay/components/types.ts

@@ -12,6 +12,7 @@ export type PayEmbedPlaygroundOptions = {
     mode?: "fund_wallet" | "direct_payment" | "transaction";
     title: string | undefined;
     image: string | undefined;
+    description: string | undefined;
 
     // fund_wallet mode options
     buyTokenAddress: string | undefined;

apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx

@@ -496,6 +496,26 @@ export function LeftSection(props: {
               />
             </div>
           </div>
+
+          {/* Modal description */}
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="modal-description">Image</Label>
+            <Input
+              id="modal-description"
+              placeholder="Your own description here"
+              className="bg-card"
+              value={options.payOptions.description}
+              onChange={(e) =>
+                setOptions((v) => ({
+                  ...v,
+                  payOptions: {
+                    ...payOptions,
+                    description: e.target.value,
+                  },
+                }))
+              }
+            />
+          </div>
         </div>
       </CollapsibleSection>
 

apps/playground-web/src/app/connect/pay/embed/RightSection.tsx

@@ -70,15 +70,19 @@ export function RightSection(props: {
             (props.options.payOptions.mode === "transaction"
               ? "Transaction"
               : props.options.payOptions.mode === "direct_payment"
-                ? "Purchase"
+                ? "Product Name"
                 : "Buy Crypto"),
+          description:
+            props.options.payOptions.description || "Your own description here",
           image:
             props.options.payOptions.image ||
-            `https://placehold.co/600x400/${
-              props.options.theme.type === "dark"
-                ? "1d1d23/7c7a85"
-                : "f2eff3/6f6d78"
-            }?text=Your%20Product%20Here&font=roboto`,
+            props.options.payOptions.mode === "direct_payment"
+              ? `https://placehold.co/600x400/${
+                  props.options.theme.type === "dark"
+                    ? "1d1d23/7c7a85"
+                    : "f2eff3/6f6d78"
+                }?text=Your%20Product%20Here&font=roboto`
+              : undefined,
         },
 
         // Mode-specific options

apps/playground-web/src/app/connect/pay/embed/page.tsx

@@ -17,6 +17,7 @@ const defaultConnectOptions: PayEmbedPlaygroundOptions = {
     mode: "fund_wallet",
     title: "",
     image: "",
+    description: "",
     buyTokenAddress: NATIVE_TOKEN_ADDRESS,
     buyTokenAmount: "0.01",
     buyTokenChain: base,

apps/playground-web/src/components/pay/direct-payment.tsx

@@ -20,6 +20,7 @@ export function BuyMerchPreview() {
           },
           metadata: {
             name: "Black Hoodie (Size L)",
+            description: "Size L. Ships worldwide.",
             image: "/drip-hoodie.png",
           },
         }}

packages/thirdweb/scripts/wallets/generate.ts

@@ -238,11 +238,11 @@ export type MinimalWalletInfo = {
 /**
  * @internal
  */
-const ALL_MINIMAL_WALLET_INFOS = <const>${JSON.stringify(
+const ALL_MINIMAL_WALLET_INFOS = ${JSON.stringify(
       [...walletInfos, ...customWalletInfos],
       null,
       2,
-    )} satisfies MinimalWalletInfo[];
+    )} as const satisfies MinimalWalletInfo[];
 
 export default ALL_MINIMAL_WALLET_INFOS;
 `,

packages/thirdweb/src/bridge/Routes.ts

@@ -131,6 +131,7 @@ export async function routes(options: routes.Options): Promise<routes.Result> {
     sortBy,
     limit,
     offset,
+    includePrices,
   } = options;
 
   const clientFetch = getClientFetch(client);
@@ -159,6 +160,9 @@ export async function routes(options: routes.Options): Promise<routes.Result> {
   if (sortBy) {
     url.searchParams.set("sortBy", sortBy);
   }
+  if (includePrices) {
+    url.searchParams.set("includePrices", includePrices.toString());
+  }
 
   const response = await clientFetch(url.toString());
   if (!response.ok) {
@@ -185,6 +189,7 @@ export declare namespace routes {
     transactionHash?: ox__Hex.Hex;
     sortBy?: "popularity";
     maxSteps?: number;
+    includePrices?: boolean;
     limit?: number;
     offset?: number;
   };

packages/thirdweb/src/bridge/Token.ts

@@ -158,7 +158,7 @@ export async function tokens(options: tokens.Options): Promise<tokens.Result> {
 
 export declare namespace tokens {
   /**
-   * Input parameters for {@link Bridge.tokens}.
+   * Input parameters for {@link tokens}.
    */
   type Options = {
     /** Your {@link ThirdwebClient} instance. */
@@ -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/bridge/types/BridgeAction.ts

@@ -1 +1 @@
-export type Action = "approval" | "transfer" | "buy" | "sell";
+export type Action = "approval" | "transfer" | "buy" | "sell" | "fee";

packages/thirdweb/src/bridge/types/Errors.ts

@@ -1,3 +1,5 @@
+import { stringify } from "../../utils/json.js";
+
 type ErrorCode =
   | "INVALID_INPUT"
   | "ROUTE_NOT_FOUND"
@@ -22,4 +24,13 @@ export class ApiError extends Error {
     this.correlationId = args.correlationId;
     this.statusCode = args.statusCode;
   }
+
+  override toString() {
+    return stringify({
+      code: this.code,
+      message: this.message,
+      statusCode: this.statusCode,
+      correlationId: this.correlationId,
+    });
+  }
 }

packages/thirdweb/src/pay/buyWithFiat/getQuote.ts

@@ -288,9 +288,9 @@ export async function getBuyWithFiatQuote(
       provider?: FiatProvider,
     ): "stripe" | "coinbase" | "transak" => {
       switch (provider) {
-        case "STRIPE":
+        case "stripe":
           return "stripe";
-        case "TRANSAK":
+        case "transak":
           return "transak";
         default: // default to coinbase when undefined or any other value
           return "coinbase";

packages/thirdweb/src/pay/convert/cryptoToFiat.ts

@@ -2,7 +2,7 @@ import type { Address } from "abitype";
 import type { Chain } from "../../chains/types.js";
 import type { ThirdwebClient } from "../../client/client.js";
 import { isAddress } from "../../utils/address.js";
-import { getTokenPrice } from "./get-token.js";
+import { getToken } from "./get-token.js";
 import type { SupportedFiatCurrency } from "./type.js";
 
 /**
@@ -73,11 +73,11 @@ export async function convertCryptoToFiat(
       "Invalid fromTokenAddress. Expected a valid EVM contract address",
     );
   }
-  const price = await getTokenPrice(client, fromTokenAddress, chain.id);
-  if (!price) {
+  const token = await getToken(client, fromTokenAddress, chain.id);
+  if (token.priceUsd === 0) {
     throw new Error(
       `Error: Failed to fetch price for token ${fromTokenAddress} on chainId: ${chain.id}`,
     );
   }
-  return { result: price * fromAmount };
+  return { result: token.priceUsd * fromAmount };
 }

packages/thirdweb/src/pay/convert/fiatToCrypto.ts

@@ -2,7 +2,7 @@ import type { Address } from "abitype";
 import type { Chain } from "../../chains/types.js";
 import type { ThirdwebClient } from "../../client/client.js";
 import { isAddress } from "../../utils/address.js";
-import { getTokenPrice } from "./get-token.js";
+import { getToken } from "./get-token.js";
 import type { SupportedFiatCurrency } from "./type.js";
 
 /**
@@ -72,11 +72,11 @@ export async function convertFiatToCrypto(
   if (!isAddress(to)) {
     throw new Error("Invalid `to`. Expected a valid EVM contract address");
   }
-  const price = await getTokenPrice(client, to, chain.id);
-  if (!price || price === 0) {
+  const token = await getToken(client, to, chain.id);
+  if (!token || token.priceUsd === 0) {
     throw new Error(
       `Error: Failed to fetch price for token ${to} on chainId: ${chain.id}`,
     );
   }
-  return { result: fromAmount / price };
+  return { result: fromAmount / token.priceUsd };
 }

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

@@ -1,20 +1,33 @@
-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 getTokenPrice(
+export async function getToken(
   client: ThirdwebClient,
   tokenAddress: string,
   chainId: number,
-) {
+): Promise<Token> {
   return withCache(
     async () => {
       const result = await tokens({
         client,
         tokenAddress,
         chainId,
       });
-      return result[0]?.priceUsd;
+      const token = result[0];
+      if (!token) {
+        // Attempt to add the token
+        const tokenResult = await add({
+          client,
+          chainId,
+          tokenAddress,
+        }).catch(() => {
+          throw new Error("Token not supported");
+        });
+        return tokenResult;
+      }
+      return token;
     },
     {
       cacheKey: `get-token-price-${tokenAddress}-${chainId}`,

packages/thirdweb/src/pay/utils/commonTypes.ts

@@ -19,4 +19,4 @@ export type PayOnChainTransactionDetails = {
 
 export type FiatProvider = (typeof FiatProviders)[number];
 
-export const FiatProviders = ["COINBASE", "STRIPE", "TRANSAK"] as const;
+export const FiatProviders = ["coinbase", "stripe", "transak"] as const;