coinley-checkout 0.2.1 → 0.2.3

package/dist/coinley-checkout.es.js

@@ -1106,23 +1106,77 @@ const CoinleyProvider = ({
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(CoinleyContext.Provider, { value, children });
 };
+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"/>`;
+      }
+    }
+  }
+  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 qrCodeUrl = `https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=${encodeURIComponent(`${currency}:${walletAddress}?amount=${amount}`)}&choe=UTF-8`;
+  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(
-      "img",
-      {
-        src: qrCodeUrl,
-        alt: `QR Code for ${currency} payment`,
-        width: "200",
-        height: "200"
-      }
-    ) }),
+    /* @__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: [
@@ -1132,8 +1186,23 @@ const QRCode = ({
         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 })
-    ] })
+      /* @__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.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" }) => {