1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/pages/onboarding-flow/onboarding-flow.js
2022-03-28 09:42:09 -05:00

187 lines
6.2 KiB
JavaScript

import React, { useEffect, useState } from 'react';
import { Switch, Route, useHistory, useLocation } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import Unlock from '../unlock-page';
import {
///: BEGIN:ONLY_INCLUDE_IN(flask)
ONBOARDING_EXPERIMENTAL_AREA,
///: END:ONLY_INCLUDE_IN
ONBOARDING_CREATE_PASSWORD_ROUTE,
ONBOARDING_REVIEW_SRP_ROUTE,
ONBOARDING_CONFIRM_SRP_ROUTE,
ONBOARDING_UNLOCK_ROUTE,
ONBOARDING_WELCOME_ROUTE,
DEFAULT_ROUTE,
ONBOARDING_SECURE_YOUR_WALLET_ROUTE,
ONBOARDING_PRIVACY_SETTINGS_ROUTE,
ONBOARDING_COMPLETION_ROUTE,
ONBOARDING_IMPORT_WITH_SRP_ROUTE,
ONBOARDING_PIN_EXTENSION_ROUTE,
ONBOARDING_METAMETRICS,
} from '../../helpers/constants/routes';
import {
getCompletedOnboarding,
getSeedPhraseBackedUp,
} from '../../ducks/metamask/metamask';
import {
createNewVaultAndGetSeedPhrase,
unlockAndGetSeedPhrase,
createNewVaultAndRestore,
} from '../../store/actions';
import { getFirstTimeFlowTypeRoute } from '../../selectors';
import Button from '../../components/ui/button';
import { useI18nContext } from '../../hooks/useI18nContext';
///: BEGIN:ONLY_INCLUDE_IN(flask)
import ExperimentalArea from '../../components/app/flask/experimental-area';
///: END:ONLY_INCLUDE_IN
import OnboardingFlowSwitch from './onboarding-flow-switch/onboarding-flow-switch';
import CreatePassword from './create-password/create-password';
import ReviewRecoveryPhrase from './recovery-phrase/review-recovery-phrase';
import SecureYourWallet from './secure-your-wallet/secure-your-wallet';
import ConfirmRecoveryPhrase from './recovery-phrase/confirm-recovery-phrase';
import PrivacySettings from './privacy-settings/privacy-settings';
import CreationSuccessful from './creation-successful/creation-successful';
import OnboardingWelcome from './welcome/welcome';
import ImportSRP from './import-srp/import-srp';
import OnboardingPinExtension from './pin-extension/pin-extension';
import MetaMetricsComponent from './metametrics/metametrics';
export default function OnboardingFlow() {
const [secretRecoveryPhrase, setSecretRecoveryPhrase] = useState('');
const dispatch = useDispatch();
const currentLocation = useLocation();
const history = useHistory();
const t = useI18nContext();
const completedOnboarding = useSelector(getCompletedOnboarding);
const seedPhraseBackedUp = useSelector(getSeedPhraseBackedUp);
const nextRoute = useSelector(getFirstTimeFlowTypeRoute);
useEffect(() => {
if (completedOnboarding && seedPhraseBackedUp) {
history.push(DEFAULT_ROUTE);
}
}, [history, completedOnboarding, seedPhraseBackedUp]);
const handleCreateNewAccount = async (password) => {
const newSecretRecoveryPhrase = await dispatch(
createNewVaultAndGetSeedPhrase(password),
);
setSecretRecoveryPhrase(newSecretRecoveryPhrase);
};
const handleUnlock = async (password) => {
const retrievedSecretRecoveryPhrase = await dispatch(
unlockAndGetSeedPhrase(password),
);
setSecretRecoveryPhrase(retrievedSecretRecoveryPhrase);
history.push(nextRoute);
};
const handleImportWithRecoveryPhrase = async (password, srp) => {
return await dispatch(createNewVaultAndRestore(password, srp));
};
return (
<div className="onboarding-flow">
<div className="onboarding-flow__wrapper">
<Switch>
<Route
path={ONBOARDING_CREATE_PASSWORD_ROUTE}
render={(routeProps) => (
<CreatePassword
{...routeProps}
createNewAccount={handleCreateNewAccount}
importWithRecoveryPhrase={handleImportWithRecoveryPhrase}
secretRecoveryPhrase={secretRecoveryPhrase}
/>
)}
/>
<Route
exact
path={ONBOARDING_SECURE_YOUR_WALLET_ROUTE}
component={SecureYourWallet}
/>
<Route
path={ONBOARDING_REVIEW_SRP_ROUTE}
render={() => (
<ReviewRecoveryPhrase
secretRecoveryPhrase={secretRecoveryPhrase}
/>
)}
/>
<Route
path={ONBOARDING_CONFIRM_SRP_ROUTE}
render={() => (
<ConfirmRecoveryPhrase
secretRecoveryPhrase={secretRecoveryPhrase}
/>
)}
/>
<Route
path={ONBOARDING_IMPORT_WITH_SRP_ROUTE}
render={(routeProps) => (
<ImportSRP
{...routeProps}
submitSecretRecoveryPhrase={setSecretRecoveryPhrase}
/>
)}
/>
<Route
path={ONBOARDING_UNLOCK_ROUTE}
render={(routeProps) => (
<Unlock {...routeProps} onSubmit={handleUnlock} />
)}
/>
<Route
path={ONBOARDING_PRIVACY_SETTINGS_ROUTE}
component={PrivacySettings}
/>
<Route
path={ONBOARDING_COMPLETION_ROUTE}
component={CreationSuccessful}
/>
<Route
path={ONBOARDING_WELCOME_ROUTE}
component={OnboardingWelcome}
/>
<Route
path={ONBOARDING_PIN_EXTENSION_ROUTE}
component={OnboardingPinExtension}
/>
<Route
path={ONBOARDING_METAMETRICS}
component={MetaMetricsComponent}
/>
{
///: BEGIN:ONLY_INCLUDE_IN(flask)
}
<Route
path={ONBOARDING_EXPERIMENTAL_AREA}
render={(routeProps) => (
<ExperimentalArea
{...routeProps}
redirectTo={ONBOARDING_WELCOME_ROUTE}
/>
)}
/>
{
///: END:ONLY_INCLUDE_IN
}
<Route exact path="*" component={OnboardingFlowSwitch} />
</Switch>
</div>
{currentLocation?.pathname === ONBOARDING_COMPLETION_ROUTE && (
<Button
className="onboarding-flow__twitter-button"
type="link"
href="https://twitter.com/MetaMask"
target="_blank"
>
<span>{t('followUsOnTwitter')}</span>
<i className="fab fa-twitter onboarding-flow__twitter-button__icon" />
</Button>
)}
</div>
);
}