fix: Disable accounts dropdown on onboarding/recovery pages

packages/frontend/src/components/Routing.js

@@ -18,6 +18,7 @@ import { Mixpanel } from '../mixpanel/index';
 import * as accountActions from '../redux/actions/account';
 import { handleClearAlert } from '../redux/reducers/status';
 import { selectAccountSlice } from '../redux/slices/account';
+import { actions as flowLimitationActions } from '../redux/slices/flowLimitation';
 import { actions as tokenFiatValueActions } from '../redux/slices/tokenFiatValues';
 import { CreateImplicitAccountWrapper } from '../routes/CreateImplicitAccountWrapper';
 import { ImportAccountWithLinkWrapper } from '../routes/ImportAccountWithLinkWrapper';
@@ -97,6 +98,8 @@ const {
     refreshAccount
 } = accountActions;
 
+const { handleFlowLimitation } = flowLimitationActions;
+
 const theme = {};
 
 const PATH_PREFIX = PUBLIC_URL;
@@ -176,36 +179,43 @@ class Routing extends Component {
 
         this.props.setActiveLanguage(activeLang);
         // this.addTranslationsForActiveLanguage(defaultLanguage)
-    }
 
-    componentDidMount = async () => {
         const {
             refreshAccount,
-            handleRefreshUrl,
             history,
             handleRedirectUrl,
             handleClearUrl,
-            router,
-            fetchTokenFiatValues,
-            handleClearAlert
+            handleClearAlert,
+            handleFlowLimitation,
+            router
         } = this.props;
 
-        fetchTokenFiatValues();
-        this.startPollingTokenFiatValue();
-        handleRefreshUrl(router);
-        refreshAccount();
-
-        history.listen(async () => {
-            handleRedirectUrl(this.props.router.location);
+        history.listen(async (location) => {
+            handleRedirectUrl(router.location);
             handleClearUrl();
-            if (!WALLET_CREATE_NEW_ACCOUNT_FLOW_URLS.find((path) => this.props.router.location.pathname.indexOf(path) > -1)) {
+            handleFlowLimitation();
+            if (!WALLET_CREATE_NEW_ACCOUNT_FLOW_URLS.find((path) => router.location.pathname.indexOf(path) > -1)) {
                 await refreshAccount(true);
             }
 
             handleClearAlert();
         });
     }
 
+    componentDidMount = async () => {
+        const {
+            refreshAccount,
+            handleRefreshUrl,
+            router,
+            fetchTokenFiatValues,
+        } = this.props;
+
+        fetchTokenFiatValues();
+        this.startPollingTokenFiatValue();
+        handleRefreshUrl(router);
+        refreshAccount();
+    }
+
     componentDidUpdate(prevProps) {
         const { activeLanguage } = this.props;
 
@@ -574,7 +584,8 @@ const mapDispatchToProps = {
     promptTwoFactor,
     redirectTo,
     fetchTokenFiatValues,
-    handleClearAlert
+    handleClearAlert,
+    handleFlowLimitation
 };
 
 const mapStateToProps = (state) => ({

packages/frontend/src/components/accounts/SetupSeedPhrase.js

@@ -21,7 +21,6 @@ import { selectStatusMainLoader } from '../../redux/slices/status';
 import copyText from '../../utils/copyText';
 import isMobile from '../../utils/isMobile';
 import parseFundingOptions from '../../utils/parseFundingOptions';
-import { wallet } from '../../utils/wallet';
 import { Snackbar, snackbarDuration } from '../common/Snackbar';
 import Container from '../common/styled/Container.css';
 import { isRetryableRecaptchaError } from '../Recaptcha';
@@ -54,32 +53,13 @@ class SetupSeedPhrase extends Component {
         this.refreshData();
     }
 
-    componentDidUpdate = async (prevProps) => {
-        const {
-            accountId,
-            walletAccountId,
-            checkIsNew,
-            history,
-            location
-        } = this.props;
-        if (prevProps.walletAccountId !== walletAccountId) {
-            const isNewAccount = await checkIsNew(accountId);
-            if (!isNewAccount) {
-                // Reset seed phrase setup flow if the active account changes and it's not a new account being setup
-                history.push(`/setup-seed-phrase/${walletAccountId}/phrase${location.search}`);
-                this.refreshData();
-            }
-        }
-    }
-
     refreshData = async () => {
         const { accountId, fetchRecoveryMethods, checkIsNew } = this.props;
         const { seedPhrase, publicKey, secretKey } = generateSeedPhrase();
         const recoveryKeyPair = KeyPair.fromString(secretKey);
         const wordId = Math.floor(Math.random() * 12);
 
         const isNewAccount = await checkIsNew(accountId);
-        this.setState({ isNewAccount });
 
         if (!isNewAccount) {
             fetchRecoveryMethods({ accountId });
@@ -92,7 +72,8 @@ class SetupSeedPhrase extends Component {
             wordId,
             enterWord: '',
             localAlert: null,
-            recoveryKeyPair
+            recoveryKeyPair,
+            isNewAccount
         }));
     }
 
@@ -252,6 +233,13 @@ class SetupSeedPhrase extends Component {
                                         hasSeedPhraseRecovery={hasSeedPhraseRecovery}
                                         refreshData={this.refreshData}
                                         onClickContinue={() => history.push(`/setup-seed-phrase/${accountId}/verify${location.search}`)}
+                                        onClickCancel={() => {
+                                            if (isNewAccount) {
+                                                history.push(`/set-recovery/${accountId}${location.search}`);
+                                            } else {
+                                                history.push('/profile');
+                                            }
+                                        }}
                                     />
                                 </Container>
                             )}
@@ -316,7 +304,6 @@ const mapStateToProps = (state, { match }) => {
 
     return {
         ...selectAccountSlice(state),
-        walletAccountId: wallet.accountId,
         accountId,
         recoveryMethods: selectRecoveryMethodsByAccountId(state, { accountId }),
         mainLoader: selectStatusMainLoader(state),

packages/frontend/src/components/accounts/SetupSeedPhraseForm.js

@@ -46,6 +46,11 @@ const CustomDiv = styled('div')`
         > button {
             width: 100%;
             margin-top: 45px;
+
+            &.link {
+                margin: 30px auto 0 auto;
+                display: inherit;
+            }
         }
     }
     #seed-phrase {
@@ -83,6 +88,7 @@ const SetupSeedPhraseForm = ({
     seedPhrase,
     refreshData,
     onClickContinue,
+    onClickCancel,
     hasSeedPhraseRecovery = false
 }) => {
 
@@ -126,6 +132,13 @@ const SetupSeedPhraseForm = ({
             >
                 <Translate id='button.continue' />
             </FormButton>
+            <FormButton
+                onClick={onClickCancel}
+                className='link'
+                color='gray'
+            >
+                <Translate id='button.cancel' />
+            </FormButton>
         </CustomDiv>
     );
 };

packages/frontend/src/components/accounts/ledger/SetupLedger.js

@@ -179,7 +179,7 @@ const SetupLedger = (props) => {
                 <Translate id={`button.${connect !== 'fail' ? 'continue' : 'retry'}`} />
             </FormButton>
             <FormButton
-                className='link red'
+                className='link gray'
                 onClick={() => props.history.goBack()}
                 trackingId='SR-Ledger Click cancel button'
             >

packages/frontend/src/components/common/styled/Container.css.js

@@ -96,7 +96,7 @@ const Container = styled.div`
             }
 
             &.link {
-                &.red {
+                &.gray {
                     margin-top: 25px !important;
                 }
             }

packages/frontend/src/redux/slices/flowLimitation/index.js

@@ -4,7 +4,8 @@ import assign from 'lodash.assign';
 import { 
     WALLET_INITIAL_DEPOSIT_URL,
     WALLET_LOGIN_URL,
-    WALLET_SIGN_URL
+    WALLET_SIGN_URL,
+    WALLET_CREATE_NEW_ACCOUNT_FLOW_URLS
 } from '../../../utils/wallet';
 import { getBalance } from '../../actions/account';
 
@@ -55,6 +56,13 @@ const handleFlowLimitation = createAsyncThunk(
                 accountBalance: false
             }));
         }
+
+        if (WALLET_CREATE_NEW_ACCOUNT_FLOW_URLS.some((url) => pathname.includes(url))) {
+            // Disallow account switching on account creation/recovery pages
+            dispatch(setFlowLimitation({ subMenu: true }));
+        } else {
+            dispatch(setFlowLimitation({ subMenu: false }));
+        }
     }
 );