Hardware Wallets

This release sees the addition of wallet modules for both Trezor and Ledger hardware wallets making it super simple to add hardware wallets as an option for Dapp users.

To add hardware wallets, simply add the following to your Onboard configuration object:

const onboardConfig = {
  // ...other config options
  walletSelect: {
    wallets: [
      // ...other wallets
      {
        walletName: "trezor",
        appUrl: '<YOUR_APP_URL>', // required for Trezor manifest
        email: '<YOUR_CONTACT_EMAIL>', // required for Trezor manifest
        rpcUrl: '<RPC_URL>'
      },
      {
        walletName: "ledger",
        rpcUrl: '<RPC_URL>'
      }
    ]
  },
  walletCheck: [
    { checkName: "connect" },
    { checkName: "accounts" },
    { checkName: "network" },
  ]
}

const onboard = Onboard(onboardConfig)

Details regarding the Trezor Manifest can be found here

There are some differences to note between Ledger and Trezor devices and how they operate within Onboard:

• Ledger wallets can only load one address at a time and is noticeably slower when loading each account. There also isn't an included UI that guides the user to get the device ready to be connected. To solve this Onboard will display a wallet check modal that instructs the user:
  - to plug in their Ledger
  - to unlock their Ledger via the pin code
  - to have the Ethereum app open on their device
  - that Onboard is going to load their accounts and shows a spinner for indication of loading status

• Both Ledger and Trezor lack UI's that allow the user to select which account they would like to use. An "accounts" wallet check module has been added to provide a UI that allows users to select an account they would like to use and also allows them the load/generate more accounts to select from. This module needs to be included in your wallet check array if you would like it to be a part of your onboarding flow:

const onboardConfig = {
  // ...other config options
  walletCheck: [
    { checkName: "connect" },
    { checkName: "accounts" }, // add new accounts module to onboarding
    { checkName: "network" },
  ]
}

This modal will only show if the user has selected a wallet of type "hardware" and will only show the first time the wallet check sequence is run.

A new method has also been added to the API called accountSelect. This method can be called at any time that you would like to show the account select modal. So you could hook up a button on your dapp's UI that calls this method:

<button onclick="onboard.accountSelect()">Switch Account</button>

• Ledger wallets have two different derivation paths that accounts can be accessed/generated from, a "legacy" path and also a "Ledger Live" path that matches the BIP44 standard. Onboard will default to initially loading the first account from each path and then loading 5 accounts from each path when the "load more" button is clicked in the accounts modal. Trezor wallets only use the BIP44 standard path, so 1 account will be initially generated, and then an additional 10 accounts will be loaded when the "load more" button is clicked. More details on the ledger paths can be found here

Changelog:

• Feature: Hardware Wallet Support (#208)
• fix: add "jsonrpc: '2.0'" to sendAsync methods (#210)
• Fix icon heights (#212)