Fixes EddieHubCommunity#8640 Updated to use styled QR codes.

components/QRStyledCanvas.js

@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+import QRCodeStyling from "styled-qr-code";
+
+function QRStyledCanvas({
+  parentRef,
+  backgroundOptions = {},
+  cornersDotOptions = {},
+  cornersSquareOptions = {},
+  value,
+  dotsOptions = {},
+  height = 100,
+  image = "",
+  imageOptions = {},
+  margin = 0,
+  qrOptions = {},
+  type = "canvas",
+  width = 100,
+}) {
+  const qrCode = new QRCodeStyling();
+
+  useEffect(() => {
+    qrCode.append(parentRef.current);
+    qrCode.update({
+      backgroundOptions: backgroundOptions,
+      cornersDotOptions: cornersDotOptions,
+      cornersSquareOptions: cornersSquareOptions,
+      data: value,
+      dotsOptions: dotsOptions,
+      height: height,
+      image: image,
+      imageOptions: imageOptions,
+      margin: margin,
+      qrOptions: qrOptions,
+      type: type,
+      width: width,
+    });
+  });
+}
+
+export default QRStyledCanvas;

components/user/UserProfile.js

@@ -1,6 +1,5 @@
 import React, { useRef, useState } from "react";
 import { FaShare } from "react-icons/fa6";
-import { QRCodeCanvas } from "qrcode.react";
 import { saveAs } from "file-saver";
 import { useRouter } from "next/router";
 
@@ -15,20 +14,25 @@ import ClipboardCopy from "@components/ClipboardCopy";
 import { socials } from "@config/socials";
 import Markdown from "@components/Markdown";
 import BasicCards from "@components/statistics/BasicCards";
+import dynamic from "next/dynamic";
 
 function UserProfile({ BASE_URL, data }) {
   const [qrShow, setQrShow] = useState(false);
   const [premiumShow, setPremiumShow] = useState(false);
   const router = useRouter();
   const fallbackImageSize = 120;
 
+  const QRStyledCanvas = dynamic(() => import("../QRStyledCanvas"), {
+    ssr: false,
+  });
+
   //Declared Ref object for QR
   const qrRef = useRef(null);
 
   //qrRef.current is pointing to the DOM node and firstChild to its canvas
   const downloadQR = () =>
     qrRef.current.firstChild.toBlob((blob) =>
-      saveAs(blob, `biodrop-${data.username}.png`)
+      saveAs(blob, `biodrop-${data.username}.png`),
     );
 
   return (
@@ -132,10 +136,24 @@ function UserProfile({ BASE_URL, data }) {
           <div>
             <div className="flex justify-center my-4" ref={qrRef}>
               {qrShow && (
-                <QRCodeCanvas
+                <QRStyledCanvas
                   className="border border-white"
                   value={`${BASE_URL}/${data.username}`}
-                  size={fallbackImageSize * 2}
+                  image={"/logo192.png"}
+                  height={fallbackImageSize * 2}
+                  width={fallbackImageSize * 2}
+                  parentRef={qrRef}
+                  dotsOptions={{
+                    color: "#ee626b",
+                    type: "rounded",
+                  }}
+                  backgroundOptions={{
+                    color: "#e9ebee",
+                  }}
+                  imageOptions={{
+                    crossOrigin: "anonymous",
+                    margin: 20,
+                  }}
                 />
               )}
             </div>
@@ -156,7 +174,7 @@ function UserProfile({ BASE_URL, data }) {
                     href={`${SOCIAL_SHARE_LINK}${BASE_URL}/${data.username}${
                       includeText
                         ? `&text=${encodeURIComponent(
-                            `Check out ${data.name}'s profile on BioDrop.io`
+                            `Check out ${data.name}'s profile on BioDrop.io`,
                           )}`
                         : ""
                     }`}

package.json

@@ -29,7 +29,6 @@
     "next-themes": "^0.2.1",
     "pino": "^8.14.1",
     "pino-pretty": "^10.1.0",
-    "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-children-utilities": "^2.9.0",
     "react-dom": "^18.2.0",
@@ -46,6 +45,7 @@
     "sortablejs": "^1.15.0",
     "strip-markdown": "^5.0.1",
     "stripe": "^12.17.0",
+    "styled-qr-code": "^1.0.0",
     "supercluster": "^8.0.1",
     "tailwindcss": "^3.3.3",
     "use-supercluster": "^0.4.0",