coinley-checkout 0.5.6 → 0.5.7

package/dist/coinley-checkout.es.js

@@ -76,7 +76,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 var _listener, _listeners, _cancelled, _allowInsecure, _gzip, _headers, _method, _timeout, _url, _body, _bodyType, _creds, _preflight, _process, _retry, _signal, _throttle, _getUrlFunc, _send, send_fn, _statusCode, _statusMessage, _headers2, _body2, _request, _error, _format, _val, _tens, _checkFormat, checkFormat_fn, _checkValue, checkValue_fn, _add, add_fn, _sub, sub_fn, _mul, mul_fn, _div, div_fn, _names, _data, _dataLength, _writeData, writeData_fn, _data2, _offset, _bytesRead, _parent, _maxInflation, _incrementBytesRead, incrementBytesRead_fn, _peekBytes, peekBytes_fn, _r, _s, _v, _networkV, _privateKey, _options, _type, _to, _data3, _nonce, _gasLimit, _gasPrice, _maxPriorityFeePerGas, _maxFeePerGas, _value, _chainId, _sig, _accessList, _maxFeePerBlobGas, _blobVersionedHashes, _kzg, _blobs, _auths, _getSerialized, getSerialized_fn, _types, _fullTypes, _encoderCache, _getEncoder, getEncoder_fn, _offset2, _tokens, _subTokenString, subTokenString_fn, _walkAsync, walkAsync_fn, _getCoder, getCoder_fn, _errors, _events, _functions, _abiCoder, _getFunction, getFunction_fn, _getEvent, getEvent_fn, _transactions, _logs, _startBlock, _iface, _iface2, _filter, _a, _supports2544, _resolver, _fetch, fetch_fn, _getResolver, getResolver_fn, _url2, _processFunc, _name, _chainId2, _plugins, _provider, _poller, _interval, _blockNumber, _poll, poll_fn, _provider2, _poll2, _running, _tag, _lastBlock, _filter2, _hash, _provider3, _filter3, _poller2, _running2, _blockNumber2, _poll3, poll_fn2, _subs, _plugins2, _pausedState, _destroyed, _networkPromise, _anyNetwork, _performCache, _lastBlockNumber, _nextTimer, _timers, _disableCcipRead, _options2, _perform, perform_fn, _call, call_fn, _checkNetwork, checkNetwork_fn, _getAccountValue, getAccountValue_fn, _getBlock, getBlock_fn, _hasSub, hasSub_fn, _getSub, getSub_fn, _provider4, _filterIdPromise, _poller3, _running3, _network, _hault, _poll4, poll_fn3, _teardown, teardown_fn, _event, _options3, _nextId, _payloads, _drainTimer, _notReady, _network2, _pendingDetectNetwork, _scheduleDrain, scheduleDrain_fn, _pollingInterval, _request2, _providerInfo;
-import React, { createContext, useContext, useState, useEffect, forwardRef, useImperativeHandle } from "react";
+import React, { createContext, useContext, useState, useEffect, useRef, forwardRef, useImperativeHandle } from "react";
 const styles = "";
 const version = "6.14.3";
 function checkType(value, type, name) {
@@ -20587,21 +20587,65 @@ const QRCode = ({
     ] }) })
   ] });
 };
-const PaymentStatus = ({ status, message, theme: theme2 = "light" }) => {
+const PaymentStatus = ({
+  status,
+  message,
+  theme: theme2 = "light",
+  // New props for success screen
+  payment = null,
+  transactionHash = null,
+  selectedPaymentMethod = null,
+  merchantName = "Merchant"
+}) => {
+  const [copiedHash, setCopiedHash] = useState(false);
+  const copyTransactionHash = () => __async(void 0, null, function* () {
+    if (transactionHash) {
+      try {
+        yield navigator.clipboard.writeText(transactionHash);
+        setCopiedHash(true);
+        setTimeout(() => setCopiedHash(false), 2e3);
+      } catch (err) {
+        console.error("Failed to copy transaction hash:", err);
+      }
+    }
+  });
+  const formatTransactionHash = (hash2) => {
+    if (!hash2)
+      return "";
+    if (hash2.length <= 16)
+      return hash2;
+    return `${hash2.slice(0, 8)}...${hash2.slice(-8)}`;
+  };
+  const getNetworkDisplayName = (network) => {
+    const names2 = {
+      ethereum: "Ethereum",
+      bsc: "BSC",
+      tron: "TRON",
+      algorand: "Algorand"
+    };
+    return names2[network] || network;
+  };
+  const formatRecipientAddress = (address) => {
+    if (!address)
+      return "N/A";
+    if (address.length <= 16)
+      return address;
+    return `${address.slice(0, 6)}...${address.slice(-4)}`;
+  };
   const renderIcon = () => {
     switch (status) {
       case "processing":
         return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-4 border-t-blue-500 border-blue-500/20" });
       case "success":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-full h-12 w-12 bg-green-100 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        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-8 w-8 text-green-500",
+            className: "h-10 w-10 text-white",
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
-            strokeWidth: 2,
+            strokeWidth: 3,
             children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
           }
         ) });
@@ -20646,43 +20690,119 @@ const PaymentStatus = ({ status, message, theme: theme2 = "light" }) => {
         return theme2 === "dark" ? "text-gray-300" : "text-gray-600";
     }
   };
+  if (status === "success") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-6", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-6", children: renderIcon() }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-2xl font-bold mb-3 ${theme2 === "dark" ? "text-white" : "text-gray-900"}`, children: "Payment Successful" }),
+      payment && selectedPaymentMethod && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: `text-center mb-6 ${theme2 === "dark" ? "text-gray-300" : "text-gray-600"}`, children: [
+        "Your payment of ",
+        payment.totalAmount || payment.amount,
+        " ",
+        selectedPaymentMethod.currency,
+        " has been completed."
+      ] }),
+      transactionHash && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full mb-6", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm font-medium mb-2 ${theme2 === "dark" ? "text-gray-300" : "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 ${theme2 === "dark" ? "bg-gray-700 border-gray-600 hover:bg-gray-600" : "bg-gray-50 border-gray-200 hover:bg-gray-100"}`,
+            onClick: copyTransactionHash,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `font-mono text-sm ${theme2 === "dark" ? "text-gray-300" : "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 ${theme2 === "dark" ? "text-gray-400" : "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" })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-full p-4 rounded-lg border ${theme2 === "dark" ? "bg-gray-700 border-gray-600" : "bg-gray-50 border-gray-200"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-xs font-medium mb-1 ${theme2 === "dark" ? "text-gray-400" : "text-gray-500"}`, children: "Merchant ID:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm font-medium ${theme2 === "dark" ? "text-gray-300" : "text-gray-700"}`, children: merchantName })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-xs font-medium mb-1 ${theme2 === "dark" ? "text-gray-400" : "text-gray-500"}`, children: "Network:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm font-medium ${theme2 === "dark" ? "text-gray-300" : "text-gray-700"}`, children: selectedPaymentMethod ? getNetworkDisplayName(selectedPaymentMethod.network) : "N/A" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "col-span-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-xs font-medium mb-1 ${theme2 === "dark" ? "text-gray-400" : "text-gray-500"}`, children: "Recipient:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm font-mono ${theme2 === "dark" ? "text-gray-300" : "text-gray-700"}`, children: (payment == null ? void 0 : payment.recipientWallet) ? formatRecipientAddress(payment.recipientWallet) : "N/A" })
+        ] })
+      ] }) })
+    ] });
+  }
   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 ${theme2 === "dark" ? "text-white" : "text-gray-900"}`, children: getStatusTitle() }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-center ${getMessageClasses()}`, children: message }),
     status === "processing" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `mt-4 text-xs ${theme2 === "dark" ? "text-gray-400" : "text-gray-500"}`, children: "This may take a few moments. Please do not close this window." }),
-    status === "success" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `mt-4 p-2 rounded ${theme2 === "dark" ? "bg-gray-700" : "bg-gray-100"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-xs ${theme2 === "dark" ? "text-gray-300" : "text-gray-600"}`, children: "Your payment has been successfully processed. You will receive a confirmation shortly." }) })
+    status === "error" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `mt-4 p-2 rounded ${theme2 === "dark" ? "bg-gray-700" : "bg-gray-100"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-xs ${theme2 === "dark" ? "text-gray-300" : "text-gray-600"}`, children: "Please try again or contact support if the problem persists." }) })
   ] });
 };
 const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supportedNetworks = [] }) => {
+  var _a2, _b, _c;
   const [selectedNetwork, setSelectedNetwork] = useState(NETWORK_TYPES.ETHEREUM);
+  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(null);
   const [availableWallets, setAvailableWallets] = useState({});
   const [showMore, setShowMore] = useState(false);
-  useEffect(() => {
-    setAvailableWallets(detectWallets());
-  }, []);
   const networks = [
     {
       id: NETWORK_TYPES.ETHEREUM,
       name: "Ethereum",
-      description: "ERC-20"
-    },
-    {
-      id: NETWORK_TYPES.BSC,
-      name: "BSC",
-      description: "BEP-20"
+      icon: "/eth.png"
     },
     {
       id: NETWORK_TYPES.TRON,
       name: "Tron",
-      description: "TRC-20"
+      icon: "/tron.png"
     },
     {
       id: NETWORK_TYPES.ALGORAND,
       name: "Algorand",
-      description: "ASA"
+      icon: "/algo.png"
+    },
+    {
+      id: "solana",
+      name: "Solana",
+      icon: "/sol.png"
+    },
+    {
+      id: NETWORK_TYPES.BSC,
+      name: "Binance Smart Chain",
+      icon: "/bnb.png"
     }
   ];
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setDropdownOpen(false);
+      }
+    }
+    if (dropdownOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [dropdownOpen]);
+  useEffect(() => {
+    setAvailableWallets(detectWallets());
+  }, []);
   const getPaymentMethodsForNetwork = (network) => {
     const methods = [];
     switch (network) {
@@ -20734,7 +20854,7 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
             id: "ETH",
             name: "ETH",
             description: "Ethereum",
-            logo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcyJyRKN0dRJWVZqoLzYgkRHdJsxKGq8nHUw&s",
+            logo: "/eth.png",
             network: NETWORK_TYPES.ETHEREUM
           }
         );
@@ -20773,7 +20893,7 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
             id: "BNB",
             name: "BNB",
             description: "Binance Coin",
-            logo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHSjyW2sSnBhwztCwVW97i1BtV40g7heMMxg&s",
+            logo: "/bnb.png",
             network: NETWORK_TYPES.BSC
           }
         );
@@ -20841,18 +20961,22 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
   const handleNetworkChange = (networkId) => {
     setSelectedNetwork(networkId);
     setShowMore(false);
-    if ((selected == null ? void 0 : selected.network) !== networkId) {
-      onSelect(null);
-    }
+    setSelectedPaymentMethod(null);
   };
   const handleSelectPaymentMethod = (method) => {
-    var _a2;
-    onSelect({
+    var _a3;
+    const paymentMethodData = {
       currency: method.id,
       network: selectedNetwork,
-      tokenConfig: (_a2 = TOKEN_CONFIG[method.id]) == null ? void 0 : _a2[selectedNetwork],
+      tokenConfig: (_a3 = TOKEN_CONFIG[method.id]) == null ? void 0 : _a3[selectedNetwork],
       method
-    });
+    };
+    setSelectedPaymentMethod(paymentMethodData);
+  };
+  const handleProceed = () => {
+    if (selectedPaymentMethod) {
+      onSelect(selectedPaymentMethod);
+    }
   };
   const availableMethods = getPaymentMethodsForNetwork(selectedNetwork);
   const visibleMethods = showMore ? availableMethods : availableMethods.slice(0, 4);
@@ -20880,57 +21004,80 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
     };
     return isAvailable ? `${walletNames[wallet]} detected - Ready to pay` : `${walletNames[wallet]} required - Please install to continue`;
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { classname: "bg-white", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: `block text-sm font-medium mb-2 ${theme2 === "dark" ? "text-white" : "text-gray-700"}`, children: "Blockchain Network" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "select",
-        {
-          value: selectedNetwork,
-          onChange: (e) => handleNetworkChange(e.target.value),
-          className: `w-full p-3 rounded-lg border transition-colors ${theme2 === "dark" ? "bg-gray-700 border-gray-600 text-white focus:border-[#7042D2]" : "bg-white border-gray-300 text-gray-900 focus:border-[#7042D2]"} focus:outline-none focus:ring-2 focus:ring-[#7042D2] focus:ring-opacity-50`,
-          children: networks.filter((network) => supportedNetworks.length === 0 || supportedNetworks.includes(network.id)).map((network) => /* @__PURE__ */ jsxRuntimeExports.jsxs("option", { value: network.id, children: [
-            network.name,
-            " - ",
-            network.description
-          ] }, network.id))
-        }
-      )
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", ref: dropdownRef, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "w-full flex items-center justify-between px-5 py-4 bg-white rounded-2xl shadow border border-gray-200 text-gray-900 text-base font-normal focus:outline-none focus:ring-2 focus:ring-[#7042D2] focus:ring-opacity-50 transition",
+            onClick: () => setDropdownOpen((open) => !open),
+            style: { minHeight: "56px" },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "img",
+                  {
+                    src: (_a2 = networks.find((n2) => n2.id === selectedNetwork)) == null ? void 0 : _a2.icon,
+                    alt: (_b = networks.find((n2) => n2.id === selectedNetwork)) == null ? void 0 : _b.name,
+                    className: "w-6 h-6"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-base font-normal", children: (_c = networks.find((n2) => n2.id === selectedNetwork)) == null ? void 0 : _c.name })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `w-5 h-5 ml-2 transition-transform ${dropdownOpen ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
+            ]
+          }
+        ),
+        dropdownOpen && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-0 mt-2 w-full bg-white rounded-2xl shadow-lg border border-gray-100 z-20", style: { minWidth: "100%" }, children: networks.filter((network) => supportedNetworks.length === 0 || supportedNetworks.includes(network.id)).map((network) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            type: "button",
+            className: `w-full flex items-center gap-3 px-5 py-3 text-gray-900 text-base font-normal rounded-2xl transition hover:bg-gray-100 ${selectedNetwork === network.id ? "bg-gray-50" : ""}`,
+            onClick: () => {
+              setDropdownOpen(false);
+              handleNetworkChange(network.id);
+            },
+            style: { minHeight: "48px" },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: network.icon, alt: network.name, className: "w-6 h-6" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: network.name })
+            ]
+          },
+          network.id
+        )) })
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: `block text-sm font-medium mb-3 ${theme2 === "dark" ? "text-white" : "text-gray-700"}`, children: "Select Stablecoin" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-3 mb-4", children: visibleMethods.map((method) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          onClick: () => handleSelectPaymentMethod(method),
-          className: `p-1 rounded-xl transition-all duration-200 border ${(selected == null ? void 0 : selected.currency) === method.id && (selected == null ? void 0 : selected.network) === selectedNetwork ? theme2 === "dark" ? "bg-blue-900/30 border-[#7042D2] ring-2 ring-[#7042D2] ring-opacity-50" : "bg-blue-50 border-[#7042D2] ring-2 ring-[#7042D2] ring-opacity-50" : theme2 === "dark" ? "bg-gray-700 hover:bg-gray-600 border-gray-600 hover:border-gray-500" : "bg-white hover:bg-[#ECE3FF] border-gray-200 hover:border-gray-300"}`,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center text-center", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 py-2 w-10 bg-white rounded-full flex items-center justify-center mb-2 shadow-sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: method.logo, alt: method.name, className: "h-6 w-6" }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-x-2 items-center", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: `font-medium text-sm ${theme2 === "dark" ? "text-white" : "text-gray-900"}`, children: method.name }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-xs ${theme2 === "dark" ? "text-gray-300" : "text-gray-500"}`, children: method.description })
-            ] }),
-            (selected == null ? void 0 : selected.currency) === method.id && (selected == null ? void 0 : selected.network) === selectedNetwork && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                className: "h-4 w-4 text-[#7042D2]",
-                viewBox: "0 0 20 20",
-                fill: "currentColor",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "path",
-                  {
-                    fillRule: "evenodd",
-                    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
-                    clipRule: "evenodd"
-                  }
-                )
-              }
-            ) })
-          ] })
-        },
-        `${method.id}-${method.network}`
-      )) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-3 mb-4", children: visibleMethods.map((method) => {
+        const isSelected = (selectedPaymentMethod == null ? void 0 : selectedPaymentMethod.currency) === method.id && (selectedPaymentMethod == null ? void 0 : selectedPaymentMethod.network) === selectedNetwork;
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            onClick: () => handleSelectPaymentMethod(method),
+            className: `group flex items-center justify-between w-full px-5 py-4 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" },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: method.logo, alt: method.name, className: "h-6 w-6" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-base text-gray-900", children: [
+                  method.description,
+                  " (",
+                  method.name,
+                  ")"
+                ] })
+              ] }),
+              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",
         {
@@ -20940,13 +21087,23 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `p-3 rounded-lg text-sm ${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: `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"}` }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: getNetworkRequirement(selectedNetwork) })
-    ] }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        onClick: handleProceed,
+        disabled: !selectedPaymentMethod,
+        className: `w-full py-3 px-4 font-medium rounded-2xl text-lg shadow-md transition-colors ${selectedPaymentMethod ? "bg-[#7042D2] text-white hover:bg-[#5b34b1]" : "bg-gray-300 text-gray-500 cursor-not-allowed"}`,
+        style: { borderRadius: "1.5rem" },
+        children: "Proceed"
+      }
+    )
   ] });
 };
-const logo = "data:image/png;base64,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";
+const logo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAbCAYAAABm409WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMFSURBVHgBpVZBVtswEJXk7JsjmAM0hF13dWDTHeEEhF13MScgOQHmBIQT1Oy6KXFPACEHIDdouux7WNM/kuxIdvJeXpj3iOSR9P9oRjODFHtIevp6y2P21LsO9MlzLFQ0x3SKtdm2s0rsJ0PGS08XaXg6usFvjL+vuw7uS+BE3sDqLs/cOLJ6+rvrRMf/sFdWQ6F1nhUnqw2uXAmiGLMurObbzEQUJYLqHasGDvZ1xkK/P4Y3kGqCn1uAvKWny5taT3rh7bLuIEpqjdYv1fQ6WY75PDYAK4pDAtIz72OC4N47gHyjpr4z5thp1rhtYSyHUaQoMzclWmVFLw8IzEYpC081YpJAL2XXEcVuT16BW6stKYwd8KQd5PL9gtkbJCPopw547YjsqMupid0GHDpxXcWwRYAFy05U+xVgY+eGK0HyzhkyBfjAAEWd+9pyKS7gmll9lIMCv6XGb+ZqeBGSHo3flRrh+9IQz4+PxA5JB4tnQOFseRW8PibA9f848C0iJ9nTZ3ZB19zsAIm+HH3/B6BvO9YTrMts3v8pDhSVPR1n8OURfP4g2EVN0UiyD4hsKtJkmQjlnqAu80NdExDY1OaAynNoEm8dAceT+9XLxYHS8Upu3L4PdLYkHEyg8IZ/CFty28K5oP3ycQgB6d9tYFEIrpj8tlX0jKf8VpXpbcINKT17HW5bq2LABawCWKHUXgapz6LLEzNGUcwxwZkE866b99mQKm9aBL64zM7CG6E2cfngWBEtkNVDZO8MJeSciTl7bbeT3Fozv7UGtYgDDvCJaN/zwTQiEyv5yVvh12faqMknQWx96veSRrEzIN2G9S84PAHw2JLRwpG6/JCXVXzsPibhXmJJGh1N9ENwBBuucTGKjU5LV2WrkQ1C+3RiSHSJkq9HHKdmR8vM02RgLsXz3sBksoo84rKwROUmN5TXPoUp+blrOOtOY4GtOhEt4TYpzY2qcszE6dmysIkYxKXCMvv2+7eFXFxIPAT6usvtSNS9CUw/pju/Uzkrba+uAr9F/gPbu3s2LSnvkAAAAABJRU5ErkJggg==";
 const CoinleyModal = ({
   isOpen,
   onClose,
@@ -20986,13 +21143,6 @@ const CoinleyModal = ({
   const formatAmount = (amount) => {
     return parseFloat(amount).toFixed(2);
   };
-  const formatTransactionHash = (hash2) => {
-    if (!hash2)
-      return "";
-    if (hash2.length <= 14)
-      return hash2;
-    return `${hash2.slice(0, 8)}...${hash2.slice(-6)}`;
-  };
   const getNetworkDisplayName = (network) => {
     const names2 = {
       ethereum: "Ethereum",
@@ -21022,9 +21172,12 @@ const CoinleyModal = ({
   };
   if (!isOpen)
     return null;
-  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 p-6 w-full max-w-md mx-auto rounded-lg shadow-xl bg-gray-100", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "coinley-header flex justify-between items-center mb-6 p-2 rounded-xl bg-white", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-bold", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: logo, className: "w-24", alt: "Coinley Logo" }) }) }),
+  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 p-6 w-full max-w-[490px] mx-auto rounded-3xl shadow-xl bg-gray-100", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white flex justify-between items-center mb-6 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" })
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
@@ -21034,288 +21187,223 @@ const CoinleyModal = ({
         }
       )
     ] }),
-    payment && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "coinley-payment-info 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-4xl font-bold text-[#7042D2] mt-2", children: [
-          "$",
-          formatAmount(payment.totalAmount || payment.amount)
-        ] })
+    payment && /* @__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-5xl font-bold text-[#7042D2] mt-2", children: [
+        "$",
+        formatAmount(payment.totalAmount || payment.amount)
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 mt-2", children: "Payment To:" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "coinley-merchant-name text-lg mt-2", children: merchantName })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-center gap-4 text-sm", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-3 py-2 rounded-lg", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-600 text-xs", children: "Original Amount" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-semibold", children: [
-            "$",
-            formatAmount(payment.amount)
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-3 py-2 rounded-lg", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-600 text-xs", children: "Fee (1.75%)" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-semibold", children: [
-            "$",
-            formatAmount((payment.totalAmount || payment.amount) - payment.amount)
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 mt-4", children: "Payment to:" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "coinley-merchant-name text-base font-semibold mt-1", children: merchantName })
+    ] }) }),
+    step === "select-currency" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-6", 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.jsxs("div", { className: "mb-6", children: [
-      step === "select-currency" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex border-b border-gray-200", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
-          PaymentMethods,
+          "button",
           {
-            onSelect: onPaymentMethodSelect,
-            selected: selectedPaymentMethod,
-            theme: theme2,
-            supportedNetworks
+            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"
           }
         ),
-        selectedPaymentMethod && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
-            onClick: () => {
-              console.log("Proceed button clicked, calling onPaymentMethodSelect");
-              onPaymentMethodSelect(selectedPaymentMethod);
-            },
-            className: "coinley-button-primary w-full py-3 px-4 font-medium rounded-lg transition-colors",
-            disabled: !selectedPaymentMethod,
-            children: [
-              "Proceed with ",
-              selectedPaymentMethod.currency,
-              " on ",
-              getNetworkDisplayName(selectedPaymentMethod.network)
-            ]
+            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"
           }
-        ) })
-      ] }),
-      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%" })
-            ] })
+        )
+      ] }) }),
+      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' })
           ] })
-        ] }),
-        /* @__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" }) }) }),
+        ] }) })
+      ) : 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" }) }),
             /* @__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", 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..."
-        }
       ),
-      step === "success" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          PaymentStatus,
-          {
-            status: "success",
-            theme: theme2,
-            message: "Payment successful!"
-          }
-        ),
-        transactionHash && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 p-3 rounded-lg bg-gray-100", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-600 mb-1", children: "Transaction Hash:" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-mono break-all text-gray-800", children: formatTransactionHash(transactionHash) }),
-          selectedPaymentMethod && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "a",
-            {
-              href: `${getExplorerUrl(selectedPaymentMethod.network)}/${getExplorerPath(selectedPaymentMethod.network)}/${transactionHash}`,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "text-xs text-purple-600 mt-2 inline-block",
-              children: "View on Explorer →"
-            }
-          )
-        ] })
-      ] }),
-      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", 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"
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center text-xs text-gray-500", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { children: [
-      "Powered by ",
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-600", children: "Coinley" }),
-      " - Secure Cryptocurrency Payments"
-    ] }) })
+    step === "processing" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      PaymentStatus,
+      {
+        status: "processing",
+        theme: theme2,
+        message: "Processing your payment..."
+      }
+    ),
+    step === "success" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      PaymentStatus,
+      {
+        status: "success",
+        theme: theme2,
+        message: "Payment successful!",
+        payment,
+        transactionHash,
+        selectedPaymentMethod,
+        merchantName
+      }
+    ),
+    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"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center text-xs text-gray-500 flex items-center justify-center gap-1 mt-6", 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 getExplorerUrl = (network) => {
-  const explorers = {
-    ethereum: "https://etherscan.io",
-    bsc: "https://bscscan.com",
-    tron: "https://tronscan.org",
-    algorand: "https://algoexplorer.io"
-  };
-  return explorers[network] || "https://etherscan.io";
-};
-const getExplorerPath = (network) => {
-  const paths = {
-    ethereum: "tx",
-    bsc: "tx",
-    tron: "transaction",
-    algorand: "tx"
-  };
-  return paths[network] || "tx";
-};
 const CoinleyCheckout = forwardRef(({
   apiKey,
   apiSecret,