feat: add native QR scanner support for mobile app#11516
feat: add native QR scanner support for mobile app#115160xApotheosis wants to merge 2 commits intodevelopfrom
Conversation
- Add openNativeQRScanner() function to mobileMessageHandlers.ts - Modify QrCodeScanner.tsx to detect mobile environment and use native scanner - Web component shows loading spinner while native scanner is active - Hand off QR scanning to native expo-camera implementation for better reliability
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
gomesalexandre
left a comment
gomesalexandre
left a comment
There was a problem hiding this comment.
Confirmed worky with mobile-app fren 🐐
| if (isMobile && isNativeScannerLoading) { | ||
| return ( | ||
| <SlideTransition> | ||
| <DialogHeader> | ||
| <DialogHeader.Left> | ||
| <DialogBackButton onClick={onBack} /> | ||
| </DialogHeader.Left> | ||
| <DialogHeader.Middle> | ||
| <DialogTitle>{translate('modals.send.scanQrCode')}</DialogTitle> | ||
| </DialogHeader.Middle> | ||
| </DialogHeader> | ||
| <DialogBody> | ||
| <Center minHeight='298px'> | ||
| <Spinner size='xl' color='blue.500' /> | ||
| </Center> | ||
| </DialogBody> | ||
| </SlideTransition> | ||
| ) | ||
| } |
There was a problem hiding this comment.
There is a world where the users didn't update the app, we need to use useMobileFeaturesCompatibility with the next minor version of the mobile app (just take current +1 minor, I'll push a PR for that) and skip this loader and the message logic if the current mobile app isn't compatible
3 participants
Description
Adds support for native QR code scanning when running in the mobile app. When the web app detects it's running inside the ShapeShift mobile app WebView, it delegates QR scanning to the native
expo-cameraimplementation instead of using the web-basedhtml5-qrcodelibrary.Issue (if applicable)
Closes #11418
Risk
Low Risk
This change only affects QR scanning behavior when running inside the mobile app WebView. Desktop/browser users are unaffected - the existing
html5-qrcodeimplementation continues to work as before.The mobile detection uses the existing
isMobileflag fromglobals.tswhich checks forwindow.isShapeShiftMobile.None. This is a UI/UX change only - no on-chain transactions or wallet interactions are modified. The scanned QR data is passed through unchanged.
Testing
Desktop browser testing (verify no regression):
Mobile app testing (app fren): Ensure the QR code scanner works in:
juicedue to local host constraints)Engineering
👆
Operations
👆
Screenshots (if applicable)
ScreenRecording_12-23-2025.15-41-07_1.MP4