coinley-checkout 0.2.2 → 0.2.4

package/dist/coinley-checkout.es.js

@@ -1106,25 +1106,33 @@ const CoinleyProvider = ({
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(CoinleyContext.Provider, { value, children });
 };
-const QRCode = ({ walletAddress, amount, currency }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+const QRCode = ({
+  walletAddress,
+  amount,
+  currency,
+  theme = "light"
+}) => {
+  const qrCodeUrl = `https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=${encodeURIComponent(`${currency}:${walletAddress}?amount=${amount}`)}&choe=UTF-8`;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 rounded-lg bg-white mb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
       {
-        src: `https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=Payment%20to%20${walletAddress}&choe=UTF-8`,
-        alt: "Payment QR Code",
-        style: { width: 200, height: 200, margin: "0 auto", display: "block" }
+        src: qrCodeUrl,
+        alt: `QR Code for ${currency} payment`,
+        width: "200",
+        height: "200"
       }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { style: { textAlign: "center", marginTop: 10 }, children: [
-      "Scan to pay ",
-      amount,
-      " ",
-      currency
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { style: { marginTop: 10 }, children: [
-      "Send to: ",
-      walletAddress
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center text-sm text-gray-700", children: "Scan with your wallet app to pay" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 w-full", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500 mb-1", children: [
+        "Send ",
+        amount,
+        " ",
+        currency,
+        " to:"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-mono p-2 rounded overflow-auto break-all bg-gray-100 text-gray-700", children: walletAddress })
     ] })
   ] });
 };