From 58f2228d76d00e555e5e9fe790e07361b5fdfd83 Mon Sep 17 00:00:00 2001
From: Keith <keithwhisper@gmail.com>
Date: Tue, 24 Sep 2024 12:58:26 +0900
Subject: [PATCH] feat: add connect id and qrcode of peer

---
 src/locales/en.json                    |  3 +-
 src/pages/Fiber/Peer/index.module.scss |  3 +-
 src/pages/Fiber/Peer/index.tsx         | 47 ++++++++++++++++++++++++--
 3 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 68f6c528e..7a62d3ca4 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1083,7 +1083,8 @@
         "open_time": "First Channel",
         "update_time": "Last Update",
         "total_local_balance": "Local Balance",
-        "rpc_addr": "RPC Address"
+        "rpc_addr": "RPC Address",
+        "connect_id": "Connect"
       },
       "channel": {
         "channel_id": "Channel ID",
diff --git a/src/pages/Fiber/Peer/index.module.scss b/src/pages/Fiber/Peer/index.module.scss
index 2aae9fdbe..9839c7629 100644
--- a/src/pages/Fiber/Peer/index.module.scss
+++ b/src/pages/Fiber/Peer/index.module.scss
@@ -70,7 +70,8 @@
     }
   }
 
-  .id {
+  .id,
+  .connectId {
     overflow: hidden;
 
     & > span:first-child {
diff --git a/src/pages/Fiber/Peer/index.tsx b/src/pages/Fiber/Peer/index.tsx
index b474c791c..955db08de 100644
--- a/src/pages/Fiber/Peer/index.tsx
+++ b/src/pages/Fiber/Peer/index.tsx
@@ -1,7 +1,9 @@
+import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link, useParams } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import { CopyIcon, OpenInNewWindowIcon } from '@radix-ui/react-icons'
+import QRCode from 'qrcode'
 import { Tooltip } from 'antd'
 import Content from '../../../components/Content'
 import { explorerService } from '../../../services/ExplorerService'
@@ -12,6 +14,8 @@ import Loading from '../../../components/Loading'
 const Peer = () => {
   const [t] = useTranslation()
   const { id } = useParams<{ id: string }>()
+  const qrRef = useRef<HTMLCanvasElement | null>(null)
+
   const setToast = useSetToast()
 
   const { data, isLoading } = useQuery({
@@ -21,14 +25,37 @@ const Peer = () => {
     },
     enabled: !!id,
   })
+
+  const peer = data?.data
+
+  const connectId = peer ? `${peer.peerId}@${peer.rpcListeningAddr}` : null
+
+  useEffect(() => {
+    const cvs = qrRef.current
+    if (!cvs || !connectId) return
+    QRCode.toCanvas(
+      cvs,
+      connectId,
+      {
+        margin: 5,
+        errorCorrectionLevel: 'H',
+        width: 144,
+      },
+      err => {
+        if (err) {
+          console.error(err)
+        }
+      },
+    )
+  }, [qrRef, connectId])
+
   if (isLoading) {
     return <Loading show />
   }
 
-  if (!data) {
+  if (!peer) {
     return <div>Fiber Peer Not Found</div>
   }
-  const peer = data.data
   const channels = peer.fiberChannels
 
   const handleCopy = (e: React.SyntheticEvent) => {
@@ -68,6 +95,22 @@ const Peer = () => {
               </a>
             </dd>
           </dl>
+          <dl>
+            <dt>{t('fiber.peer.connect_id')}</dt>
+            <dd className={styles.connectId}>
+              <Tooltip title={connectId}>
+                <span>{connectId}</span>
+              </Tooltip>
+              <button type="button" data-copy-text={connectId}>
+                <CopyIcon />
+              </button>
+            </dd>
+          </dl>
+          {connectId ? (
+            <div>
+              <canvas ref={qrRef} className={styles.qrcode} />
+            </div>
+          ) : null}
           <dl>
             <dt>{t('fiber.peer.open_time')}</dt>
             <dd>