Fix #16959 - Don't allow user to see welcome or password creation screen after a keyring has been created (#17024)

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';
@@ -28,7 +28,7 @@ import {
 } from '../../../components/app/step-progress-bar';
 import { PASSWORD_MIN_LENGTH } from '../../../helpers/constants/common';
 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';
@@ -50,6 +50,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) {

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 (
     <div className="import-srp" data-testid="import-srp">

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);

ui/pages/onboarding-flow/welcome/welcome.js

@@ -1,6 +1,6 @@
 import EventEmitter from 'events';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
+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'));