@voyage_ai/v402-web-ts 0.1.2 → 0.1.3

package/dist/react/index.js

@@ -5,6 +5,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -27,63 +30,75 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/react/index.ts
-var index_exports = {};
-__export(index_exports, {
-  WalletConnect: () => WalletConnect,
-  usePayment: () => usePayment,
-  usePaymentInfo: () => usePaymentInfo,
-  useWallet: () => useWallet
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/react/hooks/useWalletStore.ts
-var import_react = require("react");
-
-// src/types/index.ts
-var import_types3 = require("x402/types");
-
 // src/types/common.ts
-var PROD_BACK_URL = "https://v402.onvoyage.ai/api/pay";
+var PROD_BACK_URL, DEV_BACK_URL;
+var init_common = __esm({
+  "src/types/common.ts"() {
+    "use strict";
+    PROD_BACK_URL = "https://v402.onvoyage.ai/api/pay";
+    DEV_BACK_URL = "http://localhost:3000/api/pay";
+  }
+});
 
 // src/types/svm.ts
-var import_zod = require("zod");
-var import_types = require("x402/types");
-var SolanaNetworkSchema = import_zod.z.enum([
-  "solana-devnet",
-  "solana",
-  "solana-mainnet"
-  // Alias for mainnet
-]);
-var SolanaPaymentPayloadSchema = import_zod.z.object({
-  x402Version: import_zod.z.literal(1),
-  scheme: import_zod.z.literal("exact"),
-  network: SolanaNetworkSchema,
-  payload: import_types.ExactSvmPayloadSchema
+var import_zod, import_types, SolanaNetworkSchema, SolanaPaymentPayloadSchema;
+var init_svm = __esm({
+  "src/types/svm.ts"() {
+    "use strict";
+    import_zod = require("zod");
+    import_types = require("x402/types");
+    SolanaNetworkSchema = import_zod.z.enum([
+      "solana-devnet",
+      "solana",
+      "solana-mainnet"
+      // Alias for mainnet
+    ]);
+    SolanaPaymentPayloadSchema = import_zod.z.object({
+      x402Version: import_zod.z.literal(1),
+      scheme: import_zod.z.literal("exact"),
+      network: SolanaNetworkSchema,
+      payload: import_types.ExactSvmPayloadSchema
+    });
+  }
 });
 
 // src/types/evm.ts
-var import_zod2 = require("zod");
-var import_types2 = require("x402/types");
-var EvmNetworkSchema = import_zod2.z.enum([
-  "ethereum",
-  "sepolia",
-  "base",
-  "base-sepolia",
-  "polygon",
-  "arbitrum",
-  "optimism"
-]);
-var EvmPaymentPayloadSchema = import_zod2.z.object({
-  x402Version: import_zod2.z.literal(1),
-  scheme: import_zod2.z.literal("exact"),
-  network: EvmNetworkSchema,
-  payload: import_types2.ExactEvmPayloadSchema
+var import_zod2, import_types2, EvmNetworkSchema, EvmPaymentPayloadSchema;
+var init_evm = __esm({
+  "src/types/evm.ts"() {
+    "use strict";
+    import_zod2 = require("zod");
+    import_types2 = require("x402/types");
+    EvmNetworkSchema = import_zod2.z.enum([
+      "ethereum",
+      "sepolia",
+      "base",
+      "base-sepolia",
+      "polygon",
+      "arbitrum",
+      "optimism"
+    ]);
+    EvmPaymentPayloadSchema = import_zod2.z.object({
+      x402Version: import_zod2.z.literal(1),
+      scheme: import_zod2.z.literal("exact"),
+      network: EvmNetworkSchema,
+      payload: import_types2.ExactEvmPayloadSchema
+    });
+  }
+});
+
+// src/types/index.ts
+var import_types3;
+var init_types = __esm({
+  "src/types/index.ts"() {
+    "use strict";
+    import_types3 = require("x402/types");
+    init_svm();
+    init_evm();
+  }
 });
 
 // src/utils/wallet.ts
-var WALLET_DISCONNECTED_KEY = "wallet_manually_disconnected";
-var CONNECTED_NETWORK_TYPE_KEY = "connected_network_type";
 function isWalletInstalled(networkType) {
   if (typeof window === "undefined") {
     return false;
@@ -104,22 +119,50 @@ function formatAddress(address) {
   }
   return `${address.slice(0, 6)}...${address.slice(-4)}`;
 }
-function markWalletDisconnected() {
+function getDisconnectedNetworks() {
+  if (typeof window === "undefined") {
+    return {};
+  }
+  try {
+    const cached = localStorage.getItem(WALLET_DISCONNECTED_NETWORKS_KEY);
+    return cached ? JSON.parse(cached) : {};
+  } catch (error) {
+    return {};
+  }
+}
+function markWalletDisconnected(networkType) {
   if (typeof window !== "undefined") {
-    localStorage.setItem(WALLET_DISCONNECTED_KEY, "true");
-    localStorage.removeItem(CONNECTED_NETWORK_TYPE_KEY);
+    if (networkType) {
+      const disconnected = getDisconnectedNetworks();
+      disconnected[networkType] = true;
+      localStorage.setItem(WALLET_DISCONNECTED_NETWORKS_KEY, JSON.stringify(disconnected));
+    } else {
+      localStorage.setItem(WALLET_DISCONNECTED_KEY, "true");
+      localStorage.removeItem(CONNECTED_NETWORK_TYPE_KEY);
+    }
   }
 }
-function clearWalletDisconnection() {
+function clearWalletDisconnection(networkType) {
   if (typeof window !== "undefined") {
-    localStorage.removeItem(WALLET_DISCONNECTED_KEY);
+    if (networkType) {
+      const disconnected = getDisconnectedNetworks();
+      delete disconnected[networkType];
+      localStorage.setItem(WALLET_DISCONNECTED_NETWORKS_KEY, JSON.stringify(disconnected));
+    } else {
+      localStorage.removeItem(WALLET_DISCONNECTED_KEY);
+    }
   }
 }
-function isWalletManuallyDisconnected() {
+function isWalletManuallyDisconnected(networkType) {
   if (typeof window === "undefined") {
     return false;
   }
-  return localStorage.getItem(WALLET_DISCONNECTED_KEY) === "true";
+  if (networkType) {
+    const disconnected = getDisconnectedNetworks();
+    return disconnected[networkType] === true;
+  } else {
+    return localStorage.getItem(WALLET_DISCONNECTED_KEY) === "true";
+  }
 }
 function saveConnectedNetworkType(networkType) {
   if (typeof window !== "undefined") {
@@ -144,8 +187,70 @@ function getWalletInstallUrl(networkType) {
       return "#";
   }
 }
+function getAllWalletAddresses() {
+  if (typeof window === "undefined") {
+    return {};
+  }
+  try {
+    const cached = localStorage.getItem(WALLET_ADDRESSES_KEY);
+    return cached ? JSON.parse(cached) : {};
+  } catch (error) {
+    console.error("Failed to parse wallet addresses cache:", error);
+    return {};
+  }
+}
+function saveWalletAddress(networkType, address) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const addresses = getAllWalletAddresses();
+  addresses[networkType] = address;
+  localStorage.setItem(WALLET_ADDRESSES_KEY, JSON.stringify(addresses));
+}
+function getCachedWalletAddress(networkType) {
+  const addresses = getAllWalletAddresses();
+  return addresses[networkType] || null;
+}
+function removeWalletAddress(networkType) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const addresses = getAllWalletAddresses();
+  delete addresses[networkType];
+  localStorage.setItem(WALLET_ADDRESSES_KEY, JSON.stringify(addresses));
+}
+var WALLET_DISCONNECTED_KEY, WALLET_DISCONNECTED_NETWORKS_KEY, CONNECTED_NETWORK_TYPE_KEY, WALLET_ADDRESSES_KEY;
+var init_wallet = __esm({
+  "src/utils/wallet.ts"() {
+    "use strict";
+    WALLET_DISCONNECTED_KEY = "wallet_manually_disconnected";
+    WALLET_DISCONNECTED_NETWORKS_KEY = "wallet_disconnected_networks";
+    CONNECTED_NETWORK_TYPE_KEY = "connected_network_type";
+    WALLET_ADDRESSES_KEY = "wallet_addresses_cache";
+  }
+});
+
+// src/react/index.ts
+var index_exports = {};
+__export(index_exports, {
+  V402Checkout: () => V402Checkout,
+  WalletConnect: () => WalletConnect,
+  usePageNetwork: () => usePageNetwork,
+  usePayment: () => usePayment,
+  usePaymentInfo: () => usePaymentInfo,
+  useWallet: () => useWallet
+});
+module.exports = __toCommonJS(index_exports);
+var import_styles = require("./styles.css");
+
+// src/react/hooks/useWalletStore.ts
+var import_react = require("react");
+
+// src/utils/index.ts
+init_wallet();
 
 // src/utils/wallet-connect.ts
+init_wallet();
 async function connectWallet(networkType) {
   if (typeof window === "undefined") {
     throw new Error("\u8BF7\u5728\u6D4F\u89C8\u5668\u73AF\u5883\u4E2D\u4F7F\u7528");
@@ -180,13 +285,11 @@ async function connectWallet(networkType) {
     default:
       throw new Error("\u4E0D\u652F\u6301\u7684\u7F51\u7EDC\u7C7B\u578B");
   }
-  clearWalletDisconnection();
+  clearWalletDisconnection(networkType);
   saveConnectedNetworkType(networkType);
+  saveWalletAddress(networkType, address);
   return address;
 }
-function disconnectWallet() {
-  markWalletDisconnected();
-}
 async function getCurrentWallet(networkType) {
   if (typeof window === "undefined") {
     return null;
@@ -195,28 +298,36 @@ async function getCurrentWallet(networkType) {
   if (!type) {
     return null;
   }
+  const cachedAddress = getCachedWalletAddress(type);
   try {
+    let currentAddress = null;
     switch (type) {
       case "evm" /* EVM */: {
-        if (!window.ethereum) return null;
+        if (!window.ethereum) return cachedAddress;
         const accounts = await window.ethereum.request({
           method: "eth_accounts",
           params: []
         });
-        return accounts && accounts.length > 0 ? accounts[0] : null;
+        currentAddress = accounts && accounts.length > 0 ? accounts[0] : null;
+        break;
       }
       case "solana" /* SOLANA */:
       case "svm" /* SVM */: {
         const solana = window.solana;
-        if (!solana || !solana.isConnected) return null;
-        return solana.publicKey?.toString() || null;
+        if (!solana || !solana.isConnected) return cachedAddress;
+        currentAddress = solana.publicKey?.toString() || null;
+        break;
       }
       default:
-        return null;
+        return cachedAddress;
+    }
+    if (currentAddress && currentAddress !== cachedAddress) {
+      saveWalletAddress(type, currentAddress);
     }
+    return currentAddress || cachedAddress;
   } catch (error) {
     console.error("Failed to get current wallet:", error);
-    return null;
+    return cachedAddress;
   }
 }
 function onAccountsChanged(callback) {
@@ -267,16 +378,534 @@ function onWalletDisconnect(callback) {
     solana.removeListener?.("disconnect", handler);
   };
 }
+async function switchNetwork(networkType) {
+  const cachedAddress = getCachedWalletAddress(networkType);
+  if (cachedAddress) {
+    saveConnectedNetworkType(networkType);
+    clearWalletDisconnection(networkType);
+    const currentAddress = await getCurrentWallet(networkType);
+    if (currentAddress) {
+      return currentAddress;
+    }
+  }
+  return null;
+}
 
 // src/services/svm/payment-header.ts
 var import_web3 = require("@solana/web3.js");
 var import_spl_token = require("@solana/spl-token");
+async function createSvmPaymentHeader(params) {
+  const { wallet, paymentRequirements, x402Version, rpcUrl } = params;
+  const connection = new import_web3.Connection(rpcUrl, "confirmed");
+  const feePayer = paymentRequirements?.extra?.feePayer;
+  if (typeof feePayer !== "string" || !feePayer) {
+    throw new Error("Missing facilitator feePayer in payment requirements (extra.feePayer).");
+  }
+  const feePayerPubkey = new import_web3.PublicKey(feePayer);
+  const walletAddress = wallet?.publicKey?.toString() || wallet?.address;
+  if (!walletAddress) {
+    throw new Error("Missing connected Solana wallet address or publicKey");
+  }
+  const userPubkey = new import_web3.PublicKey(walletAddress);
+  if (!paymentRequirements?.payTo) {
+    throw new Error("Missing payTo in payment requirements");
+  }
+  const destination = new import_web3.PublicKey(paymentRequirements.payTo);
+  const instructions = [];
+  instructions.push(
+    import_web3.ComputeBudgetProgram.setComputeUnitLimit({
+      units: 7e3
+      // Sufficient for SPL token transfer
+    })
+  );
+  instructions.push(
+    import_web3.ComputeBudgetProgram.setComputeUnitPrice({
+      microLamports: 1
+      // Minimal price
+    })
+  );
+  if (!paymentRequirements.asset) {
+    throw new Error("Missing token mint for SPL transfer");
+  }
+  const mintPubkey = new import_web3.PublicKey(paymentRequirements.asset);
+  const mintInfo = await connection.getAccountInfo(mintPubkey, "confirmed");
+  const programId = mintInfo?.owner?.toBase58() === import_spl_token.TOKEN_2022_PROGRAM_ID.toBase58() ? import_spl_token.TOKEN_2022_PROGRAM_ID : import_spl_token.TOKEN_PROGRAM_ID;
+  const mint = await (0, import_spl_token.getMint)(connection, mintPubkey, void 0, programId);
+  const sourceAta = await (0, import_spl_token.getAssociatedTokenAddress)(
+    mintPubkey,
+    userPubkey,
+    false,
+    programId
+  );
+  const destinationAta = await (0, import_spl_token.getAssociatedTokenAddress)(
+    mintPubkey,
+    destination,
+    false,
+    programId
+  );
+  const sourceAtaInfo = await connection.getAccountInfo(sourceAta, "confirmed");
+  if (!sourceAtaInfo) {
+    throw new Error(
+      `User does not have an Associated Token Account for ${paymentRequirements.asset}. Please create one first or ensure you have the required token.`
+    );
+  }
+  const destAtaInfo = await connection.getAccountInfo(destinationAta, "confirmed");
+  if (!destAtaInfo) {
+    throw new Error(
+      `Destination does not have an Associated Token Account for ${paymentRequirements.asset}. The receiver must create their token account before receiving payments.`
+    );
+  }
+  const amount = BigInt(paymentRequirements.maxAmountRequired);
+  instructions.push(
+    (0, import_spl_token.createTransferCheckedInstruction)(
+      sourceAta,
+      mintPubkey,
+      destinationAta,
+      userPubkey,
+      amount,
+      mint.decimals,
+      [],
+      programId
+    )
+  );
+  const { blockhash } = await connection.getLatestBlockhash("confirmed");
+  const message2 = new import_web3.TransactionMessage({
+    payerKey: feePayerPubkey,
+    recentBlockhash: blockhash,
+    instructions
+  }).compileToV0Message();
+  const transaction = new import_web3.VersionedTransaction(message2);
+  if (typeof wallet?.signTransaction !== "function") {
+    throw new Error("Connected wallet does not support signTransaction");
+  }
+  let userSignedTx;
+  try {
+    userSignedTx = await wallet.signTransaction(transaction);
+    console.log("\u2705 Transaction signed successfully");
+  } catch (error) {
+    console.error("\u274C Failed to sign transaction:", error);
+    throw wrapPaymentError(error);
+  }
+  const serializedTransaction = Buffer.from(userSignedTx.serialize()).toString("base64");
+  const paymentPayload = {
+    x402Version,
+    scheme: paymentRequirements.scheme,
+    network: paymentRequirements.network,
+    payload: {
+      transaction: serializedTransaction
+    }
+  };
+  const paymentHeader = Buffer.from(JSON.stringify(paymentPayload)).toString("base64");
+  return paymentHeader;
+}
+function getDefaultSolanaRpcUrl(network) {
+  const normalized = network.toLowerCase();
+  if (normalized === "solana" || normalized === "solana-mainnet") {
+    return "https://cathee-fu8ezd-fast-mainnet.helius-rpc.com";
+  } else if (normalized === "solana-devnet") {
+    return "https://api.devnet.solana.com";
+  }
+  throw new Error(`Unsupported Solana network: ${network}`);
+}
+
+// src/services/svm/payment-handler.ts
+init_types();
+async function handleSvmPayment(endpoint, config, requestInit) {
+  const { wallet, network, rpcUrl, maxPaymentAmount } = config;
+  const initialResponse = await fetch(endpoint, {
+    ...requestInit,
+    method: requestInit?.method || "POST"
+  });
+  if (initialResponse.status !== 402) {
+    return initialResponse;
+  }
+  const rawResponse = await initialResponse.json();
+  const IGNORED_ERRORS = [
+    "X-PAYMENT header is required",
+    "missing X-PAYMENT header",
+    "payment_required"
+  ];
+  if (rawResponse.error && !IGNORED_ERRORS.includes(rawResponse.error)) {
+    console.error(`\u274C Payment verification failed: ${rawResponse.error}`);
+    const ERROR_MESSAGES = {
+      "insufficient_funds": "Insufficient balance to complete this payment",
+      "invalid_signature": "Invalid payment signature",
+      "expired": "Payment authorization has expired",
+      "already_used": "This payment has already been used",
+      "network_mismatch": "Payment network does not match",
+      "invalid_payment": "Invalid payment data",
+      "verification_failed": "Payment verification failed",
+      "invalid_exact_svm_payload_transaction_simulation_failed": "Transaction simulation failed due to insufficient balance. Please check your wallet balance carefully and ensure you have enough funds to cover the payment and transaction fees."
+    };
+    const errorMessage = ERROR_MESSAGES[rawResponse.error] || `Payment failed: ${rawResponse.error}`;
+    const error = new Error(errorMessage);
+    throw wrapPaymentError(error);
+  }
+  const x402Version = rawResponse.x402Version;
+  const parsedPaymentRequirements = rawResponse.accepts || [];
+  const selectedRequirements = parsedPaymentRequirements.find(
+    (req) => req.scheme === "exact" && SolanaNetworkSchema.safeParse(req.network.toLowerCase()).success
+  );
+  if (!selectedRequirements) {
+    console.error(
+      "\u274C No suitable Solana payment requirements found. Available networks:",
+      parsedPaymentRequirements.map((req) => req.network)
+    );
+    throw new Error("No suitable Solana payment requirements found");
+  }
+  if (maxPaymentAmount && maxPaymentAmount > BigInt(0)) {
+    if (BigInt(selectedRequirements.maxAmountRequired) > maxPaymentAmount) {
+      throw new Error(
+        `Payment amount ${selectedRequirements.maxAmountRequired} exceeds maximum allowed ${maxPaymentAmount}`
+      );
+    }
+  }
+  const effectiveRpcUrl = rpcUrl || getDefaultSolanaRpcUrl(selectedRequirements.network);
+  console.log(`\u{1F4CD} Using Solana RPC: ${effectiveRpcUrl.substring(0, 40)}...`);
+  console.log(`\u{1F4CD} Network from backend: ${selectedRequirements.network}`);
+  let paymentHeader;
+  try {
+    paymentHeader = await createSvmPaymentHeader({
+      wallet,
+      paymentRequirements: selectedRequirements,
+      x402Version,
+      rpcUrl: effectiveRpcUrl
+    });
+    console.log("\u2705 Payment header created successfully");
+  } catch (error) {
+    console.error("\u274C Failed to create payment header:", error);
+    throw wrapPaymentError(error);
+  }
+  const newInit = {
+    ...requestInit,
+    method: requestInit?.method || "POST",
+    headers: {
+      ...requestInit?.headers || {},
+      "X-PAYMENT": paymentHeader,
+      "Access-Control-Expose-Headers": "X-PAYMENT-RESPONSE"
+    }
+  };
+  const retryResponse = await fetch(endpoint, newInit);
+  if (retryResponse.status === 402) {
+    try {
+      const retryData = await retryResponse.json();
+      const IGNORED_ERRORS2 = [
+        "X-PAYMENT header is required",
+        "missing X-PAYMENT header",
+        "payment_required"
+      ];
+      if (retryData.error && !IGNORED_ERRORS2.includes(retryData.error)) {
+        console.error(`\u274C Payment verification failed: ${retryData.error}`);
+        const ERROR_MESSAGES = {
+          "insufficient_funds": "Insufficient balance to complete this payment",
+          "invalid_signature": "Invalid payment signature",
+          "expired": "Payment authorization has expired",
+          "already_used": "This payment has already been used",
+          "network_mismatch": "Payment network does not match",
+          "invalid_payment": "Invalid payment data",
+          "verification_failed": "Payment verification failed",
+          "invalid_exact_svm_payload_transaction_simulation_failed": "Transaction simulation failed due to insufficient balance. Please check your wallet balance carefully and ensure you have enough funds to cover the payment and transaction fees."
+        };
+        const errorMessage = ERROR_MESSAGES[retryData.error] || `Payment failed: ${retryData.error}`;
+        const error = new Error(errorMessage);
+        throw wrapPaymentError(error);
+      }
+    } catch (error) {
+      if (error instanceof PaymentOperationError) {
+        throw error;
+      }
+      console.warn("\u26A0\uFE0F Could not parse retry 402 response:", error);
+    }
+  }
+  return retryResponse;
+}
 
 // src/services/evm/payment-header.ts
 var import_ethers = require("ethers");
+async function createEvmPaymentHeader(params) {
+  const { wallet, paymentRequirements, x402Version, chainId } = params;
+  if (!paymentRequirements?.payTo) {
+    throw new Error("Missing payTo in payment requirements");
+  }
+  if (!paymentRequirements?.asset) {
+    throw new Error("Missing asset (token contract) in payment requirements");
+  }
+  if (wallet.getChainId) {
+    try {
+      const currentChainIdHex = await wallet.getChainId();
+      const currentChainId = parseInt(currentChainIdHex, 16);
+      if (currentChainId !== chainId) {
+        const networkNames = {
+          1: "Ethereum Mainnet",
+          11155111: "Sepolia Testnet",
+          8453: "Base Mainnet",
+          84532: "Base Sepolia Testnet",
+          137: "Polygon Mainnet",
+          42161: "Arbitrum One",
+          10: "Optimism Mainnet"
+        };
+        const currentNetworkName = networkNames[currentChainId] || `Chain ${currentChainId}`;
+        const targetNetworkName = networkNames[chainId] || `Chain ${chainId}`;
+        throw new Error(
+          `Network mismatch: Your wallet is connected to ${currentNetworkName}, but payment requires ${targetNetworkName}. Please switch your wallet to the correct network.`
+        );
+      }
+      console.log(`\u2705 Chain ID verified: ${chainId}`);
+    } catch (error) {
+      if (error.message.includes("Network mismatch")) {
+        throw wrapPaymentError(error);
+      }
+      console.warn("Could not verify chainId:", error);
+    }
+  }
+  const now = Math.floor(Date.now() / 1e3);
+  const nonceBytes = import_ethers.ethers.randomBytes(32);
+  const nonceBytes32 = import_ethers.ethers.hexlify(nonceBytes);
+  const domain = {
+    name: paymentRequirements.extra?.name || "USDC",
+    version: paymentRequirements.extra?.version || "2",
+    chainId,
+    verifyingContract: paymentRequirements.asset
+  };
+  const types = {
+    TransferWithAuthorization: [
+      { name: "from", type: "address" },
+      { name: "to", type: "address" },
+      { name: "value", type: "uint256" },
+      { name: "validAfter", type: "uint256" },
+      { name: "validBefore", type: "uint256" },
+      { name: "nonce", type: "bytes32" }
+    ]
+  };
+  const authorization = {
+    from: wallet.address,
+    to: paymentRequirements.payTo,
+    value: paymentRequirements.maxAmountRequired,
+    validAfter: "0",
+    // Effective immediately
+    validBefore: String(now + (paymentRequirements.maxTimeoutSeconds || 3600)),
+    nonce: nonceBytes32
+  };
+  let signature;
+  try {
+    signature = await wallet.signTypedData(domain, types, authorization);
+    console.log("\u2705 Signature created successfully");
+  } catch (error) {
+    console.error("\u274C Failed to create signature:", error);
+    throw wrapPaymentError(error);
+  }
+  const headerPayload = {
+    x402_version: x402Version,
+    x402Version,
+    scheme: paymentRequirements.scheme,
+    network: paymentRequirements.network,
+    payload: {
+      signature,
+      authorization: {
+        from: authorization.from,
+        to: authorization.to,
+        value: String(authorization.value),
+        valid_after: authorization.validAfter,
+        validAfter: authorization.validAfter,
+        valid_before: authorization.validBefore,
+        validBefore: authorization.validBefore,
+        nonce: authorization.nonce
+      }
+    }
+  };
+  const paymentHeader = btoa(JSON.stringify(headerPayload));
+  return paymentHeader;
+}
+function getChainIdFromNetwork(network) {
+  const chainIdMap = {
+    "ethereum": 1,
+    "sepolia": 11155111,
+    "base": 8453,
+    "base-sepolia": 84532,
+    "polygon": 137,
+    "arbitrum": 42161,
+    "optimism": 10
+  };
+  const chainId = chainIdMap[network.toLowerCase()];
+  if (!chainId) {
+    throw new Error(`Unknown network: ${network}`);
+  }
+  return chainId;
+}
+
+// src/services/evm/payment-handler.ts
+init_types();
+async function handleEvmPayment(endpoint, config, requestInit) {
+  const { wallet, network, maxPaymentAmount } = config;
+  const initialResponse = await fetch(endpoint, {
+    ...requestInit,
+    method: requestInit?.method || "POST"
+  });
+  if (initialResponse.status !== 402) {
+    return initialResponse;
+  }
+  const rawResponse = await initialResponse.json();
+  const IGNORED_ERRORS = [
+    "X-PAYMENT header is required",
+    "missing X-PAYMENT header",
+    "payment_required"
+  ];
+  if (rawResponse.error && !IGNORED_ERRORS.includes(rawResponse.error)) {
+    console.error(`\u274C Payment verification failed: ${rawResponse.error}`);
+    const ERROR_MESSAGES = {
+      "insufficient_funds": "Insufficient balance to complete this payment",
+      "invalid_signature": "Invalid payment signature",
+      "expired": "Payment authorization has expired",
+      "already_used": "This payment has already been used",
+      "network_mismatch": "Payment network does not match",
+      "invalid_payment": "Invalid payment data",
+      "verification_failed": "Payment verification failed"
+    };
+    const errorMessage = ERROR_MESSAGES[rawResponse.error] || `Payment failed: ${rawResponse.error}`;
+    const error = new Error(errorMessage);
+    throw wrapPaymentError(error);
+  }
+  const x402Version = rawResponse.x402Version;
+  const parsedPaymentRequirements = rawResponse.accepts || [];
+  const selectedRequirements = parsedPaymentRequirements.find(
+    (req) => req.scheme === "exact" && EvmNetworkSchema.safeParse(req.network.toLowerCase()).success
+  );
+  if (!selectedRequirements) {
+    console.error(
+      "\u274C No suitable EVM payment requirements found. Available networks:",
+      parsedPaymentRequirements.map((req) => req.network)
+    );
+    throw new Error("No suitable EVM payment requirements found");
+  }
+  if (maxPaymentAmount && maxPaymentAmount > BigInt(0)) {
+    if (BigInt(selectedRequirements.maxAmountRequired) > maxPaymentAmount) {
+      throw new Error(
+        `Payment amount ${selectedRequirements.maxAmountRequired} exceeds maximum allowed ${maxPaymentAmount}`
+      );
+    }
+  }
+  const targetChainId = getChainIdFromNetwork(selectedRequirements.network);
+  let currentChainId;
+  if (wallet.getChainId) {
+    try {
+      const chainIdHex = await wallet.getChainId();
+      currentChainId = parseInt(chainIdHex, 16);
+      console.log(`\u{1F4CD} Current wallet chain: ${currentChainId}`);
+    } catch (error) {
+      console.warn("\u26A0\uFE0F Failed to get current chainId:", error);
+    }
+  }
+  const networkNames = {
+    1: "Ethereum Mainnet",
+    11155111: "Sepolia Testnet",
+    8453: "Base Mainnet",
+    84532: "Base Sepolia Testnet",
+    137: "Polygon Mainnet",
+    42161: "Arbitrum One",
+    10: "Optimism Mainnet"
+  };
+  if (currentChainId && currentChainId !== targetChainId) {
+    if (!wallet.switchChain) {
+      const currentNetworkName = networkNames[currentChainId] || `Chain ${currentChainId}`;
+      const targetNetworkName = networkNames[targetChainId] || selectedRequirements.network;
+      const error = new Error(
+        `Network mismatch: Your wallet is connected to ${currentNetworkName}, but payment requires ${targetNetworkName}. Please switch to ${targetNetworkName} manually in your wallet.`
+      );
+      throw wrapPaymentError(error);
+    }
+    try {
+      console.log(`\u{1F504} Switching to chain ${targetChainId}...`);
+      await wallet.switchChain(`0x${targetChainId.toString(16)}`);
+      console.log(`\u2705 Successfully switched to chain ${targetChainId}`);
+    } catch (error) {
+      console.error("\u274C Failed to switch chain:", error);
+      const targetNetworkName = networkNames[targetChainId] || selectedRequirements.network;
+      const wrappedError = wrapPaymentError(error);
+      let finalError;
+      if (wrappedError.code === "USER_REJECTED" /* USER_REJECTED */) {
+        finalError = new PaymentOperationError({
+          code: wrappedError.code,
+          message: wrappedError.message,
+          userMessage: `You rejected the network switch request. Please switch to ${targetNetworkName} manually.`,
+          originalError: wrappedError.originalError
+        });
+      } else {
+        finalError = new PaymentOperationError({
+          code: "NETWORK_SWITCH_FAILED" /* NETWORK_SWITCH_FAILED */,
+          message: wrappedError.message,
+          userMessage: `Failed to switch to ${targetNetworkName}. Please switch manually in your wallet.`,
+          originalError: wrappedError.originalError
+        });
+      }
+      throw finalError;
+    }
+  } else if (wallet.switchChain && !currentChainId) {
+    try {
+      console.log(`\u{1F504} Attempting to switch to chain ${targetChainId}...`);
+      await wallet.switchChain(`0x${targetChainId.toString(16)}`);
+      console.log(`\u2705 Switch attempted successfully`);
+    } catch (error) {
+      console.warn("\u26A0\uFE0F Failed to switch chain (best effort):", error);
+    }
+  }
+  let paymentHeader;
+  try {
+    paymentHeader = await createEvmPaymentHeader({
+      wallet,
+      paymentRequirements: selectedRequirements,
+      x402Version,
+      chainId: targetChainId
+    });
+  } catch (error) {
+    console.error("\u274C Failed to create payment header:", error);
+    throw wrapPaymentError(error);
+  }
+  const newInit = {
+    ...requestInit,
+    method: requestInit?.method || "POST",
+    headers: {
+      ...requestInit?.headers || {},
+      "X-PAYMENT": paymentHeader,
+      "Access-Control-Expose-Headers": "X-PAYMENT-RESPONSE"
+    }
+  };
+  const retryResponse = await fetch(endpoint, newInit);
+  if (retryResponse.status === 402) {
+    try {
+      const retryData = await retryResponse.json();
+      const IGNORED_ERRORS2 = [
+        "X-PAYMENT header is required",
+        "missing X-PAYMENT header",
+        "payment_required"
+      ];
+      if (retryData.error && !IGNORED_ERRORS2.includes(retryData.error)) {
+        console.error(`\u274C Payment verification failed: ${retryData.error}`);
+        const ERROR_MESSAGES = {
+          "insufficient_funds": "Insufficient balance to complete this payment",
+          "invalid_signature": "Invalid payment signature",
+          "expired": "Payment authorization has expired",
+          "already_used": "This payment has already been used",
+          "network_mismatch": "Payment network does not match",
+          "invalid_payment": "Invalid payment data",
+          "verification_failed": "Payment verification failed"
+        };
+        const errorMessage = ERROR_MESSAGES[retryData.error] || `Payment failed: ${retryData.error}`;
+        const error = new Error(errorMessage);
+        throw wrapPaymentError(error);
+      }
+    } catch (error) {
+      if (error instanceof PaymentOperationError) {
+        throw error;
+      }
+      console.warn("\u26A0\uFE0F Could not parse retry 402 response:", error);
+    }
+  }
+  return retryResponse;
+}
 
 // src/utils/payment-helpers.ts
 var import_ethers2 = require("ethers");
+init_common();
 function parsePaymentRequired(response) {
   if (response && typeof response === "object") {
     if ("x402Version" in response && "accepts" in response) {
@@ -300,6 +929,62 @@ function getSupportedNetworkTypes(paymentRequirements) {
   });
   return Array.from(networkTypes);
 }
+async function makePayment(networkType, merchantId, endpoint = PROD_BACK_URL, additionalParams) {
+  const fullEndpoint = `${endpoint}/${merchantId}`;
+  let response;
+  const requestInit = additionalParams && Object.keys(additionalParams).length > 0 ? {
+    body: JSON.stringify(additionalParams),
+    headers: {
+      "Content-Type": "application/json"
+    }
+  } : {};
+  if (networkType === "solana" /* SOLANA */ || networkType === "svm" /* SVM */) {
+    const solana = window.solana;
+    if (!solana) {
+      throw new Error("\u8BF7\u5B89\u88C5 Phantom \u94B1\u5305");
+    }
+    if (!solana.isConnected) {
+      await solana.connect();
+    }
+    response = await handleSvmPayment(fullEndpoint, {
+      wallet: solana,
+      network: "solana"
+      // Will use backend's network configuration
+    }, requestInit);
+  } else if (networkType === "evm" /* EVM */) {
+    if (!window.ethereum) {
+      throw new Error("\u8BF7\u5B89\u88C5 MetaMask \u94B1\u5305");
+    }
+    const provider = new import_ethers2.ethers.BrowserProvider(window.ethereum);
+    const signer = await provider.getSigner();
+    const wallet = {
+      address: await signer.getAddress(),
+      signTypedData: async (domain, types, message2) => {
+        return await signer.signTypedData(domain, types, message2);
+      },
+      // Get current chain ID from wallet
+      getChainId: async () => {
+        const network = await provider.getNetwork();
+        return `0x${network.chainId.toString(16)}`;
+      },
+      // Switch to a different chain
+      switchChain: async (chainId) => {
+        await window.ethereum.request({
+          method: "wallet_switchEthereumChain",
+          params: [{ chainId }]
+        });
+      }
+    };
+    response = await handleEvmPayment(fullEndpoint, {
+      wallet,
+      network: "base"
+      // Will use backend's network configuration
+    }, requestInit);
+  } else {
+    throw new Error(`\u4E0D\u652F\u6301\u7684\u7F51\u7EDC\u7C7B\u578B: ${networkType}`);
+  }
+  return response;
+}
 
 // src/utils/network.ts
 var NETWORK_TYPE_MAP = {
@@ -338,6 +1023,138 @@ function getNetworkDisplayName(network) {
   return displayNames[network.toLowerCase()] || network;
 }
 
+// src/utils/payment-error-handler.ts
+function parsePaymentError(error) {
+  if (!error) {
+    return {
+      code: "UNKNOWN_ERROR" /* UNKNOWN_ERROR */,
+      message: "Unknown error occurred",
+      userMessage: "An unknown error occurred. Please try again.",
+      originalError: error
+    };
+  }
+  const errorMessage = error.message || error.toString();
+  const errorCode = error.code;
+  if (errorCode === 4001 || errorCode === "ACTION_REJECTED" || errorMessage.includes("User rejected") || errorMessage.includes("user rejected") || errorMessage.includes("User denied") || errorMessage.includes("user denied") || errorMessage.includes("ethers-user-denied")) {
+    return {
+      code: "USER_REJECTED" /* USER_REJECTED */,
+      message: "User rejected the transaction",
+      userMessage: "You rejected the signature request. Please try again if you want to proceed.",
+      originalError: error
+    };
+  }
+  if (errorMessage.includes("chainId") && (errorMessage.includes("must match") || errorMessage.includes("does not match"))) {
+    const match = errorMessage.match(/chainId.*?"(\d+)".*?active.*?"(\d+)"/i) || errorMessage.match(/chain (\d+).*?chain (\d+)/i);
+    if (match) {
+      const [, requestedChain, activeChain] = match;
+      return {
+        code: "CHAIN_ID_MISMATCH" /* CHAIN_ID_MISMATCH */,
+        message: `Network mismatch (wallet is on different chain): Requested ${requestedChain}, but wallet is on ${activeChain}`,
+        userMessage: `Your wallet is on the wrong network. Please switch to the correct network and try again.`,
+        originalError: error
+      };
+    }
+    return {
+      code: "CHAIN_ID_MISMATCH" /* CHAIN_ID_MISMATCH */,
+      message: "Network mismatch (wallet selected network does not match)",
+      userMessage: "Your wallet is on the wrong network. Please switch to the correct network.",
+      originalError: error
+    };
+  }
+  if (errorMessage.includes("Network mismatch") || errorMessage.includes("Wrong network") || errorMessage.includes("Incorrect network")) {
+    return {
+      code: "NETWORK_MISMATCH" /* NETWORK_MISMATCH */,
+      message: errorMessage,
+      userMessage: "Please switch your wallet to the correct network.",
+      originalError: error
+    };
+  }
+  if (errorMessage.includes("locked") || errorMessage.includes("Wallet is locked")) {
+    return {
+      code: "WALLET_LOCKED" /* WALLET_LOCKED */,
+      message: "Wallet is locked",
+      userMessage: "Please unlock your wallet and try again.",
+      originalError: error
+    };
+  }
+  if (errorMessage.includes("insufficient") && (errorMessage.includes("balance") || errorMessage.includes("funds"))) {
+    return {
+      code: "INSUFFICIENT_BALANCE" /* INSUFFICIENT_BALANCE */,
+      message: "Insufficient balance",
+      userMessage: "You don't have enough balance to complete this payment.",
+      originalError: error
+    };
+  }
+  if (errorMessage.includes("Failed to switch") || errorMessage.includes("switch chain")) {
+    return {
+      code: "NETWORK_SWITCH_FAILED" /* NETWORK_SWITCH_FAILED */,
+      message: errorMessage,
+      userMessage: "Failed to switch network. Please switch manually in your wallet.",
+      originalError: error
+    };
+  }
+  if (errorMessage.includes("not connected") || errorMessage.includes("No wallet") || errorMessage.includes("Connect wallet")) {
+    return {
+      code: "WALLET_NOT_CONNECTED" /* WALLET_NOT_CONNECTED */,
+      message: "Wallet not connected",
+      userMessage: "Please connect your wallet first.",
+      originalError: error
+    };
+  }
+  if (errorMessage.includes("No suitable") || errorMessage.includes("payment requirements") || errorMessage.includes("Missing payTo") || errorMessage.includes("Missing asset")) {
+    return {
+      code: "INVALID_PAYMENT_REQUIREMENTS" /* INVALID_PAYMENT_REQUIREMENTS */,
+      message: errorMessage,
+      userMessage: "Invalid payment configuration. Please contact support.",
+      originalError: error
+    };
+  }
+  if (errorMessage.includes("exceeds maximum")) {
+    return {
+      code: "AMOUNT_EXCEEDED" /* AMOUNT_EXCEEDED */,
+      message: errorMessage,
+      userMessage: "Payment amount exceeds the maximum allowed.",
+      originalError: error
+    };
+  }
+  if (errorMessage.includes("signature") || errorMessage.includes("sign") || errorCode === "UNKNOWN_ERROR") {
+    return {
+      code: "SIGNATURE_FAILED" /* SIGNATURE_FAILED */,
+      message: errorMessage,
+      userMessage: "Failed to sign the transaction. Please try again.",
+      originalError: error
+    };
+  }
+  return {
+    code: "UNKNOWN_ERROR" /* UNKNOWN_ERROR */,
+    message: errorMessage,
+    userMessage: "An unexpected error occurred. Please try again or contact support.",
+    originalError: error
+  };
+}
+var PaymentOperationError = class _PaymentOperationError extends Error {
+  constructor(paymentError) {
+    super(paymentError.message);
+    this.name = "PaymentOperationError";
+    this.code = paymentError.code;
+    this.userMessage = paymentError.userMessage;
+    this.originalError = paymentError.originalError;
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, _PaymentOperationError);
+    }
+  }
+  /**
+   * Get a formatted error message for logging
+   */
+  toLogString() {
+    return `[${this.code}] ${this.message} | User Message: ${this.userMessage}`;
+  }
+};
+function wrapPaymentError(error) {
+  const parsedError = parsePaymentError(error);
+  return new PaymentOperationError(parsedError);
+}
+
 // src/react/store/walletStore.ts
 var WalletStore = class {
   constructor() {
@@ -354,60 +1171,28 @@ var WalletStore = class {
   init() {
     if (this.initialized) return;
     this.initialized = true;
-    this.autoReconnect();
     onAccountsChanged((accounts) => {
-      const connectedType = getConnectedNetworkType();
-      if (connectedType === "evm" /* EVM */) {
+      if (this.state.networkType === "evm" /* EVM */) {
         if (accounts.length === 0) {
           this.setState({ address: null });
-          console.log("\u{1F50C} Wallet disconnected");
-        } else {
-          if (!isWalletManuallyDisconnected()) {
-            this.setState({ address: accounts[0] });
-            console.log("\u{1F504} Account changed:", accounts[0]);
-          }
+        } else if (!isWalletManuallyDisconnected("evm" /* EVM */)) {
+          this.setState({ address: accounts[0] });
+          saveWalletAddress("evm" /* EVM */, accounts[0]);
         }
       }
     });
     onChainChanged(() => {
-      const connectedType = getConnectedNetworkType();
-      if (connectedType === "evm" /* EVM */) {
-        console.log("\u26A0\uFE0F Network changed detected - disconnecting wallet");
-        disconnectWallet();
-        this.setState({
-          address: null,
-          networkType: null,
-          error: "Network changed. Please reconnect your wallet."
-        });
+      if (this.state.networkType === "evm" /* EVM */) {
+        this.handleDisconnect("evm" /* EVM */, "Chain changed. Please reconnect your wallet.");
       }
     });
     onWalletDisconnect(() => {
-      const connectedType = getConnectedNetworkType();
-      if (connectedType === "solana" /* SOLANA */ || connectedType === "svm" /* SVM */) {
-        console.log("\u26A0\uFE0F Solana wallet disconnected");
-        disconnectWallet();
-        this.setState({
-          address: null,
-          networkType: null
-        });
+      const svmTypes = ["solana" /* SOLANA */, "svm" /* SVM */];
+      if (this.state.networkType && svmTypes.includes(this.state.networkType)) {
+        this.handleDisconnect(this.state.networkType);
       }
     });
   }
-  async autoReconnect() {
-    if (!isWalletManuallyDisconnected()) {
-      const connectedType = getConnectedNetworkType();
-      if (connectedType) {
-        const currentAddress = await getCurrentWallet(connectedType);
-        if (currentAddress) {
-          this.setState({
-            address: currentAddress,
-            networkType: connectedType
-          });
-          console.log("\u{1F504} Auto-reconnected wallet:", currentAddress);
-        }
-      }
-    }
-  }
   // Get current state
   getState() {
     return this.state;
@@ -428,18 +1213,32 @@ var WalletStore = class {
   notifyListeners() {
     this.listeners.forEach((listener) => listener());
   }
+  // Handle wallet disconnect (internal helper)
+  handleDisconnect(networkType, error) {
+    removeWalletAddress(networkType);
+    markWalletDisconnected(networkType);
+    if (typeof window !== "undefined") {
+      localStorage.removeItem("connected_network_type");
+    }
+    this.setState({
+      address: null,
+      networkType: null,
+      error: error || null
+    });
+  }
   // Connect wallet
   async connect(type) {
+    if (this.state.address && this.state.networkType && this.state.networkType !== type) {
+      saveWalletAddress(this.state.networkType, this.state.address);
+    }
     this.setState({ isConnecting: true, error: null });
     try {
       const walletAddress = await connectWallet(type);
-      console.log("\u2705 Wallet connected:", walletAddress, "Network:", type);
       this.setState({
         address: walletAddress,
         networkType: type,
         isConnecting: false
       });
-      console.log("\u{1F4DD} Store state updated");
     } catch (err) {
       this.setState({
         error: err.message || "Failed to connect wallet",
@@ -448,20 +1247,67 @@ var WalletStore = class {
       throw err;
     }
   }
+  // Switch network (use cached wallet if available)
+  async switchNetwork(type) {
+    if (this.state.address && this.state.networkType) {
+      saveWalletAddress(this.state.networkType, this.state.address);
+    }
+    this.setState({ isConnecting: true, error: null });
+    try {
+      const address = await switchNetwork(type);
+      if (address) {
+        this.setState({
+          address,
+          networkType: type,
+          isConnecting: false
+        });
+      } else {
+        this.setState({
+          address: null,
+          networkType: type,
+          isConnecting: true
+        });
+        await this.connect(type);
+      }
+    } catch (err) {
+      this.setState({
+        error: err.message || "Failed to switch network",
+        isConnecting: false
+      });
+      throw err;
+    }
+  }
   // Disconnect wallet
   disconnect() {
-    disconnectWallet();
-    this.setState({
-      address: null,
-      networkType: null,
-      error: null
-    });
-    console.log("\u{1F50C} Wallet disconnected from store");
+    const currentNetwork = this.state.networkType;
+    if (currentNetwork) {
+      this.handleDisconnect(currentNetwork);
+    } else {
+      this.setState({
+        address: null,
+        networkType: null,
+        error: null
+      });
+    }
   }
   // Clear error
   clearError() {
     this.setState({ error: null });
   }
+  // Ensure network matches expected type (for page-specific network requirements)
+  async ensureNetwork(expectedNetwork) {
+    if (isWalletManuallyDisconnected(expectedNetwork)) {
+      return;
+    }
+    if (this.state.networkType === expectedNetwork && this.state.address) {
+      return;
+    }
+    if (this.state.networkType !== expectedNetwork) {
+      await this.switchNetwork(expectedNetwork);
+    } else if (!this.state.address) {
+      await this.connect(expectedNetwork);
+    }
+  }
 };
 var walletStore = new WalletStore();
 if (typeof window !== "undefined") {
@@ -479,24 +1325,43 @@ function useWallet() {
   return {
     ...state,
     connect: (type) => walletStore.connect(type),
+    switchNetwork: (type) => walletStore.switchNetwork(type),
+    ensureNetwork: (type) => walletStore.ensureNetwork(type),
     disconnect: () => walletStore.disconnect(),
     clearError: () => walletStore.clearError()
   };
 }
 
-// src/react/hooks/usePayment.ts
+// src/react/hooks/usePageNetwork.ts
 var import_react2 = require("react");
+function usePageNetwork(expectedNetwork, options = {}) {
+  const {
+    autoSwitch = true,
+    switchOnMount = true
+  } = options;
+  const wallet = useWallet();
+  (0, import_react2.useEffect)(() => {
+    if (!autoSwitch || !switchOnMount) return;
+    wallet.ensureNetwork(expectedNetwork).catch((err) => {
+      console.error("Failed to ensure network:", err);
+    });
+  }, [expectedNetwork]);
+  return wallet;
+}
+
+// src/react/hooks/usePayment.ts
+var import_react3 = require("react");
 function usePayment() {
-  const [isProcessing, setIsProcessing] = (0, import_react2.useState)(false);
-  const [result, setResult] = (0, import_react2.useState)(null);
-  const [error, setError] = (0, import_react2.useState)(null);
-  const clearResult = (0, import_react2.useCallback)(() => {
+  const [isProcessing, setIsProcessing] = (0, import_react3.useState)(false);
+  const [result, setResult] = (0, import_react3.useState)(null);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const clearResult = (0, import_react3.useCallback)(() => {
     setResult(null);
   }, []);
-  const clearError = (0, import_react2.useCallback)(() => {
+  const clearError = (0, import_react3.useCallback)(() => {
     setError(null);
   }, []);
-  const reset = (0, import_react2.useCallback)(() => {
+  const reset = (0, import_react3.useCallback)(() => {
     setIsProcessing(false);
     setResult(null);
     setError(null);
@@ -515,12 +1380,13 @@ function usePayment() {
 }
 
 // src/react/hooks/usePaymentInfo.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
+init_common();
 function usePaymentInfo(merchantId, endpoint = PROD_BACK_URL, additionalParams) {
-  const [paymentInfo, setPaymentInfo] = (0, import_react3.useState)(null);
-  const [supportedNetworks, setSupportedNetworks] = (0, import_react3.useState)([]);
-  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
-  const [error, setError] = (0, import_react3.useState)(null);
+  const [paymentInfo, setPaymentInfo] = (0, import_react4.useState)(null);
+  const [supportedNetworks, setSupportedNetworks] = (0, import_react4.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react4.useState)(true);
+  const [error, setError] = (0, import_react4.useState)(null);
   const fetchPaymentInfo = async () => {
     setIsLoading(true);
     setError(null);
@@ -554,7 +1420,7 @@ function usePaymentInfo(merchantId, endpoint = PROD_BACK_URL, additionalParams)
       setIsLoading(false);
     }
   };
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     fetchPaymentInfo();
   }, [endpoint, merchantId]);
   return {
@@ -567,7 +1433,7 @@ function usePaymentInfo(merchantId, endpoint = PROD_BACK_URL, additionalParams)
 }
 
 // src/react/components/WalletConnect.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 
 // src/react/styles/inline-styles.ts
 var isDarkMode = () => {
@@ -756,8 +1622,8 @@ function WalletConnect({
   onDisconnect
 }) {
   const { address, networkType, isConnecting, error, connect, disconnect } = useWallet();
-  const [hoveredButton, setHoveredButton] = (0, import_react4.useState)(null);
-  const [hoveredLink, setHoveredLink] = (0, import_react4.useState)(null);
+  const [hoveredButton, setHoveredButton] = (0, import_react5.useState)(null);
+  const [hoveredLink, setHoveredLink] = (0, import_react5.useState)(null);
   const handleConnect = async (network) => {
     try {
       await connect(network);
@@ -768,9 +1634,9 @@ function WalletConnect({
     disconnect();
     onDisconnect?.();
   };
-  return /* @__PURE__ */ import_react4.default.createElement("div", { style: { ...containerStyle, ...className ? {} : {} }, className }, !address ? /* @__PURE__ */ import_react4.default.createElement("div", { style: getSectionStyle() }, /* @__PURE__ */ import_react4.default.createElement("h3", { style: getTitleStyle() }, "Connect Wallet"), supportedNetworks.length === 0 ? /* @__PURE__ */ import_react4.default.createElement("p", { style: getHintStyle() }, "Please install a supported wallet extension") : /* @__PURE__ */ import_react4.default.createElement("div", { style: buttonsContainerStyle }, supportedNetworks.map((network) => {
+  return /* @__PURE__ */ import_react5.default.createElement("div", { style: { ...containerStyle, ...className ? {} : {} }, className }, !address ? /* @__PURE__ */ import_react5.default.createElement("div", { style: getSectionStyle() }, /* @__PURE__ */ import_react5.default.createElement("h3", { style: getTitleStyle() }, "Connect Wallet"), supportedNetworks.length === 0 ? /* @__PURE__ */ import_react5.default.createElement("p", { style: getHintStyle() }, "Please install a supported wallet extension") : /* @__PURE__ */ import_react5.default.createElement("div", { style: buttonsContainerStyle }, supportedNetworks.map((network) => {
     const installed = isWalletInstalled(network);
-    return /* @__PURE__ */ import_react4.default.createElement("div", { key: network, style: walletOptionStyle }, /* @__PURE__ */ import_react4.default.createElement(
+    return /* @__PURE__ */ import_react5.default.createElement("div", { key: network, style: walletOptionStyle }, /* @__PURE__ */ import_react5.default.createElement(
       "button",
       {
         style: getConnectButtonStyle(isConnecting || !installed, hoveredButton === network),
@@ -780,7 +1646,7 @@ function WalletConnect({
         onMouseLeave: () => setHoveredButton(null)
       },
       isConnecting ? "Connecting..." : getNetworkDisplayName(network)
-    ), !installed && /* @__PURE__ */ import_react4.default.createElement(
+    ), !installed && /* @__PURE__ */ import_react5.default.createElement(
       "a",
       {
         href: getWalletInstallUrl(network),
@@ -792,7 +1658,7 @@ function WalletConnect({
       },
       "Install Wallet"
     ));
-  })), error && /* @__PURE__ */ import_react4.default.createElement("p", { style: getErrorStyle() }, error), /* @__PURE__ */ import_react4.default.createElement("p", { style: getHintStyle() }, "To switch accounts, please change it in your wallet extension")) : /* @__PURE__ */ import_react4.default.createElement("div", { style: getSectionStyle() }, /* @__PURE__ */ import_react4.default.createElement("div", { style: walletAddressStyle }, /* @__PURE__ */ import_react4.default.createElement("span", { style: getLabelStyle() }, "Connected ", networkType && `(${getNetworkDisplayName(networkType)})`), /* @__PURE__ */ import_react4.default.createElement("span", { style: getAddressStyle() }, formatAddress(address))), /* @__PURE__ */ import_react4.default.createElement("div", { style: walletActionsStyle }, /* @__PURE__ */ import_react4.default.createElement(
+  })), error && /* @__PURE__ */ import_react5.default.createElement("p", { style: getErrorStyle() }, error), /* @__PURE__ */ import_react5.default.createElement("p", { style: getHintStyle() }, "To switch accounts, please change it in your wallet extension")) : /* @__PURE__ */ import_react5.default.createElement("div", { style: getSectionStyle() }, /* @__PURE__ */ import_react5.default.createElement("div", { style: walletAddressStyle }, /* @__PURE__ */ import_react5.default.createElement("span", { style: getLabelStyle() }, "Connected ", networkType && `(${getNetworkDisplayName(networkType)})`), /* @__PURE__ */ import_react5.default.createElement("span", { style: getAddressStyle() }, formatAddress(address))), /* @__PURE__ */ import_react5.default.createElement("div", { style: walletActionsStyle }, /* @__PURE__ */ import_react5.default.createElement(
     "button",
     {
       style: getDisconnectButtonStyle(hoveredButton === "disconnect"),
@@ -801,11 +1667,568 @@ function WalletConnect({
       onMouseLeave: () => setHoveredButton(null)
     },
     "Disconnect"
-  )), /* @__PURE__ */ import_react4.default.createElement("p", { style: getHintStyle() }, "Switch account in your wallet to change address")));
+  )), /* @__PURE__ */ import_react5.default.createElement("p", { style: getHintStyle() }, "Switch account in your wallet to change address")));
+}
+
+// src/react/components/V402Checkout.tsx
+var import_react7 = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+init_common();
+
+// src/react/utils/CryptoIcons.tsx
+var import_react6 = __toESM(require("react"));
+var SolanaIcon = ({ width = 16, height = 16, className, style }) => {
+  return /* @__PURE__ */ import_react6.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width,
+      height,
+      className,
+      style
+    },
+    /* @__PURE__ */ import_react6.default.createElement("desc", null, "Solana SOL Fill Streamline Icon: https://streamlinehq.com"),
+    /* @__PURE__ */ import_react6.default.createElement("g", { fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ import_react6.default.createElement(
+      "path",
+      {
+        d: "M16 0v16H0V0h16ZM8.395333333333333 15.505333333333333l-0.007333333333333332 0.0013333333333333333 -0.047333333333333324 0.023333333333333334 -0.013333333333333332 0.0026666666666666666 -0.009333333333333332 -0.0026666666666666666 -0.047333333333333324 -0.023333333333333334c-0.006666666666666666 -0.0026666666666666666 -0.012666666666666666 -0.0006666666666666666 -0.016 0.003333333333333333l-0.0026666666666666666 0.006666666666666666 -0.011333333333333334 0.2853333333333333 0.003333333333333333 0.013333333333333332 0.006666666666666666 0.008666666666666666 0.06933333333333333 0.049333333333333326 0.009999999999999998 0.0026666666666666666 0.008 -0.0026666666666666666 0.06933333333333333 -0.049333333333333326 0.008 -0.010666666666666666 0.0026666666666666666 -0.011333333333333334 -0.011333333333333334 -0.2846666666666666c-0.0013333333333333333 -0.006666666666666666 -0.005999999999999999 -0.011333333333333334 -0.011333333333333334 -0.011999999999999999Zm0.17666666666666667 -0.07533333333333334 -0.008666666666666666 0.0013333333333333333 -0.12333333333333332 0.062 -0.006666666666666666 0.006666666666666666 -0.002 0.007333333333333332 0.011999999999999999 0.2866666666666666 0.003333333333333333 0.008 0.005333333333333333 0.004666666666666666 0.134 0.062c0.008 0.0026666666666666666 0.015333333333333332 0 0.019333333333333334 -0.005333333333333333l0.0026666666666666666 -0.009333333333333332 -0.02266666666666667 -0.4093333333333333c-0.002 -0.008 -0.006666666666666666 -0.013333333333333332 -0.013333333333333332 -0.014666666666666665Zm-0.4766666666666666 0.0013333333333333333a0.015333333333333332 0.015333333333333332 0 0 0 -0.018 0.004l-0.004 0.009333333333333332 -0.02266666666666667 0.4093333333333333c0 0.008 0.004666666666666666 0.013333333333333332 0.011333333333333334 0.016l0.009999999999999998 -0.0013333333333333333 0.134 -0.062 0.006666666666666666 -0.005333333333333333 0.0026666666666666666 -0.007333333333333332 0.011333333333333334 -0.2866666666666666 -0.002 -0.008 -0.006666666666666666 -0.006666666666666666 -0.12266666666666666 -0.06133333333333333Z",
+        strokeWidth: "0.6667"
+      }
+    ), /* @__PURE__ */ import_react6.default.createElement(
+      "path",
+      {
+        fill: "#000000",
+        d: "M4.862 2.862A0.6666666666666666 0.6666666666666666 0 0 1 5.333333333333333 2.6666666666666665h8.666666666666666a0.6666666666666666 0.6666666666666666 0 0 1 0.47133333333333327 1.138l-2 2A0.6666666666666666 0.6666666666666666 0 0 1 12 6H3.333333333333333a0.6666666666666666 0.6666666666666666 0 0 1 -0.47133333333333327 -1.138l2 -2Zm-2.1166666666666663 4.156666666666666A0.6666666666666666 0.6666666666666666 0 0 1 3.333333333333333 6.666666666666666h8.666666666666666a0.6666666666666666 0.6666666666666666 0 0 1 0.5546666666666666 0.29666666666666663l1.3333333333333333 2A0.6666666666666666 0.6666666666666666 0 0 1 13.333333333333332 10H4.666666666666666a0.6666666666666666 0.6666666666666666 0 0 1 -0.5546666666666666 -0.29666666666666663l-1.3333333333333333 -2a0.6666666666666666 0.6666666666666666 0 0 1 -0.03333333333333333 -0.6846666666666665Zm1.4499999999999997 3.843333333333333A0.6666666666666666 0.6666666666666666 0 0 1 4.666666666666666 10.666666666666666h8.666666666666666a0.6666666666666666 0.6666666666666666 0 0 1 0.47133333333333327 1.138l-2 2A0.6666666666666666 0.6666666666666666 0 0 1 11.333333333333332 14H2.6666666666666665a0.6666666666666666 0.6666666666666666 0 0 1 -0.47133333333333327 -1.138l2 -2Z",
+        strokeWidth: "0.6667"
+      }
+    ))
+  );
+};
+var BaseIcon = ({ width = 24, height = 24, className, style }) => {
+  return /* @__PURE__ */ import_react6.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#000000",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width,
+      height,
+      className,
+      style
+    },
+    /* @__PURE__ */ import_react6.default.createElement("desc", null, "Brand Coinbase Streamline Icon: https://streamlinehq.com"),
+    /* @__PURE__ */ import_react6.default.createElement(
+      "path",
+      {
+        d: "M12.95 22c-4.503 0 -8.445 -3.04 -9.61 -7.413 -1.165 -4.373 0.737 -8.988 4.638 -11.25a9.906 9.906 0 0 1 12.008 1.598l-3.335 3.367a5.185 5.185 0 0 0 -7.354 0.013 5.252 5.252 0 0 0 0 7.393 5.185 5.185 0 0 0 7.354 0.013L20 19.088A9.887 9.887 0 0 1 12.95 22z",
+        strokeWidth: "2"
+      }
+    )
+  );
+};
+var getNetworkIcon = (network) => {
+  const networkLower = network.toLowerCase();
+  if (networkLower.includes("solana")) {
+    return SolanaIcon;
+  }
+  if (networkLower.includes("base")) {
+    return BaseIcon;
+  }
+  return BaseIcon;
+};
+
+// src/react/components/V402Checkout.tsx
+var { Title, Text } = import_antd.Typography;
+var notify = {
+  success: (title, msg) => {
+    import_antd.message.success(`${title}: ${msg}`);
+  },
+  error: (title, msg) => {
+    import_antd.message.error(`${title}: ${msg}`);
+  },
+  info: (title, msg) => {
+    import_antd.message.info(`${title}: ${msg}`);
+  }
+};
+function V402Checkout({
+  merchantId,
+  headerInfo = {},
+  isModal = false,
+  onPaymentComplete,
+  additionalParams = {},
+  expectedNetwork
+}) {
+  const {
+    title = "V402Pay - Make x402Pay Easier",
+    subtitle = "onvoyage.ai",
+    tooltipText = "V402Pay - Accept Crypto Payments Easier"
+  } = headerInfo;
+  let endpoint = DEV_BACK_URL;
+  const {
+    supportedNetworks,
+    isLoading: fetchingPaymentInfo,
+    paymentInfo
+  } = usePaymentInfo(merchantId, endpoint, additionalParams);
+  const targetNetwork = expectedNetwork || supportedNetworks[0];
+  const { address, networkType, disconnect, ensureNetwork } = usePageNetwork(
+    targetNetwork,
+    { autoSwitch: !!targetNetwork, switchOnMount: true }
+  );
+  const { isProcessing, setIsProcessing, result, setResult, error, setError } = usePayment();
+  const [paymentDetails, setPaymentDetails] = (0, import_react7.useState)(null);
+  const handleDisconnect = () => {
+    disconnect();
+    setResult(null);
+    setError(null);
+    notify.info("Wallet Disconnected", "Your wallet has been disconnected successfully.");
+  };
+  (0, import_react7.useEffect)(() => {
+    if (paymentInfo && paymentInfo.length > 0) {
+      const firstPayment = paymentInfo[0];
+      const rawAmount = firstPayment.maxAmountRequired?.toString() || "0";
+      const decimals = 6;
+      const humanReadableAmount = (Number(rawAmount) / Math.pow(10, decimals)).toFixed(2);
+      const network = firstPayment.network || "Unknown";
+      const currency = "USDC";
+      setPaymentDetails({
+        amount: humanReadableAmount,
+        currency,
+        network
+      });
+    }
+  }, [paymentInfo]);
+  (0, import_react7.useEffect)(() => {
+    if (targetNetwork && !fetchingPaymentInfo && ensureNetwork) {
+      ensureNetwork(targetNetwork).catch((err) => {
+        console.error("Failed to ensure network:", err);
+      });
+    }
+  }, [targetNetwork, fetchingPaymentInfo]);
+  const handlePayment = async () => {
+    if (!networkType) {
+      notify.error("Wallet Not Connected", "Please connect your wallet first.");
+      return;
+    }
+    setResult(null);
+    setError(null);
+    setIsProcessing(true);
+    try {
+      const response = await makePayment(networkType, merchantId, endpoint, additionalParams);
+      const data = await response.json();
+      setResult(data);
+      notify.success("Payment Successful!", "Your payment has been processed successfully.");
+      if (onPaymentComplete) {
+        onPaymentComplete(data);
+      }
+    } catch (err) {
+      const errorMessage = err.message || "Payment failed";
+      setError(errorMessage);
+      notify.error("Payment Failed", errorMessage);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+  const getNetworkColor = (network) => {
+    if (network.toLowerCase().includes("solana")) return "#14F195";
+    if (network.toLowerCase().includes("evm") || network.toLowerCase().includes("base")) return "#0052FF";
+    return "#8c8c8c";
+  };
+  const NetworkIcon = paymentDetails ? getNetworkIcon(paymentDetails.network) : null;
+  const networkColor = paymentDetails ? getNetworkColor(paymentDetails.network) : "#8c8c8c";
+  const loadingColor = "#8c8c8c";
+  const hasInvalidCheckoutId = !fetchingPaymentInfo && (!paymentInfo || paymentInfo.length === 0);
+  return /* @__PURE__ */ import_react7.default.createElement(
+    "div",
+    {
+      className: isModal ? "bg-white" : "h-screen bg-white flex items-center justify-center p-4 overflow-hidden"
+    },
+    /* @__PURE__ */ import_react7.default.createElement(
+      "div",
+      {
+        className: "flex gap-4 items-center justify-center",
+        style: {
+          maxWidth: isProcessing || result || error ? "1200px" : "480px",
+          transition: "max-width 0.4s ease-in-out",
+          width: "100%"
+        }
+      },
+      /* @__PURE__ */ import_react7.default.createElement(
+        import_antd.Card,
+        {
+          className: "flex-shrink-0",
+          style: {
+            border: isModal ? "none" : "1px solid #e8e8e8",
+            borderRadius: isModal ? "0" : "16px",
+            boxShadow: isModal ? "none" : "0 4px 24px rgba(0, 0, 0, 0.06)",
+            maxHeight: isModal ? "calc(100vh - 100px)" : "calc(100vh - 32px)",
+            overflow: "auto",
+            width: isModal ? "100%" : "480px",
+            transition: "all 0.4s ease-in-out",
+            transform: result || error ? "translateX(0)" : "translateX(0)"
+          },
+          styles: { body: { padding: isModal ? "0px" : "32px 24px" } }
+        },
+        /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center gap-3 mb-4" }, /* @__PURE__ */ import_react7.default.createElement(
+          "div",
+          {
+            className: "w-12 h-12 rounded-xl flex items-center justify-center",
+            style: {
+              background: hasInvalidCheckoutId ? "#ff4d4f" : paymentDetails ? networkColor : loadingColor,
+              transition: "background 0.3s ease"
+            }
+          },
+          hasInvalidCheckoutId ? /* @__PURE__ */ import_react7.default.createElement("span", { style: { fontSize: "20px", color: "white", fontWeight: "bold" } }, "\u2717") : paymentDetails && NetworkIcon ? /* @__PURE__ */ import_react7.default.createElement(NetworkIcon, { width: 24, height: 24 }) : /* @__PURE__ */ import_react7.default.createElement(import_icons.LoadingOutlined, { style: { fontSize: "20px", color: "white" }, spin: true })
+        ), /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex-1" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react7.default.createElement(Title, { level: 4, style: { margin: 0, fontSize: "18px", fontWeight: 600 } }, title || "Echo Payment OnVoyage"), !hasInvalidCheckoutId && /* @__PURE__ */ import_react7.default.createElement(
+          import_antd.Tooltip,
+          {
+            title: tooltipText,
+            placement: "top"
+          },
+          /* @__PURE__ */ import_react7.default.createElement(
+            import_icons.InfoCircleOutlined,
+            {
+              style: { fontSize: "14px", color: "#8c8c8c", cursor: "help" }
+            }
+          )
+        )), /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, subtitle))),
+        /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-center mb-5" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-50 mb-3" }, /* @__PURE__ */ import_react7.default.createElement(import_icons.LockOutlined, { style: { fontSize: "20px", color: "#595959" } })), /* @__PURE__ */ import_react7.default.createElement(Title, { level: 3, style: { margin: "0 0 6px 0", fontSize: "20px", fontWeight: 600 } }, "Payment Required"), /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Pay ", paymentDetails ? `$${paymentDetails.amount} ${paymentDetails.currency}` : "the required amount", " to access")),
+        hasInvalidCheckoutId && /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-center py-6" }, /* @__PURE__ */ import_react7.default.createElement(
+          "div",
+          {
+            className: "inline-flex items-center justify-center w-16 h-16 rounded-full mb-4",
+            style: {
+              background: "linear-gradient(135deg, #ef4444 0%, #f87171 100%)",
+              boxShadow: "0 4px 20px rgba(239, 68, 68, 0.3)"
+            }
+          },
+          /* @__PURE__ */ import_react7.default.createElement("span", { style: { fontSize: "32px", color: "white" } }, "!")
+        ), /* @__PURE__ */ import_react7.default.createElement(
+          Title,
+          {
+            level: 4,
+            style: { margin: "0 0 12px 0", fontSize: "18px", fontWeight: 600, color: "#262626" }
+          },
+          "Invalid Checkout ID"
+        ), /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c", display: "block", marginBottom: "16px" } }, "The checkout ID you provided is invalid or has expired."), /* @__PURE__ */ import_react7.default.createElement(
+          "div",
+          {
+            style: {
+              background: "#fef2f2",
+              padding: "16px",
+              borderRadius: "12px",
+              border: "1px solid #fee2e2",
+              marginTop: "16px"
+            }
+          },
+          /* @__PURE__ */ import_react7.default.createElement(Text, { style: {
+            fontSize: "13px",
+            color: "#dc2626",
+            lineHeight: "1.6",
+            fontWeight: 500
+          } }, "Failed to load payment information. Please check your checkout ID.")
+        )),
+        !hasInvalidCheckoutId && fetchingPaymentInfo && /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-center py-6" }, /* @__PURE__ */ import_react7.default.createElement(Text, { style: { color: "#8c8c8c" } }, "Loading payment information...")),
+        !hasInvalidCheckoutId && !fetchingPaymentInfo && !address && /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement(WalletConnect, { supportedNetworks })),
+        !hasInvalidCheckoutId && address && /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(
+          "div",
+          {
+            className: "bg-gray-50 rounded-lg p-3 mb-4",
+            style: { border: "1px solid #f0f0f0" }
+          },
+          /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center gap-3 flex-1" }, /* @__PURE__ */ import_react7.default.createElement(
+            "div",
+            {
+              className: "w-10 h-10 rounded-full bg-black flex items-center justify-center text-white text-sm font-semibold"
+            },
+            address.slice(0, 2).toUpperCase()
+          ), /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react7.default.createElement(Text, { style: {
+            display: "block",
+            fontSize: "12px",
+            color: "#8c8c8c",
+            marginBottom: "2px"
+          } }, "Connected Wallet"), /* @__PURE__ */ import_react7.default.createElement(
+            Text,
+            {
+              style: {
+                fontSize: "13px",
+                fontWeight: 600,
+                fontFamily: "Monaco, monospace"
+              }
+            },
+            formatAddress(address)
+          ))), /* @__PURE__ */ import_react7.default.createElement(
+            import_antd.Button,
+            {
+              type: "text",
+              size: "small",
+              icon: /* @__PURE__ */ import_react7.default.createElement(import_icons.DisconnectOutlined, null),
+              onClick: handleDisconnect,
+              style: { color: "#ff4d4f" }
+            }
+          ))
+        ), paymentDetails && /* @__PURE__ */ import_react7.default.createElement("div", { className: "bg-gray-50 rounded-lg p-3 mb-4", style: { border: "1px solid #f0f0f0" } }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Payment Amount"), /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "18px", fontWeight: 600 } }, "$", paymentDetails.amount)), /* @__PURE__ */ import_react7.default.createElement(import_antd.Divider, { style: { margin: "6px 0" } }), /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Currency"), /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "14px", fontWeight: 500 } }, paymentDetails.currency)), /* @__PURE__ */ import_react7.default.createElement(import_antd.Divider, { style: { margin: "6px 0" } }), /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Network"), /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "14px", fontWeight: 500 } }, paymentDetails.network)), /* @__PURE__ */ import_react7.default.createElement(import_antd.Divider, { style: { margin: "6px 0" } }), /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex justify-between items-start" }, /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Wallet Address"), /* @__PURE__ */ import_react7.default.createElement(Text, { style: {
+          fontSize: "11px",
+          fontWeight: 500,
+          fontFamily: "Monaco, monospace",
+          wordBreak: "break-all",
+          textAlign: "right",
+          maxWidth: "60%",
+          lineHeight: 1.4
+        } }, address))), /* @__PURE__ */ import_react7.default.createElement(
+          "div",
+          {
+            className: "flex items-center justify-center gap-2 mb-3 p-2 rounded-lg",
+            style: { background: "#f6ffed", border: "1px solid #d9f7be" }
+          },
+          /* @__PURE__ */ import_react7.default.createElement(import_icons.SafetyOutlined, { style: { color: "#52c41a", fontSize: "13px" } }),
+          /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "12px", color: "#52c41a", fontWeight: 500 } }, "Secure payment powered by v402pay")
+        ), /* @__PURE__ */ import_react7.default.createElement(
+          import_antd.Button,
+          {
+            type: "primary",
+            size: "large",
+            onClick: handlePayment,
+            disabled: isProcessing || !paymentDetails,
+            loading: isProcessing,
+            block: true,
+            style: {
+              height: "44px",
+              fontSize: "14px",
+              fontWeight: 600,
+              borderRadius: "8px",
+              ...!isProcessing && paymentDetails && {
+                background: "#1a1a1a",
+                borderColor: "#1a1a1a"
+              },
+              marginBottom: "10px"
+            }
+          },
+          isProcessing ? "Processing..." : !paymentDetails ? "Loading..." : `Pay $${paymentDetails.amount} ${paymentDetails.currency}`
+        ), /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-center" }, /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Don't have USDC?", " "), /* @__PURE__ */ import_react7.default.createElement(
+          "a",
+          {
+            href: "https://faucet.circle.com/",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "text-blue-600 hover:text-blue-700 text-sm font-medium inline-flex items-center gap-1"
+          },
+          "Get it here ",
+          /* @__PURE__ */ import_react7.default.createElement(import_icons.LinkOutlined, { style: { fontSize: "12px" } })
+        )), isModal && result && /* @__PURE__ */ import_react7.default.createElement(
+          "div",
+          {
+            className: "mt-4 p-4 rounded-lg",
+            style: { background: "#f6ffed", border: "1px solid #b7eb8f" }
+          },
+          /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-center" }, /* @__PURE__ */ import_react7.default.createElement("span", { style: { fontSize: "20px" } }, "\u2713"), /* @__PURE__ */ import_react7.default.createElement(Text, { style: {
+            fontSize: "14px",
+            color: "#52c41a",
+            fontWeight: 600,
+            marginLeft: "8px"
+          } }, "Payment Successful!"))
+        ), isModal && error && /* @__PURE__ */ import_react7.default.createElement(
+          "div",
+          {
+            className: "mt-4 p-4 rounded-lg",
+            style: { background: "#fff2f0", border: "1px solid #ffccc7" }
+          },
+          /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-center mb-3" }, /* @__PURE__ */ import_react7.default.createElement("span", { style: { fontSize: "20px" } }, "\u2717"), /* @__PURE__ */ import_react7.default.createElement(Text, { style: {
+            fontSize: "14px",
+            color: "#ff4d4f",
+            fontWeight: 600,
+            marginLeft: "8px",
+            display: "block",
+            marginTop: "4px"
+          } }, "Payment Failed")),
+          /* @__PURE__ */ import_react7.default.createElement(Text, { style: {
+            fontSize: "13px",
+            color: "#ff4d4f",
+            display: "block",
+            textAlign: "center"
+          } }, error)
+        ))
+      ),
+      !isModal && (isProcessing || result || error) && /* @__PURE__ */ import_react7.default.createElement(
+        import_antd.Card,
+        {
+          title: /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center gap-2" }, isProcessing && !result && !error ? /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(import_icons.LoadingOutlined, { style: { color: "#14b8a6", fontSize: "16px" } }), /* @__PURE__ */ import_react7.default.createElement(Text, { strong: true, style: { fontSize: "16px", color: "#262626" } }, "Processing Payment")) : result ? /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement("span", { style: { color: "#52c41a", fontSize: "18px" } }, "\u2713"), /* @__PURE__ */ import_react7.default.createElement(Text, { strong: true, style: { fontSize: "16px", color: "#262626" } }, "Payment Successful")) : /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement("span", { style: { color: "#ff4d4f", fontSize: "18px" } }, "\u2717"), /* @__PURE__ */ import_react7.default.createElement(Text, { strong: true, style: { fontSize: "16px", color: "#262626" } }, "Payment Failed"))),
+          extra: !isProcessing && /* @__PURE__ */ import_react7.default.createElement(
+            import_antd.Button,
+            {
+              type: "text",
+              size: "small",
+              onClick: () => {
+                setResult(null);
+                setError(null);
+              }
+            },
+            "Close"
+          ),
+          style: {
+            border: "1px solid #e8e8e8",
+            borderRadius: "16px",
+            boxShadow: "0 4px 24px rgba(0, 0, 0, 0.06)",
+            maxHeight: "calc(100vh - 32px)",
+            width: "480px",
+            animation: "slideInRight 0.4s ease-out"
+          },
+          styles: {
+            body: {
+              padding: "24px",
+              maxHeight: "calc(100vh - 120px)",
+              overflow: "auto"
+            }
+          }
+        },
+        isProcessing && !result && !error && /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-center py-10" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "relative inline-block" }, /* @__PURE__ */ import_react7.default.createElement(
+          "div",
+          {
+            className: "absolute inset-0 rounded-full blur-xl opacity-40",
+            style: {
+              background: "linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%)",
+              animation: "pulse 2s ease-in-out infinite"
+            }
+          }
+        ), /* @__PURE__ */ import_react7.default.createElement(
+          import_antd.Spin,
+          {
+            indicator: /* @__PURE__ */ import_react7.default.createElement(import_icons.LoadingOutlined, { style: { fontSize: 56, color: "#14b8a6" } })
+          }
+        )), /* @__PURE__ */ import_react7.default.createElement("div", { className: "mt-6" }, /* @__PURE__ */ import_react7.default.createElement(Text, { strong: true, style: { fontSize: "18px", color: "#262626", letterSpacing: "-0.02em" } }, "Verifying Payment")), /* @__PURE__ */ import_react7.default.createElement("div", { className: "mt-2 mb-6" }, /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c", lineHeight: "1.6" } }, "Please wait while we confirm your transaction")), /* @__PURE__ */ import_react7.default.createElement(
+          "div",
+          {
+            className: "mt-4 p-4 rounded-xl",
+            style: {
+              background: "linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%)",
+              border: "1px solid #ccfbf1"
+            }
+          },
+          /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center justify-center gap-2" }, /* @__PURE__ */ import_react7.default.createElement("span", { style: { fontSize: "16px" } }, "\u23F1\uFE0F"), /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "13px", color: "#0f766e", fontWeight: 500 } }, "This may take a few moments"))
+        )),
+        result && /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-center mb-6" }, /* @__PURE__ */ import_react7.default.createElement(
+          "div",
+          {
+            className: "inline-flex items-center justify-center w-16 h-16 rounded-full mb-4",
+            style: {
+              background: "linear-gradient(135deg, #10b981 0%, #34d399 100%)",
+              boxShadow: "0 4px 20px rgba(16, 185, 129, 0.3)"
+            }
+          },
+          /* @__PURE__ */ import_react7.default.createElement("span", { style: { fontSize: "32px", color: "white" } }, "\u2713")
+        ), /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement(Text, { strong: true, style: {
+          fontSize: "20px",
+          color: "#262626",
+          display: "block",
+          marginBottom: "8px"
+        } }, "Payment Successful!"), /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c" } }, "Your transaction has been confirmed"))), /* @__PURE__ */ import_react7.default.createElement(import_antd.Divider, { style: { margin: "20px 0", borderColor: "#f0f0f0" } }, /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "12px", color: "#8c8c8c", fontWeight: 500 } }, "RESPONSE DATA")), /* @__PURE__ */ import_react7.default.createElement(
+          "pre",
+          {
+            style: {
+              background: "#fafafa",
+              padding: "20px",
+              borderRadius: "12px",
+              fontSize: "12px",
+              lineHeight: "1.8",
+              overflow: "auto",
+              margin: 0,
+              fontFamily: "Monaco, Courier New, monospace",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+              border: "1px solid #e8e8e8",
+              color: "#262626"
+            }
+          },
+          JSON.stringify(result, null, 2)
+        )),
+        error && /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-center mb-6" }, /* @__PURE__ */ import_react7.default.createElement(
+          "div",
+          {
+            className: "inline-flex items-center justify-center w-16 h-16 rounded-full mb-4",
+            style: {
+              background: "linear-gradient(135deg, #ef4444 0%, #f87171 100%)",
+              boxShadow: "0 4px 20px rgba(239, 68, 68, 0.3)"
+            }
+          },
+          /* @__PURE__ */ import_react7.default.createElement("span", { style: { fontSize: "32px", color: "white" } }, "\u2717")
+        ), /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement(Text, { strong: true, style: {
+          fontSize: "20px",
+          color: "#262626",
+          display: "block",
+          marginBottom: "8px"
+        } }, "Payment Failed"), /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c" } }, "Something went wrong with your transaction"))), /* @__PURE__ */ import_react7.default.createElement(import_antd.Divider, { style: { margin: "20px 0", borderColor: "#f0f0f0" } }, /* @__PURE__ */ import_react7.default.createElement(Text, { style: { fontSize: "12px", color: "#8c8c8c", fontWeight: 500 } }, "ERROR DETAILS")), /* @__PURE__ */ import_react7.default.createElement(
+          "div",
+          {
+            style: {
+              background: "#fef2f2",
+              padding: "20px",
+              borderRadius: "12px",
+              border: "1px solid #fee2e2"
+            }
+          },
+          /* @__PURE__ */ import_react7.default.createElement(Text, { style: {
+            fontSize: "14px",
+            color: "#dc2626",
+            lineHeight: "1.6",
+            fontWeight: 500
+          } }, error)
+        ), /* @__PURE__ */ import_react7.default.createElement("div", { className: "mt-4 text-center" }, /* @__PURE__ */ import_react7.default.createElement(
+          import_antd.Button,
+          {
+            size: "large",
+            onClick: handlePayment,
+            style: {
+              height: "44px",
+              fontSize: "14px",
+              fontWeight: 600,
+              borderRadius: "8px",
+              background: "#1a1a1a",
+              borderColor: "#1a1a1a",
+              color: "white",
+              paddingLeft: "32px",
+              paddingRight: "32px"
+            }
+          },
+          "Try Again"
+        )))
+      )
+    ),
+    /* @__PURE__ */ import_react7.default.createElement("style", { dangerouslySetInnerHTML: {
+      __html: `
+                    @keyframes slideInRight {
+                        from {
+                            opacity: 0;
+                            transform: translateX(100px);
+                        }
+                        to {
+                            opacity: 1;
+                            transform: translateX(0);
+                        }
+                    }
+                    
+                    @keyframes pulse {
+                        0%, 100% {
+                            transform: scale(1);
+                            opacity: 0.4;
+                        }
+                        50% {
+                            transform: scale(1.1);
+                            opacity: 0.6;
+                        }
+                    }
+                `
+    } })
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  V402Checkout,
   WalletConnect,
+  usePageNetwork,
   usePayment,
   usePaymentInfo,
   useWallet