@@ -3,12 +3,12 @@ import React from 'react'
33import Maybe from 'folktale/maybe'
44import { Button } from '../components/Base'
55import { Row, Col, H1, P, H2 } from '../components/Base'
6−import { Input, InnerLabel } from '../components/Base'
6+import { Input, InnerLabel, InnerLabelDropdown } from '../components/Base'
77import Transport from '@ledgerhq/hw-transport-u2f'
88import Eth from '@ledgerhq/hw-app-eth'
99import * as secp256k1 from 'secp256k1'
1010
11−import { LEDGER_BASE_PATH } from '../lib/ledger'
11+import { LEDGER_LIVE_PATH, LEDGER_LEGACY_PATH } from '../lib/ledger'
1212import { ROUTE_NAMES } from '../lib/router'
1313
1414const chopHdPrefix = str =>
@@ -26,11 +26,32 @@ class Ledger extends React.Component {
2626 super(props)
2727
2828 this.state = {
29− hdpath: LEDGER_BASE_PATH
29+ basePath: LEDGER_LIVE_PATH,
30+ hdpath: LEDGER_LIVE_PATH.replace(/x/g, 0),
31+ account: 0
3032 }
3133
3234 this.pollDevice = this.pollDevice.bind(this)
3335 this.handleHdPathInput = this.handleHdPathInput.bind(this)
36+ this.handlePathSelection = this.handlePathSelection.bind(this);
37+ this.handleAccountSelection = this.handleAccountSelection.bind(this);
38+ this.updateHdPath = this.updateHdPath.bind(this);
39+ }
40+
41+ handlePathSelection(basePath) {
42+ this.updateHdPath(basePath, this.state.account);
43+ }
44+
45+ handleAccountSelection(account) {
46+ this.updateHdPath(this.state.basePath, account);
47+ }
48+
49+ updateHdPath(basePath, account) {
50+ let hdpath = this.state.hdpath;
51+ if (basePath !== 'custom') {
52+ hdpath = basePath.replace(/x/g, account);
53+ }
54+ this.setState({ basePath, account, hdpath });
3455 }
3556
3657 handleHdPathInput(hdpath) {
@@ -60,7 +81,66 @@ class Ledger extends React.Component {
6081
6182 render() {
6283 const { pushRoute, popRoute, wallet } = this.props
63− const { hdpath } = this.state
84+ const { basePath, hdpath, account } = this.state;
85+ const { handlePathSelection, handleAccountSelection } = this;
86+
87+ const pathOptions = [
88+ { title: 'Ledger Live',
89+ value: LEDGER_LIVE_PATH
90+ },
91+ { title: 'Ledger Legacy',
92+ value: LEDGER_LEGACY_PATH
93+ },
94+ {
95+ title: 'Custom path',
96+ value: 'custom'
97+ }
98+ ];
99+ let basePathTitle = pathOptions.find(o => (o.value === basePath)).title;
100+
101+ let accountOptions = [];
102+ for (let i = 0; i < 20; i++) {
103+ accountOptions.push({
104+ title: 'Account #' + (i+1),
105+ value: i
106+ });
107+ }
108+ let accountTitle = accountOptions.find(o => (o.value === account)).title;
109+
110+ const basePathSelection = (
111+ <InnerLabelDropdown
112+ className='mt-8'
113+ options={pathOptions}
114+ handleUpdate={handlePathSelection}
115+ title={'Derivation path'}
116+ currentSelectionTitle={basePathTitle}
117+ fullWidth={true}
118+ >
119+ </InnerLabelDropdown>
120+ );
121+
122+ const truePathSelection = (basePath === 'custom')
123+ ? ( <Input
124+ className='pt-8 mt-4 text-mono'
125+ prop-size='md'
126+ prop-format='innerLabel'
127+ name='hdpath'
128+ value={ addHdPrefix(hdpath) }
129+ autocomplete='off'
130+ onChange={ this.handleHdPathInput }>
131+ <InnerLabel>{'HD Path'}</InnerLabel>
132+ </Input> )
133+ : ( <InnerLabelDropdown
134+ className='mt-4'
135+ prop-size='md'
136+ prop-format='innerLabel'
137+ options={accountOptions}
138+ handleUpdate={handleAccountSelection}
139+ title={'Account'}
140+ currentSelectionTitle={accountTitle}
141+ fullWidth={true}
142+ >
143+ </InnerLabelDropdown> );
64144
65145 return (
66146
@@ -99,16 +179,8 @@ class Ledger extends React.Component {
99179 <li className={'mt-4'}>{'Run '}<code>{'python bridge-https.py'}</code></li>
100180 </ol>
101181
102− <Input
103− className='pt-8 mt-8 text-mono'
104− prop-size='md'
105− prop-format='innerLabel'
106− name='hdpath'
107− value={ addHdPrefix(hdpath) }
108− autocomplete='off'
109− onChange={ this.handleHdPathInput }>
110− <InnerLabel>{'HD Path'}</InnerLabel>
111− </Input>
182+ { basePathSelection }
183+ { truePathSelection }
112184
113185 <Button
114186 prop-size={'wide lg'}