good progress adding paths

2 files changed, 71 insertions, 13 deletions

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 ac020345a..4c6cc67f9 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
@@ -2,16 +2,53 @@ const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const genAccountLink = require('../../../../../lib/account-link.js')
+const Select = require('react-select').default
 
 class AccountList extends Component {
     constructor (props, context) {
         super(props)
     }
 
+    getHdPaths () {
+      return [
+        {
+          label: `m/44'/60'/0' (Legacy)`,
+          value: `m/44'/60'/0'`,
+        },
+        {
+          label: `m/44'/60'/0'/0`,
+          value: `m/44'/60'/0'/0'`,
+        },
+      ]
+    }
+
+    renderHdPathSelector () {
+      const { onPathChange, selectedPath } = this.props
+
+      const options = this.getHdPaths()
+      return h('div.hw-connect__hdPath', [
+        h('h3.hw-connect__hdPath__title', {}, `HD Path`),
+        h(Select, {
+          className: 'hw-connect__hdPath__select',
+          name: 'hd-path-select',
+          clearable: false,
+          value: selectedPath,
+          options,
+          onChange: (opt) => {
+            onPathChange(opt.value)
+          },
+        }),
+      ])
+    }
     renderHeader () {
+      const { device } = this.props
       return (
         h('div.hw-connect', [
-          h('h3.hw-connect__title', {}, `${this.props.device.toUpperCase()} - ${this.context.t('selectAnAccount')}`),
+
+          h('h3.hw-connect__title', {}, `${device.toUpperCase()} - ${this.context.t('selectAnAccount')}`),
+
+          device.toLowerCase() === 'ledger' ? this.renderHdPathSelector() : null,
+
           h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')),
         ])
       )
@@ -125,6 +162,8 @@ class AccountList extends Component {
 
 
 AccountList.propTypes = {
+    onPathChange: PropTypes.func.isRequired,
+    selectedPath: PropTypes.string.isRequired,
     device: PropTypes.string.isRequired,
     accounts: PropTypes.array.isRequired,
     onAccountChange: PropTypes.func.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 644742172..0eb2aa16f 100644
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -18,7 +18,7 @@ class ConnectHardwareForm extends Component {
       accounts: [],
       browserSupported: true,
       unlocked: false,
-      device: null
+      device: null,
     }
   }
 
@@ -40,10 +40,10 @@ class ConnectHardwareForm extends Component {
 
   async checkIfUnlocked () {
     ['trezor', 'ledger'].forEach(async device => {
-      const unlocked = await this.props.checkHardwareStatus(device)
+      const unlocked = await this.props.checkHardwareStatus(device, this.props.defaultHdPaths[device])
       if (unlocked) {
         this.setState({unlocked: true})
-        this.getPage(0, device)
+        this.getPage(0, device, this.props.defaultHdPaths[device])
       }
     })
   }
@@ -52,8 +52,16 @@ class ConnectHardwareForm extends Component {
     if (this.state.accounts.length) {
       return null
     }
+
+    // Default values
     this.setState({ btnText: this.context.t('connecting')})
-    this.getPage(0, device)
+    this.getPage(0, device, this.props.defaultHdPaths[device])
+  }
+
+  onPathChange = (path) => {
+    console.log('BRUNO: path changed', path)
+    this.props.setHardwareWalletDefaultHdPath({device: this.state.device, path})
+    this.getPage(0, this.state.device, path)
   }
 
   onAccountChange = (account) => {
@@ -68,9 +76,9 @@ class ConnectHardwareForm extends Component {
     }, 5000)
   }
 
-  getPage = (page, device) => {
+  getPage = (page, device, hdPath) => {
     this.props
-      .connectHardware(device, page)
+      .connectHardware(device, page, hdPath)
       .then(accounts => {
         if (accounts.length) {
 
@@ -162,6 +170,8 @@ class ConnectHardwareForm extends Component {
     }
 
     return h(AccountList, {
+      onPathChange: this.onPathChange,
+      selectedPath: this.props.defaultHdPaths[this.state.device],
       device: this.state.device,
       accounts: this.state.accounts,
       selectedAccount: this.state.selectedAccount,
@@ -193,12 +203,14 @@ ConnectHardwareForm.propTypes = {
   showAlert: PropTypes.func,
   hideAlert: PropTypes.func,
   unlockHardwareWalletAccount: PropTypes.func,
+  setHardwareWalletDefaultHdPath: PropTypes.func,
   numberOfExistingAccounts: PropTypes.number,
   history: PropTypes.object,
   t: PropTypes.func,
   network: PropTypes.string,
   accounts: PropTypes.object,
   address: PropTypes.string,
+  defaultHdPaths: PropTypes.object,
 }
 
 const mapStateToProps = state => {
@@ -206,28 +218,35 @@ const mapStateToProps = state => {
     metamask: { network, selectedAddress, identities = {}, accounts = [] },
   } = state
   const numberOfExistingAccounts = Object.keys(identities).length
+  const {
+    appState: { defaultHdPaths },
+  } = state
 
   return {
     network,
     accounts,
     address: selectedAddress,
     numberOfExistingAccounts,
+    defaultHdPaths,
   }
 }
 
 const mapDispatchToProps = dispatch => {
   return {
-    connectHardware: (deviceName, page) => {
-      return dispatch(actions.connectHardware(deviceName, page))
+    setHardwareWalletDefaultHdPath: ({device, path}) => {
+      return dispatch(actions.setHardwareWalletDefaultHdPath({device, path}))
+    },
+    connectHardware: (deviceName, page, hdPath) => {
+      return dispatch(actions.connectHardware(deviceName, hdPath, page))
     },
-    checkHardwareStatus: (deviceName) => {
-      return dispatch(actions.checkHardwareStatus(deviceName))
+    checkHardwareStatus: (deviceName, hdPath) => {
+      return dispatch(actions.checkHardwareStatus(deviceName, hdPath))
     },
     forgetDevice: (deviceName) => {
       return dispatch(actions.forgetDevice(deviceName))
     },
-    unlockHardwareWalletAccount: (index, deviceName) => {
-      return dispatch(actions.unlockHardwareWalletAccount(index, deviceName))
+    unlockHardwareWalletAccount: (index, deviceName, hdPath) => {
+      return dispatch(actions.unlockHardwareWalletAccount(index, deviceName, hdPath))
     },
     showImportPage: () => dispatch(actions.showImportPage()),
     showConnectPage: () => dispatch(actions.showConnectPage()),