Merge pull request #315 from blocknative/enhancement/hardware-wallet-dynamic

Enhancement: Hardware Wallet Dynamic Import.

Closes #313 - Fixes Rollup builds if Ledger, Trezor and Authereum wallet modules are not initialized

Author: lnbc1QWFyb24

src/modules/select/wallets/hd-wallet.ts

@@ -1,6 +1,8 @@
 import HDKey from 'hdkey'
-import { publicToAddress, toChecksumAddress } from 'ethereumjs-util'
-import buffer from 'buffer'
+import * as ethUtil from 'ethereumjs-util'
+import * as buffer from 'buffer'
+
+const { publicToAddress, toChecksumAddress } = ethUtil
 
 const numberToGet = 5
 

src/modules/select/wallets/ledger.ts

@@ -4,17 +4,8 @@ import {
   Helpers,
   CommonWalletOptions
 } from '../../../interfaces'
-import ledgerIcon from '../wallet-icons/icon-ledger'
-
-import createProvider from './providerEngine'
-import { generateAddresses, isValidPath } from './hd-wallet'
-
-import TransportU2F from '@ledgerhq/hw-transport-u2f'
-import Eth from '@ledgerhq/hw-app-eth'
-import * as EthereumTx from 'ethereumjs-tx'
-import * as ethUtil from 'ethereumjs-util'
 
-import buffer from 'buffer'
+import ledgerIcon from '../wallet-icons/icon-ledger'
 
 const LEDGER_LIVE_PATH = `m/44'/60'`
 const ACCOUNTS_TO_GET = 5
@@ -81,6 +72,15 @@ async function ledgerProvider(options: {
   BigNumber: any
   networkName: (id: number) => string
 }) {
+  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')
+  const ethUtil = await import('ethereumjs-util')
+  const buffer = await import('buffer')
+
   const { networkId, rpcUrl, LedgerTransport, BigNumber, networkName } = options
 
   let dPath = ''

src/modules/select/wallets/trezor.ts

@@ -9,12 +9,6 @@ import trezorIcon from '../wallet-icons/icon-trezor'
 import createProvider from './providerEngine'
 import { generateAddresses, isValidPath } from './hd-wallet'
 
-import * as TrezorConnectLibrary from 'trezor-connect'
-import * as EthereumTx from 'ethereumjs-tx'
-import * as ethUtil from 'ethereumjs-util'
-
-const { default: TrezorConnect, DEVICE_EVENT, DEVICE } = TrezorConnectLibrary
-
 const TREZOR_DEFAULT_PATH = "m/44'/60'/0'/0"
 
 function trezor(options: TrezorOptions & CommonWalletOptions): WalletModule {
@@ -82,6 +76,12 @@ async function trezorProvider(options: {
   BigNumber: any
   networkName: (id: number) => string
 }) {
+  const TrezorConnectLibrary = await import('trezor-connect')
+  const EthereumTx = await import('ethereumjs-tx')
+  const ethUtil = await import('ethereumjs-util')
+
+  const { default: TrezorConnect, DEVICE_EVENT, DEVICE } = TrezorConnectLibrary
+
   const { networkId, email, appUrl, rpcUrl, BigNumber, networkName } = options
   let dPath: string = ''
 

src/views/WalletSelect.svelte

@@ -98,14 +98,6 @@
         deviceWallets.length > 4 ? deviceWallets.slice(4) : undefined
     }
 
-    modalData = {
-      heading,
-      description,
-      explanation,
-      primaryWallets,
-      secondaryWallets
-    }
-
     if (appState.autoSelectWallet) {
       const module = deviceWallets.find(
         (m: WalletModule) => m.name === appState.autoSelectWallet
@@ -114,15 +106,23 @@
       app.update(store => ({ ...store, autoSelectWallet: '' }))
 
       if (module) {
-        handleWalletSelect(module)
+        handleWalletSelect(module, true)
         return
       }
     }
 
+    modalData = {
+      heading,
+      description,
+      explanation,
+      primaryWallets,
+      secondaryWallets
+    }
+
     app.update(store => ({ ...store, walletSelectDisplayedUI: true }))
   }
 
-  async function handleWalletSelect(module: WalletModule) {
+  async function handleWalletSelect(module: WalletModule, autoSelected?: boolean) {
     const currentWalletInterface = get(walletInterface)
 
     if (currentWalletInterface && currentWalletInterface.name === module.name) {
@@ -163,7 +163,18 @@
           selectedWallet: selectedWalletModule.name
         })
 
-      app.update(store => ({ ...store, walletSelectDisplayedUI: true }))
+      // if it was autoSelected then we need to add modalData to show the modal
+      if (autoSelected) {
+        modalData = {
+          heading,
+          description,
+          explanation,
+          primaryWallets,
+          secondaryWallets
+        }
+
+        app.update(store => ({ ...store, walletSelectDisplayedUI: true }))
+      }
 
       return
     }