coinley-checkout 0.2.4 → 0.2.5

package/dist/coinley-checkout.es.js

@@ -1110,19 +1110,88 @@ const QRCode = ({
   walletAddress,
   amount,
   currency,
-  theme = "light"
+  theme = "light",
+  size = 200
 }) => {
-  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: qrCodeUrl,
-        alt: `QR Code for ${currency} payment`,
-        width: "200",
-        height: "200"
+  const [qrSvg, setQrSvg] = useState("");
+  useEffect(() => {
+    const scheme = currency === "SOL" || currency === "USDC_SOL" ? "solana" : "ethereum";
+    const paymentUri = `${scheme}:${walletAddress || "0x742d35Cc6634C0532925a3b844Bc454e4438f44e"}?amount=${amount}&currency=${currency}`;
+    const qrcode = generateQRCode(paymentUri, size, theme === "dark");
+    setQrSvg(qrcode);
+  }, [walletAddress, amount, currency, theme, size]);
+  function generateQRCode(text, size2, isDarkTheme) {
+    const matrix = generateQRMatrix(text);
+    const cellSize = Math.floor(size2 / matrix.length);
+    const qrSize = cellSize * matrix.length;
+    const bgColor = isDarkTheme ? "#374151" : "#FFFFFF";
+    const fgColor = isDarkTheme ? "#FFFFFF" : "#000000";
+    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="${bgColor}"/>`;
+    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="${fgColor}"/>`;
+        }
       }
-    ) }),
+    }
+    svg += "</svg>";
+    return svg;
+  }
+  function generateQRMatrix(text) {
+    const hash = simpleHash(text);
+    const size2 = 25;
+    const matrix = Array(size2).fill().map(() => Array(size2).fill(0));
+    addPositionPattern(matrix, 0, 0);
+    addPositionPattern(matrix, 0, size2 - 7);
+    addPositionPattern(matrix, size2 - 7, 0);
+    for (let i = 8; i < size2 - 8; i++) {
+      matrix[6][i] = i % 2 === 0 ? 1 : 0;
+      matrix[i][6] = i % 2 === 0 ? 1 : 0;
+    }
+    addAlignmentPattern(matrix, size2 - 9, size2 - 9);
+    fillData(matrix, hash, text);
+    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++) {
+        if (row + r >= 0 && row + r < matrix.length && col + c >= 0 && col + c < matrix.length) {
+          matrix[row + r][col + c] = r === -2 || r === 2 || c === -2 || c === 2 || r === 0 && c === 0 ? 1 : 0;
+        }
+      }
+    }
+  }
+  function fillData(matrix, hash, text) {
+    const size2 = matrix.length;
+    for (let r = 0; r < size2; r++) {
+      for (let c = 0; c < size2; c++) {
+        if (r < 7 && c < 7 || r < 7 && c >= size2 - 7 || r >= size2 - 7 && c < 7 || r === 6 || c === 6) {
+          continue;
+        }
+        const index = (r * size2 + c) % text.length;
+        const charCode = text.charCodeAt(index);
+        matrix[r][c] = hash * charCode * (r + c) % 4 === 0 ? 1 : 0;
+      }
+    }
+  }
+  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: [
@@ -1132,8 +1201,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" }) => {