misaradmin/synor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

feat: add QR code generation on Receive page

Browse source 
- Add qrcode.react dependency for client-side QR generation
- Replace placeholder icon with actual QRCodeSVG component
- QR code encodes the primary wallet address
This commit is contained in:
Gulshan Yadav 2026-02-02 16:45:43 +05:30
parent 9cdccece34
commit 099cb8942b
3 changed files with 34 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
apps/desktop-wallet/package.json
View file

@ -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",
"lucide-react": "^0.303.0",
"clsx": "^2.1.0",
"tailwind-merge": "^2.2.0"
"tailwind-merge": "^2.2.0",
"zustand": "^4.4.7"
},
"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",

12
apps/desktop-wallet/pnpm-lock.yaml generated
View file

@ -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):

17
apps/desktop-wallet/src/pages/Receive.tsx
View file

@ -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 */}
<div className="w-48 h-48 mx-auto mb-4 bg-white rounded-lg flex items-center justify-center">
<div className="text-gray-400 text-center p-4">
<QrCode size={64} className="mx-auto mb-2 text-gray-300" />
<span className="text-xs">QR Code</span>
</div>
{/* QR Code */}
<div className="w-48 h-48 mx-auto mb-4 bg-white rounded-lg p-3 flex items-center justify-center">
<QRCodeSVG
value={primaryAddress}
size={168}
level="M"
includeMargin={false}
bgColor="#ffffff"
fgColor="#000000"
/>
</div>
{/* Address with copy */}