1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
metamask-extension/ui/pages/first-time-flow/first-time-flow.component.js
Olaf Tomalka 70386726f6
Implement Flask onboarding UI (#12745)
* Added Flask Experimental Area warning to OnboardingV2

* Added first time flow Flask Experimental Area warning

* Made both onboarding flows use one Experimental Area component

* Fix comments in React divs

* Fix unreachable code

* Fix build lint problems

* Changes after code review

* Added guards around route constants imports

* Code Review changes

* Update ui/components/app/flask/experimental-area/index.scss

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Code review changes

* Fix lint

* Update ui/components/app/flask/experimental-area/index.scss

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/app/flask/experimental-area/index.scss

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/app/flask/experimental-area/index.scss

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/app/flask/experimental-area/index.scss

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/app/flask/experimental-area/index.scss

Co-authored-by: George Marshall <george.marshall@consensys.net>

* fix lint

Co-authored-by: George Marshall <george.marshall@consensys.net>
2021-12-01 17:53:30 +01:00

198 lines
5.5 KiB
JavaScript

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Switch, Route } from 'react-router-dom';
import Unlock from '../unlock-page';
import {
DEFAULT_ROUTE,
INITIALIZE_WELCOME_ROUTE,
INITIALIZE_CREATE_PASSWORD_ROUTE,
INITIALIZE_SEED_PHRASE_ROUTE,
INITIALIZE_UNLOCK_ROUTE,
INITIALIZE_SELECT_ACTION_ROUTE,
INITIALIZE_END_OF_FLOW_ROUTE,
INITIALIZE_METAMETRICS_OPT_IN_ROUTE,
INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
INITIALIZE_SEED_PHRASE_INTRO_ROUTE,
///: BEGIN:ONLY_INCLUDE_IN(flask)
INITIALIZE_EXPERIMENTAL_AREA,
///: END:ONLY_INCLUDE_IN
} from '../../helpers/constants/routes';
///: BEGIN:ONLY_INCLUDE_IN(flask)
import ExperimentalArea from '../../components/app/flask/experimental-area';
///: END:ONLY_INCLUDE_IN
import FirstTimeFlowSwitch from './first-time-flow-switch';
import Welcome from './welcome';
import SelectAction from './select-action';
import EndOfFlow from './end-of-flow';
import CreatePassword from './create-password';
import SeedPhrase from './seed-phrase';
import MetaMetricsOptInScreen from './metametrics-opt-in';
export default class FirstTimeFlow extends PureComponent {
static propTypes = {
completedOnboarding: PropTypes.bool,
createNewAccount: PropTypes.func,
createNewAccountFromSeed: PropTypes.func,
history: PropTypes.object,
isInitialized: PropTypes.bool,
isUnlocked: PropTypes.bool,
unlockAccount: PropTypes.func,
nextRoute: PropTypes.string,
showingSeedPhraseBackupAfterOnboarding: PropTypes.bool,
seedPhraseBackedUp: PropTypes.bool,
verifySeedPhrase: PropTypes.func,
};
state = {
seedPhrase: '',
};
componentDidMount() {
const {
completedOnboarding,
history,
isInitialized,
isUnlocked,
showingSeedPhraseBackupAfterOnboarding,
seedPhraseBackedUp,
} = this.props;
if (
completedOnboarding &&
(!showingSeedPhraseBackupAfterOnboarding || seedPhraseBackedUp)
) {
history.push(DEFAULT_ROUTE);
return;
}
if (isInitialized && !isUnlocked) {
history.push(INITIALIZE_UNLOCK_ROUTE);
}
}
handleCreateNewAccount = async (password) => {
const { createNewAccount } = this.props;
try {
const seedPhrase = await createNewAccount(password);
this.setState({ seedPhrase });
} catch (error) {
throw new Error(error.message);
}
};
handleImportWithSeedPhrase = async (password, seedPhrase) => {
const { createNewAccountFromSeed } = this.props;
try {
const vault = await createNewAccountFromSeed(password, seedPhrase);
return vault;
} catch (error) {
throw new Error(error.message);
}
};
handleUnlock = async (password) => {
const { unlockAccount, history, nextRoute } = this.props;
try {
const seedPhrase = await unlockAccount(password);
this.setState({ seedPhrase }, () => {
history.push(nextRoute);
});
} catch (error) {
throw new Error(error.message);
}
};
render() {
const { seedPhrase } = this.state;
const { verifySeedPhrase } = this.props;
return (
<div className="first-time-flow">
<Switch>
<Route
path={INITIALIZE_SEED_PHRASE_ROUTE}
render={(routeProps) => (
<SeedPhrase
{...routeProps}
seedPhrase={seedPhrase}
verifySeedPhrase={verifySeedPhrase}
/>
)}
/>
<Route
path={INITIALIZE_BACKUP_SEED_PHRASE_ROUTE}
render={(routeProps) => (
<SeedPhrase
{...routeProps}
seedPhrase={seedPhrase}
verifySeedPhrase={verifySeedPhrase}
/>
)}
/>
<Route
path={INITIALIZE_SEED_PHRASE_INTRO_ROUTE}
render={(routeProps) => (
<SeedPhrase
{...routeProps}
seedPhrase={seedPhrase}
verifySeedPhrase={verifySeedPhrase}
/>
)}
/>
<Route
path={INITIALIZE_CREATE_PASSWORD_ROUTE}
render={(routeProps) => (
<CreatePassword
{...routeProps}
onCreateNewAccount={this.handleCreateNewAccount}
onCreateNewAccountFromSeed={this.handleImportWithSeedPhrase}
/>
)}
/>
<Route
path={INITIALIZE_SELECT_ACTION_ROUTE}
component={SelectAction}
/>
<Route
path={INITIALIZE_UNLOCK_ROUTE}
render={(routeProps) => (
<Unlock {...routeProps} onSubmit={this.handleUnlock} />
)}
/>
<Route
exact
path={INITIALIZE_END_OF_FLOW_ROUTE}
component={EndOfFlow}
/>
<Route exact path={INITIALIZE_WELCOME_ROUTE} component={Welcome} />
{
///: BEGIN:ONLY_INCLUDE_IN(flask)
}
<Route
exact
path={INITIALIZE_EXPERIMENTAL_AREA}
render={(routeProps) => (
<ExperimentalArea
{...routeProps}
redirectTo={INITIALIZE_SELECT_ACTION_ROUTE}
/>
)}
/>
{
///: END:ONLY_INCLUDE_IN
}
<Route
exact
path={INITIALIZE_METAMETRICS_OPT_IN_ROUTE}
component={MetaMetricsOptInScreen}
/>
<Route exact path="*" component={FirstTimeFlowSwitch} />
</Switch>
</div>
);
}
}