add QR code display for wallet address in EvmDashboard

apps/desktop/package.json

@@ -21,6 +21,7 @@
 		"ethers": "^6.16.0",
 		"mode-watcher": "^1.1.0",
 		"monero-ts": "^0.11.8",
+		"qrcode": "^1.5.4",
 		"sv-router": "latest",
 		"viem": "^2.48.11"
 	},
@@ -33,6 +34,7 @@
 		"@tanstack/table-core": "^8.21.3",
 		"@types/env-paths": "^2.1.2",
 		"@types/node": "^25.7.0",
+		"@types/qrcode": "^1.5.6",
 		"bits-ui": "^2.16.5",
 		"bun-types": "^1.3.14",
 		"clsx": "^2.1.1",

apps/desktop/src/lib/components/EvmDashboard.svelte

@@ -13,6 +13,7 @@
 	} from '$lib/components/ui/card/index.js'
 	import ArrowDown from '@lucide/svelte/icons/arrow-down'
 	import ArrowUp from '@lucide/svelte/icons/arrow-up'
+	import QRCode from 'qrcode'
 
 	let { networkId }: { networkId: NetworkId } = $props()
 
@@ -47,6 +48,14 @@
 	const w = wallet
 	let inputSeed = $state('')
 	let apiKeyInput = $state('')
+	let qrDataUrl = $state('')
+	$effect(() => {
+		if (w.address) {
+			QRCode.toDataURL(w.address, { width: 120, margin: 1 }).then(
+				(url) => (qrDataUrl = url),
+			)
+		}
+	})
 
 	function navTarget(id: NetworkId): string {
 		if (id === 'eth') return '/'
@@ -123,7 +132,15 @@
 				{#if w.address}
 					<div class="mb-4 space-y-1">
 						<p class="font-medium text-xs">Address</p>
-						<p class="font-mono text-xs break-all">{w.address}</p>
+						<div class="flex items-start gap-3">
+							<p class="font-mono text-xs break-all flex-1">{w.address}</p>
+							{#if qrDataUrl}
+								<img
+									src={qrDataUrl}
+									alt="QR code"
+									class="size-20 rounded-md border" />
+							{/if}
+						</div>
 						<p class="mt-2 font-medium text-xs">
 							{w.symbol} Balance
 						</p>