@voyage_ai/v402-web-ts 0.3.0 → 1.0.0

package/dist/react/index.js

@@ -103,17 +103,21 @@ __export(wallet_exports, {
   clearAllWalletAddresses: () => clearAllWalletAddresses,
   clearWalletDisconnection: () => clearWalletDisconnection,
   formatAddress: () => formatAddress,
+  getAllConnectedWalletIds: () => getAllConnectedWalletIds,
   getAllWalletAddresses: () => getAllWalletAddresses,
   getCachedWalletAddress: () => getCachedWalletAddress,
   getConnectedNetworkType: () => getConnectedNetworkType,
+  getConnectedWalletId: () => getConnectedWalletId,
   getWalletDisplayName: () => getWalletDisplayName,
   getWalletInstallUrl: () => getWalletInstallUrl,
   getWalletProvider: () => getWalletProvider,
   isWalletInstalled: () => isWalletInstalled,
   isWalletManuallyDisconnected: () => isWalletManuallyDisconnected,
   markWalletDisconnected: () => markWalletDisconnected,
+  removeConnectedWalletId: () => removeConnectedWalletId,
   removeWalletAddress: () => removeWalletAddress,
   saveConnectedNetworkType: () => saveConnectedNetworkType,
+  saveConnectedWalletId: () => saveConnectedWalletId,
   saveWalletAddress: () => saveWalletAddress
 });
 function isWalletInstalled(networkType) {
@@ -266,7 +270,39 @@ function clearAllWalletAddresses() {
     localStorage.removeItem(WALLET_ADDRESSES_KEY);
   }
 }
-var WALLET_DISCONNECTED_KEY, WALLET_DISCONNECTED_NETWORKS_KEY, CONNECTED_NETWORK_TYPE_KEY, WALLET_ADDRESSES_KEY;
+function getAllConnectedWalletIds() {
+  if (typeof window === "undefined") {
+    return {};
+  }
+  try {
+    const cached = localStorage.getItem(CONNECTED_WALLET_IDS_KEY);
+    return cached ? JSON.parse(cached) : {};
+  } catch (error) {
+    console.error("Failed to parse connected wallet IDs:", error);
+    return {};
+  }
+}
+function saveConnectedWalletId(networkType, walletId) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const walletIds = getAllConnectedWalletIds();
+  walletIds[networkType] = walletId;
+  localStorage.setItem(CONNECTED_WALLET_IDS_KEY, JSON.stringify(walletIds));
+}
+function getConnectedWalletId(networkType) {
+  const walletIds = getAllConnectedWalletIds();
+  return walletIds[networkType] || null;
+}
+function removeConnectedWalletId(networkType) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const walletIds = getAllConnectedWalletIds();
+  delete walletIds[networkType];
+  localStorage.setItem(CONNECTED_WALLET_IDS_KEY, JSON.stringify(walletIds));
+}
+var WALLET_DISCONNECTED_KEY, WALLET_DISCONNECTED_NETWORKS_KEY, CONNECTED_NETWORK_TYPE_KEY, WALLET_ADDRESSES_KEY, CONNECTED_WALLET_IDS_KEY;
 var init_wallet = __esm({
   "src/utils/wallet.ts"() {
     "use strict";
@@ -274,18 +310,24 @@ var init_wallet = __esm({
     WALLET_DISCONNECTED_NETWORKS_KEY = "wallet_disconnected_networks";
     CONNECTED_NETWORK_TYPE_KEY = "connected_network_type";
     WALLET_ADDRESSES_KEY = "wallet_addresses_cache";
+    CONNECTED_WALLET_IDS_KEY = "connected_wallet_ids";
   }
 });
 
 // src/react/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AnimationStyles: () => AnimationStyles,
+  Toast: () => Toast,
   V402Checkout: () => V402Checkout,
+  V402CheckoutV2: () => V402CheckoutV2,
   WalletConnect: () => WalletConnect,
   WalletSelectModal: () => WalletSelectModal,
+  checkoutAnimations: () => checkoutAnimations,
   usePageNetwork: () => usePageNetwork,
   usePayment: () => usePayment,
   usePaymentInfo: () => usePaymentInfo,
+  useToast: () => useToast,
   useWallet: () => useWallet
 });
 module.exports = __toCommonJS(index_exports);
@@ -301,13 +343,13 @@ init_wallet();
 init_wallet();
 async function connectWallet(networkType, forceSelect = false) {
   if (typeof window === "undefined") {
-    throw new Error("\u8BF7\u5728\u6D4F\u89C8\u5668\u73AF\u5883\u4E2D\u4F7F\u7528");
+    throw new Error("Please use in browser environment");
   }
   let address;
   switch (networkType) {
     case "evm" /* EVM */: {
       if (!window.ethereum) {
-        throw new Error("\u8BF7\u5B89\u88C5 MetaMask \u6216\u5176\u4ED6\u4EE5\u592A\u574A\u94B1\u5305");
+        throw new Error("Please install MetaMask or another Ethereum wallet");
       }
       const ethereum = window.ethereum;
       if (forceSelect) {
@@ -325,7 +367,7 @@ async function connectWallet(networkType, forceSelect = false) {
           }
         } catch (err) {
           if (err.code === 4001) {
-            throw new Error("\u7528\u6237\u53D6\u6D88\u4E86\u94B1\u5305\u8FDE\u63A5");
+            throw new Error("User cancelled wallet connection");
           }
           console.warn("wallet_requestPermissions failed, falling back to eth_requestAccounts");
         }
@@ -335,7 +377,7 @@ async function connectWallet(networkType, forceSelect = false) {
         params: []
       });
       if (!accounts || accounts.length === 0) {
-        throw new Error("\u672A\u80FD\u83B7\u53D6\u5230\u94B1\u5305\u5730\u5740");
+        throw new Error("Failed to get wallet address");
       }
       address = accounts[0];
       break;
@@ -349,7 +391,7 @@ async function connectWallet(networkType, forceSelect = false) {
         solana = solflare;
       }
       if (!solana) {
-        throw new Error("\u8BF7\u5B89\u88C5 Phantom \u6216\u5176\u4ED6 Solana \u94B1\u5305");
+        throw new Error("Please install Phantom or another Solana wallet");
       }
       if (forceSelect) {
         try {
@@ -375,7 +417,7 @@ async function connectWallet(networkType, forceSelect = false) {
       break;
     }
     default:
-      throw new Error("\u4E0D\u652F\u6301\u7684\u7F51\u7EDC\u7C7B\u578B");
+      throw new Error("Unsupported network type");
   }
   clearWalletDisconnection(networkType);
   saveConnectedNetworkType(networkType);
@@ -413,8 +455,8 @@ async function disconnectWallet(networkType, clearAll = false) {
           await disconnectAllSolanaWallets();
           break;
         }
-        // EVM 钱包（如 MetaMask）没有真正的 disconnect API
-        // 只清除本地状态，下次连接时会重新请求权限
+        // EVM wallets (like MetaMask) don't have a real disconnect API
+        // Only clear local state, will request permissions again on next connection
         case "evm" /* EVM */:
         default:
           break;
@@ -445,36 +487,32 @@ async function getCurrentWallet(networkType) {
     return null;
   }
   const cachedAddress = getCachedWalletAddress(type);
-  try {
-    let currentAddress = null;
-    switch (type) {
-      case "evm" /* EVM */: {
-        if (!window.ethereum) return cachedAddress;
+  if (type === "evm" /* EVM */) {
+    if (cachedAddress) {
+      return cachedAddress;
+    }
+    if (window.ethereum) {
+      try {
         const accounts = await window.ethereum.request({
           method: "eth_accounts",
           params: []
         });
-        currentAddress = accounts && accounts.length > 0 ? accounts[0] : null;
-        break;
-      }
-      case "solana" /* SOLANA */:
-      case "svm" /* SVM */: {
-        const solana = window.solana;
-        if (!solana || !solana.isConnected) return cachedAddress;
-        currentAddress = solana.publicKey?.toString() || null;
-        break;
+        return accounts && accounts.length > 0 ? accounts[0] : null;
+      } catch (error) {
+        console.error("Failed to get EVM accounts:", error);
+        return null;
       }
-      default:
-        return cachedAddress;
     }
-    if (currentAddress && currentAddress !== cachedAddress) {
-      saveWalletAddress(type, currentAddress);
+    return null;
+  }
+  if (type === "solana" /* SOLANA */ || type === "svm" /* SVM */) {
+    const solana = window.solana;
+    if (!solana || !solana.isConnected) {
+      return cachedAddress;
     }
-    return currentAddress || cachedAddress;
-  } catch (error) {
-    console.error("Failed to get current wallet:", error);
-    return cachedAddress;
+    return solana.publicKey?.toString() || cachedAddress;
   }
+  return cachedAddress;
 }
 function onAccountsChanged(callback) {
   if (typeof window === "undefined" || !window.ethereum) {
@@ -538,6 +576,7 @@ async function switchNetwork(networkType) {
 }
 
 // src/utils/wallet-discovery.ts
+init_wallet();
 var SOLANA_WALLETS = [
   {
     id: "phantom",
@@ -683,22 +722,26 @@ function getWalletsForNetwork(networkType) {
       return [];
   }
 }
+function getWalletByName(name, networkType) {
+  const wallets = getWalletsForNetwork(networkType);
+  return wallets.find((w) => w.name === name) || null;
+}
 async function connectEVMWallet(wallet) {
   if (!wallet.provider) {
-    throw new Error(`\u94B1\u5305 ${wallet.name} \u4E0D\u53EF\u7528`);
+    throw new Error(`Wallet ${wallet.name} is not available`);
   }
   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");
+    throw new Error("Failed to get wallet address");
   }
   return accounts[0];
 }
 async function connectSolanaWallet(wallet) {
   if (!wallet.provider) {
-    throw new Error(`\u94B1\u5305 ${wallet.name} \u4E0D\u53EF\u7528`);
+    throw new Error(`Wallet ${wallet.name} is not available`);
   }
   if (wallet.provider.isConnected) {
     try {
@@ -721,21 +764,41 @@ async function connectToWallet(wallet) {
       address = await connectSolanaWallet(wallet);
       break;
     default:
-      throw new Error("\u4E0D\u652F\u6301\u7684\u7F51\u7EDC\u7C7B\u578B");
+      throw new Error("Unsupported network type");
   }
   currentConnectedWallet = wallet;
+  saveConnectedWalletId(wallet.networkType, wallet.name);
   return address;
 }
 function setCurrentConnectedWallet(wallet) {
   currentConnectedWallet = wallet;
 }
-function clearConnectedWallet() {
+function clearConnectedWallet(networkType) {
+  if (networkType) {
+    removeConnectedWalletId(networkType);
+  }
   currentConnectedWallet = null;
 }
+function restoreConnectedWallet(networkType) {
+  const savedWalletName = getConnectedWalletId(networkType);
+  if (!savedWalletName) return null;
+  const wallet = getWalletByName(savedWalletName, networkType);
+  if (wallet) {
+    currentConnectedWallet = wallet;
+    console.log(`\u2705 Restored wallet provider: ${wallet.name}`);
+    return wallet;
+  }
+  console.warn(`\u26A0\uFE0F Could not find wallet with name: ${savedWalletName}`);
+  return null;
+}
 function getWalletProviderForPayment(networkType) {
   if (currentConnectedWallet && currentConnectedWallet.networkType === networkType) {
     return currentConnectedWallet.provider;
   }
+  const restoredWallet = restoreConnectedWallet(networkType);
+  if (restoredWallet) {
+    return restoredWallet.provider;
+  }
   if (typeof window === "undefined") return null;
   switch (networkType) {
     case "evm" /* EVM */:
@@ -1229,7 +1292,7 @@ function getSupportedNetworkTypes(paymentRequirements) {
   });
   return Array.from(networkTypes);
 }
-async function makePayment(networkType, merchantId, endpoint = PROD_BACK_URL, additionalParams) {
+async function makePayment(networkType, merchantId, endpoint = PROD_BACK_URL, additionalParams, expectedAddress) {
   const fullEndpoint = `${endpoint}/${merchantId}`;
   let response;
   const requestInit = additionalParams && Object.keys(additionalParams).length > 0 ? {
@@ -1241,11 +1304,19 @@ async function makePayment(networkType, merchantId, endpoint = PROD_BACK_URL, ad
   if (networkType === "solana" /* SOLANA */ || networkType === "svm" /* SVM */) {
     const solana = getWalletProviderForPayment(networkType);
     if (!solana) {
-      throw new Error("\u8BF7\u5148\u8FDE\u63A5 Solana \u94B1\u5305");
+      throw new Error("Please connect your Solana wallet first.");
     }
     if (!solana.isConnected) {
       await solana.connect();
     }
+    if (expectedAddress && solana.publicKey) {
+      const currentAddress = solana.publicKey.toString();
+      if (currentAddress !== expectedAddress) {
+        throw new Error(
+          `Wallet account mismatch: the current wallet account is ${currentAddress.slice(0, 8)}...\uFF0CBut the desired account is ${expectedAddress.slice(0, 8)}.... Please switch to the correct account in your wallet.`
+        );
+      }
+    }
     response = await handleSvmPayment(fullEndpoint, {
       wallet: solana,
       network: "solana"
@@ -1254,12 +1325,18 @@ async function makePayment(networkType, merchantId, endpoint = PROD_BACK_URL, ad
   } else if (networkType === "evm" /* EVM */) {
     const ethereum = getWalletProviderForPayment(networkType);
     if (!ethereum) {
-      throw new Error("\u8BF7\u5148\u8FDE\u63A5 EVM \u94B1\u5305");
+      throw new Error("Please connect the EVM wallet first");
     }
     const provider = new import_ethers2.ethers.BrowserProvider(ethereum);
     const signer = await provider.getSigner();
+    const currentAddress = await signer.getAddress();
+    if (expectedAddress && currentAddress.toLowerCase() !== expectedAddress.toLowerCase()) {
+      throw new Error(
+        `Wallet account mismatch: the current wallet account is ${currentAddress.slice(0, 8)}...\uFF0CBut the desired account is ${expectedAddress.slice(0, 8)}.... Please switch to the correct account in your wallet.`
+      );
+    }
     const wallet = {
-      address: await signer.getAddress(),
+      address: currentAddress,
       signTypedData: async (domain, types, message2) => {
         return await signer.signTypedData(domain, types, message2);
       },
@@ -1282,7 +1359,7 @@ async function makePayment(networkType, merchantId, endpoint = PROD_BACK_URL, ad
       // Will use backend's network configuration
     }, requestInit);
   } else {
-    throw new Error(`\u4E0D\u652F\u6301\u7684\u7F51\u7EDC\u7C7B\u578B: ${networkType}`);
+    throw new Error(`Unsupported network types: ${networkType}`);
   }
   return response;
 }
@@ -1625,7 +1702,7 @@ var WalletStore = class {
   // Disconnect wallet
   async disconnect() {
     const currentNetwork = this.state.networkType;
-    clearConnectedWallet();
+    clearConnectedWallet(currentNetwork || void 0);
     if (currentNetwork) {
       try {
         await disconnectWallet(currentNetwork);
@@ -1784,12 +1861,83 @@ function usePaymentInfo(merchantId, endpoint = PROD_BACK_URL, additionalParams)
   };
 }
 
-// src/react/components/WalletConnect.tsx
+// src/react/hooks/useToast.tsx
 var import_react6 = __toESM(require("react"));
 
-// src/react/components/WalletSelectModal.tsx
+// src/react/components/ui/Toast.tsx
 var import_react5 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
+var Toast = ({ message: message2, type, onClose }) => {
+  (0, import_react5.useEffect)(() => {
+    const timer = setTimeout(onClose, 3e3);
+    return () => clearTimeout(timer);
+  }, [onClose]);
+  const bgColor = type === "success" ? "#22c55e" : type === "error" ? "#ef4444" : "#3b82f6";
+  const icon = type === "success" ? "\u2713" : type === "error" ? "\u2717" : "\u2139";
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ import_react5.default.createElement(
+      "div",
+      {
+        className: "fixed top-4 right-4 z-[99999] animate-slide-in-right",
+        style: {
+          animation: "slideInRight 0.3s ease-out"
+        }
+      },
+      /* @__PURE__ */ import_react5.default.createElement(
+        "div",
+        {
+          className: "flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg text-white font-mono text-sm",
+          style: { backgroundColor: bgColor, minWidth: "280px" }
+        },
+        /* @__PURE__ */ import_react5.default.createElement("span", { className: "text-lg" }, icon),
+        /* @__PURE__ */ import_react5.default.createElement("span", { className: "flex-1" }, message2),
+        /* @__PURE__ */ import_react5.default.createElement(
+          "button",
+          {
+            onClick: onClose,
+            className: "text-white/80 hover:text-white transition-colors"
+          },
+          "\xD7"
+        )
+      )
+    ),
+    document.body
+  );
+};
+
+// src/react/hooks/useToast.tsx
+var useToast = () => {
+  const [toasts, setToasts] = (0, import_react6.useState)([]);
+  const toastIdRef = (0, import_react6.useRef)(0);
+  const showToast = (0, import_react6.useCallback)((message2, type) => {
+    const id = ++toastIdRef.current;
+    setToasts((prev) => [...prev, { id, message: message2, type }]);
+  }, []);
+  const removeToast = (0, import_react6.useCallback)((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const ToastContainer = () => /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, toasts.map((toast, index) => /* @__PURE__ */ import_react6.default.createElement(
+    "div",
+    {
+      key: toast.id,
+      style: { top: `${16 + index * 60}px` },
+      className: "fixed right-4 z-[99999]"
+    },
+    import_react6.default.createElement(Toast, {
+      message: toast.message,
+      type: toast.type,
+      onClose: () => removeToast(toast.id)
+    })
+  )));
+  return { showToast, ToastContainer };
+};
+
+// src/react/components/wallet/WalletConnect.tsx
+var import_react8 = __toESM(require("react"));
+
+// src/react/components/wallet/WalletSelectModal.tsx
+var import_react7 = __toESM(require("react"));
+var import_react_dom2 = require("react-dom");
 var overlayStyle = {
   position: "fixed",
   top: 0,
@@ -1927,8 +2075,8 @@ function WalletItem({
   onSelect,
   onHover
 }) {
-  const [iconError, setIconError] = (0, import_react5.useState)(false);
-  return /* @__PURE__ */ import_react5.default.createElement(
+  const [iconError, setIconError] = (0, import_react7.useState)(false);
+  return /* @__PURE__ */ import_react7.default.createElement(
     "div",
     {
       style: getWalletItemStyle(isHovered),
@@ -1936,7 +2084,7 @@ function WalletItem({
       onMouseEnter: () => onHover(true),
       onMouseLeave: () => onHover(false)
     },
-    wallet.icon && !iconError ? /* @__PURE__ */ import_react5.default.createElement(
+    wallet.icon && !iconError ? /* @__PURE__ */ import_react7.default.createElement(
       "img",
       {
         src: wallet.icon,
@@ -1944,8 +2092,8 @@ function WalletItem({
         style: walletIconStyle,
         onError: () => setIconError(true)
       }
-    ) : /* @__PURE__ */ import_react5.default.createElement("div", { style: getWalletIconPlaceholderStyle(wallet.name) }, wallet.name.charAt(0).toUpperCase()),
-    /* @__PURE__ */ import_react5.default.createElement("span", { style: walletNameStyle }, wallet.name)
+    ) : /* @__PURE__ */ import_react7.default.createElement("div", { style: getWalletIconPlaceholderStyle(wallet.name) }, wallet.name.charAt(0).toUpperCase()),
+    /* @__PURE__ */ import_react7.default.createElement("span", { style: walletNameStyle }, wallet.name)
   );
 }
 function WalletSelectModal({
@@ -1954,14 +2102,14 @@ function WalletSelectModal({
   onSelect,
   onClose
 }) {
-  const [wallets, setWallets] = (0, import_react5.useState)([]);
-  const [hoveredWallet, setHoveredWallet] = (0, import_react5.useState)(null);
-  const [mounted, setMounted] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => {
+  const [wallets, setWallets] = (0, import_react7.useState)([]);
+  const [hoveredWallet, setHoveredWallet] = (0, import_react7.useState)(null);
+  const [mounted, setMounted] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
     setMounted(true);
     return () => setMounted(false);
   }, []);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!isOpen) return;
     initEVMWalletDiscovery();
     const updateWallets = () => {
@@ -1982,7 +2130,7 @@ function WalletSelectModal({
     }
   };
   const networkName = getNetworkDisplayName(networkType);
-  const modalContent = /* @__PURE__ */ import_react5.default.createElement("div", { style: overlayStyle, onClick: handleOverlayClick }, /* @__PURE__ */ import_react5.default.createElement("div", { style: modalStyle }, /* @__PURE__ */ import_react5.default.createElement("div", { style: headerStyle }, /* @__PURE__ */ import_react5.default.createElement("h3", { style: titleStyle }, "Select Wallet"), /* @__PURE__ */ import_react5.default.createElement("button", { style: closeButtonStyle, onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react5.default.createElement("p", { style: subtitleStyle }, "Connect a ", networkName, " wallet"), wallets.length > 0 ? /* @__PURE__ */ import_react5.default.createElement("div", { style: walletListStyle }, wallets.map((wallet) => /* @__PURE__ */ import_react5.default.createElement(
+  const modalContent = /* @__PURE__ */ import_react7.default.createElement("div", { style: overlayStyle, onClick: handleOverlayClick }, /* @__PURE__ */ import_react7.default.createElement("div", { style: modalStyle }, /* @__PURE__ */ import_react7.default.createElement("div", { style: headerStyle }, /* @__PURE__ */ import_react7.default.createElement("h3", { style: titleStyle }, "Select Wallet"), /* @__PURE__ */ import_react7.default.createElement("button", { style: closeButtonStyle, onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react7.default.createElement("p", { style: subtitleStyle }, "Connect a ", networkName, " wallet"), wallets.length > 0 ? /* @__PURE__ */ import_react7.default.createElement("div", { style: walletListStyle }, wallets.map((wallet) => /* @__PURE__ */ import_react7.default.createElement(
     WalletItem,
     {
       key: wallet.id,
@@ -1991,9 +2139,9 @@ function WalletSelectModal({
       onSelect: () => onSelect(wallet),
       onHover: (hovered) => setHoveredWallet(hovered ? wallet.id : null)
     }
-  ))) : /* @__PURE__ */ import_react5.default.createElement("div", { style: emptyStateStyle }, /* @__PURE__ */ import_react5.default.createElement("p", { style: emptyTitleStyle }, "No wallets found"), /* @__PURE__ */ import_react5.default.createElement("p", { style: emptyDescStyle }, "Please install a ", networkName, " wallet extension."))));
+  ))) : /* @__PURE__ */ import_react7.default.createElement("div", { style: emptyStateStyle }, /* @__PURE__ */ import_react7.default.createElement("p", { style: emptyTitleStyle }, "No wallets found"), /* @__PURE__ */ import_react7.default.createElement("p", { style: emptyDescStyle }, "Please install a ", networkName, " wallet extension."))));
   if (typeof document !== "undefined") {
-    return (0, import_react_dom.createPortal)(modalContent, document.body);
+    return (0, import_react_dom2.createPortal)(modalContent, document.body);
   }
   return modalContent;
 }
@@ -2165,7 +2313,7 @@ var getErrorStyle = () => {
   };
 };
 
-// src/react/components/WalletConnect.tsx
+// src/react/components/wallet/WalletConnect.tsx
 function WalletConnect({
   supportedNetworks = ["solana" /* SOLANA */, "evm" /* EVM */],
   className = "",
@@ -2174,9 +2322,9 @@ function WalletConnect({
   showSwitchWallet = true
 }) {
   const { address, networkType, isConnecting, error, connectWithWallet, disconnect } = useWallet();
-  const [hoveredButton, setHoveredButton] = (0, import_react6.useState)(null);
-  const [walletSelectOpen, setWalletSelectOpen] = (0, import_react6.useState)(false);
-  const [selectedNetworkType, setSelectedNetworkType] = (0, import_react6.useState)(null);
+  const [hoveredButton, setHoveredButton] = (0, import_react8.useState)(null);
+  const [walletSelectOpen, setWalletSelectOpen] = (0, import_react8.useState)(false);
+  const [selectedNetworkType, setSelectedNetworkType] = (0, import_react8.useState)(null);
   const handleOpenWalletSelect = (network) => {
     setSelectedNetworkType(network);
     setWalletSelectOpen(true);
@@ -2198,7 +2346,7 @@ function WalletConnect({
       setWalletSelectOpen(true);
     }
   };
-  return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement("div", { style: { ...containerStyle, ...className ? {} : {} }, className }, !address ? /* @__PURE__ */ import_react6.default.createElement("div", { style: getSectionStyle() }, /* @__PURE__ */ import_react6.default.createElement("h3", { style: getTitleStyle() }, "Connect Wallet"), supportedNetworks.length === 0 ? /* @__PURE__ */ import_react6.default.createElement("p", { style: getHintStyle() }, "Please install a supported wallet extension") : /* @__PURE__ */ import_react6.default.createElement("div", { style: buttonsContainerStyle }, supportedNetworks.map((network) => /* @__PURE__ */ import_react6.default.createElement("div", { key: network, style: walletOptionStyle }, /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement("div", { style: { ...containerStyle, ...className ? {} : {} }, className }, !address ? /* @__PURE__ */ import_react8.default.createElement("div", { style: getSectionStyle() }, /* @__PURE__ */ import_react8.default.createElement("h3", { style: getTitleStyle() }, "Connect Wallet"), supportedNetworks.length === 0 ? /* @__PURE__ */ import_react8.default.createElement("p", { style: getHintStyle() }, "Please install a supported wallet extension") : /* @__PURE__ */ import_react8.default.createElement("div", { style: buttonsContainerStyle }, supportedNetworks.map((network) => /* @__PURE__ */ import_react8.default.createElement("div", { key: network, style: walletOptionStyle }, /* @__PURE__ */ import_react8.default.createElement(
     "button",
     {
       style: getConnectButtonStyle(isConnecting, hoveredButton === network),
@@ -2208,7 +2356,7 @@ function WalletConnect({
       onMouseLeave: () => setHoveredButton(null)
     },
     isConnecting ? "Connecting..." : getNetworkDisplayName(network)
-  )))), error && /* @__PURE__ */ import_react6.default.createElement("p", { style: getErrorStyle() }, error), /* @__PURE__ */ import_react6.default.createElement("p", { style: getHintStyle() }, "Select a network to see available wallets")) : /* @__PURE__ */ import_react6.default.createElement("div", { style: getSectionStyle() }, /* @__PURE__ */ import_react6.default.createElement("div", { style: walletAddressStyle }, /* @__PURE__ */ import_react6.default.createElement("span", { style: getLabelStyle() }, "Connected ", networkType && `(${getNetworkDisplayName(networkType)})`), /* @__PURE__ */ import_react6.default.createElement("span", { style: getAddressStyle() }, formatAddress(address))), /* @__PURE__ */ import_react6.default.createElement("div", { style: walletActionsStyle }, showSwitchWallet && /* @__PURE__ */ import_react6.default.createElement(
+  )))), error && /* @__PURE__ */ import_react8.default.createElement("p", { style: getErrorStyle() }, error), /* @__PURE__ */ import_react8.default.createElement("p", { style: getHintStyle() }, "Select a network to see available wallets")) : /* @__PURE__ */ import_react8.default.createElement("div", { style: getSectionStyle() }, /* @__PURE__ */ import_react8.default.createElement("div", { style: walletAddressStyle }, /* @__PURE__ */ import_react8.default.createElement("span", { style: getLabelStyle() }, "Connected ", networkType && `(${getNetworkDisplayName(networkType)})`), /* @__PURE__ */ import_react8.default.createElement("span", { style: getAddressStyle() }, formatAddress(address))), /* @__PURE__ */ import_react8.default.createElement("div", { style: walletActionsStyle }, showSwitchWallet && /* @__PURE__ */ import_react8.default.createElement(
     "button",
     {
       style: getConnectButtonStyle(isConnecting, hoveredButton === "switch"),
@@ -2218,7 +2366,7 @@ function WalletConnect({
       onMouseLeave: () => setHoveredButton(null)
     },
     isConnecting ? "Switching..." : "Switch Wallet"
-  ), /* @__PURE__ */ import_react6.default.createElement(
+  ), /* @__PURE__ */ import_react8.default.createElement(
     "button",
     {
       style: getDisconnectButtonStyle(hoveredButton === "disconnect"),
@@ -2227,7 +2375,7 @@ function WalletConnect({
       onMouseLeave: () => setHoveredButton(null)
     },
     "Disconnect"
-  )), /* @__PURE__ */ import_react6.default.createElement("p", { style: getHintStyle() }, 'Click "Switch Wallet" to change wallet or account'))), selectedNetworkType && /* @__PURE__ */ import_react6.default.createElement(
+  )), /* @__PURE__ */ import_react8.default.createElement("p", { style: getHintStyle() }, 'Click "Switch Wallet" to change wallet or account'))), selectedNetworkType && /* @__PURE__ */ import_react8.default.createElement(
     WalletSelectModal,
     {
       isOpen: walletSelectOpen,
@@ -2238,16 +2386,16 @@ function WalletConnect({
   ));
 }
 
-// src/react/components/V402Checkout.tsx
-var import_react8 = __toESM(require("react"));
+// src/react/components/checkout/V402Checkout.tsx
+var import_react10 = __toESM(require("react"));
 var import_antd = require("antd");
 var import_icons = require("@ant-design/icons");
 init_common();
 
 // src/react/utils/CryptoIcons.tsx
-var import_react7 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var SolanaIcon = ({ width = 16, height = 16, className, style }) => {
-  return /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2257,14 +2405,14 @@ var SolanaIcon = ({ width = 16, height = 16, className, style }) => {
       className,
       style
     },
-    /* @__PURE__ */ import_react7.default.createElement("desc", null, "Solana SOL Fill Streamline Icon: https://streamlinehq.com"),
-    /* @__PURE__ */ import_react7.default.createElement("g", { fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ import_react7.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement("desc", null, "Solana SOL Fill Streamline Icon: https://streamlinehq.com"),
+    /* @__PURE__ */ import_react9.default.createElement("g", { fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ import_react9.default.createElement(
       "path",
       {
         d: "M16 0v16H0V0h16ZM8.395333333333333 15.505333333333333l-0.007333333333333332 0.0013333333333333333 -0.047333333333333324 0.023333333333333334 -0.013333333333333332 0.0026666666666666666 -0.009333333333333332 -0.0026666666666666666 -0.047333333333333324 -0.023333333333333334c-0.006666666666666666 -0.0026666666666666666 -0.012666666666666666 -0.0006666666666666666 -0.016 0.003333333333333333l-0.0026666666666666666 0.006666666666666666 -0.011333333333333334 0.2853333333333333 0.003333333333333333 0.013333333333333332 0.006666666666666666 0.008666666666666666 0.06933333333333333 0.049333333333333326 0.009999999999999998 0.0026666666666666666 0.008 -0.0026666666666666666 0.06933333333333333 -0.049333333333333326 0.008 -0.010666666666666666 0.0026666666666666666 -0.011333333333333334 -0.011333333333333334 -0.2846666666666666c-0.0013333333333333333 -0.006666666666666666 -0.005999999999999999 -0.011333333333333334 -0.011333333333333334 -0.011999999999999999Zm0.17666666666666667 -0.07533333333333334 -0.008666666666666666 0.0013333333333333333 -0.12333333333333332 0.062 -0.006666666666666666 0.006666666666666666 -0.002 0.007333333333333332 0.011999999999999999 0.2866666666666666 0.003333333333333333 0.008 0.005333333333333333 0.004666666666666666 0.134 0.062c0.008 0.0026666666666666666 0.015333333333333332 0 0.019333333333333334 -0.005333333333333333l0.0026666666666666666 -0.009333333333333332 -0.02266666666666667 -0.4093333333333333c-0.002 -0.008 -0.006666666666666666 -0.013333333333333332 -0.013333333333333332 -0.014666666666666665Zm-0.4766666666666666 0.0013333333333333333a0.015333333333333332 0.015333333333333332 0 0 0 -0.018 0.004l-0.004 0.009333333333333332 -0.02266666666666667 0.4093333333333333c0 0.008 0.004666666666666666 0.013333333333333332 0.011333333333333334 0.016l0.009999999999999998 -0.0013333333333333333 0.134 -0.062 0.006666666666666666 -0.005333333333333333 0.0026666666666666666 -0.007333333333333332 0.011333333333333334 -0.2866666666666666 -0.002 -0.008 -0.006666666666666666 -0.006666666666666666 -0.12266666666666666 -0.06133333333333333Z",
         strokeWidth: "0.6667"
       }
-    ), /* @__PURE__ */ import_react7.default.createElement(
+    ), /* @__PURE__ */ import_react9.default.createElement(
       "path",
       {
         fill: "#000000",
@@ -2275,7 +2423,7 @@ var SolanaIcon = ({ width = 16, height = 16, className, style }) => {
   );
 };
 var BaseIcon = ({ width = 24, height = 24, className, style }) => {
-  return /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2289,8 +2437,8 @@ var BaseIcon = ({ width = 24, height = 24, className, style }) => {
       className,
       style
     },
-    /* @__PURE__ */ import_react7.default.createElement("desc", null, "Brand Coinbase Streamline Icon: https://streamlinehq.com"),
-    /* @__PURE__ */ import_react7.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement("desc", null, "Brand Coinbase Streamline Icon: https://streamlinehq.com"),
+    /* @__PURE__ */ import_react9.default.createElement(
       "path",
       {
         d: "M12.95 22c-4.503 0 -8.445 -3.04 -9.61 -7.413 -1.165 -4.373 0.737 -8.988 4.638 -11.25a9.906 9.906 0 0 1 12.008 1.598l-3.335 3.367a5.185 5.185 0 0 0 -7.354 0.013 5.252 5.252 0 0 0 0 7.393 5.185 5.185 0 0 0 7.354 0.013L20 19.088A9.887 9.887 0 0 1 12.95 22z",
@@ -2310,7 +2458,7 @@ var getNetworkIcon = (network) => {
   return BaseIcon;
 };
 
-// src/react/components/V402Checkout.tsx
+// src/react/components/checkout/V402Checkout.tsx
 var { Title, Text } = import_antd.Typography;
 var notify = {
   success: (title, msg) => {
@@ -2348,14 +2496,14 @@ function V402Checkout({
     { autoSwitch: !!targetNetwork, switchOnMount: true }
   );
   const { isProcessing, setIsProcessing, result, setResult, error, setError } = usePayment();
-  const [paymentDetails, setPaymentDetails] = (0, import_react8.useState)(null);
+  const [paymentDetails, setPaymentDetails] = (0, import_react10.useState)(null);
   const handleDisconnect = () => {
     disconnect();
     setResult(null);
     setError(null);
     notify.info("Wallet Disconnected", "Your wallet has been disconnected successfully.");
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (paymentInfo && paymentInfo.length > 0) {
       const firstPayment = paymentInfo[0];
       const rawAmount = firstPayment.maxAmountRequired?.toString() || "0";
@@ -2370,7 +2518,7 @@ function V402Checkout({
       });
     }
   }, [paymentInfo]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (targetNetwork && !fetchingPaymentInfo && ensureNetwork) {
       ensureNetwork(targetNetwork).catch((err) => {
         console.error("Failed to ensure network:", err);
@@ -2386,7 +2534,7 @@ function V402Checkout({
     setError(null);
     setIsProcessing(true);
     try {
-      const response = await makePayment(networkType, checkoutId, endpoint, additionalParams);
+      const response = await makePayment(networkType, checkoutId, endpoint, additionalParams, address || void 0);
       const data = await response.json();
       setResult(data);
       notify.success("Payment Successful!", "Your payment has been processed successfully.");
@@ -2410,12 +2558,12 @@ function V402Checkout({
   const networkColor = paymentDetails ? getNetworkColor(paymentDetails.network) : "#8c8c8c";
   const loadingColor = "#8c8c8c";
   const hasInvalidCheckoutId = !fetchingPaymentInfo && (!paymentInfo || paymentInfo.length === 0);
-  return /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement(
     "div",
     {
       className: isModal ? "bg-white" : "h-screen bg-white flex items-center justify-center p-4 overflow-hidden"
     },
-    /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react10.default.createElement(
       "div",
       {
         className: "flex gap-4 items-center justify-center",
@@ -2425,7 +2573,7 @@ function V402Checkout({
           width: "100%"
         }
       },
-      /* @__PURE__ */ import_react8.default.createElement(
+      /* @__PURE__ */ import_react10.default.createElement(
         import_antd.Card,
         {
           className: "flex-shrink-0",
@@ -2441,7 +2589,7 @@ function V402Checkout({
           },
           styles: { body: { padding: isModal ? "0px" : "32px 24px" } }
         },
-        /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-3 mb-4" }, /* @__PURE__ */ import_react8.default.createElement(
+        /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-3 mb-4" }, /* @__PURE__ */ import_react10.default.createElement(
           "div",
           {
             className: "w-12 h-12 rounded-xl flex items-center justify-center",
@@ -2450,22 +2598,22 @@ function V402Checkout({
               transition: "background 0.3s ease"
             }
           },
-          hasInvalidCheckoutId ? /* @__PURE__ */ import_react8.default.createElement("span", { style: { fontSize: "20px", color: "white", fontWeight: "bold" } }, "\u2717") : paymentDetails && NetworkIcon ? /* @__PURE__ */ import_react8.default.createElement(NetworkIcon, { width: 24, height: 24 }) : /* @__PURE__ */ import_react8.default.createElement(import_icons.LoadingOutlined, { style: { fontSize: "20px", color: "white" }, spin: true })
-        ), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex-1" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react8.default.createElement(Title, { level: 4, style: { margin: 0, fontSize: "18px", fontWeight: 600 } }, title || "Echo Payment OnVoyage"), !hasInvalidCheckoutId && /* @__PURE__ */ import_react8.default.createElement(
+          hasInvalidCheckoutId ? /* @__PURE__ */ import_react10.default.createElement("span", { style: { fontSize: "20px", color: "white", fontWeight: "bold" } }, "\u2717") : paymentDetails && NetworkIcon ? /* @__PURE__ */ import_react10.default.createElement(NetworkIcon, { width: 24, height: 24 }) : /* @__PURE__ */ import_react10.default.createElement(import_icons.LoadingOutlined, { style: { fontSize: "20px", color: "white" }, spin: true })
+        ), /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex-1" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react10.default.createElement(Title, { level: 4, style: { margin: 0, fontSize: "18px", fontWeight: 600 } }, title || "Echo Payment OnVoyage"), !hasInvalidCheckoutId && /* @__PURE__ */ import_react10.default.createElement(
           import_antd.Tooltip,
           {
             title: tooltipText,
             placement: "top"
           },
-          /* @__PURE__ */ import_react8.default.createElement(
+          /* @__PURE__ */ import_react10.default.createElement(
             import_icons.InfoCircleOutlined,
             {
               style: { fontSize: "14px", color: "#8c8c8c", cursor: "help" }
             }
           )
-        )), /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, subtitle))),
-        /* @__PURE__ */ import_react8.default.createElement("div", { className: "text-center mb-5" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-50 mb-3" }, /* @__PURE__ */ import_react8.default.createElement(import_icons.LockOutlined, { style: { fontSize: "20px", color: "#595959" } })), /* @__PURE__ */ import_react8.default.createElement(Title, { level: 3, style: { margin: "0 0 6px 0", fontSize: "20px", fontWeight: 600 } }, "Payment Required"), /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Pay ", paymentDetails ? `$${paymentDetails.amount} ${paymentDetails.currency}` : "the required amount", " to access")),
-        hasInvalidCheckoutId && /* @__PURE__ */ import_react8.default.createElement("div", { className: "text-center py-6" }, /* @__PURE__ */ import_react8.default.createElement(
+        )), /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, subtitle))),
+        /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-center mb-5" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-50 mb-3" }, /* @__PURE__ */ import_react10.default.createElement(import_icons.LockOutlined, { style: { fontSize: "20px", color: "#595959" } })), /* @__PURE__ */ import_react10.default.createElement(Title, { level: 3, style: { margin: "0 0 6px 0", fontSize: "20px", fontWeight: 600 } }, "Payment Required"), /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Pay ", paymentDetails ? `$${paymentDetails.amount} ${paymentDetails.currency}` : "the required amount", " to access")),
+        hasInvalidCheckoutId && /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-center py-6" }, /* @__PURE__ */ import_react10.default.createElement(
           "div",
           {
             className: "inline-flex items-center justify-center w-16 h-16 rounded-full mb-4",
@@ -2474,15 +2622,15 @@ function V402Checkout({
               boxShadow: "0 4px 20px rgba(239, 68, 68, 0.3)"
             }
           },
-          /* @__PURE__ */ import_react8.default.createElement("span", { style: { fontSize: "32px", color: "white" } }, "!")
-        ), /* @__PURE__ */ import_react8.default.createElement(
+          /* @__PURE__ */ import_react10.default.createElement("span", { style: { fontSize: "32px", color: "white" } }, "!")
+        ), /* @__PURE__ */ import_react10.default.createElement(
           Title,
           {
             level: 4,
             style: { margin: "0 0 12px 0", fontSize: "18px", fontWeight: 600, color: "#262626" }
           },
           "Invalid Checkout ID"
-        ), /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c", display: "block", marginBottom: "16px" } }, "The checkout ID you provided is invalid or has expired."), /* @__PURE__ */ import_react8.default.createElement(
+        ), /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c", display: "block", marginBottom: "16px" } }, "The checkout ID you provided is invalid or has expired."), /* @__PURE__ */ import_react10.default.createElement(
           "div",
           {
             style: {
@@ -2493,33 +2641,33 @@ function V402Checkout({
               marginTop: "16px"
             }
           },
-          /* @__PURE__ */ import_react8.default.createElement(Text, { style: {
+          /* @__PURE__ */ import_react10.default.createElement(Text, { style: {
             fontSize: "13px",
             color: "#dc2626",
             lineHeight: "1.6",
             fontWeight: 500
           } }, "Failed to load payment information. Please check your checkout ID.")
         )),
-        !hasInvalidCheckoutId && fetchingPaymentInfo && /* @__PURE__ */ import_react8.default.createElement("div", { className: "text-center py-6" }, /* @__PURE__ */ import_react8.default.createElement(Text, { style: { color: "#8c8c8c" } }, "Loading payment information...")),
-        !hasInvalidCheckoutId && !fetchingPaymentInfo && !address && /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement(WalletConnect, { supportedNetworks })),
-        !hasInvalidCheckoutId && address && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
+        !hasInvalidCheckoutId && fetchingPaymentInfo && /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-center py-6" }, /* @__PURE__ */ import_react10.default.createElement(Text, { style: { color: "#8c8c8c" } }, "Loading payment information...")),
+        !hasInvalidCheckoutId && !fetchingPaymentInfo && !address && /* @__PURE__ */ import_react10.default.createElement("div", null, /* @__PURE__ */ import_react10.default.createElement(WalletConnect, { supportedNetworks })),
+        !hasInvalidCheckoutId && address && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(
           "div",
           {
             className: "bg-gray-50 rounded-lg p-3 mb-4",
             style: { border: "1px solid #f0f0f0" }
           },
-          /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-3 flex-1" }, /* @__PURE__ */ import_react8.default.createElement(
+          /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-3 flex-1" }, /* @__PURE__ */ import_react10.default.createElement(
             "div",
             {
               className: "w-10 h-10 rounded-full bg-black flex items-center justify-center text-white text-sm font-semibold"
             },
             address.slice(0, 2).toUpperCase()
-          ), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react8.default.createElement(Text, { style: {
+          ), /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react10.default.createElement(Text, { style: {
             display: "block",
             fontSize: "12px",
             color: "#8c8c8c",
             marginBottom: "2px"
-          } }, "Connected Wallet"), /* @__PURE__ */ import_react8.default.createElement(
+          } }, "Connected Wallet"), /* @__PURE__ */ import_react10.default.createElement(
             Text,
             {
               style: {
@@ -2529,17 +2677,17 @@ function V402Checkout({
               }
             },
             formatAddress(address)
-          ))), /* @__PURE__ */ import_react8.default.createElement(
+          ))), /* @__PURE__ */ import_react10.default.createElement(
             import_antd.Button,
             {
               type: "text",
               size: "small",
-              icon: /* @__PURE__ */ import_react8.default.createElement(import_icons.DisconnectOutlined, null),
+              icon: /* @__PURE__ */ import_react10.default.createElement(import_icons.DisconnectOutlined, null),
               onClick: handleDisconnect,
               style: { color: "#ff4d4f" }
             }
           ))
-        ), paymentDetails && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bg-gray-50 rounded-lg p-3 mb-4", style: { border: "1px solid #f0f0f0" } }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Payment Amount"), /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "18px", fontWeight: 600 } }, "$", paymentDetails.amount)), /* @__PURE__ */ import_react8.default.createElement(import_antd.Divider, { style: { margin: "6px 0" } }), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Currency"), /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "14px", fontWeight: 500 } }, paymentDetails.currency)), /* @__PURE__ */ import_react8.default.createElement(import_antd.Divider, { style: { margin: "6px 0" } }), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Network"), /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "14px", fontWeight: 500 } }, paymentDetails.network)), /* @__PURE__ */ import_react8.default.createElement(import_antd.Divider, { style: { margin: "6px 0" } }), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex justify-between items-start" }, /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Wallet Address"), /* @__PURE__ */ import_react8.default.createElement(Text, { style: {
+        ), paymentDetails && /* @__PURE__ */ import_react10.default.createElement("div", { className: "bg-gray-50 rounded-lg p-3 mb-4", style: { border: "1px solid #f0f0f0" } }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Payment Amount"), /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "18px", fontWeight: 600 } }, "$", paymentDetails.amount)), /* @__PURE__ */ import_react10.default.createElement(import_antd.Divider, { style: { margin: "6px 0" } }), /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Currency"), /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "14px", fontWeight: 500 } }, paymentDetails.currency)), /* @__PURE__ */ import_react10.default.createElement(import_antd.Divider, { style: { margin: "6px 0" } }), /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Network"), /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "14px", fontWeight: 500 } }, paymentDetails.network)), /* @__PURE__ */ import_react10.default.createElement(import_antd.Divider, { style: { margin: "6px 0" } }), /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex justify-between items-start" }, /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Wallet Address"), /* @__PURE__ */ import_react10.default.createElement(Text, { style: {
           fontSize: "11px",
           fontWeight: 500,
           fontFamily: "Monaco, monospace",
@@ -2547,15 +2695,15 @@ function V402Checkout({
           textAlign: "right",
           maxWidth: "60%",
           lineHeight: 1.4
-        } }, address))), /* @__PURE__ */ import_react8.default.createElement(
+        } }, address))), /* @__PURE__ */ import_react10.default.createElement(
           "div",
           {
             className: "flex items-center justify-center gap-2 mb-3 p-2 rounded-lg",
             style: { background: "#f6ffed", border: "1px solid #d9f7be" }
           },
-          /* @__PURE__ */ import_react8.default.createElement(import_icons.SafetyOutlined, { style: { color: "#52c41a", fontSize: "13px" } }),
-          /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "12px", color: "#52c41a", fontWeight: 500 } }, "Secure payment powered by v402pay")
-        ), /* @__PURE__ */ import_react8.default.createElement(
+          /* @__PURE__ */ import_react10.default.createElement(import_icons.SafetyOutlined, { style: { color: "#52c41a", fontSize: "13px" } }),
+          /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "12px", color: "#52c41a", fontWeight: 500 } }, "Secure payment powered by v402pay")
+        ), /* @__PURE__ */ import_react10.default.createElement(
           import_antd.Button,
           {
             type: "primary",
@@ -2577,7 +2725,7 @@ function V402Checkout({
             }
           },
           isProcessing ? "Processing..." : !paymentDetails ? "Loading..." : `Pay $${paymentDetails.amount} ${paymentDetails.currency}`
-        ), /* @__PURE__ */ import_react8.default.createElement("div", { className: "text-center" }, /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Don't have USDC?", " "), /* @__PURE__ */ import_react8.default.createElement(
+        ), /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-center" }, /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "13px", color: "#8c8c8c" } }, "Don't have USDC?", " "), /* @__PURE__ */ import_react10.default.createElement(
           "a",
           {
             href: "https://faucet.circle.com/",
@@ -2586,26 +2734,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__ */ import_react8.default.createElement(import_icons.LinkOutlined, { style: { fontSize: "12px" } })
-        )), isModal && result && /* @__PURE__ */ import_react8.default.createElement(
+          /* @__PURE__ */ import_react10.default.createElement(import_icons.LinkOutlined, { style: { fontSize: "12px" } })
+        )), isModal && result && /* @__PURE__ */ import_react10.default.createElement(
           "div",
           {
             className: "mt-4 p-4 rounded-lg",
             style: { background: "#f6ffed", border: "1px solid #b7eb8f" }
           },
-          /* @__PURE__ */ import_react8.default.createElement("div", { className: "text-center" }, /* @__PURE__ */ import_react8.default.createElement("span", { style: { fontSize: "20px" } }, "\u2713"), /* @__PURE__ */ import_react8.default.createElement(Text, { style: {
+          /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-center" }, /* @__PURE__ */ import_react10.default.createElement("span", { style: { fontSize: "20px" } }, "\u2713"), /* @__PURE__ */ import_react10.default.createElement(Text, { style: {
             fontSize: "14px",
             color: "#52c41a",
             fontWeight: 600,
             marginLeft: "8px"
           } }, "Payment Successful!"))
-        ), isModal && error && /* @__PURE__ */ import_react8.default.createElement(
+        ), isModal && error && /* @__PURE__ */ import_react10.default.createElement(
           "div",
           {
             className: "mt-4 p-4 rounded-lg",
             style: { background: "#fff2f0", border: "1px solid #ffccc7" }
           },
-          /* @__PURE__ */ import_react8.default.createElement("div", { className: "text-center mb-3" }, /* @__PURE__ */ import_react8.default.createElement("span", { style: { fontSize: "20px" } }, "\u2717"), /* @__PURE__ */ import_react8.default.createElement(Text, { style: {
+          /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-center mb-3" }, /* @__PURE__ */ import_react10.default.createElement("span", { style: { fontSize: "20px" } }, "\u2717"), /* @__PURE__ */ import_react10.default.createElement(Text, { style: {
             fontSize: "14px",
             color: "#ff4d4f",
             fontWeight: 600,
@@ -2613,7 +2761,7 @@ function V402Checkout({
             display: "block",
             marginTop: "4px"
           } }, "Payment Failed")),
-          /* @__PURE__ */ import_react8.default.createElement(Text, { style: {
+          /* @__PURE__ */ import_react10.default.createElement(Text, { style: {
             fontSize: "13px",
             color: "#ff4d4f",
             display: "block",
@@ -2621,11 +2769,11 @@ function V402Checkout({
           } }, error)
         ))
       ),
-      !isModal && (isProcessing || result || error) && /* @__PURE__ */ import_react8.default.createElement(
+      !isModal && (isProcessing || result || error) && /* @__PURE__ */ import_react10.default.createElement(
         import_antd.Card,
         {
-          title: /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-2" }, isProcessing && !result && !error ? /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(import_icons.LoadingOutlined, { style: { color: "#14b8a6", fontSize: "16px" } }), /* @__PURE__ */ import_react8.default.createElement(Text, { strong: true, style: { fontSize: "16px", color: "#262626" } }, "Processing Payment")) : result ? /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement("span", { style: { color: "#52c41a", fontSize: "18px" } }, "\u2713"), /* @__PURE__ */ import_react8.default.createElement(Text, { strong: true, style: { fontSize: "16px", color: "#262626" } }, "Payment Successful")) : /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement("span", { style: { color: "#ff4d4f", fontSize: "18px" } }, "\u2717"), /* @__PURE__ */ import_react8.default.createElement(Text, { strong: true, style: { fontSize: "16px", color: "#262626" } }, "Payment Failed"))),
-          extra: !isProcessing && /* @__PURE__ */ import_react8.default.createElement(
+          title: /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-2" }, isProcessing && !result && !error ? /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(import_icons.LoadingOutlined, { style: { color: "#14b8a6", fontSize: "16px" } }), /* @__PURE__ */ import_react10.default.createElement(Text, { strong: true, style: { fontSize: "16px", color: "#262626" } }, "Processing Payment")) : result ? /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement("span", { style: { color: "#52c41a", fontSize: "18px" } }, "\u2713"), /* @__PURE__ */ import_react10.default.createElement(Text, { strong: true, style: { fontSize: "16px", color: "#262626" } }, "Payment Successful")) : /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement("span", { style: { color: "#ff4d4f", fontSize: "18px" } }, "\u2717"), /* @__PURE__ */ import_react10.default.createElement(Text, { strong: true, style: { fontSize: "16px", color: "#262626" } }, "Payment Failed"))),
+          extra: !isProcessing && /* @__PURE__ */ import_react10.default.createElement(
             import_antd.Button,
             {
               type: "text",
@@ -2653,7 +2801,7 @@ function V402Checkout({
             }
           }
         },
-        isProcessing && !result && !error && /* @__PURE__ */ import_react8.default.createElement("div", { className: "text-center py-10" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "relative inline-block" }, /* @__PURE__ */ import_react8.default.createElement(
+        isProcessing && !result && !error && /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-center py-10" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "relative inline-block" }, /* @__PURE__ */ import_react10.default.createElement(
           "div",
           {
             className: "absolute inset-0 rounded-full blur-xl opacity-40",
@@ -2662,12 +2810,12 @@ function V402Checkout({
               animation: "pulse 2s ease-in-out infinite"
             }
           }
-        ), /* @__PURE__ */ import_react8.default.createElement(
+        ), /* @__PURE__ */ import_react10.default.createElement(
           import_antd.Spin,
           {
-            indicator: /* @__PURE__ */ import_react8.default.createElement(import_icons.LoadingOutlined, { style: { fontSize: 56, color: "#14b8a6" } })
+            indicator: /* @__PURE__ */ import_react10.default.createElement(import_icons.LoadingOutlined, { style: { fontSize: 56, color: "#14b8a6" } })
           }
-        )), /* @__PURE__ */ import_react8.default.createElement("div", { className: "mt-6" }, /* @__PURE__ */ import_react8.default.createElement(Text, { strong: true, style: { fontSize: "18px", color: "#262626", letterSpacing: "-0.02em" } }, "Verifying Payment")), /* @__PURE__ */ import_react8.default.createElement("div", { className: "mt-2 mb-6" }, /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c", lineHeight: "1.6" } }, "Please wait while we confirm your transaction")), /* @__PURE__ */ import_react8.default.createElement(
+        )), /* @__PURE__ */ import_react10.default.createElement("div", { className: "mt-6" }, /* @__PURE__ */ import_react10.default.createElement(Text, { strong: true, style: { fontSize: "18px", color: "#262626", letterSpacing: "-0.02em" } }, "Verifying Payment")), /* @__PURE__ */ import_react10.default.createElement("div", { className: "mt-2 mb-6" }, /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c", lineHeight: "1.6" } }, "Please wait while we confirm your transaction")), /* @__PURE__ */ import_react10.default.createElement(
           "div",
           {
             className: "mt-4 p-4 rounded-xl",
@@ -2676,9 +2824,9 @@ function V402Checkout({
               border: "1px solid #ccfbf1"
             }
           },
-          /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center justify-center gap-2" }, /* @__PURE__ */ import_react8.default.createElement("span", { style: { fontSize: "16px" } }, "\u23F1\uFE0F"), /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "13px", color: "#0f766e", fontWeight: 500 } }, "This may take a few moments"))
+          /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center justify-center gap-2" }, /* @__PURE__ */ import_react10.default.createElement("span", { style: { fontSize: "16px" } }, "\u23F1\uFE0F"), /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "13px", color: "#0f766e", fontWeight: 500 } }, "This may take a few moments"))
         )),
-        result && /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("div", { className: "text-center mb-6" }, /* @__PURE__ */ import_react8.default.createElement(
+        result && /* @__PURE__ */ import_react10.default.createElement("div", null, /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-center mb-6" }, /* @__PURE__ */ import_react10.default.createElement(
           "div",
           {
             className: "inline-flex items-center justify-center w-16 h-16 rounded-full mb-4",
@@ -2687,13 +2835,13 @@ function V402Checkout({
               boxShadow: "0 4px 20px rgba(16, 185, 129, 0.3)"
             }
           },
-          /* @__PURE__ */ import_react8.default.createElement("span", { style: { fontSize: "32px", color: "white" } }, "\u2713")
-        ), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement(Text, { strong: true, style: {
+          /* @__PURE__ */ import_react10.default.createElement("span", { style: { fontSize: "32px", color: "white" } }, "\u2713")
+        ), /* @__PURE__ */ import_react10.default.createElement("div", null, /* @__PURE__ */ import_react10.default.createElement(Text, { strong: true, style: {
           fontSize: "20px",
           color: "#262626",
           display: "block",
           marginBottom: "8px"
-        } }, "Payment Successful!"), /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c" } }, "Your transaction has been confirmed"))), /* @__PURE__ */ import_react8.default.createElement(import_antd.Divider, { style: { margin: "20px 0", borderColor: "#f0f0f0" } }, /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "12px", color: "#8c8c8c", fontWeight: 500 } }, "RESPONSE DATA")), /* @__PURE__ */ import_react8.default.createElement(
+        } }, "Payment Successful!"), /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c" } }, "Your transaction has been confirmed"))), /* @__PURE__ */ import_react10.default.createElement(import_antd.Divider, { style: { margin: "20px 0", borderColor: "#f0f0f0" } }, /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "12px", color: "#8c8c8c", fontWeight: 500 } }, "RESPONSE DATA")), /* @__PURE__ */ import_react10.default.createElement(
           "pre",
           {
             style: {
@@ -2713,7 +2861,7 @@ function V402Checkout({
           },
           JSON.stringify(result, null, 2)
         )),
-        error && /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("div", { className: "text-center mb-6" }, /* @__PURE__ */ import_react8.default.createElement(
+        error && /* @__PURE__ */ import_react10.default.createElement("div", null, /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-center mb-6" }, /* @__PURE__ */ import_react10.default.createElement(
           "div",
           {
             className: "inline-flex items-center justify-center w-16 h-16 rounded-full mb-4",
@@ -2722,13 +2870,13 @@ function V402Checkout({
               boxShadow: "0 4px 20px rgba(239, 68, 68, 0.3)"
             }
           },
-          /* @__PURE__ */ import_react8.default.createElement("span", { style: { fontSize: "32px", color: "white" } }, "\u2717")
-        ), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement(Text, { strong: true, style: {
+          /* @__PURE__ */ import_react10.default.createElement("span", { style: { fontSize: "32px", color: "white" } }, "\u2717")
+        ), /* @__PURE__ */ import_react10.default.createElement("div", null, /* @__PURE__ */ import_react10.default.createElement(Text, { strong: true, style: {
           fontSize: "20px",
           color: "#262626",
           display: "block",
           marginBottom: "8px"
-        } }, "Payment Failed"), /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c" } }, "Something went wrong with your transaction"))), /* @__PURE__ */ import_react8.default.createElement(import_antd.Divider, { style: { margin: "20px 0", borderColor: "#f0f0f0" } }, /* @__PURE__ */ import_react8.default.createElement(Text, { style: { fontSize: "12px", color: "#8c8c8c", fontWeight: 500 } }, "ERROR DETAILS")), /* @__PURE__ */ import_react8.default.createElement(
+        } }, "Payment Failed"), /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "14px", color: "#8c8c8c" } }, "Something went wrong with your transaction"))), /* @__PURE__ */ import_react10.default.createElement(import_antd.Divider, { style: { margin: "20px 0", borderColor: "#f0f0f0" } }, /* @__PURE__ */ import_react10.default.createElement(Text, { style: { fontSize: "12px", color: "#8c8c8c", fontWeight: 500 } }, "ERROR DETAILS")), /* @__PURE__ */ import_react10.default.createElement(
           "div",
           {
             style: {
@@ -2738,13 +2886,13 @@ function V402Checkout({
               border: "1px solid #fee2e2"
             }
           },
-          /* @__PURE__ */ import_react8.default.createElement(Text, { style: {
+          /* @__PURE__ */ import_react10.default.createElement(Text, { style: {
             fontSize: "14px",
             color: "#dc2626",
             lineHeight: "1.6",
             fontWeight: 500
           } }, error)
-        ), /* @__PURE__ */ import_react8.default.createElement("div", { className: "mt-4 text-center" }, /* @__PURE__ */ import_react8.default.createElement(
+        ), /* @__PURE__ */ import_react10.default.createElement("div", { className: "mt-4 text-center" }, /* @__PURE__ */ import_react10.default.createElement(
           import_antd.Button,
           {
             size: "large",
@@ -2765,7 +2913,7 @@ function V402Checkout({
         )))
       )
     ),
-    /* @__PURE__ */ import_react8.default.createElement("style", { dangerouslySetInnerHTML: {
+    /* @__PURE__ */ import_react10.default.createElement("style", { dangerouslySetInnerHTML: {
       __html: `
                     @keyframes slideInRight {
                         from {
@@ -2792,14 +2940,699 @@ function V402Checkout({
     } })
   );
 }
+
+// src/react/components/checkout/V402CheckoutV2.tsx
+var import_react15 = __toESM(require("react"));
+init_common();
+
+// src/react/styles/animations.tsx
+var import_react11 = __toESM(require("react"));
+var checkoutAnimations = `
+    @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+    }
+    
+    @keyframes receiptShake {
+        0%, 100% { transform: rotate(-0.3deg); }
+        50% { transform: rotate(0.3deg); }
+    }
+    
+    @keyframes slideInRight {
+        from {
+            opacity: 0;
+            transform: translateX(100px);
+        }
+        to {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+    
+    @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.4; }
+    }
+`;
+var AnimationStyles = () => /* @__PURE__ */ import_react11.default.createElement("style", { dangerouslySetInnerHTML: { __html: checkoutAnimations } });
+
+// src/react/components/checkout/Receipt.tsx
+var import_react12 = __toESM(require("react"));
+var Receipt = ({
+  isLoading,
+  isVisible,
+  result,
+  error,
+  paymentDetails,
+  address,
+  onClose,
+  primaryColor,
+  receiptTitle,
+  tempReceiptId
+}) => {
+  const [animationState, setAnimationState] = (0, import_react12.useState)("hidden");
+  (0, import_react12.useEffect)(() => {
+    if (isLoading) {
+      setAnimationState("printing");
+    } else if (isVisible && (result || error)) {
+      setAnimationState("visible");
+      const timer = setTimeout(() => setAnimationState("bounce"), 50);
+      return () => clearTimeout(timer);
+    } else if (!isVisible) {
+      setAnimationState("hidden");
+    }
+  }, [isLoading, isVisible, result, error]);
+  (0, import_react12.useEffect)(() => {
+    if (animationState === "bounce") {
+      const timer = setTimeout(() => setAnimationState("visible"), 150);
+      return () => clearTimeout(timer);
+    }
+  }, [animationState]);
+  const now = /* @__PURE__ */ new Date();
+  const dateStr = `${String(now.getMonth() + 1).padStart(2, "0")}/${String(now.getDate()).padStart(2, "0")}/${String(now.getFullYear()).slice(-2)}`;
+  const timeStr = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
+  const receiptId = result?.transactionHash ? result.transactionHash.slice(-8).toUpperCase() : tempReceiptId;
+  const getAnimationStyles = () => {
+    const baseTransition = animationState === "bounce" ? "all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1)" : "all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)";
+    switch (animationState) {
+      case "hidden":
+        return {
+          opacity: 0,
+          transform: "translateY(50px)",
+          marginBottom: 0,
+          transition: baseTransition
+        };
+      case "printing":
+        return {
+          opacity: 1,
+          transform: "translateY(0)",
+          marginBottom: "-4px",
+          // 负边距让小票贴着机器，还没撕开的感觉
+          animation: "receiptShake 0.12s ease-in-out infinite",
+          transition: baseTransition
+        };
+      case "visible":
+        return {
+          opacity: 1,
+          transform: "translateY(0)",
+          marginBottom: "8px",
+          transition: baseTransition
+        };
+      case "bounce":
+        return {
+          opacity: 1,
+          transform: "translateY(-8px)",
+          marginBottom: "8px",
+          transition: baseTransition
+        };
+      default:
+        return {};
+    }
+  };
+  const getContentStyles = () => {
+    const baseTransition = "all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)";
+    switch (animationState) {
+      case "hidden":
+        return {
+          maxHeight: 0,
+          overflow: "hidden",
+          transition: baseTransition
+        };
+      case "printing":
+        return {
+          maxHeight: "80px",
+          overflow: "hidden",
+          transition: baseTransition
+        };
+      case "visible":
+      case "bounce":
+        return {
+          maxHeight: "600px",
+          overflow: "visible",
+          transition: baseTransition
+        };
+      default:
+        return {};
+    }
+  };
+  if (animationState === "hidden" && !isLoading) return null;
+  return /* @__PURE__ */ import_react12.default.createElement(
+    "div",
+    {
+      className: "w-full flex justify-center",
+      style: getAnimationStyles()
+    },
+    /* @__PURE__ */ import_react12.default.createElement(
+      "div",
+      {
+        className: "relative bg-white shadow-2xl",
+        style: {
+          width: "75%",
+          maxWidth: "280px",
+          backgroundImage: `
+                        repeating-linear-gradient(
+                            0deg,
+                            transparent,
+                            transparent 1px,
+                            rgba(0,0,0,0.02) 1px,
+                            rgba(0,0,0,0.02) 2px
+                        )
+                    `
+        }
+      },
+      /* @__PURE__ */ import_react12.default.createElement(
+        "div",
+        {
+          className: "absolute top-0 left-0 right-0",
+          style: {
+            height: "8px",
+            transform: "translateY(-100%)",
+            background: `radial-gradient(circle at 50% 100%, white 5px, transparent 5px)`,
+            backgroundSize: "12px 8px",
+            backgroundPosition: "6px 0",
+            backgroundRepeat: "repeat-x"
+          }
+        }
+      ),
+      /* @__PURE__ */ import_react12.default.createElement(
+        "div",
+        {
+          className: "absolute left-0 right-0 bg-white",
+          style: {
+            height: "4px",
+            top: "-4px"
+          }
+        }
+      ),
+      !isLoading && /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(
+        "div",
+        {
+          className: "absolute bottom-0 left-0 right-0",
+          style: {
+            height: "8px",
+            transform: "translateY(100%)",
+            background: `radial-gradient(circle at 50% 0%, white 5px, transparent 5px)`,
+            backgroundSize: "12px 8px",
+            backgroundPosition: "6px 0",
+            backgroundRepeat: "repeat-x"
+          }
+        }
+      ), /* @__PURE__ */ import_react12.default.createElement(
+        "div",
+        {
+          className: "absolute left-0 right-0 bg-white",
+          style: {
+            height: "4px",
+            bottom: "-4px"
+          }
+        }
+      )),
+      !isLoading && (result || error) && /* @__PURE__ */ import_react12.default.createElement(
+        "button",
+        {
+          onClick: onClose,
+          className: "absolute top-3 right-3 text-gray-300 hover:text-gray-500 transition-colors bg-transparent border-none outline-none p-0 cursor-pointer",
+          style: { background: "none", border: "none" }
+        },
+        /* @__PURE__ */ import_react12.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ import_react12.default.createElement("path", { d: "M18 6L6 18M6 6l12 12" }))
+      ),
+      /* @__PURE__ */ import_react12.default.createElement("div", { className: "p-4 font-mono text-sm", style: getContentStyles() }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "text-center mb-3" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "text-base font-bold tracking-wider text-gray-800" }, receiptTitle), /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex justify-between text-xs text-gray-500 mt-1" }, /* @__PURE__ */ import_react12.default.createElement("span", null, "ID: ", receiptId), /* @__PURE__ */ import_react12.default.createElement("span", null, dateStr, " ", timeStr))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "border-t border-dashed border-gray-300 my-2" }), /* @__PURE__ */ import_react12.default.createElement(
+        "div",
+        {
+          className: "max-h-64 overflow-y-auto pr-1",
+          style: {
+            scrollbarWidth: "thin",
+            scrollbarColor: "#d1d5db transparent"
+          }
+        },
+        isLoading ? /* @__PURE__ */ import_react12.default.createElement(LoadingContent, { primaryColor }) : error ? /* @__PURE__ */ import_react12.default.createElement(ErrorContent, { error }) : result ? /* @__PURE__ */ import_react12.default.createElement(
+          SuccessContent,
+          {
+            result,
+            paymentDetails,
+            address,
+            primaryColor
+          }
+        ) : null
+      ), /* @__PURE__ */ import_react12.default.createElement("div", { className: "border-t border-dashed border-gray-300 my-2" }), /* @__PURE__ */ import_react12.default.createElement(Barcode, null), /* @__PURE__ */ import_react12.default.createElement("div", { className: "text-center text-xs text-gray-400 mt-1 tracking-widest" }, "POWERED BY", " ", /* @__PURE__ */ import_react12.default.createElement(
+        "a",
+        {
+          href: "https://v402pay.onvoyage.ai",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "text-gray-500 hover:text-gray-700 underline transition-colors"
+        },
+        "V402PAY"
+      )))
+    )
+  );
+};
+var LoadingContent = ({ primaryColor }) => /* @__PURE__ */ import_react12.default.createElement("div", { className: "text-center py-4" }, /* @__PURE__ */ import_react12.default.createElement(
+  "div",
+  {
+    className: "inline-block w-8 h-8 border-2 border-gray-200 rounded-full mb-2",
+    style: {
+      borderTopColor: primaryColor,
+      animation: "spin 0.8s linear infinite"
+    }
+  }
+), /* @__PURE__ */ import_react12.default.createElement("div", { className: "text-gray-700 font-semibold text-sm" }, "Processing..."), /* @__PURE__ */ import_react12.default.createElement("div", { className: "text-gray-400 text-xs mt-1" }, "Please wait"));
+var ErrorContent = ({ error }) => /* @__PURE__ */ import_react12.default.createElement("div", { className: "text-center py-3" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "text-red-500 text-2xl mb-2" }, "\u2717"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "text-red-600 font-semibold mb-1 text-sm" }, "FAILED"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "text-red-500 text-xs break-words px-2" }, error));
+var SuccessContent = ({
+  result,
+  paymentDetails,
+  address,
+  primaryColor
+}) => {
+  const [copied, setCopied] = (0, import_react12.useState)(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(result, null, 2));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+  return /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("div", { className: "text-center mb-2" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "text-2xl mb-1", style: { color: primaryColor } }, "\u2713"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "font-semibold text-sm", style: { color: primaryColor } }, "SUCCESS")), /* @__PURE__ */ import_react12.default.createElement("div", { className: "space-y-1 text-xs" }, paymentDetails && /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "text-gray-500" }, "Amount:"), /* @__PURE__ */ import_react12.default.createElement("span", { className: "font-semibold" }, "$", paymentDetails.amount, " ", paymentDetails.currency)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "text-gray-500" }, "Network:"), /* @__PURE__ */ import_react12.default.createElement("span", { className: "font-semibold" }, paymentDetails.network))), address && /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "text-gray-500" }, "From:"), /* @__PURE__ */ import_react12.default.createElement("span", { className: "font-semibold" }, formatAddress(address))), result.transactionHash && /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "text-gray-500" }, "TX:"), /* @__PURE__ */ import_react12.default.createElement("span", { className: "font-semibold" }, formatAddress(result.transactionHash)))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "border-t border-dashed border-gray-300 my-2" }), /* @__PURE__ */ import_react12.default.createElement("div", { className: "text-xs" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex justify-between items-center mb-1" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "text-gray-500" }, "Response:"), /* @__PURE__ */ import_react12.default.createElement(
+    "button",
+    {
+      onClick: handleCopy,
+      className: "text-gray-300 hover:text-gray-500 transition-colors flex items-center gap-1 bg-transparent border-none outline-none p-0 cursor-pointer",
+      style: { background: "none", border: "none" }
+    },
+    copied ? /* @__PURE__ */ import_react12.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ import_react12.default.createElement("path", { d: "M20 6L9 17l-5-5" })) : /* @__PURE__ */ import_react12.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }, /* @__PURE__ */ import_react12.default.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }), /* @__PURE__ */ import_react12.default.createElement("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" }))
+  )), /* @__PURE__ */ import_react12.default.createElement(
+    "pre",
+    {
+      className: "bg-gray-50 p-2 rounded text-xs overflow-auto whitespace-pre-wrap break-words",
+      style: { maxHeight: "80px", fontSize: "10px" }
+    },
+    JSON.stringify(result, null, 2)
+  )));
+};
+var Barcode = () => {
+  const pattern = [2, 1, 2, 1, 1, 2, 1, 2, 1, 1, 2, 1, 2, 1, 1, 2, 1, 2, 1, 1];
+  const heights = [10, 12, 11, 13, 10, 14, 11, 12, 13, 10, 11, 14, 12, 10, 13, 11, 12, 14, 10, 11];
+  return /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex items-center justify-center gap-0.5 h-4 opacity-60" }, pattern.map((width, i) => /* @__PURE__ */ import_react12.default.createElement(
+    "div",
+    {
+      key: i,
+      className: "bg-gray-800",
+      style: {
+        width: `${width}px`,
+        height: `${heights[i]}px`
+      }
+    }
+  )));
+};
+
+// src/react/components/checkout/TerminalScreen.tsx
+var import_react13 = __toESM(require("react"));
+var TerminalScreen = ({
+  title,
+  tooltipText,
+  hasInvalidCheckoutId,
+  fetchingPaymentInfo,
+  address,
+  paymentDetails,
+  screenText,
+  supportedNetworks
+}) => {
+  return /* @__PURE__ */ import_react13.default.createElement(
+    "div",
+    {
+      className: "rounded-xl p-3 mb-3",
+      style: {
+        backgroundColor: "#0a1a0a",
+        boxShadow: "inset 0 3px 16px rgba(0,0,0,0.5)",
+        border: "3px solid rgba(0,0,0,0.3)"
+      }
+    },
+    /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex items-center gap-1.5 flex-1 min-w-0" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "w-2.5 h-2.5 rounded border border-green-700 flex-shrink-0" }), title ? /* @__PURE__ */ import_react13.default.createElement(
+      "span",
+      {
+        className: "text-xs font-mono",
+        style: { color: "#22c55e80" },
+        title
+      },
+      title.length > 26 ? `${title.slice(0, 13)}...${title.slice(-13)}` : title
+    ) : /* @__PURE__ */ import_react13.default.createElement("span", { className: "text-xs font-mono", style: { color: "#22c55e80" } }, "CHECKOUT")), /* @__PURE__ */ import_react13.default.createElement(
+      "div",
+      {
+        className: "flex gap-0.5 flex-shrink-0 cursor-help",
+        title: tooltipText
+      },
+      /* @__PURE__ */ import_react13.default.createElement(
+        "div",
+        {
+          className: "w-1 h-1.5 rounded-sm",
+          style: { backgroundColor: address ? "#22c55e80" : "#22c55e30" }
+        }
+      ),
+      /* @__PURE__ */ import_react13.default.createElement(
+        "div",
+        {
+          className: "w-1 h-1.5 rounded-sm",
+          style: { backgroundColor: address ? "#22c55e80" : "#22c55e30" }
+        }
+      ),
+      /* @__PURE__ */ import_react13.default.createElement("div", { className: "w-1 h-1.5 rounded-sm", style: { backgroundColor: "#22c55e80" } })
+    )),
+    /* @__PURE__ */ import_react13.default.createElement("div", { className: "min-h-[120px]" }, hasInvalidCheckoutId ? /* @__PURE__ */ import_react13.default.createElement(InvalidIdContent, null) : fetchingPaymentInfo ? /* @__PURE__ */ import_react13.default.createElement(LoadingContent2, null) : !address ? /* @__PURE__ */ import_react13.default.createElement(ConnectWalletContent, { supportedNetworks }) : /* @__PURE__ */ import_react13.default.createElement(
+      PaymentInfoContent,
+      {
+        screenText,
+        paymentDetails,
+        address
+      }
+    ))
+  );
+};
+var InvalidIdContent = () => /* @__PURE__ */ import_react13.default.createElement("div", { className: "text-center py-3" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "text-red-500 text-xl mb-1" }, "\u2717"), /* @__PURE__ */ import_react13.default.createElement("div", { className: "text-red-500 font-mono text-sm mb-1" }, "INVALID ID"), /* @__PURE__ */ import_react13.default.createElement("div", { className: "text-red-400 font-mono text-xs" }, "Check your checkout ID"));
+var LoadingContent2 = () => /* @__PURE__ */ import_react13.default.createElement("div", { className: "text-center py-4" }, /* @__PURE__ */ import_react13.default.createElement(
+  "div",
+  {
+    className: "inline-block w-5 h-5 border-2 rounded-full mb-2",
+    style: {
+      borderColor: "#22c55e40",
+      borderTopColor: "#22c55e",
+      animation: "spin 1s linear infinite"
+    }
+  }
+), /* @__PURE__ */ import_react13.default.createElement("div", { className: "font-mono text-sm", style: { color: "#22c55e" } }, "LOADING..."));
+var ConnectWalletContent = ({ supportedNetworks }) => /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement(
+  "div",
+  {
+    className: "font-mono text-base mb-3 tracking-wider",
+    style: { color: "#f97316", textShadow: "0 0 10px #f9731640" }
+  },
+  "CONNECT WALLET..."
+), /* @__PURE__ */ import_react13.default.createElement(WalletConnect, { supportedNetworks, showSwitchWallet: false }));
+var PaymentInfoContent = ({
+  screenText,
+  paymentDetails,
+  address
+}) => /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement(
+  "div",
+  {
+    className: "font-mono text-base mb-3 tracking-wider",
+    style: { color: "#f97316", textShadow: "0 0 10px #f9731640" }
+  },
+  screenText
+), paymentDetails && /* @__PURE__ */ import_react13.default.createElement("div", { className: "text-xs font-mono" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "grid grid-cols-2 gap-1.5 mb-1.5" }, /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("div", { style: { color: "#22c55e60" } }, "AMOUNT"), /* @__PURE__ */ import_react13.default.createElement("div", { style: { color: "#22c55e" } }, "$", paymentDetails.amount)), /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("div", { style: { color: "#22c55e60" } }, "CURRENCY"), /* @__PURE__ */ import_react13.default.createElement("div", { style: { color: "#22c55e" } }, paymentDetails.currency))), /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("div", { style: { color: "#22c55e60" } }, "WALLET"), /* @__PURE__ */ import_react13.default.createElement("div", { style: { color: "#22c55e", wordBreak: "break-all" } }, address))));
+
+// src/react/components/checkout/TerminalButtons.tsx
+var import_react14 = __toESM(require("react"));
+var TerminalButtons = ({
+  address,
+  showReceipt,
+  isProcessing,
+  paymentDetails,
+  hasInvalidCheckoutId,
+  onDisconnect,
+  onClearReceipt,
+  onPayment
+}) => {
+  const isPayDisabled = isProcessing || !paymentDetails || !address || hasInvalidCheckoutId;
+  return /* @__PURE__ */ import_react14.default.createElement("div", { className: "flex items-center justify-between px-1" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react14.default.createElement(
+    CircleButton,
+    {
+      onClick: () => address && onDisconnect(),
+      disabled: !address,
+      title: "Disconnect",
+      size: "small"
+    },
+    /* @__PURE__ */ import_react14.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2" }, /* @__PURE__ */ import_react14.default.createElement("path", { d: "M18 6L6 18M6 6l12 12" }))
+  ), /* @__PURE__ */ import_react14.default.createElement(
+    CircleButton,
+    {
+      onClick: onClearReceipt,
+      disabled: !showReceipt || isProcessing,
+      title: "Clear",
+      size: "small"
+    },
+    /* @__PURE__ */ import_react14.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2" }, /* @__PURE__ */ import_react14.default.createElement("path", { d: "M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z" }))
+  )), /* @__PURE__ */ import_react14.default.createElement("div", { className: "flex flex-col gap-0.5 opacity-40" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "w-6 h-0.5 rounded", style: { backgroundColor: "rgba(0,0,0,0.3)" } }), /* @__PURE__ */ import_react14.default.createElement("div", { className: "w-6 h-0.5 rounded", style: { backgroundColor: "rgba(0,0,0,0.3)" } }), /* @__PURE__ */ import_react14.default.createElement("div", { className: "w-6 h-0.5 rounded", style: { backgroundColor: "rgba(0,0,0,0.3)" } })), /* @__PURE__ */ import_react14.default.createElement(
+    "button",
+    {
+      onClick: onPayment,
+      disabled: isPayDisabled,
+      className: "px-5 py-2.5 rounded-xl font-bold text-white flex items-center gap-2 transition-all active:scale-95",
+      style: {
+        backgroundColor: isPayDisabled ? "#9ca3af" : "#ea580c",
+        boxShadow: isPayDisabled ? "none" : "0 4px 12px rgba(234,88,12,0.4), inset 0 -2px 4px rgba(0,0,0,0.2)",
+        cursor: isPayDisabled ? "not-allowed" : "pointer"
+      }
+    },
+    isProcessing ? /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(
+      "div",
+      {
+        className: "w-4 h-4 border-2 border-white/30 border-t-white rounded-full",
+        style: { animation: "spin 0.8s linear infinite" }
+      }
+    ), /* @__PURE__ */ import_react14.default.createElement("span", { className: "font-mono tracking-wider text-sm" }, "PAYING...")) : /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement("span", { className: "font-mono tracking-wider text-sm" }, "PAY"), /* @__PURE__ */ import_react14.default.createElement(
+      "svg",
+      {
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2"
+      },
+      /* @__PURE__ */ import_react14.default.createElement("path", { d: "M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6" })
+    ))
+  ));
+};
+var CircleButton = ({ onClick, disabled, title, size = "normal", children }) => {
+  const sizeClass = size === "small" ? "w-10 h-10" : "w-12 h-12";
+  return /* @__PURE__ */ import_react14.default.createElement(
+    "button",
+    {
+      onClick,
+      disabled,
+      className: `${sizeClass} rounded-full flex items-center justify-center transition-transform active:scale-95`,
+      style: {
+        backgroundColor: "#374151",
+        boxShadow: "inset 0 -2px 4px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2)",
+        opacity: disabled ? 0.5 : 1
+      },
+      title
+    },
+    children
+  );
+};
+
+// src/react/components/checkout/V402CheckoutV2.tsx
+var generateRandomId = () => {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+  return Array.from({ length: 8 }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
+};
+function V402CheckoutV2({
+  checkoutId,
+  headerInfo = {},
+  primaryColor = "#84cc16",
+  isModal = false,
+  onPaymentComplete,
+  additionalParams = {},
+  expectedNetwork
+}) {
+  const {
+    title = "V402Pay Checkout",
+    brandName = "V402PAY",
+    receiptTitle = "V402 PAYMENT",
+    tooltipText = "V402Pay - Accept Crypto Payments Easier"
+  } = headerInfo;
+  const endpoint = PROD_BACK_URL;
+  const {
+    supportedNetworks,
+    isLoading: fetchingPaymentInfo,
+    paymentInfo
+  } = usePaymentInfo(checkoutId, endpoint, additionalParams);
+  const targetNetwork = expectedNetwork || supportedNetworks[0];
+  const { address, networkType, disconnect, ensureNetwork } = usePageNetwork(
+    targetNetwork,
+    { autoSwitch: !!targetNetwork, switchOnMount: true }
+  );
+  const { isProcessing, setIsProcessing, result, setResult, error, setError } = usePayment();
+  const [paymentDetails, setPaymentDetails] = (0, import_react15.useState)(null);
+  const [showReceipt, setShowReceipt] = (0, import_react15.useState)(false);
+  const [tempReceiptId, setTempReceiptId] = (0, import_react15.useState)(() => generateRandomId());
+  const handleDisconnect = () => {
+    disconnect();
+    setResult(null);
+    setError(null);
+    setShowReceipt(false);
+  };
+  const handlePayment = async () => {
+    if (!networkType) return;
+    setTempReceiptId(generateRandomId());
+    setResult(null);
+    setError(null);
+    setIsProcessing(true);
+    setShowReceipt(true);
+    try {
+      const response = await makePayment(networkType, checkoutId, endpoint, additionalParams, address || void 0);
+      const data = await response.json();
+      setResult(data);
+      if (onPaymentComplete) {
+        onPaymentComplete(data);
+      }
+    } catch (err) {
+      setError(err.message || "Payment failed");
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+  const handleCloseReceipt = () => {
+    setShowReceipt(false);
+    setResult(null);
+    setError(null);
+  };
+  (0, import_react15.useEffect)(() => {
+    if (paymentInfo && paymentInfo.length > 0) {
+      const firstPayment = paymentInfo[0];
+      const rawAmount = firstPayment.maxAmountRequired?.toString() || "0";
+      const decimals = 6;
+      const humanReadableAmount = (Number(rawAmount) / Math.pow(10, decimals)).toFixed(2);
+      const network = firstPayment.network || "Unknown";
+      const currency = "USDC";
+      setPaymentDetails({ amount: humanReadableAmount, currency, network });
+    }
+  }, [paymentInfo]);
+  (0, import_react15.useEffect)(() => {
+    if (targetNetwork && !fetchingPaymentInfo && ensureNetwork) {
+      ensureNetwork(targetNetwork).catch((err) => {
+        console.error("Failed to ensure network:", err);
+      });
+    }
+  }, [targetNetwork, fetchingPaymentInfo]);
+  (0, import_react15.useEffect)(() => {
+    if (isProcessing || result || error) {
+      setShowReceipt(true);
+    }
+  }, [isProcessing, result, error]);
+  const hasInvalidCheckoutId = !fetchingPaymentInfo && (!paymentInfo || paymentInfo.length === 0);
+  const NetworkIcon = paymentDetails ? getNetworkIcon(paymentDetails.network) : null;
+  const screenText = paymentDetails ? `PAY $${paymentDetails.amount} ${paymentDetails.currency}` : "AWAITING...";
+  const getStatusText = () => {
+    if (hasInvalidCheckoutId) return "ERROR";
+    if (fetchingPaymentInfo) return "LOADING";
+    if (!address) return "CONNECT";
+    if (isProcessing) return "PAYING";
+    return "READY";
+  };
+  return /* @__PURE__ */ import_react15.default.createElement("div", { className: isModal ? "bg-transparent" : "min-h-screen bg-gray-100 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react15.default.createElement(
+    "div",
+    {
+      className: "flex flex-col items-center",
+      style: { width: isModal ? "100%" : "380px", maxWidth: "100%" }
+    },
+    /* @__PURE__ */ import_react15.default.createElement(
+      Receipt,
+      {
+        isLoading: isProcessing,
+        isVisible: showReceipt,
+        result,
+        error,
+        paymentDetails,
+        address,
+        onClose: handleCloseReceipt,
+        primaryColor,
+        receiptTitle,
+        tempReceiptId
+      }
+    ),
+    /* @__PURE__ */ import_react15.default.createElement(
+      "div",
+      {
+        className: "relative rounded-2xl p-3 shadow-2xl w-full",
+        style: {
+          backgroundColor: primaryColor,
+          boxShadow: `0 16px 48px -8px ${primaryColor}66, 0 8px 24px -4px rgba(0,0,0,0.3);padding-bottom: 0px`
+        }
+      },
+      /* @__PURE__ */ import_react15.default.createElement(
+        "div",
+        {
+          className: "absolute top-0 left-1/2 -translate-x-1/2 w-1/3 h-2.5 rounded-b-lg",
+          style: { backgroundColor: "rgba(0,0,0,0.4)" }
+        }
+      ),
+      /* @__PURE__ */ import_react15.default.createElement("div", { className: "flex justify-between items-center mb-2 mt-1 px-1" }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ import_react15.default.createElement(
+        "div",
+        {
+          className: "w-2 h-2 rounded-full",
+          style: {
+            backgroundColor: address ? "#22c55e" : "#ef4444",
+            animation: "pulse 2s ease-in-out infinite"
+          }
+        }
+      ), /* @__PURE__ */ import_react15.default.createElement(
+        "span",
+        {
+          className: "text-xs font-mono font-bold tracking-wider",
+          style: { color: "rgba(0,0,0,0.7)" }
+        },
+        getStatusText()
+      )), /* @__PURE__ */ import_react15.default.createElement("div", { className: "flex items-center gap-1.5" }, paymentDetails && NetworkIcon && /* @__PURE__ */ import_react15.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react15.default.createElement(NetworkIcon, { width: 12, height: 12, style: { color: "rgba(0,0,0,0.7)" } }), /* @__PURE__ */ import_react15.default.createElement("span", { className: "text-xs font-mono font-bold", style: { color: "rgba(0,0,0,0.7)" } }, paymentDetails.network)))),
+      /* @__PURE__ */ import_react15.default.createElement(
+        TerminalScreen,
+        {
+          title,
+          tooltipText,
+          hasInvalidCheckoutId,
+          fetchingPaymentInfo,
+          address,
+          paymentDetails,
+          screenText,
+          supportedNetworks
+        }
+      ),
+      /* @__PURE__ */ import_react15.default.createElement(
+        TerminalButtons,
+        {
+          address,
+          showReceipt,
+          isProcessing,
+          paymentDetails,
+          hasInvalidCheckoutId,
+          onDisconnect: handleDisconnect,
+          onClearReceipt: handleCloseReceipt,
+          onPayment: handlePayment
+        }
+      ),
+      brandName && /* @__PURE__ */ import_react15.default.createElement("div", { className: "text-center mt-0 mb-0" }, /* @__PURE__ */ import_react15.default.createElement(
+        "div",
+        {
+          className: "inline-block px-2 py-0.5 rounded text-[10px] font-mono font-bold tracking-[0.2em]",
+          style: {
+            backgroundColor: "#1a1a1a",
+            color: "#9acd32",
+            boxShadow: "inset 0 1px 3px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.1)",
+            border: "1px solid rgba(0,0,0,0.5)",
+            textShadow: "0 0 4px #9acd3280"
+          }
+        },
+        brandName
+      ))
+    )
+  ), /* @__PURE__ */ import_react15.default.createElement(AnimationStyles, null));
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AnimationStyles,
+  Toast,
   V402Checkout,
+  V402CheckoutV2,
   WalletConnect,
   WalletSelectModal,
+  checkoutAnimations,
   usePageNetwork,
   usePayment,
   usePaymentInfo,
+  useToast,
   useWallet
 });
 //# sourceMappingURL=index.js.map