Skip to content

feat: add native QR scanner support for mobile app #11516

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
0xApotheosis wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft

feat: add native QR scanner support for mobile app #11516

0xApotheosis wants to merge 1 commit into from
+95 −2

Conversation

@0xApotheosis
Copy link
Member

@0xApotheosis 0xApotheosis commented Dec 23, 2025 •
edited
Loading

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-camera implementation instead of using the web-based html5-qrcode library.

⚠️ Merge Order: This PR should be merged after app fren to avoid breaking QR scanning on mobile.

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-qrcode implementation continues to work as before.

The mobile detection uses the existing isMobile flag from globals.ts which checks for window.isShapeShiftMobile.

What protocols, transaction types, wallets or contract interactions might be affected by this PR?

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

  1. Desktop browser testing (verify no regression):

    • Open app in Chrome/Firefox
    • Navigate to Send → select asset → click Scan QR Code
    • Verify web-based QR scanner still works normally in both full size and mobile responsive views

  2. Mobile app testing (app fren): Ensure the QR code scanner works in:

  • The send flow
  • The wallet connect flow (note the WalletConnect connection will only work when pointing at juice due to local host constraints)

Engineering

👆

Operations

  • 🏁 My feature is behind a flag and doesn't require operations testing (yet)

👆

Screenshots (if applicable)

ScreenRecording_12-23-2025.15-41-07_1.MP4

@0xApotheosis
feat: add native QR scanner support for mobile app
d1439e6 
- 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
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 23, 2025

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch better-qr

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

gomesalexandre
gomesalexandre approved these changes Dec 23, 2025
View reviewed changes
Copy link
Contributor

@gomesalexandre gomesalexandre left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirmed worky with mobile-app fren 🐐

NeOMakinG
NeOMakinG reviewed Dec 23, 2025
View reviewed changes
src/components/QrCodeScanner/QrCodeScanner.tsx
Comment on lines +105 to +123
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>
)
}
Copy link
Collaborator

@NeOMakinG NeOMakinG Dec 23, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@NeOMakinG NeOMakinG NeOMakinG left review comments

@gomesalexandre gomesalexandre gomesalexandre approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Change the Mobile QR Scanner library

4 participants

@0xApotheosis @NeOMakinG @gomesalexandre