@voyage_ai/v402-web-ts 0.1.0 → 0.1.2

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 {
@@ -221,295 +255,9 @@ import {
   TOKEN_2022_PROGRAM_ID,
   TOKEN_PROGRAM_ID
 } from "@solana/spl-token";
-async function createSvmPaymentHeader(params) {
-  const { wallet, paymentRequirements, x402Version, rpcUrl } = params;
-  const connection = new 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 PublicKey(feePayer);
-  const walletAddress = wallet?.publicKey?.toString() || wallet?.address;
-  if (!walletAddress) {
-    throw new Error("Missing connected Solana wallet address or publicKey");
-  }
-  const userPubkey = new PublicKey(walletAddress);
-  if (!paymentRequirements?.payTo) {
-    throw new Error("Missing payTo in payment requirements");
-  }
-  const destination = new PublicKey(paymentRequirements.payTo);
-  const instructions = [];
-  instructions.push(
-    ComputeBudgetProgram.setComputeUnitLimit({
-      units: 7e3
-      // Sufficient for SPL token transfer
-    })
-  );
-  instructions.push(
-    ComputeBudgetProgram.setComputeUnitPrice({
-      microLamports: 1
-      // Minimal price
-    })
-  );
-  if (!paymentRequirements.asset) {
-    throw new Error("Missing token mint for SPL transfer");
-  }
-  const mintPubkey = new PublicKey(paymentRequirements.asset);
-  const mintInfo = await connection.getAccountInfo(mintPubkey, "confirmed");
-  const programId = mintInfo?.owner?.toBase58() === TOKEN_2022_PROGRAM_ID.toBase58() ? TOKEN_2022_PROGRAM_ID : TOKEN_PROGRAM_ID;
-  const mint = await getMint(connection, mintPubkey, void 0, programId);
-  const sourceAta = await getAssociatedTokenAddress(
-    mintPubkey,
-    userPubkey,
-    false,
-    programId
-  );
-  const destinationAta = await 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(
-    createTransferCheckedInstruction(
-      sourceAta,
-      mintPubkey,
-      destinationAta,
-      userPubkey,
-      amount,
-      mint.decimals,
-      [],
-      programId
-    )
-  );
-  const { blockhash } = await connection.getLatestBlockhash("confirmed");
-  const message = new TransactionMessage({
-    payerKey: feePayerPubkey,
-    recentBlockhash: blockhash,
-    instructions
-  }).compileToV0Message();
-  const transaction = new VersionedTransaction(message);
-  if (typeof wallet?.signTransaction !== "function") {
-    throw new Error("Connected wallet does not support signTransaction");
-  }
-  const userSignedTx = await wallet.signTransaction(transaction);
-  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://api.mainnet-beta.solana.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
-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 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(network);
-  const paymentHeader = await createSvmPaymentHeader({
-    wallet,
-    paymentRequirements: selectedRequirements,
-    x402Version,
-    rpcUrl: effectiveRpcUrl
-  });
-  const newInit = {
-    ...requestInit,
-    method: requestInit?.method || "POST",
-    headers: {
-      ...requestInit?.headers || {},
-      "X-PAYMENT": paymentHeader,
-      "Access-Control-Expose-Headers": "X-PAYMENT-RESPONSE"
-    }
-  };
-  return await fetch(endpoint, newInit);
-}
 
 // src/services/evm/payment-header.ts
 import { ethers } from "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");
-  }
-  const now = Math.floor(Date.now() / 1e3);
-  const nonceBytes = ethers.randomBytes(32);
-  const nonceBytes32 = 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
-  };
-  const signature = await wallet.signTypedData(domain, types, authorization);
-  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
-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 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);
-  if (wallet.switchChain) {
-    try {
-      await wallet.switchChain(`0x${targetChainId.toString(16)}`);
-    } catch (error) {
-      console.warn("Failed to switch chain:", error);
-    }
-  }
-  const paymentHeader = await createEvmPaymentHeader({
-    wallet,
-    paymentRequirements: selectedRequirements,
-    x402Version,
-    chainId: targetChainId
-  });
-  const newInit = {
-    ...requestInit,
-    method: requestInit?.method || "POST",
-    headers: {
-      ...requestInit?.headers || {},
-      "X-PAYMENT": paymentHeader,
-      "Access-Control-Expose-Headers": "X-PAYMENT-RESPONSE"
-    }
-  };
-  return await fetch(endpoint, newInit);
-}
 
 // src/utils/payment-helpers.ts
 import { ethers as ethers2 } from "ethers";
@@ -536,62 +284,6 @@ function getSupportedNetworkTypes(paymentRequirements) {
   });
   return Array.from(networkTypes);
 }
-async function makePayment(networkType, merchantId, endpoint = PROD_BACK_URL) {
-  endpoint = `${endpoint}/${merchantId}`;
-  let response;
-  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(endpoint, {
-      wallet: solana,
-      network: "solana-devnet"
-    });
-  } else if (networkType === "evm" /* EVM */) {
-    if (!window.ethereum) {
-      throw new Error("\u8BF7\u5B89\u88C5 MetaMask \u94B1\u5305");
-    }
-    const provider = new ethers2.BrowserProvider(window.ethereum);
-    const signer = await provider.getSigner();
-    const wallet = {
-      address: await signer.getAddress(),
-      signTypedData: async (domain, types, message) => {
-        return await signer.signTypedData(domain, types, message);
-      }
-    };
-    const network = endpoint.includes("sepolia") ? "base-sepolia" : "base";
-    response = await handleEvmPayment(endpoint, {
-      wallet,
-      network
-    });
-  } else {
-    throw new Error(`\u4E0D\u652F\u6301\u7684\u7F51\u7EDC\u7C7B\u578B: ${networkType}`);
-  }
-  return response;
-}
-async function handlePayment(endpoint, networkType, callbacks) {
-  try {
-    callbacks?.onStart?.();
-    const response = await makePayment(networkType, "", endpoint);
-    if (!response.ok) {
-      const errorText = await response.text();
-      throw new Error(`\u8BF7\u6C42\u5931\u8D25 (${response.status}): ${errorText}`);
-    }
-    const result = await response.json();
-    callbacks?.onSuccess?.(result);
-    return result;
-  } catch (err) {
-    const errorMessage = err.message || "\u652F\u4ED8\u5931\u8D25";
-    callbacks?.onError?.(errorMessage);
-    throw err;
-  } finally {
-    callbacks?.onFinish?.();
-  }
-}
 
 // src/utils/network.ts
 var NETWORK_TYPE_MAP = {
@@ -615,6 +307,7 @@ var NETWORK_TYPE_MAP = {
 };
 function getNetworkDisplayName(network) {
   const displayNames = {
+    "evm": "EVM",
     "ethereum": "Ethereum",
     "sepolia": "Sepolia Testnet",
     "base": "Base",
@@ -660,6 +353,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()) {
@@ -784,7 +500,7 @@ function usePayment() {
 
 // src/react/hooks/usePaymentInfo.ts
 import { useEffect, useState as useState2 } from "react";
-function usePaymentInfo(merchantId, endpoint = PROD_BACK_URL) {
+function usePaymentInfo(merchantId, endpoint = PROD_BACK_URL, additionalParams) {
   const [paymentInfo, setPaymentInfo] = useState2(null);
   const [supportedNetworks, setSupportedNetworks] = useState2([]);
   const [isLoading, setIsLoading] = useState2(true);
@@ -793,8 +509,17 @@ function usePaymentInfo(merchantId, endpoint = PROD_BACK_URL) {
     setIsLoading(true);
     setError(null);
     try {
-      endpoint = `${endpoint}/${merchantId}`;
-      const response = await fetch(endpoint, { method: "POST" });
+      const fullEndpoint = `${endpoint}/${merchantId}`;
+      const requestInit = {
+        method: "POST",
+        ...additionalParams && Object.keys(additionalParams).length > 0 ? {
+          body: JSON.stringify(additionalParams),
+          headers: {
+            "Content-Type": "application/json"
+          }
+        } : {}
+      };
+      const response = await fetch(fullEndpoint, requestInit);
       if (response.status === 402) {
         const body = await response.json();
         const payment = parsePaymentRequired(body);
@@ -815,7 +540,7 @@ function usePaymentInfo(merchantId, endpoint = PROD_BACK_URL) {
   };
   useEffect(() => {
     fetchPaymentInfo();
-  }, [endpoint]);
+  }, [endpoint, merchantId]);
   return {
     paymentInfo,
     supportedNetworks,
@@ -826,7 +551,188 @@ 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();
+  const darkMode = isDarkMode();
+  if (isDisabled) {
+    return {
+      ...baseButtonStyle,
+      background: c.disabled,
+      color: c.disabledText,
+      cursor: "not-allowed",
+      border: darkMode ? "1px solid #404040" : "1px solid #d4d4d4"
+    };
+  }
+  return {
+    ...baseButtonStyle,
+    background: isHovered ? c.primaryHover : c.primary,
+    color: darkMode ? "#000000" : "#ffffff",
+    cursor: "pointer"
+  };
+};
+var getDisconnectButtonStyle = (isHovered) => {
+  const c = getColors();
+  return {
+    ...baseButtonStyle,
+    background: isHovered ? c.dangerHover : c.danger,
+    color: "#ffffff"
+  };
+};
+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 +740,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 +752,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() }, "Please install a supported wallet extension") : /* @__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,62 +770,24 @@ 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")));
-}
-
-// src/react/components/PaymentButton.tsx
-import React2 from "react";
-function PaymentButton({
-  endpoint,
-  className = "",
-  disabled = false,
-  onSuccess,
-  onError,
-  onStart,
-  onFinish,
-  children = "Pay Now"
-}) {
-  const { networkType } = useWallet();
-  const { isProcessing, setIsProcessing, setResult, setError, error } = usePayment();
-  const handleClick = async () => {
-    if (!networkType) {
-      const errorMsg = "Please connect wallet first";
-      setError(errorMsg);
-      onError?.(errorMsg);
-      return;
-    }
-    try {
-      onStart?.();
-      setIsProcessing(true);
-      setError(null);
-      const result = await handlePayment(endpoint, networkType);
-      setResult(result);
-      onSuccess?.(result);
-    } catch (err) {
-      const errorMsg = err.message || "Payment failed";
-      setError(errorMsg);
-      onError?.(errorMsg);
-    } finally {
-      setIsProcessing(false);
-      onFinish?.();
-    }
-  };
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+  })), 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",
     {
-      className: `x402-pay-button ${className}`,
-      onClick: handleClick,
-      disabled: disabled || isProcessing || !networkType
+      style: getDisconnectButtonStyle(hoveredButton === "disconnect"),
+      onClick: handleDisconnect,
+      onMouseEnter: () => setHoveredButton("disconnect"),
+      onMouseLeave: () => setHoveredButton(null)
     },
-    isProcessing ? "Processing..." : children
-  ), error && /* @__PURE__ */ React2.createElement("p", { className: "x402-error" }, error));
+    "Disconnect"
+  )), /* @__PURE__ */ React.createElement("p", { style: getHintStyle() }, "Switch account in your wallet to change address")));
 }
 export {
-  PaymentButton,
   WalletConnect,
   usePayment,
   usePaymentInfo,