feat: add QR code download and native share functionality to receive …

[ezedike-evan]

summary

Users can now fill the recipient address field by uploading a QR code image
from their device — a screenshot, camera roll photo, or saved PNG from the
Receive page. This complements the existing camera scanner and is especially
useful on desktop where live camera scanning is awkward, or when a user has
a saved QR image they want to paste in directly.

Changes

Core Implementation

• handleImageFile(file: File) — new async handler that:

  • Decodes the uploaded file into a bitmap via createImageBitmap (no
    server round-trip, works fully offline)
  • Draws it onto an offscreen <canvas> to produce a scannable source
  • Passes the canvas to BarcodeDetector with { formats: ['qr_code'] }
  • Validates the decoded value is a valid Stellar address (G... or
    C..., 56 characters) before populating the recipient field
  • Clears the file input after each attempt so the same file can be
    re-selected if needed

• Upload button — image/upload icon button placed next to the existing
  camera scan button in the recipient address row; shows an inline spinner
  while decoding; hidden <input type="file" accept="image/*"> triggered
  programmatically via useRef to avoid native input styling issues

• imgError state — inline error shown below the address field with
  specific messages for three failure cases:

  • Browser does not support BarcodeDetector (with manual fallback hint)
  • No QR code detected in the image
  • QR decoded but value is not a valid Stellar address

• iconBtnStyle constant — shared style object extracted so the
  camera scan button and the new upload button are visually identical
  without duplicating inline style props

No new dependencies

BarcodeDetector and createImageBitmap are Web APIs already referenced
in the existing codebase. No additional packages required.

Related Issues

Companion to the Receive page share/download QR feature.

Type of Change

• New feature

Checklist

• Code follows project style guidelines
• Self-review completed
• No new warnings
• Changes verified locally

Additional Notes

BarcodeDetector is supported in Chrome 83+, Edge 83+, and Chrome for
Android. Safari does not support it — the upload button will show a clear
"not supported in this browser" error message rather than silently failing.
The existing camera scanner (QrScanner component) remains the primary
path for Safari users.

closes #72

[vercel]

@ezedike-evan is attempting to deploy a commit to the miracle656's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Miracle656]

Clean work @ezedike-evan — approving this.

What I liked:

• QRCodeSVG → QRCodeCanvas swap is the right call for PNG export
• The padded canvas approach gives a polished download output
• Web Share API with clipboard fallback is exactly how this should be handled
• QR image upload on the send page is a nice bonus — good error handling for unsupported browsers and invalid QR content
• iconBtnStyle extraction keeps things DRY

Minor notes (non-blocking):

• Two files lost their trailing newline at EOF — not a big deal but worth a quick fix if you touch those files again
• The package-lock.json has a lot of peer flag churn — looks like a different npm version. No functional impact but heads up for future PRs: try to match the repo's npm version to keep lock diffs minimal

Merging as-is. Thanks for the contribution! 🤝