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 {
19 keystore: Nothing(), // Maybe<Result<String, String>>
21 decryptionProblem: false
24 this.handleKeystoreUpload = this.handleKeystoreUpload.bind(this)
25 this.handlePasswordInput = this.handlePasswordInput.bind(this)
26 this.constructWallet = this.constructWallet.bind(this)
29 handlePasswordInput(password) {
30 this.setState({ password })
34 const { setWallet } = this.props
35 const { keystore, password } = this.state
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 }
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))
56 this.setState({ decryptionProblem: true })
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)) })
71 const failure = _ => {
72 const message = 'There was a problem uploading your Keystore file'
73 this.setState({ keystore: Just(Error(message)) })
76 reader.onerror = failure
77 reader.onabort = failure
79 reader.readAsText(file)
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'
94 const decryptMessage =
95 decryptionProblem === false
97 : <Warning className={'mt-8'}>
98 <H3 style={{marginTop: 0, paddingTop: 0}}>
100 "Couldn't decrypt wallet."
103 { 'You may have entered an incorrect password.' }
108 <Col className={'measure-md'}>
109 <H1 className={'mb-4'}>{ 'Upload Your Keystore File' }</H1>
111 { `Please upload your Ethereum keystore file. If your keystore
112 file is encrypted with a password, you'll also need to enter
117 className={ `btn ${uploadButtonClass} mt-10` }
118 onChange={ this.handleKeystoreUpload }
120 <div className={'flex-center-all fs-4 h-11 pointer'}>{ 'Upload Keystore file' }</div>
124 className='pt-8 mt-8'
126 prop-format='innerLabel'
129 onChange={ this.handlePasswordInput }
133 <InnerLabel>{'Password'}</InnerLabel>
138 prop-size={ 'wide lg' }
139 disabled={ Nothing.hasInstance(keystore) }
140 onClick={ this.constructWallet }
149 prop-size={ 'wide lg' }
150 disabled={ Nothing.hasInstance(wallet) }
153 pushRoute(ROUTE_NAMES.SHIPS)
168export default Keystore
keysesc to close
- j k
- move down, up
- enter
- open
- esc
- back, or up a level
- 1 2 3 4
- readme, files, commits, refs
- /
- filter
- y
- copy the clone command
- c
- compare the chosen commit with another (or shift-click both)
- ?
- show or hide this list