MyCrypto/common/containers/Tabs/GenerateWallet/index.js

104 lines
3.0 KiB
JavaScript

// @flow
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as generateWalletActions from 'actions/generateWallet';
import PropTypes from 'prop-types';
import EnterPassword from './components/EnterPassword';
import DownloadWallet from './components/DownloadWallet';
import PaperWallet from './components/PaperWallet';
import type PrivKeyWallet from 'libs/wallet/privkey';
import type { State } from 'reducers';
type Props = {
// FIXME union actual steps
activeStep: string,
password: string,
hasDownloadedWalletFile: boolean,
wallet: ?PrivKeyWallet
} & typeof generateWalletActions;
class GenerateWallet extends Component {
props: Props;
static propTypes = {
// Store state
activeStep: PropTypes.string,
wallet: PropTypes.object,
password: PropTypes.string,
hasDownloadedWalletFile: PropTypes.bool,
// Actions
showPasswordGenerateWallet: PropTypes.func,
generateUTCGenerateWallet: PropTypes.func,
downloadUTCGenerateWallet: PropTypes.func,
confirmContinueToPaperGenerateWallet: PropTypes.func,
resetGenerateWallet: PropTypes.func
};
componentWillUnmount() {
this.props.resetGenerateWallet();
}
render() {
const { activeStep, wallet, password } = this.props;
let content;
switch (activeStep) {
case 'password':
content = <EnterPassword {...this.props} />;
break;
case 'download':
if (wallet) {
content = (
<DownloadWallet
hasDownloadedWalletFile={this.props.hasDownloadedWalletFile}
wallet={wallet}
password={password}
downloadUTCGenerateWallet={this.props.downloadUTCGenerateWallet}
confirmContinueToPaperGenerateWallet={
this.props.confirmContinueToPaperGenerateWallet
}
/>
);
}
break;
case 'paper':
if (wallet) {
content = <PaperWallet wallet={wallet} />;
} else {
content = <h1>Uh oh. Not sure how you got here.</h1>;
}
break;
default:
content = <h1>Uh oh. Not sure how you got here.</h1>;
}
return (
<section className="container" style={{ minHeight: '50%' }}>
<div className="tab-content">
<main className="tab-pane active text-center" role="main">
<section role="main" className="row">
<br />
{content}
</section>
</main>
</div>
</section>
);
}
}
function mapStateToProps(state: State) {
return {
generateWalletPassword: state.form.generateWalletPassword,
activeStep: state.generateWallet.activeStep,
password: state.generateWallet.password,
hasDownloadedWalletFile: state.generateWallet.hasDownloadedWalletFile,
wallet: state.generateWallet.wallet,
walletFile: state.generateWallet.walletFile
};
}
export default connect(mapStateToProps, generateWalletActions)(GenerateWallet);