git.iko.soy/bridge
on master help sign in
Make /views/Login/PrivateKey functional/stateless
1acc940Fang
src/views/Login/PrivateKey.js+39−69
compare with master
unifiedsplit
@@ -1,80 +1,50 @@
1−import Maybe from 'folktale/maybe';
1+import { Just, Nothing } from 'folktale/maybe';
2−import React from 'react';
2+import React, { useState } from 'react';
3−import { Button } from '../../components/old/Base';
4−import {
5− RequiredInput,
6− InnerLabel,
7− InputCaption,
8−} from '../../components/old/Base';
9−import { Row, Col, H1 } from '../../components/old/Base';
10
3
11−import { EthereumWallet } from '../../lib/wallet';
4+import View from '../../components/View';
12−import { compose } from '../../lib/lib';
5+import { PassphraseInput } from '../../components/Inputs';
13−import { withWallet } from '../../store/wallet';
6+import { ForwardButton } from '../../components/Buttons';
14
7
15−class PrivateKey extends React.Component {
8+import { EthereumWallet } from '../../lib/wallet';
16− constructor(props) {
9+import { useWallet } from '../../store/wallet';
17− super(props);
18
10
19− this.state = {
11+export default function PrivateKey({ loginCompleted }) {
20− privateKey: '',
12+ const { wallet, setWallet } = useWallet();
21− };
22
13
23− this.handlePrivateKeyInput = this.handlePrivateKeyInput.bind(this);
14+ const [privateKey, setPrivateKey] = useState('');
24− }
25
15
26− handlePrivateKeyInput(privateKey) {
16+ const handlePrivateKeyInput = privateKey => {
27− this.setState({ privateKey });
17+ setPrivateKey(privateKey);
28− this.constructWallet(privateKey);
18+ constructWallet(privateKey);
29− }
19+ };
30
20
31− constructWallet(privateKey) {
21+ const constructWallet = privateKey => {
32− const { setWallet } = this.props;
33 if (/^[0-9A-Fa-f]{64}$/g.test(privateKey) === true) {
22 if (/^[0-9A-Fa-f]{64}$/g.test(privateKey) === true) {
34 const sec = Buffer.from(privateKey, 'hex');
23 const sec = Buffer.from(privateKey, 'hex');
35− const wallet = new EthereumWallet(sec);
24+ const newWallet = new EthereumWallet(sec);
36− setWallet(Maybe.Just(wallet));
25+ setWallet(Just(newWallet));
37 } else {
26 } else {
38− setWallet(Maybe.Nothing());
27+ setWallet(Nothing());
39 }
28 }
40− }
29+ };
41−
30+
42− render() {
43− const { wallet } = this.props;
44− const { privateKey } = this.state;
45−
46− return (
31+ return (
47− <Row>
32+ <View>
48− <Col className={'measure-md'}>
49− <H1 className={'mb-4'}>{'Enter Your Private Key'}</H1>
50− <InputCaption>
51− {`Please enter your raw Ethereum private key here.`}
33+ Please enter your raw Ethereum private key here.
52− </InputCaption>
34+ <PassphraseInput
53−
54− <RequiredInput
55− className="pt-8 mt-8"
56− prop-size="md"
57− prop-format="innerLabel"
58− type="password"
35+ type="password"
59− name="privateKey"
36+ name="privateKey"
37+ label="Private key"
38+ initialValue={privateKey}
60− onChange={this.handlePrivateKeyInput}
39+ onValue={handlePrivateKeyInput}
61− value={privateKey}
62− autocomplete="off"
40+ autocomplete="off"
63− autoFocus>
41+ autoFocus></PassphraseInput>
64− <InnerLabel>{'Private Key'}</InnerLabel>
42+ <ForwardButton
65− </RequiredInput>
66−
67− <Button
68− className={'mt-10'}
43+ className={'mt3'}
69− prop-size={'wide lg'}
70− disabled={Maybe.Nothing.hasInstance(wallet)}
44+ disabled={Nothing.hasInstance(wallet)}
71− onClick={this.props.loginCompleted}>
45+ onClick={loginCompleted}>
72− {'Continue →'}
46+ {'Continue →'}
73− </Button>
47+ </ForwardButton>
74− </Col>
48+ </View>
75− </Row>
76− );
49+ );
77− }
78}
50}
79−
80−export default compose(withWallet)(PrivateKey);