WIP brige embed (#7222)

Co-authored-by: gregfromstl <[email protected]>

Author: joaquim-verges

.changeset/icy-eyes-show.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Updates PayEmbed with refreshed UI and multi-step support

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/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/PayModal.tsx

@@ -44,8 +44,8 @@ export function PayModalButton(props: {
           payOptions={{
             onPurchaseSuccess(info) {
               if (
-                info.type === "crypto" &&
-                info.status.status !== "NOT_FOUND"
+                info?.type === "crypto" &&
+                info?.status.status !== "NOT_FOUND"
               ) {
                 trackEvent({
                   category: "pay",
@@ -58,7 +58,7 @@ export function PayModalButton(props: {
                 });
               }
 
-              if (info.type === "fiat" && info.status.status !== "NOT_FOUND") {
+              if (info?.type === "fiat" && info.status.status !== "NOT_FOUND") {
                 trackEvent({
                   category: "pay",
                   action: "buy",

apps/dashboard/src/app/pay/components/client/PayPageEmbed.client.tsx

@@ -63,7 +63,7 @@ export function PayPageEmbed({
           onPurchaseSuccess: (result) => {
             if (!redirectUri) return;
             const url = new URL(redirectUri);
-            switch (result.type) {
+            switch (result?.type) {
               case "crypto": {
                 url.searchParams.set("status", result.status.status);
                 if (

apps/dashboard/src/components/buttons/MismatchButton.tsx

@@ -293,7 +293,7 @@ export const MismatchButton = forwardRef<
                 payOptions={{
                   onPurchaseSuccess(info) {
                     if (
-                      info.type === "crypto" &&
+                      info?.type === "crypto" &&
                       info.status.status !== "NOT_FOUND"
                     ) {
                       trackEvent({
@@ -308,7 +308,7 @@ export const MismatchButton = forwardRef<
                     }
 
                     if (
-                      info.type === "fiat" &&
+                      info?.type === "fiat" &&
                       info.status.status !== "NOT_FOUND"
                     ) {
                       trackEvent({

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/knip.json

@@ -4,7 +4,8 @@
     "src/exports/**",
     "scripts/**/*.{ts,mjs}",
     "src/cli/bin.ts",
-    "src/transaction/actions/send-batch-transaction.ts"
+    "src/transaction/actions/send-batch-transaction.ts",
+    "src/react/core/hooks/useBridgeRoutes.ts"
   ],
   "project": ["src/**/*.{ts,tsx}", "scripts/**/*.mjs"],
   "ignore": ["src/**/__generated__/**", "**/*.bench.ts"],

packages/thirdweb/package.json

@@ -235,6 +235,7 @@
     "@radix-ui/react-focus-scope": "1.1.7",
     "@radix-ui/react-icons": "1.3.2",
     "@radix-ui/react-tooltip": "1.2.7",
+    "@storybook/react": "9.0.8",
     "@tanstack/react-query": "5.80.7",
     "@thirdweb-dev/engine": "workspace:*",
     "@thirdweb-dev/insight": "workspace:*",

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

@@ -291,9 +291,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 };
 }