git.iko.soy/bridge
on master help sign in
Make /views/Login/Mnemonic functional/stateless
513ddcbFang
src/views/Login/Mnemonic.js+77−156
compare with master
unifiedsplit
@@ -1,160 +1,81 @@
1+import React, { useCallback, useEffect, useState } from 'react';
1import { Just, Nothing } from 'folktale/maybe';
2import { Just, Nothing } from 'folktale/maybe';
2−import React from 'react';
3+
3−import { Button } from '../../components/old/Base';
4+import View from '../../components/View';
4import {
5import {
5− Input,
6 MnemonicInput,
6 MnemonicInput,
7− InnerLabel,
7+ PassphraseInput,
8− InputCaption,
8+ HdPathInput,
9−} from '../../components/old/Base';
9+} from '../../components/Inputs';
10−import { Row, Col } from '../../components/old/Base';
10+import { ForwardButton } from '../../components/Buttons';
11−
11+
12−import { DEFAULT_HD_PATH, walletFromMnemonic } from '../../lib/wallet';
12+import { walletFromMnemonic } from '../../lib/wallet';
13−import { compose } from '../../lib/lib';
14−import { withWallet } from '../../store/wallet';
13+import { useWallet } from '../../store/wallet';
15−
14+
16−class Mnemonic extends React.Component {
15+export default function Mnemonic({ advanced, loginCompleted }) {
17− constructor(props) {
16+ const {
18− super(props);
17+ wallet,
19−
18+ setWallet,
20− this.state = {
19+ authMnemonic,
21− mnemonic: '',
20+ setAuthMnemonic,
22− passphrase: '',
21+ walletHdPath,
23− hdpath: DEFAULT_HD_PATH,
22+ setWalletHdPath,
24− };
23+ } = useWallet();
25−
24+ const [passphrase, setPassphrase] = useState('');
26− this.handleMnemonicInput = this.handleMnemonicInput.bind(this);
25+ const mnemonic = authMnemonic.getOrElse('');
27− this.handlePassphraseInput = this.handlePassphraseInput.bind(this);
26+
28− this.handleHdPathInput = this.handleHdPathInput.bind(this);
27+ // TODO: move this into transformers?
29− }
28+ // transform the result of the mnemonic to Maybe<string>
30−
29+ const _setAuthMnemonic = useCallback(
31− componentDidMount() {
30+ mnemonic => setAuthMnemonic(mnemonic === '' ? Nothing() : Just(mnemonic)),
32− const { mnemonic, hdpath, passphrase } = this.state;
31+ [setAuthMnemonic]
33− this.attemptWalletDerivation(mnemonic, hdpath, passphrase);
32+ );
34− }
33+
35−
34+ // when the properties change, re-derive wallet
36− handlePassphraseInput(passphrase) {
35+ useEffect(() => {
37− this.setState((state, _) => {
36+ let mounted = true;
38− const mnemonic = state.mnemonic;
37+ (async () => {
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;
38+ const wallet = walletFromMnemonic(mnemonic, walletHdPath, passphrase);
92−
39+ mounted && setWallet(wallet);
40+ })();
41+ return () => (mounted = false);
42+ }, [mnemonic, passphrase, walletHdPath, setWallet]);
43+
93− return (
44+ return (
94− <Row>
45+ <View>
95− <Col>
46+ <MnemonicInput
96− <InputCaption>
47+ name="mnemonic"
97− {'Please enter your BIP39 mnemonic here.'}
48+ label="BIP39 Mnemonic"
98− </InputCaption>
99−
100− <MnemonicInput
101− className="pt-8"
102− prop-size="md"
103− prop-format="innerLabel"
104− type="text"
105− name="mnemonic"
49+ initialValue={mnemonic}
106− onChange={this.handleMnemonicInput}
50+ onValue={_setAuthMnemonic}
107− value={mnemonic}
108− autocomplete="off"
109− autoFocus>
51+ autoFocus
110− <InnerLabel>{'Mnemonic'}</InnerLabel>
52+ />
111− </MnemonicInput>
53+
112−
113− {!this.props.advanced ? null : (
54+ {!advanced ? null : (
114− <>
55+ <>
115− <InputCaption>
56+ <PassphraseInput
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"
57+ name="passphrase"
124− type="password"
58+ label="(Optional) Wallet Passphrase"
125− value={passphrase}
59+ initialValue={passphrase}
126− autocomplete="off"
60+ onValue={setPassphrase}
127− onChange={this.handlePassphraseInput}>
61+ />
128− <InnerLabel>{'Passphrase'}</InnerLabel>
62+
129− </Input>
63+ <HdPathInput
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"
64+ name="hdpath"
140− value={hdpath}
65+ label="HD Path"
141− autocomplete="off"
66+ initialValue={walletHdPath}
142− onChange={this.handleHdPathInput}>
67+ onValue={setWalletHdPath}
143− <InnerLabel>{'HD Path'}</InnerLabel>
68+ />
144− </Input>
145− </>
69+ </>
146− )}
70+ )}
147−
71+
148− <Button
72+ <ForwardButton
149− className={'mt-10'}
73+ className="mt3"
150− disabled={Nothing.hasInstance(wallet)}
74+ disabled={Nothing.hasInstance(wallet)}
151− onClick={this.props.loginCompleted}>
75+ onClick={loginCompleted}
152− {'Go →'}
76+ solid>
153− </Button>
77+ Continue
154− </Col>
78+ </ForwardButton>
155− </Row>
79+ </View>
156− );
80+ );
157− }
158}
81}
159−
160−export default compose(withWallet)(Mnemonic);