stablezact-pay 0.66.0

package/dist/QRCodePayment-C50CNuFu.js

@@ -0,0 +1,860 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import QRCode from "qrcode";
+import { createPublicClient, http, formatUnits, getContract } from "viem";
+import { a as avalanche, o as optimism, b as arbitrum, p as polygon, c as bsc, m as mainnet } from "./polygon-C-1Q5KDX.js";
+const NETWORK_CHAINS = {
+  ethereum: mainnet,
+  bsc,
+  polygon,
+  arbitrum,
+  optimism,
+  avalanche
+};
+const ERC20_ABI = [
+  {
+    constant: true,
+    inputs: [{ name: "_owner", type: "address" }],
+    name: "balanceOf",
+    outputs: [{ name: "balance", type: "uint256" }],
+    type: "function"
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "decimals",
+    outputs: [{ name: "", type: "uint8" }],
+    type: "function"
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "symbol",
+    outputs: [{ name: "", type: "string" }],
+    type: "function"
+  }
+];
+class BalanceChecker {
+  constructor() {
+    this.clients = /* @__PURE__ */ new Map();
+  }
+  // Get or create viem client for network
+  getClient(networkShortName) {
+    if (!this.clients.has(networkShortName)) {
+      const chain = NETWORK_CHAINS[networkShortName];
+      if (!chain) {
+        throw new Error(`Unsupported network: ${networkShortName}`);
+      }
+      const client = createPublicClient({
+        chain,
+        transport: http()
+      });
+      this.clients.set(networkShortName, client);
+    }
+    return this.clients.get(networkShortName);
+  }
+  // Check native token balance (ETH, BNB, MATIC, etc.)
+  async checkNativeBalance(walletAddress, networkShortName) {
+    try {
+      const client = this.getClient(networkShortName);
+      const balanceWei = await client.getBalance({
+        address: walletAddress
+      });
+      const balanceEther = formatUnits(balanceWei, 18);
+      return {
+        balance: parseFloat(balanceEther),
+        balanceWei: balanceWei.toString(),
+        symbol: this.getNativeTokenSymbol(networkShortName),
+        decimals: 18
+      };
+    } catch (error) {
+      throw new Error(`Failed to check native balance: ${error.message}`);
+    }
+  }
+  // Check ERC-20 token balance
+  async checkTokenBalance(walletAddress, tokenAddress, networkShortName) {
+    try {
+      const client = this.getClient(networkShortName);
+      const contract = getContract({
+        address: tokenAddress,
+        abi: ERC20_ABI,
+        client
+      });
+      const [balanceWei, decimals, symbol] = await Promise.all([
+        contract.read.balanceOf([walletAddress]),
+        contract.read.decimals().catch(() => 18),
+        // Default to 18 if fails
+        contract.read.symbol().catch(() => "TOKEN")
+      ]);
+      const balance = parseFloat(formatUnits(balanceWei, decimals));
+      return {
+        balance,
+        balanceWei: balanceWei.toString(),
+        symbol,
+        decimals,
+        tokenAddress
+      };
+    } catch (error) {
+      throw new Error(`Failed to check token balance: ${error.message}`);
+    }
+  }
+  // Check if user has sufficient balance for transaction
+  async validateBalance(walletAddress, token, requiredAmount, networkShortName, includeGasFee = true) {
+    try {
+      let tokenBalance;
+      let nativeBalance = null;
+      if (token.contractAddress) {
+        tokenBalance = await this.checkTokenBalance(walletAddress, token.contractAddress, networkShortName);
+      } else {
+        tokenBalance = await this.checkNativeBalance(walletAddress, networkShortName);
+      }
+      if (token.contractAddress && includeGasFee) {
+        nativeBalance = await this.checkNativeBalance(walletAddress, networkShortName);
+      }
+      const hasEnoughTokens = tokenBalance.balance >= requiredAmount;
+      const tokenShortfall = hasEnoughTokens ? 0 : requiredAmount - tokenBalance.balance;
+      let estimatedGasFee = 0;
+      let hasEnoughForGas = true;
+      let gasShortfall = 0;
+      if (includeGasFee) {
+        estimatedGasFee = this.estimateGasFee(networkShortName, !!token.contractAddress);
+        if (token.contractAddress) {
+          hasEnoughForGas = nativeBalance.balance >= estimatedGasFee;
+          gasShortfall = hasEnoughForGas ? 0 : estimatedGasFee - nativeBalance.balance;
+        } else {
+          const totalRequired = requiredAmount + estimatedGasFee;
+          hasEnoughForGas = tokenBalance.balance >= totalRequired;
+          gasShortfall = hasEnoughForGas ? 0 : totalRequired - tokenBalance.balance;
+        }
+      }
+      const validationResult = {
+        isValid: hasEnoughTokens && hasEnoughForGas,
+        tokenBalance,
+        nativeBalance,
+        requiredAmount,
+        estimatedGasFee,
+        hasEnoughTokens,
+        hasEnoughForGas,
+        tokenShortfall,
+        gasShortfall,
+        errors: []
+      };
+      if (!hasEnoughTokens) {
+        validationResult.errors.push(
+          `Insufficient ${token.symbol} balance. Need ${requiredAmount} ${token.symbol}, have ${tokenBalance.balance.toFixed(6)} ${token.symbol}`
+        );
+      }
+      if (!hasEnoughForGas) {
+        const gasTokenSymbol = (nativeBalance == null ? void 0 : nativeBalance.symbol) || this.getNativeTokenSymbol(networkShortName);
+        if (token.contractAddress) {
+          validationResult.errors.push(
+            `Insufficient ${gasTokenSymbol} for gas fees. Need ~${estimatedGasFee.toFixed(6)} ${gasTokenSymbol}, have ${nativeBalance.balance.toFixed(6)} ${gasTokenSymbol}`
+          );
+        } else {
+          validationResult.errors.push(
+            `Insufficient ${gasTokenSymbol} for payment + gas. Need ${(requiredAmount + estimatedGasFee).toFixed(6)} ${gasTokenSymbol} total, have ${tokenBalance.balance.toFixed(6)} ${gasTokenSymbol}`
+          );
+        }
+      }
+      return validationResult;
+    } catch (error) {
+      return {
+        isValid: false,
+        errors: [`Failed to check balance: ${error.message}`],
+        tokenBalance: null,
+        nativeBalance: null
+      };
+    }
+  }
+  // Estimate gas fee for the transaction
+  estimateGasFee(networkShortName, isERC20 = false) {
+    const gasEstimates = {
+      ethereum: isERC20 ? 1e-3 : 5e-4,
+      // ETH - higher for ERC-20
+      bsc: isERC20 ? 5e-4 : 3e-4,
+      // BNB - cheaper than ETH
+      polygon: isERC20 ? 0.01 : 5e-3,
+      // MATIC - very cheap
+      arbitrum: isERC20 ? 3e-4 : 2e-4,
+      // ETH on L2 - very cheap
+      optimism: isERC20 ? 3e-4 : 2e-4,
+      // ETH on L2 - very cheap
+      avalanche: isERC20 ? 1e-3 : 5e-4
+      // AVAX - moderate fees
+    };
+    return gasEstimates[networkShortName] || 1e-3;
+  }
+  // Get native token symbol for network
+  getNativeTokenSymbol(networkShortName) {
+    const nativeTokens = {
+      ethereum: "ETH",
+      bsc: "BNB",
+      polygon: "MATIC",
+      arbitrum: "ETH",
+      optimism: "ETH",
+      avalanche: "AVAX"
+    };
+    return nativeTokens[networkShortName] || "ETH";
+  }
+  // Quick balance check (just returns balance, no validation)
+  async getBalance(walletAddress, token, networkShortName) {
+    if (token.contractAddress) {
+      return await this.checkTokenBalance(walletAddress, token.contractAddress, networkShortName);
+    } else {
+      return await this.checkNativeBalance(walletAddress, networkShortName);
+    }
+  }
+  // Format balance for display
+  formatBalance(balance, symbol, decimals = 6) {
+    if (balance === null || balance === void 0) return "Unknown";
+    if (balance === 0) return `0 ${symbol}`;
+    if (balance < 1e-3) {
+      return `${balance.toFixed(8)} ${symbol}`;
+    } else if (balance < 1) {
+      return `${balance.toFixed(6)} ${symbol}`;
+    } else {
+      return `${balance.toFixed(4)} ${symbol}`;
+    }
+  }
+  // Check multiple token balances at once
+  async checkMultipleBalances(walletAddress, tokens, networkShortName) {
+    try {
+      const balancePromises = tokens.map(
+        (token) => this.getBalance(walletAddress, token, networkShortName).catch((error) => ({
+          error: error.message,
+          symbol: token.symbol,
+          balance: 0
+        }))
+      );
+      const results = await Promise.all(balancePromises);
+      return results;
+    } catch (error) {
+      throw error;
+    }
+  }
+}
+const balanceChecker = new BalanceChecker();
+class SimplePaymentAPI {
+  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) {
+      return {
+        networks: [
+          { id: "1", name: "Ethereum", shortName: "ethereum", chainId: "0x1", type: "ethereum" },
+          { id: "56", name: "BSC", shortName: "bsc", chainId: "0x38", type: "bsc" },
+          { id: "137", name: "Polygon", shortName: "polygon", chainId: "0x89", type: "polygon" },
+          { id: "42161", name: "Arbitrum", shortName: "arbitrum", chainId: "0xa4b1", type: "arbitrum" },
+          { id: "10", name: "Optimism", shortName: "optimism", chainId: "0xa", type: "optimism" },
+          { id: "43114", name: "Avalanche", shortName: "avalanche", chainId: "0xa86a", type: "avalanche" },
+          { id: "42220", name: "Celo", shortName: "celo", chainId: "0xa4ec", type: "celo" },
+          { id: "8453", name: "Base", shortName: "base", chainId: "0x2105", type: "base" }
+        ]
+      };
+    }
+  }
+  async getTokens() {
+    try {
+      return await this.request("/api/networks/stablecoins");
+    } catch (error) {
+      return {
+        stablecoins: [
+          {
+            id: "1",
+            name: "Tether USD",
+            symbol: "USDT",
+            contractAddress: "0xdAC17F958D2ee523a2206206994597C13D831ec7",
+            decimals: 6,
+            networkId: "1",
+            Network: { shortName: "ethereum", name: "Ethereum" }
+          },
+          {
+            id: "2",
+            name: "USD Coin",
+            symbol: "USDC",
+            contractAddress: "0xA0b86a33E641a3FA62e50A9da1CE0647a2bFBC5A",
+            decimals: 6,
+            networkId: "1",
+            Network: { shortName: "ethereum", name: "Ethereum" }
+          },
+          {
+            id: "3",
+            name: "Binance USD",
+            symbol: "BUSD",
+            contractAddress: "0xe9e7CEA3DedcA5984780Bafc599bD69ADd087D56",
+            decimals: 18,
+            networkId: "56",
+            Network: { shortName: "bsc", name: "BSC" }
+          },
+          {
+            id: "4",
+            name: "USD Coin",
+            symbol: "USDC",
+            contractAddress: "0x8AC76a51cc950d9822D68b83fE1Ad97B32Cd580d",
+            decimals: 18,
+            networkId: "56",
+            Network: { shortName: "bsc", name: "BSC" }
+          },
+          {
+            id: "5",
+            name: "USD Coin",
+            symbol: "USDC",
+            contractAddress: "0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174",
+            decimals: 6,
+            networkId: "137",
+            Network: { shortName: "polygon", name: "Polygon" }
+          },
+          {
+            id: "6",
+            name: "Tether USD",
+            symbol: "USDT",
+            contractAddress: "0xc2132D05D31c914a87C6611C10748AEb04B58e8F",
+            decimals: 6,
+            networkId: "137",
+            Network: { shortName: "polygon", name: "Polygon" }
+          },
+          // Arbitrum Network
+          {
+            id: "7",
+            name: "Tether USD",
+            symbol: "USDT",
+            contractAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9",
+            decimals: 6,
+            networkId: "42161",
+            Network: { shortName: "arbitrum", name: "Arbitrum" }
+          },
+          {
+            id: "8",
+            name: "USD Coin",
+            symbol: "USDC",
+            contractAddress: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
+            decimals: 6,
+            networkId: "42161",
+            Network: { shortName: "arbitrum", name: "Arbitrum" }
+          },
+          // Optimism Network
+          {
+            id: "9",
+            name: "Tether USD",
+            symbol: "USDT",
+            contractAddress: "0x94b008aA00579c1307B0EF2c499aD98a8ce58e58",
+            decimals: 6,
+            networkId: "10",
+            Network: { shortName: "optimism", name: "Optimism" }
+          },
+          {
+            id: "10",
+            name: "USD Coin",
+            symbol: "USDC",
+            contractAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85",
+            decimals: 6,
+            networkId: "10",
+            Network: { shortName: "optimism", name: "Optimism" }
+          },
+          // Avalanche Network
+          {
+            id: "11",
+            name: "Tether USD",
+            symbol: "USDT",
+            contractAddress: "0x9702230A8Ea53601f5cD2dc00fDBc13d4dF4A8c7",
+            decimals: 6,
+            networkId: "43114",
+            Network: { shortName: "avalanche", name: "Avalanche" }
+          },
+          {
+            id: "12",
+            name: "USD Coin",
+            symbol: "USDC",
+            contractAddress: "0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E",
+            decimals: 6,
+            networkId: "43114",
+            Network: { shortName: "avalanche", name: "Avalanche" }
+          },
+          // Celo Network
+          {
+            id: "13",
+            name: "Tether USD",
+            symbol: "USDT",
+            contractAddress: "0x48065fbBE25f71C9282ddf5e1cD6D6A887483D5e",
+            decimals: 6,
+            networkId: "42220",
+            Network: { shortName: "celo", name: "Celo" }
+          },
+          {
+            id: "14",
+            name: "USD Coin",
+            symbol: "USDC",
+            contractAddress: "0xcebA9300f2b948710d2653dD7B07f33A8B32118C",
+            decimals: 6,
+            networkId: "42220",
+            Network: { shortName: "celo", name: "Celo" }
+          },
+          // Base Network
+          {
+            id: "15",
+            name: "Tether USD",
+            symbol: "USDT",
+            contractAddress: "0xfde4C96c8593536E31F229EA8f37b2ADa2699bb2",
+            decimals: 6,
+            networkId: "8453",
+            Network: { shortName: "base", name: "Base" }
+          },
+          {
+            id: "16",
+            name: "USD Coin",
+            symbol: "USDC",
+            contractAddress: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+            decimals: 6,
+            networkId: "8453",
+            Network: { shortName: "base", name: "Base" }
+          }
+        ]
+      };
+    }
+  }
+  async createPayment(data) {
+    return await this.request("/api/payments/create", {
+      method: "POST",
+      body: JSON.stringify(data)
+    });
+  }
+  async updatePaymentStatus(paymentId, status, transactionHash = null) {
+    return await this.request(`/api/payments/${paymentId}/status`, {
+      method: "PUT",
+      body: JSON.stringify({ status, transactionHash })
+    });
+  }
+}
+const QRCodePayment = ({
+  apiKey,
+  apiSecret,
+  apiUrl,
+  config,
+  onSuccess,
+  onError,
+  onClose,
+  isOpen,
+  theme = "light",
+  mode = "splitpayment",
+  // Always use split payment mode for QR codes
+  splitPaymentUrl = "https://payment.coinley.io/"
+}) => {
+  var _a;
+  const [currentStep, setCurrentStep] = useState("network");
+  const [networks, setNetworks] = useState([]);
+  const [tokens, setTokens] = useState([]);
+  const [selectedNetwork, setSelectedNetwork] = useState(null);
+  const [selectedToken, setSelectedToken] = useState(null);
+  const [paymentData, setPaymentData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [qrCodeData, setQrCodeData] = useState("");
+  const [qrCodeImage, setQrCodeImage] = useState("");
+  const [connectionId, setConnectionId] = useState("");
+  const [walletConnected, setWalletConnected] = useState(false);
+  const [walletAddress, setWalletAddress] = useState("");
+  const [checkingPayment, setCheckingPayment] = useState(false);
+  const [balanceValidation, setBalanceValidation] = useState(null);
+  const api = useRef(new SimplePaymentAPI(apiUrl, apiKey, apiSecret));
+  const checkInterval = useRef(null);
+  useEffect(() => {
+    if (isOpen) {
+      loadData();
+      resetState();
+    }
+    return () => {
+      if (checkInterval.current) {
+        clearInterval(checkInterval.current);
+      }
+    };
+  }, [isOpen]);
+  const resetState = () => {
+    setCurrentStep("network");
+    setSelectedNetwork(null);
+    setSelectedToken(null);
+    setPaymentData(null);
+    setError("");
+    setQrCodeData("");
+    setQrCodeImage("");
+    setConnectionId("");
+    setWalletConnected(false);
+    setWalletAddress("");
+    setCheckingPayment(false);
+    setBalanceValidation(null);
+    if (checkInterval.current) {
+      clearInterval(checkInterval.current);
+    }
+  };
+  const loadData = async () => {
+    try {
+      setLoading(true);
+      setError("");
+      const [networksRes, tokensRes] = await Promise.all([
+        api.current.getNetworks(),
+        api.current.getTokens()
+      ]);
+      setNetworks(networksRes.networks || []);
+      setTokens(tokensRes.stablecoins || []);
+    } catch (err) {
+      setError("Failed to load payment options.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const generateSplitPaymentQRDirect = async (token) => {
+    var _a2, _b;
+    try {
+      setLoading(true);
+      setError("");
+      const paymentPayload = {
+        amount: config.amount,
+        currency: token.symbol,
+        network: selectedNetwork.shortName,
+        customerEmail: config.customerEmail,
+        callbackUrl: config.callbackUrl,
+        metadata: {
+          ...config.metadata,
+          merchantWalletAddresses: config.merchantWalletAddresses,
+          paymentMethod: "split_payment_qr",
+          selectedNetwork: selectedNetwork.shortName,
+          selectedToken: token.symbol
+        }
+      };
+      const payment = await api.current.createPayment(paymentPayload);
+      setPaymentData(payment.payment);
+      const contractAddress = ((_a2 = config.merchantWalletAddresses) == null ? void 0 : _a2.splitPaymentContract) || ((_b = config.merchantWalletAddresses) == null ? void 0 : _b[selectedNetwork.shortName]);
+      if (!contractAddress) {
+        throw new Error("Split payment contract address not found in config");
+      }
+      const params = new URLSearchParams({
+        merchant: config.merchantName || "Coinley Merchant",
+        amount: payment.payment.totalAmount.toString(),
+        productAmount: (payment.payment.totalAmount * 0.95).toFixed(2),
+        platformFee: (payment.payment.totalAmount * 0.03).toFixed(2),
+        networkFee: (payment.payment.totalAmount * 0.02).toFixed(2),
+        token: token.symbol,
+        network: selectedNetwork.name,
+        merchantAddress: contractAddress,
+        paymentId: payment.payment.id
+        // Include payment ID for backend tracking
+      });
+      const splitPaymentUri = splitPaymentUrl + "?" + params.toString();
+      setQrCodeData(splitPaymentUri);
+      const qrImage = await QRCode.toDataURL(splitPaymentUri, {
+        width: 256,
+        margin: 2,
+        color: {
+          dark: "#7c3aed",
+          light: "#ffffff"
+        }
+      });
+      setQrCodeImage(qrImage);
+      setCurrentStep("scan");
+    } catch (error2) {
+      setError(error2.message || "Failed to generate split payment QR code");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const simulateWalletScan = async () => {
+    try {
+      setLoading(true);
+      setError("");
+      const mockWalletAddress = "0x742d35Cc6634C0532925a3b8D9a5C7C47C77E4";
+      setWalletAddress(mockWalletAddress);
+      setWalletConnected(true);
+      await checkWalletBalance(mockWalletAddress);
+      setCurrentStep("confirm");
+    } catch (error2) {
+      setError("Failed to simulate wallet connection");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const checkWalletBalance = async (address) => {
+    if (!selectedToken || !selectedNetwork || !paymentData) {
+      return false;
+    }
+    try {
+      const validation = await balanceChecker.validateBalance(
+        address,
+        selectedToken,
+        paymentData.totalAmount,
+        selectedNetwork.shortName,
+        true
+      );
+      setBalanceValidation(validation);
+      if (!validation.isValid) {
+        setError(`Insufficient balance: ${validation.errors.join(", ")}`);
+        return false;
+      }
+      return true;
+    } catch (error2) {
+      setError(`Failed to check balance: ${error2.message}`);
+      return false;
+    }
+  };
+  const simulateTransaction = async () => {
+    try {
+      setCheckingPayment(true);
+      setError("");
+      const mockTxHash = `0x${Math.random().toString(16).substring(2, 66)}`;
+      await new Promise((resolve) => setTimeout(resolve, 3e3));
+      setCurrentStep("success");
+      onSuccess == null ? void 0 : onSuccess(paymentData.id, mockTxHash, {
+        network: selectedNetwork.name,
+        token: selectedToken.symbol,
+        amount: paymentData.totalAmount,
+        method: "qr_code",
+        walletAddress
+      });
+    } catch (error2) {
+      setError("Transaction confirmation failed");
+    } finally {
+      setCheckingPayment(false);
+    }
+  };
+  if (!isOpen) return null;
+  const isDark = theme === "dark";
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ jsxs("div", { className: `rounded-lg shadow-xl max-w-md w-full mx-4 ${isDark ? "bg-gray-900 text-white" : "bg-white text-gray-900"}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: `p-4 border-b flex justify-between items-center ${isDark ? "border-gray-700" : "border-gray-200"}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-center flex-1", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: mode === "splitpayment" ? "Split Payment QR" : "QR Code Payment" }),
+        config.amount && /* @__PURE__ */ jsxs("p", { className: "text-2xl font-bold text-purple-600", children: [
+          "$",
+          config.amount.toFixed(2)
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-blue-600", children: mode === "splitpayment" ? "📱 Scan to redirect to payment screen" : "📱 Scan with mobile wallet" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onClose,
+          className: `ml-4 text-gray-500 hover:text-gray-700 ${isDark ? "hover:text-gray-300" : ""}`,
+          children: "✕"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 min-h-[400px]", children: [
+      error && /* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-red-100 text-red-700 rounded border border-red-200", children: [
+        error,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setError(""),
+            className: "ml-2 text-red-500 hover:text-red-700",
+            children: "✕"
+          }
+        )
+      ] }),
+      currentStep === "network" && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-medium text-center", children: "Select Network" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: networks.map((network) => {
+          var _a2;
+          const hasAddress = (_a2 = config.merchantWalletAddresses) == null ? void 0 : _a2[network.shortName];
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => {
+                setSelectedNetwork(network);
+                setCurrentStep("token");
+              },
+              disabled: !hasAddress,
+              className: `w-full p-3 border rounded-lg text-left transition-colors ${hasAddress ? `hover:border-purple-500 ${isDark ? "border-gray-600 hover:bg-gray-800" : "border-gray-200 hover:bg-gray-50"}` : `opacity-50 cursor-not-allowed ${isDark ? "border-gray-700" : "border-gray-100"}`}`,
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "font-medium", children: network.name }),
+                /* @__PURE__ */ jsxs("div", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: [
+                  network.shortName.toUpperCase(),
+                  !hasAddress && " (No merchant address configured)"
+                ] })
+              ]
+            },
+            network.id
+          );
+        }) })
+      ] }),
+      currentStep === "token" && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setCurrentStep("network"),
+              className: `${isDark ? "text-gray-400 hover:text-gray-200" : "text-gray-500 hover:text-gray-700"}`,
+              children: "←"
+            }
+          ),
+          /* @__PURE__ */ jsxs("h3", { className: "font-medium", children: [
+            "Select Token on ",
+            selectedNetwork == null ? void 0 : selectedNetwork.name
+          ] })
+        ] }),
+        /* @__PURE__ */ 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__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              setSelectedToken(token);
+              generateSplitPaymentQRDirect(token);
+            },
+            disabled: loading,
+            className: `w-full p-3 border rounded-lg hover:border-purple-500 text-left transition-colors disabled:opacity-50 ${isDark ? "border-gray-600 hover:bg-gray-800" : "border-gray-200 hover:bg-gray-50"}`,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "font-medium", children: token.name }),
+              /* @__PURE__ */ jsx("div", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: token.symbol })
+            ]
+          },
+          token.id
+        )) })
+      ] }),
+      currentStep === "scan" && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-medium mb-4", children: mode === "splitpayment" ? "Scan QR Code to Open Payment Screen" : "Scan QR Code with Mobile Wallet" }),
+        qrCodeImage ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-4", children: [
+          /* @__PURE__ */ jsx("div", { className: `p-4 rounded-lg ${isDark ? "bg-gray-800" : "bg-gray-50"}`, children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: qrCodeImage,
+              alt: "Payment QR Code",
+              className: "mx-auto",
+              style: { width: "200px", height: "200px" }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: `text-sm space-y-1 ${isDark ? "text-gray-300" : "text-gray-600"}`, children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx("span", { children: "Amount:" }),
+              /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+                paymentData == null ? void 0 : paymentData.totalAmount,
+                " ",
+                selectedToken == null ? void 0 : selectedToken.symbol
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx("span", { children: "Network:" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: selectedNetwork == null ? void 0 : selectedNetwork.name })
+            ] }),
+            mode === "splitpayment" && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx("span", { children: "Merchant:" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: config.merchantName || "Coinley Merchant" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `p-3 rounded-lg text-xs ${isDark ? "bg-blue-900 text-blue-200" : "bg-blue-50 text-blue-600"}`, children: mode === "splitpayment" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            "📱 Scan this QR code with your mobile wallet to open the payment screen.",
+            /* @__PURE__ */ jsx("br", {}),
+            "The payment screen will auto-connect your wallet and execute the split payment."
+          ] }) : "📱 Open your mobile wallet and scan this QR code to connect and pay" }),
+          mode === "splitpayment" ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => window.open(qrCodeData, "_blank"),
+              className: "w-full bg-purple-600 text-white py-2 px-4 rounded hover:bg-purple-700 text-sm",
+              children: "🔗 Test Payment Screen (Opens in new tab)"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: simulateWalletScan,
+              disabled: loading,
+              className: "w-full bg-gray-600 text-white py-2 px-4 rounded hover:bg-gray-700 disabled:opacity-50 text-sm",
+              children: loading ? "Connecting..." : "🧪 Simulate Wallet Scan (Test)"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-8", children: [
+          /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" }),
+          /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Generating QR Code..." })
+        ] })
+      ] }) }),
+      currentStep === "confirm" && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "📱" }) }),
+          /* @__PURE__ */ jsx("h3", { className: "font-medium", children: "Mobile Wallet Connected" }),
+          /* @__PURE__ */ jsx("p", { className: `text-sm mt-2 ${isDark ? "text-gray-300" : "text-gray-600"}`, children: "Ready to complete payment" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "p-3 bg-green-50 rounded-lg border border-green-200", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-green-600 text-sm font-medium", children: "✅ Wallet Connected" }),
+            /* @__PURE__ */ jsxs("p", { className: "font-mono text-xs text-green-700 mt-1", children: [
+              walletAddress == null ? void 0 : walletAddress.slice(0, 6),
+              "...",
+              walletAddress == null ? void 0 : walletAddress.slice(-4)
+            ] })
+          ] }),
+          balanceValidation && /* @__PURE__ */ jsx("div", { className: `p-3 rounded-lg border ${balanceValidation.isValid ? "bg-green-50 border-green-200" : "bg-red-50 border-red-200"}`, children: /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-sm", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx("span", { children: "Required:" }),
+              /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+                paymentData == null ? void 0 : paymentData.totalAmount,
+                " ",
+                selectedToken == null ? void 0 : selectedToken.symbol
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx("span", { children: "Your Balance:" }),
+              /* @__PURE__ */ jsx("span", { className: `font-medium ${balanceValidation.hasEnoughTokens ? "text-green-600" : "text-red-600"}`, children: balanceChecker.formatBalance(
+                (_a = balanceValidation.tokenBalance) == null ? void 0 : _a.balance,
+                selectedToken == null ? void 0 : selectedToken.symbol
+              ) })
+            ] }),
+            balanceValidation.nativeBalance && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx("span", { children: "Gas Balance:" }),
+              /* @__PURE__ */ jsx("span", { className: `font-medium ${balanceValidation.hasEnoughForGas ? "text-green-600" : "text-red-600"}`, children: balanceChecker.formatBalance(
+                balanceValidation.nativeBalance.balance,
+                balanceValidation.nativeBalance.symbol
+              ) })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: simulateTransaction,
+              disabled: checkingPayment || !(balanceValidation == null ? void 0 : balanceValidation.isValid),
+              className: "w-full bg-green-600 text-white py-3 px-4 rounded-lg hover:bg-green-700 disabled:opacity-50 font-medium",
+              children: checkingPayment ? "Processing Payment..." : !(balanceValidation == null ? void 0 : balanceValidation.isValid) ? "Insufficient Balance" : `Confirm Payment of ${paymentData == null ? void 0 : paymentData.totalAmount} ${selectedToken == null ? void 0 : selectedToken.symbol}`
+            }
+          )
+        ] })
+      ] }),
+      currentStep === "success" && /* @__PURE__ */ jsxs("div", { className: "text-center space-y-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto", children: /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "✅" }) }),
+        /* @__PURE__ */ jsx("h3", { className: "font-medium text-green-600", children: "Payment Successful!" }),
+        /* @__PURE__ */ jsx("p", { className: `text-sm ${isDark ? "text-gray-300" : "text-gray-600"}`, children: "Transaction completed via QR code scan" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "w-full bg-green-600 text-white py-3 px-4 rounded-lg hover:bg-green-700 font-medium",
+            children: "Close"
+          }
+        )
+      ] }),
+      loading && currentStep !== "scan" && currentStep !== "confirm" && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" }) })
+    ] })
+  ] }) });
+};
+export {
+  QRCodePayment as default
+};
+//# sourceMappingURL=QRCodePayment-C50CNuFu.js.map