Status-react: Design changes to Unlock screen

[asemiankevich]

Problem

Unlock screen needs some tweaks:

In the scope of this issue

• Change the toolbar title to "Your keys". We've decided to rename it this way quite a long time ago but it kind of got lost in Figma;
• Change the list item's style, since now it's a one-line item (no address) according to our component library;
• Add "Access key" to the bottom of the screen to make it possible to show the bottom sheet with the recovery options on this screen;
• Add "..." to the toolbar and show "Get a new key" in the bottom sheet when the user taps on it, to make it possible to go to the "generate a new key" flow from this screen;
• Add a keycard indicator to keycard-accounts;

To be addressed later on

• [ ] add public key for an account?

• [ ] add Privacy policy to the bottom of the screen?

• [ ] ENS name should be shown there if user has it?

Current screen

Steps

• login to status and create account
• logout and tap back

Build

nightly 6 Sep 2019, device - Samsung S10 Android 9

@rachelhamlin we can make it bounty when it is finalized from design POV , right?

[rachelhamlin]

I'm going to remove the v1 release label for this one because:

• Privacy policy _is_ linked within the profile screen, so that's not urgent.
• ENS name could be separated into another issue, but it's not a v1 blocker.
• The missing public key is by design right now. Notes I have from our call:

Unlock screen - not showing public key here any more. Is that a bug?

Eric: We had a conversation about it with Hester. It’s actually something that might change. We might allow users to have multiple chat keys.
The root key will always be the same, or it could be an identifier. I leave it to design to think about which one is best.

@andmironov would you want to spend some time working on that piece? Either 1) an identifier for your public key to differentiate your various random names, or 2) just the root key (whichever bit will be the same regardless of how many chat keys you are ultimately managing).

I'm not quite sure what the benefit is of displaying the public key here though. I suppose it's helpful to differentiate your accounts, if you have a bunch of random names.

But the whole point of multi-account is that you only need one Status account, right?

[andmironov]

If it's possible I'd add the following changes to this screen:

• Change the toolbar title to "Your keys". We've decided to rename it this way quite a long time ago but it kind of got lost in Figma;
• Change the list item's style, since now it's a one-line item (no address) according to our component library;
• Add "Access key" to the bottom of the screen to make it possible to show the bottom sheet with the recovery options on this screen;
• Add "..." to the toolbar and show "Get a new key" in the bottom sheet when the user taps on it, to make it possible to go to the "generate a new key" flow from this screen;
• Add a keycard indicator to keycard-accounts;

[andmironov]

cc @rachelhamlin do you think this might make it to v1 after all?

[rachelhamlin]

@andmironov the changes proposed in your comment are quite simple, so probably. Though I don't view them as urgent, so will put a bounty on. I think they'll get done.

I'd like to return to the ENS and public key issues later. Going to create a separate issue for your comment.

Edit: Jokes, just updated this same issue. Added to bounty queue.

[churik]

@rachelhamlin I think now it is part of https://github.com/status-im/status-react/issues/9224
Should we close this one?

[rachelhamlin]

Yup, think so, thanks @churik