Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Connect Ledger via WebHID #12411

Merged
merged 61 commits into from
Oct 21, 2021
Merged

Connect Ledger via WebHID #12411

merged 61 commits into from
Oct 21, 2021

Conversation

danjm
Copy link
Contributor

@danjm danjm commented Oct 19, 2021

This PR improves upon and replaces #12234

The purpose of this PR is to enable users to connect their Ledger devices to metamask via WebHID, if that option is available in the current browser.

When the user goes through the hardware wallet connect flow, by default they will be presented with a browser popup that asks them permission to connect their Ledger device.

In addition to that, other changes/improvements are:

  • the settings toggle for ledger live has been changed to a dropdown menu, allowing users to select up to 3 options (ledger live, u2f and webhid)
  • if webhid is selected in the aforementioned dropdown, and the ledger device is not connected, then a request to connect the device via webhid is made at that time
  • if, in the hardware wallet connection flow, the user cancel's a connection request, an appropriate error message is shown
  • every time a user goes to a transaction or message signing confirmation screen, if they have a ledger wallet and have selected the webhid transport type preference, then a check is made whether the ledger device is connect via webhid. If it is not connected, then the user is shown text prompting them to connect
  • the confirm screen ledger instructions are now shown on all transaction screens, including erc20 approval confirmations, and message signature confirmations
  • note that the webhid connection popup is too big for our notification window and cannot be resized by us, so we have to open the app in a full tab when the user hits the confirmation screen in a notification window and webhid is not connected

Below is a demo video that shows:

  • connecting with webhid and successfully sending a transaction
  • closing metamask, disconnecting webhib via browser settings, then opening metamask and seeing the connection prompt during the confirmation flow
  • the webhid connection prompt/flow when signing a message proposed by a dapp
  • fully closing the browser and then reopening and then sending a transaction without having to connect again
ledgerwebhid-2.mp4

@danjm danjm requested a review from a team as a code owner October 19, 2021 22:42
@danjm danjm requested review from ryanml and removed request for a team October 19, 2021 22:42
@github-actions
Copy link
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@danjm danjm changed the title Handling ledger webhid disconnected cases Connect Ledger via WebHID Oct 21, 2021
danjm and others added 2 commits October 21, 2021 10:11
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
@@ -233,6 +233,12 @@
margin-left: 1.875rem;
}

&__inline-link {
display: initial;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: Display would already be inline if an anchor tag was used directly, rather than the button component. Does using the Button component here, for a thing that is not a button, have any other advantages I wonder 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button component will use an anchor tag if the type is "link" which it is in this case. The advantage is consistency in styling used by other links within the app.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I realize that, but it also sets display: flex, which never makes sense for a link. The transition styles and border radius don't seem to make sense here either. The ability of that component to handle links seems like an afterthought - it's not very good at it. Even the font size it sets seems strange - it uses H4 for some reason, and is usually overwritten to be smaller.

I guess it does set the standard colors though. As far as I can tell that's the only useful thing it does right now over an anchor tag.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hah, there's even a comment suggesting that it should be broken out:

// we know to be erroneous attributes for a link. We will likely want to extract Link

Ah well. Not something we need to fix in this PR, it's just unfortunate.

ui/store/actions.js Outdated Show resolved Hide resolved
@metamaskbot
Copy link
Collaborator

Builds ready [05a71df]
Page Load Metrics (508 ± 61 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint7182744319192
domContentLoaded37383049712962
load38784750812661
domInteractive37382949712962

highlights:

storybook

@metamaskbot
Copy link
Collaborator

Builds ready [75ed73c]
Page Load Metrics (516 ± 67 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint37090051013766
domContentLoaded35490450114469
load37490451614067
domInteractive35490450114469

highlights:

storybook

@metamaskbot
Copy link
Collaborator

Builds ready [1a0a93a]
Page Load Metrics (388 ± 40 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint2725963888441
domContentLoaded2625973788541
load2715973888440
domInteractive2625973778541

highlights:

storybook

Copy link
Member

@Gudahtt Gudahtt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Copy link
Contributor

@darkwing darkwing left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is excellent! The only bit of unexpected behavior I saw was that I was being prompted each time to connect via WebHID, but I wasn't seeing it before, so it could be browser weirdness.

}
return;
}
setLedgerLivePreference(transportType);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we'd always want this to be updated upon change, correct? Why the return above?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You may have been looking at an outdated diff 🤔 Weirdly the preview on the main discussion view of the PR doesn't match the diff view at all.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, we used to have a return statement here, but now we set the preference at the start of this function


export const WEBHID_CONNECTED_STATUSES = {
CONNECTED: 'connected',
NOT_CONNECTED: 'notConnected',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know it's likely late in the game but would disconnected be a better word to use?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

disconnected implies it was once connected and is no longer, but this covers both that case and the case where it has never been connected

@danjm danjm merged commit 9d70c60 into develop Oct 21, 2021
@danjm danjm deleted the ledger-webhid-unhappy-path branch October 21, 2021 19:17
@github-actions github-actions bot locked and limited conversation to collaborators Oct 21, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants