on d593175 help sign in
bridge/src/views/Keystore.js
168 lines 4.6 kB history raw
1import { Just, Nothing } from 'folktale/maybe'
2import { Ok, Error } from 'folktale/result'
3import React from 'react'
4import * as keythereum from 'keythereum'
5import { Button, UploadButton } from '../components/Base'
6import { Input, InnerLabel, InputCaption } from '../components/Base'
7import { Row, Col, H1, H3, Warning } from '../components/Base'
9import { BRIDGE_ERROR } from '../lib/error'
10import { ROUTE_NAMES } from '../lib/router'
11import { EthereumWallet } from '../lib/wallet'
13class Keystore extends React.Component {
15 constructor(props) {
16 super(props)
18 this.state = {
19 keystore: Nothing(), // Maybe<Result<String, String>>
20 password: '',
21 decryptionProblem: false
22 }
24 this.handleKeystoreUpload = this.handleKeystoreUpload.bind(this)
25 this.handlePasswordInput = this.handlePasswordInput.bind(this)
26 this.constructWallet = this.constructWallet.bind(this)
27 }
29 handlePasswordInput(password) {
30 this.setState({ password })
31 }
33 constructWallet() {
34 const { setWallet } = this.props
35 const { keystore, password } = this.state
37 try {
39 const text = keystore.matchWith({
40 Nothing: _ => { throw BRIDGE_ERROR.MISSING_KEYSTORE },
41 Just: ks => ks.value.matchWith({
42 Ok: result => result.value,
43 Error: _ => { throw BRIDGE_ERROR.MISSING_KEYSTORE }
44 })
45 })
47 const json = JSON.parse(text)
48 const privateKey = keythereum.recover(password, json)
50 const wallet = new EthereumWallet(privateKey)
51 this.setState({ decryptionProblem: false })
52 setWallet(Just(wallet))
54 } catch (err) {
56 this.setState({ decryptionProblem: true })
57 setWallet(Nothing())
59 }
60 }
62 handleKeystoreUpload = (event) => {
63 const file = event.files.item(0)
64 const reader = new FileReader()
66 reader.onload = (e) => {
67 const keystore = e.target.result
68 this.setState({ keystore: Just(Ok(keystore)) })
69 }
71 const failure = _ => {
72 const message = 'There was a problem uploading your Keystore file'
73 this.setState({ keystore: Just(Error(message)) })
74 }
76 reader.onerror = failure
77 reader.onabort = failure
79 reader.readAsText(file)
80 }
82 render() {
83 const { pushRoute, popRoute, wallet } = this.props
84 const { keystore, password, decryptionProblem } = this.state
86 const uploadButtonClass = keystore.matchWith({
87 Nothing: _ => 'bg-blue white',
88 Just: ks => ks.value.matchWith({
89 Ok: _ => 'bg-green white',
90 Error: _ => 'bg-yellow black'
91 })
92 })
94 const decryptMessage =
95 decryptionProblem === false
96 ? <div />
97 : <Warning className={'mt-8'}>
98 <H3 style={{marginTop: 0, paddingTop: 0}}>
99 {
100 "Couldn't decrypt wallet."
101 }
102 </H3>
103 { 'You may have entered an incorrect password.' }
104 </Warning>
106 return (
107 <Row>
108 <Col className={'measure-md'}>
109 <H1 className={'mb-4'}>{ 'Upload Your Keystore File' }</H1>
110 <InputCaption>
111 { `Please upload your Ethereum keystore file. If your keystore
112 file is encrypted with a password, you'll also need to enter
113 that below.` }
114 </InputCaption>
116 <UploadButton
117 className={ `btn ${uploadButtonClass} mt-10` }
118 onChange={ this.handleKeystoreUpload }
119 >
120 <div className={'flex-center-all fs-4 h-11 pointer'}>{ 'Upload Keystore file' }</div>
121 </UploadButton>
123 <Input
124 className='pt-8 mt-8'
125 prop-size='md'
126 prop-format='innerLabel'
127 type='password'
128 name='password'
129 onChange={ this.handlePasswordInput }
130 value={ password }
131 autocomplete='off'
132 autoFocus>
133 <InnerLabel>{'Password'}</InnerLabel>
134 </Input>
136 <Button
137 className={` mt-10`}
138 prop-size={ 'wide lg' }
139 disabled={ Nothing.hasInstance(keystore) }
140 onClick={ this.constructWallet }
141 >
142 { 'Decrypt' }
143 </Button>
145 { decryptMessage }
147 <Button
148 className={'mt-10'}
149 prop-size={ 'wide lg' }
150 disabled={ Nothing.hasInstance(wallet) }
151 onClick={ () => {
152 popRoute()
153 pushRoute(ROUTE_NAMES.SHIPS)
154 }
155 }
156 >
157 { 'Continue →' }
158 </Button>
160 </Col>
161 </Row>
164 )
165 }
168export default Keystore