coinley-test 0.0.21 → 0.0.23

package/dist/index.esm.js

@@ -1237,7 +1237,7 @@ const ThemeProvider = ({
   }, [theme]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `coinley-theme-${theme}`, children });
 };
-class SimplePaymentAPI {
+let SimplePaymentAPI$1 = class SimplePaymentAPI {
   constructor(baseURL, apiKey, apiSecret) {
     this.baseURL = baseURL.endsWith("/") ? baseURL.slice(0, -1) : baseURL;
     this.apiKey = apiKey;
@@ -1300,8 +1300,8 @@ class SimplePaymentAPI {
       body: JSON.stringify(data)
     });
   }
-}
-class SimpleMetaMaskWallet {
+};
+let SimpleMetaMaskWallet$1 = class SimpleMetaMaskWallet {
   constructor() {
     this.account = null;
     this.chainId = null;
@@ -1310,16 +1310,39 @@ class SimpleMetaMaskWallet {
     if (!window.ethereum) {
       throw new Error("MetaMask not installed. Please install MetaMask extension.");
     }
+    if (window.ethereum.providers) {
+      console.log("🔍 Multiple wallets detected:", window.ethereum.providers.length);
+      const metamaskProvider = window.ethereum.providers.find((provider) => provider.isMetaMask);
+      if (!metamaskProvider) {
+        throw new Error("MetaMask not found among installed wallets");
+      }
+      console.log("🦊 Using MetaMask provider specifically");
+      window.ethereum = metamaskProvider;
+    } else if (!window.ethereum.isMetaMask) {
+      throw new Error("Please use MetaMask wallet");
+    }
     try {
+      console.log("🦊 Requesting MetaMask account access...");
       const accounts = await window.ethereum.request({
         method: "eth_requestAccounts"
       });
+      if (!accounts || accounts.length === 0) {
+        throw new Error("No accounts found in MetaMask");
+      }
       const chainId = await window.ethereum.request({
         method: "eth_chainId"
       });
       this.account = accounts[0];
       this.chainId = chainId;
-      console.log("✅ MetaMask connected:", this.account);
+      console.log("✅ MetaMask connected successfully:");
+      console.log("  Account:", this.account);
+      console.log("  Chain ID:", this.chainId);
+      if (this.account.toLowerCase() !== "0xa0419a048a1469b34a5245f08c0697ba956a56ab") {
+        console.warn("⚠️ Connected to different account than expected");
+        console.warn("  Expected: 0xa0419a048A1469B34a5245f08C0697Ba956a56Ab");
+        console.warn("  Connected:", this.account);
+        throw new Error(`Please switch MetaMask to account 0xa041...56Ab. Currently connected to ${this.account.slice(0, 6)}...${this.account.slice(-4)}`);
+      }
       return { account: this.account, chainId: this.chainId };
     } catch (error) {
       console.error("MetaMask connection failed:", error);
@@ -1332,14 +1355,71 @@ class SimpleMetaMaskWallet {
     }
     try {
       console.log("🦊 Sending MetaMask transaction:", txParams);
+      if (!window.ethereum.isMetaMask) {
+        throw new Error("Not using MetaMask provider");
+      }
+      if (txParams.data && txParams.data.includes("a9059cbb")) {
+        console.log("🔍 Checking USDT balance...");
+        try {
+          const balanceHex = await window.ethereum.request({
+            method: "eth_call",
+            params: [{
+              to: txParams.to,
+              // USDT contract
+              data: `0x70a08231000000000000000000000000${this.account.slice(2)}`
+              // balanceOf(address)
+            }, "latest"]
+          });
+          const balance = parseInt(balanceHex, 16);
+          const balanceUSDT = balance / 1e6;
+          console.log("💰 USDT Balance:", balanceUSDT);
+          const amountHex = txParams.data.slice(-64);
+          const transactionAmount = parseInt(amountHex, 16);
+          const transactionAmountUSDT = transactionAmount / 1e6;
+          console.log("💸 Transaction Amount:", transactionAmountUSDT);
+          if (balance < transactionAmount) {
+            throw new Error(`Insufficient USDT balance. You have ${balanceUSDT} USDT but need ${transactionAmountUSDT} USDT`);
+          }
+        } catch (balanceError) {
+          console.warn("Could not check balance:", balanceError);
+        }
+      }
+      try {
+        const ethBalanceHex = await window.ethereum.request({
+          method: "eth_getBalance",
+          params: [this.account, "latest"]
+        });
+        const ethBalance = parseInt(ethBalanceHex, 16) / Math.pow(10, 18);
+        console.log("⛽ ETH Balance for gas:", ethBalance);
+        if (ethBalance < 1e-3) {
+          throw new Error(`Insufficient ETH for gas fees. You have ${ethBalance.toFixed(4)} ETH but need at least 0.001 ETH`);
+        }
+      } catch (gasError) {
+        console.warn("Could not check ETH balance:", gasError);
+      }
+      const fullTxParams = {
+        ...txParams,
+        from: this.account
+      };
+      try {
+        const gasEstimate = await window.ethereum.request({
+          method: "eth_estimateGas",
+          params: [fullTxParams]
+        });
+        const gasLimit = Math.floor(parseInt(gasEstimate, 16) * 1.2);
+        fullTxParams.gas = `0x${gasLimit.toString(16)}`;
+        console.log("⛽ Gas estimate:", parseInt(gasEstimate, 16));
+        console.log("⛽ Gas limit (with buffer):", gasLimit);
+      } catch (gasError) {
+        console.warn("Gas estimation failed:", gasError);
+        fullTxParams.gas = "0x15F90";
+      }
+      console.log("📤 Final transaction params:", fullTxParams);
       const txHash = await window.ethereum.request({
         method: "eth_sendTransaction",
-        params: [{
-          ...txParams,
-          from: this.account
-        }]
+        params: [fullTxParams]
       });
-      console.log("✅ Transaction sent:", txHash);
+      console.log("✅ Transaction sent successfully:", txHash);
       return txHash;
     } catch (error) {
       console.error("Transaction failed:", error);
@@ -1347,6 +1427,10 @@ class SimpleMetaMaskWallet {
         throw new Error("Transaction cancelled by user");
       } else if (error.message.includes("insufficient funds")) {
         throw new Error("Insufficient funds in wallet");
+      } else if (error.message.includes("gas")) {
+        throw new Error("Gas estimation failed. You may not have enough ETH for gas fees.");
+      } else if (error.message.includes("invalid opcode")) {
+        throw new Error("Transaction failed - invalid operation. This usually means insufficient token balance or contract interaction failed.");
       } else {
         throw new Error(error.message || "Transaction failed");
       }
@@ -1355,7 +1439,7 @@ class SimpleMetaMaskWallet {
   isConnected() {
     return !!this.account;
   }
-}
+};
 const SimpleCoinleyPayment = ({
   apiKey,
   apiSecret,
@@ -1377,10 +1461,10 @@ const SimpleCoinleyPayment = ({
   const [paymentData, setPaymentData] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
-  const [wallet, setWallet] = useState(new SimpleMetaMaskWallet());
+  const [wallet, setWallet] = useState(new SimpleMetaMaskWallet$1());
   const [walletConnected, setWalletConnected] = useState(false);
   const [processing, setProcessing] = useState(false);
-  const api = useRef(new SimplePaymentAPI(apiUrl, apiKey, apiSecret));
+  const api = useRef(new SimplePaymentAPI$1(apiUrl, apiKey, apiSecret));
   useEffect(() => {
     if (isOpen) {
       loadData();
@@ -1396,7 +1480,7 @@ const SimpleCoinleyPayment = ({
     setError("");
     setWalletConnected(false);
     setProcessing(false);
-    setWallet(new SimpleMetaMaskWallet());
+    setWallet(new SimpleMetaMaskWallet$1());
   };
   const loadData = async () => {
     var _a2, _b2;
@@ -1752,8 +1836,837 @@ const SimpleCoinleyPayment = ({
     ] })
   ] }) });
 };
+class SimplePaymentAPI2 {
+  constructor(baseURL, apiKey, apiSecret) {
+    this.baseURL = baseURL.endsWith("/") ? baseURL.slice(0, -1) : baseURL;
+    this.apiKey = apiKey;
+    this.apiSecret = apiSecret;
+  }
+  async request(endpoint, options = {}) {
+    const url = `${this.baseURL}${endpoint}`;
+    const headers = {
+      "Content-Type": "application/json",
+      "X-API-Key": this.apiKey,
+      "X-API-Secret": this.apiSecret,
+      ...options.headers
+    };
+    const response = await fetch(url, {
+      ...options,
+      headers
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || `HTTP ${response.status}`);
+    }
+    return response.json();
+  }
+  async getNetworks() {
+    try {
+      return await this.request("/api/networks");
+    } catch (error) {
+      console.error("Failed to fetch networks:", error);
+      return {
+        networks: [
+          { id: "1", name: "Ethereum", shortName: "ethereum", chainId: "0x1", type: "ethereum" },
+          { id: "56", name: "BSC", shortName: "bsc", chainId: "0x38", type: "bsc" }
+        ]
+      };
+    }
+  }
+  async getTokens() {
+    try {
+      return await this.request("/api/networks/stablecoins");
+    } catch (error) {
+      console.error("Failed to fetch tokens:", error);
+      return {
+        stablecoins: [
+          {
+            id: "1",
+            name: "Tether USD",
+            symbol: "USDT",
+            contractAddress: "0xdAC17F958D2ee523a2206206994597C13D831ec7",
+            decimals: 6,
+            networkId: "1",
+            Network: { shortName: "ethereum", name: "Ethereum" }
+          }
+        ]
+      };
+    }
+  }
+  async createPayment(data) {
+    return await this.request("/api/payments/create", {
+      method: "POST",
+      body: JSON.stringify(data)
+    });
+  }
+  async verifyQRPayment(paymentId) {
+    return await this.request("/api/payments/verify-qr", {
+      method: "POST",
+      body: JSON.stringify({ paymentId })
+    });
+  }
+}
+class SimpleMetaMaskWallet2 {
+  constructor() {
+    this.account = null;
+    this.chainId = null;
+  }
+  async connect() {
+    if (!window.ethereum) {
+      throw new Error("MetaMask not installed. Please install MetaMask extension.");
+    }
+    if (window.ethereum.providers) {
+      console.log("🔍 Multiple wallets detected:", window.ethereum.providers.length);
+      const metamaskProvider = window.ethereum.providers.find((provider) => provider.isMetaMask);
+      if (!metamaskProvider) {
+        throw new Error("MetaMask not found among installed wallets");
+      }
+      console.log("🦊 Using MetaMask provider specifically");
+      window.ethereum = metamaskProvider;
+    } else if (!window.ethereum.isMetaMask) {
+      throw new Error("Please use MetaMask wallet");
+    }
+    try {
+      console.log("🦊 Requesting MetaMask account access...");
+      const accounts = await window.ethereum.request({
+        method: "eth_requestAccounts"
+      });
+      if (!accounts || accounts.length === 0) {
+        throw new Error("No accounts found in MetaMask");
+      }
+      const chainId = await window.ethereum.request({
+        method: "eth_chainId"
+      });
+      this.account = accounts[0];
+      this.chainId = chainId;
+      console.log("✅ MetaMask connected successfully:");
+      console.log("  Account:", this.account);
+      console.log("  Chain ID:", this.chainId);
+      return { account: this.account, chainId: this.chainId };
+    } catch (error) {
+      console.error("MetaMask connection failed:", error);
+      throw new Error(error.message || "Failed to connect to MetaMask");
+    }
+  }
+  async sendTransaction(txParams) {
+    if (!this.account) {
+      throw new Error("Wallet not connected");
+    }
+    try {
+      console.log("🦊 Sending MetaMask transaction:", txParams);
+      if (!window.ethereum.isMetaMask) {
+        throw new Error("Not using MetaMask provider");
+      }
+      const fullTxParams = {
+        ...txParams,
+        from: this.account
+      };
+      try {
+        const gasEstimate = await window.ethereum.request({
+          method: "eth_estimateGas",
+          params: [fullTxParams]
+        });
+        const gasLimit = Math.floor(parseInt(gasEstimate, 16) * 1.2);
+        fullTxParams.gas = `0x${gasLimit.toString(16)}`;
+        console.log("⛽ Gas estimate:", parseInt(gasEstimate, 16));
+        console.log("⛽ Gas limit (with buffer):", gasLimit);
+      } catch (gasError) {
+        console.warn("Gas estimation failed:", gasError);
+        fullTxParams.gas = "0x15F90";
+      }
+      console.log("📤 Final transaction params:", fullTxParams);
+      const txHash = await window.ethereum.request({
+        method: "eth_sendTransaction",
+        params: [fullTxParams]
+      });
+      console.log("✅ Transaction sent successfully:", txHash);
+      return txHash;
+    } catch (error) {
+      console.error("Transaction failed:", error);
+      if (error.code === 4001) {
+        throw new Error("Transaction cancelled by user");
+      } else if (error.message.includes("insufficient funds")) {
+        throw new Error("Insufficient funds in wallet");
+      } else if (error.message.includes("gas")) {
+        throw new Error("Gas estimation failed. You may not have enough ETH for gas fees.");
+      } else {
+        throw new Error(error.message || "Transaction failed");
+      }
+    }
+  }
+  isConnected() {
+    return !!this.account;
+  }
+}
+const EnhancedQRCode = ({
+  walletAddress,
+  amount,
+  currency,
+  network,
+  theme = "light"
+}) => {
+  const [qrData, setQrData] = useState("");
+  const [isGenerating, setIsGenerating] = useState(true);
+  useEffect(() => {
+    const generateQRData = () => {
+      setIsGenerating(true);
+      setTimeout(() => {
+        setQrData(`${walletAddress}?amount=${amount}&currency=${currency}&network=${network}`);
+        setIsGenerating(false);
+      }, 1e3);
+    };
+    if (walletAddress) {
+      generateQRData();
+    }
+  }, [walletAddress, amount, currency, network]);
+  const formatWalletAddress = (address) => {
+    if (!address || address.length <= 16) return address;
+    return `${address.slice(0, 6)}...${address.slice(-4)}`;
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 rounded-lg bg-white mb-3 shadow-sm border", children: isGenerating ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center", style: { width: 200, height: 200 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600 mx-auto mb-2" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600", children: "Generating QR Code..." })
+    ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center bg-gray-100 rounded-lg", style: { width: 200, height: 200 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center p-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl mb-2", children: "📱" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600", children: "QR Code" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 mt-1", children: "Scan to pay" })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center text-sm text-gray-700 mb-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "font-semibold text-gray-800 flex items-center justify-center", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4 mr-1", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M12 12h-4.01M12 12V8.01" }) }),
+        "Scan to Pay with ",
+        currency
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500 mt-1", children: [
+        "Scan with your ",
+        network,
+        " wallet app"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full mb-4 p-3 bg-gray-50 rounded-lg", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-700", children: "Amount to Pay:" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-lg font-bold text-[#7042D2]", children: [
+          amount,
+          " ",
+          currency
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center mt-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500", children: "Network:" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium text-gray-700", children: network })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center mt-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-500", children: "Recipient:" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-mono text-gray-700", children: formatWalletAddress(walletAddress) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-3 rounded bg-blue-50 border border-blue-200", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("h4", { className: "text-sm font-medium mb-2 text-blue-800 flex items-center", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4 mr-1", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+        "Payment Instructions"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("ol", { className: "text-xs space-y-1 text-blue-700", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: "1. Open your crypto wallet app" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: "2. Scan the QR code above" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
+          "3. Send exactly ",
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("strong", { children: [
+            amount,
+            " ",
+            currency
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: '4. Click "I have sent the payment" button below' })
+      ] })
+    ] }) })
+  ] });
+};
+const EnhancedPaymentStatus = ({
+  status,
+  message,
+  theme = "light",
+  payment = null,
+  transactionHash = null,
+  selectedPaymentMethod = null,
+  merchantName = "Merchant",
+  onClose = null
+}) => {
+  const [copiedHash, setCopiedHash] = useState(false);
+  const copyTransactionHash = async () => {
+    if (transactionHash) {
+      try {
+        await navigator.clipboard.writeText(transactionHash);
+        setCopiedHash(true);
+        setTimeout(() => setCopiedHash(false), 2e3);
+      } catch (err) {
+        console.error("Failed to copy transaction hash:", err);
+      }
+    }
+  };
+  const formatTransactionHash = (hash) => {
+    if (!hash) return "";
+    if (hash.length <= 16) return hash;
+    return `${hash.slice(0, 8)}...${hash.slice(-8)}`;
+  };
+  const renderIcon = () => {
+    switch (status) {
+      case "processing":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-4 border-t-purple-600 border-blue-500/20" });
+      case "success":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-full h-16 w-16 bg-green-500 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            className: "h-10 w-10 text-white",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: 3,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+          }
+        ) });
+      case "error":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-full h-12 w-12 bg-red-100 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            className: "h-8 w-8 text-red-500",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+          }
+        ) });
+      default:
+        return null;
+    }
+  };
+  if (status === "success") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-6 px-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-6", children: renderIcon() }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-2xl font-bold mb-3 text-gray-900", children: "Payment Successful!" }),
+      payment && selectedPaymentMethod && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-center max-w-[235px] mb-6 text-gray-600", children: [
+        "Your payment of ",
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[#7042D2] font-semibold", children: [
+          payment.totalAmount || payment.amount,
+          " ",
+          selectedPaymentMethod.currency
+        ] }),
+        " has been completed."
+      ] }),
+      transactionHash && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full mb-6 px-4", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium mb-2 text-gray-700", children: "Transaction Hash:" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: "flex items-center justify-between p-3 rounded-lg border cursor-pointer transition-colors bg-gray-50 border-gray-200 hover:bg-gray-100",
+            onClick: copyTransactionHash,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-sm text-gray-700", children: formatTransactionHash(transactionHash) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+                copiedHash ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-green-500 text-xs font-medium mr-2", children: "Copied!" }) : null,
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    className: "h-4 w-4 text-gray-500",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] }),
+      onClose && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: onClose,
+          className: "w-full py-3 px-4 bg-[#7042D2] text-white font-medium rounded-2xl text-lg shadow-md hover:bg-[#5b34b1] transition-colors",
+          children: "Close"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-6", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4", children: renderIcon() }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xl font-bold mb-2 text-gray-900", children: status === "processing" ? "Processing Payment" : status === "error" ? "Payment Failed" : "Unknown Status" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-center text-gray-600", children: message })
+  ] });
+};
+const ScreenTransition = ({
+  currentStep,
+  targetStep,
+  children,
+  className = "",
+  duration = 300
+}) => {
+  const [isVisible, setIsVisible] = useState(currentStep === targetStep);
+  const [shouldRender, setShouldRender] = useState(currentStep === targetStep);
+  useEffect(() => {
+    if (currentStep === targetStep) {
+      setShouldRender(true);
+      setTimeout(() => setIsVisible(true), 10);
+    } else {
+      setIsVisible(false);
+      setTimeout(() => setShouldRender(false), duration);
+    }
+  }, [currentStep, targetStep, duration]);
+  if (!shouldRender) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: `
+        transition-all duration-300 ease-out
+        ${isVisible ? "transform translate-y-0 opacity-100" : "transform translate-y-full opacity-0"}
+        ${className}
+      `,
+      style: {
+        transitionDuration: `${duration}ms`
+      },
+      children
+    }
+  );
+};
+const EnhancedSimpleCoinleyPayment = ({
+  apiKey,
+  apiSecret,
+  apiUrl,
+  config,
+  onSuccess,
+  onError,
+  onClose,
+  isOpen,
+  theme = "light"
+}) => {
+  var _a, _b;
+  const [currentStep, setCurrentStep] = useState("method");
+  const [networks, setNetworks] = useState([]);
+  const [tokens, setTokens] = useState([]);
+  const [selectedNetwork, setSelectedNetwork] = useState(null);
+  const [selectedToken, setSelectedToken] = useState(null);
+  const [paymentMethod, setPaymentMethod] = useState(null);
+  const [paymentData, setPaymentData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [wallet, setWallet] = useState(new SimpleMetaMaskWallet2());
+  const [walletConnected, setWalletConnected] = useState(false);
+  const [processing, setProcessing] = useState(false);
+  const [paymentType, setPaymentType] = useState("wallet");
+  const api = useRef(new SimplePaymentAPI2(apiUrl, apiKey, apiSecret));
+  useEffect(() => {
+    if (isOpen) {
+      loadData();
+      resetState();
+    }
+  }, [isOpen]);
+  const resetState = () => {
+    setCurrentStep("method");
+    setSelectedNetwork(null);
+    setSelectedToken(null);
+    setPaymentMethod(null);
+    setPaymentData(null);
+    setError("");
+    setWalletConnected(false);
+    setProcessing(false);
+    setWallet(new SimpleMetaMaskWallet2());
+    setPaymentType("wallet");
+  };
+  const loadData = async () => {
+    var _a2, _b2;
+    try {
+      setLoading(true);
+      setError("");
+      console.log("🔄 Loading networks and tokens...");
+      const [networksRes, tokensRes] = await Promise.all([
+        api.current.getNetworks(),
+        api.current.getTokens()
+      ]);
+      setNetworks(networksRes.networks || []);
+      setTokens(tokensRes.stablecoins || []);
+      console.log("✅ Loaded networks:", (_a2 = networksRes.networks) == null ? void 0 : _a2.length);
+      console.log("✅ Loaded tokens:", (_b2 = tokensRes.stablecoins) == null ? void 0 : _b2.length);
+    } catch (err) {
+      console.error("Failed to load data:", err);
+      setError("Failed to load payment options. Using fallback data.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const connectWallet = async () => {
+    try {
+      setLoading(true);
+      setError("");
+      const connection = await wallet.connect();
+      setWalletConnected(true);
+      console.log("✅ Wallet connected successfully:", connection.account);
+    } catch (err) {
+      console.error("Wallet connection failed:", err);
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const createPayment = async () => {
+    try {
+      setLoading(true);
+      setError("");
+      const paymentPayload = {
+        amount: config.amount,
+        currency: selectedToken.symbol,
+        network: selectedNetwork.shortName,
+        customerEmail: config.customerEmail,
+        callbackUrl: config.callbackUrl,
+        metadata: {
+          ...config.metadata,
+          merchantWalletAddresses: config.merchantWalletAddresses,
+          paymentMethod,
+          selectedNetwork: selectedNetwork.shortName,
+          selectedToken: selectedToken.symbol
+        }
+      };
+      console.log("🔄 Creating payment:", paymentPayload);
+      const payment = await api.current.createPayment(paymentPayload);
+      setPaymentData(payment.payment);
+      console.log("✅ Payment created:", payment.payment.id);
+      setCurrentStep("confirm");
+    } catch (err) {
+      console.error("Payment creation failed:", err);
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const sendTransaction = async () => {
+    var _a2, _b2;
+    try {
+      setProcessing(true);
+      setError("");
+      const recipientAddress = ((_a2 = paymentData.metadata) == null ? void 0 : _a2.recipientWallet) || ((_b2 = config.merchantWalletAddresses) == null ? void 0 : _b2[selectedNetwork.shortName]);
+      if (!recipientAddress) {
+        throw new Error("Merchant wallet address not found");
+      }
+      console.log("🔄 Preparing transaction to:", recipientAddress);
+      let txParams;
+      if (selectedToken.contractAddress) {
+        const decimals = selectedToken.decimals || 6;
+        const amount = Math.floor(paymentData.totalAmount * Math.pow(10, decimals));
+        const methodId = "0xa9059cbb";
+        const recipientPadded = recipientAddress.slice(2).toLowerCase().padStart(64, "0");
+        const amountPadded = amount.toString(16).padStart(64, "0");
+        const data = `${methodId}${recipientPadded}${amountPadded}`;
+        txParams = {
+          to: selectedToken.contractAddress,
+          data,
+          value: "0x0"
+        };
+        console.log("🔄 ERC-20 Transaction:", {
+          token: selectedToken.symbol,
+          amount: paymentData.totalAmount,
+          amountWithDecimals: amount,
+          to: selectedToken.contractAddress,
+          recipient: recipientAddress
+        });
+      } else {
+        const value = Math.floor(paymentData.totalAmount * Math.pow(10, 18));
+        txParams = {
+          to: recipientAddress,
+          value: `0x${value.toString(16)}`
+        };
+        console.log("🔄 Native Transaction:", {
+          amount: paymentData.totalAmount,
+          to: recipientAddress
+        });
+      }
+      const txHash = await wallet.sendTransaction(txParams);
+      console.log("✅ Transaction successful:", txHash);
+      setCurrentStep("success");
+      onSuccess == null ? void 0 : onSuccess(paymentData.id, txHash, {
+        network: selectedNetwork.name,
+        currency: selectedToken.symbol,
+        amount: paymentData.totalAmount,
+        method: paymentMethod
+      });
+    } catch (err) {
+      console.error("Transaction failed:", err);
+      setError(err.message);
+      onError == null ? void 0 : onError(err.message);
+    } finally {
+      setProcessing(false);
+    }
+  };
+  const handleQRPaymentVerification = async () => {
+    if (!paymentData) {
+      setError("Payment information is missing");
+      return;
+    }
+    setCurrentStep("processing");
+    setError(null);
+    try {
+      console.log("🔄 Starting QR payment verification...");
+      const verificationResult = await api.current.verifyQRPayment(paymentData.id);
+      if (verificationResult.verified) {
+        console.log("✅ QR payment verified successfully:", verificationResult);
+        setCurrentStep("success");
+        if (onSuccess) {
+          onSuccess(paymentData.id, verificationResult.payment.transactionHash, {
+            network: selectedNetwork.name,
+            currency: selectedToken.symbol,
+            amount: verificationResult.payment.amount,
+            verificationType: "QR_PAYMENT"
+          });
+        }
+      } else {
+        setError(verificationResult.message || "Transaction not detected yet. Please wait a moment and try again.");
+        setCurrentStep("confirm");
+      }
+    } catch (error2) {
+      console.error("QR payment verification error:", error2);
+      const errorMessage = error2.message || "Failed to verify payment. Please try again.";
+      setError(errorMessage);
+      setCurrentStep("confirm");
+      if (onError) onError(errorMessage);
+    }
+  };
+  const formatAmount = (amount) => {
+    return parseFloat(amount).toFixed(2);
+  };
+  const getNetworkDisplayName = (network) => {
+    const names = {
+      ethereum: "Ethereum",
+      bsc: "BSC",
+      tron: "Tron",
+      algorand: "Algorand",
+      solana: "Solana"
+    };
+    return names[network] || network;
+  };
+  const getWalletAddressForNetwork = () => {
+    var _a2;
+    if (!selectedNetwork) return "No network selected";
+    const networkAddress = (_a2 = config.merchantWalletAddresses) == null ? void 0 : _a2[selectedNetwork.shortName];
+    if (networkAddress) return networkAddress;
+    if (paymentData == null ? void 0 : paymentData.recipientWallet) return paymentData.recipientWallet;
+    return "No wallet address configured for this network";
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-50", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 transition-opacity", onClick: onClose, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 overflow-y-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex min-h-screen items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative pt-6 w-full max-w-md mx-auto shadow-xl bg-gray-100 rounded-3xl overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white flex justify-between items-center mb-6 mr-3 ml-3 py-4 px-2 rounded-full", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex items-center gap-2 px-4", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white font-bold text-sm", children: "C" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-lg font-semibold text-gray-800", children: "Payment Details" })
+        ] }),
+        currentStep !== "success" && currentStep !== "processing" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "text-gray-500 hover:text-gray-700 focus:outline-none",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6 mr-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+          }
+        )
+      ] }),
+      paymentData && currentStep !== "success" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600", children: "Total Amount" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-3xl md:text-9xl lg:text-9xl font-bold text-[#7042D2] mt-2 leading-tight tracking-tight", children: [
+          "$",
+          formatAmount(paymentData.totalAmount || paymentData.amount)
+        ] }),
+        paymentData.feeChargedTo === "customer" && paymentData.feeAmount > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-sm text-gray-500", children: "Processing fee included" }),
+        paymentData.feeChargedTo === "merchant" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-sm text-gray-500", children: "No additional fees" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 mt-4", children: "Payment to:" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-base font-semibold mt-1 flex gap-2 items-center justify-center", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M15.3 7.50065L15.8 10.0007H4.2L4.7 7.50065H15.3ZM16.6667 3.33398H3.33333V5.00065H16.6667V3.33398ZM16.6667 5.83398H3.33333L2.5 10.0007V11.6673H3.33333V16.6673H11.6667V11.6673H15V16.6673H16.6667V11.6673H17.5V10.0007L16.6667 5.83398ZM5 15.0007V11.6673H10V15.0007H5Z", fill: "#7042D2" }) }),
+          config.merchantName || "Merchant"
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ScreenTransition, { currentStep, targetStep: "method", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pb-6 pt-6 px-6 bg-white rounded-t-2xl", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium text-center mb-6", children: "Choose Payment Method" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 mb-6", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Select Network" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: networks.map((network) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                onClick: () => setSelectedNetwork(network),
+                className: `w-full p-3 border rounded-lg text-left transition-colors ${(selectedNetwork == null ? void 0 : selectedNetwork.id) === network.id ? "border-purple-500 bg-purple-50" : "border-gray-200 hover:bg-gray-50"}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium", children: network.name }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: network.shortName.toUpperCase() })
+                ]
+              },
+              network.id
+            )) })
+          ] }),
+          selectedNetwork && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 mb-6", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Select Token" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: tokens.filter((token) => {
+              var _a2;
+              return ((_a2 = token.Network) == null ? void 0 : _a2.shortName) === (selectedNetwork == null ? void 0 : selectedNetwork.shortName);
+            }).map((token) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                onClick: () => setSelectedToken(token),
+                className: `w-full p-3 border rounded-lg text-left flex justify-between transition-colors ${(selectedToken == null ? void 0 : selectedToken.id) === token.id ? "border-purple-500 bg-purple-50" : "border-gray-200 hover:bg-gray-50"}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium", children: token.name }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: token.symbol })
+                  ] }),
+                  token.isStablecoin && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 py-1 bg-green-100 text-green-600 text-xs rounded", children: "Stablecoin" })
+                ]
+              },
+              token.id
+            )) })
+          ] }),
+          selectedNetwork && selectedToken && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              onClick: createPayment,
+              disabled: loading,
+              className: "w-full bg-purple-600 text-white py-3 px-4 rounded-lg hover:bg-purple-700 disabled:opacity-50 font-medium",
+              children: loading ? "Creating Payment..." : "Continue"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ScreenTransition, { currentStep, targetStep: "confirm", children: selectedNetwork && selectedToken && paymentData && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4 px-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex border-b border-gray-200", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                onClick: () => setPaymentType("wallet"),
+                className: `py-2 px-4 text-sm font-medium ${paymentType === "wallet" ? "border-b-2 border-purple-600 text-purple-600" : "text-gray-500 hover:text-gray-700"}`,
+                children: "Connect Wallet"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                onClick: () => setPaymentType("qrcode"),
+                className: `py-2 px-4 text-sm font-medium ${paymentType === "qrcode" ? "border-b-2 border-purple-600 text-purple-600" : "text-gray-500 hover:text-gray-700"}`,
+                children: "QR Code"
+              }
+            )
+          ] }) }),
+          paymentType === "wallet" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 rounded-2xl mb-4 bg-white", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium mb-2 text-gray-800", children: "Payment Details" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 bg-[#EDE4FF] p-3 rounded-xl", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Currency:" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selectedToken.symbol })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-b border-gray-400" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Network:" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: getNetworkDisplayName(selectedNetwork.shortName) })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-b border-gray-400" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between border-t pt-2 mt-1", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-bold", children: "Total:" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-bold text-lg", children: [
+                  "$",
+                  formatAmount(paymentData.totalAmount)
+                ] })
+              ] })
+            ] })
+          ] }),
+          paymentType === "qrcode" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            EnhancedQRCode,
+            {
+              walletAddress: getWalletAddressForNetwork(),
+              amount: paymentData.totalAmount || paymentData.amount,
+              currency: selectedToken.symbol,
+              network: selectedNetwork.shortName,
+              theme
+            }
+          ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3 mb-4 px-4", children: !walletConnected ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-4", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-2xl", children: "🦊" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600", children: "Connect MetaMask to continue" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                onClick: connectWallet,
+                disabled: loading,
+                className: "w-full bg-purple-600 text-white py-3 px-4 rounded-lg hover:bg-purple-700 disabled:opacity-50 font-medium",
+                children: loading ? "Connecting..." : "Connect MetaMask"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-3 bg-green-50 rounded-lg border border-green-200", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-green-600 text-sm font-medium", children: "✅ Wallet Connected" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "font-mono text-xs text-green-700 mt-1", children: [
+              (_a = wallet.account) == null ? void 0 : _a.slice(0, 6),
+              "...",
+              (_b = wallet.account) == null ? void 0 : _b.slice(-4)
+            ] })
+          ] }) }) }),
+          error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 rounded-lg bg-red-50 mb-4 text-red-600 text-sm", children: error }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-3 mb-3 px-4", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setCurrentStep("method"),
+                className: "w-full py-2 px-4 bg-gray-200 hover:bg-gray-300 text-purple-600 font-medium rounded-md",
+                children: "Back"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: paymentType === "qrcode" ? handleQRPaymentVerification : sendTransaction,
+                className: "bg-green-600 text-white w-full py-2 px-4 font-medium rounded-md",
+                disabled: paymentType === "wallet" && !walletConnected,
+                children: paymentType === "qrcode" ? "I have sent the payment" : "Pay Now"
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ScreenTransition, { currentStep, targetStep: "processing", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          EnhancedPaymentStatus,
+          {
+            status: "processing",
+            theme,
+            message: "Processing your payment..."
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ScreenTransition, { currentStep, targetStep: "success", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          EnhancedPaymentStatus,
+          {
+            status: "success",
+            theme,
+            message: "Payment successful!",
+            payment: paymentData,
+            transactionHash: "0x123...abc",
+            selectedPaymentMethod: { currency: selectedToken == null ? void 0 : selectedToken.symbol },
+            merchantName: config.merchantName || "Merchant",
+            onClose
+          }
+        ) })
+      ] }),
+      currentStep !== "success" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center text-xs text-gray-500 flex items-center justify-center gap-1 py-6 bg-white rounded-b-3xl", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { children: [
+          "Powered by ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-600", children: "Coinley" }),
+          " - Secure Cryptocurrency Payments"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "inline w-4 h-4 text-green-500 ml-1", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 12l2 2 4-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+        ] })
+      ] })
+    ] }) }) })
+  ] });
+};
 const SimpleCoinleyProvider = ({ children, ...props }) => children;
-const VERSION = "0.0.1";
+const VERSION = "0.0.2";
 const utils = {
   formatAmount: (amount, decimals = 2) => amount.toFixed(decimals),
   truncateAddress: (address, startChars = 6, endChars = 4) => {
@@ -1798,16 +2711,66 @@ const DEFAULT_CONFIG = {
   testMode: false,
   autoOpen: false
 };
+const USAGE_EXAMPLES = {
+  // Original simple component (still works)
+  simple: `
+import { SimpleCoinleyPayment } from 'coinley-test';
+
+<SimpleCoinleyPayment
+  apiKey="your-api-key"
+  apiSecret="your-api-secret"
+  apiUrl="https://your-api-url.com"
+  isOpen={isOpen}
+  config={{
+    amount: 100,
+    customerEmail: "customer@example.com",
+    merchantWalletAddresses: {
+      ethereum: "0x...",
+      bsc: "0x..."
+    }
+  }}
+  onSuccess={(paymentId, txHash, details) => console.log('Success!')}
+  onError={(error) => console.error('Error:', error)}
+  onClose={() => setIsOpen(false)}
+/>
+  `,
+  // Enhanced component with modern design
+  enhanced: `
+import { EnhancedSimpleCoinleyPayment } from 'coinley-test';
+
+<EnhancedSimpleCoinleyPayment
+  apiKey="your-api-key"
+  apiSecret="your-api-secret"
+  apiUrl="https://your-api-url.com"
+  isOpen={isOpen}
+  config={{
+    amount: 100,
+    customerEmail: "customer@example.com",
+    merchantName: "Your Store",
+    merchantWalletAddresses: {
+      ethereum: "0x...",
+      bsc: "0x..."
+    }
+  }}
+  onSuccess={(paymentId, txHash, details) => console.log('Success!')}
+  onError={(error) => console.error('Error:', error)}
+  onClose={() => setIsOpen(false)}
+  theme="light" // or "dark"
+/>
+  `
+};
 export {
   CoinleyCheckout,
   CoinleyError,
   CoinleyPayment,
   CoinleyProvider,
   DEFAULT_CONFIG,
+  EnhancedSimpleCoinleyPayment,
   PaymentAPI,
   SimpleCoinleyPayment,
   SimpleCoinleyProvider,
   ThemeProvider,
+  USAGE_EXAMPLES,
   VERSION,
   useCoinley,
   utils