@@ -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,81 @@ 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+ //NOTE this is dumb
100+ let basePathTitle = '';
101+ for (let i in pathOptions) {
102+ let option = pathOptions[i];
103+ if (option.value === basePath) {
104+ basePathTitle = option.title;
105+ break;
106+ }
107+ }
108+
109+ let accountOptions = [];
110+ for (let i = 0; i < 20; i++) {
111+ accountOptions.push({
112+ title: 'Account #' + (i+1),
113+ value: i
114+ });
115+ }
116+ //NOTE this is dumb
117+ let accountTitle = '';
118+ for (let i in accountOptions) {
119+ let option = accountOptions[i];
120+ if (option.value === account) {
121+ accountTitle = option.title;
122+ break;
123+ }
124+ }
125+
126+ const basePathSelection = (
127+ <InnerLabelDropdown
128+ options={pathOptions}
129+ handleUpdate={handlePathSelection}
130+ title={'Derivation path'}
131+ currentSelectionTitle={basePathTitle}
132+ fullWidth={true}
133+ >
134+ </InnerLabelDropdown>
135+ );
136+
137+ const truePathSelection = (basePath === 'custom')
138+ ? ( <Input
139+ className='pt-8 mt-8 text-mono'
140+ prop-size='md'
141+ prop-format='innerLabel'
142+ name='hdpath'
143+ value={ addHdPrefix(hdpath) }
144+ autocomplete='off'
145+ onChange={ this.handleHdPathInput }>
146+ <InnerLabel>{'HD Path'}</InnerLabel>
147+ </Input> )
148+ : ( <InnerLabelDropdown
149+ className='mt-8'
150+ prop-size='md'
151+ prop-format='innerLabel'
152+ options={accountOptions}
153+ handleUpdate={handleAccountSelection}
154+ title={'Account'}
155+ currentSelectionTitle={accountTitle}
156+ fullWidth={true}
157+ >
158+ </InnerLabelDropdown> );
64159
65160 return (
66161
@@ -99,16 +194,8 @@ class Ledger extends React.Component {
99194 <li className={'mt-4'}>{'Run '}<code>{'python bridge-https.py'}</code></li>
100195 </ol>
101196
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>
197+ { basePathSelection }
198+ { truePathSelection }
112199
113200 <Button
114201 prop-size={'wide lg'}