Page MenuHomePhabricator

[Cashtab] Use capacitor barcode scanner to dramatically simplify and improve scanning of qr codes
ClosedPublic

Authored by bytesofman on Oct 7 2025, 01:25.

Details

Summary

Cashtab has had a series of custom scanner implementations. Capacitor now has a well maintained lib that does just what we want. Use this to standardize and improve the scanning experience across web and mobile.

Test Plan

npm test, check out cashtab.io, run app with ./start-android and scan something

Diff Detail

Repository
rABC Bitcoin ABC
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

bytesofman published this revision for review.Oct 7 2025, 02:07
Fabien accepted this revision.EditedOct 7 2025, 08:12
Fabien added a subscriber: Fabien.

Green because it works and it's a nice simplification.

However I think it could be improved by not returning from the scanner if the thing being scanned is not a valid ecash address or url. I managed to scan a testnet address on mainnet cashtab which then tells me it's invalid while you'd expect it to keep scanning (e.g. several barcodes on the screen).

cashtab/src/components/Common/ScanQRCode.tsx
1 ↗(On Diff #56069)

You can't remove the copyright info but you can extend it

cashtab/src/components/Common/__tests__/ScanQRCode.test.tsx
1 ↗(On Diff #56069)

dito

This revision is now accepted and ready to land.Oct 7 2025, 08:12

However I think it could be improved by not returning from the scanner if the thing being scanned is not a valid ecash address or url. I managed to scan a testnet address on mainnet cashtab which then tells me it's invalid while you'd expect it to keep scanning (e.g. several barcodes on the screen).

Maybe -- Cashtab used to behave this way but removed it a while ago. The issue is that when you scan a QR code, you really have no idea what it is. So the UX of unknowingly scanning a testnet address or a restaurant menu or whatever can then be -- seems like the scanner is broken, you are pointing it at what is clearly a QR code so why is it not working!? It's not scanning and the user has no idea why.

By picking up anything, we then let the existing validation tell you why whatever you scanned is bad.

The several barcodes on screen thing I can see being an issue but on balance I think that is more rare than the accidentally scanning the wrong thing and not knowing why it isn't working.

fix copyright notices, minor version bump

patch x overflow issue on web qr code scan

more tweaks for web, patch css so switches aren't broken

Failed tests logs:

====== CashTab Unit Tests: <ScanQRCode /> Renders the scan button and calls onScan when QR code is detected ======
Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: {"hint": "QR_CODE", "scanButton": false, "scanInstructions": "Point your camera at a QR code", "scanText": "Scanning..."}

Number of calls: 0
    at Object.toHaveBeenCalledWith (/work/cashtab/src/components/Common/__tests__/ScanQRCode.test.tsx:52:53)

Each failure log is accessible here:
CashTab Unit Tests: <ScanQRCode /> Renders the scan button and calls onScan when QR code is detected