From 10bfeb23ade310f80e178ee3d392c891ab8d4081 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng@outlook.com>
Date: Tue, 12 Nov 2024 09:51:18 +0800
Subject: [PATCH] feat: qrcode

---
 package-lock.json                             |  9 +++++
 package.json                                  |  1 +
 .../components/NoteCard/ShortTextNoteCard.tsx |  2 +-
 .../src/components/ProfileAbout/index.tsx     |  4 +-
 .../secondary/ProfilePage/PubkeyCopy.tsx      | 27 ++++++++++++++
 .../secondary/ProfilePage/QrCodePopover.tsx   | 23 ++++++++++++
 .../src/pages/secondary/ProfilePage/index.tsx | 37 +++++--------------
 7 files changed, 72 insertions(+), 31 deletions(-)
 create mode 100644 src/renderer/src/pages/secondary/ProfilePage/PubkeyCopy.tsx
 create mode 100644 src/renderer/src/pages/secondary/ProfilePage/QrCodePopover.tsx

diff --git a/package-lock.json b/package-lock.json
index bf3c79ca..fec15c8a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "lru-cache": "^11.0.1",
         "lucide-react": "^0.453.0",
         "nostr-tools": "^2.9.1",
+        "qrcode.react": "^4.1.0",
         "react-resizable-panels": "^2.1.5",
         "react-string-replace": "^1.1.1",
         "tailwind-merge": "^2.5.4",
@@ -7885,6 +7886,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode.react": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.1.0.tgz",
+      "integrity": "sha512-uqXVIIVD/IPgWLYxbOczCNAQw80XCM/LulYDADF+g2xDsPj5OoRwSWtIS4jGyp295wyjKstfG1qIv/I2/rNWpQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
diff --git a/package.json b/package.json
index 85743758..b4d9c499 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "lru-cache": "^11.0.1",
     "lucide-react": "^0.453.0",
     "nostr-tools": "^2.9.1",
+    "qrcode.react": "^4.1.0",
     "react-resizable-panels": "^2.1.5",
     "react-string-replace": "^1.1.1",
     "tailwind-merge": "^2.5.4",
diff --git a/src/renderer/src/components/NoteCard/ShortTextNoteCard.tsx b/src/renderer/src/components/NoteCard/ShortTextNoteCard.tsx
index 1887c65f..0d1d34e1 100644
--- a/src/renderer/src/components/NoteCard/ShortTextNoteCard.tsx
+++ b/src/renderer/src/components/NoteCard/ShortTextNoteCard.tsx
@@ -30,7 +30,7 @@ export default function ShortTextNoteCard({
       }}
     >
       <Card
-        className={`hover:bg-muted/50 text-left cursor-pointer ${size === 'normal' ? 'p-4' : 'p-2'}`}
+        className={`hover:bg-muted/50 text-left cursor-pointer ${size === 'normal' ? 'p-4' : 'p-3'}`}
       >
         <Note
           size={size}
diff --git a/src/renderer/src/components/ProfileAbout/index.tsx b/src/renderer/src/components/ProfileAbout/index.tsx
index 9bbe737c..7114c927 100644
--- a/src/renderer/src/components/ProfileAbout/index.tsx
+++ b/src/renderer/src/components/ProfileAbout/index.tsx
@@ -7,7 +7,7 @@ import {
 import { embeddedNpubRenderer } from '@renderer/embedded/EmbeddedNpub'
 import { useMemo } from 'react'
 
-export default function ProfileAbout({ about }: { about?: string }) {
+export default function ProfileAbout({ about, className }: { about?: string; className?: string }) {
   const nodes = useMemo(() => {
     return about
       ? embedded(about, [
@@ -19,5 +19,5 @@ export default function ProfileAbout({ about }: { about?: string }) {
       : null
   }, [about])
 
-  return <>{nodes}</>
+  return <div className={className}>{nodes}</div>
 }
diff --git a/src/renderer/src/pages/secondary/ProfilePage/PubkeyCopy.tsx b/src/renderer/src/pages/secondary/ProfilePage/PubkeyCopy.tsx
new file mode 100644
index 00000000..a17ebdf9
--- /dev/null
+++ b/src/renderer/src/pages/secondary/ProfilePage/PubkeyCopy.tsx
@@ -0,0 +1,27 @@
+import { formatNpub } from '@renderer/lib/pubkey'
+import { Check, Copy } from 'lucide-react'
+import { nip19 } from 'nostr-tools'
+import { useMemo, useState } from 'react'
+
+export default function PubkeyCopy({ pubkey }: { pubkey: string }) {
+  const npub = useMemo(() => (pubkey ? nip19.npubEncode(pubkey) : ''), [pubkey])
+  const [copied, setCopied] = useState(false)
+
+  const copyNpub = () => {
+    if (!npub) return
+
+    navigator.clipboard.writeText(npub)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div
+      className="flex gap-2 text-sm text-muted-foreground items-center bg-muted w-fit px-2 rounded-full hover:text-foreground cursor-pointer"
+      onClick={() => copyNpub()}
+    >
+      <div>{formatNpub(npub, 24)}</div>
+      {copied ? <Check size={14} /> : <Copy size={14} />}
+    </div>
+  )
+}
diff --git a/src/renderer/src/pages/secondary/ProfilePage/QrCodePopover.tsx b/src/renderer/src/pages/secondary/ProfilePage/QrCodePopover.tsx
new file mode 100644
index 00000000..8a6ec664
--- /dev/null
+++ b/src/renderer/src/pages/secondary/ProfilePage/QrCodePopover.tsx
@@ -0,0 +1,23 @@
+import { Popover, PopoverContent, PopoverTrigger } from '@renderer/components/ui/popover'
+import { QrCode } from 'lucide-react'
+import { nip19 } from 'nostr-tools'
+import { useMemo } from 'react'
+import { QRCodeSVG } from 'qrcode.react'
+
+export default function QrCodePopover({ pubkey }: { pubkey: string }) {
+  const npub = useMemo(() => (pubkey ? nip19.npubEncode(pubkey) : ''), [pubkey])
+  if (!npub) return null
+
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <div className="bg-muted rounded-full h-5 w-5 flex flex-col items-center justify-center text-muted-foreground hover:text-foreground">
+          <QrCode size={14} />
+        </div>
+      </PopoverTrigger>
+      <PopoverContent className="w-fit h-fit">
+        <QRCodeSVG value={`nostr:${npub}`} />
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/src/renderer/src/pages/secondary/ProfilePage/index.tsx b/src/renderer/src/pages/secondary/ProfilePage/index.tsx
index e5143ab5..da764d48 100644
--- a/src/renderer/src/pages/secondary/ProfilePage/index.tsx
+++ b/src/renderer/src/pages/secondary/ProfilePage/index.tsx
@@ -9,33 +9,25 @@ import { useFetchFollowings, useFetchProfile } from '@renderer/hooks'
 import { useFetchRelayList } from '@renderer/hooks/useFetchRelayList'
 import SecondaryPageLayout from '@renderer/layouts/SecondaryPageLayout'
 import { toFollowingList } from '@renderer/lib/link'
-import { formatNpub, generateImageByPubkey } from '@renderer/lib/pubkey'
+import { generateImageByPubkey } from '@renderer/lib/pubkey'
 import { SecondaryPageLink } from '@renderer/PageManager'
 import { useNostr } from '@renderer/providers/NostrProvider'
-import { Copy } from 'lucide-react'
-import { nip19 } from 'nostr-tools'
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
+import PubkeyCopy from './PubkeyCopy'
+import QrCodePopover from './QrCodePopover'
 
 export default function ProfilePage({ pubkey }: { pubkey?: string }) {
   const { banner, username, nip05, about, avatar } = useFetchProfile(pubkey)
   const relayList = useFetchRelayList(pubkey)
-  const [copied, setCopied] = useState(false)
   const { pubkey: accountPubkey } = useNostr()
   const { followings } = useFetchFollowings(pubkey)
   const isFollowingYou = useMemo(
     () => !!accountPubkey && accountPubkey !== pubkey && followings.includes(accountPubkey),
     [followings, pubkey]
   )
-  const npub = useMemo(() => (pubkey ? nip19.npubEncode(pubkey) : undefined), [pubkey])
   const defaultImage = useMemo(() => (pubkey ? generateImageByPubkey(pubkey) : ''), [pubkey])
 
-  if (!pubkey || !npub) return null
-
-  const copyNpub = () => {
-    navigator.clipboard.writeText(npub)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }
+  if (!pubkey) return null
 
   return (
     <SecondaryPageLayout titlebarContent={username}>
@@ -63,22 +55,11 @@ export default function ProfilePage({ pubkey }: { pubkey?: string }) {
       <div className="pt-2">
         <div className="text-xl font-semibold">{username}</div>
         {nip05 && <Nip05 nip05={nip05} pubkey={pubkey} />}
-        <div
-          className="mt-1 flex gap-2 text-sm text-muted-foreground items-center bg-muted w-fit px-2 rounded-full hover:text-foreground cursor-pointer"
-          onClick={() => copyNpub()}
-        >
-          {copied ? (
-            <div>copied!</div>
-          ) : (
-            <>
-              <div>{formatNpub(npub, 24)}</div>
-              <Copy size={14} />
-            </>
-          )}
-        </div>
-        <div className="text-wrap break-words whitespace-pre-wrap mt-2">
-          <ProfileAbout about={about} />
+        <div className="flex gap-1 mt-1">
+          <PubkeyCopy pubkey={pubkey} />
+          <QrCodePopover pubkey={pubkey} />
         </div>
+        <ProfileAbout about={about} className="text-wrap break-words whitespace-pre-wrap mt-2" />
         <SecondaryPageLink
           to={toFollowingList(pubkey)}
           className="mt-2 flex gap-1 hover:underline text-sm"