coinley-checkout 0.5.1 → 0.5.3

package/dist/coinley-checkout.es.js

@@ -20665,22 +20665,22 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
     {
       id: NETWORK_TYPES.ETHEREUM,
       name: "Ethereum",
-      description: "ERC-20 tokens"
+      description: "ERC-20"
     },
     {
       id: NETWORK_TYPES.BSC,
-      name: "BSC (Binance Smart Chain)",
-      description: "BEP-20 tokens"
+      name: "BSC",
+      description: "BEP-20"
     },
     {
       id: NETWORK_TYPES.TRON,
       name: "Tron",
-      description: "TRC-20 tokens"
+      description: "TRC-20"
     },
     {
       id: NETWORK_TYPES.ALGORAND,
       name: "Algorand",
-      description: "ASA tokens"
+      description: "ASA"
     }
   ];
   const getPaymentMethodsForNetwork = (network) => {
@@ -20881,7 +20881,6 @@ 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", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-lg font-medium mb-4 ${theme2 === "dark" ? "text-white" : "text-gray-800"}`, children: "Select Payment Method" }),
     /* @__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(
@@ -20904,10 +20903,10 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
         "button",
         {
           onClick: () => handleSelectPaymentMethod(method),
-          className: `p-4 rounded-lg transition-all duration-200 border-1 ${(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-gray-50 border-gray-200 hover:border-gray-300"}`,
+          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 h-10 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", { 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 })
             ] }),
@@ -21023,9 +21022,9 @@ const CoinleyModal = ({
   };
   if (!isOpen)
     return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto bg-black/50", 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", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "coinley-header flex justify-between items-center mb-6", 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-32", 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-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" }) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
@@ -21036,38 +21035,33 @@ const CoinleyModal = ({
       )
     ] }),
     payment && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "coinley-payment-info mb-6", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 mb-1", children: "Total Amount" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "coinley-amount-display text-3xl font-bold", 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-extrabold", children: [
           "$",
           formatAmount(payment.totalAmount || payment.amount)
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600 mb-1", children: "Payment To" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600", children: "Payment To" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "coinley-merchant-name text-lg", children: merchantName })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white/50 px-3 py-2 rounded-lg", children: [
+      /* @__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: "bg-white/50 px-3 py-2 rounded-lg", children: [
+        /* @__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-center mt-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500", children: [
-        "Payment ID: ",
-        payment.id ? payment.id.slice(0, 8) : "",
-        "..."
-      ] }) })
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [
       debug && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-2 text-right", children: /* @__PURE__ */ jsxRuntimeExports.jsx(