Merge pull request #424 from blocknative/enhancement/ledger-transport

Enhancement: Ledger Transport

Closes #415

Author: lnbc1QWFyb24

package.json

@@ -47,6 +47,7 @@
   "dependencies": {
     "@ledgerhq/hw-app-eth": "^5.21.0",
     "@ledgerhq/hw-transport-u2f": "^5.21.0",
+    "@ledgerhq/hw-transport-webusb": "^5.22.0",
     "@portis/web3": "^2.0.0-beta.57",
     "@toruslabs/torus-embed": "^1.8.2",
     "@unilogin/provider": "^0.6.1",

rollup.config.js

@@ -72,6 +72,7 @@ export default {
     'ethereumjs-util',
     'hdkey',
     '@ledgerhq/hw-transport-u2f',
+    '@ledgerhq/hw-transport-webusb',
     '@ledgerhq/hw-app-eth',
     'util',
     'assert',

src/@types/index.d.ts

@@ -12,6 +12,7 @@ declare module 'ethereumjs-util'
 declare module 'hdkey'
 declare module '@ledgerhq/hw-app-eth'
 declare module '@ledgerhq/hw-transport-u2f'
+declare module '@ledgerhq/hw-transport-webusb'
 
 declare module '*.png'
 declare module '*.svg'

src/interfaces.ts

@@ -135,6 +135,8 @@ export interface Helpers {
     disconnected: boolean
     walletName: string
   }) => void
+  browser: Browser
+  os: OS
 }
 
 export interface WalletInterface {
@@ -429,12 +431,24 @@ export interface BalanceStore {
   get: () => any
 }
 
+export type Browser = {
+  name: string
+  version: string
+}
+
+export type OS = {
+  name: string
+  version: string
+  versionName: string
+}
+
 export interface AppState {
   dappId: string
   networkId: number
   version: string
   mobileDevice: boolean
-  os: string
+  os: OS
+  browser: Browser
   darkMode: boolean
   autoSelectWallet: string
   walletSelectInProgress: boolean

src/modules/select/wallets/ledger.ts

@@ -1,4 +1,10 @@
-import { LedgerOptions, WalletModule, Helpers } from '../../../interfaces'
+import {
+  LedgerOptions,
+  WalletModule,
+  Helpers,
+  Browser,
+  OS
+} from '../../../interfaces'
 
 import ledgerIcon from '../wallet-icons/icon-ledger'
 
@@ -21,15 +27,17 @@ function ledger(options: LedgerOptions & { networkId: number }): WalletModule {
     svg: svg || ledgerIcon,
     iconSrc,
     wallet: async (helpers: Helpers) => {
-      const { BigNumber, networkName, resetWalletState } = helpers
+      const { BigNumber, networkName, resetWalletState, browser, os } = helpers
 
       const provider = await ledgerProvider({
         rpcUrl,
         networkId,
-        LedgerTransport,
+        CustomLedgerTransport: LedgerTransport,
         BigNumber,
         networkName,
-        resetWalletState
+        resetWalletState,
+        browser,
+        os
       })
 
       return {
@@ -64,17 +72,18 @@ function ledger(options: LedgerOptions & { networkId: number }): WalletModule {
 async function ledgerProvider(options: {
   networkId: number
   rpcUrl: string
-  LedgerTransport: any
+  CustomLedgerTransport: any
   BigNumber: any
   networkName: (id: number) => string
   resetWalletState: (options?: {
     disconnected: boolean
     walletName: string
   }) => void
+  browser: Browser
+  os: OS
 }) {
   const { default: createProvider } = await import('./providerEngine')
   const { generateAddresses, isValidPath } = await import('./hd-wallet')
-  const { default: TransportU2F } = await import('@ledgerhq/hw-transport-u2f')
   const { default: Eth } = await import('@ledgerhq/hw-app-eth')
 
   const EthereumTx = await import('ethereumjs-tx')
@@ -84,10 +93,12 @@ async function ledgerProvider(options: {
   const {
     networkId,
     rpcUrl,
-    LedgerTransport,
+    CustomLedgerTransport,
     BigNumber,
     networkName,
-    resetWalletState
+    resetWalletState,
+    browser,
+    os
   } = options
 
   let dPath = ''
@@ -147,10 +158,14 @@ async function ledgerProvider(options: {
   provider.isCustomPath = isCustomPath
 
   let transport: any
+  let transportSubscription: any
   let eth: any
 
   function disconnect() {
     transport && transport.close()
+    transportSubscription &&
+      transportSubscription.unsubscribe &&
+      transportSubscription.unsubscribe()
     provider.stop()
     resetWalletState({ disconnected: true, walletName: 'Ledger' })
   }
@@ -185,27 +200,54 @@ async function ledgerProvider(options: {
 
   async function createTransport() {
     try {
-      transport = LedgerTransport
-        ? await LedgerTransport.create()
-        : await TransportU2F.create()
-
-      eth = new Eth(transport)
-
       const observer = {
         next: (event: any) => {
           if (event.type === 'remove') {
             disconnect()
           }
         },
-        error: () => {},
+        error: (error: any) => {
+          throw new Error(error)
+        },
         complete: () => {}
       }
 
-      LedgerTransport
-        ? LedgerTransport.listen(observer)
-        : TransportU2F.listen(observer)
+      if (CustomLedgerTransport) {
+        transport = await CustomLedgerTransport.create()
+        transportSubscription = CustomLedgerTransport.listen(observer)
+      } else {
+        if (
+          os.name === 'Windows' &&
+          parseInt(os.versionName) >= 11 &&
+          (browser.name === 'Internet Explorer' || browser.name === 'Firefox')
+        ) {
+          throw new Error(
+            `OS: ${os.name} ${os.versionName} and Browser: ${browser.name} are not compatible with Ledger wallets, please switch to Chrome browser to continue.`
+          )
+        } else if (
+          (os.name === 'macOS' || os.name === 'Linux') &&
+          (browser.name === 'Firefox' || browser.name === 'Safari')
+        ) {
+          const { default: TransportU2F } = await import(
+            '@ledgerhq/hw-transport-u2f'
+          )
+
+          transport = await TransportU2F.create()
+        } else {
+          const { default: TransportWebUsb } = await import(
+            '@ledgerhq/hw-transport-webusb'
+          )
+
+          transport = await TransportWebUsb.create()
+          transportSubscription = TransportWebUsb.listen(observer)
+        }
+      }
+
+      eth = new Eth(transport)
     } catch (error) {
-      throw new Error('Error connecting to Ledger wallet')
+      throw new Error(
+        'An error occurred when trying to connect to your Ledger wallet'
+      )
     }
   }
 

src/onboard.ts

@@ -52,7 +52,7 @@ function init(initialization: Initialization): API {
     hideBranding
   } = initialization
 
-  const { os, isMobile } = getDeviceInfo()
+  const { os, browser, isMobile } = getDeviceInfo()
 
   const initializedModules = initializeModules(
     networkId,
@@ -83,6 +83,7 @@ function init(initialization: Initialization): API {
     version,
     mobileDevice: isMobile,
     os,
+    browser,
     darkMode,
     displayBranding,
     checkModules: initializedModules.walletCheck

src/utilities.ts

@@ -226,13 +226,15 @@ export function getProviderName(provider: any): string | undefined {
 }
 
 export function getDeviceInfo() {
-  const browser = bowser.getParser(window.navigator.userAgent)
-  const { name } = browser.getOS()
-  const { type } = browser.getPlatform()
+  const parsed = bowser.getParser(window.navigator.userAgent)
+  const os = parsed.getOS()
+  const browser = parsed.getBrowser()
+  const { type } = parsed.getPlatform()
 
   return {
     isMobile: type ? type !== 'desktop' : window.innerWidth < 600,
-    os: name
+    os,
+    browser
   }
 }
 

src/views/WalletSelect.svelte

@@ -84,7 +84,7 @@
       .filter(wallet => wallet[mobileDevice ? 'mobile' : 'desktop'])
       .filter(wallet => {
         const { osExclusions = [] } = wallet
-        return !osExclusions.includes(os)
+        return !osExclusions.includes(os.name)
       })
 
     if (deviceWallets.find(wallet => wallet.preferred)) {
@@ -127,6 +127,7 @@
     autoSelected?: boolean
   ) {
     const currentWalletInterface = get(walletInterface)
+    const { browser, os } = get(app)
 
     if (currentWalletInterface && currentWalletInterface.name === module.name) {
       finish({ completed: true })
@@ -148,7 +149,9 @@
       getAddress,
       getBalance,
       resetWalletState,
-      networkName
+      networkName,
+      browser,
+      os
     })
 
     loadingWallet = undefined

yarn.lock

@@ -1004,11 +1004,25 @@
     "@ledgerhq/logs" "^5.21.0"
     rxjs "^6.6.0"
 
+"@ledgerhq/devices@^5.22.0":
+  version "5.22.0"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/devices/-/devices-5.22.0.tgz#18595f3545b57cf60e50d6e9d83095dda21f575f"
+  integrity sha512-oJxhee/zlHmIx66zvQQTSpIsHOiiLjALemTX9oUtB4xQwFvoiptPnBCeTDTM9teode7wzk7oE9qdUAZuat+nCg==
+  dependencies:
+    "@ledgerhq/errors" "^5.22.0"
+    "@ledgerhq/logs" "^5.22.0"
+    rxjs "^6.6.2"
+
 "@ledgerhq/errors@^5.21.0":
   version "5.21.0"
   resolved "https://registry.yarnpkg.com/@ledgerhq/errors/-/errors-5.21.0.tgz#2a7bdea62fe7e0bd9ccc3b786d2c179f8f65bc02"
   integrity sha512-sGfXoaVGfzrhnexu2TEdgL2FAjM7PUeobWdDBx3DJKE+ARje1y+i5+qg7gyvQL+9k4FV7mW2xMOcnUI3T2Zw0Q==
 
+"@ledgerhq/errors@^5.22.0":
+  version "5.22.0"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/errors/-/errors-5.22.0.tgz#7327fc152d4896ddc26aada0943065db21c14880"
+  integrity sha512-XDT0meBn39+q+JWzUFXmiFbVYLTy+uHRFMb9napcxyZ0Q/MdKkle9/vkgtvRHjPIkGobklXpyefsgH3BZQHukA==
+
 "@ledgerhq/hw-app-eth@^5.21.0":
   version "5.21.0"
   resolved "https://registry.yarnpkg.com/@ledgerhq/hw-app-eth/-/hw-app-eth-5.21.0.tgz#a6857df45cddf29b5e7623237171d7ffba42a44c"
@@ -1029,6 +1043,16 @@
     "@ledgerhq/logs" "^5.21.0"
     u2f-api "0.2.7"
 
+"@ledgerhq/hw-transport-webusb@^5.22.0":
+  version "5.22.0"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport-webusb/-/hw-transport-webusb-5.22.0.tgz#f433b4ad8175e1b47b091766b85071c35175a27d"
+  integrity sha512-fPj9x+Ce48g1t7vv2RvT29KonDMUPhLMPGcsX7Kr+IRsheBnaJUhgUVzKXHevaNF1xWhkJEW/Sd8Wo5wyK1pOw==
+  dependencies:
+    "@ledgerhq/devices" "^5.22.0"
+    "@ledgerhq/errors" "^5.22.0"
+    "@ledgerhq/hw-transport" "^5.22.0"
+    "@ledgerhq/logs" "^5.22.0"
+
 "@ledgerhq/hw-transport@^5.21.0":
   version "5.21.0"
   resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport/-/hw-transport-5.21.0.tgz#c94d13397a26e0755824e05613e2257a3d2b450b"
@@ -1038,11 +1062,25 @@
     "@ledgerhq/errors" "^5.21.0"
     events "^3.2.0"
 
+"@ledgerhq/hw-transport@^5.22.0":
+  version "5.22.0"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport/-/hw-transport-5.22.0.tgz#d627948b43005ec9e7dfe85adf9aa01e130de280"
+  integrity sha512-MFfkVGYMYnr6fI4XGnJQNLd36JIrRpvd5WBmVSDhCO3UKUER2fJ9koVBGc97o7yXtE5IAlJKF+nR9HZJIa0lRQ==
+  dependencies:
+    "@ledgerhq/devices" "^5.22.0"
+    "@ledgerhq/errors" "^5.22.0"
+    events "^3.2.0"
+
 "@ledgerhq/logs@^5.21.0":
   version "5.21.0"
   resolved "https://registry.yarnpkg.com/@ledgerhq/logs/-/logs-5.21.0.tgz#19629222e44b4d312e232c2dfbe0d067ecc12830"
   integrity sha512-eyPXrKfQ+HSLcITB5MdSWhXlImE2qKWTLT2u6l+a9wiCZl5yimSqn0uC5evxaP0McKOW0wSntgfj+gOoKv+Paw==
 
+"@ledgerhq/logs@^5.22.0":
+  version "5.22.0"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/logs/-/logs-5.22.0.tgz#a54d6b5b391cdb4c2eacc9500feb04b90475c361"
+  integrity sha512-jV4mJxD1aieORm+sK9bYakQd9GMLd7KAxgt2IaxhrTU+QD5Ne47mxQOTys9p7f5w25ujs3R+Px2t3KiMRASHtg==
+
 "@portis/eth-json-rpc-middleware@^4.1.2":
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/@portis/eth-json-rpc-middleware/-/eth-json-rpc-middleware-4.1.2.tgz#391e392da03dea348c8111a8111ce4550aa24a02"
@@ -5990,7 +6028,7 @@ rustbn.js@~0.2.0:
   resolved "https://registry.yarnpkg.com/rustbn.js/-/rustbn.js-0.2.0.tgz#8082cb886e707155fd1cb6f23bd591ab8d55d0ca"
   integrity sha512-4VlvkRUuCJvr2J6Y0ImW7NvTCriMi7ErOAqWk1y69vAdoNIzCF3yPmgeNzx+RQTLEDFq5sHfscn1MwHxP9hNfA==
 
-rxjs@^6.5.4, rxjs@^6.6.0:
+rxjs@^6.5.4, rxjs@^6.6.0, rxjs@^6.6.2:
   version "6.6.2"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.2.tgz#8096a7ac03f2cc4fe5860ef6e572810d9e01c0d2"
   integrity sha512-BHdBMVoWC2sL26w//BCu3YzKT4s2jip/WhwsGEDmeKYBhKDZeYezVUnHatYB7L85v5xs0BAQmg6BEYJEKxBabg==