fix: replace placeholder grid in QRCode with real scannable QR generation

[bytebinders]

Summary of Changes

• Replaced the custom modulo grid loop ((charCode + row + col) % 3 === 0) in src/components/QRCode.tsx with real QR code encoding using the qrcode package (QRCodeLib.toCanvas).
• Added qrcode and @types/qrcode to package.json.
• Maintained support for all existing props (value, size, className, label, ariaLabel, canvasBackground, canvasForeground).
• Preserved fallback rendering on canvas errors and accessibility semantics (<figure>, <figcaption>, role="img", aria-label).
• Verified scannability for wallet addresses rendered across WalletScreen (both inline and modal views).

Why It Was Needed

• The previous implementation rendered a decorative mock pattern that could not be decoded by QR scanners.
• In screens like WalletScreen, sharing or scanning this image caused failed fund transfer attempts. Standard QR encoding ensures immediate compatibility with all camera and QR scanner tools.

Implementation Details

• Uses QRCodeLib.toCanvas(canvas, value, { width: size, margin: 1, color: { dark, light } }) inside useEffect.
• Handles size validation and graceful fallbacks if drawing fails.
• Preserves the label element rendered in <figcaption>.

Verification & Testing

• Vitest Unit Tests:
  • src/components/QRCode.test.tsx (19/19 tests passed)
  • src/screens/WalletScreen.test.tsx (14/14 tests passed)
• Linting:
  • eslint src/components/QRCode.tsx src/components/QRCode.test.tsx passed with 0 errors/warnings.

Closes #572

[drips-wave]

@bytebinders Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits