Change the Mobile QR Scanner library

[twblack88]

We currently use the safari mobile web scanner and it's slow and clunky. We should update this so scanning apps via walletconnect feels snappy, and so scanning is intuitive.

Design mock:

QR Code Scanner - QR scanner & Wallet actions (dapps etc.) (Figma)

We should evaluate the overlay and the manual address input. Like trust below.

AC

• import expo in mobile app repo and pull into web
• mobile: connecting to apps is fast, and reliable.

[gomesalexandre]

For web environments, worth trying out something like https://github.com/nimiq/qr-scanner which uses BarcodeDetector native browser API when available which is much much faster (as close as you can be to native speed since native browser API, WASM yadi yada)

[twblack88]

Oooohhh nice. as close to native speed is fire. Updated description with mock.

[gomesalexandre]

Library Issues (?)

Curious re: this guy below @twblack88

We currently use the safari mobile web scanner and it's slow and clunky.

What do we mean by "Safari mobile web scanner"? If I understand this correctly, this means that native app uses Webkit for scanning (as it's a wrapper) and hence is mostly an issue for native app and we should fix it (it being native) in a way to make scan more snappy i.e not a webapp issue to tackle?

What about Android, have we tested, on both mobile and web app? Have we noticed similar issues? (unable to test myself as we speak)

Also just a PSA for future issues, if we could ensure product-authored issues describe the issue at hand i.e:

• describe what to implement and/or fix
• for such issues, include the platform i.e web/native vs. mobile app , iOS vs. Android)
• don't try and dive into eng. terminology territory (unless authored by eng. of course) it would help focus tons

Thanks!

Just realised I focused on the library spike every time I looked at this over the last few days (which granted is already too much time for such a low prio issue), without even realising that this ticket wasn't authored by eng. as implied by its title, and there is no confirmation that library used for scanning is even the issue re: scan slowness here (it's not, at least not in web land, see below).

Findings

@0xApotheosis re: native lib FYI gave a go at testing things more at runtime and:

• Can't find any slowness on desktop, i.e actual scan is pretty much instant (added logs to confirm, meaning even if there may be shenanigans in the actual flow, the actual scanned content itself is scanned pretty much instantly, no need to change libs)
• On iOS (web/mobile app) the only weirdness I noticed is camera has a few seconds of out of focus where it's useless, before becoming usable and effectively scanning immediately. That is not an us issue and every website doing camera bits including https://nimiq.github.io/qr-scanner/demo has the same issue and it seems to be a common problem.
  Since our react-native implementation is effectively a web wrapper, I indeed think using native lib for the mobile app could improve this, would obviously only help the mobile app, but honestly it's probably all we need as it's where usage lives. Assuming this is indeed simple to implement and not a few days effort obviously!
• On Android (web/app), unable to confirm at the time of writing if the same issue happens or not, but either way, native camera functionality for native in both platforms can't hurt

UI work

Note before we change anything here UI-wise (assuming we ever need to, perhaps the native PoC will automagically bring styles in for native app and there's no need to spend capacity in webapp mobile styles since much lower use), we should first give a try to that native component PoC big apo has in mind and go from here - for QR scanner, UI is extremely implementation-dependant and it's not as easy as a "make this div 100vh 100vw" prompt of sorts, which is the reason why it's such a small weird scan area atm to start with.

Ditto things like outlines, scan region etc also make this more complex than it looks!

tl;dr:

• library doesn't seem to be the bottleneck on web
• all websites with Camera functionality affected by same issue as us and native functionality very likely to help for native app
• probably not worth the effort to touch anything in web (mobile/desktop) at all given it's a lower prio of an already lower prio issue
• UI work TBD last if not automagically brought by native PoC with RN components, need to be cognisant of effort as it's harder than it looks

[twblack88]

What do we mean by "Safari mobile web scanner"?

this was notes from grooming while creating the ticket on the fly. So apo could dig in since he had the most context.

That also explains why the ticket isn't as robust with problem/solution, user story, and template. Ill try to be a stickler, even when we're quickly moving, to keep things thorough.

What about Android, have we tested, on both mobile and web app?

I also don't have an Android, I probably should for testing.