on master help sign in
Improve keystore error handling.
f6bf651Jared Tobin
src/views/Keystore.js+21−8
@@ -4,7 +4,7 @@ import React from 'react'
4import * as keythereum from 'keythereum'
4import * as keythereum from 'keythereum'
5import { Button, UploadButton } from '../components/Base'
5import { Button, UploadButton } from '../components/Base'
6import { Input, InnerLabel, InputCaption } from '../components/Base'
6import { Input, InnerLabel, InputCaption } from '../components/Base'
7−import { Row, Col, H1, Form } from '../components/Base'
7+import { Row, Col, H1, H3, Form, Warning } from '../components/Base'
8
8
9import { BRIDGE_ERROR } from '../lib/error'
9import { BRIDGE_ERROR } from '../lib/error'
10import { ROUTE_NAMES } from '../lib/router'
10import { ROUTE_NAMES } from '../lib/router'
@@ -17,7 +17,8 @@ class Keystore extends React.Component {
17
17
18 this.state = {
18 this.state = {
19 keystore: Nothing(), // Maybe<Result<String, String>>
19 keystore: Nothing(), // Maybe<Result<String, String>>
20− password: ''
20+ password: '',
21+ decryptionProblem: false
21 }
22 }
22
23
23 this.handleKeystoreUpload = this.handleKeystoreUpload.bind(this)
24 this.handleKeystoreUpload = this.handleKeystoreUpload.bind(this)
@@ -47,14 +48,12 @@ class Keystore extends React.Component {
47 const privateKey = keythereum.recover(password, json)
48 const privateKey = keythereum.recover(password, json)
48
49
49 const wallet = new EthereumWallet(privateKey)
50 const wallet = new EthereumWallet(privateKey)
51+ this.setState({ decryptionProblem: false })
50 setWallet(Just(wallet))
52 setWallet(Just(wallet))
51
53
52 } catch (err) {
54 } catch (err) {
53
55
54− const message = 'There was a problem decrypting your Keystore file'
55− this.setState({
56+ this.setState({ decryptionProblem: true })
56− keystore: Just(Error(message))
57− })
58 setWallet(Nothing())
57 setWallet(Nothing())
59
58
60 }
59 }
@@ -82,7 +81,7 @@ class Keystore extends React.Component {
82
81
83 render() {
82 render() {
84 const { pushRoute, popRoute, wallet } = this.props
83 const { pushRoute, popRoute, wallet } = this.props
85− const { keystore, password } = this.state
84+ const { keystore, password, decryptionProblem } = this.state
86
85
87 const uploadButtonClass = keystore.matchWith({
86 const uploadButtonClass = keystore.matchWith({
88 Nothing: _ => 'bg-blue white',
87 Nothing: _ => 'bg-blue white',
@@ -92,6 +91,18 @@ class Keystore extends React.Component {
92 })
91 })
93 })
92 })
94
93
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>
105+
95 return (
106 return (
96 <Row>
107 <Row>
97 <Col className={'measure-md'}>
108 <Col className={'measure-md'}>
@@ -124,7 +135,7 @@ class Keystore extends React.Component {
124 </Input>
135 </Input>
125
136
126 <Button
137 <Button
127− className={'mt-10'}
138+ className={` mt-10`}
128 prop-size={ 'wide lg' }
139 prop-size={ 'wide lg' }
129 disabled={ Nothing.hasInstance(keystore) }
140 disabled={ Nothing.hasInstance(keystore) }
130 onClick={ this.constructWallet }
141 onClick={ this.constructWallet }
@@ -132,6 +143,8 @@ class Keystore extends React.Component {
132 { 'Decrypt' }
143 { 'Decrypt' }
133 </Button>
144 </Button>
134
145
146+ { decryptMessage }
147+
135 <Button
148 <Button
136 className={'mt-10'}
149 className={'mt-10'}
137 prop-size={ 'wide lg' }
150 prop-size={ 'wide lg' }