Page MenuHomePhabricator

[Cashtab] Receive screen improvements
ClosedPublic

Authored by bytesofman on Jan 26 2024, 23:54.

Details

Reviewers
emack
Group Reviewers
Restricted Project
Commits
rABCb55dba8c2b7c: [Cashtab] Receive screen improvements
Summary

QR code is an important part of any crypto wallet app. It's the only thing we want to see on the Receive screen and should take up most of the space.

Users do not read the entire address string. So, only show a preview.

Show the entire address in monospace blocks when it is copied.

Test Plan

npm start, confirm the QR code can be scanned at widths > 500px and and 320px, confirm this looks better.
npm run extension or set dimensions at 400 width 600 height in dev console, confirm qr code renders above the fold
review added test cases and npm test

Diff Detail

Repository
rABC Bitcoin ABC
Branch
better-rcv-scrn
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 26694
Build 52956: Build Diffcashtab-tests
Build 52955: arc lint + arc unit

Event Timeline

emack requested changes to this revision.EditedJan 27 2024, 01:18
emack added a subscriber: emack.

It's not autosizing on extension, resulting in extra swipes from the user to move the QR code into view. There's also not a great deal of room either with the header now fixed so the QR code should auto size on extension to render everything in the component.

image.png (618×417 px, 33 KB)

In terms of mobile, d15304.netlify.app loads fine on android s21 chrome, but has the same clipping issue on iOS safari.

Is there a way for the automated integration tests to simulate web vs mobile vs extension and validate the dimensions?

cashtab/src/components/Receive/Receive.js
30–37

Needs to factor in extension dimensions

This revision now requires changes to proceed.Jan 27 2024, 01:18

add tests for size of rendered qr code, bump size of extension

need to make it a bit smaller for mobile

better dimensions for extension and mobile devices

emack requested changes to this revision.Jan 28 2024, 09:25

Dimensions now look all ok across mobile and extension, however it has scanning issues as per video below specific to the version on https://cashtab-local-dev.netlify.app.

  • scanner on netlify + D15304 QR code = no scan
  • scanner on netlify + master QR code = scan
  • master scanner + D15304 QR code = no scan
  • master scanner + master QR code = scan

I've also refreshed cashtab on mobile and reopened the QR code scanner and it's still not scanning. Tried both ios and android, chrome and safari mobile browsers.

This revision now requires changes to proceed.Jan 28 2024, 09:25

reduce logo size for qr code at smaller resolutions

Dimensions now look all ok across mobile and extension, however it has scanning issues as per video below specific to the version on https://cashtab-local-dev.netlify.app.

  • scanner on netlify + D15304 QR code = no scan
  • scanner on netlify + master QR code = scan
  • master scanner + D15304 QR code = no scan
  • master scanner + master QR code = scan

I've also refreshed cashtab on mobile and reopened the QR code scanner and it's still not scanning. Tried both ios and android, chrome and safari mobile browsers.

ok. this is probably related to increasing the size of the logo.

Removed this for mobile-sized qr codes. Redeployed rebased version at https://cashtab-local-dev.netlify.app/

Yup, it was indeed related to the logo, scans all ok now.

This revision is now accepted and ready to land.Jan 29 2024, 01:29
This revision was automatically updated to reflect the committed changes.