search

MetaMask / metamask-extension

:globe_with_meridians: :electric_plug: The MetaMask browser extension enables browsing Ethereum blockchain enabled websites
https://metamask.io
Other
12.03k stars 4.91k forks source link

Improve hardware wallet connect loading screen #10327

Open Gudahtt opened 3 years ago

Gudahtt commented 3 years ago

Currently the hardware wallet connect loading screen doesn't provide any guidance for the user on what they are expected to do next. We do have some instructions during the connect flow, but these are insufficient, and only shown on the first page of the flow. They are obscured by the loading screen once the user presses "Connect".

We should give them instructions during the loading step on how to proceed with connecting the wallet, rather than just saying "Loading". We should also provide more specific instructions in general; either link to the Trezor and Ledger pages instructing users how to connect their wallets (e.g. unlock the device, enter passphrase, open Ethereum application, whatever steps are required) or write our own steps.

Screenshots: **Hardware connect screen:** ![connect-instructions](https://user-images.githubusercontent.com/2459287/106610095-e9d08000-6540-11eb-9846-4411fba34f96.png) As you can see it does instruct the user to connect the hardware wallet to their computer. But no further guidance is given beyond that. **Loading screen:** ![connect-loading](https://user-images.githubusercontent.com/2459287/106610111-ed640700-6540-11eb-9589-8d02577a0d2d.png) As you can see, this obscures the instructions shown previously, making them unscrollable and difficult to read.

These issues involved user confusion that may have been avoided by these instructions:

This issue is a request to add similar instructions for each confirmation:

BboyAkers commented 3 years ago

Look like this is resolved, correct? 🙂 https://github.com/MetaMask/metamask-extension/issues/10249

Gudahtt commented 3 years ago

No - the hardware wallet connect loading screen still provides no guidance. It's just a spinner.

dpazdan commented 3 years ago

example of a nice animation ledger live uses for this:

https://user-images.githubusercontent.com/16330048/131736099-8a78d474-cc54-40b7-9bac-73d52fff4926.mov

holantonela commented 3 years ago

We have an ongoing work-in-progress here:

User Story User Flow