From e5e93a4102679f8125d43c2fa5ac2f9a2bbb9d10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BC=9A=E9=A3=9E=E7=9A=84=E7=8C=AB?= <admin@hfdem.com>
Date: Tue, 24 Sep 2024 14:40:53 +0800
Subject: [PATCH] perf: enhance QR code clarity using QRCodeSVG (#381)

---
 client/package.json                         | 2 +-
 client/src/components/LinkDisplay/index.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/package.json b/client/package.json
index b2b294fa..5fa12a90 100644
--- a/client/package.json
+++ b/client/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@chat-e2ee/service": "file:../service",
-    "qrcode.react": "^3.1.0",
+    "qrcode.react": "^4.0.1",
     "react": "^16.13.1",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^16.13.1",
diff --git a/client/src/components/LinkDisplay/index.tsx b/client/src/components/LinkDisplay/index.tsx
index 33fee4de..6cd89bc4 100644
--- a/client/src/components/LinkDisplay/index.tsx
+++ b/client/src/components/LinkDisplay/index.tsx
@@ -3,7 +3,7 @@ import { FiLink, FiCopy, FiExternalLink, FiArrowDown, FiArrowUp } from "react-ic
 import styles from "./Style.module.css";
 import { ThemeContext } from "../../ThemeContext";
 import { LinkObjType } from "@chat-e2ee/service";
-import QRCode from "qrcode.react";
+import { QRCodeSVG } from "qrcode.react";
 
 const LinkDisplay: React.FC<{ content: LinkObjType }> = ({ content }) => {
   const chatLink =
@@ -80,7 +80,7 @@ const LinkDisplay: React.FC<{ content: LinkObjType }> = ({ content }) => {
       </div>
       {showQR && (
         <div className={styles.qrCodeContainer}>
-          <QRCode value={chatLink} size={128} />
+          <QRCodeSVG value={chatLink} size={128} />
         </div>
       )}
     </div>