@@ -1,160 +1,81 @@
1+import React, { useCallback, useEffect, useState } from 'react';
12import { Just, Nothing } from 'folktale/maybe';
2−import React from 'react';
3−import { Button } from '../../components/old/Base';
3+
4+import View from '../../components/View';
45import {
5− Input,
66 MnemonicInput,
7− InnerLabel,
8− InputCaption,
9−} from '../../components/old/Base';
10−import { Row, Col } from '../../components/old/Base';
11−
12−import { DEFAULT_HD_PATH, walletFromMnemonic } from '../../lib/wallet';
13−import { compose } from '../../lib/lib';
14−import { withWallet } from '../../store/wallet';
15−
16−class Mnemonic extends React.Component {
17− constructor(props) {
18− super(props);
19−
20− this.state = {
21− mnemonic: '',
22− passphrase: '',
23− hdpath: DEFAULT_HD_PATH,
24− };
25−
26− this.handleMnemonicInput = this.handleMnemonicInput.bind(this);
27− this.handlePassphraseInput = this.handlePassphraseInput.bind(this);
28− this.handleHdPathInput = this.handleHdPathInput.bind(this);
29− }
30−
31− componentDidMount() {
32− const { mnemonic, hdpath, passphrase } = this.state;
33− this.attemptWalletDerivation(mnemonic, hdpath, passphrase);
34− }
35−
36− handlePassphraseInput(passphrase) {
37− this.setState((state, _) => {
38− const mnemonic = state.mnemonic;
39− const hdpath = state.hdpath;
40− this.attemptWalletDerivation(
41− mnemonic,
42− hdpath === '' ? DEFAULT_HD_PATH : hdpath,
43− passphrase
44− );
45− return {
46− passphrase,
47− };
48− });
49− }
50−
51− handleMnemonicInput(mnemonic) {
52− this.setState((state, _) => {
53− const hdpath = state.hdpath;
54− const passphrase = state.passphrase;
55− this.attemptWalletDerivation(
56− mnemonic,
57− hdpath === '' ? DEFAULT_HD_PATH : hdpath,
58− passphrase
59− );
60− return {
61− mnemonic,
62− };
63− });
64− }
65−
66− handleHdPathInput(hdpath) {
67− this.setState((state, _) => {
68− const mnemonic = state.mnemonic;
69− const passphrase = state.passphrase;
70− this.attemptWalletDerivation(
71− mnemonic,
72− hdpath === '' ? DEFAULT_HD_PATH : hdpath,
73− passphrase
74− );
75− return {
76− hdpath,
77− };
78− });
79− }
80−
81− attemptWalletDerivation(mnemonic, hdpath, passphrase) {
82− const { setWallet, setAuthMnemonic, setWalletHdPath } = this.props;
83− const wallet = walletFromMnemonic(mnemonic, hdpath, passphrase);
84− setWallet(wallet);
85− setAuthMnemonic(Just(mnemonic));
86− setWalletHdPath(hdpath);
87− }
88−
89− render() {
90− const { wallet } = this.props;
91− const { mnemonic, hdpath, passphrase } = this.state;
92−
93− return (
94− <Row>
95− <Col>
96− <InputCaption>
97− {'Please enter your BIP39 mnemonic here.'}
98− </InputCaption>
99−
100− <MnemonicInput
101− className="pt-8"
102− prop-size="md"
103− prop-format="innerLabel"
104− type="text"
105− name="mnemonic"
106− onChange={this.handleMnemonicInput}
107− value={mnemonic}
108− autocomplete="off"
109− autoFocus>
110− <InnerLabel>{'Mnemonic'}</InnerLabel>
111− </MnemonicInput>
112−
113− {!this.props.advanced ? null : (
114− <>
115− <InputCaption>
116− {`If your wallet requires a passphrase, you may enter it below.`}
117− </InputCaption>
118−
119− <Input
120− className="pt-8"
121− prop-size="md"
122− prop-format="innerLabel"
123− name="passphrase"
124− type="password"
125− value={passphrase}
126− autocomplete="off"
127− onChange={this.handlePassphraseInput}>
128− <InnerLabel>{'Passphrase'}</InnerLabel>
129− </Input>
130−
131− <InputCaption>
132− {`If you'd like to use a custom derivation path, you may enter it below.`}
133− </InputCaption>
134−
135− <Input
136− className="pt-8 text-mono"
137− prop-size="md"
138− prop-format="innerLabel"
139− name="hdpath"
140− value={hdpath}
141− autocomplete="off"
142− onChange={this.handleHdPathInput}>
143− <InnerLabel>{'HD Path'}</InnerLabel>
144− </Input>
145− </>
146− )}
147−
148− <Button
149− className={'mt-10'}
150− disabled={Nothing.hasInstance(wallet)}
151− onClick={this.props.loginCompleted}>
152− {'Go →'}
153− </Button>
154− </Col>
155− </Row>
156− );
157− }
7+ PassphraseInput,
8+ HdPathInput,
9+} from '../../components/Inputs';
10+import { ForwardButton } from '../../components/Buttons';
11+
12+import { walletFromMnemonic } from '../../lib/wallet';
13+import { useWallet } from '../../store/wallet';
14+
15+export default function Mnemonic({ advanced, loginCompleted }) {
16+ const {
17+ wallet,
18+ setWallet,
19+ authMnemonic,
20+ setAuthMnemonic,
21+ walletHdPath,
22+ setWalletHdPath,
23+ } = useWallet();
24+ const [passphrase, setPassphrase] = useState('');
25+ const mnemonic = authMnemonic.getOrElse('');
26+
27+ // TODO: move this into transformers?
28+ // transform the result of the mnemonic to Maybe<string>
29+ const _setAuthMnemonic = useCallback(
30+ mnemonic => setAuthMnemonic(mnemonic === '' ? Nothing() : Just(mnemonic)),
31+ [setAuthMnemonic]
32+ );
33+
34+ // when the properties change, re-derive wallet
35+ useEffect(() => {
36+ let mounted = true;
37+ (async () => {
38+ const wallet = walletFromMnemonic(mnemonic, walletHdPath, passphrase);
39+ mounted && setWallet(wallet);
40+ })();
41+ return () => (mounted = false);
42+ }, [mnemonic, passphrase, walletHdPath, setWallet]);
43+
44+ return (
45+ <View>
46+ <MnemonicInput
47+ name="mnemonic"
48+ label="BIP39 Mnemonic"
49+ initialValue={mnemonic}
50+ onValue={_setAuthMnemonic}
51+ autoFocus
52+ />
53+
54+ {!advanced ? null : (
55+ <>
56+ <PassphraseInput
57+ name="passphrase"
58+ label="(Optional) Wallet Passphrase"
59+ initialValue={passphrase}
60+ onValue={setPassphrase}
61+ />
62+
63+ <HdPathInput
64+ name="hdpath"
65+ label="HD Path"
66+ initialValue={walletHdPath}
67+ onValue={setWalletHdPath}
68+ />
69+ </>
70+ )}
71+
72+ <ForwardButton
73+ className="mt3"
74+ disabled={Nothing.hasInstance(wallet)}
75+ onClick={loginCompleted}
76+ solid>
77+ Continue
78+ </ForwardButton>
79+ </View>
80+ );
15881}
159−
160−export default compose(withWallet)(Mnemonic);