lint

Author: joaquim-verges

apps/playground-web/src/app/payments/x402/components/X402LeftSection.tsx

@@ -6,6 +6,13 @@ import { defineChain } from "thirdweb/chains";
 import { BridgeNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { TokenSelector } from "@/components/ui/TokenSelector";
 import { THIRDWEB_CLIENT } from "@/lib/client";
 import type { TokenMetadata } from "@/lib/types";
@@ -38,6 +45,7 @@ export function X402LeftSection(props: {
   const tokenId = useId();
   const amountId = useId();
   const payToId = useId();
+  const waitUntilId = useId();
 
   const handleChainChange = (chainId: number) => {
     setSelectedChain(chainId);
@@ -81,6 +89,15 @@ export function X402LeftSection(props: {
     }));
   };
 
+  const handleWaitUntilChange = (
+    value: "simulated" | "submitted" | "confirmed",
+  ) => {
+    setOptions((v) => ({
+      ...v,
+      waitUntil: value,
+    }));
+  };
+
   return (
     <div className="space-y-6">
       <div>
@@ -146,6 +163,28 @@ export function X402LeftSection(props: {
               The wallet address that will receive the payment
             </p>
           </div>
+
+          {/* Wait Until selection */}
+          <div className="flex flex-col gap-2">
+            <Label htmlFor={waitUntilId}>Wait Until</Label>
+            <Select
+              value={options.waitUntil}
+              onValueChange={handleWaitUntilChange}
+            >
+              <SelectTrigger className="bg-card">
+                <SelectValue placeholder="Select wait condition" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="simulated">Simulated</SelectItem>
+                <SelectItem value="submitted">Submitted</SelectItem>
+                <SelectItem value="confirmed">Confirmed</SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="text-sm text-muted-foreground">
+              When to consider the payment settled: simulated (fastest),
+              submitted (medium), or confirmed (most secure)
+            </p>
+          </div>
         </div>
       </div>
     </div>

apps/playground-web/src/app/payments/x402/components/X402Playground.tsx

@@ -14,6 +14,7 @@ const defaultOptions: X402PlaygroundOptions = {
   tokenDecimals: token.decimals,
   amount: "0.01",
   payTo: "0x0000000000000000000000000000000000000000",
+  waitUntil: "simulated",
 };
 
 export function X402Playground() {

apps/playground-web/src/app/payments/x402/components/X402RightSection.tsx

@@ -51,6 +51,7 @@ export function X402RightSection(props: { options: X402PlaygroundOptions }) {
       searchParams.set("amount", props.options.amount);
       searchParams.set("tokenAddress", props.options.tokenAddress);
       searchParams.set("decimals", props.options.tokenDecimals.toString());
+      searchParams.set("waitUntil", props.options.waitUntil);
 
       const url =
         "/api/paywall" +
@@ -95,6 +96,7 @@ const client = createThirdwebClient({
 const thirdwebFacilitator = facilitator({
   client,
   serverWalletAddress: "0xYourServerWalletAddress",
+  waitUtil: "${props.options.waitUntil}",
 });
 
 export async function POST(request: Request) {
@@ -250,7 +252,7 @@ export async function POST(request: Request) {
             <CodeClient
               className="h-full rounded-none border-none"
               code={serverCode}
-              lang="tsx"
+              lang="typescript"
             />
           </div>
         )}

apps/playground-web/src/app/payments/x402/components/constants.ts

@@ -1,5 +1,3 @@
-// const chain = arbitrumSepolia;
-
 import { base } from "thirdweb/chains";
 
 export const chain = base;

apps/playground-web/src/app/payments/x402/components/types.ts

@@ -8,4 +8,5 @@ export type X402PlaygroundOptions = {
   tokenDecimals: number;
   amount: string;
   payTo: Address;
+  waitUntil: "simulated" | "submitted" | "confirmed";
 };

apps/playground-web/src/middleware.ts

@@ -13,13 +13,17 @@ const BACKEND_WALLET_ADDRESS = process.env.ENGINE_BACKEND_WALLET as string;
 const ENGINE_VAULT_ACCESS_TOKEN = process.env
   .ENGINE_VAULT_ACCESS_TOKEN as string;
 const API_URL = `https://${process.env.NEXT_PUBLIC_API_URL || "api.thirdweb.com"}`;
-const twFacilitator = facilitator({
-  baseUrl: `${API_URL}/v1/payments/x402`,
-  client,
-  serverWalletAddress: BACKEND_WALLET_ADDRESS,
-  vaultAccessToken: ENGINE_VAULT_ACCESS_TOKEN,
-  waitUtil: "simulated",
-});
+function createFacilitator(
+  waitUntil: "simulated" | "submitted" | "confirmed" = "simulated",
+) {
+  return facilitator({
+    baseUrl: `${API_URL}/v1/payments/x402`,
+    client,
+    serverWalletAddress: BACKEND_WALLET_ADDRESS,
+    vaultAccessToken: ENGINE_VAULT_ACCESS_TOKEN,
+    waitUtil: waitUntil,
+  });
+}
 
 export async function middleware(request: NextRequest) {
   const pathname = request.nextUrl.pathname;
@@ -41,6 +45,9 @@ export async function middleware(request: NextRequest) {
   const amount = queryParams.get("amount") || "0.01";
   const tokenAddress = queryParams.get("tokenAddress") || token.address;
   const decimals = queryParams.get("decimals") || token.decimals.toString();
+  const waitUntil =
+    (queryParams.get("waitUntil") as "simulated" | "submitted" | "confirmed") ||
+    "simulated";
 
   const result = await settlePayment({
     resourceUrl,
@@ -58,7 +65,7 @@ export async function middleware(request: NextRequest) {
     routeConfig: {
       description: "Access to paid content",
     },
-    facilitator: twFacilitator,
+    facilitator: createFacilitator(waitUntil),
   });
 
   if (result.status === 200) {

packages/thirdweb/src/x402/common.ts

@@ -8,6 +8,7 @@ import { getContract } from "../contract/contract.js";
 import { isPermitSupported } from "../extensions/erc20/__generated__/IERC20Permit/write/permit.js";
 import { isTransferWithAuthorizationSupported } from "../extensions/erc20/__generated__/USDC/write/transferWithAuthorization.js";
 import { getAddress } from "../utils/address.js";
+import { toUnits } from "../utils/units.js";
 import { decodePayment } from "./encode.js";
 import type { ThirdwebX402Facilitator } from "./facilitator.js";
 import {
@@ -23,7 +24,6 @@ import {
   type SupportedSignatureType,
   x402Version,
 } from "./types.js";
-import { toUnits } from "../utils/units.js";
 
 type GetPaymentRequirementsResult = {
   status: 200;
@@ -223,7 +223,10 @@ async function processPriceToAtomicAmount(
       };
     }
     asset = defaultAsset;
-    maxAmountRequired = toUnits(parsedUsdAmount.toString(), defaultAsset.decimals).toString();
+    maxAmountRequired = toUnits(
+      parsedUsdAmount.toString(),
+      defaultAsset.decimals,
+    ).toString();
   } else {
     // Token amount in atomic units
     maxAmountRequired = price.amount;