feat(scanner): implement QR scanning with contact protocol support #118
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add QRScanner class with Web Worker for background decoding - Add MockFrameSource supporting images, videos, and image sequences - Add comprehensive reliability tests with QR transformation - Update Scanner page to use new async QRScanner - Enhance camera mock with frame source support - Add Storybook stories for testing and demo
- Use refs for lastScanned and onScan to avoid dependency chain - Initialize camera only once on mount with empty deps array - Stop existing stream before starting new one
- Add ParsedDeepLink type for hash-based routes - Parse #/authorize/address and #/authorize/signature URLs - Handle deeplink, address, payment, and unknown content types - Navigate to appropriate routes based on QR content
- Create ScannerJob as Stackflow BottomSheet activity - Add chainType-based validators for address filtering - Use callback pattern (setScannerResultCallback) for results - Integrate with SendPage for address scanning - Register ScannerJob in stackflow router
- Fix: execute callback after pop() to prevent SendPage exit - Add ParsedContact type and parseContactURI for contact:// protocol - Add generateContactQRContent for sharing contact cards - Improve camera error handling with detailed messages - Add scanPromptChain i18n for chain-specific scan hints - Extract validators to scanner-validators.ts for testing - Add unit tests for validators
- Create ContactAddConfirmJob to confirm adding scanned contacts - Update Scanner page to handle 'contact' type QR codes - Add addressBook i18n translations for contact sharing - Register ContactAddConfirmJob in Stackflow router
- Create ContactShareJob to display contact QR code for sharing - Add share option in address book contact menu - Support QR code download and Web Share API - Register ContactShareJob in Stackflow router
- Add ScannerJob.stories.tsx with ValidatorDemo, AddressFormats, UIPreview - Add ContactJobs.stories.tsx with ContactProtocolDemo, ContactAddConfirmPreview, ContactSharePreview, EdgeCases - Add 15+ contact protocol tests in qr-parser.test.ts - Add 8+ edge case tests for validators in ScannerJob.test.ts - Add E2E tests in contact-scanner.mock.spec.ts - Fix empty addresses validation in qr-parser.ts - Create Scanner.md documentation in whitepaper - Update contact service docs with share/scan protocol 79 tests passing, 35 skipped
- Add mountedRef and initializingRef to prevent race conditions - Handle AbortError gracefully (common in React StrictMode) - Check component mount status before updating state - Clean up stream if component unmounts during initialization
- Add QueryClientProvider to .storybook/preview.tsx global decorator - Update CI workflow to run test:storybook in both fast and standard paths - Update whitepaper testing strategy with Storybook + Vitest integration docs - Document test types: unit (*.test.ts) vs component (*.stories.tsx) - Add guidance on when to use play functions vs unit tests All 337 Storybook tests now passing
Scanner: - scanPromptChain, noCameraFound - invalidAddress, invalidEthereumAddress, invalidBitcoinAddress, invalidTronAddress AddressBook: - addContact, namePlaceholder, addresses, memo, memoPlaceholder - shareContact, scanToAdd
Gaubee
force-pushed
the
feat/qr-scanner
branch
from
fc210ae to
4b1d501
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Implement high-performance QR code scanning with Web Worker, Stackflow integration, and contact protocol support.
Features
QR Scanner Core
ScannerJob (Stackflow BottomSheet)
Contact Protocol
{"type":"contact","name":"张三","addresses":[...]}contact://张三?eth=0x...&btc=bc1...Testing & CI
Documentation
Changes
src/lib/qr-scanner/- QR scanner core with Web Workersrc/lib/qr-parser.ts- Contact protocol parsingsrc/stackflow/activities/sheets/ScannerJob.tsx- Scanner BottomSheetsrc/stackflow/activities/sheets/ContactAddConfirmJob.tsx- Add contact confirmationsrc/stackflow/activities/sheets/ContactShareJob.tsx- Share contact QR.github/workflows/ci.yml- Added test:storybook to CI.storybook/preview.tsx- Added QueryClientProvider