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