Hardware wallets

[liamzebedee]

Work in this branch implements support for Ledger and Trezor for use as Ethereum wallets, and in a future PR that is not far far away, Bitcoin wallets too. It uses web3-react, a well-written library for Ethereum interactions in React, which supports various types of wallets (eg. WalletConnect).

This PR implements "connect a wallet" functionality, with UX inspired from the Uniswap dApp. Some screenshots are attached below to illustrate. Ignore the terrible design until [WIP] is removed.

• [x] Use WSS for ElectrumX connection, as hardware wallets require HTTPS with no mixed transport security.
• [x] Integrate Ledger support
• [x] Fix Ledger error handling when it's on the lockscreen - TransportStatusError: Ledger device: UNKNOWN_ERROR (0x6804). Looks like a weird Ledger bug.
• [x] UX audit of choose wallet
• [x] Trezor support
• [x] Trusted certificate for ElectrumX server (refs: #194)

Depends-On: #195

Epic: #177

Image assets

Logos were taken from:

• Metamask
  • https://github.com/MetaMask/brand-resources/blob/master/SVG/metamask-fox.svg
• Ledger
  • https://github.com/makerdao/governance-dashboard/blob/master/src/imgs/ledger.svg
• Trezor
  • https://github.com/makerdao/governance-dashboard/blob/master/src/imgs/trezor.png

[liamzebedee]

Example of Uniswap's distinction between Web3 connection and wallet connection.

Another example of the "Connect Wallet" dialog, which this is modelled on.

[liamzebedee]

Github doesn't support webm/mp4, so here's a brief video on Flowdock of the brutalist functional UI.

[liz-shinn]

Nice! Thanks for linking me to this. I had looked into the "connect wallet" dialog when doing initial research on the token dash. I've attached some screenshots below of other approaches I've seen.

From Basechain:

From IoTex:

From Staked:

[Shadowfiend]

The LOC on this change scared the bespitters out of me (before I realized there was a huge SVG here, that is).

Can we actually split this out to:

• Existing react-web3 PR (#195).
• PR that introduces the dialog but maybe only supports Metamask.
• 1 additional PR per added wallet

? Or would that be too much of a pain? It would be helpful for me to maintain context and keep review turnaround times short, even if each PR is built on the other (as long as the base branch is set to keep the diff to just what that PR is adding).

[liamzebedee]

@Shadowfiend If that helps us ship faster, then of course. Thanks for explaining why this would help too, that's something I find really useful.

[Shadowfiend]

Now that I see this updated diff, feels fine as is. Will try and do a full pass today.