Newer
Older
import React, { Component } from 'react';
import { Card, Form as FetherForm } from 'fether-ui';
import { inject, observer } from 'mobx-react';
@inject('createAccountStore')
@observer
class AccountImportOptions extends Component {
state = {
isLoading: false,
isFileValid: false,
json: null,
value: ''
};
handleNextStep = async () => {
const {
history,
location: { pathname },
createAccountStore: { isImport, isJSON, setJSON, setPhrase }
} = this.props;
const currentStep = pathname.slice(-1);
const { json, value } = this.state;
if (isJSON) {
this.setState({ isLoading: true });
await setJSON(json);
}
if (isImport && !isJSON) {
this.setState({ isLoading: true });
await setPhrase(value);
}
history.push(`/accounts/new/${+currentStep + 1}`);
};
handleChange = ({ target: { value } }) => {
this.setState({ value });
};
const {
createAccountStore: { setIsJSON }
} = this.props;
try {
json.address.length === 40 &&
json.meta &&
json.crypto &&
json.crypto.cipher === 'aes-128-ctr';
if (isFileValid) {
const prefix = '0x';
json.address = prefix.concat(json.address);
json: json
});
this.handleNextStep();
}
} catch (error) {
console.error(error);
this.setState({
isFileValid: false,
error:
'Invalid file. Please check this is your actual Parity backup json keyfile and try again.'
});
}
};
render () {
const {
history,
location: { pathname }
} = this.props;
const { error, value } = this.state;
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
const currentStep = pathname.slice(-1);
const jsonCard = [
<div key='createAccount'>
<div className='text -centered'>
<p> Recover from JSON Keyfile </p>
<FetherForm.InputFile
label='JSON Backup Keyfile'
onChangeFile={this.handleChangeFile}
required
/>
</div>
</div>
];
const phraseCard = [
<div key='importBackup'>
<div className='text -centered'>
<p>Recover from Seed Phrase</p>
</div>
<FetherForm.Field
as='textarea'
label='Recovery phrase'
onChange={this.handleChange}
required
value={value}
/>
</div>
];
return (
<div className='center-md'>
<Card> {jsonCard} </Card>
<br />
<Card> {phraseCard} </Card>
<br />
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
{this.renderButton()}
<nav className='form-nav -space-around'>
{currentStep > 1 && (
<button className='button -cancel' onClick={history.goBack}>
Back
</button>
)}
</nav>
</div>
);
}
renderButton = () => {
const { isFileValid, isLoading, json, value } = this.state;
// If we are importing an existing account, the button goes to the next step
return (
<button
className='button'
disabled={
(!json && !value.length) || (json && !isFileValid) || isLoading
}
onClick={this.handleNextStep}
>
Next
</button>
);
};
}
export default AccountImportOptions;