Update password & seedphrase backup flow

[andrepimenta]

This is a PR for the update of the password & backup flow that includes five PRs/tasks:

Create password (required step)
#1622
https://trello.com/c/EOp3hZu9/121-create-password-required-step

Prompt to backup seedphrase:
#1647
https://trello.com/c/ytGa96Ps/123-prompt-me-to-backup-my-seedphrase

Manual Seedphrase Backup Designs
#1641
https://trello.com/c/dxgEt2zb/124-save-my-seedphrase-manually-by-writing-it-down

Feature/update import extension tip:
#1668
https://trello.com/c/JqpSbZ7b/122-inform-me-that-my-password-is-same-as-extension

Feature/fingerprint in login
#1651
https://trello.com/c/JHZAyoof/132-allow-me-to-use-fingerprint-option-to-log-in

[ibrahimtaveras00]

As mentioned on standup call @omnat @cjeria this is not implemented in this PR

Not sure if there are Trello cards up for this already for work to be carried out post V1

Issue 1:

I get a crash upon logging out and attempting to create a new password; seen here = https://recordit.co/0AudtgHf5g

Steps:

• I was already logged into an account (from develop branch)
• Then open drawer and tap log out and YES
• When on log in screen, tap on Go Back
• Tap on Create wallet

I should note that if creating a wallet from this branch, it's not reproducible on that flow, so it must be something when already having the app from develop installed

Issue 2:

If I am already logged in and then I log out, and intend to sync with extension, I have to tap on scan twice, and I get the warning alert twice, which is a bit redundant; seen here = http://recordit.co/Vnuu6gvOjo

Steps:

• I was already logged into an account (from develop branch)
• Then open drawer and tap log out and YES
• When on log in screen, tap on Go Back
• Tap on Scan QR code, tap YES on alert box
• Tap scan QR code a second time
• Tap YES in alert box for a second time

Issue 3:

Currently on prod, when a user wants to log out and import a new wallet via seed phrase, we show an alert, however on this branch we do not show an alert, seen here (This branch is on left, while prod is on right)= https://recordit.co/LT7c8Y8rXi

Steps:

• I was already logged into an account (from develop branch)
• Then open drawer and tap log out and YES
• When on log in screen, tap on Go Back
• Tap on Import using seed phrase (notice how on prod I get the alert but not on this branch)

Perhaps this will get tackled in @estebanmino 's PR with this?

Issue 4:

On step 3 “Secure your wallet” after creating a new wallet, on Android a user is able to tap on the device back button which takes them back to create password, should we disable this ability?

Issue 5:

The ‘seed phrase’ modal has the second paragraph repeated twice instead of the third paragraph

Seen here:

Issue 6:

I’m noticing that the sequence of numbers of steps are filled in earlier than what is shown in figma

Step 2:

Step 3:

Issue 7:

On the Congratulations view, we have “loose it” instead of “lose it”

Seen here:

Issue 8:

On the Recovery hint modal, I am able to tap the Save CTA without inputting any text in the text input field

[ibrahimtaveras00]

🐛

[cjeria]

The header and subheader copy in the carousel needs to be updated to the latest copy. Here's a direct link to the designs

[ibrahimtaveras00]

Issue 9:

I'm noticing that for the fingerprint feature, we correctly show it when launching app (and if I cancel I'm still able to initiate it again), however, if I'm already logged in, and then I log out, tapping on the finger print does nothing nor does killing the app then relaunching; seen here = http://recordit.co/G58PvrDM6w

Same on iOS as well when tapping on face id icon I get the following warning:

Is this buggy, or is this how it was intended to work @cjeria / @andrepimenta ?

Also it seems like device pin does not having any design or functionality with this new flow; seen here = http://recordit.co/423nklhQuF

I have to manually enter my password

Issue 10:

I am not able to get Face recognition / Irises / Pin to work on my android device. Basically if I have either enabled, when I get to the create password view, I'm not even asked to Sign in with Face recognition / Irises / Pin (the only one that works for me is finger print). In this example = https://recordit.co/IU9qjMEqQv I have Iris enabled, but I'm not asked to log in with it, thus it's never registered in the app and I have to manually type in my password each time. (same goes for face recognition and pin)

I'm assuming the create password page has to be able to detect/recognize if the device has face recognition/ iris scanner/ pin enabled and prompt the user accordingly; cc: @rickycodes

This does work on iOS for Face ID

[ibrahimtaveras00]

Issue 11:

The title METAMASK is misaligned on this view

this is on my Samsung Note 9 (which is a 6.4" screen)

compared to iPhone X

[ibrahimtaveras00]

Issue 12

Seems like we missed the security feature of blocking screenshots on Android on import via seed phrase flow

this branch = https://recordit.co/S1jrlwY8SA
verses
current production = https://recordit.co/EfpHJ3ehig

[ibrahimtaveras00]

Issue 4a:

In addition to Issue 4 above which was for android, on iOS I'm noticing that by swiping left I get to the create password view which I'm assuming would create a brand new wallet and I'm unsure if we provide a warning

upon checking this flow out it does look like we attempt another wallet creation = http://recordit.co/Ns8Zuwyuep

perhaps we don't allow any way to get back to that view? Disable swiping and native android back button probably should do the trick

[ibrahimtaveras00]

Issue 13

Similar to issue 3, when I am already logged in then I log out and attempt to create a new wallet, on prod I'm prompted with a warning, however, on this branch there is no warning; seen here = http://recordit.co/Znp4SVYphn (prod on left, this branch on right)

[ibrahimtaveras00]

Not really an issue per-se but more of an observation

On a smaller device, (i'm currently on iPhone 5s simulator) after a user inputs password, the page doesn't automatically scroll to the bottom, and there is no indication that the user should scroll down to continue, I'm wondering if this would confuse some users; seen here = http://recordit.co/5b0gKog21T

[ibrahimtaveras00]

Issue 14:

On a smaller device (left in screencast and screenshot is Android Galaxy_Nexus emulator) the confirm CTA on the manual seed phrase back up flow is covering the password text input field; seen here = https://recordit.co/DyDpWNQBwu

to get here you have to do the create wallet > create password > skip backup > then tap on alert on bottom of screen, then continue with backup

[ibrahimtaveras00]

Issue 18:

On a newly created wallet from develop that never had funds sent, as soon as funds are sent on this branch, I get the old secure your wallet modal, but it took me to the new create password flow and created a new wallet (funds lost) = http://recordit.co/aytLTHBHvT

Here at the 1 second mark you can see my address on account 1 with funds:

But the newly created wallet with a new address as account 1 with no funds:

Steps to reproduce:

• go to develop branch
• build app fresh
• once app is built, just create a new wallet
• go to this branch and run yarn start:ios again
• now send funds to account 1
• you'll get old secure your wallet modal, proceed
• go through the whole flow and it will create a new wallet with new seed phrase

[cjeria]

Let's reduce the size of the graphic by ~50% to match the design. That should help not hide the text below the button as well as make room to vertically center the "Remind me later" button/text per the design.

[ibrahimtaveras00]

we are QA Passed 🚀