thirdweb 5.108.6 → 5.108.7

package/src/stories/Bridge/fixtures.ts

@@ -13,8 +13,11 @@ import type {
   BridgePrepareResult,
 } from "../../react/core/hooks/useBridgePrepare.js";
 import { getDefaultToken } from "../../react/core/utils/defaultTokens.js";
-import type { UIOptions } from "../../react/web/ui/Bridge/BridgeOrchestrator.js";
-import { prepareTransaction } from "../../transaction/prepare-transaction.js";
+import type { DirectPaymentInfo } from "../../react/web/ui/Bridge/types.js";
+import {
+  type PreparedTransaction,
+  prepareTransaction,
+} from "../../transaction/prepare-transaction.js";
 import { toWei } from "../../utils/units.js";
 import type { Account, Wallet } from "../../wallets/interfaces/wallet.js";
 import { storyClient } from "../utils.js";
@@ -636,7 +639,7 @@ const contractInteractionTransaction = claimTo({
 // ========== COMMON DUMMY DATA FOR STORYBOOK ========== //
 
 // Common receiver addresses for testing
-export const RECEIVER_ADDRESSES = {
+const RECEIVER_ADDRESSES = {
   physical: "0x5555666677778888999900001111222233334444" as const,
   primary: "0x2247d5d238d0f9d37184d8332aE0289d1aD9991b" as const,
   secondary: "0xa3841994009B4fEabb01ebcC62062F9E56F701CD" as const,
@@ -677,57 +680,24 @@ const PRODUCT_METADATA = {
   },
 };
 
-// Type aliases for better type safety
-type FundWalletUIOptions = Extract<UIOptions, { mode: "fund_wallet" }>;
-type DirectPaymentUIOptions = Extract<UIOptions, { mode: "direct_payment" }>;
-type TransactionUIOptions = Extract<UIOptions, { mode: "transaction" }>;
+type DirectPaymentUIOptions = {
+  metadata: {
+    description: string | undefined;
+    title: string | undefined;
+    image: string | undefined;
+  };
+  paymentInfo: DirectPaymentInfo;
+  buttonLabel: string | undefined;
+};
 
-// UI Options for FundWallet mode
-export const FUND_WALLET_UI_OPTIONS: Record<
-  "ethDefault" | "ethWithAmount" | "usdcDefault" | "uniLarge" | "customButton",
-  FundWalletUIOptions
-> = {
-  ethDefault: {
-    destinationToken: ETH,
-    metadata: {
-      description: "Add funds to your wallet",
-      title: "Fund Wallet",
-    },
-    mode: "fund_wallet" as const,
-  },
-  ethWithAmount: {
-    destinationToken: ETH,
-    initialAmount: "0.001",
-    metadata: {
-      description: "Add funds to your wallet",
-      title: "Fund Wallet",
-    },
-    mode: "fund_wallet" as const,
-  },
-  uniLarge: {
-    destinationToken: UNI,
-    initialAmount: "150000",
-    metadata: {
-      description: "Add UNI tokens to your wallet",
-      title: "Fund Wallet",
-    },
-    mode: "fund_wallet" as const,
-  },
-  usdcDefault: {
-    destinationToken: USDC,
-    initialAmount: "5",
-    mode: "fund_wallet" as const,
-  },
-  customButton: {
-    destinationToken: ETH,
-    initialAmount: "0.01",
-    metadata: {
-      description: "Test custom button label for funding",
-      title: "Custom Fund Wallet",
-    },
-    mode: "fund_wallet" as const,
-    buttonLabel: "Add Funds Now",
-  },
+type TransactionUIOptions = {
+  metadata: {
+    description: string | undefined;
+    title: string | undefined;
+    image: string | undefined;
+  };
+  transaction: PreparedTransaction;
+  buttonLabel: string | undefined;
 };
 
 // UI Options for DirectPayment mode
@@ -746,7 +716,7 @@ export const DIRECT_PAYMENT_UI_OPTIONS: Record<
       image: PRODUCT_METADATA.concertTicket.image,
       title: "Buy Concert Ticket",
     },
-    mode: "direct_payment" as const,
+    buttonLabel: undefined,
     paymentInfo: {
       amount: "25.00",
       feePayer: "receiver" as const,
@@ -758,8 +728,9 @@ export const DIRECT_PAYMENT_UI_OPTIONS: Record<
     metadata: {
       description: PRODUCT_METADATA.credits.description,
       title: "Add Credits",
+      image: undefined,
     },
-    mode: "direct_payment" as const,
+    buttonLabel: undefined,
     paymentInfo: {
       amount: "25",
       feePayer: "receiver" as const,
@@ -773,7 +744,7 @@ export const DIRECT_PAYMENT_UI_OPTIONS: Record<
       image: PRODUCT_METADATA.digitalArt.image,
       title: "Purchase Digital Art",
     },
-    mode: "direct_payment" as const,
+    buttonLabel: undefined,
     paymentInfo: {
       amount: "0.1",
       feePayer: "sender" as const,
@@ -787,7 +758,7 @@ export const DIRECT_PAYMENT_UI_OPTIONS: Record<
       image: PRODUCT_METADATA.sneakers.image,
       title: "Buy Sneakers",
     },
-    mode: "direct_payment" as const,
+    buttonLabel: undefined,
     paymentInfo: {
       amount: "0.05",
       feePayer: "receiver" as const,
@@ -801,7 +772,7 @@ export const DIRECT_PAYMENT_UI_OPTIONS: Record<
       image: PRODUCT_METADATA.subscription.image,
       title: "Subscribe to Premium",
     },
-    mode: "direct_payment" as const,
+    buttonLabel: undefined,
     paymentInfo: {
       amount: "9.99",
       feePayer: "sender" as const,
@@ -815,7 +786,6 @@ export const DIRECT_PAYMENT_UI_OPTIONS: Record<
       image: PRODUCT_METADATA.digitalArt.image,
       title: "Custom Button Test",
     },
-    mode: "direct_payment" as const,
     buttonLabel: "Purchase Now",
     paymentInfo: {
       amount: "0.05",
@@ -835,32 +805,35 @@ export const TRANSACTION_UI_OPTIONS: Record<
     metadata: {
       description: "Interact with smart contract",
       title: "Contract Interaction",
+      image: undefined,
     },
-    mode: "transaction" as const,
+    buttonLabel: undefined,
     transaction: contractInteractionTransaction,
   },
   erc20Transfer: {
     metadata: {
       description: "Transfer ERC20 tokens",
       title: "Token Transfer",
+      image: undefined,
     },
-    mode: "transaction" as const,
+    buttonLabel: undefined,
     transaction: erc20Transaction,
   },
   ethTransfer: {
     metadata: {
       description: "Review and execute transaction",
       title: "Execute Transaction",
+      image: undefined,
     },
-    mode: "transaction" as const,
+    buttonLabel: undefined,
     transaction: ethTransferTransaction,
   },
   customButton: {
     metadata: {
       description: "Test custom button label for transactions",
       title: "Custom Transaction",
+      image: undefined,
     },
-    mode: "transaction" as const,
     buttonLabel: "Execute Now",
     transaction: ethTransferTransaction,
   },

package/src/stories/BuyWidget.stories.tsx

@@ -1,30 +1,105 @@
 import type { Meta } from "@storybook/react-vite";
 import { base } from "../chains/chain-definitions/base.js";
+import { ethereum } from "../chains/chain-definitions/ethereum.js";
 import { defineChain } from "../chains/utils.js";
-import { BuyWidget } from "../react/web/ui/Bridge/BuyWidget.js";
+import {
+  BuyWidget,
+  type BuyWidgetProps,
+} from "../react/web/ui/Bridge/BuyWidget.js";
 import { storyClient } from "./utils.js";
 
 const meta = {
   parameters: {
     layout: "centered",
   },
-  title: "Connect/BuyWidget",
+  title: "Bridge/Buy/BuyWidget",
 } satisfies Meta<typeof BuyWidget>;
 export default meta;
 
-export function BasicUsage() {
-  return <BuyWidget client={storyClient} chain={base} amount="0.1" />;
+export function Basic() {
+  return <Variant client={storyClient} />;
+}
+
+export function PayAnotherWallet() {
+  return (
+    <Variant
+      client={storyClient}
+      amount="10"
+      chain={base}
+      tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
+      receiverAddress="0x83Dd93fA5D8343094f850f90B3fb90088C1bB425"
+    />
+  );
+}
+
+export function BuyBaseNativeToken() {
+  return <Variant client={storyClient} chain={base} amount="0.1" />;
+}
+
+export function JPYCurrency() {
+  return (
+    <Variant client={storyClient} chain={base} amount="0.1" currency="JPY" />
+  );
+}
+
+export function NoThirdwebBranding() {
+  return (
+    <Variant
+      client={storyClient}
+      chain={base}
+      amount="0.1"
+      currency="JPY"
+      showThirdwebBranding={false}
+    />
+  );
+}
+
+export function BuyBaseUSDC() {
+  return (
+    <Variant
+      client={storyClient}
+      chain={base}
+      amount="0.1"
+      tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
+    />
+  );
+}
+
+export function CustomTitleDescriptionAndButtonLabel() {
+  return (
+    <Variant
+      client={storyClient}
+      title="Custom Title"
+      description="Custom Description"
+      chain={base}
+      amount="0.1"
+      tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
+      buttonLabel="Custom Button Label"
+    />
+  );
+}
+
+export function HideTitle() {
+  return (
+    <Variant
+      client={storyClient}
+      title=""
+      chain={base}
+      amount="0.1"
+      tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
+    />
+  );
 }
 
 export function UnsupportedChain() {
   return (
-    <BuyWidget client={storyClient} chain={defineChain(84532)} amount="0.1" />
+    <Variant client={storyClient} chain={defineChain(84532)} amount="0.1" />
   );
 }
 
 export function UnsupportedToken() {
   return (
-    <BuyWidget
+    <Variant
       client={storyClient}
       chain={base}
       amount="0.1"
@@ -35,7 +110,7 @@ export function UnsupportedToken() {
 
 export function OnlyCardSupported() {
   return (
-    <BuyWidget
+    <Variant
       client={storyClient}
       chain={base}
       amount="0.1"
@@ -46,7 +121,7 @@ export function OnlyCardSupported() {
 
 export function OnlyCryptoSupported() {
   return (
-    <BuyWidget
+    <Variant
       client={storyClient}
       chain={base}
       amount="0.1"
@@ -54,3 +129,23 @@ export function OnlyCryptoSupported() {
     />
   );
 }
+
+export function LargeAmount() {
+  return (
+    <Variant
+      client={storyClient}
+      chain={ethereum}
+      tokenAddress="0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984"
+      amount="150000"
+    />
+  );
+}
+
+function Variant(props: BuyWidgetProps) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "40px" }}>
+      <BuyWidget {...props} theme="dark" />
+      <BuyWidget {...props} theme="light" />
+    </div>
+  );
+}

package/src/stories/utils.tsx

@@ -3,7 +3,6 @@ import {
   CustomThemeProvider,
   useCustomTheme,
 } from "../react/core/design-system/CustomThemeProvider.js";
-import type { Theme } from "../react/core/design-system/index.js";
 import { radius } from "../react/native/design-system/index.js";
 
 const clientId = process.env.STORYBOOK_CLIENT_ID;
@@ -16,15 +15,23 @@ export const storyClient = createThirdwebClient({
   clientId: clientId,
 });
 
-export const ModalThemeWrapper = (props: {
-  children: React.ReactNode;
-  theme: "light" | "dark" | Theme;
-}) => {
-  const { theme } = props;
+export const ModalThemeWrapper = (props: { children: React.ReactNode }) => {
   return (
-    <CustomThemeProvider theme={theme}>
-      <ModalWrapper>{props.children}</ModalWrapper>
-    </CustomThemeProvider>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+      }}
+    >
+      <CustomThemeProvider theme={"dark"}>
+        <ModalWrapper>{props.children}</ModalWrapper>
+      </CustomThemeProvider>
+
+      <CustomThemeProvider theme={"light"}>
+        <ModalWrapper>{props.children}</ModalWrapper>
+      </CustomThemeProvider>
+    </div>
   );
 };
 

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.108.6";
+export const version = "5.108.7";

package/src/x402/common.ts

@@ -46,7 +46,6 @@ export async function decodePaymentRequest(
     facilitator,
     resourceUrl,
     routeConfig = {},
-    payTo,
     method,
     paymentData,
   } = args;
@@ -105,10 +104,9 @@ export async function decodePaymentRequest(
     resource: resourceUrl,
     description: description ?? "",
     mimeType: mimeType ?? "application/json",
-    payTo: getAddress(payTo),
+    payTo: getAddress(facilitator.address),
     maxTimeoutSeconds: maxTimeoutSeconds ?? 300,
     asset: getAddress(asset.address),
-    // TODO: Rename outputSchema to requestStructure
     outputSchema: {
       input: {
         type: "http",
@@ -119,7 +117,6 @@ export async function decodePaymentRequest(
       output: outputSchema,
     },
     extra: {
-      facilitatorAddress: facilitator.address,
       ...((asset as ERC20TokenAmount["asset"]).eip712 ?? {}),
     },
   });
@@ -139,7 +136,7 @@ export async function decodePaymentRequest(
     };
   }
 
-  // Verify payment
+  // decode b64 payment
   let decodedPayment: RequestedPaymentPayload;
   try {
     decodedPayment = decodePayment(paymentData);

package/src/x402/facilitator.ts

@@ -5,6 +5,7 @@ import { withCache } from "../utils/promise/withCache.js";
 import type {
   FacilitatorSettleResponse,
   FacilitatorSupportedResponse,
+  FacilitatorVerifyResponse,
   RequestedPaymentPayload,
   RequestedPaymentRequirements,
 } from "./schemas.js";
@@ -35,7 +36,7 @@ export type ThirdwebX402Facilitator = {
   verify: (
     payload: RequestedPaymentPayload,
     paymentRequirements: RequestedPaymentRequirements,
-  ) => Promise<VerifyResponse>;
+  ) => Promise<FacilitatorVerifyResponse>;
   settle: (
     payload: RequestedPaymentPayload,
     paymentRequirements: RequestedPaymentRequirements,
@@ -126,7 +127,6 @@ export function facilitator(
         },
         settle: {
           "x-secret-key": secretKey,
-          "x-settlement-wallet-address": serverWalletAddress,
           ...(config.vaultAccessToken
             ? { "x-vault-access-token": config.vaultAccessToken }
             : {}),
@@ -149,7 +149,7 @@ export function facilitator(
     async verify(
       payload: RequestedPaymentPayload,
       paymentRequirements: RequestedPaymentRequirements,
-    ): Promise<VerifyResponse> {
+    ): Promise<FacilitatorVerifyResponse> {
       const url = config.baseUrl ?? DEFAULT_BASE_URL;
 
       let headers = { "Content-Type": "application/json" };

package/src/x402/schemas.ts

@@ -6,6 +6,7 @@ import {
   PaymentRequirementsSchema,
   SettleResponseSchema,
   SupportedPaymentKindsResponseSchema,
+  VerifyResponseSchema,
 } from "x402/types";
 import { z } from "zod";
 import type { Chain } from "../chains/types.js";
@@ -52,11 +53,20 @@ export type RequestedPaymentRequirements = z.infer<
 
 const FacilitatorSettleResponseSchema = SettleResponseSchema.extend({
   network: FacilitatorNetworkSchema,
+  errorMessage: z.string().optional(),
 });
 export type FacilitatorSettleResponse = z.infer<
   typeof FacilitatorSettleResponseSchema
 >;
 
+const FacilitatorVerifyResponseSchema = VerifyResponseSchema.extend({
+  errorMessage: z.string().optional(),
+});
+
+export type FacilitatorVerifyResponse = z.infer<
+  typeof FacilitatorVerifyResponseSchema
+>;
+
 export const SupportedSignatureTypeSchema = z.enum([
   "TransferWithAuthorization",
   "Permit",

package/src/x402/settle-payment.ts

@@ -156,6 +156,7 @@ export async function settlePayment(
         },
       };
     } else {
+      const error = settlement.errorReason || "Settlement error";
       return {
         status: 402,
         responseHeaders: {
@@ -163,10 +164,9 @@ export async function settlePayment(
         },
         responseBody: {
           x402Version,
-          error:
-            errorMessages?.settlementFailed ||
-            settlement.errorReason ||
-            "Settlement failed",
+          error,
+          errorMessage:
+            errorMessages?.settlementFailed || settlement.errorMessage,
           accepts: paymentRequirements,
         },
       };
@@ -179,9 +179,10 @@ export async function settlePayment(
       },
       responseBody: {
         x402Version,
-        error:
+        error: "Settlement error",
+        errorMessage:
           errorMessages?.settlementFailed ||
-          (error instanceof Error ? error.message : "Settlement error"),
+          (error instanceof Error ? error.message : undefined),
         accepts: paymentRequirements,
       },
     };

package/src/x402/sign.ts

@@ -230,18 +230,13 @@ async function signERC3009Authorization(
 
 async function signERC2612Permit(
   account: Account,
-  { from, value, validBefore, nonce }: ExactEvmPayloadAuthorization,
+  { from, to, value, validBefore, nonce }: ExactEvmPayloadAuthorization,
   { asset, network, extra }: RequestedPaymentRequirements,
 ): Promise<{ signature: Hex }> {
   const chainId = networkToChainId(network);
   const name = extra?.name;
   const version = extra?.version;
-  const facilitatorAddress = extra?.facilitatorAddress;
-  if (!facilitatorAddress) {
-    throw new Error(
-      "facilitatorAddress is required in PaymentRequirements extra to pay with permit-based assets",
-    );
-  }
+
   if (!name || !version) {
     throw new Error(
       "name and version are required in PaymentRequirements extra to pay with permit-based assets",
@@ -268,7 +263,7 @@ async function signERC2612Permit(
     primaryType: "Permit" as const,
     message: {
       owner: getAddress(from),
-      spender: getAddress(facilitatorAddress), // approve the facilitator
+      spender: getAddress(to),
       value: BigInt(value),
       nonce: hexToBigInt(nonce as Hex),
       deadline: BigInt(validBefore),

package/src/x402/types.ts

@@ -1,7 +1,6 @@
 import type { Money, PaymentMiddlewareConfig } from "x402/types";
 import type z from "zod";
 import type { Chain } from "../chains/types.js";
-import type { Address } from "../utils/address.js";
 import type { Prettify } from "../utils/type-utils.js";
 import type { ThirdwebX402Facilitator, WaitUntil } from "./facilitator.js";
 import type {
@@ -27,8 +26,6 @@ export type PaymentArgs = {
   method: "GET" | "POST" | ({} & string);
   /** The payment data/proof provided by the client, typically from the X-PAYMENT header */
   paymentData?: string | null;
-  /** The wallet address that should receive the payment */
-  payTo: Address;
   /** The blockchain network where the payment should be processed */
   network: FacilitatorNetwork | Chain;
   /** The price for accessing the resource - either a USD amount (e.g., "$0.10") or a specific token amount */
@@ -37,6 +34,8 @@ export type PaymentArgs = {
   facilitator: ThirdwebX402Facilitator;
   /** Optional configuration for the payment middleware route */
   routeConfig?: PaymentMiddlewareConfig;
+  /** @deprecated Use facilitator.address instead */
+  payTo?: string;
 };
 
 export type SettlePaymentArgs = PaymentArgs & {
@@ -50,8 +49,10 @@ export type PaymentRequiredResult = {
   responseBody: {
     /** The X402 protocol version */
     x402Version: number;
-    /** Human-readable error message */
+    /** error code */
     error: string;
+    /** Human-readable error message */
+    errorMessage?: string;
     /** Array of acceptable payment methods and requirements */
     accepts: RequestedPaymentRequirements[];
     /** Optional payer address if verification partially succeeded */

package/src/x402/verify-payment.ts

@@ -101,6 +101,7 @@ export async function verifyPayment(
         selectedPaymentRequirements,
       };
     } else {
+      const error = verification.invalidReason || "Verification failed";
       return {
         status: 402,
         responseHeaders: {
@@ -108,10 +109,9 @@ export async function verifyPayment(
         },
         responseBody: {
           x402Version,
-          error:
-            errorMessages?.verificationFailed ||
-            verification.invalidReason ||
-            "Verification failed",
+          error: error,
+          errorMessage:
+            errorMessages?.verificationFailed || verification.errorMessage,
           accepts: paymentRequirements,
         },
       };
@@ -124,9 +124,10 @@ export async function verifyPayment(
       },
       responseBody: {
         x402Version,
-        error:
+        error: "Verification error",
+        errorMessage:
           errorMessages?.verificationFailed ||
-          (error instanceof Error ? error.message : "Verification error"),
+          (error instanceof Error ? error.message : undefined),
         accepts: paymentRequirements,
       },
     };