From 9cf28d4d0334bf04fcdaeffcf8bda0af97113ca3 Mon Sep 17 00:00:00 2001
From: lanford33 <lanfordcai@outlook.com>
Date: Tue, 3 Oct 2023 23:02:54 +0800
Subject: [PATCH] feat: show address qr code

---
 components/common/Layout.js | 103 ++++++++++++++++++++++--------------
 package.json                |   1 +
 yarn.lock                   |   5 ++
 3 files changed, 69 insertions(+), 40 deletions(-)

diff --git a/components/common/Layout.js b/components/common/Layout.js
index c78fd2d..3430da1 100644
--- a/components/common/Layout.js
+++ b/components/common/Layout.js
@@ -23,6 +23,7 @@ import { StarIcon as SolidStar } from "@heroicons/react/solid"
 import { getBookmark } from "../../flow/bookmark_scripts";
 import { removeAccountBookmark } from "../../flow/bookmark_transactions";
 import NoteEditorModal from "../bookmark/NoteEditorModal";
+import { QRCodeCanvas } from "qrcode.react";
 
 const accountBookmarkFetcher = async (funcName, owner, target) => {
   if (publicConfig.chainEnv == "emulator") {
@@ -137,54 +138,76 @@ export default function Layout({ children }) {
   return (
     <>
       <div className="flex flex-col gap-y-2">
-        <div className="px-5 mb-10">
+        <div className="px-5 mb-3 sm:mb-10">
           <SearchBar />
         </div>
 
-        <div className="px-5 flex flex-col gap-y-1">
-          <label className="text-lg sm:text-xl text-gray-500">Account</label>
-          <div className="flex gap-x-2 items-center">
-            <label className="text-2xl sm:text-3xl font-bold">{`${account}`}</label>
-            <DocumentDuplicateIcon className="text-gray-700 hover:text-drizzle w-6 h-6"
-              onClick={async () => {
-                await navigator.clipboard.writeText(account)
-                setShowBasicNotification(true)
-                setBasicNotificationContent({ type: "information", title: "Copied!", detail: null })
-              }} />
-            {showStarIcon(bookmark)}
-          </div>
-          {
-            bookmark ?
+        <div className="flex flex-col-reverse gap-y-2 sm:flex-row sm:items-center sm:justify-between sm:gap-x-5">
+          <div className="flex flex-col gap-y-1">
+            <div className="px-5 flex flex-col gap-y-1">
+              <label className="text-lg sm:text-xl text-gray-500">Account</label>
               <div className="flex gap-x-2 items-center">
-                <label className={`font-semibold text-xs px-2 py-1 leading-4 rounded-full text-black bg-drizzle`}>
-                  Note
-                </label>
-                <div className="text-gray-600 text-sm">{bookmark.note}</div>
+                <label className="text-2xl sm:text-3xl font-bold">{`${account}`}</label>
+                <DocumentDuplicateIcon className="text-gray-700 hover:text-drizzle w-6 h-6"
+                  onClick={async () => {
+                    await navigator.clipboard.writeText(account)
+                    setShowBasicNotification(true)
+                    setBasicNotificationContent({ type: "information", title: "Copied!", detail: null })
+                  }} />
+                {showStarIcon(bookmark)}
+              </div>
+              {
+                bookmark ?
+                  <div className="flex gap-x-2 items-center">
+                    <label className={`font-semibold text-xs px-2 py-1 leading-4 rounded-full text-black bg-drizzle`}>
+                      Note
+                    </label>
+                    <div className="text-gray-600 text-sm">{bookmark.note}</div>
+                  </div>
+                  : null
+              }
+            </div>
+
+            {currentDefaultDomains && currentDefaultDomains.domains.length > 0 ?
+              <div className="mt-4 px-5 flex flex-col gap-y-1">
+                <label className="text-base sm:text-lg text-gray-500">Default Domains</label>
+                <div className="mt-1 flex gap-x-2">{
+                  currentDefaultDomains.domains.map((domain, index) => {
+                    return (
+                      <label key={`${domain.domain}_${index}`} className={`cursor-pointer font-bold text-sm px-3 py-2 leading-5 rounded-full text-emerald-800 bg-emerald-100`}>
+                        <a href={domain.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          {domain.domain}
+                        </a>
+                      </label>
+                    )
+                  })}
+                </div>
               </div>
               : null
-          }
+            }
+          </div>
+          <div className="pl-3 hidden sm:pr-3 sm:block">
+            <QRCodeCanvas
+              id="qr-address"
+              value={account}
+              size={160}
+              bgColor={"#ffffff"}
+              fgColor={"#00d588"}
+              level={"H"}
+              includeMargin={true}
+              imageSettings={{
+                src: "/favicon.ico",
+                height: 24,
+                width: 24,
+                excavate: true
+              }}
+            />
+          </div>
         </div>
 
-        {currentDefaultDomains && currentDefaultDomains.domains.length > 0 ?
-          <div className="mt-4 px-5 flex flex-col gap-y-1">
-            <label className="text-base sm:text-lg text-gray-500">Default Domains</label>
-            <div className="mt-1 flex gap-x-2">{
-              currentDefaultDomains.domains.map((domain, index) => {
-                return (
-                  <label key={`${domain.domain}_${index}`} className={`cursor-pointer font-bold text-sm px-3 py-2 leading-5 rounded-full text-emerald-800 bg-emerald-100`}>
-                    <a href={domain.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {domain.domain}
-                    </a>
-                  </label>
-                )
-              })}
-            </div>
-          </div>
-          : null
-        }
         <div className="mt-10 flex flex-row gap-x-2 sm:gap-x-4 items-start justify-start">
           <Sidebar />
           {children}
diff --git a/package.json b/package.json
index ca6b08f..deedf91 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "multiformats": "^10.0.2",
     "next": "13.0.3",
     "postcss": "^8.4.19",
+    "qrcode.react": "^3.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-syntax-highlighter": "^15.5.0",
diff --git a/yarn.lock b/yarn.lock
index da4c753..93fcbd0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1941,6 +1941,11 @@ punycode@^2.1.0:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+qrcode.react@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.1.0.tgz#5c91ddc0340f768316fbdb8fff2765134c2aecd8"
+  integrity sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==
+
 queue-microtask@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.1.2.tgz#139bf8186db0c545017ec66c2664ac646d5c571e"