Universal scan button / make WalletConnect more prominent

[tschubotz]

Please see epic for details

[posthnikova]

The options are button in the nav bar, floating action button and tab bar.

[posthnikova]

Android

iOS

Changes after discussion on Slack. What's been done:

1. Identicon made smaller so there's less space on the right

2. On android popup replaced with bottom sheet (behaves like here https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F1mYYvVz_dCIx0bRyY_VV4hOs9709f1ESb%2Fmodal-behavior-dismissal-close.mp4)

3. Firstly we allow scanning WalletConnect, don't change Send flow

4. Second stage – scanning both WalletConnect QR codes and recipients addresses, this involves changes to Send flow.

This requires changing camera screens, at least adding instructions on what to scan. Some ideas for camera were discussed here https://app.zenhub.com/workspaces/gnosis-safe-5c1b98250e13551e8aae81eb/issues/gnosis/safe/190

[posthnikova]

Changes after WalletConnect meeting (https://docs.google.com/document/d/1WM09JrD417_6RinmDh0SYMtw1f_GGhHaLbca8buV2c8/edit#heading=h.il5khvo9jrqc). What's been done:

Removed fiat values for now. Explored WalletConnect logo and "scan" icon instead of "camera" icon:

iOS: https://invis.io/PEPL75H7ZV6#/394104596_AssetView_-WalletConnect_Icon-_
https://invis.io/PEPL75H7ZV6#/394104595_AssetView_-Scan_Icon-_

Android: https://invis.io/5JQJD5ZX7MF#/394108187_AssetView_-WalletConnect_Icon-_
https://invis.io/5JQJD5ZX7MF#/394108196_AssetView_-Scan_Icon-_

[DmitryBespalov]

good

[tschubotz]

Thanks for the update.
I personally like the scan icon since it's the logical counter part to the QR code icon that we use on top of the identicon.

2 questions that @rmeissner brought up.

(1) When tapping the FAB for the first time, should we show the WalletConnect intro screens?

I would say yes. And then let the user go straight to the camera.

(2) After successfully connecting to a WalletConnect session initiated via the FAB, where should the user end up? (Currently they end up on the list of sessions).

I'm undecided here. How about a success alert with a message that they can see all sessions ins settings?

[rmeissner]

I prefer the scanner icon too.

For (2) i would send him to the session list on android

Edit: @posthnikova the invision links for android are both for the wallet connect icon

[posthnikova]

When tapping the FAB for the first time, should we show the WalletConnect intro screens?

@tschubotz I think we should. When entering WalletConnect from the Menu as well, whichever comes first.

At the second step (when there would be scanning recipients addresses) we won't be showing specific WalletConnect slides. Maybe some educational slides on what to scan.

After successfully connecting to a WalletConnect session initiated via the FAB, where should
the user end up?

List of sessions is fine. Maybe without "Scan" button since "Back" button could also lead to Camera since it's the screen they came from.

[rmeissner]

I would not send the user back to the camera. If he goes back he should be on the home screen again in my opinion

[posthnikova]

UX sync: mention WalletConnect on Camera screen, show error popup when scanning regular address, WalletConnect logo for the 1st step.

[posthnikova]

UX sync: show onboarding slides, Back button leads to Assets, don't show sessions list.

[DmitryBespalov]

@posthnikova I'll need the following assets:

1. The green 'scan' button, as a PDF, as is in the invision - with whatever icon is on it.
2. From the scanner scren - the "cancel" button with transparent X
3. From the scanner screen - the frame rectangle with transaparent inside

[posthnikova]

Screens are on zeplin:

iOS Overview: https://app.zeplin.io/project/5c49ce9866e3b3bee966f431/dashboard?seid=5c4f22a250e77937af4b0e9b

iOS new Camera screen: https://zpl.io/2vOrD35

iOS QR code error: https://zpl.io/bJ09Y5J

Android Overview: https://app.zeplin.io/project/5af063c9b4dc859b6bdaf897/dashboard?seid=5c41c8bc4def2a015b85322f

Android new Camera screen: https://zpl.io/bzq0J47

Android QR code error: https://zpl.io/bzRA5Yl