@@ -0,0 +1,224 @@
1+import * as bip32 from 'bip32';
2+import React from 'react';
3+import Maybe from 'folktale/maybe';
4+import { Button } from '../../components/old/Base';
5+import { Row, Col, H1, P, H2 } from '../../components/old/Base';
10+} from '../../components/old/Base';
11+import Transport from '@ledgerhq/hw-transport-u2f';
12+import Eth from '@ledgerhq/hw-app-eth';
13+import * as secp256k1 from 'secp256k1';
15+import { LEDGER_LIVE_PATH, LEDGER_LEGACY_PATH } from '../../lib/ledger';
16+import { compose } from '../../lib/lib';
17+import { withWallet } from '../../store/wallet';
19+const chopHdPrefix = str => (str.slice(0, 2) === 'm/' ? str.slice(2) : str);
21+const addHdPrefix = str => (str.slice(0, 2) === 'm/' ? str : 'm/' + str);
23+class Ledger extends React.Component {
28+ basePath: LEDGER_LIVE_PATH,
29+ hdpath: LEDGER_LIVE_PATH.replace(/x/g, 0),
33+ this.pollDevice = this.pollDevice.bind(this);
34+ this.handleHdPathInput = this.handleHdPathInput.bind(this);
35+ this.handlePathSelection = this.handlePathSelection.bind(this);
36+ this.handleAccountSelection = this.handleAccountSelection.bind(this);
37+ this.updateHdPath = this.updateHdPath.bind(this);
40+ handlePathSelection(basePath) {
41+ this.updateHdPath(basePath, this.state.account);
44+ handleAccountSelection(account) {
45+ this.updateHdPath(this.state.basePath, account);
48+ updateHdPath(basePath, account) {
49+ let hdpath = this.state.hdpath;
50+ if (basePath !== 'custom') {
51+ hdpath = basePath.replace(/x/g, account);
53+ this.setState({ basePath, account, hdpath });
56+ handleHdPathInput(hdpath) {
57+ this.setState({ hdpath });
61+ const { setWallet, setWalletHdPath } = this.props;
62+ const { hdpath } = this.state;
64+ const transport = await Transport.create();
65+ const eth = new Eth(transport);
66+ const path = chopHdPrefix(hdpath);
68+ eth.getAddress(path, false, true).then(
70+ const publicKey = Buffer.from(info.publicKey, 'hex');
71+ const chainCode = Buffer.from(info.chainCode, 'hex');
72+ const pub = secp256k1.publicKeyConvert(publicKey, true);
73+ const hd = bip32.fromPublicKey(pub, chainCode);
74+ setWallet(Maybe.Just(hd));
75+ setWalletHdPath(addHdPrefix(hdpath));
78+ setWallet(Maybe.Nothing());
84+ const { wallet } = this.props;
85+ const { basePath, hdpath, account } = this.state;
86+ const { handlePathSelection, handleAccountSelection } = this;
88+ const pathOptions = [
89+ { title: 'Ledger Live', value: LEDGER_LIVE_PATH },
90+ { title: 'Ledger Legacy', value: LEDGER_LEGACY_PATH },
92+ title: 'Custom path',
96+ let basePathTitle = pathOptions.find(o => o.value === basePath).title;
98+ let accountOptions = [];
99+ for (let i = 0; i < 20; i++) {
100+ accountOptions.push({
101+ title: 'Account #' + (i + 1),
105+ let accountTitle = accountOptions.find(o => o.value === account).title;
107+ const basePathSelection = (
110+ options={pathOptions}
111+ handleUpdate={handlePathSelection}
112+ title={'Derivation path'}
113+ currentSelectionTitle={basePathTitle}
118+ const truePathSelection =
119+ basePath === 'custom' ? (
121+ className="pt-8 mt-4 text-mono"
123+ prop-format="innerLabel"
125+ value={addHdPrefix(hdpath)}
127+ onChange={this.handleHdPathInput}>
128+ <InnerLabel>{'HD Path'}</InnerLabel>
134+ prop-format="innerLabel"
135+ options={accountOptions}
136+ handleUpdate={handleAccountSelection}
138+ currentSelectionTitle={accountTitle}
145+ <Col className={'measure-md'}>
146+ <H1>{'Authenticate With Your Ledger'}</H1>
148+ <H2>{'Running on HTTPS?'}</H2>
151+ {`Connect and authenticate to your Ledger, and then open the
152+ "Ethereum" application. If you're running on older firmware,
153+ make sure the "browser support" option is turned on. To sign
154+ transactions, you'll also need to enable the "contract data"
159+ {`If you'd like to use a custom derivation path, you may enter
163+ <H2>{'Running on HTTP?'}</H2>
165+ <P>{`To authenticate and sign transactions with a Ledger, Bridge
166+ must be serving over HTTPS on localhost. You can do this via the
169+ <ol className={'measure-md'}>
170+ <li className={'mt-4'}>
174+ href={'https://github.com/FiloSottile/mkcert'}>
178+ <li className={'mt-4'}>
179+ {'Install a local certificate authority via '}
180+ <code>{'mkcert -install'}</code>
182+ <li className={'mt-4'}>
184+ <code>{'bridge'}</code>
186+ ' directory, generate a certificate valid for localhost via '
188+ <code>{'mkcert localhost'}</code>
190+ {'This will produce two files: '}
191+ <code>{'localhost.pem'}</code> {', the local certificate, and '}
192+ <code>{'localhost-key.pem'}</code>
193+ {', its corresponding private key.'}
195+ <li className={'mt-4'}>
197+ <code>{'python bridge-https.py'}</code>
205+ prop-size={'wide lg'}
207+ onClick={this.pollDevice}>
213+ prop-size={'wide lg'}
214+ disabled={Maybe.Nothing.hasInstance(wallet)}
215+ onClick={this.props.loginCompleted}>
224+export default compose(withWallet)(Ledger);