2021-02-04 19:15:23 +01:00
|
|
|
import { ethers } from 'ethers';
|
|
|
|
import React, { PureComponent } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import TextField from '../../../../components/ui/text-field';
|
|
|
|
import Button from '../../../../components/ui/button';
|
2019-01-23 16:25:34 +01:00
|
|
|
import {
|
2019-02-27 15:46:41 +01:00
|
|
|
INITIALIZE_SELECT_ACTION_ROUTE,
|
2019-03-05 16:45:01 +01:00
|
|
|
INITIALIZE_END_OF_FLOW_ROUTE,
|
2021-02-04 19:15:23 +01:00
|
|
|
} from '../../../../helpers/constants/routes';
|
2019-01-23 16:25:34 +01:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
const { isValidMnemonic } = ethers.utils;
|
2020-09-28 23:13:42 +02:00
|
|
|
|
2019-01-23 16:25:34 +01:00
|
|
|
export default class ImportWithSeedPhrase extends PureComponent {
|
|
|
|
static contextTypes = {
|
|
|
|
t: PropTypes.func,
|
2019-03-05 16:45:01 +01:00
|
|
|
metricsEvent: PropTypes.func,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2019-01-23 16:25:34 +01:00
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
history: PropTypes.object,
|
|
|
|
onSubmit: PropTypes.func.isRequired,
|
2019-08-02 05:57:26 +02:00
|
|
|
setSeedPhraseBackedUp: PropTypes.func,
|
2019-09-16 19:11:01 +02:00
|
|
|
initializeThreeBox: PropTypes.func,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2019-01-23 16:25:34 +01:00
|
|
|
|
|
|
|
state = {
|
|
|
|
seedPhrase: '',
|
2020-06-11 16:24:13 +02:00
|
|
|
showSeedPhrase: false,
|
2019-01-23 16:25:34 +01:00
|
|
|
password: '',
|
|
|
|
confirmPassword: '',
|
|
|
|
seedPhraseError: '',
|
|
|
|
passwordError: '',
|
|
|
|
confirmPasswordError: '',
|
2019-02-27 15:46:41 +01:00
|
|
|
termsChecked: false,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2019-01-23 16:25:34 +01:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
parseSeedPhrase = (seedPhrase) =>
|
2021-02-04 19:15:23 +01:00
|
|
|
(seedPhrase || '').trim().toLowerCase().match(/\w+/gu)?.join(' ') || '';
|
2019-01-23 16:25:34 +01:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
UNSAFE_componentWillMount() {
|
|
|
|
this._onBeforeUnload = () =>
|
|
|
|
this.context.metricsEvent({
|
|
|
|
eventOpts: {
|
|
|
|
category: 'Onboarding',
|
|
|
|
action: 'Import Seed Phrase',
|
|
|
|
name: 'Close window on import screen',
|
|
|
|
},
|
|
|
|
customVariables: {
|
|
|
|
errorLabel: 'Seed Phrase Error',
|
|
|
|
errorMessage: this.state.seedPhraseError,
|
|
|
|
},
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
|
|
|
window.addEventListener('beforeunload', this._onBeforeUnload);
|
2019-10-31 17:27:22 +01:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
componentWillUnmount() {
|
2021-02-04 19:15:23 +01:00
|
|
|
window.removeEventListener('beforeunload', this._onBeforeUnload);
|
2019-04-05 05:16:25 +02:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
handleSeedPhraseChange(seedPhrase) {
|
2021-02-04 19:15:23 +01:00
|
|
|
let seedPhraseError = '';
|
2019-01-23 16:25:34 +01:00
|
|
|
|
|
|
|
if (seedPhrase) {
|
2021-02-04 19:15:23 +01:00
|
|
|
const parsedSeedPhrase = this.parseSeedPhrase(seedPhrase);
|
|
|
|
const wordCount = parsedSeedPhrase.split(/\s/u).length;
|
2020-02-06 23:25:45 +01:00
|
|
|
if (wordCount % 3 !== 0 || wordCount > 24 || wordCount < 12) {
|
2021-02-04 19:15:23 +01:00
|
|
|
seedPhraseError = this.context.t('seedPhraseReq');
|
2020-09-28 23:13:42 +02:00
|
|
|
} else if (!isValidMnemonic(parsedSeedPhrase)) {
|
2021-02-04 19:15:23 +01:00
|
|
|
seedPhraseError = this.context.t('invalidSeedPhrase');
|
2019-01-23 16:25:34 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
this.setState({ seedPhrase, seedPhraseError });
|
2019-01-23 16:25:34 +01:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
handlePasswordChange(password) {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
2019-01-23 16:25:34 +01:00
|
|
|
|
2020-02-15 21:34:12 +01:00
|
|
|
this.setState((state) => {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { confirmPassword } = state;
|
|
|
|
let confirmPasswordError = '';
|
|
|
|
let passwordError = '';
|
2019-01-23 16:25:34 +01:00
|
|
|
|
|
|
|
if (password && password.length < 8) {
|
2021-02-04 19:15:23 +01:00
|
|
|
passwordError = t('passwordNotLongEnough');
|
2019-01-23 16:25:34 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
if (confirmPassword && password !== confirmPassword) {
|
2021-02-04 19:15:23 +01:00
|
|
|
confirmPasswordError = t('passwordsDontMatch');
|
2019-01-23 16:25:34 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
password,
|
|
|
|
passwordError,
|
|
|
|
confirmPasswordError,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
|
|
|
});
|
2019-01-23 16:25:34 +01:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
handleConfirmPasswordChange(confirmPassword) {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
2019-01-23 16:25:34 +01:00
|
|
|
|
2020-02-15 21:34:12 +01:00
|
|
|
this.setState((state) => {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { password } = state;
|
|
|
|
let confirmPasswordError = '';
|
2019-01-23 16:25:34 +01:00
|
|
|
|
|
|
|
if (password !== confirmPassword) {
|
2021-02-04 19:15:23 +01:00
|
|
|
confirmPasswordError = t('passwordsDontMatch');
|
2019-01-23 16:25:34 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
confirmPassword,
|
|
|
|
confirmPasswordError,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
|
|
|
});
|
2019-01-23 16:25:34 +01:00
|
|
|
}
|
|
|
|
|
2020-02-15 21:34:12 +01:00
|
|
|
handleImport = async (event) => {
|
2021-02-04 19:15:23 +01:00
|
|
|
event.preventDefault();
|
2019-01-23 16:25:34 +01:00
|
|
|
|
|
|
|
if (!this.isValid()) {
|
2021-02-04 19:15:23 +01:00
|
|
|
return;
|
2019-01-23 16:25:34 +01:00
|
|
|
}
|
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
const { password, seedPhrase } = this.state;
|
2020-11-03 00:41:28 +01:00
|
|
|
const {
|
|
|
|
history,
|
|
|
|
onSubmit,
|
|
|
|
setSeedPhraseBackedUp,
|
|
|
|
initializeThreeBox,
|
2021-02-04 19:15:23 +01:00
|
|
|
} = this.props;
|
2019-01-23 16:25:34 +01:00
|
|
|
|
|
|
|
try {
|
2021-02-04 19:15:23 +01:00
|
|
|
await onSubmit(password, this.parseSeedPhrase(seedPhrase));
|
2019-03-05 16:45:01 +01:00
|
|
|
this.context.metricsEvent({
|
|
|
|
eventOpts: {
|
|
|
|
category: 'Onboarding',
|
|
|
|
action: 'Import Seed Phrase',
|
|
|
|
name: 'Import Complete',
|
|
|
|
},
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
2019-08-02 05:57:26 +02:00
|
|
|
|
2020-07-27 23:03:26 +02:00
|
|
|
setSeedPhraseBackedUp(true).then(async () => {
|
2021-02-04 19:15:23 +01:00
|
|
|
initializeThreeBox();
|
|
|
|
history.push(INITIALIZE_END_OF_FLOW_ROUTE);
|
|
|
|
});
|
2019-01-23 16:25:34 +01:00
|
|
|
} catch (error) {
|
2021-02-04 19:15:23 +01:00
|
|
|
this.setState({ seedPhraseError: error.message });
|
2019-01-23 16:25:34 +01:00
|
|
|
}
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2019-01-23 16:25:34 +01:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
isValid() {
|
2019-01-23 16:25:34 +01:00
|
|
|
const {
|
|
|
|
seedPhrase,
|
|
|
|
password,
|
|
|
|
confirmPassword,
|
|
|
|
passwordError,
|
|
|
|
confirmPasswordError,
|
|
|
|
seedPhraseError,
|
2021-02-04 19:15:23 +01:00
|
|
|
} = this.state;
|
2019-01-23 16:25:34 +01:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
if (
|
|
|
|
!password ||
|
|
|
|
!confirmPassword ||
|
|
|
|
!seedPhrase ||
|
|
|
|
password !== confirmPassword
|
|
|
|
) {
|
2021-02-04 19:15:23 +01:00
|
|
|
return false;
|
2019-01-23 16:25:34 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
if (password.length < 8) {
|
2021-02-04 19:15:23 +01:00
|
|
|
return false;
|
2019-01-23 16:25:34 +01:00
|
|
|
}
|
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
return !passwordError && !confirmPasswordError && !seedPhraseError;
|
2019-01-23 16:25:34 +01:00
|
|
|
}
|
|
|
|
|
2019-12-03 21:50:55 +01:00
|
|
|
onTermsKeyPress = ({ key }) => {
|
2019-11-23 05:56:39 +01:00
|
|
|
if (key === ' ' || key === 'Enter') {
|
2021-02-04 19:15:23 +01:00
|
|
|
this.toggleTermsCheck();
|
2019-11-23 05:56:39 +01:00
|
|
|
}
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2019-11-23 05:56:39 +01:00
|
|
|
|
2019-02-27 15:46:41 +01:00
|
|
|
toggleTermsCheck = () => {
|
2019-03-05 16:45:01 +01:00
|
|
|
this.context.metricsEvent({
|
|
|
|
eventOpts: {
|
|
|
|
category: 'Onboarding',
|
|
|
|
action: 'Import Seed Phrase',
|
|
|
|
name: 'Check ToS',
|
|
|
|
},
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
2019-02-27 15:46:41 +01:00
|
|
|
this.setState((prevState) => ({
|
2019-07-31 22:17:11 +02:00
|
|
|
termsChecked: !prevState.termsChecked,
|
2021-02-04 19:15:23 +01:00
|
|
|
}));
|
|
|
|
};
|
2019-02-27 15:46:41 +01:00
|
|
|
|
2020-06-11 16:24:13 +02:00
|
|
|
toggleShowSeedPhrase = () => {
|
|
|
|
this.setState(({ showSeedPhrase }) => ({
|
|
|
|
showSeedPhrase: !showSeedPhrase,
|
2021-02-04 19:15:23 +01:00
|
|
|
}));
|
|
|
|
};
|
2020-06-11 16:24:13 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
render() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
2020-11-03 00:41:28 +01:00
|
|
|
const {
|
|
|
|
seedPhraseError,
|
|
|
|
showSeedPhrase,
|
|
|
|
passwordError,
|
|
|
|
confirmPasswordError,
|
|
|
|
termsChecked,
|
2021-02-04 19:15:23 +01:00
|
|
|
} = this.state;
|
2019-01-23 16:25:34 +01:00
|
|
|
|
|
|
|
return (
|
2020-11-03 00:41:28 +01:00
|
|
|
<form className="first-time-flow__form" onSubmit={this.handleImport}>
|
2019-02-27 15:46:41 +01:00
|
|
|
<div className="first-time-flow__create-back">
|
2019-01-23 16:25:34 +01:00
|
|
|
<a
|
2020-02-15 21:34:12 +01:00
|
|
|
onClick={(e) => {
|
2021-02-04 19:15:23 +01:00
|
|
|
e.preventDefault();
|
2019-03-05 16:45:01 +01:00
|
|
|
this.context.metricsEvent({
|
|
|
|
eventOpts: {
|
|
|
|
category: 'Onboarding',
|
|
|
|
action: 'Import Seed Phrase',
|
|
|
|
name: 'Go Back from Onboarding Import',
|
|
|
|
},
|
2019-04-05 05:16:25 +02:00
|
|
|
customVariables: {
|
|
|
|
errorLabel: 'Seed Phrase Error',
|
|
|
|
errorMessage: seedPhraseError,
|
|
|
|
},
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
|
|
|
this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE);
|
2019-01-23 16:25:34 +01:00
|
|
|
}}
|
|
|
|
href="#"
|
|
|
|
>
|
|
|
|
{`< Back`}
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div className="first-time-flow__header">
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('importAccountSeedPhrase')}
|
2019-01-23 16:25:34 +01:00
|
|
|
</div>
|
2020-11-03 00:41:28 +01:00
|
|
|
<div className="first-time-flow__text-block">{t('secretPhrase')}</div>
|
2019-01-23 16:25:34 +01:00
|
|
|
<div className="first-time-flow__textarea-wrapper">
|
2020-11-03 00:41:28 +01:00
|
|
|
<label>{t('walletSeed')}</label>
|
2020-06-11 16:24:13 +02:00
|
|
|
{showSeedPhrase ? (
|
|
|
|
<textarea
|
|
|
|
className="first-time-flow__textarea"
|
|
|
|
onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
|
|
|
|
value={this.state.seedPhrase}
|
|
|
|
placeholder={t('seedPhrasePlaceholder')}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<TextField
|
|
|
|
className="first-time-flow__textarea first-time-flow__seedphrase"
|
|
|
|
type="password"
|
|
|
|
onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
|
|
|
|
value={this.state.seedPhrase}
|
|
|
|
placeholder={t('seedPhrasePlaceholderPaste')}
|
|
|
|
/>
|
|
|
|
)}
|
2020-11-03 00:41:28 +01:00
|
|
|
{seedPhraseError && <span className="error">{seedPhraseError}</span>}
|
|
|
|
<div
|
|
|
|
className="first-time-flow__checkbox-container"
|
|
|
|
onClick={this.toggleShowSeedPhrase}
|
|
|
|
>
|
2020-06-11 16:24:13 +02:00
|
|
|
<div
|
|
|
|
className="first-time-flow__checkbox"
|
|
|
|
tabIndex="0"
|
|
|
|
role="checkbox"
|
|
|
|
onKeyPress={this.toggleShowSeedPhrase}
|
|
|
|
aria-checked={showSeedPhrase}
|
|
|
|
aria-labelledby="ftf-chk1-label"
|
|
|
|
>
|
|
|
|
{showSeedPhrase ? <i className="fa fa-check fa-2x" /> : null}
|
|
|
|
</div>
|
2020-11-03 00:41:28 +01:00
|
|
|
<span
|
|
|
|
id="ftf-chk1-label"
|
|
|
|
className="first-time-flow__checkbox-label"
|
|
|
|
>
|
|
|
|
{t('showSeedPhrase')}
|
2020-06-11 16:24:13 +02:00
|
|
|
</span>
|
|
|
|
</div>
|
2019-01-23 16:25:34 +01:00
|
|
|
</div>
|
|
|
|
<TextField
|
|
|
|
id="password"
|
|
|
|
label={t('newPassword')}
|
|
|
|
type="password"
|
|
|
|
className="first-time-flow__input"
|
|
|
|
value={this.state.password}
|
2020-02-15 21:34:12 +01:00
|
|
|
onChange={(event) => this.handlePasswordChange(event.target.value)}
|
2019-01-23 16:25:34 +01:00
|
|
|
error={passwordError}
|
|
|
|
autoComplete="new-password"
|
|
|
|
margin="normal"
|
|
|
|
largeLabel
|
|
|
|
/>
|
|
|
|
<TextField
|
|
|
|
id="confirm-password"
|
|
|
|
label={t('confirmPassword')}
|
|
|
|
type="password"
|
|
|
|
className="first-time-flow__input"
|
|
|
|
value={this.state.confirmPassword}
|
2020-11-03 00:41:28 +01:00
|
|
|
onChange={(event) =>
|
|
|
|
this.handleConfirmPasswordChange(event.target.value)
|
|
|
|
}
|
2019-01-23 16:25:34 +01:00
|
|
|
error={confirmPasswordError}
|
|
|
|
autoComplete="confirm-password"
|
|
|
|
margin="normal"
|
|
|
|
largeLabel
|
|
|
|
/>
|
2020-11-03 00:41:28 +01:00
|
|
|
<div
|
|
|
|
className="first-time-flow__checkbox-container"
|
|
|
|
onClick={this.toggleTermsCheck}
|
|
|
|
>
|
2019-11-23 05:56:39 +01:00
|
|
|
<div
|
2020-06-11 16:24:13 +02:00
|
|
|
className="first-time-flow__checkbox first-time-flow__terms"
|
2019-11-23 05:56:39 +01:00
|
|
|
tabIndex="0"
|
|
|
|
role="checkbox"
|
|
|
|
onKeyPress={this.onTermsKeyPress}
|
|
|
|
aria-checked={termsChecked}
|
|
|
|
aria-labelledby="ftf-chk1-label"
|
|
|
|
>
|
2019-02-27 15:46:41 +01:00
|
|
|
{termsChecked ? <i className="fa fa-check fa-2x" /> : null}
|
|
|
|
</div>
|
2019-11-23 05:56:39 +01:00
|
|
|
<span id="ftf-chk1-label" className="first-time-flow__checkbox-label">
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('acceptTermsOfUse', [
|
2020-06-04 16:58:21 +02:00
|
|
|
<a
|
|
|
|
onClick={(e) => e.stopPropagation()}
|
|
|
|
key="first-time-flow__link-text"
|
|
|
|
href="https://metamask.io/terms.html"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
>
|
2020-11-03 00:41:28 +01:00
|
|
|
<span className="first-time-flow__link-text">{t('terms')}</span>
|
|
|
|
</a>,
|
|
|
|
])}
|
2019-02-27 15:46:41 +01:00
|
|
|
</span>
|
|
|
|
</div>
|
2019-01-23 16:25:34 +01:00
|
|
|
<Button
|
2019-04-16 21:35:22 +02:00
|
|
|
type="primary"
|
2020-01-07 23:20:29 +01:00
|
|
|
submit
|
2019-01-23 16:25:34 +01:00
|
|
|
className="first-time-flow__button"
|
2019-02-27 15:46:41 +01:00
|
|
|
disabled={!this.isValid() || !termsChecked}
|
2019-01-23 16:25:34 +01:00
|
|
|
>
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('import')}
|
2019-01-23 16:25:34 +01:00
|
|
|
</Button>
|
|
|
|
</form>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-01-23 16:25:34 +01:00
|
|
|
}
|
|
|
|
}
|