Encrypt storage of mnemonic

[smaroudasunicorn]

STORY: Superhero Wallet mnemonic storage should be securely encrypted on user's device both for the browser extension and for the mobile apps.

Research and suggestion (by @onvisions ) As far as I have researched several other crypto wallets they usually have password option for accessing web and browser extension and biometric/PIN authentication to access the mobile apps.

Based on that I think that introducing both password and biometric/PIN authentication (on mobile) will be an overkill and it will require more complex logic on mobile. Instead I suggest to have:

1. Secure login with Password for web wallet and browser extension.

• Setting a password will be required during creation of new wallet or import of existing one;
• Users who already have installed the wallet will be informed about the wallet being updated to a new version with upgraded security and that they need to set a password (modal to set pass before proceeding to Dashboard);
• For security reasons the password is mandatory. It cannot be turned off;
• The user will be able also to set lock up inactivity period; Default is 5 mins.

2. Secure login via default mobile device authentication method (biometric/PIN). This one we should already have implemented. I think we don't need anything else on mobile unless I'm missing something here.
   The user is able to set different lock up intervals for the wallet and the device screen so that for example the Superhero wallet is locked immediately and the device screen after 15 mins. which gives good control over the desired behavior.

DESIGN:

1. Set Password

..........................................................................................

2. Upgraded Security Modal. Set password.

Recording: https://github.com/user-attachments/assets/80ba40ce-f1d8-4de6-8613-b0eba742e0ad

..........................................................................................

3. Unlock with password

..........................................................................................

4. Seetings: lock time interval, reset password

Auto-lock Interval:

Change your password:

..........................................................................................

5. Update of wording needed:

FIGMA REFERENCE: https://www.figma.com/design/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?node-id=33455-217248&t=yNhx5Cr7FQ1SiG9h-0

[smaroudasunicorn]

In the seed phrase screen we need to write that seed phrase is store encrypted.

[smaroudasunicorn]

We set the password only for web and extension, it will be mandatory option.

We keep lock timer but we cannot disable Secure Login.

[smaroudasunicorn]

For users upgrading the app they have to be prompted to set a password.

[onvisions]

@martinkaintas @peronczyk @smaroudasunicorn

1. As discussed adding manual "Lock wallet" feature allowing the user to lock the wallet immediately from the "More" screen.

Design:

Figma reference:
https://www.figma.com/design/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?node-id=31920-193173&node-type=frame&t=9seIxZoOgv2mi7mz-0

2. Additionally (as another low hanging fruit) I'm suggesting to add a default non-transparent background during locked wallet state. Thus there will be no security compromised as nothing will be loaded behind the overlay while the wallet is locked. At the same time it's a pure visual improvement from current blurred state (that looks broken from time to time).

Design:

Figma reference:
https://www.figma.com/design/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?node-id=33640-210784&node-type=frame&t=9seIxZoOgv2mi7mz-0

[smaroudasunicorn]

I am ok with the proposal

[Liubov-crypto]

1. Terms page is empty:

Also if I'm opening it in extension there is no way to go back to the login page, I have to remove extension and install it once again.

2. Haven't we added Pair Airgap on the login page?

3. A little bit smaller pic inside an icon compared to design:

4. Probably not our issue but I'm wondering, why there are white fields after I saved my password in Chrome?

5. Caps lock feature is missing:

6. According to Figma password must be at least 8 characters long, but we have 4. Is it correct?

7. After I changed my old password to the new one the header is missing and it seems that both passwords are not working when I'm trying to enter the wallet:

2024-10-04.1.07.54.mov

In extension the header is present, but after I changed my password wallet is in endless update status and there is not possible to enter password. It seems broken too:

[Liubov-crypto]

8. The icon is different compared to Figma design: