@@ -1,13 +1,14 @@
1−import Maybe from 'folktale/maybe'
1+import { Just, Nothing } from 'folktale/maybe'
2+import { Ok, Error } from 'folktale/result'
23import React from 'react'
34import * as keythereum from 'keythereum'
4−import { Button } from '../components/Base'
5+import { Button, UploadButton } from '../components/Base'
56import { Input, InnerLabel, InputCaption } from '../components/Base'
67import { Row, Col, H1, Form } from '../components/Base'
78
9+import { BRIDGE_ERROR } from '../lib/error'
810import { ROUTE_NAMES } from '../lib/router'
911import { EthereumWallet } from '../lib/wallet'
10−import UploadButton from '../components/UploadButton'
1112
1213class Keystore extends React.Component {
1314
@@ -15,19 +16,15 @@ class Keystore extends React.Component {
1516 super(props)
1617
1718 this.state = {
18− keystore: '',
19+ keystore: Nothing(), // Maybe<Result<String>>
1920 password: ''
2021 }
2122
22− this.handleKeystoreInput = this.handleKeystoreInput.bind(this)
23+ this.handleKeystoreUpload = this.handleKeystoreUpload.bind(this)
2324 this.handlePasswordInput = this.handlePasswordInput.bind(this)
2425 this.constructWallet = this.constructWallet.bind(this)
2526 }
2627
27− handleKeystoreInput(keystore) {
28− this.setState({ keystore })
29− }
30−
3128 handlePasswordInput(password) {
3229 this.setState({ password })
3330 }
@@ -37,12 +34,29 @@ class Keystore extends React.Component {
3734 const { keystore, password } = this.state
3835
3936 try {
40− const json = JSON.parse(keystore)
37+
38+ const text = keystore.matchWith({
39+ Nothing: _ => { throw BRIDGE_ERROR.MISSING_KEYSTORE },
40+ Just: ks => ks.value.matchWith({
41+ Ok: result => result.value,
42+ Error: _ => { throw BRIDGE_ERROR.MISSING_KEYSTORE }
43+ })
44+ })
45+
46+ const json = JSON.parse(text)
4147 const privateKey = keythereum.recover(password, json)
48+
4249 const wallet = new EthereumWallet(privateKey)
43− setWallet(Maybe.Just(wallet))
50+ setWallet(Just(wallet))
51+
4452 } catch (err) {
45− setWallet(Maybe.Nothing())
53+
54+ const message = 'There was a problem decrypting your Keystore file'
55+ this.setState({
56+ keystore: Just(Error(message))
57+ })
58+ setWallet(Nothing())
59+
4660 }
4761 }
4862
@@ -50,50 +64,47 @@ class Keystore extends React.Component {
5064 const file = event.files.item(0)
5165 const reader = new FileReader()
5266
53− reader.readAsText(file)
67+ reader.onload = (e) => {
68+ const keystore = e.target.result
69+ this.setState({ keystore: Just(Ok(keystore)) })
70+ }
5471
55− console.log(reader.readyState)
72+ const failure = _ => {
73+ const message = 'There was a problem uploading your Keystore file'
74+ this.setState({ keystore: Just(Error(message)) })
75+ }
5676
57− // const loop = arg =>
58− // arg.readyState === 2
59− // ? arg.result
60− // : loop(arg)
77+ reader.onerror = failure
78+ reader.onabort = failure
6179
62− // const keystore = loop(reader)
63− // this.setState({ keystore })
80+ reader.readAsText(file)
6481 }
6582
6683 render() {
6784 const { pushRoute, popRoute, wallet } = this.props
6885 const { keystore, password } = this.state
6986
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>
87+ const uploadButtonClass = keystore.matchWith({
88+ Nothing: _ => 'btn-primary',
89+ Just: ks => ks.value.matchWith({
90+ Ok: _ => 'btn-success',
91+ Error: _ => 'shape-orange'
92+ })
93+ })
8394
8495 return (
8596 <Row>
8697 <Col className={'measure-md'}>
87− <H1 className={'mb-4'}>{ 'Enter Your Keystore File' }</H1>
98+ <H1 className={'mb-4'}>{ 'Upload Your Keystore File' }</H1>
8899 <Form>
89100 <InputCaption>
90− { `Please paste in your Ethereum keystore file. If your keystore
101+ { `Please upload your Ethereum keystore file. If your keystore
91102 file is encrypted with a password, you'll also need to enter
92103 that below.` }
93104 </InputCaption>
94105
95106 <UploadButton
96− className={ `btn btn-primary table mt-4` }
107+ className={ `btn ${uploadButtonClass} mt-10` }
97108 onChange={ this.handleKeystoreUpload }
98109 >
99110 { 'Upload Keystore file' }
@@ -115,7 +126,7 @@ class Keystore extends React.Component {
115126 <Button
116127 className={'mt-10'}
117128 prop-size={ 'wide lg' }
118− disabled={ keystore === '' }
129+ disabled={ Nothing.hasInstance(keystore) }
119130 onClick={ this.constructWallet }
120131 >
121132 { 'Decrypt' }
@@ -124,7 +135,7 @@ class Keystore extends React.Component {
124135 <Button
125136 className={'mt-10'}
126137 prop-size={ 'wide lg' }
127− disabled={ Maybe.Nothing.hasInstance(wallet) }
138+ disabled={ Nothing.hasInstance(wallet) }
128139 onClick={ () => {
129140 popRoute()
130141 pushRoute(ROUTE_NAMES.SHIPS)