Newer
Older
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
import React, { Component } from 'react';
import { accountsInfo$ } from '@parity/light.js';
import { inject, observer } from 'mobx-react';
import { Link, Route } from 'react-router-dom';
import AccountCopyPhrase from './AccountCopyPhrase';
import AccountName from './AccountName';
import AccountPassword from './AccountPassword';
import AccountRewritePhrase from './AccountRewritePhrase';
@inject('createAccountStore')
@observer
class CreateAccount extends Component {
/**
* Creating account and importing accounts have different processes: 4 steps
* for importing, and 5 steps for creating
*/
getSteps = isImport =>
isImport
? [AccountRewritePhrase, AccountName, AccountPassword]
: [AccountName, AccountCopyPhrase, AccountRewritePhrase, AccountPassword];
handleToggleCreateImport = () => {
const {
createAccountStore,
history,
match: {
params: { step }
}
} = this.props;
createAccountStore.setIsImport(!createAccountStore.isImport);
// If we were further in the account creation, go back to step 1
if (step > 1) {
history.push('/accounts/new/1');
}
createAccountStore: { isImport },
} = this.props;
// Get all the steps of our account process
const Steps = this.getSteps(isImport);
// Show back button if we already have some accounts, so we can go back to AccountsList
accountsInfo &&
Object.keys(accountsInfo).length > 0 && (
<Link className='icon -back' to='/accounts'>
<h1>{isImport ? 'Import account' : 'Create a new account'}</h1>
<div className='box -padded'>
{Steps.map((StepComponent, index) => (
<Route
component={StepComponent}
key={`Step${index + 1}`}
path={`/accounts/new/${index + 1}`}
/>
))}
</div>
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
{step > 1 ? (
<div className='footer-nav_status'>
<Health />
</div>
) : (
<div className='footer-nav_option'>
{isImport ? (
<p>
Need to create an account?
<button
className='button -footer'
onClick={this.handleToggleCreateImport}
>
New account
</button>
</p>
) : (
<p>
Already have an account?
<button
className='button -footer'
onClick={this.handleToggleCreateImport}
>
Import account
</button>
</p>
)}
</div>
)}
</div>
);
}
}
export default CreateAccount;