thirdweb 5.107.1 → 5.108.0

package/src/react/core/utils/defaultTokens.ts

@@ -289,15 +289,9 @@ const DEFAULT_TOKENS = {
       symbol: "USDC",
     },
   ],
-  "421613": [
+  "421614": [
     {
-      address: "0xe39Ab88f8A4777030A534146A9Ca3B52bd5D43A3",
-      icon: wrappedEthIcon,
-      name: "Wrapped Ether",
-      symbol: "WETH",
-    },
-    {
-      address: "0xfd064A18f3BF249cf1f87FC203E90D8f650f2d63",
+      address: "0x75faf114eafb1BDbe2F0316DF893fd58CE46AA4d",
       icon: usdcIcon,
       name: "USD Coin",
       symbol: "USDC",

package/src/react/web/ui/Bridge/BridgeOrchestrator.tsx

@@ -82,17 +82,17 @@ export interface BridgeOrchestratorProps {
   /**
    * Called when the flow is completed successfully
    */
-  onComplete: () => void;
+  onComplete: (quote: BridgePrepareResult) => void;
 
   /**
    * Called when the flow encounters an error
    */
-  onError: (error: Error) => void;
+  onError: (error: Error, quote: BridgePrepareResult | undefined) => void;
 
   /**
    * Called when the user cancels the flow
    */
-  onCancel: () => void;
+  onCancel: (quote: BridgePrepareResult | undefined) => void;
 
   /**
    * Connect options for wallet connection
@@ -189,19 +189,22 @@ export function BridgeOrchestrator({
   }, [send, uiOptions.mode]);
 
   // Handle post-buy transaction completion
-  const handlePostBuyTransactionComplete = useCallback(() => {
-    onComplete?.();
-    send({ type: "RESET" });
-  }, [onComplete, send]);
+  const handlePostBuyTransactionComplete = useCallback(
+    (quote: BridgePrepareResult) => {
+      onComplete?.(quote);
+      send({ type: "RESET" });
+    },
+    [onComplete, send],
+  );
 
   // Handle errors
   const handleError = useCallback(
     (error: Error) => {
       console.error(error);
-      onError?.(error);
+      onError?.(error, state.context.quote);
       send({ error, type: "ERROR_OCCURRED" });
     },
-    [onError, send],
+    [onError, send, state.context.quote],
   );
 
   // Handle payment method selection
@@ -227,10 +230,13 @@ export function BridgeOrchestrator({
 
   // Handle execution complete
   const handleExecutionComplete = useCallback(
-    (completedStatuses: CompletedStatusResult[]) => {
+    (
+      completedStatuses: CompletedStatusResult[],
+      quote: BridgePrepareResult,
+    ) => {
       send({ completedStatuses, type: "EXECUTION_COMPLETE" });
       if (uiOptions.mode !== "transaction") {
-        onComplete?.();
+        onComplete?.(quote);
       }
     },
     [send, onComplete, uiOptions.mode],
@@ -241,6 +247,8 @@ export function BridgeOrchestrator({
     send({ type: "RETRY" });
   }, [send]);
 
+  const quote = state.context.quote;
+
   // Handle requirements resolved from FundWallet and DirectPayment
   const handleRequirementsResolved = useCallback(
     (amount: string, token: TokenWithPrices, receiverAddress: Address) => {
@@ -263,7 +271,7 @@ export function BridgeOrchestrator({
           error={state.context.currentError}
           onCancel={() => {
             send({ type: "RESET" });
-            onCancel?.();
+            onCancel?.(quote);
           }}
           onRetry={handleRetry}
         />
@@ -369,31 +377,33 @@ export function BridgeOrchestrator({
           />
         )}
 
-      {state.value === "execute" &&
-        state.context.quote &&
-        state.context.request && (
-          <StepRunner
-            autoStart={true}
-            client={client}
-            onBack={() => {
-              send({ type: "BACK" });
-            }}
-            onCancel={onCancel}
-            onComplete={handleExecutionComplete}
-            request={state.context.request}
-            wallet={state.context.selectedPaymentMethod?.payerWallet}
-            windowAdapter={webWindowAdapter}
-          />
-        )}
+      {state.value === "execute" && quote && state.context.request && (
+        <StepRunner
+          autoStart={true}
+          client={client}
+          onBack={() => {
+            send({ type: "BACK" });
+          }}
+          onCancel={() => {
+            onCancel(quote);
+          }}
+          onComplete={(completedStatuses) => {
+            handleExecutionComplete(completedStatuses, quote);
+          }}
+          request={state.context.request}
+          wallet={state.context.selectedPaymentMethod?.payerWallet}
+          windowAdapter={webWindowAdapter}
+        />
+      )}
 
       {state.value === "success" &&
-        state.context.quote &&
+        quote &&
         state.context.completedStatuses && (
           <SuccessScreen
             client={client}
             completedStatuses={state.context.completedStatuses}
             onDone={handleDoneOrContinueClick}
-            preparedQuote={state.context.quote}
+            preparedQuote={quote}
             uiOptions={uiOptions}
             windowAdapter={webWindowAdapter}
             hasPaymentId={!!paymentLinkId}
@@ -402,9 +412,10 @@ export function BridgeOrchestrator({
 
       {state.value === "post-buy-transaction" &&
         uiOptions.mode === "transaction" &&
+        quote &&
         uiOptions.transaction && (
           <ExecutingTxScreen
-            closeModal={handlePostBuyTransactionComplete}
+            closeModal={() => handlePostBuyTransactionComplete(quote)}
             onTxSent={() => {
               // Do nothing
             }}

package/src/react/web/ui/Bridge/BuyWidget.tsx

@@ -23,6 +23,7 @@ import { CustomThemeProvider } from "../../../core/design-system/CustomThemeProv
 import type { Theme } from "../../../core/design-system/index.js";
 import type { SiweAuthOptions } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButton_connectModalOptions } from "../../../core/hooks/connection/ConnectButtonProps.js";
+import type { BridgePrepareResult } from "../../../core/hooks/useBridgePrepare.js";
 import type { SupportedTokens } from "../../../core/utils/defaultTokens.js";
 import { useConnectLocale } from "../ConnectWallet/locale/getConnectLocale.js";
 import { EmbedContainer } from "../ConnectWallet/Modal/ConnectEmbed.js";
@@ -32,6 +33,11 @@ import type { LocaleId } from "../types.js";
 import { BridgeOrchestrator, type UIOptions } from "./BridgeOrchestrator.js";
 import { UnsupportedTokenScreen } from "./UnsupportedTokenScreen.js";
 
+type BuyOrOnrampPrepareResult = Extract<
+  BridgePrepareResult,
+  { type: "buy" | "onramp" }
+>;
+
 export type BuyWidgetProps = {
   /**
    * Customize the supported tokens that users can pay with.
@@ -155,17 +161,17 @@ export type BuyWidgetProps = {
   /**
    * Callback triggered when the purchase is successful.
    */
-  onSuccess?: () => void;
+  onSuccess?: (quote: BuyOrOnrampPrepareResult) => void;
 
   /**
    * Callback triggered when the purchase encounters an error.
    */
-  onError?: (error: Error) => void;
+  onError?: (error: Error, quote: BuyOrOnrampPrepareResult | undefined) => void;
 
   /**
    * Callback triggered when the user cancels the purchase.
    */
-  onCancel?: () => void;
+  onCancel?: (quote: BuyOrOnrampPrepareResult | undefined) => void;
 
   /**
    * @hidden
@@ -447,14 +453,23 @@ export function BuyWidget(props: BuyWidgetProps) {
         client={props.client}
         connectLocale={localeQuery.data}
         connectOptions={props.connectOptions}
-        onCancel={() => {
-          props.onCancel?.();
+        onCancel={(quote) => {
+          // type guard
+          if (quote?.type === "buy" || quote?.type === "onramp") {
+            props.onCancel?.(quote);
+          }
         }}
-        onComplete={() => {
-          props.onSuccess?.();
+        onComplete={(quote) => {
+          // type guard
+          if (quote?.type === "buy" || quote?.type === "onramp") {
+            props.onSuccess?.(quote);
+          }
         }}
-        onError={(err: Error) => {
-          props.onError?.(err);
+        onError={(err: Error, quote) => {
+          // type guard
+          if (quote?.type === "buy" || quote?.type === "onramp") {
+            props.onError?.(err, quote);
+          }
         }}
         paymentLinkId={props.paymentLinkId}
         paymentMethods={props.paymentMethods}

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.107.1";
+export const version = "5.108.0";

package/src/x402/common.ts

@@ -0,0 +1,242 @@
+import {
+  type ERC20TokenAmount,
+  type Money,
+  moneySchema,
+  type Network,
+  SupportedEVMNetworks,
+} 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,
+} from "./schemas.js";
+import {
+  type PaymentArgs,
+  type PaymentRequiredResult,
+  x402Version,
+} from "./types.js";
+
+type GetPaymentRequirementsResult = {
+  status: 200;
+  paymentRequirements: RequestedPaymentRequirements[];
+  selectedPaymentRequirements: RequestedPaymentRequirements;
+  decodedPayment: RequestedPaymentPayload;
+};
+
+/**
+ * Decodes a payment request and returns the payment requirements, selected payment requirements, and decoded payment
+ * @param args
+ * @returns The payment requirements, selected payment requirements, and decoded payment
+ */
+export async function decodePaymentRequest(
+  args: PaymentArgs,
+): Promise<GetPaymentRequirementsResult | PaymentRequiredResult> {
+  const {
+    price,
+    network,
+    facilitator,
+    resourceUrl,
+    routeConfig = {},
+    payTo,
+    method,
+    paymentData,
+  } = args;
+  const {
+    description,
+    mimeType,
+    maxTimeoutSeconds,
+    inputSchema,
+    outputSchema,
+    errorMessages,
+    discoverable,
+  } = routeConfig;
+  const atomicAmountForAsset = await processPriceToAtomicAmount(
+    price,
+    network,
+    facilitator,
+  );
+  if ("error" in atomicAmountForAsset) {
+    return {
+      status: 402,
+      responseHeaders: { "Content-Type": "application/json" },
+      responseBody: {
+        x402Version,
+        error: atomicAmountForAsset.error,
+        accepts: [],
+      },
+    };
+  }
+  const { maxAmountRequired, asset } = atomicAmountForAsset;
+
+  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,
+      },
+    };
+  }
+
+  // Check for payment header
+  if (!paymentData) {
+    return {
+      status: 402,
+      responseHeaders: {
+        "Content-Type": "application/json",
+      },
+      responseBody: {
+        x402Version,
+        error: errorMessages?.paymentRequired || "X-PAYMENT header is required",
+        accepts: paymentRequirements,
+      },
+    };
+  }
+
+  // Verify payment
+  let decodedPayment: RequestedPaymentPayload;
+  try {
+    decodedPayment = decodePayment(paymentData);
+    decodedPayment.x402Version = x402Version;
+  } catch (error) {
+    return {
+      status: 402,
+      responseHeaders: {
+        "Content-Type": "application/json",
+      },
+      responseBody: {
+        x402Version,
+        error:
+          errorMessages?.invalidPayment ||
+          (error instanceof Error ? error.message : "Invalid payment"),
+        accepts: paymentRequirements,
+      },
+    };
+  }
+
+  const selectedPaymentRequirements = paymentRequirements.find(
+    (value) =>
+      value.scheme === decodedPayment.scheme &&
+      value.network === decodedPayment.network,
+  );
+  if (!selectedPaymentRequirements) {
+    return {
+      status: 402,
+      responseHeaders: {
+        "Content-Type": "application/json",
+      },
+      responseBody: {
+        x402Version,
+        error:
+          errorMessages?.noMatchingRequirements ||
+          "Unable to find matching payment requirements",
+        accepts: paymentRequirements,
+      },
+    };
+  }
+
+  return {
+    status: 200,
+    paymentRequirements,
+    decodedPayment,
+    selectedPaymentRequirements,
+  };
+}
+
+/**
+ * Parses the amount from the given price
+ *
+ * @param price - The price to parse
+ * @param network - The network to get the default asset for
+ * @returns The parsed amount or an error message
+ */
+async function processPriceToAtomicAmount(
+  price: Money | ERC20TokenAmount,
+  network: FacilitatorNetwork,
+  facilitator: ReturnType<typeof facilitatorType>,
+): Promise<
+  | { maxAmountRequired: string; asset: ERC20TokenAmount["asset"] }
+  | { error: string }
+> {
+  // Handle USDC amount (string) or token amount (ERC20TokenAmount)
+  let maxAmountRequired: string;
+  let asset: ERC20TokenAmount["asset"];
+
+  if (typeof price === "string" || typeof price === "number") {
+    // USDC amount in dollars
+    const parsedAmount = moneySchema.safeParse(price);
+    if (!parsedAmount.success) {
+      return {
+        error: `Invalid price (price: ${price}). Must be in the form "$3.10", 0.10, "0.001", ${parsedAmount.error}`,
+      };
+    }
+    const parsedUsdAmount = parsedAmount.data;
+    const defaultAsset = await getDefaultAsset(network, facilitator);
+    if (!defaultAsset) {
+      return {
+        error: `Unable to get default asset on ${network}. Please specify an asset in the payment requirements.`,
+      };
+    }
+    asset = defaultAsset;
+    maxAmountRequired = (parsedUsdAmount * 10 ** asset.decimals).toString();
+  } else {
+    // Token amount in atomic units
+    maxAmountRequired = price.amount;
+    asset = price.asset;
+  }
+
+  return {
+    maxAmountRequired,
+    asset,
+  };
+}
+
+async function getDefaultAsset(
+  network: FacilitatorNetwork,
+  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}`,
+  );
+  const assetConfig = matchingAsset?.extra
+    ?.defaultAsset as ERC20TokenAmount["asset"];
+  return assetConfig;
+}

package/src/x402/encode.ts

@@ -0,0 +1,81 @@
+import type { ExactEvmPayload } from "x402/types";
+import {
+  type RequestedPaymentPayload,
+  RequestedPaymentPayloadSchema,
+} from "./schemas.js";
+
+/**
+ * Encodes a payment payload into a base64 string, ensuring bigint values are properly stringified
+ *
+ * @param payment - The payment payload to encode
+ * @returns A base64 encoded string representation of the payment payload
+ */
+export function encodePayment(payment: RequestedPaymentPayload): string {
+  let safe: RequestedPaymentPayload;
+
+  // evm
+  const evmPayload = payment.payload as ExactEvmPayload;
+  safe = {
+    ...payment,
+    payload: {
+      ...evmPayload,
+      authorization: Object.fromEntries(
+        Object.entries(evmPayload.authorization).map(([key, value]) => [
+          key,
+          typeof value === "bigint" ? (value as bigint).toString() : value,
+        ]),
+      ) as ExactEvmPayload["authorization"],
+    },
+  };
+  return safeBase64Encode(JSON.stringify(safe));
+}
+
+/**
+ * Decodes a base64 encoded payment string back into a PaymentPayload object
+ *
+ * @param payment - The base64 encoded payment string to decode
+ * @returns The decoded and validated PaymentPayload object
+ */
+export function decodePayment(payment: string): RequestedPaymentPayload {
+  const decoded = safeBase64Decode(payment);
+  const parsed = JSON.parse(decoded);
+
+  const obj: RequestedPaymentPayload = {
+    ...parsed,
+    payload: parsed.payload as ExactEvmPayload,
+  };
+  const validated = RequestedPaymentPayloadSchema.parse(obj);
+  return validated;
+}
+
+/**
+ * Encodes a string to base64 format
+ *
+ * @param data - The string to be encoded to base64
+ * @returns The base64 encoded string
+ */
+export function safeBase64Encode(data: string): string {
+  if (
+    typeof globalThis !== "undefined" &&
+    typeof globalThis.btoa === "function"
+  ) {
+    return globalThis.btoa(data);
+  }
+  return Buffer.from(data).toString("base64");
+}
+
+/**
+ * Decodes a base64 string back to its original format
+ *
+ * @param data - The base64 encoded string to be decoded
+ * @returns The decoded string in UTF-8 format
+ */
+function safeBase64Decode(data: string): string {
+  if (
+    typeof globalThis !== "undefined" &&
+    typeof globalThis.atob === "function"
+  ) {
+    return globalThis.atob(data);
+  }
+  return Buffer.from(data, "base64").toString("utf-8");
+}