@@ -1,55 +1,41 @@
11import * as bip32 from 'bip32';
2−import React from 'react';
2+import React, { useState } from 'react';
33import Maybe from 'folktale/maybe';
4−import { Button } from '../../components/old/Base';
5−import { Row, Col, H1, P } from '../../components/old/Base';
4+import TrezorConnect from 'trezor-connect';
5+import * as secp256k1 from 'secp256k1';
6+
7+import View from '../../components/View';
8+import { ForwardButton } from '../../components/Buttons';
69import {
10+ H1,
11+ P,
712 InnerLabel,
813 Input,
914 InnerLabelDropdown,
1015} from '../../components/old/Base';
11−import TrezorConnect from 'trezor-connect';
12−import * as secp256k1 from 'secp256k1';
1316
1417import { TREZOR_PATH } from '../../lib/trezor';
15−import { compose } from '../../lib/lib';
16−import { withWallet } from '../../store/wallet';
17−
18−class Trezor extends React.Component {
19− constructor(props) {
20− super(props);
18+import { useWallet } from '../../store/wallet';
2119
22− this.state = {
23− hdpath: TREZOR_PATH.replace(/x/g, 0),
24− account: 0,
25− };
20+export default function Trezor({ loginCompleted }) {
21+ const { wallet, setWallet, setWalletHdPath } = useWallet();
2622
27− this.handleAccountSelection = this.handleAccountSelection.bind(this);
28− this.handleHdPathInput = this.handleHdPathInput.bind(this);
29− this.pollDevice = this.pollDevice.bind(this);
30− }
23+ const [hdPath, setHdPath] = useState(TREZOR_PATH.replace(/x/g, 0));
24+ const [account, setAccount] = useState(0);
3125
32− handleAccountSelection(account) {
33− let hdpath = this.state.hdpath;
26+ const handleAccountSelection = account => {
27+ setAccount(account);
3428 if (account !== 'custom') {
35− hdpath = TREZOR_PATH.replace(/x/g, account);
29+ setHdPath(TREZOR_PATH.replace(/x/g, account));
3630 }
37− this.setState({ account, hdpath });
38− }
39−
40− handleHdPathInput(hdpath) {
41− this.setState({ hdpath });
42− }
43−
44− async pollDevice() {
45− const { setWallet, setWalletHdPath } = this.props;
46− const { hdpath } = this.state;
31+ };
4732
33+ const pollDevice = async () => {
4834 TrezorConnect.manifest({
4935 email: 'bridge-trezor@urbit.org',
5036 appUrl: 'https://github.com/urbit/bridge',
5137 });
52− TrezorConnect.getPublicKey({ path: hdpath }).then(info => {
38+ TrezorConnect.getPublicKey({ path: hdPath }).then(info => {
5339 if (info.success === true) {
5440 const payload = info.payload;
5541 const publicKey = Buffer.from(payload.publicKey, 'hex');
@@ -57,90 +43,76 @@ class Trezor extends React.Component {
5743 const pub = secp256k1.publicKeyConvert(publicKey, true);
5844 const hd = bip32.fromPublicKey(pub, chainCode);
5945 setWallet(Maybe.Just(hd));
60− setWalletHdPath(hdpath);
46+ setWalletHdPath(hdPath);
6147 } else {
6248 setWallet(Maybe.Nothing());
6349 }
6450 });
51+ };
52+
53+ let accountOptions = [
54+ {
55+ title: 'Custom path',
56+ value: 'custom',
57+ },
58+ ];
59+ for (let i = 0; i < 20; i++) {
60+ accountOptions.push({
61+ title: 'Account #' + (i + 1),
62+ value: i,
63+ });
6564 }
66−
67− render() {
68− const { wallet } = this.props;
69− const { hdpath, account } = this.state;
70− const { handleAccountSelection } = this;
71−
72− let accountOptions = [
73− {
74− title: 'Custom path',
75− value: 'custom',
76− },
77− ];
78− for (let i = 0; i < 20; i++) {
79− accountOptions.push({
80− title: 'Account #' + (i + 1),
81− value: i,
82− });
83− }
84− let accountTitle = accountOptions.find(o => o.value === account).title;
85−
86− const accountSelection = (
87− <InnerLabelDropdown
88− className="mt-8"
65+ let accountTitle = accountOptions.find(o => o.value === account).title;
66+
67+ const accountSelection = (
68+ <InnerLabelDropdown
69+ className="mt-8"
70+ prop-size="md"
71+ prop-format="innerLabel"
72+ options={accountOptions}
73+ handleUpdate={handleAccountSelection}
74+ title={'Account'}
75+ currentSelectionTitle={accountTitle}
76+ fullWidth={true}
77+ />
78+ );
79+
80+ const pathSelection =
81+ account !== 'custom' ? null : (
82+ <Input
83+ className="mt-8 pt-8 text-mono"
8984 prop-size="md"
9085 prop-format="innerLabel"
91− options={accountOptions}
92− handleUpdate={handleAccountSelection}
93− title={'Account'}
94− currentSelectionTitle={accountTitle}
95− fullWidth={true}
96− />
86+ name="hdPath"
87+ value={hdPath}
88+ autocomplete="off"
89+ onChange={setHdPath}>
90+ <InnerLabel>{'HD Path'}</InnerLabel>
91+ </Input>
9792 );
9893
99− const pathSelection =
100− account !== 'custom' ? null : (
101− <Input
102− className="mt-8 pt-8 text-mono"
103− prop-size="md"
104− prop-format="innerLabel"
105− name="hdpath"
106− value={hdpath}
107− autocomplete="off"
108− onChange={this.handleHdPathInput}>
109− <InnerLabel>{'HD Path'}</InnerLabel>
110− </Input>
111− );
112−
113− return (
114− <Row>
115− <Col className={'measure-md'}>
116− <H1>{'Authenticate With Your Trezor'}</H1>
117−
118− <P>
119− {`Connect and authenticate to your Trezor. If you'd like
120− to use a custom derivation path, you may enter it below.`}
121− </P>
122−
123− {accountSelection}
124− {pathSelection}
125−
126− <Button
127− className={'mt-8'}
128− prop-size={'wide lg'}
129− onClick={this.pollDevice}>
130− {'Authenticate →'}
131− </Button>
132−
133− <Button
134− className={'mt-8'}
135− prop-size={'wide lg'}
136− disabled={Maybe.Nothing.hasInstance(wallet)}
137− onClick={this.props.loginCompleted}>
138− {'Continue →'}
139− </Button>
140− </Col>
141− </Row>
142− );
143− }
94+ return (
95+ <View>
96+ <H1>{'Authenticate With Your Trezor'}</H1>
97+
98+ <P>
99+ {`Connect and authenticate to your Trezor. If you'd like
100+ to use a custom derivation path, you may enter it below.`}
101+ </P>
102+
103+ {accountSelection}
104+ {pathSelection}
105+
106+ <ForwardButton className={'mt3'} onClick={pollDevice}>
107+ {'Authenticate'}
108+ </ForwardButton>
109+
110+ <ForwardButton
111+ className={'mt3'}
112+ disabled={Maybe.Nothing.hasInstance(wallet)}
113+ onClick={loginCompleted}>
114+ {'Continue'}
115+ </ForwardButton>
116+ </View>
117+ );
144118}
145−
146−export default compose(withWallet)(Trezor);