@@ -4,7 +4,7 @@ import React from 'react'
44import * as keythereum from 'keythereum'
55import { Button, UploadButton } from '../components/Base'
66import { 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'
88
99import { BRIDGE_ERROR } from '../lib/error'
1010import { ROUTE_NAMES } from '../lib/router'
@@ -17,7 +17,8 @@ class Keystore extends React.Component {
1717
1818 this.state = {
1919 keystore: Nothing(), // Maybe<Result<String, String>>
20− password: ''
20+ password: '',
21+ decryptionProblem: false
2122 }
2223
2324 this.handleKeystoreUpload = this.handleKeystoreUpload.bind(this)
@@ -47,14 +48,12 @@ class Keystore extends React.Component {
4748 const privateKey = keythereum.recover(password, json)
4849
4950 const wallet = new EthereumWallet(privateKey)
51+ this.setState({ decryptionProblem: false })
5052 setWallet(Just(wallet))
5153
5254 } catch (err) {
5355
54− const message = 'There was a problem decrypting your Keystore file'
55− this.setState({
56− keystore: Just(Error(message))
57− })
56+ this.setState({ decryptionProblem: true })
5857 setWallet(Nothing())
5958
6059 }
@@ -82,7 +81,7 @@ class Keystore extends React.Component {
8281
8382 render() {
8483 const { pushRoute, popRoute, wallet } = this.props
85− const { keystore, password } = this.state
84+ const { keystore, password, decryptionProblem } = this.state
8685
8786 const uploadButtonClass = keystore.matchWith({
8887 Nothing: _ => 'bg-blue white',
@@ -92,6 +91,18 @@ class Keystore extends React.Component {
9291 })
9392 })
9493
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+
95106 return (
96107 <Row>
97108 <Col className={'measure-md'}>
@@ -124,7 +135,7 @@ class Keystore extends React.Component {
124135 </Input>
125136
126137 <Button
127− className={'mt-10'}
138+ className={` mt-10`}
128139 prop-size={ 'wide lg' }
129140 disabled={ Nothing.hasInstance(keystore) }
130141 onClick={ this.constructWallet }
@@ -132,6 +143,8 @@ class Keystore extends React.Component {
132143 { 'Decrypt' }
133144 </Button>
134145
146+ { decryptMessage }
147+
135148 <Button
136149 className={'mt-10'}
137150 prop-size={ 'wide lg' }