refactor to support multiple hw wallets

4 files changed, 43 insertions, 27 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index bd5d25327..04af9d7c8 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -91,7 +91,7 @@ var actions = {
   connectHardware,
   checkHardwareStatus,
   forgetDevice,
-  unlockTrezorAccount,
+  unlockHardwareWalletAccount,
   NEW_ACCOUNT_SCREEN: 'NEW_ACCOUNT_SCREEN',
   navigateToNewAccountScreen,
   resetAccount,
@@ -702,12 +702,12 @@ function connectHardware (deviceName, page) {
   }
 }
 
-function unlockTrezorAccount (index) {
-  log.debug(`background.unlockTrezorAccount`, index)
+function unlockHardwareWalletAccount (index, deviceName) {
+  log.debug(`background.unlockHardwareWalletAccount`, index, deviceName)
   return (dispatch, getState) => {
     dispatch(actions.showLoadingIndication())
     return new Promise((resolve, reject) => {
-      background.unlockTrezorAccount(index, (err, accounts) => {
+      background.unlockHardwareWalletAccount(index, deviceName, (err, accounts) => {
         if (err) {
           log.error(err)
           dispatch(actions.displayWarning(err.message))
diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js
index c722d1f55..730f2df34 100644
--- a/ui/app/components/pages/create-account/connect-hardware/account-list.js
+++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js
@@ -61,7 +61,7 @@ class AccountList extends Component {
       h(
         'button.hw-list-pagination__button',
         {
-          onClick: () => this.props.getPage(-1),
+          onClick: () => this.props.getPage(-1, this.props.device),
         },
         `< ${this.context.t('prev')}`
       ),
@@ -69,7 +69,7 @@ class AccountList extends Component {
       h(
         'button.hw-list-pagination__button',
         {
-          onClick: () => this.props.getPage(1),
+          onClick: () => this.props.getPage(1, this.props.device),
         },
         `${this.context.t('next')} >`
       ),
@@ -95,7 +95,7 @@ class AccountList extends Component {
       h(
         `button.btn-primary.btn--large.new-account-connect-form__button.unlock ${disabled ? '.btn-primary--disabled' : ''}`,
         {
-          onClick: this.props.onUnlockAccount.bind(this),
+          onClick: this.props.onUnlockAccount.bind(this, this.props.device),
           ...buttonProps,
         },
         [this.context.t('unlock')]
@@ -106,7 +106,7 @@ class AccountList extends Component {
   renderForgetDevice () {
     return h('div.hw-forget-device-container', {}, [
       h('a', {
-        onClick: this.props.onForgetDevice.bind(this),
+        onClick: this.props.onForgetDevice.bind(this, this.props.device),
       }, this.context.t('forgetDevice')),
     ])
   }
@@ -125,6 +125,7 @@ class AccountList extends Component {
 
 
 AccountList.propTypes = {
+    device: PropTypes.string.isRequired,
     accounts: PropTypes.array.isRequired,
     onAccountChange: PropTypes.func.isRequired,
     onForgetDevice: PropTypes.func.isRequired,
diff --git a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
index cb2b86595..af144d410 100644
--- a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
+++ b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
@@ -49,11 +49,19 @@ class ConnectScreen extends Component {
     renderConnectToTrezorButton () {
         return h(
             'button.btn-primary.btn--large',
-            { onClick: this.props.connectToTrezor.bind(this) },
+            { onClick: this.props.connectToHardwareWallet.bind(this, 'trezor') },
             this.props.btnText
         )
     }
 
+    renderConnectToLedgerButton () {
+        return h(
+            'button.btn-primary.btn--large',
+            { onClick: this.props.connectToHardwareWallet.bind(this, 'ledger') },
+            this.props.btnText.replace('Trezor', 'Ledger')
+        )
+    }
+
     scrollToTutorial = (e) => {
       if (this.referenceNode) this.referenceNode.scrollIntoView({behavior: 'smooth'})
     }
@@ -103,6 +111,7 @@ class ConnectScreen extends Component {
             h('div.hw-connect__footer', {}, [
                 h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)),
                 this.renderConnectToTrezorButton(),
+                this.renderConnectToLedgerButton(),
                 h('p.hw-connect__footer__msg', {}, [
                     this.context.t(`havingTroubleConnecting`),
                     h('a.hw-connect__footer__link', {
@@ -120,6 +129,7 @@ class ConnectScreen extends Component {
                 this.renderHeader(),
                 this.renderTrezorAffiliateLink(),
                 this.renderConnectToTrezorButton(),
+                this.renderConnectToLedgerButton(),
                 this.renderLearnMore(),
                 this.renderTutorialSteps(),
                 this.renderFooter(),
@@ -136,7 +146,7 @@ class ConnectScreen extends Component {
 }
 
 ConnectScreen.propTypes = {
-    connectToTrezor: PropTypes.func.isRequired,
+    connectToHardwareWallet: PropTypes.func.isRequired,
     btnText: PropTypes.string.isRequired,
     browserSupported: PropTypes.bool.isRequired,
 }
diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
index 3f66e7098..646ba8bec 100644
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -18,6 +18,7 @@ class ConnectHardwareForm extends Component {
       accounts: [],
       browserSupported: true,
       unlocked: false,
+      device: null
     }
   }
 
@@ -38,19 +39,22 @@ class ConnectHardwareForm extends Component {
   }
 
   async checkIfUnlocked () {
-    const unlocked = await this.props.checkHardwareStatus('trezor')
-    if (unlocked) {
-      this.setState({unlocked: true})
-      this.getPage(0)
-    }
+    ['trezor', 'ledger'].forEach(async device => {
+      const unlocked = await this.props.checkHardwareStatus(device)
+      if (unlocked) {
+        this.setState({unlocked: true})
+        this.getPage(0, device)
+      }
+    })
   }
 
-  connectToTrezor = () => {
+  connectToHardwareWallet = (device) => {
+    debugger
     if (this.state.accounts.length) {
       return null
     }
     this.setState({ btnText: this.context.t('connecting')})
-    this.getPage(0)
+    this.getPage(0, device)
   }
 
   onAccountChange = (account) => {
@@ -65,9 +69,9 @@ class ConnectHardwareForm extends Component {
     }, 5000)
   }
 
-  getPage = (page) => {
+  getPage = (page, device) => {
     this.props
-      .connectHardware('trezor', page)
+      .connectHardware(device, page)
       .then(accounts => {
         if (accounts.length) {
 
@@ -77,7 +81,7 @@ class ConnectHardwareForm extends Component {
             this.showTemporaryAlert()
           }
 
-          const newState = { unlocked: true }
+          const newState = { unlocked: true, device }
           // Default to the first account
           if (this.state.selectedAccount === null) {
             accounts.forEach((a, i) => {
@@ -110,8 +114,8 @@ class ConnectHardwareForm extends Component {
       })
   }
 
-  onForgetDevice = () => {
-    this.props.forgetDevice('trezor')
+  onForgetDevice = (device) => {
+    this.props.forgetDevice(device)
     .then(_ => {
       this.setState({
         error: null,
@@ -131,7 +135,7 @@ class ConnectHardwareForm extends Component {
       this.setState({ error: this.context.t('accountSelectionRequired') })
     }
 
-    this.props.unlockTrezorAccount(this.state.selectedAccount)
+    this.props.unlockHardwareWalletAccount(this.state.selectedAccount, this.state.device)
     .then(_ => {
       this.props.history.push(DEFAULT_ROUTE)
     }).catch(e => {
@@ -152,13 +156,14 @@ class ConnectHardwareForm extends Component {
   renderContent () {
     if (!this.state.accounts.length) {
       return h(ConnectScreen, {
-        connectToTrezor: this.connectToTrezor,
+        connectToHardwareWallet: this.connectToHardwareWallet,
         btnText: this.state.btnText,
         browserSupported: this.state.browserSupported,
       })
     }
 
     return h(AccountList, {
+      device: this.state.device,
       accounts: this.state.accounts,
       selectedAccount: this.state.selectedAccount,
       onAccountChange: this.onAccountChange,
@@ -188,7 +193,7 @@ ConnectHardwareForm.propTypes = {
   forgetDevice: PropTypes.func,
   showAlert: PropTypes.func,
   hideAlert: PropTypes.func,
-  unlockTrezorAccount: PropTypes.func,
+  unlockHardwareWalletAccount: PropTypes.func,
   numberOfExistingAccounts: PropTypes.number,
   history: PropTypes.object,
   t: PropTypes.func,
@@ -222,8 +227,8 @@ const mapDispatchToProps = dispatch => {
     forgetDevice: (deviceName) => {
       return dispatch(actions.forgetDevice(deviceName))
     },
-    unlockTrezorAccount: index => {
-      return dispatch(actions.unlockTrezorAccount(index))
+    unlockHardwareWalletAccount: (index, deviceName) => {
+      return dispatch(actions.unlockHardwareWalletAccount(index, deviceName))
     },
     showImportPage: () => dispatch(actions.showImportPage()),
     showConnectPage: () => dispatch(actions.showConnectPage()),