@voyage_ai/v402-web-ts 0.1.0 → 0.1.1

package/dist/react/index.mjs

@@ -16,7 +16,7 @@ import {
 } from "x402/types";
 
 // src/types/common.ts
-var PROD_BACK_URL = "https://v402.onvoyage.ai/api";
+var PROD_BACK_URL = "https://v402.onvoyage.ai/api/pay";
 
 // src/types/svm.ts
 import { z } from "zod";
@@ -205,6 +205,40 @@ function onAccountsChanged(callback) {
     ethereum.removeListener?.("accountsChanged", handler);
   };
 }
+function onChainChanged(callback) {
+  if (typeof window === "undefined" || !window.ethereum) {
+    return () => {
+    };
+  }
+  const ethereum = window.ethereum;
+  const handler = (chainId) => {
+    console.log("\u{1F504} Chain changed to:", chainId);
+    callback(chainId);
+  };
+  ethereum.on("chainChanged", handler);
+  return () => {
+    ethereum.removeListener?.("chainChanged", handler);
+  };
+}
+function onWalletDisconnect(callback) {
+  if (typeof window === "undefined") {
+    return () => {
+    };
+  }
+  const solana = window.solana;
+  if (!solana) {
+    return () => {
+    };
+  }
+  const handler = () => {
+    console.log("\u{1F50C} Solana wallet disconnected");
+    callback();
+  };
+  solana.on("disconnect", handler);
+  return () => {
+    solana.removeListener?.("disconnect", handler);
+  };
+}
 
 // src/services/svm/payment-header.ts
 import {
@@ -305,7 +339,14 @@ async function createSvmPaymentHeader(params) {
   if (typeof wallet?.signTransaction !== "function") {
     throw new Error("Connected wallet does not support signTransaction");
   }
-  const userSignedTx = await wallet.signTransaction(transaction);
+  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,
@@ -321,7 +362,7 @@ async function createSvmPaymentHeader(params) {
 function getDefaultSolanaRpcUrl(network) {
   const normalized = network.toLowerCase();
   if (normalized === "solana" || normalized === "solana-mainnet") {
-    return "https://api.mainnet-beta.solana.com";
+    return "https://cathee-fu8ezd-fast-mainnet.helius-rpc.com";
   } else if (normalized === "solana-devnet") {
     return "https://api.devnet.solana.com";
   }
@@ -339,6 +380,26 @@ async function handleSvmPayment(endpoint, config, requestInit) {
     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(
@@ -358,13 +419,22 @@ async function handleSvmPayment(endpoint, config, requestInit) {
       );
     }
   }
-  const effectiveRpcUrl = rpcUrl || getDefaultSolanaRpcUrl(network);
-  const paymentHeader = await createSvmPaymentHeader({
-    wallet,
-    paymentRequirements: selectedRequirements,
-    x402Version,
-    rpcUrl: effectiveRpcUrl
-  });
+  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",
@@ -374,7 +444,38 @@ async function handleSvmPayment(endpoint, config, requestInit) {
       "Access-Control-Expose-Headers": "X-PAYMENT-RESPONSE"
     }
   };
-  return await fetch(endpoint, newInit);
+  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/services/evm/payment-header.ts
@@ -387,6 +488,34 @@ async function createEvmPaymentHeader(params) {
   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 = ethers.randomBytes(32);
   const nonceBytes32 = ethers.hexlify(nonceBytes);
@@ -415,7 +544,14 @@ async function createEvmPaymentHeader(params) {
     validBefore: String(now + (paymentRequirements.maxTimeoutSeconds || 3600)),
     nonce: nonceBytes32
   };
-  const signature = await wallet.signTypedData(domain, types, authorization);
+  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,
@@ -466,6 +602,26 @@ async function handleEvmPayment(endpoint, config, requestInit) {
     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(
@@ -486,19 +642,81 @@ async function handleEvmPayment(endpoint, config, requestInit) {
     }
   }
   const targetChainId = getChainIdFromNetwork(selectedRequirements.network);
-  if (wallet.switchChain) {
+  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("Failed to switch chain:", error);
+      console.warn("\u26A0\uFE0F Failed to switch chain (best effort):", error);
     }
   }
-  const paymentHeader = await createEvmPaymentHeader({
-    wallet,
-    paymentRequirements: selectedRequirements,
-    x402Version,
-    chainId: targetChainId
-  });
+  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",
@@ -508,7 +726,38 @@ async function handleEvmPayment(endpoint, config, requestInit) {
       "Access-Control-Expose-Headers": "X-PAYMENT-RESPONSE"
     }
   };
-  return await fetch(endpoint, newInit);
+  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
@@ -549,7 +798,8 @@ async function makePayment(networkType, merchantId, endpoint = PROD_BACK_URL) {
     }
     response = await handleSvmPayment(endpoint, {
       wallet: solana,
-      network: "solana-devnet"
+      network: "solana"
+      // Will use backend's network configuration
     });
   } else if (networkType === "evm" /* EVM */) {
     if (!window.ethereum) {
@@ -561,12 +811,24 @@ async function makePayment(networkType, merchantId, endpoint = PROD_BACK_URL) {
       address: await signer.getAddress(),
       signTypedData: async (domain, types, message) => {
         return await signer.signTypedData(domain, types, message);
+      },
+      // 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 }]
+        });
       }
     };
-    const network = endpoint.includes("sepolia") ? "base-sepolia" : "base";
     response = await handleEvmPayment(endpoint, {
       wallet,
-      network
+      network: "base"
+      // Will use backend's network configuration
     });
   } else {
     throw new Error(`\u4E0D\u652F\u6301\u7684\u7F51\u7EDC\u7C7B\u578B: ${networkType}`);
@@ -629,6 +891,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() {
@@ -660,6 +1054,29 @@ var WalletStore = class {
         }
       }
     });
+    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."
+        });
+      }
+    });
+    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
+        });
+      }
+    });
   }
   async autoReconnect() {
     if (!isWalletManuallyDisconnected()) {
@@ -826,7 +1243,190 @@ function usePaymentInfo(merchantId, endpoint = PROD_BACK_URL) {
 }
 
 // src/react/components/WalletConnect.tsx
-import React from "react";
+import React, { useState as useState3 } from "react";
+
+// src/react/styles/inline-styles.ts
+var isDarkMode = () => {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
+};
+var colors = {
+  // Light mode
+  light: {
+    background: "#fafafa",
+    cardBg: "#ffffff",
+    text: "#0a0a0a",
+    textSecondary: "#737373",
+    primary: "#000000",
+    primaryHover: "#262626",
+    danger: "#ef4444",
+    dangerHover: "#dc2626",
+    success: "#10b981",
+    successHover: "#059669",
+    disabled: "#e5e5e5",
+    disabledText: "#a3a3a3",
+    errorBg: "#fef2f2",
+    errorText: "#dc2626"
+  },
+  // Dark mode
+  dark: {
+    background: "#0a0a0a",
+    cardBg: "#171717",
+    text: "#fafafa",
+    textSecondary: "#a3a3a3",
+    primary: "#ffffff",
+    primaryHover: "#e5e5e5",
+    danger: "#f87171",
+    dangerHover: "#ef4444",
+    success: "#34d399",
+    successHover: "#10b981",
+    disabled: "#262626",
+    disabledText: "#525252",
+    errorBg: "#1c1917",
+    errorText: "#f87171"
+  }
+};
+var getColors = () => {
+  return isDarkMode() ? colors.dark : colors.light;
+};
+var containerStyle = {
+  width: "100%",
+  maxWidth: "420px",
+  margin: "0 auto"
+};
+var getSectionStyle = () => {
+  const c = getColors();
+  return {
+    padding: "1.5rem",
+    background: c.cardBg,
+    borderRadius: "12px"
+  };
+};
+var getTitleStyle = () => {
+  const c = getColors();
+  return {
+    margin: "0 0 1.25rem 0",
+    fontSize: "1.125rem",
+    fontWeight: 600,
+    color: c.text,
+    letterSpacing: "-0.01em"
+  };
+};
+var buttonsContainerStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.75rem"
+};
+var walletOptionStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem"
+};
+var baseButtonStyle = {
+  padding: "0.875rem 1.25rem",
+  fontSize: "0.9375rem",
+  fontWeight: 500,
+  border: "none",
+  borderRadius: "8px",
+  cursor: "pointer",
+  transition: "background-color 0.15s ease, opacity 0.15s ease",
+  outline: "none",
+  letterSpacing: "-0.01em"
+};
+var getConnectButtonStyle = (isDisabled, isHovered) => {
+  const c = getColors();
+  return {
+    ...baseButtonStyle,
+    background: isDisabled ? c.disabled : isHovered ? c.primaryHover : c.primary,
+    color: isDarkMode() ? "#000000" : "#ffffff",
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    opacity: isDisabled ? 0.5 : 1
+  };
+};
+var getDisconnectButtonStyle = (isHovered) => {
+  const c = getColors();
+  return {
+    ...baseButtonStyle,
+    background: isHovered ? c.dangerHover : c.danger,
+    color: "#ffffff"
+  };
+};
+var getPayButtonStyle = (isDisabled, isHovered) => {
+  const c = getColors();
+  return {
+    ...baseButtonStyle,
+    background: isDisabled ? c.disabled : isHovered ? c.successHover : c.success,
+    color: "#ffffff",
+    width: "100%",
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    opacity: isDisabled ? 0.5 : 1
+  };
+};
+var getInstallLinkStyle = (isHovered) => {
+  const c = getColors();
+  return {
+    display: "inline-block",
+    padding: "0.5rem",
+    fontSize: "0.8125rem",
+    color: c.textSecondary,
+    textDecoration: isHovered ? "underline" : "none",
+    textAlign: "center",
+    fontWeight: 500
+  };
+};
+var walletAddressStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem",
+  marginBottom: "1rem"
+};
+var getLabelStyle = () => {
+  const c = getColors();
+  return {
+    fontSize: "0.8125rem",
+    color: c.textSecondary,
+    fontWeight: 500,
+    textTransform: "uppercase",
+    letterSpacing: "0.05em"
+  };
+};
+var getAddressStyle = () => {
+  const c = getColors();
+  return {
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+    fontSize: "0.9375rem",
+    fontWeight: 500,
+    color: c.text,
+    letterSpacing: "-0.01em"
+  };
+};
+var walletActionsStyle = {
+  margin: "1rem 0"
+};
+var getHintStyle = () => {
+  const c = getColors();
+  return {
+    marginTop: "1rem",
+    fontSize: "0.8125rem",
+    color: c.textSecondary,
+    textAlign: "center",
+    lineHeight: "1.5"
+  };
+};
+var getErrorStyle = () => {
+  const c = getColors();
+  return {
+    marginTop: "1rem",
+    padding: "0.75rem 1rem",
+    background: c.errorBg,
+    color: c.errorText,
+    borderRadius: "8px",
+    fontSize: "0.8125rem",
+    fontWeight: 500
+  };
+};
+
+// src/react/components/WalletConnect.tsx
 function WalletConnect({
   supportedNetworks = ["solana" /* SOLANA */, "evm" /* EVM */],
   className = "",
@@ -834,6 +1434,8 @@ function WalletConnect({
   onDisconnect
 }) {
   const { address, networkType, isConnecting, error, connect, disconnect } = useWallet();
+  const [hoveredButton, setHoveredButton] = useState3(null);
+  const [hoveredLink, setHoveredLink] = useState3(null);
   const handleConnect = async (network) => {
     try {
       await connect(network);
@@ -844,14 +1446,16 @@ function WalletConnect({
     disconnect();
     onDisconnect?.();
   };
-  return /* @__PURE__ */ React.createElement("div", { className: `x402-wallet-connect ${className}` }, !address ? /* @__PURE__ */ React.createElement("div", { className: "x402-wallet-section" }, /* @__PURE__ */ React.createElement("h3", { className: "x402-section-title" }, "Choose Your Wallet"), supportedNetworks.length === 0 ? /* @__PURE__ */ React.createElement("p", { className: "x402-hint" }, "No payment required") : /* @__PURE__ */ React.createElement("div", { className: "x402-wallet-buttons" }, supportedNetworks.map((network) => {
+  return /* @__PURE__ */ React.createElement("div", { style: { ...containerStyle, ...className ? {} : {} }, className }, !address ? /* @__PURE__ */ React.createElement("div", { style: getSectionStyle() }, /* @__PURE__ */ React.createElement("h3", { style: getTitleStyle() }, "Connect Wallet"), supportedNetworks.length === 0 ? /* @__PURE__ */ React.createElement("p", { style: getHintStyle() }, "No payment required") : /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, supportedNetworks.map((network) => {
     const installed = isWalletInstalled(network);
-    return /* @__PURE__ */ React.createElement("div", { key: network, className: "x402-wallet-option" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { key: network, style: walletOptionStyle }, /* @__PURE__ */ React.createElement(
       "button",
       {
-        className: "x402-connect-button",
+        style: getConnectButtonStyle(isConnecting || !installed, hoveredButton === network),
         onClick: () => handleConnect(network),
-        disabled: isConnecting || !installed
+        disabled: isConnecting || !installed,
+        onMouseEnter: () => setHoveredButton(network),
+        onMouseLeave: () => setHoveredButton(null)
       },
       isConnecting ? "Connecting..." : getNetworkDisplayName(network)
     ), !installed && /* @__PURE__ */ React.createElement(
@@ -860,15 +1464,26 @@ function WalletConnect({
         href: getWalletInstallUrl(network),
         target: "_blank",
         rel: "noopener noreferrer",
-        className: "x402-install-link"
+        style: getInstallLinkStyle(hoveredLink === network),
+        onMouseEnter: () => setHoveredLink(network),
+        onMouseLeave: () => setHoveredLink(null)
       },
       "Install Wallet"
     ));
-  })), error && /* @__PURE__ */ React.createElement("p", { className: "x402-error" }, error), /* @__PURE__ */ React.createElement("p", { className: "x402-hint" }, "To switch accounts, please change it in your wallet extension")) : /* @__PURE__ */ React.createElement("div", { className: "x402-wallet-info" }, /* @__PURE__ */ React.createElement("div", { className: "x402-wallet-address" }, /* @__PURE__ */ React.createElement("span", { className: "x402-wallet-label" }, "Connected ", networkType && `(${getNetworkDisplayName(networkType)})`, ":"), /* @__PURE__ */ React.createElement("span", { className: "x402-address" }, formatAddress(address))), /* @__PURE__ */ React.createElement("div", { className: "x402-wallet-actions" }, /* @__PURE__ */ React.createElement("button", { className: "x402-disconnect-button", onClick: handleDisconnect }, "Disconnect")), /* @__PURE__ */ React.createElement("p", { className: "x402-hint" }, "Switch account in your wallet to change address")));
+  })), error && /* @__PURE__ */ React.createElement("p", { style: getErrorStyle() }, error), /* @__PURE__ */ React.createElement("p", { style: getHintStyle() }, "To switch accounts, please change it in your wallet extension")) : /* @__PURE__ */ React.createElement("div", { style: getSectionStyle() }, /* @__PURE__ */ React.createElement("div", { style: walletAddressStyle }, /* @__PURE__ */ React.createElement("span", { style: getLabelStyle() }, "Connected ", networkType && `(${getNetworkDisplayName(networkType)})`), /* @__PURE__ */ React.createElement("span", { style: getAddressStyle() }, formatAddress(address))), /* @__PURE__ */ React.createElement("div", { style: walletActionsStyle }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      style: getDisconnectButtonStyle(hoveredButton === "disconnect"),
+      onClick: handleDisconnect,
+      onMouseEnter: () => setHoveredButton("disconnect"),
+      onMouseLeave: () => setHoveredButton(null)
+    },
+    "Disconnect"
+  )), /* @__PURE__ */ React.createElement("p", { style: getHintStyle() }, "Switch account in your wallet to change address")));
 }
 
 // src/react/components/PaymentButton.tsx
-import React2 from "react";
+import React2, { useState as useState4 } from "react";
 function PaymentButton({
   endpoint,
   className = "",
@@ -881,6 +1496,7 @@ function PaymentButton({
 }) {
   const { networkType } = useWallet();
   const { isProcessing, setIsProcessing, setResult, setError, error } = usePayment();
+  const [isHovered, setIsHovered] = useState4(false);
   const handleClick = async () => {
     if (!networkType) {
       const errorMsg = "Please connect wallet first";
@@ -904,15 +1520,19 @@ function PaymentButton({
       onFinish?.();
     }
   };
+  const isDisabled = disabled || isProcessing || !networkType;
   return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
     "button",
     {
-      className: `x402-pay-button ${className}`,
+      style: getPayButtonStyle(isDisabled, isHovered),
+      className,
       onClick: handleClick,
-      disabled: disabled || isProcessing || !networkType
+      disabled: isDisabled,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false)
     },
     isProcessing ? "Processing..." : children
-  ), error && /* @__PURE__ */ React2.createElement("p", { className: "x402-error" }, error));
+  ), error && /* @__PURE__ */ React2.createElement("p", { style: getErrorStyle() }, error));
 }
 export {
   PaymentButton,