From 53207124f118cd9145e118c0ef9470cdfec528bb Mon Sep 17 00:00:00 2001
From: Grut <akashsah946@gmail.com>
Date: Tue, 9 Jan 2024 15:13:32 +0000
Subject: [PATCH] feat: adds capability to export user qr-code into wallpaper

---
 components/user/QRcodeWallpaper.js | 22 ++++++++++++++++
 components/user/UserProfile.js     | 41 ++++++++++++++++++++++++++++++
 package-lock.json                  |  8 +++++-
 package.json                       |  1 +
 4 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 components/user/QRcodeWallpaper.js

diff --git a/components/user/QRcodeWallpaper.js b/components/user/QRcodeWallpaper.js
new file mode 100644
index 00000000000..ddba3295792
--- /dev/null
+++ b/components/user/QRcodeWallpaper.js
@@ -0,0 +1,22 @@
+import React from "react";
+import { QRCodeSVG } from "qrcode.react";
+import LogoWide from "@public/logos/LogoWide";
+
+function QRcodeWallpaper({ BASE_URL, data }) {
+  const fallbackImageSize = 120;
+
+  return (
+    <div style={{ marginTop: "50%", marginLeft: "16%" }}>
+      <QRCodeSVG
+        className="border border-white"
+        value={`${BASE_URL}/${data.username}`}
+        size={fallbackImageSize * 6}
+      />
+      <div style={{ marginLeft: "7rem", marginTop: "5rem" }}>
+        <LogoWide width={512} />
+      </div>
+    </div>
+  );
+}
+
+export default QRcodeWallpaper;
diff --git a/components/user/UserProfile.js b/components/user/UserProfile.js
index 462dbc87421..c62edb66843 100644
--- a/components/user/UserProfile.js
+++ b/components/user/UserProfile.js
@@ -3,6 +3,7 @@ import { FaShare } from "react-icons/fa6";
 import { QRCodeCanvas } from "qrcode.react";
 import { saveAs } from "file-saver";
 import { useRouter } from "next/router";
+import { toPng } from "html-to-image";
 
 import FallbackImage from "@components/FallbackImage";
 import UserSocial from "./UserSocials";
@@ -14,6 +15,19 @@ import Modal from "@components/Modal";
 import ClipboardCopy from "@components/ClipboardCopy";
 import { socials } from "@config/socials";
 import Markdown from "@components/Markdown";
+import { renderToString } from "react-dom/server";
+import QRcodeWallpaper from "./QRcodeWallpaper";
+
+const renderQRCodeWallpaperToString = (BASE_URL, data) => {
+  const qrCodeElement = React.createElement(QRcodeWallpaper, {
+    BASE_URL: BASE_URL,
+    data: data,
+  });
+
+  const qrCodeString = renderToString(qrCodeElement);
+
+  return qrCodeString;
+};
 
 function UserProfile({ BASE_URL, data }) {
   const [qrShow, setQrShow] = useState(false);
@@ -30,6 +44,26 @@ function UserProfile({ BASE_URL, data }) {
       saveAs(blob, `biodrop-${data.username}.png`),
     );
 
+  const downloadWallpaper = async () => {
+    try {
+      const qrCodeString = renderQRCodeWallpaperToString(BASE_URL, data);
+
+      const container = document.createElement("div");
+      container.innerHTML = qrCodeString;
+
+      const dataUrl = await toPng(container, {
+        cacheBust: false,
+        backgroundColor: "#122640",
+        width: 1080,
+        height: 1920,
+      });
+
+      saveAs(dataUrl, `Biodrop-Wallpaper-${data.username}.png`);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
   return (
     <>
       <div className="flex justify-center items-center flex-col md:flex-row gap-x-6">
@@ -128,6 +162,13 @@ function UserProfile({ BASE_URL, data }) {
                 </Button>
               )}
             </div>
+            <div className="w-full px-2 mx-auto flex justify-center mb-4">
+              {qrShow && (
+                <Button primary={true} onClick={downloadWallpaper}>
+                  Export as Wallpaper
+                </Button>
+              )}
+            </div>
           </div>
           {qrShow && (
             <>
diff --git a/package-lock.json b/package-lock.json
index 0343f61289d..51f6689346e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "biodrop",
-      "version": "2.87.3",
+      "version": "2.97.3",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -23,6 +23,7 @@
         "autoprefixer": "^10.4.16",
         "dotenv": "^16.3.1",
         "file-saver": "^2.0.5",
+        "html-to-image": "^1.11.11",
         "husky": "^8.0.3",
         "leaflet": "^1.9.4",
         "micro": "^10.0.1",
@@ -14244,6 +14245,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/html-to-image": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz",
+      "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA=="
+    },
     "node_modules/html-url-attributes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.0.tgz",
diff --git a/package.json b/package.json
index 166c51258a9..38eb1e1e3f6 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "autoprefixer": "^10.4.16",
     "dotenv": "^16.3.1",
     "file-saver": "^2.0.5",
+    "html-to-image": "^1.11.11",
     "husky": "^8.0.3",
     "leaflet": "^1.9.4",
     "micro": "^10.0.1",