Add Ledger to account

Story

As a user with a Ledger Nano S, I want to use the Ledger to custody my NEAR account key, so I can more securely store up to $10k worth of assets.

Proposed User Flow

1. User selects “Add Ledger Nano S to Account” in /profile
2. Redirected to /setup-ledger
3. Views instructions (see below) for installing Ledger app, completes installation (on Ledger)
4. User is prompted to connect Ledger via USB, open the NEAR app i. If error, “Connection failed. Please check that you have the NEAR app open”
5. User is asked “Would you like to remove your other Full Access Keys?” i. If yes, add Ledger key, remove other Full Access Keys ii. If no, add Ledger key
6. Redirected to /profile

Notes

Pretty good example of a Ledger flow from MyCrypto: https://beta.mycrypto.com/add-account/ledger_nano_s

Likely instructions to install Ledger App

1. Open Ledger Live and go to Settings (gear icon on the right):

1. Enable developer mode (last option):

1. Now go back to manager and search for NEAR:

[kcole16]

@Patrick1904 @corwinharrell Re: recovery flow and the next step for the Ledger integration: https://github.com/near/near-wallet/issues/589

Also @corwinharrell, still not 100% clear on Nano S vs. X, but my guess is they will both work. Will test this out though. Thoughts @vgrichina ?

[heycorwin]

@Patrick1904 attaching this desktop modal example for reference. Happy for you to eyeball most of it, margins/padding don’t need to be exact.

For the animation. I’m thinking of animating transition: translateY(-16px) to transition: translateY(0px), and then opacity from 0 to 1. I have the animation duration at 300ms. Clicking outside of the modal would dismiss the modal, and the transparent modal container would also have its opacity animate in at the same speed as the modal itself. Pretty basic. There is a small hover state for the close button on desktop.

Key differences between the desktop and mobile are the positioning. Mobile is positioned at the bottom with justify-content: flex-end whereas the desktop version is centered. The border radii are also different on mobile to mimic the native iOS action sheet. Let me know what you think:

Taking a look at your proposed recovery flow.