Ledger integration feedback

[kyranjamie]

Opening this discussion to collect feedback on the Ledger integration 📒

It's still under active development, but community testers welcome 🐛

Download the beta version of the Hiro Wallet supporting Ledger →

Here's a demo of the proof of concept running through the happy flow

Kapture.2022-03-01.at.09.16.06.mp4

[kyranjamie]

Here are my initial questions/ideas to improve the onboarding from the current design spec.

1. Home screen prominence of Ledger action

I wonder whether we should add a slightly more prominent Connect your Ledger CTA. We should be encouraging this, and creating a software account is the more heavy action. Should we clarify that Create Stacks account makes a software wallet? Should they have a second chance to choose Ledger on the next step?

2. Set user expectation that WebUSB pop up will open

Some text/imagery that sets the user's expectation that this window will open would improve this step. Connecting a USB device isn't a super common action, so some guidance would help novice users.

Maybe we show a message after clicking the Connect button saying something along the lines of "Find your Ledger device and press connect in the pop up", and after a short delay, trigger the action?

Note: The Nano S in this window (below) will show when the Ledger is on the Select your app screen, as well as when the Stacks app is open. But the Stacks Ledger app must be open for onboarding to work. If we can get the user to have this app open/ready before pressing connect, it'll be a much better ux.

3. Alternate copy while Looking for device

By the time we get this step, we've already found the device. It takes milliseconds for us to establish whether or not the device is connected, or if there's a connection error. There is not "Looking" time.

During this time, we pull n public keys from the device. 5 public keys, the current default, takes ~10 seconds.

4. Common error handling

Common, easily-fixed error cases, such as the device being locked, or the app not being open should be handled in the least disruptive manner possible. Navigating to a catch-all error screen is a heavy-handed error flow in these cases (useful, but for transport errors, such as if you unplug the device while actions are in-flight).

We should consider how we handle these inline. Should we use the UI below?

cc/ @fbwoolf @landitus

[markmhendrickson]

I've been discussing a holistic re-look at the onboarding approach with @landitus recently, and I imagine much of what we can do to improve Ledger-specific onboarding can be incorporated into that effort (and unlinked from this initial Ledger release).

As such, I would suggest we focus on base-level design needs here that are missing, such as any common errors that aren't clear already for this initial release.

@kyranjamie can you provide a list of all possible errors and an indication of when and why they arise?

[fbwoolf]

Notes from our coordination meeting this morning:

• Remove Lock from settings
• Remove Create an Account from settings
• We will automatically pull in 3-5 accounts for the user until we design the flow to create an account
• Identify in UI that the user is connected to a hardware wallet
• Should the tx signing flow stay in the drawer/modal rather than move to full page?

[landitus]

Thanks for putting this together @kyranjamie. I agree with all your remarks about improvements to the UX 💯!!
I will focus on the missing states and errors in the short term, to have them for the release.

[landitus]

Some design updates for the Ledger Transaction Signing. I've mocked the happy path and also the error states that can come up during the transaction.

User flows

Prototype

Check this Figma for all the different flows.

In the prototype, it assumes the Ledger is already plugged in and has been paired once to the Chrome browser. We may need to mock a state where the Ledger is not even plugged in.