From c2ffac6e31f42c6936d1475db81f8cc2c053e460 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Mon, 9 Jan 2023 14:55:48 -0600 Subject: [PATCH] Fix #16959 - Don't allow user to see welcome or password creation screen after a keyring has been created (#17024) --- .../create-password/create-password.js | 15 +++++++++-- .../onboarding-flow/import-srp/import-srp.js | 11 +++++++- .../onboarding-flow/onboarding-flow.test.js | 4 ++- ui/pages/onboarding-flow/welcome/welcome.js | 26 ++++++++++++++++--- 4 files changed, 49 insertions(+), 7 deletions(-) diff --git a/ui/pages/onboarding-flow/create-password/create-password.js b/ui/pages/onboarding-flow/create-password/create-password.js index 369d45ead..07905d8ec 100644 --- a/ui/pages/onboarding-flow/create-password/create-password.js +++ b/ui/pages/onboarding-flow/create-password/create-password.js @@ -1,4 +1,4 @@ -import React, { useState, useMemo, useContext } from 'react'; +import React, { useState, useMemo, useContext, useEffect } from 'react'; import PropTypes from 'prop-types'; import { useHistory } from 'react-router-dom'; import zxcvbn from 'zxcvbn'; @@ -27,7 +27,7 @@ import { twoStepStages, } from '../../../components/app/step-progress-bar'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; -import { getFirstTimeFlowType } from '../../../selectors'; +import { getFirstTimeFlowType, getCurrentKeyring } from '../../../selectors'; import { FIRST_TIME_FLOW_TYPES } from '../../../helpers/constants/onboarding'; import { MetaMetricsContext } from '../../../contexts/metametrics'; import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics'; @@ -49,6 +49,17 @@ export default function CreatePassword({ const history = useHistory(); const firstTimeFlowType = useSelector(getFirstTimeFlowType); const trackEvent = useContext(MetaMetricsContext); + const currentKeyring = useSelector(getCurrentKeyring); + + useEffect(() => { + if (currentKeyring) { + if (firstTimeFlowType === FIRST_TIME_FLOW_TYPES.IMPORT) { + history.replace(ONBOARDING_COMPLETION_ROUTE); + } else { + history.replace(ONBOARDING_SECURE_YOUR_WALLET_ROUTE); + } + } + }, [currentKeyring, history, firstTimeFlowType]); const isValid = useMemo(() => { if (!password || !confirmPassword || password !== confirmPassword) { diff --git a/ui/pages/onboarding-flow/import-srp/import-srp.js b/ui/pages/onboarding-flow/import-srp/import-srp.js index 0c2563729..c7738adb0 100644 --- a/ui/pages/onboarding-flow/import-srp/import-srp.js +++ b/ui/pages/onboarding-flow/import-srp/import-srp.js @@ -1,5 +1,6 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { useHistory } from 'react-router-dom'; +import { useSelector } from 'react-redux'; import PropTypes from 'prop-types'; import { TwoStepProgressBar, @@ -17,11 +18,19 @@ import { ONBOARDING_CREATE_PASSWORD_ROUTE } from '../../../helpers/constants/rou import { useI18nContext } from '../../../hooks/useI18nContext'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; import SrpInput from '../../../components/app/srp-input'; +import { getCurrentKeyring } from '../../../selectors'; export default function ImportSRP({ submitSecretRecoveryPhrase }) { const [secretRecoveryPhrase, setSecretRecoveryPhrase] = useState(''); const history = useHistory(); const t = useI18nContext(); + const currentKeyring = useSelector(getCurrentKeyring); + + useEffect(() => { + if (currentKeyring) { + history.replace(ONBOARDING_CREATE_PASSWORD_ROUTE); + } + }, [currentKeyring, history]); return (
diff --git a/ui/pages/onboarding-flow/onboarding-flow.test.js b/ui/pages/onboarding-flow/onboarding-flow.test.js index 9d407e340..1ff71f1c6 100644 --- a/ui/pages/onboarding-flow/onboarding-flow.test.js +++ b/ui/pages/onboarding-flow/onboarding-flow.test.js @@ -34,7 +34,9 @@ jest.mock('../../store/actions', () => ({ describe('Onboarding Flow', () => { const mockState = { - metamask: {}, + metamask: { + identities: {}, + }, }; const store = configureMockStore()(mockState); diff --git a/ui/pages/onboarding-flow/welcome/welcome.js b/ui/pages/onboarding-flow/welcome/welcome.js index 1ee113dcb..a8a974748 100644 --- a/ui/pages/onboarding-flow/welcome/welcome.js +++ b/ui/pages/onboarding-flow/welcome/welcome.js @@ -1,6 +1,6 @@ import EventEmitter from 'events'; -import React, { useState } from 'react'; -import { useDispatch } from 'react-redux'; +import React, { useState, useEffect } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { Carousel } from 'react-responsive-carousel'; import Mascot from '../../../components/ui/mascot'; @@ -13,13 +13,33 @@ import { } from '../../../helpers/constants/design-system'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { setFirstTimeFlowType } from '../../../store/actions'; -import { ONBOARDING_METAMETRICS } from '../../../helpers/constants/routes'; +import { + ONBOARDING_METAMETRICS, + ONBOARDING_SECURE_YOUR_WALLET_ROUTE, + ONBOARDING_COMPLETION_ROUTE, +} from '../../../helpers/constants/routes'; +import { FIRST_TIME_FLOW_TYPES } from '../../../helpers/constants/onboarding'; +import { getFirstTimeFlowType, getCurrentKeyring } from '../../../selectors'; export default function OnboardingWelcome() { const t = useI18nContext(); const dispatch = useDispatch(); const history = useHistory(); const [eventEmitter] = useState(new EventEmitter()); + const currentKeyring = useSelector(getCurrentKeyring); + const firstTimeFlowType = useSelector(getFirstTimeFlowType); + + // Don't allow users to come back to this screen after they + // have already imported or created a wallet + useEffect(() => { + if (currentKeyring) { + if (firstTimeFlowType === FIRST_TIME_FLOW_TYPES.IMPORT) { + history.replace(ONBOARDING_COMPLETION_ROUTE); + } else { + history.replace(ONBOARDING_SECURE_YOUR_WALLET_ROUTE); + } + } + }, [currentKeyring, history, firstTimeFlowType]); const onCreateClick = () => { dispatch(setFirstTimeFlowType('create'));