coinley-checkout 0.7.2 → 0.7.3

package/dist/coinley-checkout.es.js

@@ -21118,12 +21118,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 +21132,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 +21242,248 @@ 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.jsx("div", { className: "coinley-merchant-name text-base font-semibold mt-1", children: 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,