git.iko.soy/bridge
on e8a6470 help sign in
bridge/src/views/Keystore.js
146 lines 3.8 kB history raw
1import Maybe from 'folktale/maybe'
2import React from 'react'
3import * as keythereum from 'keythereum'
4import { Button } from '../components/Base'
5import { Input, InnerLabel, InputCaption } from '../components/Base'
6import { Row, Col, H1, Form } from '../components/Base'
8import { ROUTE_NAMES } from '../lib/router'
9import { EthereumWallet } from '../lib/wallet'
10import UploadButton from '../components/UploadButton'
12class Keystore extends React.Component {
14 constructor(props) {
15 super(props)
17 this.state = {
18 keystore: '',
19 password: ''
20 }
22 this.handleKeystoreInput = this.handleKeystoreInput.bind(this)
23 this.handlePasswordInput = this.handlePasswordInput.bind(this)
24 this.constructWallet = this.constructWallet.bind(this)
25 }
27 handleKeystoreInput(keystore) {
28 this.setState({ keystore })
29 }
31 handlePasswordInput(password) {
32 this.setState({ password })
33 }
35 constructWallet() {
36 const { setWallet } = this.props
37 const { keystore, password } = this.state
39 try {
40 const json = JSON.parse(keystore)
41 const privateKey = keythereum.recover(password, json)
42 const wallet = new EthereumWallet(privateKey)
43 setWallet(Maybe.Just(wallet))
44 } catch (err) {
45 setWallet(Maybe.Nothing())
46 }
47 }
49 handleKeystoreUpload = (event) => {
50 const file = event.files.item(0)
51 const reader = new FileReader()
53 reader.readAsText(file)
55 console.log(reader.readyState)
57 // const loop = arg =>
58 // arg.readyState === 2
59 // ? arg.result
60 // : loop(arg)
62 // const keystore = loop(reader)
63 // this.setState({ keystore })
64 }
66 render() {
67 const { pushRoute, popRoute, wallet } = this.props
68 const { keystore, password } = this.state
70 const keystoreInput =
71 <Input
72 className='pt-8 mt-8'
73 prop-size='md'
74 prop-format='innerLabel'
75 type='text'
76 name='keystore'
77 onChange={ this.handleKeystoreInput }
78 value={ keystore }
79 autocomplete='off'
80 autoFocus>
81 <InnerLabel>{'Keystore File'}</InnerLabel>
82 </Input>
84 return (
85 <Row>
86 <Col className={'measure-md'}>
87 <H1 className={'mb-4'}>{ 'Enter Your Keystore File' }</H1>
88 <Form>
89 <InputCaption>
90 { `Please paste in your Ethereum keystore file. If your keystore
91 file is encrypted with a password, you'll also need to enter
92 that below.` }
93 </InputCaption>
95 <UploadButton
96 className={ `btn btn-primary table mt-4` }
97 onChange={ this.handleKeystoreUpload }
98 >
99 { 'Upload Keystore file' }
100 </UploadButton>
102 <Input
103 className='pt-8 mt-8'
104 prop-size='md'
105 prop-format='innerLabel'
106 type='password'
107 name='password'
108 onChange={ this.handlePasswordInput }
109 value={ password }
110 autocomplete='off'
111 autoFocus>
112 <InnerLabel>{'Password'}</InnerLabel>
113 </Input>
115 <Button
116 className={'mt-10'}
117 prop-size={ 'wide lg' }
118 disabled={ keystore === '' }
119 onClick={ this.constructWallet }
120 >
121 { 'Decrypt' }
122 </Button>
124 <Button
125 className={'mt-10'}
126 prop-size={ 'wide lg' }
127 disabled={ Maybe.Nothing.hasInstance(wallet) }
128 onClick={ () => {
129 popRoute()
130 pushRoute(ROUTE_NAMES.SHIPS)
131 }
132 }
133 >
134 { 'Continue →' }
135 </Button>
137 </Form>
138 </Col>
139 </Row>
142 )
143 }
146export default Keystore