thirdweb 5.108.1 → 5.108.2

package/src/script-exports/readme.md

@@ -0,0 +1,72 @@
+# Bridge Widget
+
+Add the script in document head and the element where you want to render the bridge widget in your page
+
+```html
+<!-- add the bridge-widget script in the head of the document, it adds the `BridgeWidget` global variable to the window object -->
+<script src="https://unpkg.com/thirdweb/scripts/bridge-widget.js"></script>
+
+<!-- add a unique id to an element where you want to render the bridge widget -->
+<div id="bridge-widget"></div>
+```
+
+### Basic Usage
+
+```html
+<script>
+  // get the element where you want to render the bridge widget
+  const node = document.getElementById("bridge-widget");
+
+  // render the widget
+  BridgeWidget.render(node, {
+    clientId: "your-client-id",
+    theme: "dark",
+    buy: {
+      chainId: 8453,
+      amount: "0.1",
+    },
+  });
+</script>
+```
+
+### Custom Theme
+
+```html
+<script>
+  BridgeWidget.render(node, {
+    clientId: "your-client-id",
+    theme: {
+      type: "dark",
+      colors: {
+        modalBg: "red",
+      },
+    },
+    buy: {
+      chainId: 8453,
+      amount: "0.1",
+    },
+  });
+</script>
+```
+
+### Customizing Swap UI
+
+```html
+<script>
+  BridgeWidget.render(node, {
+    clientId: "your-client-id",
+    swap: {
+      prefill: {
+        buyToken: {
+          chainId: 8453,
+          tokenAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
+        },
+      },
+    },
+    buy: {
+      chainId: 8453,
+      amount: "0.1",
+    },
+  });
+</script>
+```

package/src/stories/Bridge/BridgeOrchestrator.stories.tsx

@@ -241,6 +241,37 @@ export const TransactionLight: Story = {
   },
 };
 
+/**
+ * Transaction mode in light theme showing an ERC20 token transfer.
+ */
+export const TransactionJPYCurrency: Story = {
+  args: {
+    connectLocale: undefined,
+    connectOptions: undefined,
+    onCancel: undefined,
+    onComplete: undefined,
+    onError: undefined,
+    paymentLinkId: undefined,
+    presetOptions: undefined,
+    purchaseData: undefined,
+    receiverAddress: undefined,
+    theme: "light",
+    uiOptions: {
+      ...TRANSACTION_UI_OPTIONS.erc20Transfer,
+      currency: "JPY",
+    },
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story:
+          "Light theme version of transaction mode showing an ERC20 token transfer with proper token amount formatting and USD conversion.",
+      },
+    },
+  },
+};
+
 export const CustompresetOptions: Story = {
   args: {
     connectLocale: undefined,

package/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta } from "@storybook/react";
+import { BridgeWidgetScript } from "../../../script-exports/bridge-widget-script.js";
+import { storyClient } from "../../utils.js";
+
+const meta: Meta<typeof BridgeWidgetScript> = {
+  title: "Bridge/BridgeWidgetScript",
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => {
+      return (
+        <div>
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+export default meta;
+
+export function BasicUsage() {
+  return (
+    <BridgeWidgetScript
+      clientId={storyClient.clientId}
+      buy={{ chainId: 8453, amount: "0.1" }}
+    />
+  );
+}
+
+export function LightTheme() {
+  return (
+    <BridgeWidgetScript
+      clientId={storyClient.clientId}
+      theme="light"
+      buy={{ chainId: 8453, amount: "0.1" }}
+    />
+  );
+}
+
+export function CurrencySet() {
+  return (
+    <BridgeWidgetScript
+      clientId={storyClient.clientId}
+      currency="JPY"
+      buy={{ chainId: 8453, amount: "0.1" }}
+    />
+  );
+}
+
+export function NoThirdwebBranding() {
+  return (
+    <BridgeWidgetScript
+      clientId={storyClient.clientId}
+      theme="light"
+      buy={{ chainId: 8453, amount: "0.1" }}
+      showThirdwebBranding={false}
+    />
+  );
+}
+
+export function CustomTheme() {
+  return (
+    <BridgeWidgetScript
+      clientId={storyClient.clientId}
+      buy={{ chainId: 8453, amount: "0.1" }}
+      theme={{
+        type: "light",
+        colors: {
+          modalBg: "#FFFFF0",
+          tertiaryBg: "#DBE4C9",
+          borderColor: "#8AA624",
+          secondaryText: "#3E3F29",
+          accentText: "#E43636",
+        },
+      }}
+    />
+  );
+}

package/src/stories/Bridge/StepRunner.stories.tsx

@@ -7,7 +7,11 @@ import type { CompletedStatusResult } from "../../react/core/hooks/useStepExecut
 import { StepRunner } from "../../react/web/ui/Bridge/StepRunner.js";
 import type { Wallet } from "../../wallets/interfaces/wallet.js";
 import { ModalThemeWrapper, storyClient } from "../utils.js";
-import { STORY_MOCK_WALLET, simpleBuyRequest } from "./fixtures.js";
+import {
+  STORY_MOCK_WALLET,
+  simpleBuyQuote,
+  simpleBuyRequest,
+} from "./fixtures.js";
 
 // Mock window adapter
 const mockWindowAdapter: WindowAdapter = {
@@ -32,7 +36,7 @@ const StepRunnerWithTheme = (props: StepRunnerWithThemeProps) => {
   const { theme, ...componentProps } = props;
   return (
     <ModalThemeWrapper theme={theme}>
-      <StepRunner {...componentProps} />
+      <StepRunner {...componentProps} preparedQuote={simpleBuyQuote} />
     </ModalThemeWrapper>
   );
 };
@@ -59,29 +63,8 @@ const meta = {
   },
   component: StepRunnerWithTheme,
   parameters: {
-    docs: {
-      description: {
-        component:
-          "**StepRunner** executes prepared route steps sequentially, showing real-time progress and transaction status.\n\n" +
-          "## Features\n" +
-          "- **Real Execution**: Uses useStepExecutor hook for actual transaction processing\n" +
-          "- **Progress Tracking**: Visual progress bar and step-by-step status updates\n" +
-          "- **Error Handling**: Retry functionality for failed transactions\n" +
-          "- **Transaction Batching**: Optimizes multiple transactions when possible\n" +
-          "- **Onramp Support**: Handles fiat-to-crypto onramp flows\n\n" +
-          "## Props\n" +
-          "- `steps`: Array of RouteStep objects from Bridge.prepare()\n" +
-          "- `wallet`: Connected wallet for transaction signing\n" +
-          "- `client`: ThirdwebClient instance\n" +
-          "- `windowAdapter`: Platform-specific window/URL handler\n" +
-          "- `onramp`: Optional onramp configuration\n\n" +
-          "## Integration\n" +
-          "This component is typically used within the BridgeOrchestrator after route preparation.",
-      },
-    },
     layout: "centered",
   },
-  tags: ["autodocs"],
   title: "Bridge/StepRunner",
 } satisfies Meta<typeof StepRunnerWithTheme>;
 

package/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx

@@ -68,7 +68,7 @@ export const TokenNotSupported: Story = {
     docs: {
       description: {
         story:
-          "Shows the loading state when a token is being indexed by the Universal Bridge on a mainnet chain.",
+          "Shows the loading state when a token is being indexed by the Bridge on a mainnet chain.",
       },
     },
   },
@@ -85,7 +85,7 @@ export const TokenNotSupportedLight: Story = {
     docs: {
       description: {
         story:
-          "Shows the loading state when a token is being indexed by the Universal Bridge on a mainnet chain (light theme).",
+          "Shows the loading state when a token is being indexed by the Bridge on a mainnet chain (light theme).",
       },
     },
   },
@@ -102,7 +102,7 @@ export const TestnetNotSupported: Story = {
     docs: {
       description: {
         story:
-          "Shows the error state when trying to use the Universal Bridge on a testnet chain (Sepolia in this example).",
+          "Shows the error state when trying to use the Bridge on a testnet chain (Sepolia in this example).",
       },
     },
   },
@@ -119,7 +119,7 @@ export const TestnetNotSupportedLight: Story = {
     docs: {
       description: {
         story:
-          "Shows the error state when trying to use the Universal Bridge on a testnet chain (Sepolia in this example, light theme).",
+          "Shows the error state when trying to use the Bridge on a testnet chain (Sepolia in this example, light theme).",
       },
     },
   },

package/src/utils/domains.ts

@@ -45,7 +45,7 @@ type DomainOverrides = {
    */
   engineCloud?: string;
   /**
-   * The base URL for the universal bridge service.
+   * The base URL for the bridge service.
    * @default "bridge.thirdweb.com"
    */
   bridge?: string;

package/src/utils/units.test.ts

@@ -199,6 +199,19 @@ describe("toUnits", () => {
     expect(toUnits("69.59000000059", 9)).toMatchInlineSnapshot("69590000001n");
     expect(toUnits("69.59000002359", 9)).toMatchInlineSnapshot("69590000024n");
   });
+
+  it("scientific notation", () => {
+    // negative exponents
+    expect(toUnits("1e-18", 18)).toMatchInlineSnapshot("1n");
+    expect(toUnits("1e-16", 18)).toMatchInlineSnapshot("100n");
+    expect(toUnits("1.23456789012345e-7", 18)).toMatchInlineSnapshot(
+      "123456789012n",
+    );
+    // positive exponents
+    expect(toUnits("1.234e3", 18)).toMatchInlineSnapshot(
+      "1234000000000000000000n",
+    );
+  });
 });
 
 describe("toWei", () => {

package/src/utils/units.ts

@@ -73,6 +73,10 @@ export function toEther(wei: bigint) {
  * @utils
  */
 export function toUnits(tokens: string, decimals: number): bigint {
+  if (tokens.includes("e")) {
+    tokens = Number(tokens).toFixed(decimals);
+  }
+
   let [integerPart, fractionPart = ""] = tokens.split(".") as [string, string];
   const prefix = integerPart.startsWith("-") ? "-" : "";
   if (prefix) {

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.108.1";
+export const version = "5.108.2";

package/src/wallets/eip5792/send-calls.ts

@@ -113,7 +113,7 @@ export type SendCallsResult = Prettify<{
  * });
  * ```
  * We recommend proxying any paymaster calls via an API route you setup and control.
- * 
+ *
  * @extension EIP5792
  */
 export async function sendCalls<const ID extends WalletId>(

package/src/wallets/smart/smart-wallet-modular.test.ts

@@ -108,7 +108,7 @@ describe.runIf(process.env.TW_SECRET_KEY).sequential(
       });
     });
 
-    it("should send a batch transaction", async () => {
+    it.skip("should send a batch transaction", async () => {
       const tx = prepareTransaction({
         chain,
         client,

package/src/x402/common.ts

@@ -1,15 +1,8 @@
-import {
-  type ERC20TokenAmount,
-  type Money,
-  moneySchema,
-  type Network,
-  SupportedEVMNetworks,
-} from "x402/types";
+import { type ERC20TokenAmount, type Money, moneySchema } from "x402/types";
 import { getAddress } from "../utils/address.js";
 import { decodePayment } from "./encode.js";
 import type { facilitator as facilitatorType } from "./facilitator.js";
 import {
-  type FacilitatorNetwork,
   networkToChainId,
   type RequestedPaymentPayload,
   type RequestedPaymentRequirements,
@@ -54,9 +47,28 @@ export async function decodePaymentRequest(
     errorMessages,
     discoverable,
   } = routeConfig;
+
+  let chainId: number;
+  try {
+    chainId = networkToChainId(network);
+  } catch (error) {
+    return {
+      status: 402,
+      responseHeaders: { "Content-Type": "application/json" },
+      responseBody: {
+        x402Version,
+        error:
+          error instanceof Error
+            ? error.message
+            : `Invalid network: ${network}`,
+        accepts: [],
+      },
+    };
+  }
+
   const atomicAmountForAsset = await processPriceToAtomicAmount(
     price,
-    network,
+    chainId,
     facilitator,
   );
   if ("error" in atomicAmountForAsset) {
@@ -74,45 +86,28 @@ export async function decodePaymentRequest(
 
   const paymentRequirements: RequestedPaymentRequirements[] = [];
 
-  if (
-    SupportedEVMNetworks.includes(network as Network) ||
-    network.startsWith("eip155:")
-  ) {
-    paymentRequirements.push({
-      scheme: "exact",
-      network,
-      maxAmountRequired,
-      resource: resourceUrl,
-      description: description ?? "",
-      mimeType: mimeType ?? "application/json",
-      payTo: getAddress(payTo),
-      maxTimeoutSeconds: maxTimeoutSeconds ?? 300,
-      asset: getAddress(asset.address),
-      // TODO: Rename outputSchema to requestStructure
-      outputSchema: {
-        input: {
-          type: "http",
-          method,
-          discoverable: discoverable ?? true,
-          ...inputSchema,
-        },
-        output: outputSchema,
-      },
-      extra: (asset as ERC20TokenAmount["asset"]).eip712,
-    });
-  } else {
-    return {
-      status: 402,
-      responseHeaders: {
-        "Content-Type": "application/json",
-      },
-      responseBody: {
-        x402Version,
-        error: `Unsupported network: ${network}`,
-        accepts: paymentRequirements,
+  paymentRequirements.push({
+    scheme: "exact",
+    network: `eip155:${chainId}`,
+    maxAmountRequired,
+    resource: resourceUrl,
+    description: description ?? "",
+    mimeType: mimeType ?? "application/json",
+    payTo: getAddress(payTo),
+    maxTimeoutSeconds: maxTimeoutSeconds ?? 300,
+    asset: getAddress(asset.address),
+    // TODO: Rename outputSchema to requestStructure
+    outputSchema: {
+      input: {
+        type: "http",
+        method,
+        discoverable: discoverable ?? true,
+        ...inputSchema,
       },
-    };
-  }
+      output: outputSchema,
+    },
+    extra: (asset as ERC20TokenAmount["asset"]).eip712,
+  });
 
   // Check for payment header
   if (!paymentData) {
@@ -188,7 +183,7 @@ export async function decodePaymentRequest(
  */
 async function processPriceToAtomicAmount(
   price: Money | ERC20TokenAmount,
-  network: FacilitatorNetwork,
+  chainId: number,
   facilitator: ReturnType<typeof facilitatorType>,
 ): Promise<
   | { maxAmountRequired: string; asset: ERC20TokenAmount["asset"] }
@@ -207,10 +202,10 @@ async function processPriceToAtomicAmount(
       };
     }
     const parsedUsdAmount = parsedAmount.data;
-    const defaultAsset = await getDefaultAsset(network, facilitator);
+    const defaultAsset = await getDefaultAsset(chainId, facilitator);
     if (!defaultAsset) {
       return {
-        error: `Unable to get default asset on ${network}. Please specify an asset in the payment requirements.`,
+        error: `Unable to get default asset on chain ${chainId}. Please specify an asset in the payment requirements.`,
       };
     }
     asset = defaultAsset;
@@ -228,11 +223,10 @@ async function processPriceToAtomicAmount(
 }
 
 async function getDefaultAsset(
-  network: FacilitatorNetwork,
+  chainId: number,
   facilitator: ReturnType<typeof facilitatorType>,
 ): Promise<ERC20TokenAmount["asset"] | undefined> {
   const supportedAssets = await facilitator.supported();
-  const chainId = networkToChainId(network);
   const matchingAsset = supportedAssets.kinds.find(
     (supported) => supported.network === `eip155:${chainId}`,
   );

package/src/x402/facilitator.ts

@@ -28,6 +28,7 @@ const DEFAULT_BASE_URL = "https://api.thirdweb.com/v1/payments/x402";
  * ```ts
  * import { facilitator } from "thirdweb/x402";
  * import { createThirdwebClient } from "thirdweb";
+ * import { paymentMiddleware } from 'x402-hono'
  *
  * const client = createThirdwebClient({
  *   secretKey: "your-secret-key",

package/src/x402/fetchWithPayment.ts

@@ -84,7 +84,9 @@ export function wrapFetchWithPayment(
     );
 
     if (BigInt(selectedPaymentRequirements.maxAmountRequired) > maxValue) {
-      throw new Error("Payment amount exceeds maximum allowed");
+      throw new Error(
+        `Payment amount exceeds maximum allowed (currently set to ${maxValue} in base units)`,
+      );
     }
 
     const paymentChainId = networkToChainId(

package/src/x402/schemas.ts

@@ -7,6 +7,7 @@ import {
   SettleResponseSchema,
 } from "x402/types";
 import { z } from "zod";
+import type { Chain } from "../chains/types.js";
 
 const FacilitatorNetworkSchema = z.union([
   z.literal("base-sepolia"),
@@ -55,7 +56,10 @@ export type FacilitatorSettleResponse = z.infer<
   typeof FacilitatorSettleResponseSchema
 >;
 
-export function networkToChainId(network: string): number {
+export function networkToChainId(network: string | Chain): number {
+  if (typeof network === "object") {
+    return network.id;
+  }
   if (network.startsWith("eip155:")) {
     const chainId = parseInt(network.split(":")[1] ?? "0");
     if (!Number.isNaN(chainId) && chainId > 0) {

package/src/x402/settle-payment.ts

@@ -25,6 +25,7 @@ import {
  * // Usage in a Next.js API route
  * import { settlePayment, facilitator } from "thirdweb/x402";
  * import { createThirdwebClient } from "thirdweb";
+ * import { arbitrumSepolia } from "thirdweb/chains";
  *
  * const client = createThirdwebClient({
  *   secretKey: process.env.THIRDWEB_SECRET_KEY,
@@ -44,7 +45,7 @@ import {
  *     method: "GET",
  *     paymentData,
  *     payTo: "0x1234567890123456789012345678901234567890",
- *     network: "eip155:84532", // CAIP2 format: "eip155:<chain_id>"
+ *     network: arbitrumSepolia, // or any other chain
  *     price: "$0.10", // or { amount: "100000", asset: { address: "0x...", decimals: 6 } }
  *     facilitator: thirdwebFacilitator,
  *     routeConfig: {
@@ -74,6 +75,7 @@ import {
  * import express from "express";
  * import { settlePayment, facilitator } from "thirdweb/x402";
  * import { createThirdwebClient } from "thirdweb";
+ * import { arbitrumSepolia } from "thirdweb/chains";
  *
  * const client = createThirdwebClient({
  *   secretKey: process.env.THIRDWEB_SECRET_KEY,
@@ -93,7 +95,7 @@ import {
  *     method: req.method,
  *     paymentData: req.headers["x-payment"],
  *     payTo: "0x1234567890123456789012345678901234567890",
- *     network: "eip155:8453", // CAIP2 format: "eip155:<chain_id>"
+ *     network: arbitrumSepolia, // or any other chain
  *     price: "$0.05",
  *     facilitator: thirdwebFacilitator,
  *   });
@@ -136,7 +138,6 @@ export async function settlePayment(
   const { selectedPaymentRequirements, decodedPayment, paymentRequirements } =
     decodePaymentResult;
 
-  // Settle payment
   try {
     const settlement = await facilitator.settle(
       decodedPayment,

package/src/x402/types.ts

@@ -3,6 +3,7 @@ import type {
   Money,
   PaymentMiddlewareConfig,
 } from "x402/types";
+import type { Chain } from "../chains/types.js";
 import type { Address } from "../utils/address.js";
 import type { Prettify } from "../utils/type-utils.js";
 import type { facilitator as facilitatorType } from "./facilitator.js";
@@ -30,7 +31,7 @@ export type PaymentArgs = {
   /** The wallet address that should receive the payment */
   payTo: Address;
   /** The blockchain network where the payment should be processed */
-  network: FacilitatorNetwork;
+  network: FacilitatorNetwork | Chain;
   /** The price for accessing the resource - either a USD amount (e.g., "$0.10") or a specific token amount */
   price: Money | ERC20TokenAmount;
   /** The payment facilitator instance used to verify and settle payments */

package/src/x402/verify-payment.ts

@@ -17,6 +17,7 @@ import {
  * // Usage in a Next.js API route
  * import { verifyPayment, facilitator } from "thirdweb/x402";
  * import { createThirdwebClient } from "thirdweb";
+ * import { arbitrumSepolia } from "thirdweb/chains";
  *
  * const client = createThirdwebClient({
  *   secretKey: process.env.THIRDWEB_SECRET_KEY,
@@ -35,7 +36,7 @@ import {
  *     method: "GET",
  *     paymentData,
  *     payTo: "0x1234567890123456789012345678901234567890",
- *     network: "eip155:84532", // CAIP2 format: "eip155:<chain_id>"
+ *     network: arbitrumSepolia, // or any other chain
  *     price: "$0.10", // or { amount: "100000", asset: { address: "0x...", decimals: 6 } }
  *     facilitator: thirdwebFacilitator,
  *     routeConfig: {