mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-25 03:20:23 +01:00
429451de23
The form used for creating a vault on the "Import" page of onboarding and on the "Restore vault" page is nearly identical, yet the implementation is totally separate. It has now been extracted to a separate component, consolidating the two implementations. There is a "terms of use" checkbox on the import page that isn't on the restore vault page, so that part has been made optional. The "submit" button text differs between the two uses as well, so that is customizable. There are slight styling differences between the old and new versions of this form. The fonts and spacing are all using our new standard design system guidelines, and we're using our standard checkbox now as well. The spacing and font sizes were chosen somewhat arbitrarily by me to resemble the old styles, so please feel free to suggest changes if you think they can be improved upon. There are some slight copy changes to the "Restore vault" page as well; the placeholder text and the label for the "Secret Recovery Phrase" field now matches the "Import" page copy.
100 lines
2.8 KiB
JavaScript
100 lines
2.8 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { connect } from 'react-redux';
|
|
import {
|
|
createNewVaultAndRestore,
|
|
unMarkPasswordForgotten,
|
|
initializeThreeBox,
|
|
} from '../../store/actions';
|
|
import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
|
|
import CreateNewVault from '../../components/app/create-new-vault';
|
|
|
|
class RestoreVaultPage extends Component {
|
|
static contextTypes = {
|
|
t: PropTypes.func,
|
|
metricsEvent: PropTypes.func,
|
|
};
|
|
|
|
static propTypes = {
|
|
createNewVaultAndRestore: PropTypes.func.isRequired,
|
|
leaveImportSeedScreenState: PropTypes.func,
|
|
history: PropTypes.object,
|
|
isLoading: PropTypes.bool,
|
|
initializeThreeBox: PropTypes.func,
|
|
};
|
|
|
|
handleImport = async (password, seedPhrase) => {
|
|
const {
|
|
// eslint-disable-next-line no-shadow
|
|
createNewVaultAndRestore,
|
|
leaveImportSeedScreenState,
|
|
history,
|
|
// eslint-disable-next-line no-shadow
|
|
initializeThreeBox,
|
|
} = this.props;
|
|
|
|
leaveImportSeedScreenState();
|
|
await createNewVaultAndRestore(password, seedPhrase);
|
|
this.context.metricsEvent({
|
|
eventOpts: {
|
|
category: 'Retention',
|
|
action: 'userEntersSeedPhrase',
|
|
name: 'onboardingRestoredVault',
|
|
},
|
|
});
|
|
initializeThreeBox();
|
|
history.push(DEFAULT_ROUTE);
|
|
};
|
|
|
|
render() {
|
|
const { t } = this.context;
|
|
const { isLoading } = this.props;
|
|
|
|
return (
|
|
<div className="first-view-main-wrapper">
|
|
<div className="first-view-main">
|
|
<div className="import-account">
|
|
<a
|
|
className="import-account__back-button"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
this.props.leaveImportSeedScreenState();
|
|
this.props.history.goBack();
|
|
}}
|
|
href="#"
|
|
>
|
|
{`< ${t('back')}`}
|
|
</a>
|
|
<div className="import-account__title">
|
|
{this.context.t('restoreAccountWithSeed')}
|
|
</div>
|
|
<div className="import-account__selector-label">
|
|
{this.context.t('secretPhrase')}
|
|
</div>
|
|
<div className="import-account__selector-typography">
|
|
{this.context.t('secretPhraseWarning')}
|
|
</div>
|
|
<CreateNewVault
|
|
disabled={isLoading}
|
|
onSubmit={this.handleImport}
|
|
submitText={t('restore')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect(
|
|
({ appState: { isLoading } }) => ({ isLoading }),
|
|
(dispatch) => ({
|
|
leaveImportSeedScreenState: () => {
|
|
dispatch(unMarkPasswordForgotten());
|
|
},
|
|
createNewVaultAndRestore: (pw, seed) =>
|
|
dispatch(createNewVaultAndRestore(pw, seed)),
|
|
initializeThreeBox: () => dispatch(initializeThreeBox()),
|
|
}),
|
|
)(RestoreVaultPage);
|