coinley-checkout 0.7.2 → 0.7.4

package/dist/coinley-checkout.es.js

@@ -18458,25 +18458,78 @@ const getWalletInstallUrl = (walletType) => {
   };
   return urls[walletType] || "";
 };
+const detectLuteWallet = () => {
+  if (typeof window === "undefined")
+    return false;
+  const luteDetectionMethods = [
+    // Check for window.lute
+    () => window.lute !== void 0,
+    // Check for window.algorand (some Algorand wallets use this)
+    () => window.algorand !== void 0,
+    // Check for AlgoSigner (alternative Algorand wallet)
+    () => window.AlgoSigner !== void 0,
+    // Check for specific Lute wallet identifiers
+    () => window.luteWallet !== void 0,
+    // Check for wallet extension in DOM
+    () => document.querySelector('[data-wallet="lute"]') !== null,
+    // Check if Lute is injected via content script
+    () => window.postMessage && document.documentElement.getAttribute("data-lute-extension") === "true"
+  ];
+  return luteDetectionMethods.some((method) => {
+    try {
+      return method();
+    } catch (error) {
+      console.warn("Lute detection method failed:", error);
+      return false;
+    }
+  });
+};
 const detectWallets = () => {
   const availableWallets = {
-    [WALLET_TYPES.METAMASK]: typeof window !== "undefined" && window.ethereum !== void 0,
+    [WALLET_TYPES.METAMASK]: typeof window !== "undefined" && window.ethereum !== void 0 && window.ethereum.isMetaMask,
     [WALLET_TYPES.TRONLINK]: typeof window !== "undefined" && window.tronWeb !== void 0,
     [WALLET_TYPES.TRUST_WALLET]: typeof window !== "undefined" && window.ethereum !== void 0 && window.ethereum.isTrust === true,
-    [WALLET_TYPES.LUTE]: typeof window !== "undefined" && window.lute !== void 0
+    [WALLET_TYPES.LUTE]: detectLuteWallet()
   };
+  if (typeof window !== "undefined") {
+    console.log("=== LUTE WALLET DETECTION DEBUG ===");
+    console.log("window.lute:", Boolean(window.lute));
+    console.log("window.algorand:", Boolean(window.algorand));
+    console.log("window.AlgoSigner:", Boolean(window.AlgoSigner));
+    console.log("window.luteWallet:", Boolean(window.luteWallet));
+    console.log("Lute detected overall:", availableWallets[WALLET_TYPES.LUTE]);
+    console.log("=== END LUTE DETECTION DEBUG ===");
+  }
   return availableWallets;
 };
-const detectWalletsWithRetry = (maxRetries = 3, delay = 500) => __async(void 0, null, function* () {
+const detectWalletsWithRetry = (maxRetries = 5, delay = 1e3) => __async(void 0, null, function* () {
   let retries = 0;
   let wallets = detectWallets();
-  const hasAnyWallet = Object.values(wallets).some((v) => v === true);
-  while (!hasAnyWallet && retries < maxRetries) {
-    console.log(`No wallets detected, retrying (${retries + 1}/${maxRetries})...`);
-    yield new Promise((resolve) => setTimeout(resolve, delay));
+  while (retries < maxRetries) {
     wallets = detectWallets();
+    const hasAnyWallet = Object.values(wallets).some((v) => v === true);
+    if (hasAnyWallet || retries >= maxRetries - 1) {
+      break;
+    }
+    console.log(`Wallet detection attempt ${retries + 1}/${maxRetries}...`);
+    console.log("Current detection results:", wallets);
+    yield new Promise((resolve) => setTimeout(resolve, delay));
     retries++;
   }
+  if (!wallets[WALLET_TYPES.LUTE]) {
+    console.log("Performing extended Lute wallet detection...");
+    if (typeof window !== "undefined") {
+      try {
+        const event = new CustomEvent("lute-wallet-detect", { detail: { source: "coinley-sdk" } });
+        window.dispatchEvent(event);
+        yield new Promise((resolve) => setTimeout(resolve, 500));
+        wallets[WALLET_TYPES.LUTE] = detectLuteWallet();
+      } catch (error) {
+        console.warn("Extended Lute detection failed:", error);
+      }
+    }
+  }
+  console.log("Final wallet detection results:", wallets);
   return wallets;
 });
 const debugWalletEnvironment = () => {
@@ -18485,6 +18538,8 @@ const debugWalletEnvironment = () => {
   console.log("ethereum:", typeof window !== "undefined" ? Boolean(window.ethereum) : "Not in browser");
   console.log("tronWeb:", typeof window !== "undefined" ? Boolean(window.tronWeb) : "Not in browser");
   console.log("lute:", typeof window !== "undefined" ? Boolean(window.lute) : "Not in browser");
+  console.log("algorand:", typeof window !== "undefined" ? Boolean(window.algorand) : "Not in browser");
+  console.log("AlgoSigner:", typeof window !== "undefined" ? Boolean(window.AlgoSigner) : "Not in browser");
   if (typeof window !== "undefined" && window.ethereum) {
     console.log("ethereum details:", {
       isTrust: window.ethereum.isTrust,
@@ -18499,8 +18554,16 @@ const debugWalletEnvironment = () => {
       defaultAddress: window.tronWeb.defaultAddress
     });
   }
+  if (typeof window !== "undefined") {
+    console.log("All window wallet properties:");
+    const walletProps = Object.keys(window).filter(
+      (key) => key.toLowerCase().includes("lute") || key.toLowerCase().includes("algo") || key.toLowerCase().includes("wallet")
+    );
+    console.log("Potential wallet properties:", walletProps);
+  }
   const wallets = detectWallets();
   console.log("Detected wallets:", wallets);
+  console.log("=== END WALLET ENVIRONMENT DEBUG ===");
 };
 const connectMetamaskWallet = () => __async(void 0, null, function* () {
   console.log("Connecting to MetaMask wallet...");
@@ -18621,27 +18684,72 @@ const connectTronlinkWallet = () => __async(void 0, null, function* () {
   }
 });
 const connectLuteWallet = () => __async(void 0, null, function* () {
+  var _a2;
   console.log("Connecting to Lute wallet...");
-  if (!window.lute) {
-    console.error("Lute not found.");
-    throw new Error("Lute not detected. Please install Lute extension.");
-  }
+  let walletProvider = null;
+  let walletName = "";
+  if (window.lute) {
+    walletProvider = window.lute;
+    walletName = "Lute";
+  } else if (window.algorand) {
+    walletProvider = window.algorand;
+    walletName = "Algorand Provider";
+  } else if (window.AlgoSigner) {
+    walletProvider = window.AlgoSigner;
+    walletName = "AlgoSigner";
+  } else if (window.luteWallet) {
+    walletProvider = window.luteWallet;
+    walletName = "Lute Wallet";
+  }
+  if (!walletProvider) {
+    console.error("No Algorand wallet detected.");
+    console.log("Available window properties:", Object.keys(window).filter(
+      (key) => key.toLowerCase().includes("lute") || key.toLowerCase().includes("algo") || key.toLowerCase().includes("wallet")
+    ));
+    throw new Error("Lute wallet not detected. Please install Lute extension or another Algorand wallet.");
+  }
+  console.log(`Found ${walletName} wallet provider:`, walletProvider);
   try {
-    const { address } = yield window.lute.connect();
+    let address = null;
+    if (walletProvider.connect) {
+      console.log("Using connect() method...");
+      const result = yield walletProvider.connect();
+      address = result.address || result;
+    } else if (walletProvider.enable) {
+      console.log("Using enable() method...");
+      const accounts = yield walletProvider.enable();
+      address = accounts[0] || accounts;
+    } else if (walletProvider.requestAccounts) {
+      console.log("Using requestAccounts() method...");
+      const accounts = yield walletProvider.requestAccounts();
+      address = accounts[0];
+    } else if (walletProvider.connect && walletName === "AlgoSigner") {
+      console.log("Using AlgoSigner connect...");
+      yield walletProvider.connect();
+      const accounts = yield walletProvider.accounts({ ledger: "MainNet" });
+      address = (_a2 = accounts[0]) == null ? void 0 : _a2.address;
+    }
     if (!address) {
-      throw new Error("No address returned. Please unlock Lute wallet.");
+      throw new Error(`No address returned from ${walletName}. Please unlock your wallet and try again.`);
     }
-    console.log("Connected to Lute wallet:", address);
+    console.log(`Connected to ${walletName} wallet:`, address);
     return {
       walletType: WALLET_TYPES.LUTE,
       address,
-      provider: window.lute,
+      provider: walletProvider,
       network: NETWORK_TYPES.ALGORAND,
-      isConnected: true
+      isConnected: true,
+      walletName
     };
   } catch (error) {
-    console.error("Error connecting to Lute wallet:", error);
-    throw error;
+    console.error(`Error connecting to ${walletName}:`, error);
+    if (error.message && error.message.includes("User rejected")) {
+      throw new Error("Connection rejected by user. Please approve the connection in your wallet.");
+    } else if (error.message && error.message.includes("locked")) {
+      throw new Error("Wallet is locked. Please unlock your wallet and try again.");
+    } else {
+      throw new Error(`Failed to connect to ${walletName}: ${error.message || "Unknown error"}`);
+    }
   }
 });
 const connectWallet = (walletType) => __async(void 0, null, function* () {
@@ -18716,16 +18824,31 @@ const sendNativeTransaction = (walletConnection, toAddress, amount) => __async(v
         );
         break;
       case WALLET_TYPES.LUTE:
-        const lute = walletConnection.provider;
+        const algorandProvider = walletConnection.provider;
         const microAlgos = Math.floor(parseFloat(amount) * 1e6);
         console.log("Sending Algos:", {
           to: toAddress,
-          amount: microAlgos
-        });
-        transaction = yield lute.sendPayment({
-          recipient: toAddress,
-          amount: microAlgos
+          amount: microAlgos,
+          walletName: walletConnection.walletName
         });
+        if (algorandProvider.sendPayment) {
+          transaction = yield algorandProvider.sendPayment({
+            recipient: toAddress,
+            amount: microAlgos
+          });
+        } else if (algorandProvider.signTransaction) {
+          const txn = {
+            to: toAddress,
+            fee: 1e3,
+            amount: microAlgos,
+            firstRound: 1e3,
+            lastRound: 2e3,
+            type: "pay"
+          };
+          transaction = yield algorandProvider.signTransaction(txn);
+        } else {
+          throw new Error(`Unsupported Algorand wallet API for ${walletConnection.walletName}`);
+        }
         break;
       default:
         throw new Error(`Unsupported wallet type: ${walletConnection.walletType}`);
@@ -18911,7 +19034,7 @@ const sendAlgorandAssetTransaction = (walletConnection, tokenConfig, toAddress,
   if (!walletConnection || !walletConnection.provider) {
     throw new Error("Algorand wallet not connected");
   }
-  const lute = walletConnection.provider;
+  const algorandProvider = walletConnection.provider;
   if (!tokenConfig || !tokenConfig.assetId) {
     throw new Error("Invalid token configuration - missing assetId");
   }
@@ -18920,20 +19043,42 @@ const sendAlgorandAssetTransaction = (walletConnection, tokenConfig, toAddress,
   const tokenDecimals = parseInt(decimals);
   const assetAmount = Math.floor(tokenAmount * Math.pow(10, tokenDecimals));
   console.log(`Sending ${tokenAmount} ${symbol} (${assetAmount} base units) to ${toAddress}`);
+  console.log(`Using wallet: ${walletConnection.walletName || "Unknown"}`);
   try {
-    const transaction = yield lute.sendAssetTransfer({
-      recipient: toAddress,
-      assetId,
-      amount: assetAmount
-    });
+    let transaction;
+    if (algorandProvider.sendAssetTransfer) {
+      console.log("Using sendAssetTransfer method...");
+      transaction = yield algorandProvider.sendAssetTransfer({
+        recipient: toAddress,
+        assetId,
+        amount: assetAmount
+      });
+    } else if (algorandProvider.signTransaction) {
+      console.log("Using signTransaction method for asset transfer...");
+      const txn = {
+        type: "axfer",
+        from: walletConnection.address,
+        to: toAddress,
+        amount: assetAmount,
+        assetIndex: assetId,
+        fee: 1e3,
+        firstRound: 1e3,
+        lastRound: 2e3
+      };
+      transaction = yield algorandProvider.signTransaction(txn);
+    } else {
+      throw new Error(`Unsupported Algorand wallet API for asset transfers in ${walletConnection.walletName || "this wallet"}`);
+    }
     console.log("Algorand asset transaction sent:", transaction);
-    return transaction.txId;
+    return transaction.txId || transaction.txID || transaction;
   } catch (error) {
     console.error("Algorand asset transaction error:", error);
     if (error.message && error.message.includes("rejected")) {
       throw new Error("Transaction rejected by user");
     } else if (error.message && error.message.includes("balance")) {
       throw new Error("Insufficient asset balance");
+    } else if (error.message && error.message.includes("opted")) {
+      throw new Error("Account not opted in to this asset. Please opt in first.");
     } else {
       throw error;
     }
@@ -21118,12 +21263,13 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
           "button",
           {
             onClick: () => handleSelectPaymentMethod(method),
-            className: `group relative flex items-center w-full px-2.5 py-3 rounded-xl border transition-all duration-200
-          ${isSelected ? "bg-[#E9DDFC]" : "bg-white border-gray-200 hover:bg-gray-50 hover:border-gray-300"}
-        `,
+            className: `group flex items-center justify-between w-full px-2 py-2 rounded-2xl border text-left transition-all duration-200 font-medium text-base
+                  ${isSelected ? "bg-[#E9DDFC] border-transparent shadow-none" : "bg-white border-gray-200 hover:bg-[#F6F2FF] hover:border-[#E9DDFC]"}
+                `,
+            style: { minHeight: "56px", padding: "0.5rem" },
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
-                typeof method.logo === "function" ? /* @__PURE__ */ jsxRuntimeExports.jsx(method.logo, { size: 24 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: method.logo, alt: method.name, className: "h-6 w-6 object-contain" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-x-2", children: [
+                typeof method.logo === "function" ? /* @__PURE__ */ jsxRuntimeExports.jsx(method.logo, { size: 24 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: method.logo, alt: method.name, className: "h-4 w-4" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-sm text-gray-900", children: [
                   method.description,
                   " (",
@@ -21131,12 +21277,20 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
                   ")"
                 ] })
               ] }),
-              isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center justify-center w-5 h-5 rounded-full bg-[#7042D2] ml-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4 8.5L7 11.5L12 6.5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+              isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 flex items-center justify-center w-6 h-6 rounded-full bg-[#7042D2]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4 8.5L7 11.5L12 6.5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
             ]
           },
           `${method.id}-${method.network}`
         );
-      }) })
+      }) }),
+      availableMethods.length > 4 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: () => setShowMore(!showMore),
+          className: `w-full py-2 px-4 rounded-lg text-sm font-medium transition-colors ${theme2 === "dark" ? "bg-gray-700 text-gray-300 hover:bg-gray-600" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
+          children: showMore ? "Show Less" : `Show More (${availableMethods.length - 4} more)`
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `p-3 rounded-lg text-sm mb-6 ${theme2 === "dark" ? "bg-gray-800 text-gray-300" : "bg-gray-50 text-gray-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-2 h-2 rounded-full mr-2 ${availableWallets[getRequiredWallet(selectedNetwork)] ? "bg-green-500" : "bg-red-500"}` }),
@@ -21233,261 +21387,251 @@ const CoinleyModal = ({
   };
   if (!isOpen)
     return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-50 overflow-y-auto", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        className: "fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm transition-opacity",
-        onClick: onClose
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex min-h-screen items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        className: "coinley-modal relative w-full shadow-xl bg-gray-100 rounded-3xl",
-        style: {
-          maxWidth: "534px",
-          aspectRatio: "534 / 800"
-        },
-        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-6 px-4", 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("img", { src: logo, className: "w-auto h-auto", alt: "Coinley Logo" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-lg font-semibold text-gray-800", children: "Payment Details" })
-            ] }),
-            step !== "success" && step !== "processing" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 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: "coinley-modal relative py-6 px-2 w-full max-w-md mx-auto shadow-xl bg-gray-100 rounded-3xl",
+      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("img", { src: logo, className: "w-auto h-auto", alt: "Coinley Logo" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-lg font-semibold text-gray-800", children: "Payment Details" })
+          ] }),
+          step !== "success" && step !== "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" }) })
+            }
+          )
+        ] }),
+        payment && step !== "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: "coinley-amount-display text-2xl md:text-4xl lg:text-6xl font-bold text-[#7042D2] mt-2 leading-tight tracking-tight", children: [
+            "$",
+            formatAmount(payment.totalAmount || payment.amount)
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 mt-4", children: "Payment to:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "coinley-merchant-name text-base font-semibold mt-1 flex gap-2 items-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" }) }),
+            merchantName
+          ] })
+        ] }) }),
+        step === "select-currency" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pb-6 pt-6 px-6 bg-white rounded-t-2xl blockchain-network", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          PaymentMethods,
+          {
+            onSelect: onPaymentMethodSelect,
+            selected: selectedPaymentMethod,
+            theme: theme2,
+            supportedNetworks
+          }
+        ) }),
+        step === "confirm" && selectedPaymentMethod && payment && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 rounded-lg mb-4 bg-gray-100", 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", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-600 font-semibold", children: "Currency:" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selectedPaymentMethod.currency })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-600 font-semibold", children: "Network:" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: getNetworkDisplayName(selectedPaymentMethod.network) })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-600 font-semibold", children: "Fee:" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "1.75%" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-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: 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" }) })
+                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"
               }
             )
-          ] }),
-          payment && step !== "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-[50px] md:text-[60px] lg:text-[70px] font-bold leading-[100%] tracking-[0] text-center text-[#7042D2] mt-2", children: [
-              "$",
-              formatAmount(payment.totalAmount || payment.amount)
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 mt-4", children: "Payment to:" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "coinley-merchant-name text-base font-semibold mt-1 flex items-center justify-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "14", viewBox: "0 0 16 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M13.3 4.50065L13.8 7.00065H2.2L2.7 4.50065H13.3ZM14.6667 0.333984H1.33333V2.00065H14.6667V0.333984ZM14.6667 2.83398H1.33333L0.5 7.00065V8.66732H1.33333V13.6673H9.66667V8.66732H13V13.6673H14.6667V8.66732H15.5V7.00065L14.6667 2.83398ZM3 12.0007V8.66732H8V12.0007H3Z", fill: "#7042D2" }) }),
-              merchantName
-            ] })
           ] }) }),
-          step === "select-currency" && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white rounded-t-[24px] pb-6 px-6 pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              PaymentMethods,
+          testMode ? (
+            // Test mode payment option
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 rounded-lg mb-4 bg-blue-50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-purple-600 rounded-full p-2 mr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium text-gray-800", children: "Test Mode Payment" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600", children: 'Click "Pay Now" to simulate a successful payment' })
+              ] })
+            ] }) })
+          ) : paymentType === "qrcode" ? (
+            // QR Code payment option
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              QRCode,
               {
-                onSelect: onPaymentMethodSelect,
-                selected: selectedPaymentMethod,
-                theme: theme2,
-                supportedNetworks
+                walletAddress: getWalletAddressForNetwork(),
+                amount: payment.totalAmount || payment.amount,
+                currency: selectedPaymentMethod.currency,
+                network: selectedPaymentMethod.network,
+                theme: theme2
               }
-            ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white px-6 pb-6 rounded-b-2xl", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500", children: [
-              "Powered by ",
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[#7042D2] font-medium", children: "Coinley" }),
-              " - Secure Cryptocurrency Payments",
-              /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "inline-block ml-1 w-4 h-4", width: "11", height: "11", viewBox: "0 0 11 11", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0.82975 1.7534C0.625 2.04482 0.625 2.91148 0.625 4.64319V5.49578C0.625 8.54969 2.92113 10.0322 4.36196 10.6611C4.7525 10.8317 4.94804 10.9173 5.5 10.9173C6.0525 10.9173 6.2475 10.8317 6.63804 10.6611C8.07888 10.0317 10.375 8.55023 10.375 5.49578V4.64319C10.375 2.91094 10.375 2.04482 10.1702 1.7534C9.96604 1.46253 9.15192 1.18357 7.52313 0.626193L7.21275 0.520026C6.36396 0.229151 5.93983 0.0839844 5.5 0.0839844C5.06017 0.0839844 4.63604 0.229151 3.78725 0.520026L3.47688 0.625651C1.84808 1.18357 1.03396 1.46253 0.82975 1.7534ZM7.1575 4.68815C7.19303 4.64832 7.22037 4.60187 7.23795 4.55148C7.25553 4.50108 7.26302 4.44771 7.25997 4.39442C7.25693 4.34113 7.24342 4.28896 7.22021 4.24089C7.19701 4.19282 7.16456 4.14979 7.12473 4.11426C7.0849 4.07872 7.03845 4.05139 6.98805 4.03381C6.93765 4.01622 6.88429 4.00874 6.83099 4.01178C6.7777 4.01483 6.72553 4.02834 6.67746 4.05154C6.62939 4.07475 6.58636 4.10719 6.55083 4.14703L4.91988 5.97461L4.44863 5.44703C4.3766 5.36744 4.27601 5.31959 4.16883 5.31393C4.06164 5.30828 3.95657 5.34526 3.87657 5.41682C3.79657 5.48838 3.74814 5.58869 3.74185 5.69584C3.73557 5.80299 3.77195 5.90828 3.84304 5.98869L4.61654 6.85536C4.65465 6.89805 4.70135 6.93221 4.75357 6.95559C4.8058 6.97898 4.86238 6.99107 4.9196 6.99107C4.97683 6.99107 5.03341 6.97898 5.08563 6.95559C5.13786 6.93221 5.18456 6.89805 5.22267 6.85536L7.1575 4.68815Z", fill: "#0D9A22" }) })
-            ] }) }) })
-          ] }),
-          step === "confirm" && selectedPaymentMethod && payment && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 rounded-lg mb-4 bg-gray-100", 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", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-600 font-semibold", children: "Currency:" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selectedPaymentMethod.currency })
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-600 font-semibold", children: "Network:" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: getNetworkDisplayName(selectedPaymentMethod.network) })
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-600 font-semibold", children: "Fee:" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "1.75%" })
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-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"
-                }
-              )
-            ] }) }),
-            testMode ? (
-              // Test mode payment option
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 rounded-lg mb-4 bg-blue-50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-purple-600 rounded-full p-2 mr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }) }),
+            ) })
+          ) : (
+            // Wallet connection option
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3 mb-4", children: [
+              supportedWallets.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 rounded-lg bg-yellow-50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6 text-yellow-500 mr-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium text-gray-800", children: "Test Mode Payment" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600", children: 'Click "Pay Now" to simulate a successful payment' })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium text-gray-800", children: "No Compatible Wallets" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-600", children: [
+                    "No wallets detected for ",
+                    getNetworkDisplayName(selectedPaymentMethod.network),
+                    " network"
+                  ] })
                 ] })
-              ] }) })
-            ) : paymentType === "qrcode" ? (
-              // QR Code payment option
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                QRCode,
-                {
-                  walletAddress: getWalletAddressForNetwork(),
-                  amount: payment.totalAmount || payment.amount,
-                  currency: selectedPaymentMethod.currency,
-                  network: selectedPaymentMethod.network,
-                  theme: theme2
-                }
-              ) })
-            ) : (
-              // Wallet connection option
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3 mb-4", children: [
-                supportedWallets.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 rounded-lg bg-yellow-50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6 text-yellow-500 mr-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
+              ] }) }) : supportedWallets.map((walletType) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 rounded-lg bg-blue-50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "img",
+                    {
+                      src: getWalletIcon(walletType),
+                      alt: getWalletDisplayName(walletType),
+                      className: "w-8 h-8 mr-3",
+                      onError: (e) => {
+                        e.target.style.display = "none";
+                      }
+                    }
+                  ),
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium text-gray-800", children: "No Compatible Wallets" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium text-gray-800", children: getWalletDisplayName(walletType) }),
                     /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-600", children: [
-                      "No wallets detected for ",
-                      getNetworkDisplayName(selectedPaymentMethod.network),
-                      " network"
+                      "Pay with ",
+                      getWalletDisplayName(walletType)
                     ] })
                   ] })
-                ] }) }) : supportedWallets.map((walletType) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 rounded-lg bg-blue-50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "img",
-                      {
-                        src: getWalletIcon(walletType),
-                        alt: getWalletDisplayName(walletType),
-                        className: "w-8 h-8 mr-3",
-                        onError: (e) => {
-                          e.target.style.display = "none";
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium text-gray-800", children: getWalletDisplayName(walletType) }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-600", children: [
-                        "Pay with ",
-                        getWalletDisplayName(walletType)
-                      ] })
-                    ] })
-                  ] }),
-                  (walletConnection == null ? void 0 : walletConnection.walletType) === walletType ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-green-600", children: "Connected" })
-                  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "button",
-                    {
-                      onClick: () => {
-                        console.log("Connect wallet button clicked for:", walletType);
-                        onConnectWallet(walletType);
-                      },
-                      className: "coinley-button-primary py-2 px-4 font-medium rounded-md text-sm",
-                      children: "Connect"
-                    }
-                  )
-                ] }) }, walletType)),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: Object.entries(availableWallets).filter(([walletType, isAvailable]) => !isAvailable).map(([walletType]) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 rounded-lg bg-gray-50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
-                    getWalletDisplayName(walletType),
-                    " not detected"
-                  ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "a",
-                    {
-                      href: getWalletInstallUrl(walletType),
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      className: "text-sm text-purple-600 hover:underline",
-                      children: "Install"
-                    }
-                  )
-                ] }) }, walletType)) })
-              ] })
-            ),
-            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", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: onBack,
-                  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: () => onPayment(paymentType === "qrcode"),
-                  className: "coinley-button-primary w-full py-2 px-4 font-medium rounded-md",
-                  disabled: !testMode && paymentType === "wallet" && !walletConnection,
-                  children: paymentType === "qrcode" ? "I have sent the payment" : "Pay Now"
-                }
-              )
+                ] }),
+                (walletConnection == null ? void 0 : walletConnection.walletType) === walletType ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-green-600", children: "Connected" })
+                ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    onClick: () => {
+                      console.log("Connect wallet button clicked for:", walletType);
+                      onConnectWallet(walletType);
+                    },
+                    className: "coinley-button-primary py-2 px-4 font-medium rounded-md text-sm",
+                    children: "Connect"
+                  }
+                )
+              ] }) }, walletType)),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: Object.entries(availableWallets).filter(([walletType, isAvailable]) => !isAvailable).map(([walletType]) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 rounded-lg bg-gray-50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                  getWalletDisplayName(walletType),
+                  " not detected"
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "a",
+                  {
+                    href: getWalletInstallUrl(walletType),
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "text-sm text-purple-600 hover:underline",
+                    children: "Install"
+                  }
+                )
+              ] }) }, walletType)) })
             ] })
-          ] }),
-          step === "processing" && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            PaymentStatus,
-            {
-              status: "processing",
-              theme: theme2,
-              message: "Processing your payment...",
-              processingStartTime,
-              paymentNetwork: paymentNetwork || (selectedPaymentMethod == null ? void 0 : selectedPaymentMethod.network),
-              transactionHash
-            }
-          ),
-          step === "success" && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            PaymentStatus,
-            {
-              status: "success",
-              theme: theme2,
-              message: "Payment successful!",
-              payment,
-              transactionHash,
-              selectedPaymentMethod,
-              merchantName,
-              onClose: handleSuccessClose,
-              pendingBackendConfirmation
-            }
           ),
-          step === "error" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          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", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
-              PaymentStatus,
+              "button",
               {
-                status: "error",
-                theme: theme2,
-                message: error || "An error occurred while processing your payment."
+                type: "button",
+                onClick: onBack,
+                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: onBack,
-                className: "mt-4 w-full py-2 px-4 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium rounded-md",
-                children: "Try Again"
+                onClick: () => onPayment(paymentType === "qrcode"),
+                className: "coinley-button-primary w-full py-2 px-4 font-medium rounded-md",
+                disabled: !testMode && paymentType === "wallet" && !walletConnection,
+                children: paymentType === "qrcode" ? "I have sent the payment" : "Pay Now"
               }
             )
           ] })
+        ] }),
+        step === "processing" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          PaymentStatus,
+          {
+            status: "processing",
+            theme: theme2,
+            message: "Processing your payment...",
+            processingStartTime,
+            paymentNetwork: paymentNetwork || (selectedPaymentMethod == null ? void 0 : selectedPaymentMethod.network),
+            transactionHash
+          }
+        ),
+        step === "success" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          PaymentStatus,
+          {
+            status: "success",
+            theme: theme2,
+            message: "Payment successful!",
+            payment,
+            transactionHash,
+            selectedPaymentMethod,
+            merchantName,
+            onClose: handleSuccessClose,
+            pendingBackendConfirmation
+          }
+        ),
+        step === "error" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            PaymentStatus,
+            {
+              status: "error",
+              theme: theme2,
+              message: error || "An error occurred while processing your payment."
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onBack,
+              className: "mt-4 w-full py-2 px-4 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium rounded-md",
+              children: "Try Again"
+            }
+          )
+        ] }),
+        step !== "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-[12px] ", 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 CoinleyCheckout = forwardRef(({
   apiKey,