coinley-checkout 0.6.2 → 0.6.4

package/dist/coinley-checkout.es.js

@@ -20538,21 +20538,6 @@ const QRCode = ({
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium text-gray-700", children: getNetworkDisplayName(network) })
       ] })
     ] }),
-    !qrError && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full mb-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 mb-1 text-center", children: "Or copy wallet address:" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          className: "text-xs font-mono p-2 rounded bg-gray-100 text-gray-700 break-all text-center select-all cursor-pointer border",
-          onClick: () => {
-            var _a2;
-            return (_a2 = navigator.clipboard) == null ? void 0 : _a2.writeText(walletAddress);
-          },
-          title: "Click to copy",
-          children: walletAddress
-        }
-      )
-    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-3 rounded bg-blue-50 border border-blue-200", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("h4", { className: "text-sm font-medium mb-2 text-blue-800 flex items-center", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4 mr-1", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
@@ -20748,12 +20733,14 @@ const PaymentStatus = ({
   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: [
+      /* @__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 max-w-[235px] mb-6 ${theme2 === "dark" ? "text-gray-300" : "text-gray-600"}`, children: [
         "Your payment of ",
-        payment.totalAmount || payment.amount,
-        " ",
-        selectedPaymentMethod.currency,
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[#7042D2] font-semibold", children: [
+          payment.totalAmount || payment.amount,
+          " ",
+          selectedPaymentMethod.currency
+        ] }),
         " has been completed."
       ] }),
       transactionHash && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full mb-6", children: [
@@ -20870,8 +20857,28 @@ const PaymentStatus = ({
     /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-center ${getMessageClasses()}`, children: message })
   ] });
 };
+const EthIcon = ({ size = 24 }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_2786_457)", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M15.9979 5L15.845 5.52398V20.7287L15.9979 20.8826L22.9958 16.7107L15.9979 5Z", fill: "#343434" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M15.9979 5L9 16.7107L15.9979 20.8826V13.5027V5Z", fill: "#8C8C8C" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M15.9979 22.2186L15.9117 22.3245V27.7408L15.9979 27.9945L23 18.0488L15.9979 22.2186Z", fill: "#3C3C3B" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M15.9979 27.9945V22.2186L9 18.0488L15.9979 27.9945Z", fill: "#8C8C8C" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M15.9979 20.8818L22.9957 16.7099L15.9979 13.502V20.8818Z", fill: "#141414" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9.00006 16.7099L15.9979 20.8818V13.502L9.00006 16.7099Z", fill: "#393939" })
+  ] }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "clip0_2786_457", children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "14", height: "23", fill: "white", transform: "translate(9 5)" }) }) })
+] });
+const TronIcon = ({ size = 32 }) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: size, height: size + 1, viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.42 8.68534C8.48853 8.61041 8.57583 8.55514 8.67287 8.52525C8.76992 8.49536 8.87319 8.49194 8.972 8.51534L20.875 11.4293C20.947 11.445 21.0146 11.4765 21.073 11.5213L23.495 13.2883C23.6127 13.3751 23.6923 13.5039 23.7173 13.6479C23.7422 13.792 23.7106 13.9401 23.629 14.0613L15.297 26.2523C15.2385 26.3388 15.1571 26.4074 15.0619 26.4503C14.9667 26.4932 14.8614 26.5088 14.7579 26.4953C14.6543 26.4818 14.5566 26.4398 14.4755 26.3739C14.3945 26.308 14.3334 26.2209 14.299 26.1223L8.306 9.25234C8.27276 9.15648 8.2657 9.05348 8.28557 8.95398C8.30543 8.85448 8.3515 8.76209 8.419 8.68634M10.383 11.7293L14.543 23.4413L15.227 17.3723L10.383 11.7293ZM16.341 17.5673L15.646 23.7423L21.529 15.1323L16.341 17.5673ZM22.06 13.6373L18.269 15.4173L20.809 12.7263L22.06 13.6373ZM19.664 12.2943L10.411 10.0303L15.836 16.3483L19.664 12.2943Z", fill: "black" }) });
+const AlgorandIcon = ({ size = 32 }) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: size, height: size + 1, viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M17.2512 9.5H19.7036L20.7785 13.4753H23.3083L21.5804 16.4753L24 25.4973H21.4916L19.8625 19.446L16.3592 25.4987H13.5597L18.9725 16.1313L18.1018 12.8793L10.8022 25.5H8L17.2512 9.5Z", fill: "black" }) });
+const SolanaIcon = ({ size = 32 }) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: size, height: size + 1, viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.52513 16.0195H20.7032C20.843 16.0195 20.9713 16.0794 21.0762 16.1873L22.8479 18.0574C23.1742 18.4051 22.9411 18.9925 22.4749 18.9925H11.2968C11.157 18.9925 11.0287 18.9326 10.9238 18.8247L9.15214 16.9545C8.82577 16.6069 9.05889 16.0195 9.52513 16.0195ZM9.15214 13.538L10.9238 11.6678C11.0171 11.5599 11.157 11.5 11.2968 11.5H22.4632C22.9295 11.5 23.1626 12.0874 22.8362 12.4351L21.0762 14.3052C20.9829 14.4131 20.843 14.473 20.7032 14.473H9.52513C9.05889 14.473 8.82577 13.8856 9.15214 13.538ZM22.8362 21.462L21.0645 23.3322C20.9596 23.4401 20.8314 23.5 20.6915 23.5H9.52513C9.05889 23.5 8.82577 22.9126 9.15214 22.5649L10.9238 20.6948C11.0171 20.5869 11.157 20.527 11.2968 20.527H22.4632C22.9295 20.527 23.1626 21.1144 22.8362 21.462Z", fill: "black" }) });
+const BscIcon = ({ size = 32 }) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: size, height: size + 1, viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19.0827 18.7809L20.8947 20.5933L15.9927 25.5L11.0907 20.594L12.902 18.7809L15.9927 21.8905L19.0827 18.7809ZM22.174 15.6873L24 17.4997L22.19 19.3121L20.3787 17.4997L22.174 15.6873ZM15.9927 15.6873L17.8033 17.4837L15.992 19.2967L14.1813 17.4997L15.9927 15.6873ZM9.81067 15.6873L11.6067 17.4997L9.812 19.2961L8 17.4997L9.81067 15.6873ZM15.9933 9.5L20.8933 14.39L19.082 16.2018L15.9933 13.1088L12.9027 16.2184L11.0913 14.406L15.9933 9.5Z", fill: "black" }) });
+const PyusdIcon = ({ size = 32 }) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: size - 4, height: size - 4, viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.36266 4.256C8.38876 4.0477 8.48986 3.85605 8.64705 3.7169C8.80423 3.57775 9.00673 3.50064 9.21666 3.5H17.0847C17.9472 3.55674 18.7895 3.78654 19.5613 4.1757C20.3331 4.56486 21.0187 5.10541 21.5772 5.76515C22.1357 6.42489 22.5557 7.19031 22.8121 8.0158C23.0685 8.84129 23.1561 9.70994 23.0697 10.57C22.6847 15.659 18.6737 17.5 16.5807 17.5H13.8367L12.6677 23.786C12.6333 23.987 12.5285 24.1693 12.372 24.3001C12.2156 24.431 12.0176 24.5018 11.8137 24.5H6.61966C6.49561 24.4979 6.3734 24.4696 6.26099 24.4171C6.14859 24.3646 6.04851 24.289 5.96728 24.1952C5.88604 24.1014 5.82548 23.9916 5.78954 23.8728C5.75359 23.7541 5.74307 23.6291 5.75866 23.506L7.05366 14H5.76566C5.65113 13.9998 5.53775 13.9771 5.43205 13.933C5.32635 13.8888 5.23041 13.8243 5.14975 13.743C5.06909 13.6616 5.00529 13.5652 4.96203 13.4591C4.91877 13.3531 4.89689 13.2395 4.89766 13.125C4.89766 12.642 5.28266 12.25 5.76566 12.25H7.29166L7.76066 8.75H5.76566C5.65113 8.74985 5.53775 8.72706 5.43205 8.68295C5.32635 8.63884 5.23041 8.57427 5.14975 8.49296C5.06909 8.41164 5.00529 8.31519 4.96203 8.20914C4.91877 8.10309 4.89689 7.98953 4.89766 7.875C4.89612 7.76084 4.91723 7.64751 4.95978 7.54157C5.00233 7.43563 5.06547 7.33918 5.14554 7.2578C5.22562 7.17643 5.32104 7.11174 5.42628 7.06749C5.53152 7.02324 5.6445 7.0003 5.75866 7H7.99166L8.36266 4.256ZM9.50366 8.75L9.02766 12.25H15.2787C15.51 12.2579 15.7404 12.218 15.9555 12.1326C16.1707 12.0473 16.3659 11.9185 16.5289 11.7541C16.6919 11.5898 16.8191 11.3936 16.9027 11.1778C16.9863 10.962 17.0244 10.7312 17.0147 10.5C17.0244 10.2688 16.9863 10.038 16.9027 9.82219C16.8191 9.60638 16.6919 9.41017 16.5289 9.24586C16.3659 9.08155 16.1707 8.95269 15.9555 8.86736C15.7404 8.78203 15.51 8.74208 15.2787 8.75H9.50366ZM8.79666 14H15.2787C15.738 14.0048 16.1936 13.9173 16.6184 13.7426C17.0433 13.568 17.4287 13.3098 17.7519 12.9833C18.0751 12.6569 18.3294 12.2689 18.4998 11.8423C18.6701 11.4157 18.7531 10.9593 18.7437 10.5C18.7437 8.54 17.2457 7 15.2787 7H9.74166L9.97266 5.25H16.9727C17.6045 5.28987 18.2218 5.45727 18.7872 5.74209C19.3527 6.02692 19.8546 6.42329 20.2627 6.90731C20.6709 7.39132 20.9768 7.95297 21.1621 8.55839C21.3473 9.16381 21.4081 9.80047 21.3407 10.43C21.0397 14.441 17.9457 15.75 16.5807 15.75H13.1157C12.9126 15.7514 12.7163 15.8234 12.5605 15.9537C12.4047 16.084 12.299 16.2644 12.2617 16.464L11.0997 22.75H7.61366L8.79666 14Z", fill: "#3B6FEF" }) });
+const UsdpIcon = ({ size = 32 }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: size - 5, height: size - 5, viewBox: "0 0 27 27", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M13.5 27C20.9558 27 27 20.9558 27 13.5C27 6.04416 20.9558 0 13.5 0C6.04416 0 0 6.04416 0 13.5C0 20.9558 6.04416 27 13.5 27Z", fill: "#398260" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M15.6963 5.83207C17.1627 6.86735 18.6899 6.98294 20.6432 7.34238C22.4201 7.67229 22.7973 9.48719 21.9856 11.7974C21.9365 11.7143 21.8859 11.6322 21.8337 11.551L21.9856 11.7974C23.2234 13.9 23.2141 16.1773 20.5352 17.3425C15.7655 19.4181 15.4811 23.5061 10.973 21.3056C10.3338 20.991 9.75978 20.5585 9.28125 20.0307L9.10575 19.8307L8.9429 19.8029C5.91722 19.2671 3.93103 17.6269 5.76872 13.4419C7.39462 9.74369 5.94253 6.1046 10.9291 6.2666H10.9308C12.3044 4.97819 13.8881 4.55885 15.6954 5.83207H15.6963ZM11.0497 9.57157C8.95894 11.0726 8.27044 13.8679 9.66262 16.0389C9.99149 16.5546 10.4192 17 10.921 17.3496C11.4228 17.6992 11.9889 17.946 12.5866 18.0758C13.1842 18.2056 13.8017 18.2159 14.4033 18.1059C15.0049 17.996 15.5789 17.7681 16.092 17.4353C18.2503 16.0347 18.5456 13.3178 17.4791 10.9663C16.3865 8.55569 13.3869 7.89335 11.0497 9.57157Z", fill: "white" })
+] });
 const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supportedNetworks = [] }) => {
-  var _a2, _b, _c;
+  var _a2;
   const [selectedNetwork, setSelectedNetwork] = useState(NETWORK_TYPES.ETHEREUM);
   const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(null);
   const [availableWallets, setAvailableWallets] = useState({});
@@ -20880,27 +20887,27 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
     {
       id: NETWORK_TYPES.ETHEREUM,
       name: "Ethereum",
-      icon: "https://res.cloudinary.com/do3tlu1ph/image/upload/v1748962844/coinley/liznxm8l7iouudtrxdpi.png"
+      icon: EthIcon
     },
     {
       id: NETWORK_TYPES.TRON,
       name: "Tron",
-      icon: "https://res.cloudinary.com/do3tlu1ph/image/upload/v1748962844/coinley/mpxxns6gtfiws4rlouxc.png"
+      icon: TronIcon
     },
     {
       id: NETWORK_TYPES.ALGORAND,
       name: "Algorand",
-      icon: "https://res.cloudinary.com/do3tlu1ph/image/upload/v1748962844/coinley/x2lugizoduiphuqn0dej.png"
+      icon: AlgorandIcon
     },
     {
       id: "solana",
       name: "Solana",
-      icon: " https://res.cloudinary.com/do3tlu1ph/image/upload/v1748962845/coinley/hmex6qxnlid1gboh4cwc.png"
+      icon: SolanaIcon
     },
     {
       id: NETWORK_TYPES.BSC,
       name: "Binance Smart Chain",
-      icon: "https://res.cloudinary.com/do3tlu1ph/image/upload/v1748962844/coinley/eoavfddfqmt7qgajjxvb.png"
+      icon: BscIcon
     }
   ];
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -20944,7 +20951,7 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
             id: "PYUSD",
             name: "PYUSD",
             description: "PayPal USD",
-            logo: "https://s2.coinmarketcap.com/static/img/coins/64x64/28492.png",
+            logo: PyusdIcon,
             network: NETWORK_TYPES.ETHEREUM
           },
           {
@@ -20958,7 +20965,7 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
             id: "USDP",
             name: "USDP",
             description: "Pax Dollar",
-            logo: "https://s2.coinmarketcap.com/static/img/coins/64x64/6662.png",
+            logo: UsdpIcon,
             network: NETWORK_TYPES.ETHEREUM
           },
           {
@@ -21130,37 +21137,33 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
           "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",
+            className: "w-full flex items-center justify-between 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" },
+            style: { minHeight: "56px", padding: "0.5rem" },
             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 })
+                (() => {
+                  const n2 = networks.find((n22) => n22.id === selectedNetwork);
+                  return /* @__PURE__ */ jsxRuntimeExports.jsx(n2.icon, { size: 32 });
+                })(),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-base font-normal", children: (_a2 = networks.find((n2) => n2.id === selectedNetwork)) == null ? void 0 : _a2.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(
+        dropdownOpen && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-0 mt-2 px-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" : ""}`,
+            className: `w-full flex items-center gap-3 mt-1 mb-1 px-2 py-2 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(network.icon, { size: 32 }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: network.name })
             ]
           },
@@ -21176,13 +21179,13 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
           "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
+            className: `group flex items-center justify-between w-full px-4 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" },
+            style: { minHeight: "56px", padding: "1rem" },
             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" }),
+                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" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-base text-gray-900", children: [
                   method.description,
                   " (",
@@ -21310,14 +21313,14 @@ const CoinleyModal = ({
   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 max-w-[490px] mx-auto rounded-3xl shadow-xl bg-gray-100",
+      className: "coinley-modal relative pt-6 w-1/2 max-w-[490px] shadow-xl bg-gray-100",
       style: {
         maxWidth: "490px !important",
         width: "100% !important",
         minWidth: "320px !important"
       },
       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: "bg-white flex justify-between items-center mb-6 ml-4 mr-4 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" })
@@ -21340,7 +21343,7 @@ const CoinleyModal = ({
           /* @__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(
+        step === "select-currency" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pb-6 pt-6 px-6 bg-white rounded-t-2xl", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           PaymentMethods,
           {
             onSelect: onPaymentMethodSelect,
@@ -21540,7 +21543,7 @@ const CoinleyModal = ({
             }
           )
         ] }),
-        step !== "success" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center text-xs text-gray-500 flex items-center justify-center gap-1 mt-6", children: [
+        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" }),