coinley-checkout 0.2.2 → 0.2.3

package/dist/coinley-checkout.es.js

@@ -1106,26 +1106,103 @@ const CoinleyProvider = ({
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(CoinleyContext.Provider, { value, children });
 };
-const QRCode = ({ walletAddress, amount, currency }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { 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" }
+function renderQR(text, size) {
+  const matrix = generateQRMatrix(text);
+  const cellSize = Math.floor(size / matrix.length);
+  const qrSize = cellSize * matrix.length;
+  let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${qrSize}" height="${qrSize}" viewBox="0 0 ${qrSize} ${qrSize}">`;
+  svg += `<rect width="${qrSize}" height="${qrSize}" fill="white"/>`;
+  for (let y = 0; y < matrix.length; y++) {
+    for (let x = 0; x < matrix.length; x++) {
+      if (matrix[y][x]) {
+        svg += `<rect x="${x * cellSize}" y="${y * cellSize}" width="${cellSize}" height="${cellSize}" fill="black"/>`;
       }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { style: { textAlign: "center", marginTop: 10 }, children: [
-      "Scan to pay ",
-      amount,
-      " ",
-      currency
+    }
+  }
+  svg += "</svg>";
+  return svg;
+}
+function generateQRMatrix(text) {
+  const hash = simpleHash(text);
+  const size = 21;
+  const matrix = Array(size).fill().map(() => Array(size).fill(0));
+  addPositionPattern(matrix, 0, 0);
+  addPositionPattern(matrix, 0, size - 7);
+  addPositionPattern(matrix, size - 7, 0);
+  for (let i = 8; i < size - 8; i++) {
+    matrix[6][i] = i % 2 === 0 ? 1 : 0;
+    matrix[i][6] = i % 2 === 0 ? 1 : 0;
+  }
+  addAlignmentPattern(matrix, size - 9, size - 9);
+  fillData(matrix, hash);
+  return matrix;
+}
+function simpleHash(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) - hash + str.charCodeAt(i);
+    hash = hash & hash;
+  }
+  return Math.abs(hash);
+}
+function addPositionPattern(matrix, row, col) {
+  for (let r = 0; r < 7; r++) {
+    for (let c = 0; c < 7; c++) {
+      matrix[row + r][col + c] = r === 0 || r === 6 || c === 0 || c === 6 || r >= 2 && r <= 4 && c >= 2 && c <= 4 ? 1 : 0;
+    }
+  }
+}
+function addAlignmentPattern(matrix, row, col) {
+  for (let r = -2; r <= 2; r++) {
+    for (let c = -2; c <= 2; c++) {
+      matrix[row + r][col + c] = r === -2 || r === 2 || c === -2 || c === 2 || r === 0 && c === 0 ? 1 : 0;
+    }
+  }
+}
+function fillData(matrix, hash) {
+  const size = matrix.length;
+  for (let r = 8; r < size - 8; r++) {
+    for (let c = 8; c < size - 8; c++) {
+      matrix[r][c] = hash * r * c % 5 < 2 ? 1 : 0;
+    }
+  }
+}
+const QRCode = ({
+  walletAddress,
+  amount,
+  currency,
+  theme = "light"
+}) => {
+  const qrData = `${currency}:${walletAddress}?amount=${amount}`;
+  const qrSvg = renderQR(qrData, 200);
+  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("div", { dangerouslySetInnerHTML: { __html: qrSvg } }) }),
+    /* @__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 || "0x742d35Cc6634C0532925a3b844Bc454e4438f44e" })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { style: { marginTop: 10 }, children: [
-      "Send to: ",
-      walletAddress
-    ] })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-3 rounded bg-gray-100", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-medium mb-2 text-gray-800", children: "Payment Instructions" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("ol", { className: "text-xs space-y-2 text-gray-600", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: "1. Open your crypto wallet app" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: "2. Scan the QR code above" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
+          "3. Confirm the payment amount (",
+          amount,
+          " ",
+          currency,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: '4. Click "Pay Now" button below after sending the payment' })
+      ] })
+    ] }) })
   ] });
 };
 const PaymentStatus = ({ status, message, theme = "light" }) => {