git.iko.soy/bridge
on master help sign in
Help with derivation path selection for Ledger
ff616c1Fang
src/bridge/lib/ledger.js+4−2
compare with master
unifiedsplit
@@ -1,7 +1,8 @@
1import Transport from '@ledgerhq/hw-transport-u2f'
1import Transport from '@ledgerhq/hw-transport-u2f'
2import Eth from '@ledgerhq/hw-app-eth'
2import Eth from '@ledgerhq/hw-app-eth'
3
3
4−const LEDGER_BASE_PATH = "44'/60'/0'/0/0"
4+const LEDGER_LEGACY_PATH = "m/44'/60'/0'/x"
5+const LEDGER_LIVE_PATH = "m/44'/60'/x'/0/0"
5
6
6const chopHdPrefix = str =>
7const chopHdPrefix = str =>
7 str.slice(0, 2) === "m/"
8 str.slice(0, 2) === "m/"
@@ -24,6 +25,7 @@ const ledgerSignTransaction = async (txn, hdpath) => {
24}
25}
25
26
26export {
27export {
27− LEDGER_BASE_PATH,
28+ LEDGER_LIVE_PATH,
29+ LEDGER_LEGACY_PATH,
28 ledgerSignTransaction
30 ledgerSignTransaction
29}
31}
src/bridge/views/Ledger.js+101−14
@@ -3,12 +3,12 @@ import React from 'react'
3import Maybe from 'folktale/maybe'
3import Maybe from 'folktale/maybe'
4import { Button } from '../components/Base'
4import { Button } from '../components/Base'
5import { Row, Col, H1, P, H2 } from '../components/Base'
5import { Row, Col, H1, P, H2 } from '../components/Base'
6−import { Input, InnerLabel } from '../components/Base'
6+import { Input, InnerLabel, InnerLabelDropdown } from '../components/Base'
7import Transport from '@ledgerhq/hw-transport-u2f'
7import Transport from '@ledgerhq/hw-transport-u2f'
8import Eth from '@ledgerhq/hw-app-eth'
8import Eth from '@ledgerhq/hw-app-eth'
9import * as secp256k1 from 'secp256k1'
9import * as secp256k1 from 'secp256k1'
10
10
11−import { LEDGER_BASE_PATH } from '../lib/ledger'
11+import { LEDGER_LIVE_PATH, LEDGER_LEGACY_PATH } from '../lib/ledger'
12import { ROUTE_NAMES } from '../lib/router'
12import { ROUTE_NAMES } from '../lib/router'
13
13
14const chopHdPrefix = str =>
14const chopHdPrefix = str =>
@@ -26,11 +26,32 @@ class Ledger extends React.Component {
26 super(props)
26 super(props)
27
27
28 this.state = {
28 this.state = {
29− hdpath: LEDGER_BASE_PATH
29+ basePath: LEDGER_LIVE_PATH,
30+ hdpath: LEDGER_LIVE_PATH.replace(/x/g, 0),
31+ account: 0
30 }
32 }
31
33
32 this.pollDevice = this.pollDevice.bind(this)
34 this.pollDevice = this.pollDevice.bind(this)
33 this.handleHdPathInput = this.handleHdPathInput.bind(this)
35 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 });
34 }
55 }
35
56
36 handleHdPathInput(hdpath) {
57 handleHdPathInput(hdpath) {
@@ -60,7 +81,81 @@ class Ledger extends React.Component {
60
81
61 render() {
82 render() {
62 const { pushRoute, popRoute, wallet } = this.props
83 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> );
64
159
65 return (
160 return (
66
161
@@ -99,16 +194,8 @@ class Ledger extends React.Component {
99 <li className={'mt-4'}>{'Run '}<code>{'python bridge-https.py'}</code></li>
194 <li className={'mt-4'}>{'Run '}<code>{'python bridge-https.py'}</code></li>
100 </ol>
195 </ol>
101
196
102− <Input
197+ { basePathSelection }
103− className='pt-8 mt-8 text-mono'
198+ { truePathSelection }
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>
112
199
113 <Button
200 <Button
114 prop-size={'wide lg'}
201 prop-size={'wide lg'}