Newer
Older
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
import React, { Component } from "react";
import { AccountCard, Card, Form as FetherForm } from "fether-ui";
import { inject, observer } from "mobx-react";
@inject("createAccountStore")
class AccountRewritePhrase extends Component {
isLoading: false,
isFileValid: false,
json: null,
value: ""
handleChange = ({ target: { value } }) => {
this.setState({ value });
};
handleChangeFile = ({ target: { result } }) => {
try {
const json = JSON.parse(result);
const isFileValid =
json.address.length === 32 &&
typeof json.meta === "object" &&
json.encoding.content === "pkcs8";
this.setState({
isFileValid,
json
});
} catch (error) {
this.setState({
isFileValid: false,
json: null
});
console.error(error);
}
};
handleNextStep = async () => {
location: { pathname },
createAccountStore: { isImport, isJSON, setJSON, setPhrase }
const currentStep = pathname.slice(-1);
const { json, value } = this.state;
if (isJSON) {
this.setState({ isLoading: true });
console.log("setting address ", json.address);
await setJSON(json);
// await setAddress(json.address);
}
// If we're importing, derive address from recovery phrase when we submit
this.setState({ isLoading: true });
await setPhrase(value);
}
history.push(`/accounts/new/${+currentStep + 1}`);
};
toggleImportMethod = () => {
const { createAccountStore } = this.props;
createAccountStore.setIsJSON(!createAccountStore.isJSON);
};
render() {
createAccountStore: { address, isImport, isJSON, name },
const currentStep = pathname.slice(-1);
Axel Chalon
committed
const body = [
<div key="createAccount">
<div className="text">
Axel Chalon
committed
{isImport ? (
isJSON ? (
<div>
<p> Drop your JSON keyfile below </p>
<button onClick={this.toggleImportMethod} className="button">
Use Seed Phrase
</button>
</div>
) : (
<div>
<p> Type your Recovery phrase </p>
<button onClick={this.toggleImportMethod} className="button">
Use JSON Keyfile
</button>
</div>
)
Axel Chalon
committed
) : (
<p>
Type your secret phrase to confirm that you wrote it down
correctly:
</p>
)}
</div>
{isJSON ? (
<FetherForm.InputFile
label="JSON Backup Keyfile"
onChangeFile={this.handleChangeFile}
required
value={value}
/>
) : (
<FetherForm.Field
as="textarea"
label="Recovery phrase"
onChange={this.handleChange}
required
value={value}
/>
)}
<nav className="form-nav -space-around">
Axel Chalon
committed
{currentStep > 1 && (
<button className="button -cancel" onClick={history.goBack}>
Axel Chalon
committed
Back
</button>
)}
{this.renderButton()}
</nav>
</div>
];
return isImport ? (
<Card>{body}</Card>
) : (
name={address && !name ? "(no name)" : name}
Axel Chalon
committed
drawers={[body]}
createAccountStore: { isImport, phrase }
const { isLoading, json, value } = this.state;
// If we are creating a new account, the button just checks the phrase has
// been correctly written by the user.
if (!isImport) {
return (
<button
Axel Chalon
committed
disabled={value !== phrase}
onClick={this.handleNextStep}
>
Next
</button>
);
// If we are importing an existing account, the button goes to the next step
className="button"
disabled={(!value.length && !json) || isLoading}
export default AccountRewritePhrase;