@@ -3,11 +3,11 @@ import React from 'react'
33import Maybe from 'folktale/maybe'
44import { Button } from '../components/Base'
55import { Row, Col, H1, P } from '../components/Base'
6−import { InnerLabel, Input } from '../components/Base'
6+import { InnerLabel, Input, InnerLabelDropdown } from '../components/Base'
77import TrezorConnect from 'trezor-connect'
88import * as secp256k1 from 'secp256k1'
99
10−import { TREZOR_BASE_PATH } from '../lib/trezor'
10+import { TREZOR_PATH } from '../lib/trezor'
1111import { ROUTE_NAMES } from '../lib/router'
1212
1313class Trezor extends React.Component {
@@ -16,13 +16,23 @@ class Trezor extends React.Component {
1616 super(props)
1717
1818 this.state = {
19− hdpath: TREZOR_BASE_PATH
19+ hdpath: TREZOR_PATH.replace(/x/g, 0),
20+ account: 0
2021 }
2122
23+ this.handleAccountSelection = this.handleAccountSelection.bind(this)
2224 this.handleHdPathInput = this.handleHdPathInput.bind(this)
2325 this.pollDevice = this.pollDevice.bind(this)
2426 }
2527
28+ handleAccountSelection(account) {
29+ let hdpath = this.state.hdpath;
30+ if (account !== 'custom') {
31+ hdpath = TREZOR_PATH.replace(/x/g, account);
32+ }
33+ this.setState({ account, hdpath });
34+ }
35+
2636 handleHdPathInput(hdpath) {
2737 this.setState({ hdpath })
2838 }
@@ -53,7 +63,57 @@ class Trezor extends React.Component {
5363
5464 render() {
5565 const { pushRoute, popRoute, wallet } = this.props
56− const { hdpath } = this.state
66+ const { hdpath, account } = this.state
67+ const { handleAccountSelection } = this;
68+ console.log('hdpath', hdpath)
69+
70+ let accountOptions = [{
71+ title: 'Custom path',
72+ value: 'custom'
73+ }];
74+ for (let i = 0; i < 20; i++) {
75+ accountOptions.push({
76+ title: 'Account #' + (i+1),
77+ value: i
78+ });
79+ }
80+ //NOTE this is dumb
81+ let accountTitle = '';
82+ for (let i in accountOptions) {
83+ let option = accountOptions[i];
84+ if (option.value === account) {
85+ accountTitle = option.title;
86+ break;
87+ }
88+ }
89+
90+ const accountSelection = (
91+ <InnerLabelDropdown
92+ className='mt-8'
93+ prop-size='md'
94+ prop-format='innerLabel'
95+ options={accountOptions}
96+ handleUpdate={handleAccountSelection}
97+ title={'Account'}
98+ currentSelectionTitle={accountTitle}
99+ fullWidth={true}
100+ >
101+ </InnerLabelDropdown>
102+ );
103+
104+ const pathSelection = (account !== 'custom') ? null :
105+ (
106+ <Input
107+ className='mt-8 pt-8 text-mono'
108+ prop-size='md'
109+ prop-format='innerLabel'
110+ name='hdpath'
111+ value={ hdpath }
112+ autocomplete='off'
113+ onChange={ this.handleHdPathInput }>
114+ <InnerLabel>{'HD Path'}</InnerLabel>
115+ </Input>
116+ );
57117
58118 return (
59119 <Row>
@@ -66,16 +126,8 @@ class Trezor extends React.Component {
66126 }
67127 </P>
68128
69− <Input
70− className='pt-8 text-mono'
71− prop-size='md'
72− prop-format='innerLabel'
73− name='hdpath'
74− value={ hdpath }
75− autocomplete='off'
76− onChange={ this.handleHdPathInput }>
77− <InnerLabel>{'HD Path'}</InnerLabel>
78− </Input>
129+ { accountSelection }
130+ { pathSelection }
79131
80132 <Button
81133 className={'mt-8'}