@voyage_ai/v402-web-ts 0.2.1 → 0.3.0

package/dist/react/index.mjs

@@ -1,7 +1,23 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+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 });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/types/common.ts
 var PROD_BACK_URL;
@@ -79,6 +95,24 @@ var init_types = __esm({
 });
 
 // src/utils/wallet.ts
+var wallet_exports = {};
+__export(wallet_exports, {
+  clearAllWalletAddresses: () => clearAllWalletAddresses,
+  clearWalletDisconnection: () => clearWalletDisconnection,
+  formatAddress: () => formatAddress,
+  getAllWalletAddresses: () => getAllWalletAddresses,
+  getCachedWalletAddress: () => getCachedWalletAddress,
+  getConnectedNetworkType: () => getConnectedNetworkType,
+  getWalletDisplayName: () => getWalletDisplayName,
+  getWalletInstallUrl: () => getWalletInstallUrl,
+  getWalletProvider: () => getWalletProvider,
+  isWalletInstalled: () => isWalletInstalled,
+  isWalletManuallyDisconnected: () => isWalletManuallyDisconnected,
+  markWalletDisconnected: () => markWalletDisconnected,
+  removeWalletAddress: () => removeWalletAddress,
+  saveConnectedNetworkType: () => saveConnectedNetworkType,
+  saveWalletAddress: () => saveWalletAddress
+});
 function isWalletInstalled(networkType) {
   if (typeof window === "undefined") {
     return false;
@@ -93,6 +127,20 @@ function isWalletInstalled(networkType) {
       return false;
   }
 }
+function getWalletProvider(networkType) {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  switch (networkType) {
+    case "evm" /* EVM */:
+      return window.ethereum;
+    case "solana" /* SOLANA */:
+    case "svm" /* SVM */:
+      return window.solana || window.phantom;
+    default:
+      return null;
+  }
+}
 function formatAddress(address) {
   if (!address || address.length < 10) {
     return address;
@@ -167,6 +215,17 @@ function getWalletInstallUrl(networkType) {
       return "#";
   }
 }
+function getWalletDisplayName(networkType) {
+  switch (networkType) {
+    case "evm" /* EVM */:
+      return "MetaMask";
+    case "solana" /* SOLANA */:
+    case "svm" /* SVM */:
+      return "Phantom";
+    default:
+      return "Unknown Wallet";
+  }
+}
 function getAllWalletAddresses() {
   if (typeof window === "undefined") {
     return {};
@@ -199,6 +258,11 @@ function removeWalletAddress(networkType) {
   delete addresses[networkType];
   localStorage.setItem(WALLET_ADDRESSES_KEY, JSON.stringify(addresses));
 }
+function clearAllWalletAddresses() {
+  if (typeof window !== "undefined") {
+    localStorage.removeItem(WALLET_ADDRESSES_KEY);
+  }
+}
 var WALLET_DISCONNECTED_KEY, WALLET_DISCONNECTED_NETWORKS_KEY, CONNECTED_NETWORK_TYPE_KEY, WALLET_ADDRESSES_KEY;
 var init_wallet = __esm({
   "src/utils/wallet.ts"() {
@@ -221,7 +285,7 @@ init_wallet();
 
 // src/utils/wallet-connect.ts
 init_wallet();
-async function connectWallet(networkType) {
+async function connectWallet(networkType, forceSelect = false) {
   if (typeof window === "undefined") {
     throw new Error("\u8BF7\u5728\u6D4F\u89C8\u5668\u73AF\u5883\u4E2D\u4F7F\u7528");
   }
@@ -232,6 +296,26 @@ async function connectWallet(networkType) {
         throw new Error("\u8BF7\u5B89\u88C5 MetaMask \u6216\u5176\u4ED6\u4EE5\u592A\u574A\u94B1\u5305");
       }
       const ethereum = window.ethereum;
+      if (forceSelect) {
+        try {
+          const permissions = await ethereum.request({
+            method: "wallet_requestPermissions",
+            params: [{ eth_accounts: {} }]
+          });
+          const accountsPermission = permissions?.find(
+            (p) => p.parentCapability === "eth_accounts"
+          );
+          if (accountsPermission?.caveats?.[0]?.value?.length > 0) {
+            address = accountsPermission.caveats[0].value[0];
+            break;
+          }
+        } catch (err) {
+          if (err.code === 4001) {
+            throw new Error("\u7528\u6237\u53D6\u6D88\u4E86\u94B1\u5305\u8FDE\u63A5");
+          }
+          console.warn("wallet_requestPermissions failed, falling back to eth_requestAccounts");
+        }
+      }
       const accounts = await ethereum.request({
         method: "eth_requestAccounts",
         params: []
@@ -244,10 +328,34 @@ async function connectWallet(networkType) {
     }
     case "solana" /* SOLANA */:
     case "svm" /* SVM */: {
-      const solana = window.solana;
+      const phantom = window.phantom?.solana || window.solana;
+      const solflare = window.solflare;
+      let solana = phantom;
+      if (!solana && solflare?.isSolflare) {
+        solana = solflare;
+      }
       if (!solana) {
         throw new Error("\u8BF7\u5B89\u88C5 Phantom \u6216\u5176\u4ED6 Solana \u94B1\u5305");
       }
+      if (forceSelect) {
+        try {
+          if (phantom?.isConnected) {
+            await phantom.disconnect();
+          }
+          if (solflare?.isConnected) {
+            await solflare.disconnect();
+          }
+          await new Promise((resolve) => setTimeout(resolve, 100));
+        } catch (err) {
+          console.warn("Failed to disconnect Solana wallet:", err);
+        }
+      } else if (solana.isConnected) {
+        try {
+          await solana.disconnect();
+        } catch (err) {
+          console.warn("Failed to disconnect Solana wallet:", err);
+        }
+      }
       const response = await solana.connect();
       address = response.publicKey.toString();
       break;
@@ -260,6 +368,60 @@ async function connectWallet(networkType) {
   saveWalletAddress(networkType, address);
   return address;
 }
+async function disconnectAllSolanaWallets() {
+  if (typeof window === "undefined") return;
+  const phantom = window.phantom?.solana || window.solana;
+  const solflare = window.solflare;
+  const disconnectPromises = [];
+  if (phantom?.isConnected) {
+    disconnectPromises.push(
+      phantom.disconnect().catch(
+        (err) => console.warn("Failed to disconnect Phantom:", err)
+      )
+    );
+  }
+  if (solflare?.isConnected) {
+    disconnectPromises.push(
+      solflare.disconnect().catch(
+        (err) => console.warn("Failed to disconnect Solflare:", err)
+      )
+    );
+  }
+  await Promise.all(disconnectPromises);
+}
+async function disconnectWallet(networkType, clearAll = false) {
+  const targetNetwork = networkType || getConnectedNetworkType();
+  if (targetNetwork && typeof window !== "undefined") {
+    try {
+      switch (targetNetwork) {
+        case "solana" /* SOLANA */:
+        case "svm" /* SVM */: {
+          await disconnectAllSolanaWallets();
+          break;
+        }
+        // EVM 钱包（如 MetaMask）没有真正的 disconnect API
+        // 只清除本地状态，下次连接时会重新请求权限
+        case "evm" /* EVM */:
+        default:
+          break;
+      }
+    } catch (err) {
+      console.warn("Failed to disconnect wallet:", err);
+    }
+  }
+  if (clearAll) {
+    const { clearAllWalletAddresses: clearAllWalletAddresses2 } = (init_wallet(), __toCommonJS(wallet_exports));
+    clearAllWalletAddresses2();
+    markWalletDisconnected();
+    await disconnectAllSolanaWallets();
+  } else if (networkType) {
+    removeWalletAddress(networkType);
+  } else {
+    if (targetNetwork) {
+      removeWalletAddress(targetNetwork);
+    }
+  }
+}
 async function getCurrentWallet(networkType) {
   if (typeof window === "undefined") {
     return null;
@@ -361,24 +523,232 @@ async function switchNetwork(networkType) {
   return null;
 }
 
+// src/utils/wallet-discovery.ts
+var SOLANA_WALLETS = [
+  {
+    id: "phantom",
+    name: "Phantom",
+    // Phantom official icon
+    icon: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiByeD0iMjYiIGZpbGw9IiNBQjlGRjIiLz4KPHBhdGggZD0iTTExMC41IDY0QzExMC41IDg5Ljk1NjggODkuMjAxIDExMSA2My41IDExMUg0MS41QzM2LjI1MzMgMTExIDMyIDEwNi43NDcgMzIgMTAxLjVWNTQuNUMzMiAzMS4wMjggNTEuMDI4IDEyIDc0LjUgMTJDOTcuOTcyIDEyIDExNyAzMS4wMjggMTE3IDU0LjVWNTUuNUMxMTcgNTguNTM3NiAxMTQuNTM4IDYxIDExMS41IDYxSDEwOS41QzEwNi40NjIgNjEgMTA0IDYzLjQ2MjQgMTA0IDY2LjVWNjhDMTA0IDcxLjg2NiAxMDcuMTM0IDc1IDExMSA3NUgxMTEuNUMxMTQuNTM4IDc1IDExNyA3Mi41Mzc2IDExNyA2OS41VjY0SDExMC41WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzEyOF8xMjgpIi8+CjxwYXRoIGQ9Ik00OC41IDY3QzUxLjUzNzYgNjcgNTQgNjQuNTM3NiA1NCA2MS41QzU0IDU4LjQ2MjQgNTEuNTM3NiA1NiA0OC41IDU2QzQ1LjQ2MjQgNTYgNDMgNTguNDYyNCA0MyA2MS41QzQzIDY0LjUzNzYgNDUuNDYyNCA2NyA0OC41IDY3WiIgZmlsbD0iIzFCMUIxQiIvPgo8cGF0aCBkPSJNNzMuNSA2N0M3Ni41Mzc2IDY3IDc5IDY0LjUzNzYgNzkgNjEuNUM3OSA1OC40NjI0IDc2LjUzNzYgNTYgNzMuNSA1NkM3MC40NjI0IDU2IDY4IDU4LjQ2MjQgNjggNjEuNUM2OCA2NC41Mzc2IDcwLjQ2MjQgNjcgNzMuNSA2N1oiIGZpbGw9IiMxQjFCMUIiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8xMjhfMTI4IiB4MT0iMTE3IiB5MT0iMTIiIHgyPSIxMTciIHkyPSIxMTEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRkZGRkYiIHN0b3Atb3BhY2l0eT0iMC44MiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPg==",
+    detect: () => window.phantom?.solana
+  },
+  {
+    id: "solflare",
+    name: "Solflare",
+    // Solflare icon
+    icon: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiByeD0iMjYiIGZpbGw9IiNGQzZEMDEiLz4KPHBhdGggZD0iTTk2IDY0TDY0IDMyTDMyIDY0TDY0IDk2TDk2IDY0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+",
+    detect: () => window.solflare
+  },
+  {
+    id: "backpack",
+    name: "Backpack",
+    // Backpack icon (red coral color)
+    icon: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiByeD0iMjYiIGZpbGw9IiNFMzM0MzAiLz4KPHBhdGggZD0iTTQwIDQ4SDg4VjgwQzg4IDg4LjgzNjYgODAuODM2NiA5NiA3MiA5Nkg1NkM0Ny4xNjM0IDk2IDQwIDg4LjgzNjYgNDAgODBWNDhaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNTIgMzJINzZWNDhINTJWMzJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=",
+    detect: () => window.backpack
+  },
+  {
+    id: "okx-solana",
+    name: "OKX Wallet",
+    // OKX icon
+    icon: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiByeD0iMjYiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjI0IiB5PSIyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iNTIiIHk9IjI0IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSI0IiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSI4MCIgeT0iMjQiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgcng9IjQiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjI0IiB5PSI1MiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iODAiIHk9IjUyIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSI0IiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSIyNCIgeT0iODAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgcng9IjQiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjUyIiB5PSI4MCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iODAiIHk9IjgwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSI0IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=",
+    detect: () => window.okxwallet?.solana
+  },
+  {
+    id: "coinbase-solana",
+    name: "Coinbase Wallet",
+    // Coinbase icon (blue)
+    icon: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiByeD0iMjYiIGZpbGw9IiMwMDUyRkYiLz4KPGNpcmNsZSBjeD0iNjQiIGN5PSI2NCIgcj0iMzYiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjQ4IiB5PSI1NiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjE2IiByeD0iNCIgZmlsbD0iIzAwNTJGRiIvPgo8L3N2Zz4=",
+    detect: () => window.coinbaseSolana
+  },
+  {
+    id: "trust-solana",
+    name: "Trust Wallet",
+    // Trust Wallet icon
+    icon: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiByeD0iMjYiIGZpbGw9IiMwNTAwRkYiLz4KPHBhdGggZD0iTTY0IDI0QzY0IDI0IDk2IDQwIDk2IDY0Qzk2IDg4IDY0IDEwNCA2NCAxMDRDNjQgMTA0IDMyIDg4IDMyIDY0QzMyIDQwIDY0IDI0IDY0IDI0WiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSI2IiBmaWxsPSJub25lIi8+Cjwvc3ZnPg==",
+    detect: () => window.trustwallet?.solana
+  }
+];
+var evmWallets = /* @__PURE__ */ new Map();
+var evmDiscoveryListeners = /* @__PURE__ */ new Set();
+var evmDiscoveryInitialized = false;
+var currentConnectedWallet = null;
+function initEVMWalletDiscovery() {
+  if (typeof window === "undefined" || evmDiscoveryInitialized) return;
+  evmDiscoveryInitialized = true;
+  window.addEventListener("eip6963:announceProvider", ((event) => {
+    const { info, provider } = event.detail;
+    evmWallets.set(info.uuid, { info, provider });
+    evmDiscoveryListeners.forEach((listener) => listener());
+  }));
+  window.dispatchEvent(new Event("eip6963:requestProvider"));
+}
+function getEVMWallets() {
+  const wallets = [];
+  const detectedNames = /* @__PURE__ */ new Set();
+  evmWallets.forEach((detail, uuid) => {
+    if (!detectedNames.has(detail.info.name)) {
+      wallets.push({
+        id: uuid,
+        name: detail.info.name,
+        icon: detail.info.icon,
+        networkType: "evm" /* EVM */,
+        provider: detail.provider,
+        installed: true
+      });
+      detectedNames.add(detail.info.name);
+    }
+  });
+  if (wallets.length === 0 && typeof window !== "undefined" && window.ethereum) {
+    const ethereum = window.ethereum;
+    const walletName = ethereum.isMetaMask ? "MetaMask" : ethereum.isCoinbaseWallet ? "Coinbase Wallet" : ethereum.isOkxWallet ? "OKX Wallet" : "Browser Wallet";
+    if (!detectedNames.has(walletName)) {
+      wallets.push({
+        id: "injected",
+        name: walletName,
+        icon: "",
+        // Will use first letter as avatar
+        networkType: "evm" /* EVM */,
+        provider: ethereum,
+        installed: true
+      });
+    }
+  }
+  return wallets;
+}
+function onEVMWalletsChanged(callback) {
+  evmDiscoveryListeners.add(callback);
+  return () => {
+    evmDiscoveryListeners.delete(callback);
+  };
+}
+function getSolanaWallets() {
+  if (typeof window === "undefined") return [];
+  const wallets = [];
+  const detectedProviders = /* @__PURE__ */ new Set();
+  const detectedNames = /* @__PURE__ */ new Set();
+  for (const wallet of SOLANA_WALLETS) {
+    const provider = wallet.detect();
+    if (provider && !detectedNames.has(wallet.name)) {
+      wallets.push({
+        id: wallet.id,
+        name: wallet.name,
+        icon: wallet.icon,
+        networkType: "solana" /* SOLANA */,
+        provider,
+        installed: true
+      });
+      detectedProviders.add(provider);
+      detectedNames.add(wallet.name);
+    }
+  }
+  const windowSolana = window.solana;
+  if (windowSolana && !detectedProviders.has(windowSolana)) {
+    const walletName = windowSolana.isPhantom ? "Phantom" : windowSolana.isSolflare ? "Solflare" : windowSolana.isBackpack ? "Backpack" : windowSolana.walletName || "Solana Wallet";
+    if (!detectedNames.has(walletName)) {
+      wallets.push({
+        id: "solana-unknown",
+        name: walletName,
+        icon: "",
+        // Will use first letter as avatar
+        networkType: "solana" /* SOLANA */,
+        provider: windowSolana,
+        installed: true
+      });
+    }
+  }
+  return wallets;
+}
+function getWalletsForNetwork(networkType) {
+  switch (networkType) {
+    case "evm" /* EVM */:
+      return getEVMWallets();
+    case "solana" /* SOLANA */:
+    case "svm" /* SVM */:
+      return getSolanaWallets();
+    default:
+      return [];
+  }
+}
+async function connectEVMWallet(wallet) {
+  if (!wallet.provider) {
+    throw new Error(`\u94B1\u5305 ${wallet.name} \u4E0D\u53EF\u7528`);
+  }
+  const accounts = await wallet.provider.request({
+    method: "eth_requestAccounts",
+    params: []
+  });
+  if (!accounts || accounts.length === 0) {
+    throw new Error("\u672A\u80FD\u83B7\u53D6\u5230\u94B1\u5305\u5730\u5740");
+  }
+  return accounts[0];
+}
+async function connectSolanaWallet(wallet) {
+  if (!wallet.provider) {
+    throw new Error(`\u94B1\u5305 ${wallet.name} \u4E0D\u53EF\u7528`);
+  }
+  if (wallet.provider.isConnected) {
+    try {
+      await wallet.provider.disconnect();
+    } catch (err) {
+      console.warn("Failed to disconnect before connecting:", err);
+    }
+  }
+  const response = await wallet.provider.connect();
+  return response.publicKey.toString();
+}
+async function connectToWallet(wallet) {
+  let address;
+  switch (wallet.networkType) {
+    case "evm" /* EVM */:
+      address = await connectEVMWallet(wallet);
+      break;
+    case "solana" /* SOLANA */:
+    case "svm" /* SVM */:
+      address = await connectSolanaWallet(wallet);
+      break;
+    default:
+      throw new Error("\u4E0D\u652F\u6301\u7684\u7F51\u7EDC\u7C7B\u578B");
+  }
+  currentConnectedWallet = wallet;
+  return address;
+}
+function setCurrentConnectedWallet(wallet) {
+  currentConnectedWallet = wallet;
+}
+function clearConnectedWallet() {
+  currentConnectedWallet = null;
+}
+function getWalletProviderForPayment(networkType) {
+  if (currentConnectedWallet && currentConnectedWallet.networkType === networkType) {
+    return currentConnectedWallet.provider;
+  }
+  if (typeof window === "undefined") return null;
+  switch (networkType) {
+    case "evm" /* EVM */:
+      return window.ethereum;
+    case "solana" /* SOLANA */:
+    case "svm" /* SVM */:
+      return window.phantom?.solana || window.solana;
+    default:
+      return null;
+  }
+}
+if (typeof window !== "undefined") {
+  initEVMWalletDiscovery();
+}
+
 // src/services/svm/payment-header.ts
-import {
-  ComputeBudgetProgram,
-  Connection,
-  PublicKey,
-  TransactionMessage,
-  VersionedTransaction
-} from "@solana/web3.js";
+import { ComputeBudgetProgram, Connection, PublicKey, TransactionMessage, VersionedTransaction } from "@solana/web3.js";
 import {
   createTransferCheckedInstruction,
-  getAssociatedTokenAddress,
+  getAssociatedTokenAddressSync,
   getMint,
   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 connection = new Connection(rpcUrl);
   const feePayer = paymentRequirements?.extra?.feePayer;
   if (typeof feePayer !== "string" || !feePayer) {
     throw new Error("Missing facilitator feePayer in payment requirements (extra.feePayer).");
@@ -392,83 +762,85 @@ async function createSvmPaymentHeader(params) {
   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
-    })
-  );
+  const destinationPubkey = new PublicKey(paymentRequirements.payTo);
   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(
+  const mintAccountInfo = await connection.getAccountInfo(mintPubkey);
+  if (!mintAccountInfo) {
+    throw new Error(`Mint account ${mintPubkey.toBase58()} not found`);
+  }
+  const tokenProgramId = mintAccountInfo.owner.equals(TOKEN_2022_PROGRAM_ID) ? TOKEN_2022_PROGRAM_ID : TOKEN_PROGRAM_ID;
+  const mint = await getMint(connection, mintPubkey, void 0, tokenProgramId);
+  const sourceAta = getAssociatedTokenAddressSync(
     mintPubkey,
     userPubkey,
     false,
-    programId
+    tokenProgramId
   );
-  const destinationAta = await getAssociatedTokenAddress(
+  const destinationAta = getAssociatedTokenAddressSync(
     mintPubkey,
-    destination,
+    destinationPubkey,
     false,
-    programId
+    tokenProgramId
   );
-  const sourceAtaInfo = await connection.getAccountInfo(sourceAta, "confirmed");
+  const sourceAtaInfo = await connection.getAccountInfo(sourceAta);
   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");
+  const destAtaInfo = await connection.getAccountInfo(destinationAta);
   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(
+  const instructions = [
+    ComputeBudgetProgram.setComputeUnitLimit({
+      units: 7e3
+      // Sufficient for SPL token transfer
+    }),
+    ComputeBudgetProgram.setComputeUnitPrice({
+      microLamports: 1
+      // Minimal price
+    }),
     createTransferCheckedInstruction(
       sourceAta,
       mintPubkey,
       destinationAta,
       userPubkey,
-      amount,
+      BigInt(paymentRequirements.maxAmountRequired),
       mint.decimals,
       [],
-      programId
+      tokenProgramId
     )
-  );
-  const { blockhash } = await connection.getLatestBlockhash("confirmed");
-  const message2 = new TransactionMessage({
+  ];
+  const { blockhash } = await connection.getLatestBlockhash();
+  const messageV0 = new TransactionMessage({
     payerKey: feePayerPubkey,
     recentBlockhash: blockhash,
     instructions
   }).compileToV0Message();
-  const transaction = new VersionedTransaction(message2);
+  const transaction = new VersionedTransaction(messageV0);
   if (typeof wallet?.signTransaction !== "function") {
     throw new Error("Connected wallet does not support signTransaction");
   }
-  let userSignedTx;
+  let signedTransaction;
   try {
-    userSignedTx = await wallet.signTransaction(transaction);
+    signedTransaction = 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 serializedBytes = signedTransaction.serialize();
+  let binary = "";
+  for (let i = 0; i < serializedBytes.length; i++) {
+    binary += String.fromCharCode(serializedBytes[i]);
+  }
+  const serializedTransaction = btoa(binary);
   const paymentPayload = {
     x402Version,
     scheme: paymentRequirements.scheme,
@@ -477,7 +849,7 @@ async function createSvmPaymentHeader(params) {
       transaction: serializedTransaction
     }
   };
-  const paymentHeader = Buffer.from(JSON.stringify(paymentPayload)).toString("base64");
+  const paymentHeader = btoa(JSON.stringify(paymentPayload));
   return paymentHeader;
 }
 function getDefaultSolanaRpcUrl(network) {
@@ -493,7 +865,7 @@ function getDefaultSolanaRpcUrl(network) {
 // src/services/svm/payment-handler.ts
 init_types();
 async function handleSvmPayment(endpoint, config, requestInit) {
-  const { wallet, network, rpcUrl, maxPaymentAmount } = config;
+  const { wallet, rpcUrl, maxPaymentAmount } = config;
   const initialResponse = await fetch(endpoint, {
     ...requestInit,
     method: requestInit?.method || "POST"
@@ -502,26 +874,10 @@ 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)) {
+  if (rawResponse.error && !IGNORED_402_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 errorMessage = PAYMENT_ERROR_MESSAGES[rawResponse.error] || `Payment failed: ${rawResponse.error}`;
+    throw wrapPaymentError(new Error(errorMessage));
   }
   const x402Version = rawResponse.x402Version;
   const parsedPaymentRequirements = rawResponse.accepts || [];
@@ -571,26 +927,10 @@ async function handleSvmPayment(endpoint, config, requestInit) {
   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)) {
+      if (retryData.error && !IGNORED_402_ERRORS.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);
+        const errorMessage = PAYMENT_ERROR_MESSAGES[retryData.error] || `Payment failed: ${retryData.error}`;
+        throw wrapPaymentError(new Error(errorMessage));
       }
     } catch (error) {
       if (error instanceof PaymentOperationError) {
@@ -717,6 +1057,15 @@ function getChainIdFromNetwork(network) {
 
 // src/services/evm/payment-handler.ts
 init_types();
+var NETWORK_NAMES = {
+  1: "Ethereum Mainnet",
+  11155111: "Sepolia Testnet",
+  8453: "Base Mainnet",
+  84532: "Base Sepolia Testnet",
+  137: "Polygon Mainnet",
+  42161: "Arbitrum One",
+  10: "Optimism Mainnet"
+};
 async function handleEvmPayment(endpoint, config, requestInit) {
   const { wallet, network, maxPaymentAmount } = config;
   const initialResponse = await fetch(endpoint, {
@@ -727,25 +1076,10 @@ 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)) {
+  if (rawResponse.error && !IGNORED_402_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 errorMessage = PAYMENT_ERROR_MESSAGES[rawResponse.error] || `Payment failed: ${rawResponse.error}`;
+    throw wrapPaymentError(new Error(errorMessage));
   }
   const x402Version = rawResponse.x402Version;
   const parsedPaymentRequirements = rawResponse.accepts || [];
@@ -777,19 +1111,10 @@ async function handleEvmPayment(endpoint, config, requestInit) {
       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 currentNetworkName = NETWORK_NAMES[currentChainId] || `Chain ${currentChainId}`;
+      const targetNetworkName = NETWORK_NAMES[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.`
       );
@@ -801,7 +1126,7 @@ async function handleEvmPayment(endpoint, config, requestInit) {
       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 targetNetworkName = NETWORK_NAMES[targetChainId] || selectedRequirements.network;
       const wrappedError = wrapPaymentError(error);
       let finalError;
       if (wrappedError.code === "USER_REJECTED" /* USER_REJECTED */) {
@@ -855,25 +1180,10 @@ async function handleEvmPayment(endpoint, config, requestInit) {
   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)) {
+      if (retryData.error && !IGNORED_402_ERRORS.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);
+        const errorMessage = PAYMENT_ERROR_MESSAGES[retryData.error] || `Payment failed: ${retryData.error}`;
+        throw wrapPaymentError(new Error(errorMessage));
       }
     } catch (error) {
       if (error instanceof PaymentOperationError) {
@@ -921,9 +1231,9 @@ async function makePayment(networkType, merchantId, endpoint = PROD_BACK_URL, ad
     }
   } : {};
   if (networkType === "solana" /* SOLANA */ || networkType === "svm" /* SVM */) {
-    const solana = window.solana;
+    const solana = getWalletProviderForPayment(networkType);
     if (!solana) {
-      throw new Error("\u8BF7\u5B89\u88C5 Phantom \u94B1\u5305");
+      throw new Error("\u8BF7\u5148\u8FDE\u63A5 Solana \u94B1\u5305");
     }
     if (!solana.isConnected) {
       await solana.connect();
@@ -934,10 +1244,11 @@ async function makePayment(networkType, merchantId, endpoint = PROD_BACK_URL, ad
       // 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 ethereum = getWalletProviderForPayment(networkType);
+    if (!ethereum) {
+      throw new Error("\u8BF7\u5148\u8FDE\u63A5 EVM \u94B1\u5305");
     }
-    const provider = new ethers2.BrowserProvider(window.ethereum);
+    const provider = new ethers2.BrowserProvider(ethereum);
     const signer = await provider.getSigner();
     const wallet = {
       address: await signer.getAddress(),
@@ -951,7 +1262,7 @@ async function makePayment(networkType, merchantId, endpoint = PROD_BACK_URL, ad
       },
       // Switch to a different chain
       switchChain: async (chainId) => {
-        await window.ethereum.request({
+        await ethereum.request({
           method: "wallet_switchEthereumChain",
           params: [{ chainId }]
         });
@@ -1006,6 +1317,21 @@ function getNetworkDisplayName(network) {
 }
 
 // src/utils/payment-error-handler.ts
+var IGNORED_402_ERRORS = [
+  "X-PAYMENT header is required",
+  "missing X-PAYMENT header",
+  "payment_required"
+];
+var PAYMENT_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."
+};
 function parsePaymentError(error) {
   if (!error) {
     return {
@@ -1209,13 +1535,18 @@ var WalletStore = class {
     });
   }
   // Connect wallet
-  async connect(type) {
+  // @param forceSelect - 强制弹出钱包选择界面，用于切换账户
+  async connect(type, forceSelect = false) {
     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);
+      const walletAddress = await connectWallet(type, forceSelect);
+      const wallets = getWalletsForNetwork(type);
+      if (wallets.length > 0) {
+        setCurrentConnectedWallet(wallets[0]);
+      }
       this.setState({
         address: walletAddress,
         networkType: type,
@@ -1229,6 +1560,30 @@ var WalletStore = class {
       throw err;
     }
   }
+  // Connect to a specific wallet (from wallet discovery)
+  async connectWithWallet(wallet) {
+    if (this.state.address && this.state.networkType && this.state.networkType !== wallet.networkType) {
+      saveWalletAddress(this.state.networkType, this.state.address);
+    }
+    this.setState({ isConnecting: true, error: null });
+    try {
+      const walletAddress = await connectToWallet(wallet);
+      clearWalletDisconnection(wallet.networkType);
+      saveConnectedNetworkType(wallet.networkType);
+      saveWalletAddress(wallet.networkType, walletAddress);
+      this.setState({
+        address: walletAddress,
+        networkType: wallet.networkType,
+        isConnecting: false
+      });
+    } catch (err) {
+      this.setState({
+        error: err.message || "Failed to connect wallet",
+        isConnecting: false
+      });
+      throw err;
+    }
+  }
   // Switch network (use cached wallet if available)
   async switchNetwork(type) {
     if (this.state.address && this.state.networkType) {
@@ -1260,9 +1615,15 @@ var WalletStore = class {
     }
   }
   // Disconnect wallet
-  disconnect() {
+  async disconnect() {
     const currentNetwork = this.state.networkType;
+    clearConnectedWallet();
     if (currentNetwork) {
+      try {
+        await disconnectWallet(currentNetwork);
+      } catch (err) {
+        console.warn("Failed to disconnect wallet provider:", err);
+      }
       this.handleDisconnect(currentNetwork);
     } else {
       this.setState({
@@ -1306,7 +1667,8 @@ function useWallet() {
   );
   return {
     ...state,
-    connect: (type) => walletStore.connect(type),
+    connect: (type, forceSelect) => walletStore.connect(type, forceSelect),
+    connectWithWallet: (wallet) => walletStore.connectWithWallet(wallet),
     switchNetwork: (type) => walletStore.switchNetwork(type),
     ensureNetwork: (type) => walletStore.ensureNetwork(type),
     disconnect: () => walletStore.disconnect(),
@@ -1415,7 +1777,218 @@ function usePaymentInfo(merchantId, endpoint = PROD_BACK_URL, additionalParams)
 }
 
 // src/react/components/WalletConnect.tsx
-import React, { useState as useState3 } from "react";
+import React2, { useState as useState4 } from "react";
+
+// src/react/components/WalletSelectModal.tsx
+import React, { useEffect as useEffect3, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
+var overlayStyle = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.4)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 99999
+};
+var modalStyle = {
+  backgroundColor: "#ffffff",
+  borderRadius: "12px",
+  padding: "16px",
+  maxWidth: "320px",
+  width: "90%",
+  maxHeight: "70vh",
+  overflow: "auto",
+  boxShadow: "0 10px 25px rgba(0, 0, 0, 0.15)"
+};
+var headerStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: "12px"
+};
+var titleStyle = {
+  fontSize: "15px",
+  fontWeight: 600,
+  color: "#1a1a1a",
+  margin: 0
+};
+var closeButtonStyle = {
+  background: "none",
+  border: "none",
+  fontSize: "20px",
+  cursor: "pointer",
+  color: "#666",
+  padding: "2px 6px",
+  lineHeight: 1,
+  borderRadius: "4px"
+};
+var subtitleStyle = {
+  fontSize: "12px",
+  color: "#666",
+  marginBottom: "12px"
+};
+var walletListStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "6px"
+};
+var getWalletItemStyle = (isHovered) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "10px",
+  padding: "10px 12px",
+  border: "1px solid #e5e5e5",
+  borderRadius: "8px",
+  cursor: "pointer",
+  transition: "all 0.15s ease",
+  backgroundColor: isHovered ? "#f5f5f5" : "#ffffff",
+  borderColor: isHovered ? "#d0d0d0" : "#e5e5e5"
+});
+var walletIconStyle = {
+  width: "32px",
+  height: "32px",
+  borderRadius: "8px",
+  objectFit: "contain",
+  backgroundColor: "#f5f5f5"
+};
+var getAvatarColor = (name) => {
+  const colors2 = [
+    "#6366f1",
+    // indigo
+    "#8b5cf6",
+    // violet
+    "#ec4899",
+    // pink
+    "#f43f5e",
+    // rose
+    "#f97316",
+    // orange
+    "#eab308",
+    // yellow
+    "#22c55e",
+    // green
+    "#14b8a6",
+    // teal
+    "#06b6d4",
+    // cyan
+    "#3b82f6"
+    // blue
+  ];
+  const index = name.charCodeAt(0) % colors2.length;
+  return colors2[index];
+};
+var getWalletIconPlaceholderStyle = (walletName) => ({
+  width: "32px",
+  height: "32px",
+  borderRadius: "8px",
+  backgroundColor: getAvatarColor(walletName),
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: "14px",
+  fontWeight: 600,
+  color: "#ffffff"
+});
+var walletNameStyle = {
+  fontSize: "14px",
+  fontWeight: 500,
+  color: "#1a1a1a"
+};
+var emptyStateStyle = {
+  textAlign: "center",
+  padding: "24px 12px",
+  color: "#666"
+};
+var emptyTitleStyle = {
+  fontSize: "14px",
+  fontWeight: 500,
+  marginBottom: "6px",
+  color: "#1a1a1a"
+};
+var emptyDescStyle = {
+  fontSize: "12px",
+  color: "#888"
+};
+function WalletItem({
+  wallet,
+  isHovered,
+  onSelect,
+  onHover
+}) {
+  const [iconError, setIconError] = useState3(false);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: getWalletItemStyle(isHovered),
+      onClick: onSelect,
+      onMouseEnter: () => onHover(true),
+      onMouseLeave: () => onHover(false)
+    },
+    wallet.icon && !iconError ? /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: wallet.icon,
+        alt: wallet.name,
+        style: walletIconStyle,
+        onError: () => setIconError(true)
+      }
+    ) : /* @__PURE__ */ React.createElement("div", { style: getWalletIconPlaceholderStyle(wallet.name) }, wallet.name.charAt(0).toUpperCase()),
+    /* @__PURE__ */ React.createElement("span", { style: walletNameStyle }, wallet.name)
+  );
+}
+function WalletSelectModal({
+  isOpen,
+  networkType,
+  onSelect,
+  onClose
+}) {
+  const [wallets, setWallets] = useState3([]);
+  const [hoveredWallet, setHoveredWallet] = useState3(null);
+  const [mounted, setMounted] = useState3(false);
+  useEffect3(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+  useEffect3(() => {
+    if (!isOpen) return;
+    initEVMWalletDiscovery();
+    const updateWallets = () => {
+      setWallets(getWalletsForNetwork(networkType));
+    };
+    updateWallets();
+    const unsubscribe = onEVMWalletsChanged(updateWallets);
+    const timer = setTimeout(updateWallets, 500);
+    return () => {
+      unsubscribe();
+      clearTimeout(timer);
+    };
+  }, [isOpen, networkType]);
+  if (!isOpen || !mounted) return null;
+  const handleOverlayClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  const networkName = getNetworkDisplayName(networkType);
+  const modalContent = /* @__PURE__ */ React.createElement("div", { style: overlayStyle, onClick: handleOverlayClick }, /* @__PURE__ */ React.createElement("div", { style: modalStyle }, /* @__PURE__ */ React.createElement("div", { style: headerStyle }, /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, "Select Wallet"), /* @__PURE__ */ React.createElement("button", { style: closeButtonStyle, onClick: onClose }, "\xD7")), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, "Connect a ", networkName, " wallet"), wallets.length > 0 ? /* @__PURE__ */ React.createElement("div", { style: walletListStyle }, wallets.map((wallet) => /* @__PURE__ */ React.createElement(
+    WalletItem,
+    {
+      key: wallet.id,
+      wallet,
+      isHovered: hoveredWallet === wallet.id,
+      onSelect: () => onSelect(wallet),
+      onHover: (hovered) => setHoveredWallet(hovered ? wallet.id : null)
+    }
+  ))) : /* @__PURE__ */ React.createElement("div", { style: emptyStateStyle }, /* @__PURE__ */ React.createElement("p", { style: emptyTitleStyle }, "No wallets found"), /* @__PURE__ */ React.createElement("p", { style: emptyDescStyle }, "Please install a ", networkName, " wallet extension."))));
+  if (typeof document !== "undefined") {
+    return createPortal(modalContent, document.body);
+  }
+  return modalContent;
+}
 
 // src/react/styles/inline-styles.ts
 var isDarkMode = () => {
@@ -1532,18 +2105,6 @@ var getDisconnectButtonStyle = (isHovered) => {
     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",
@@ -1601,46 +2162,55 @@ function WalletConnect({
   supportedNetworks = ["solana" /* SOLANA */, "evm" /* EVM */],
   className = "",
   onConnect,
-  onDisconnect
+  onDisconnect,
+  showSwitchWallet = true
 }) {
-  const { address, networkType, isConnecting, error, connect, disconnect } = useWallet();
-  const [hoveredButton, setHoveredButton] = useState3(null);
-  const [hoveredLink, setHoveredLink] = useState3(null);
-  const handleConnect = async (network) => {
+  const { address, networkType, isConnecting, error, connectWithWallet, disconnect } = useWallet();
+  const [hoveredButton, setHoveredButton] = useState4(null);
+  const [walletSelectOpen, setWalletSelectOpen] = useState4(false);
+  const [selectedNetworkType, setSelectedNetworkType] = useState4(null);
+  const handleOpenWalletSelect = (network) => {
+    setSelectedNetworkType(network);
+    setWalletSelectOpen(true);
+  };
+  const handleWalletSelect = async (wallet) => {
+    setWalletSelectOpen(false);
     try {
-      await connect(network);
+      await connectWithWallet(wallet);
     } catch (err) {
     }
   };
-  const handleDisconnect = () => {
-    disconnect();
+  const handleDisconnect = async () => {
+    await disconnect();
     onDisconnect?.();
   };
-  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, style: walletOptionStyle }, /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        style: getConnectButtonStyle(isConnecting || !installed, hoveredButton === network),
-        onClick: () => handleConnect(network),
-        disabled: isConnecting || !installed,
-        onMouseEnter: () => setHoveredButton(network),
-        onMouseLeave: () => setHoveredButton(null)
-      },
-      isConnecting ? "Connecting..." : getNetworkDisplayName(network)
-    ), !installed && /* @__PURE__ */ React.createElement(
-      "a",
-      {
-        href: getWalletInstallUrl(network),
-        target: "_blank",
-        rel: "noopener noreferrer",
-        style: getInstallLinkStyle(hoveredLink === network),
-        onMouseEnter: () => setHoveredLink(network),
-        onMouseLeave: () => setHoveredLink(null)
-      },
-      "Install Wallet"
-    ));
-  })), 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(
+  const handleSwitchWallet = () => {
+    if (networkType) {
+      setSelectedNetworkType(networkType);
+      setWalletSelectOpen(true);
+    }
+  };
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { style: { ...containerStyle, ...className ? {} : {} }, className }, !address ? /* @__PURE__ */ React2.createElement("div", { style: getSectionStyle() }, /* @__PURE__ */ React2.createElement("h3", { style: getTitleStyle() }, "Connect Wallet"), supportedNetworks.length === 0 ? /* @__PURE__ */ React2.createElement("p", { style: getHintStyle() }, "Please install a supported wallet extension") : /* @__PURE__ */ React2.createElement("div", { style: buttonsContainerStyle }, supportedNetworks.map((network) => /* @__PURE__ */ React2.createElement("div", { key: network, style: walletOptionStyle }, /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      style: getConnectButtonStyle(isConnecting, hoveredButton === network),
+      onClick: () => handleOpenWalletSelect(network),
+      disabled: isConnecting,
+      onMouseEnter: () => setHoveredButton(network),
+      onMouseLeave: () => setHoveredButton(null)
+    },
+    isConnecting ? "Connecting..." : getNetworkDisplayName(network)
+  )))), error && /* @__PURE__ */ React2.createElement("p", { style: getErrorStyle() }, error), /* @__PURE__ */ React2.createElement("p", { style: getHintStyle() }, "Select a network to see available wallets")) : /* @__PURE__ */ React2.createElement("div", { style: getSectionStyle() }, /* @__PURE__ */ React2.createElement("div", { style: walletAddressStyle }, /* @__PURE__ */ React2.createElement("span", { style: getLabelStyle() }, "Connected ", networkType && `(${getNetworkDisplayName(networkType)})`), /* @__PURE__ */ React2.createElement("span", { style: getAddressStyle() }, formatAddress(address))), /* @__PURE__ */ React2.createElement("div", { style: walletActionsStyle }, showSwitchWallet && /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      style: getConnectButtonStyle(isConnecting, hoveredButton === "switch"),
+      onClick: handleSwitchWallet,
+      disabled: isConnecting,
+      onMouseEnter: () => setHoveredButton("switch"),
+      onMouseLeave: () => setHoveredButton(null)
+    },
+    isConnecting ? "Switching..." : "Switch Wallet"
+  ), /* @__PURE__ */ React2.createElement(
     "button",
     {
       style: getDisconnectButtonStyle(hoveredButton === "disconnect"),
@@ -1649,11 +2219,19 @@ function WalletConnect({
       onMouseLeave: () => setHoveredButton(null)
     },
     "Disconnect"
-  )), /* @__PURE__ */ React.createElement("p", { style: getHintStyle() }, "Switch account in your wallet to change address")));
+  )), /* @__PURE__ */ React2.createElement("p", { style: getHintStyle() }, 'Click "Switch Wallet" to change wallet or account'))), selectedNetworkType && /* @__PURE__ */ React2.createElement(
+    WalletSelectModal,
+    {
+      isOpen: walletSelectOpen,
+      networkType: selectedNetworkType,
+      onSelect: handleWalletSelect,
+      onClose: () => setWalletSelectOpen(false)
+    }
+  ));
 }
 
 // src/react/components/V402Checkout.tsx
-import React3, { useEffect as useEffect3, useState as useState4 } from "react";
+import React4, { useEffect as useEffect4, useState as useState5 } from "react";
 import { Button, Card, Divider, message, Spin, Tooltip, Typography } from "antd";
 import {
   DisconnectOutlined,
@@ -1666,9 +2244,9 @@ import {
 init_common();
 
 // src/react/utils/CryptoIcons.tsx
-import React2 from "react";
+import React3 from "react";
 var SolanaIcon = ({ width = 16, height = 16, className, style }) => {
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1678,14 +2256,14 @@ var SolanaIcon = ({ width = 16, height = 16, className, style }) => {
       className,
       style
     },
-    /* @__PURE__ */ React2.createElement("desc", null, "Solana SOL Fill Streamline Icon: https://streamlinehq.com"),
-    /* @__PURE__ */ React2.createElement("g", { fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React3.createElement("desc", null, "Solana SOL Fill Streamline Icon: https://streamlinehq.com"),
+    /* @__PURE__ */ React3.createElement("g", { fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ React3.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__ */ React2.createElement(
+    ), /* @__PURE__ */ React3.createElement(
       "path",
       {
         fill: "#000000",
@@ -1696,7 +2274,7 @@ var SolanaIcon = ({ width = 16, height = 16, className, style }) => {
   );
 };
 var BaseIcon = ({ width = 24, height = 24, className, style }) => {
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1710,8 +2288,8 @@ var BaseIcon = ({ width = 24, height = 24, className, style }) => {
       className,
       style
     },
-    /* @__PURE__ */ React2.createElement("desc", null, "Brand Coinbase Streamline Icon: https://streamlinehq.com"),
-    /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React3.createElement("desc", null, "Brand Coinbase Streamline Icon: https://streamlinehq.com"),
+    /* @__PURE__ */ React3.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",
@@ -1769,14 +2347,14 @@ function V402Checkout({
     { autoSwitch: !!targetNetwork, switchOnMount: true }
   );
   const { isProcessing, setIsProcessing, result, setResult, error, setError } = usePayment();
-  const [paymentDetails, setPaymentDetails] = useState4(null);
+  const [paymentDetails, setPaymentDetails] = useState5(null);
   const handleDisconnect = () => {
     disconnect();
     setResult(null);
     setError(null);
     notify.info("Wallet Disconnected", "Your wallet has been disconnected successfully.");
   };
-  useEffect3(() => {
+  useEffect4(() => {
     if (paymentInfo && paymentInfo.length > 0) {
       const firstPayment = paymentInfo[0];
       const rawAmount = firstPayment.maxAmountRequired?.toString() || "0";
@@ -1791,7 +2369,7 @@ function V402Checkout({
       });
     }
   }, [paymentInfo]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (targetNetwork && !fetchingPaymentInfo && ensureNetwork) {
       ensureNetwork(targetNetwork).catch((err) => {
         console.error("Failed to ensure network:", err);
@@ -1831,12 +2409,12 @@ function V402Checkout({
   const networkColor = paymentDetails ? getNetworkColor(paymentDetails.network) : "#8c8c8c";
   const loadingColor = "#8c8c8c";
   const hasInvalidCheckoutId = !fetchingPaymentInfo && (!paymentInfo || paymentInfo.length === 0);
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     "div",
     {
       className: isModal ? "bg-white" : "h-screen bg-white flex items-center justify-center p-4 overflow-hidden"
     },
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(
       "div",
       {
         className: "flex gap-4 items-center justify-center",
@@ -1846,7 +2424,7 @@ function V402Checkout({
           width: "100%"
         }
       },
-      /* @__PURE__ */ React3.createElement(
+      /* @__PURE__ */ React4.createElement(
         Card,
         {
           className: "flex-shrink-0",
@@ -1862,7 +2440,7 @@ function V402Checkout({
           },
           styles: { body: { padding: isModal ? "0px" : "32px 24px" } }
         },
-        /* @__PURE__ */ React3.createElement("div", { className: "flex items-center gap-3 mb-4" }, /* @__PURE__ */ React3.createElement(
+        /* @__PURE__ */ React4.createElement("div", { className: "flex items-center gap-3 mb-4" }, /* @__PURE__ */ React4.createElement(
           "div",
           {
             className: "w-12 h-12 rounded-xl flex items-center justify-center",
@@ -1871,22 +2449,22 @@ function V402Checkout({
               transition: "background 0.3s ease"
             }
           },
-          hasInvalidCheckoutId ? /* @__PURE__ */ React3.createElement("span", { style: { fontSize: "20px", color: "white", fontWeight: "bold" } }, "\u2717") : paymentDetails && NetworkIcon ? /* @__PURE__ */ React3.createElement(NetworkIcon, { width: 24, height: 24 }) : /* @__PURE__ */ React3.createElement(LoadingOutlined, { style: { fontSize: "20px", color: "white" }, spin: true })
-        ), /* @__PURE__ */ React3.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React3.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React3.createElement(Title, { level: 4, style: { margin: 0, fontSize: "18px", fontWeight: 600 } }, title || "Echo Payment OnVoyage"), !hasInvalidCheckoutId && /* @__PURE__ */ React3.createElement(
+          hasInvalidCheckoutId ? /* @__PURE__ */ React4.createElement("span", { style: { fontSize: "20px", color: "white", fontWeight: "bold" } }, "\u2717") : paymentDetails && NetworkIcon ? /* @__PURE__ */ React4.createElement(NetworkIcon, { width: 24, height: 24 }) : /* @__PURE__ */ React4.createElement(LoadingOutlined, { style: { fontSize: "20px", color: "white" }, spin: true })
+        ), /* @__PURE__ */ React4.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React4.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React4.createElement(Title, { level: 4, style: { margin: 0, fontSize: "18px", fontWeight: 600 } }, title || "Echo Payment OnVoyage"), !hasInvalidCheckoutId && /* @__PURE__ */ React4.createElement(
           Tooltip,
           {
             title: tooltipText,
             placement: "top"
           },
-          /* @__PURE__ */ React3.createElement(
+          /* @__PURE__ */ React4.createElement(
             InfoCircleOutlined,
             {
               style: { fontSize: "14px", color: "#8c8c8c", cursor: "help" }
             }
           )
-        )), /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, subtitle))),
-        /* @__PURE__ */ React3.createElement("div", { className: "text-center mb-5" }, /* @__PURE__ */ React3.createElement("div", { className: "inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-50 mb-3" }, /* @__PURE__ */ React3.createElement(LockOutlined, { style: { fontSize: "20px", color: "#595959" } })), /* @__PURE__ */ React3.createElement(Title, { level: 3, style: { margin: "0 0 6px 0", fontSize: "20px", fontWeight: 600 } }, "Payment Required"), /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Pay ", paymentDetails ? `$${paymentDetails.amount} ${paymentDetails.currency}` : "the required amount", " to access")),
-        hasInvalidCheckoutId && /* @__PURE__ */ React3.createElement("div", { className: "text-center py-6" }, /* @__PURE__ */ React3.createElement(
+        )), /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, subtitle))),
+        /* @__PURE__ */ React4.createElement("div", { className: "text-center mb-5" }, /* @__PURE__ */ React4.createElement("div", { className: "inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-50 mb-3" }, /* @__PURE__ */ React4.createElement(LockOutlined, { style: { fontSize: "20px", color: "#595959" } })), /* @__PURE__ */ React4.createElement(Title, { level: 3, style: { margin: "0 0 6px 0", fontSize: "20px", fontWeight: 600 } }, "Payment Required"), /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Pay ", paymentDetails ? `$${paymentDetails.amount} ${paymentDetails.currency}` : "the required amount", " to access")),
+        hasInvalidCheckoutId && /* @__PURE__ */ React4.createElement("div", { className: "text-center py-6" }, /* @__PURE__ */ React4.createElement(
           "div",
           {
             className: "inline-flex items-center justify-center w-16 h-16 rounded-full mb-4",
@@ -1895,15 +2473,15 @@ function V402Checkout({
               boxShadow: "0 4px 20px rgba(239, 68, 68, 0.3)"
             }
           },
-          /* @__PURE__ */ React3.createElement("span", { style: { fontSize: "32px", color: "white" } }, "!")
-        ), /* @__PURE__ */ React3.createElement(
+          /* @__PURE__ */ React4.createElement("span", { style: { fontSize: "32px", color: "white" } }, "!")
+        ), /* @__PURE__ */ React4.createElement(
           Title,
           {
             level: 4,
             style: { margin: "0 0 12px 0", fontSize: "18px", fontWeight: 600, color: "#262626" }
           },
           "Invalid Checkout ID"
-        ), /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c", display: "block", marginBottom: "16px" } }, "The checkout ID you provided is invalid or has expired."), /* @__PURE__ */ React3.createElement(
+        ), /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c", display: "block", marginBottom: "16px" } }, "The checkout ID you provided is invalid or has expired."), /* @__PURE__ */ React4.createElement(
           "div",
           {
             style: {
@@ -1914,33 +2492,33 @@ function V402Checkout({
               marginTop: "16px"
             }
           },
-          /* @__PURE__ */ React3.createElement(Text, { style: {
+          /* @__PURE__ */ React4.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__ */ React3.createElement("div", { className: "text-center py-6" }, /* @__PURE__ */ React3.createElement(Text, { style: { color: "#8c8c8c" } }, "Loading payment information...")),
-        !hasInvalidCheckoutId && !fetchingPaymentInfo && !address && /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement(WalletConnect, { supportedNetworks })),
-        !hasInvalidCheckoutId && address && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+        !hasInvalidCheckoutId && fetchingPaymentInfo && /* @__PURE__ */ React4.createElement("div", { className: "text-center py-6" }, /* @__PURE__ */ React4.createElement(Text, { style: { color: "#8c8c8c" } }, "Loading payment information...")),
+        !hasInvalidCheckoutId && !fetchingPaymentInfo && !address && /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement(WalletConnect, { supportedNetworks })),
+        !hasInvalidCheckoutId && address && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
           "div",
           {
             className: "bg-gray-50 rounded-lg p-3 mb-4",
             style: { border: "1px solid #f0f0f0" }
           },
-          /* @__PURE__ */ React3.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React3.createElement("div", { className: "flex items-center gap-3 flex-1" }, /* @__PURE__ */ React3.createElement(
+          /* @__PURE__ */ React4.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React4.createElement("div", { className: "flex items-center gap-3 flex-1" }, /* @__PURE__ */ React4.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__ */ React3.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React3.createElement(Text, { style: {
+          ), /* @__PURE__ */ React4.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React4.createElement(Text, { style: {
             display: "block",
             fontSize: "12px",
             color: "#8c8c8c",
             marginBottom: "2px"
-          } }, "Connected Wallet"), /* @__PURE__ */ React3.createElement(
+          } }, "Connected Wallet"), /* @__PURE__ */ React4.createElement(
             Text,
             {
               style: {
@@ -1950,17 +2528,17 @@ function V402Checkout({
               }
             },
             formatAddress(address)
-          ))), /* @__PURE__ */ React3.createElement(
+          ))), /* @__PURE__ */ React4.createElement(
             Button,
             {
               type: "text",
               size: "small",
-              icon: /* @__PURE__ */ React3.createElement(DisconnectOutlined, null),
+              icon: /* @__PURE__ */ React4.createElement(DisconnectOutlined, null),
               onClick: handleDisconnect,
               style: { color: "#ff4d4f" }
             }
           ))
-        ), paymentDetails && /* @__PURE__ */ React3.createElement("div", { className: "bg-gray-50 rounded-lg p-3 mb-4", style: { border: "1px solid #f0f0f0" } }, /* @__PURE__ */ React3.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Payment Amount"), /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "18px", fontWeight: 600 } }, "$", paymentDetails.amount)), /* @__PURE__ */ React3.createElement(Divider, { style: { margin: "6px 0" } }), /* @__PURE__ */ React3.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Currency"), /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "14px", fontWeight: 500 } }, paymentDetails.currency)), /* @__PURE__ */ React3.createElement(Divider, { style: { margin: "6px 0" } }), /* @__PURE__ */ React3.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Network"), /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "14px", fontWeight: 500 } }, paymentDetails.network)), /* @__PURE__ */ React3.createElement(Divider, { style: { margin: "6px 0" } }), /* @__PURE__ */ React3.createElement("div", { className: "flex justify-between items-start" }, /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Wallet Address"), /* @__PURE__ */ React3.createElement(Text, { style: {
+        ), paymentDetails && /* @__PURE__ */ React4.createElement("div", { className: "bg-gray-50 rounded-lg p-3 mb-4", style: { border: "1px solid #f0f0f0" } }, /* @__PURE__ */ React4.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Payment Amount"), /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "18px", fontWeight: 600 } }, "$", paymentDetails.amount)), /* @__PURE__ */ React4.createElement(Divider, { style: { margin: "6px 0" } }), /* @__PURE__ */ React4.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Currency"), /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "14px", fontWeight: 500 } }, paymentDetails.currency)), /* @__PURE__ */ React4.createElement(Divider, { style: { margin: "6px 0" } }), /* @__PURE__ */ React4.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Network"), /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "14px", fontWeight: 500 } }, paymentDetails.network)), /* @__PURE__ */ React4.createElement(Divider, { style: { margin: "6px 0" } }), /* @__PURE__ */ React4.createElement("div", { className: "flex justify-between items-start" }, /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Wallet Address"), /* @__PURE__ */ React4.createElement(Text, { style: {
           fontSize: "11px",
           fontWeight: 500,
           fontFamily: "Monaco, monospace",
@@ -1968,15 +2546,15 @@ function V402Checkout({
           textAlign: "right",
           maxWidth: "60%",
           lineHeight: 1.4
-        } }, address))), /* @__PURE__ */ React3.createElement(
+        } }, address))), /* @__PURE__ */ React4.createElement(
           "div",
           {
             className: "flex items-center justify-center gap-2 mb-3 p-2 rounded-lg",
             style: { background: "#f6ffed", border: "1px solid #d9f7be" }
           },
-          /* @__PURE__ */ React3.createElement(SafetyOutlined, { style: { color: "#52c41a", fontSize: "13px" } }),
-          /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "12px", color: "#52c41a", fontWeight: 500 } }, "Secure payment powered by v402pay")
-        ), /* @__PURE__ */ React3.createElement(
+          /* @__PURE__ */ React4.createElement(SafetyOutlined, { style: { color: "#52c41a", fontSize: "13px" } }),
+          /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "12px", color: "#52c41a", fontWeight: 500 } }, "Secure payment powered by v402pay")
+        ), /* @__PURE__ */ React4.createElement(
           Button,
           {
             type: "primary",
@@ -1998,7 +2576,7 @@ function V402Checkout({
             }
           },
           isProcessing ? "Processing..." : !paymentDetails ? "Loading..." : `Pay $${paymentDetails.amount} ${paymentDetails.currency}`
-        ), /* @__PURE__ */ React3.createElement("div", { className: "text-center" }, /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Don't have USDC?", " "), /* @__PURE__ */ React3.createElement(
+        ), /* @__PURE__ */ React4.createElement("div", { className: "text-center" }, /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Don't have USDC?", " "), /* @__PURE__ */ React4.createElement(
           "a",
           {
             href: "https://faucet.circle.com/",
@@ -2007,26 +2585,26 @@ function V402Checkout({
             className: "text-blue-600 hover:text-blue-700 text-sm font-medium inline-flex items-center gap-1"
           },
           "Get it here ",
-          /* @__PURE__ */ React3.createElement(LinkOutlined, { style: { fontSize: "12px" } })
-        )), isModal && result && /* @__PURE__ */ React3.createElement(
+          /* @__PURE__ */ React4.createElement(LinkOutlined, { style: { fontSize: "12px" } })
+        )), isModal && result && /* @__PURE__ */ React4.createElement(
           "div",
           {
             className: "mt-4 p-4 rounded-lg",
             style: { background: "#f6ffed", border: "1px solid #b7eb8f" }
           },
-          /* @__PURE__ */ React3.createElement("div", { className: "text-center" }, /* @__PURE__ */ React3.createElement("span", { style: { fontSize: "20px" } }, "\u2713"), /* @__PURE__ */ React3.createElement(Text, { style: {
+          /* @__PURE__ */ React4.createElement("div", { className: "text-center" }, /* @__PURE__ */ React4.createElement("span", { style: { fontSize: "20px" } }, "\u2713"), /* @__PURE__ */ React4.createElement(Text, { style: {
             fontSize: "14px",
             color: "#52c41a",
             fontWeight: 600,
             marginLeft: "8px"
           } }, "Payment Successful!"))
-        ), isModal && error && /* @__PURE__ */ React3.createElement(
+        ), isModal && error && /* @__PURE__ */ React4.createElement(
           "div",
           {
             className: "mt-4 p-4 rounded-lg",
             style: { background: "#fff2f0", border: "1px solid #ffccc7" }
           },
-          /* @__PURE__ */ React3.createElement("div", { className: "text-center mb-3" }, /* @__PURE__ */ React3.createElement("span", { style: { fontSize: "20px" } }, "\u2717"), /* @__PURE__ */ React3.createElement(Text, { style: {
+          /* @__PURE__ */ React4.createElement("div", { className: "text-center mb-3" }, /* @__PURE__ */ React4.createElement("span", { style: { fontSize: "20px" } }, "\u2717"), /* @__PURE__ */ React4.createElement(Text, { style: {
             fontSize: "14px",
             color: "#ff4d4f",
             fontWeight: 600,
@@ -2034,7 +2612,7 @@ function V402Checkout({
             display: "block",
             marginTop: "4px"
           } }, "Payment Failed")),
-          /* @__PURE__ */ React3.createElement(Text, { style: {
+          /* @__PURE__ */ React4.createElement(Text, { style: {
             fontSize: "13px",
             color: "#ff4d4f",
             display: "block",
@@ -2042,11 +2620,11 @@ function V402Checkout({
           } }, error)
         ))
       ),
-      !isModal && (isProcessing || result || error) && /* @__PURE__ */ React3.createElement(
+      !isModal && (isProcessing || result || error) && /* @__PURE__ */ React4.createElement(
         Card,
         {
-          title: /* @__PURE__ */ React3.createElement("div", { className: "flex items-center gap-2" }, isProcessing && !result && !error ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(LoadingOutlined, { style: { color: "#14b8a6", fontSize: "16px" } }), /* @__PURE__ */ React3.createElement(Text, { strong: true, style: { fontSize: "16px", color: "#262626" } }, "Processing Payment")) : result ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", { style: { color: "#52c41a", fontSize: "18px" } }, "\u2713"), /* @__PURE__ */ React3.createElement(Text, { strong: true, style: { fontSize: "16px", color: "#262626" } }, "Payment Successful")) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", { style: { color: "#ff4d4f", fontSize: "18px" } }, "\u2717"), /* @__PURE__ */ React3.createElement(Text, { strong: true, style: { fontSize: "16px", color: "#262626" } }, "Payment Failed"))),
-          extra: !isProcessing && /* @__PURE__ */ React3.createElement(
+          title: /* @__PURE__ */ React4.createElement("div", { className: "flex items-center gap-2" }, isProcessing && !result && !error ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(LoadingOutlined, { style: { color: "#14b8a6", fontSize: "16px" } }), /* @__PURE__ */ React4.createElement(Text, { strong: true, style: { fontSize: "16px", color: "#262626" } }, "Processing Payment")) : result ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("span", { style: { color: "#52c41a", fontSize: "18px" } }, "\u2713"), /* @__PURE__ */ React4.createElement(Text, { strong: true, style: { fontSize: "16px", color: "#262626" } }, "Payment Successful")) : /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("span", { style: { color: "#ff4d4f", fontSize: "18px" } }, "\u2717"), /* @__PURE__ */ React4.createElement(Text, { strong: true, style: { fontSize: "16px", color: "#262626" } }, "Payment Failed"))),
+          extra: !isProcessing && /* @__PURE__ */ React4.createElement(
             Button,
             {
               type: "text",
@@ -2074,7 +2652,7 @@ function V402Checkout({
             }
           }
         },
-        isProcessing && !result && !error && /* @__PURE__ */ React3.createElement("div", { className: "text-center py-10" }, /* @__PURE__ */ React3.createElement("div", { className: "relative inline-block" }, /* @__PURE__ */ React3.createElement(
+        isProcessing && !result && !error && /* @__PURE__ */ React4.createElement("div", { className: "text-center py-10" }, /* @__PURE__ */ React4.createElement("div", { className: "relative inline-block" }, /* @__PURE__ */ React4.createElement(
           "div",
           {
             className: "absolute inset-0 rounded-full blur-xl opacity-40",
@@ -2083,12 +2661,12 @@ function V402Checkout({
               animation: "pulse 2s ease-in-out infinite"
             }
           }
-        ), /* @__PURE__ */ React3.createElement(
+        ), /* @__PURE__ */ React4.createElement(
           Spin,
           {
-            indicator: /* @__PURE__ */ React3.createElement(LoadingOutlined, { style: { fontSize: 56, color: "#14b8a6" } })
+            indicator: /* @__PURE__ */ React4.createElement(LoadingOutlined, { style: { fontSize: 56, color: "#14b8a6" } })
           }
-        )), /* @__PURE__ */ React3.createElement("div", { className: "mt-6" }, /* @__PURE__ */ React3.createElement(Text, { strong: true, style: { fontSize: "18px", color: "#262626", letterSpacing: "-0.02em" } }, "Verifying Payment")), /* @__PURE__ */ React3.createElement("div", { className: "mt-2 mb-6" }, /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c", lineHeight: "1.6" } }, "Please wait while we confirm your transaction")), /* @__PURE__ */ React3.createElement(
+        )), /* @__PURE__ */ React4.createElement("div", { className: "mt-6" }, /* @__PURE__ */ React4.createElement(Text, { strong: true, style: { fontSize: "18px", color: "#262626", letterSpacing: "-0.02em" } }, "Verifying Payment")), /* @__PURE__ */ React4.createElement("div", { className: "mt-2 mb-6" }, /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c", lineHeight: "1.6" } }, "Please wait while we confirm your transaction")), /* @__PURE__ */ React4.createElement(
           "div",
           {
             className: "mt-4 p-4 rounded-xl",
@@ -2097,9 +2675,9 @@ function V402Checkout({
               border: "1px solid #ccfbf1"
             }
           },
-          /* @__PURE__ */ React3.createElement("div", { className: "flex items-center justify-center gap-2" }, /* @__PURE__ */ React3.createElement("span", { style: { fontSize: "16px" } }, "\u23F1\uFE0F"), /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "13px", color: "#0f766e", fontWeight: 500 } }, "This may take a few moments"))
+          /* @__PURE__ */ React4.createElement("div", { className: "flex items-center justify-center gap-2" }, /* @__PURE__ */ React4.createElement("span", { style: { fontSize: "16px" } }, "\u23F1\uFE0F"), /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "13px", color: "#0f766e", fontWeight: 500 } }, "This may take a few moments"))
         )),
-        result && /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("div", { className: "text-center mb-6" }, /* @__PURE__ */ React3.createElement(
+        result && /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement("div", { className: "text-center mb-6" }, /* @__PURE__ */ React4.createElement(
           "div",
           {
             className: "inline-flex items-center justify-center w-16 h-16 rounded-full mb-4",
@@ -2108,13 +2686,13 @@ function V402Checkout({
               boxShadow: "0 4px 20px rgba(16, 185, 129, 0.3)"
             }
           },
-          /* @__PURE__ */ React3.createElement("span", { style: { fontSize: "32px", color: "white" } }, "\u2713")
-        ), /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement(Text, { strong: true, style: {
+          /* @__PURE__ */ React4.createElement("span", { style: { fontSize: "32px", color: "white" } }, "\u2713")
+        ), /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement(Text, { strong: true, style: {
           fontSize: "20px",
           color: "#262626",
           display: "block",
           marginBottom: "8px"
-        } }, "Payment Successful!"), /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c" } }, "Your transaction has been confirmed"))), /* @__PURE__ */ React3.createElement(Divider, { style: { margin: "20px 0", borderColor: "#f0f0f0" } }, /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "12px", color: "#8c8c8c", fontWeight: 500 } }, "RESPONSE DATA")), /* @__PURE__ */ React3.createElement(
+        } }, "Payment Successful!"), /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c" } }, "Your transaction has been confirmed"))), /* @__PURE__ */ React4.createElement(Divider, { style: { margin: "20px 0", borderColor: "#f0f0f0" } }, /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "12px", color: "#8c8c8c", fontWeight: 500 } }, "RESPONSE DATA")), /* @__PURE__ */ React4.createElement(
           "pre",
           {
             style: {
@@ -2134,7 +2712,7 @@ function V402Checkout({
           },
           JSON.stringify(result, null, 2)
         )),
-        error && /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("div", { className: "text-center mb-6" }, /* @__PURE__ */ React3.createElement(
+        error && /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement("div", { className: "text-center mb-6" }, /* @__PURE__ */ React4.createElement(
           "div",
           {
             className: "inline-flex items-center justify-center w-16 h-16 rounded-full mb-4",
@@ -2143,13 +2721,13 @@ function V402Checkout({
               boxShadow: "0 4px 20px rgba(239, 68, 68, 0.3)"
             }
           },
-          /* @__PURE__ */ React3.createElement("span", { style: { fontSize: "32px", color: "white" } }, "\u2717")
-        ), /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement(Text, { strong: true, style: {
+          /* @__PURE__ */ React4.createElement("span", { style: { fontSize: "32px", color: "white" } }, "\u2717")
+        ), /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement(Text, { strong: true, style: {
           fontSize: "20px",
           color: "#262626",
           display: "block",
           marginBottom: "8px"
-        } }, "Payment Failed"), /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c" } }, "Something went wrong with your transaction"))), /* @__PURE__ */ React3.createElement(Divider, { style: { margin: "20px 0", borderColor: "#f0f0f0" } }, /* @__PURE__ */ React3.createElement(Text, { style: { fontSize: "12px", color: "#8c8c8c", fontWeight: 500 } }, "ERROR DETAILS")), /* @__PURE__ */ React3.createElement(
+        } }, "Payment Failed"), /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c" } }, "Something went wrong with your transaction"))), /* @__PURE__ */ React4.createElement(Divider, { style: { margin: "20px 0", borderColor: "#f0f0f0" } }, /* @__PURE__ */ React4.createElement(Text, { style: { fontSize: "12px", color: "#8c8c8c", fontWeight: 500 } }, "ERROR DETAILS")), /* @__PURE__ */ React4.createElement(
           "div",
           {
             style: {
@@ -2159,13 +2737,13 @@ function V402Checkout({
               border: "1px solid #fee2e2"
             }
           },
-          /* @__PURE__ */ React3.createElement(Text, { style: {
+          /* @__PURE__ */ React4.createElement(Text, { style: {
             fontSize: "14px",
             color: "#dc2626",
             lineHeight: "1.6",
             fontWeight: 500
           } }, error)
-        ), /* @__PURE__ */ React3.createElement("div", { className: "mt-4 text-center" }, /* @__PURE__ */ React3.createElement(
+        ), /* @__PURE__ */ React4.createElement("div", { className: "mt-4 text-center" }, /* @__PURE__ */ React4.createElement(
           Button,
           {
             size: "large",
@@ -2186,7 +2764,7 @@ function V402Checkout({
         )))
       )
     ),
-    /* @__PURE__ */ React3.createElement("style", { dangerouslySetInnerHTML: {
+    /* @__PURE__ */ React4.createElement("style", { dangerouslySetInnerHTML: {
       __html: `
                     @keyframes slideInRight {
                         from {
@@ -2216,6 +2794,7 @@ function V402Checkout({
 export {
   V402Checkout,
   WalletConnect,
+  WalletSelectModal,
   usePageNetwork,
   usePayment,
   usePaymentInfo,