Ensure the seed phrase reminder is displayed with precedence over the network deprecation warning (#15869)

* Ensure the seed phrase reminder is displayed with precedence over the network deprecation message

* Prevent error when attempting to get balance before account info has been fully sete

* Fix implementation of seedphrase-reminder-display-fix

* Prioritize seed phrase reminder notification over portfolio tooltip, and that tooltip over testnet deprecation

ui/pages/home/home.component.js

@@ -612,6 +612,7 @@ export default class Home extends PureComponent {
       showRecoveryPhraseReminder,
       firstTimeFlowType,
       completedOnboarding,
+      shouldShowSeedPhraseReminder,
     } = this.props;
 
     if (forgottenPassword) {
@@ -658,7 +659,11 @@ export default class Home extends PureComponent {
               subHeader={
                 <Tooltip
                   position="bottom"
-                  open={!process.env.IN_TEST && showPortfolioTooltip}
+                  open={
+                    !process.env.IN_TEST &&
+                    !shouldShowSeedPhraseReminder &&
+                    showPortfolioTooltip
+                  }
                   interactive
                   theme="home__subheader-link--tooltip"
                   html={

ui/pages/home/home.container.js

@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import {
   activeTabHasPermissions,
-  getCurrentEthBalance,
   getFirstPermissionRequest,
   ///: BEGIN:ONLY_INCLUDE_IN(flask)
   getFirstSnapUpdateRequest,
@@ -24,6 +23,7 @@ import {
   getNewCollectibleAddedMessage,
   getNewTokensImported,
   getShowPortfolioTooltip,
+  getShouldShowSeedPhraseReminder,
 } from '../../selectors';
 
 import {
@@ -72,18 +72,15 @@ const mapStateToProps = (state) => {
   const {
     suggestedAssets,
     seedPhraseBackedUp,
-    tokens,
     threeBoxSynced,
     showRestorePrompt,
     selectedAddress,
     connectedStatusPopoverHasBeenShown,
     defaultHomeActiveTabName,
     swapsState,
-    dismissSeedBackUpReminder,
     firstTimeFlowType,
     completedOnboarding,
   } = metamask;
-  const accountBalance = getCurrentEthBalance(state);
   const { forgottenPassword, threeBoxLastUpdated } = appState;
   const totalUnapprovedCount = getTotalUnapprovedCount(state);
   const swapsEnabled = getSwapsFeatureIsLive(state);
@@ -123,10 +120,7 @@ const mapStateToProps = (state) => {
     suggestedAssets,
     swapsEnabled,
     unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state),
-    shouldShowSeedPhraseReminder:
+    shouldShowSeedPhraseReminder: getShouldShowSeedPhraseReminder(state),
-      seedPhraseBackedUp === false &&
-      (parseInt(accountBalance, 16) > 0 || tokens.length > 0) &&
-      dismissSeedBackUpReminder === false,
     isPopup,
     isNotification,
     threeBoxSynced,

ui/pages/routes/routes.component.js

@@ -110,6 +110,8 @@ export default class Routes extends Component {
     allAccountsOnNetworkAreEmpty: PropTypes.bool,
     isTestNet: PropTypes.bool,
     currentChainId: PropTypes.string,
+    shouldShowSeedPhraseReminder: PropTypes.bool,
+    portfolioTooltipIsBeingShown: PropTypes.bool,
   };
 
   static contextTypes = {
@@ -368,6 +370,8 @@ export default class Routes extends Component {
       allAccountsOnNetworkAreEmpty,
       isTestNet,
       currentChainId,
+      shouldShowSeedPhraseReminder,
+      portfolioTooltipIsBeingShown,
     } = this.props;
     const loadMessage =
       loadingMessage || isNetworkLoading
@@ -383,6 +387,12 @@ export default class Routes extends Component {
 
     const windowType = getEnvironmentType();
 
+    const shouldShowNetworkDeprecationWarning =
+      windowType !== ENVIRONMENT_TYPE_NOTIFICATION &&
+      isUnlocked &&
+      !shouldShowSeedPhraseReminder &&
+      !portfolioTooltipIsBeingShown;
+
     return (
       <div
         className={classnames('app', {
@@ -398,9 +408,7 @@ export default class Routes extends Component {
           }
         }}
       >
-        {windowType !== ENVIRONMENT_TYPE_NOTIFICATION && isUnlocked && (
+        {shouldShowNetworkDeprecationWarning && <DeprecatedTestNetworks />}
-          <DeprecatedTestNetworks />
-        )}
         {shouldShowNetworkInfo && <NewNetworkInfo />}
         <QRHardwarePopover />
         <Modal />

ui/pages/routes/routes.container.js

@@ -10,6 +10,8 @@ import {
   getTheme,
   getIsTestnet,
   getCurrentChainId,
+  getShouldShowSeedPhraseReminder,
+  getShowPortfolioTooltip,
 } from '../../selectors';
 import {
   lockMetamask,
@@ -48,6 +50,8 @@ function mapStateToProps(state) {
     allAccountsOnNetworkAreEmpty: getAllAccountsOnNetworkAreEmpty(state),
     isTestNet: getIsTestnet(state),
     currentChainId: getCurrentChainId(state),
+    shouldShowSeedPhraseReminder: getShouldShowSeedPhraseReminder(state),
+    portfolioTooltipIsBeingShown: getShowPortfolioTooltip(state),
   };
 }
 

ui/selectors/selectors.js

@@ -442,7 +442,7 @@ export function getTargetAccountWithSendEtherInfo(state, targetAddress) {
 }
 
 export function getCurrentEthBalance(state) {
-  return getCurrentAccountWithSendEtherInfo(state).balance;
+  return getCurrentAccountWithSendEtherInfo(state)?.balance;
 }
 
 export function getGasIsLoading(state) {
@@ -1209,3 +1209,14 @@ export function getAllAccountsOnNetworkAreEmpty(state) {
 
   return hasNoNativeFundsOnAnyAccounts && hasNoTokens;
 }
+
+export function getShouldShowSeedPhraseReminder(state) {
+  const { tokens, seedPhraseBackedUp, dismissSeedBackUpReminder } =
+    state.metamask;
+  const accountBalance = getCurrentEthBalance(state) ?? 0;
+  return (
+    seedPhraseBackedUp === false &&
+    (parseInt(accountBalance, 16) > 0 || tokens.length > 0) &&
+    dismissSeedBackUpReminder === false
+  );
+}