feat: add QR code generation on Receive page

- Add qrcode.react dependency for client-side QR generation
- Replace placeholder icon with actual QRCodeSVG component
- QR code encodes the primary wallet address

apps/desktop-wallet/package.json

@@ -17,28 +17,29 @@
   },
   "dependencies": {
     "@tauri-apps/api": "^2.0.0",
-    "@tauri-apps/plugin-fs": "^2.0.0",
-    "@tauri-apps/plugin-store": "^2.0.0",
-    "@tauri-apps/plugin-shell": "^2.0.0",
-    "@tauri-apps/plugin-dialog": "^2.0.0",
     "@tauri-apps/plugin-clipboard-manager": "^2.0.0",
-    "@tauri-apps/plugin-updater": "^2.0.0",
+    "@tauri-apps/plugin-dialog": "^2.0.0",
+    "@tauri-apps/plugin-fs": "^2.0.0",
     "@tauri-apps/plugin-notification": "^2.0.0",
     "@tauri-apps/plugin-process": "^2.0.0",
+    "@tauri-apps/plugin-shell": "^2.0.0",
+    "@tauri-apps/plugin-store": "^2.0.0",
+    "@tauri-apps/plugin-updater": "^2.0.0",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.303.0",
+    "qrcode.react": "^4.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.0",
-    "zustand": "^4.4.7",
+    "tailwind-merge": "^2.2.0",
-    "lucide-react": "^0.303.0",
+    "zustand": "^4.4.7"
-    "clsx": "^2.1.0",
-    "tailwind-merge": "^2.2.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.40.0",
     "@tauri-apps/cli": "^2.0.0",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.2.1",
-    "@playwright/test": "^1.40.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.32",
     "tailwindcss": "^3.4.0",

apps/desktop-wallet/pnpm-lock.yaml

@@ -41,6 +41,9 @@ importers:
       lucide-react:
         specifier: ^0.303.0
         version: 0.303.0(react@18.3.1)
+      qrcode.react:
+        specifier: ^4.2.0
+        version: 4.2.0(react@18.3.1)
       react:
         specifier: ^18.2.0
         version: 18.3.1
@@ -922,6 +925,11 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  qrcode.react@4.2.0:
+    resolution: {integrity: sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -1779,6 +1787,10 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  qrcode.react@4.2.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   queue-microtask@1.2.3: {}
 
   react-dom@18.3.1(react@18.3.1):

apps/desktop-wallet/src/pages/Receive.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { writeText } from '@tauri-apps/plugin-clipboard-manager';
 import { Copy, Check, Plus, QrCode } from 'lucide-react';
+import { QRCodeSVG } from 'qrcode.react';
 import { invoke } from '../lib/tauri';
 import { useWalletStore } from '../store/wallet';
 
@@ -51,12 +52,16 @@ export default function Receive() {
             <span className="text-sm text-gray-400">Primary Address</span>
           </div>
 
-          {/* QR Code placeholder */}
+          {/* QR Code */}
-          <div className="w-48 h-48 mx-auto mb-4 bg-white rounded-lg flex items-center justify-center">
+          <div className="w-48 h-48 mx-auto mb-4 bg-white rounded-lg p-3 flex items-center justify-center">
-            <div className="text-gray-400 text-center p-4">
+            <QRCodeSVG
-              <QrCode size={64} className="mx-auto mb-2 text-gray-300" />
+              value={primaryAddress}
-              <span className="text-xs">QR Code</span>
+              size={168}
-            </div>
+              level="M"
+              includeMargin={false}
+              bgColor="#ffffff"
+              fgColor="#000000"
+            />
           </div>
 
           {/* Address with copy */}