146 lines
4.2 KiB
TypeScript
146 lines
4.2 KiB
TypeScript
import { GenerateNewWalletAction } from 'actions/generateWallet';
|
|
import React, { Component } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { Field, reduxForm } from 'redux-form';
|
|
import translate from 'translations';
|
|
import './EnterPassword.scss';
|
|
import PasswordInput from './PasswordInput';
|
|
import Template from './Template';
|
|
// VALIDATORS
|
|
const minLength = min => value => {
|
|
return value && value.length < min
|
|
? `Must be ${min} characters or more`
|
|
: undefined;
|
|
};
|
|
const minLength9 = minLength(9);
|
|
const required = value => (value ? undefined : 'Required');
|
|
|
|
interface Props {
|
|
walletPasswordForm: any;
|
|
generateNewWallet(pw: string): GenerateNewWalletAction;
|
|
}
|
|
|
|
interface State {
|
|
fileName: null | string;
|
|
blobURI: null | string;
|
|
isPasswordVisible: boolean;
|
|
}
|
|
class EnterPassword extends Component<Props, State> {
|
|
public state = {
|
|
fileName: null,
|
|
blobURI: null,
|
|
isPasswordVisible: false
|
|
};
|
|
|
|
public render() {
|
|
const { walletPasswordForm } = this.props;
|
|
const { isPasswordVisible } = this.state;
|
|
const AnyField = Field as new () => Field<any>;
|
|
const content = (
|
|
<div className="EnterPw">
|
|
<h1 className="EnterPw-title" aria-live="polite">
|
|
{translate('NAV_GenerateWallet')}
|
|
</h1>
|
|
|
|
<label className="EnterPw-password">
|
|
<h4 className="EnterPw-password-label">{translate('GEN_Label_1')}</h4>
|
|
<AnyField
|
|
className="EnterPw-password-field"
|
|
validate={[required, minLength9]}
|
|
component={PasswordInput}
|
|
isPasswordVisible={isPasswordVisible}
|
|
togglePassword={this.togglePassword}
|
|
name="password"
|
|
type="text"
|
|
/>
|
|
</label>
|
|
|
|
<button
|
|
onClick={this.onClickGenerateFile}
|
|
disabled={walletPasswordForm ? walletPasswordForm.syncErrors : true}
|
|
className="EnterPw-submit btn btn-primary btn-block"
|
|
>
|
|
{translate('NAV_GenerateWallet')}
|
|
</button>
|
|
|
|
<p className="EnterPw-warning">{translate('x_PasswordDesc')}</p>
|
|
</div>
|
|
);
|
|
|
|
const help = (
|
|
<div>
|
|
<h4>Ledger / TREZOR:</h4>
|
|
<ul>
|
|
<li>
|
|
<span>{translate('GEN_Help_1')}</span>
|
|
<Link to="/send-transaction">
|
|
{' '}
|
|
Ledger or TREZOR or Digital Bitbox
|
|
</Link>
|
|
<span> {translate('GEN_Help_2')}</span>
|
|
<span> {translate('GEN_Help_3')}</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<h4>Jaxx / Metamask:</h4>
|
|
<ul>
|
|
<li>
|
|
<span>{translate('GEN_Help_1')}</span>
|
|
<Link to="/send-transaction"> {translate('x_Mnemonic')}</Link>
|
|
<span> {translate('GEN_Help_2')}</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<h4>Mist / Geth / Parity:</h4>
|
|
<ul>
|
|
<li>
|
|
<span>{translate('GEN_Help_1')}</span>
|
|
<Link to="/send-transaction"> {translate('x_Keystore2')}</Link>
|
|
<span> {translate('GEN_Help_2')}</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<h4>Guides & FAQ</h4>
|
|
<ul>
|
|
<li>
|
|
<strong>
|
|
<a
|
|
href="https://myetherwallet.groovehq.com/knowledge_base/topics/how-do-i-create-a-new-wallet"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
{translate('GEN_Help_5')}
|
|
</a>
|
|
</strong>
|
|
</li>
|
|
<li>
|
|
<strong>
|
|
<a
|
|
href="https://myetherwallet.groovehq.com/knowledge_base/categories/getting-started-443"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
{translate('GEN_Help_6')}
|
|
</a>
|
|
</strong>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
);
|
|
|
|
return <Template content={content} help={help} />;
|
|
}
|
|
private onClickGenerateFile = () => {
|
|
const form = this.props.walletPasswordForm;
|
|
this.props.generateNewWallet(form.values.password);
|
|
};
|
|
|
|
private togglePassword = () => {
|
|
this.setState({ isPasswordVisible: !this.state.isPasswordVisible });
|
|
};
|
|
}
|
|
|
|
export default reduxForm({
|
|
form: 'walletPasswordForm' // a unique name for this form
|
|
})(EnterPassword as any);
|