thirdweb 5.113.0 → 5.114.1

package/src/react/web/ui/x402/SignInRequiredModal.tsx

@@ -15,13 +15,23 @@ type SignInRequiredModalProps = {
   theme: Theme | "light" | "dark";
   onSignIn: () => void;
   onCancel: () => void;
+  title?: string;
+  description?: string;
+  buttonLabel?: string;
 };
 
 /**
  * @internal
  */
 export function SignInRequiredModal(props: SignInRequiredModalProps) {
-  const { theme, onSignIn, onCancel } = props;
+  const {
+    theme,
+    onSignIn,
+    onCancel,
+    title = "Sign in required",
+    description = "Account required to complete payment, please sign in to continue.",
+    buttonLabel = "Sign in",
+  } = props;
 
   return (
     <CustomThemeProvider theme={theme}>
@@ -35,10 +45,10 @@ export function SignInRequiredModal(props: SignInRequiredModalProps) {
           }
         }}
         size="compact"
-        title="Sign in required"
+        title={title}
       >
         <Container p="lg">
-          <ModalHeader title="Sign in required" />
+          <ModalHeader title={title} />
 
           <Container
             flex="column"
@@ -55,7 +65,7 @@ export function SignInRequiredModal(props: SignInRequiredModalProps) {
                 lineHeight: 1.5,
               }}
             >
-              Account required to complete payment, please sign in to continue.
+              {description}
             </Text>
           </Container>
         </Container>
@@ -63,7 +73,7 @@ export function SignInRequiredModal(props: SignInRequiredModalProps) {
         {/* Action Buttons */}
         <ScreenBottomContainer>
           <Button fullWidth gap="xs" onClick={onSignIn} variant="accent">
-            Sign in
+            {buttonLabel}
           </Button>
           <Button fullWidth gap="xs" onClick={onCancel} variant="secondary">
             Cancel

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.113.0";
+export const version = "5.114.1";

package/src/x402/common.ts

@@ -35,28 +35,10 @@ type GetPaymentRequirementsResult = {
 export async function decodePaymentRequest(
   args: PaymentArgs,
 ): Promise<GetPaymentRequirementsResult | PaymentRequiredResult> {
-  const {
-    price,
-    network,
-    facilitator,
-    payTo,
-    resourceUrl,
-    routeConfig = {},
-    method,
-    paymentData,
-    extraMetadata,
-  } = args;
+  const { facilitator, routeConfig = {}, paymentData } = args;
   const { errorMessages } = routeConfig;
 
-  const paymentRequirementsResult = await facilitator.accepts({
-    resourceUrl,
-    method,
-    network,
-    price,
-    routeConfig,
-    payTo,
-    extraMetadata,
-  });
+  const paymentRequirementsResult = await facilitator.accepts(args);
 
   // Check for payment header, if none, return the payment requirements
   if (!paymentData) {

package/src/x402/facilitator.ts

@@ -278,6 +278,7 @@ export function facilitator(
           method: args.method,
           network: caip2ChainId,
           price: args.price,
+          scheme: args.scheme,
           routeConfig: args.routeConfig,
           serverWalletAddress: facilitator.address,
           recipientAddress: args.payTo,

package/src/x402/fetchWithPayment.ts

@@ -71,9 +71,9 @@ export function wrapFetchWithPayment(
       accepts: unknown[];
       error?: string;
     };
-    const parsedPaymentRequirements = accepts
-      .map((x) => RequestedPaymentRequirementsSchema.parse(x))
-      .filter((x) => x.scheme === "exact"); // TODO (402): accept other schemes
+    const parsedPaymentRequirements = accepts.map((x) =>
+      RequestedPaymentRequirementsSchema.parse(x),
+    );
 
     const account = wallet.getAccount();
     let chain = wallet.getChain();
@@ -88,7 +88,6 @@ export function wrapFetchWithPayment(
       : defaultPaymentRequirementsSelector(
           parsedPaymentRequirements,
           chain.id,
-          "exact",
           error,
         );
 
@@ -158,7 +157,6 @@ export function wrapFetchWithPayment(
 function defaultPaymentRequirementsSelector(
   paymentRequirements: RequestedPaymentRequirements[],
   chainId: number,
-  scheme: "exact",
   error?: string,
 ) {
   if (!paymentRequirements.length) {
@@ -168,9 +166,7 @@ function defaultPaymentRequirementsSelector(
   }
   // find the payment requirements matching the connected wallet chain
   const matchingPaymentRequirements = paymentRequirements.find(
-    (x) =>
-      extractEvmChainId(networkToCaip2ChainId(x.network)) === chainId &&
-      x.scheme === scheme,
+    (x) => extractEvmChainId(networkToCaip2ChainId(x.network)) === chainId,
   );
 
   if (matchingPaymentRequirements) {
@@ -178,9 +174,7 @@ function defaultPaymentRequirementsSelector(
   } else {
     // if no matching payment requirements, use the first payment requirement
     // and switch the wallet to that chain
-    const firstPaymentRequirement = paymentRequirements.find(
-      (x) => x.scheme === scheme,
-    );
+    const firstPaymentRequirement = paymentRequirements[0];
     return firstPaymentRequirement;
   }
 }

package/src/x402/schemas.ts

@@ -10,6 +10,7 @@ import {
 } from "x402/types";
 import { z } from "zod";
 import type { Chain } from "../chains/types.js";
+import { PaymentSchemeSchema } from "./types.js";
 
 const FacilitatorNetworkSchema = z.string();
 
@@ -17,6 +18,7 @@ export type FacilitatorNetwork = z.infer<typeof FacilitatorNetworkSchema>;
 
 const RequestedPaymentPayloadSchema = PaymentPayloadSchema.extend({
   network: FacilitatorNetworkSchema,
+  scheme: PaymentSchemeSchema,
 });
 
 export type RequestedPaymentPayload = z.infer<
@@ -32,6 +34,7 @@ export type UnsignedPaymentPayload = Omit<
 export const RequestedPaymentRequirementsSchema =
   PaymentRequirementsSchema.extend({
     network: FacilitatorNetworkSchema,
+    scheme: PaymentSchemeSchema,
   });
 
 export type RequestedPaymentRequirements = z.infer<
@@ -76,7 +79,7 @@ const FacilitatorSupportedResponseSchema =
     kinds: z.array(
       z.object({
         x402Version: z.literal(1),
-        scheme: z.literal("exact"),
+        scheme: PaymentSchemeSchema,
         network: FacilitatorNetworkSchema,
         extra: z
           .object({

package/src/x402/settle-payment.ts

@@ -51,7 +51,6 @@ import {
  *     routeConfig: {
  *       description: "Access to premium API content",
  *       mimeType: "application/json",
- *       maxTimeoutSeconds: 300,
  *     },
  *   });
  *
@@ -68,6 +67,18 @@ import {
  * }
  * ```
  *
+ * ### Upto Payment Scheme
+ *
+ * You can also use the `upto` payment scheme to settle the payment dynamically based on the usage.
+ *
+ * ```ts
+ * const result = await settlePayment({
+ *   ...paymentArgs,
+ *   scheme: "upto",
+ *   price: "$0.10", // max payable amount
+ * });
+ * ```
+ *
  * ### Express middleware example
  *
  * ```ts

package/src/x402/types.ts

@@ -1,5 +1,5 @@
 import type { Money, PaymentMiddlewareConfig } from "x402/types";
-import type z from "zod";
+import z from "zod";
 import type { Chain } from "../chains/types.js";
 import type { Prettify } from "../utils/type-utils.js";
 import type { ThirdwebX402Facilitator, WaitUntil } from "./facilitator.js";
@@ -31,6 +31,8 @@ export type PaymentArgs = {
   price: Money | ERC20TokenAmount;
   /** The payment facilitator instance used to verify and settle payments */
   facilitator: ThirdwebX402Facilitator;
+  /** The scheme of the payment, either "exact" or "upto", defaults to "exact" */
+  scheme?: PaymentScheme;
   /** Optional configuration for the payment middleware route */
   routeConfig?: PaymentMiddlewareConfig;
   /** Optional recipient address to receive the payment if different from your facilitator address */
@@ -91,7 +93,9 @@ export type VerifyPaymentResult = Prettify<
   | {
       /** HTTP 200 - Payment was successfully verified */
       status: 200;
+      /** The decoded payment payload */
       decodedPayment: RequestedPaymentPayload;
+      /** The selected payment requirements */
       selectedPaymentRequirements: RequestedPaymentRequirements;
     }
   | PaymentRequiredResult
@@ -101,8 +105,19 @@ export type SupportedSignatureType = z.infer<
   typeof SupportedSignatureTypeSchema
 >;
 
+export const PaymentSchemeSchema = z.union([
+  z.literal("exact"),
+  z.literal("upto"),
+]);
+type PaymentScheme = z.infer<typeof PaymentSchemeSchema>;
+
+/**
+ * The asset, scheme and amount for the payment in base units
+ */
 export type ERC20TokenAmount = {
+  /** The amount of the payment in base units */
   amount: string;
+  /** The asset of the payment, decimals and eip712 data are optional and will be inferred from the address if not provided */
   asset: {
     address: `0x${string}`;
     decimals?: number;

package/src/x402/verify-payment.ts

@@ -42,7 +42,6 @@ import {
  *     routeConfig: {
  *       description: "Access to premium API content",
  *       mimeType: "application/json",
- *       maxTimeoutSeconds: 300,
  *     },
  *   };
  *
@@ -68,6 +67,17 @@ import {
  * }
  * ```
  *
+ * ### Upto Payment Scheme
+ *
+ * You can also use the `upto` payment scheme to verify a payment where the final price is dynamically calculated based on the usage.
+ *
+ * ```ts
+ * const result = await verifyPayment({
+ *   ...paymentArgs,
+ *   scheme: "upto",
+ *   price: "$0.10", // max payable amount
+ * });
+ * ```
  * @public
  * @beta
  * @x402