mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
70386726f6
* 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>
202 lines
6.5 KiB
JavaScript
202 lines
6.5 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,
|
|
getIsInitialized,
|
|
getIsUnlocked,
|
|
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 isInitialized = useSelector(getIsInitialized);
|
|
const isUnlocked = useSelector(getIsUnlocked);
|
|
const completedOnboarding = useSelector(getCompletedOnboarding);
|
|
const seedPhraseBackedUp = useSelector(getSeedPhraseBackedUp);
|
|
const nextRoute = useSelector(getFirstTimeFlowTypeRoute);
|
|
|
|
useEffect(() => {
|
|
if (completedOnboarding && seedPhraseBackedUp) {
|
|
history.push(DEFAULT_ROUTE);
|
|
return;
|
|
}
|
|
|
|
if (isInitialized && !isUnlocked) {
|
|
history.push(ONBOARDING_UNLOCK_ROUTE);
|
|
}
|
|
}, [
|
|
history,
|
|
completedOnboarding,
|
|
isInitialized,
|
|
isUnlocked,
|
|
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>
|
|
<img src="images/twitter-icon.png" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|