add setting to dismiss seed phrase backup reminder (#10967)

app/_locales/en/messages.json

@@ -556,6 +556,12 @@
   "dismiss": {
     "message": "Dismiss"
   },
+  "dismissReminderDescriptionField": {
+    "message": "Turn this on to dismiss the recovery phrase backup reminder message. We highly recommend that you back up your seed phrase to avoid loss of funds"
+  },
+  "dismissReminderField": {
+    "message": "Dismiss recovery phrase backup reminder"
+  },
   "done": {
     "message": "Done"
   },

app/scripts/controllers/preferences.js

@@ -43,6 +43,7 @@ export default class PreferencesController {
       useBlockie: false,
       useNonceField: false,
       usePhishDetect: true,
+      dismissSeedBackUpReminder: false,
 
       // WARNING: Do not use feature flags for security-sensitive things.
       // Feature flag toggling is available in the global namespace
@@ -669,7 +670,7 @@ export default class PreferencesController {
 
   /**
    * A setter for the `useLedgerLive` property
-   * @param {bool} domain - Value for ledger live support
+   * @param {bool} useLedgerLive - Value for ledger live support
    * @returns {Promise<string>} A promise of the update to useLedgerLive
    */
   async setLedgerLivePreference(useLedgerLive) {
@@ -685,6 +686,17 @@ export default class PreferencesController {
     return this.store.getState().useLedgerLive;
   }
 
+  /**
+   * A setter for the user preference to dismiss the seed phrase backup reminder
+   * @param {bool} dismissBackupReminder- User preference for dismissing the back up reminder
+   * @returns {void}
+   */
+  async setDismissSeedBackUpReminder(dismissSeedBackUpReminder) {
+    await this.store.updateState({
+      dismissSeedBackUpReminder,
+    });
+  }
+
   //
   // PRIVATE METHODS
   //

app/scripts/metamask-controller.js

@@ -735,6 +735,10 @@ export default class MetamaskController extends EventEmitter {
         preferencesController.addKnownMethodData,
         preferencesController,
       ),
+      setDismissSeedBackUpReminder: nodeify(
+        this.preferencesController.setDismissSeedBackUpReminder,
+        this.preferencesController,
+      ),
 
       // AddressController
       setAddressBook: nodeify(

ui/pages/home/home.container.js

@@ -52,6 +52,7 @@ const mapStateToProps = (state) => {
     connectedStatusPopoverHasBeenShown,
     defaultHomeActiveTabName,
     swapsState,
+    dismissSeedBackUpReminder,
   } = metamask;
   const accountBalance = getCurrentEthBalance(state);
   const { forgottenPassword, threeBoxLastUpdated } = appState;
@@ -84,7 +85,8 @@ const mapStateToProps = (state) => {
     unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state),
     shouldShowSeedPhraseReminder:
       seedPhraseBackedUp === false &&
-      (parseInt(accountBalance, 16) > 0 || tokens.length > 0),
+      (parseInt(accountBalance, 16) > 0 || tokens.length > 0) &&
+      dismissSeedBackUpReminder === false,
     isPopup,
     isNotification,
     threeBoxSynced,

ui/pages/settings/advanced-tab/advanced-tab.component.js

@@ -38,6 +38,8 @@ export default class AdvancedTab extends PureComponent {
     ipfsGateway: PropTypes.string.isRequired,
     useLedgerLive: PropTypes.bool.isRequired,
     setLedgerLivePreference: PropTypes.func.isRequired,
+    setDismissSeedBackUpReminder: PropTypes.func.isRequired,
+    dismissSeedBackUpReminder: PropTypes.bool.isRequired,
   };
 
   state = {
@@ -258,7 +260,7 @@ export default class AdvancedTab extends PureComponent {
         data-testid="advanced-setting-custom-nonce"
       >
         <div className="settings-page__content-item">
-          <span>{this.context.t('nonceField')}</span>
+          <span>{t('nonceField')}</span>
           <div className="settings-page__content-description">
             {t('nonceFieldDescription')}
           </div>
@@ -494,6 +496,38 @@ export default class AdvancedTab extends PureComponent {
     );
   }
 
+  renderDismissSeedBackupReminderControl() {
+    const { t } = this.context;
+    const {
+      dismissSeedBackUpReminder,
+      setDismissSeedBackUpReminder,
+    } = this.props;
+
+    return (
+      <div
+        className="settings-page__content-row"
+        data-testid="advanced-setting-dismiss-reminder"
+      >
+        <div className="settings-page__content-item">
+          <span>{t('dismissReminderField')}</span>
+          <div className="settings-page__content-description">
+            {t('dismissReminderDescriptionField')}
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={dismissSeedBackUpReminder}
+              onToggle={(value) => setDismissSeedBackUpReminder(!value)}
+              offLabel={t('off')}
+              onLabel={t('on')}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   render() {
     const { warning } = this.props;
 
@@ -511,6 +545,7 @@ export default class AdvancedTab extends PureComponent {
         {this.renderThreeBoxControl()}
         {this.renderIpfsGatewayControl()}
         {this.renderLedgerLiveControl()}
+        {this.renderDismissSeedBackupReminderControl()}
       </div>
     );
   }

ui/pages/settings/advanced-tab/advanced-tab.component.test.js

@@ -23,7 +23,7 @@ describe('AdvancedTab Component', () => {
       },
     );
 
-    expect(root.find('.settings-page__content-row')).toHaveLength(11);
+    expect(root.find('.settings-page__content-row')).toHaveLength(12);
   });
 
   it('should update autoLockTimeLimit', () => {

ui/pages/settings/advanced-tab/advanced-tab.container.js

@@ -12,6 +12,7 @@ import {
   setUseNonceField,
   setIpfsGateway,
   setLedgerLivePreference,
+  setDismissSeedBackUpReminder,
 } from '../../../store/actions';
 import { getPreferences } from '../../../selectors';
 import AdvancedTab from './advanced-tab.component';
@@ -28,6 +29,7 @@ export const mapStateToProps = (state) => {
     useNonceField,
     ipfsGateway,
     useLedgerLive,
+    dismissSeedBackUpReminder,
   } = metamask;
   const { showFiatInTestnets, autoLockTimeLimit } = getPreferences(state);
 
@@ -42,6 +44,7 @@ export const mapStateToProps = (state) => {
     useNonceField,
     ipfsGateway,
     useLedgerLive,
+    dismissSeedBackUpReminder,
   };
 };
 
@@ -71,8 +74,12 @@ export const mapDispatchToProps = (dispatch) => {
     setIpfsGateway: (value) => {
       return dispatch(setIpfsGateway(value));
     },
-    setLedgerLivePreference: (value) =>
+    setLedgerLivePreference: (value) => {
-      dispatch(setLedgerLivePreference(value)),
+      return dispatch(setLedgerLivePreference(value));
+    },
+    setDismissSeedBackUpReminder: (value) => {
+      return dispatch(setDismissSeedBackUpReminder(value));
+    },
   };
 };
 

ui/store/actionConstants.js

@@ -72,6 +72,7 @@ export const BUY_ETH = 'BUY_ETH';
 
 export const TOGGLE_ACCOUNT_MENU = 'TOGGLE_ACCOUNT_MENU';
 
+// preferences
 export const SET_USE_BLOCKIE = 'SET_USE_BLOCKIE';
 export const SET_USE_NONCEFIELD = 'SET_USE_NONCEFIELD';
 export const UPDATE_CUSTOM_NONCE = 'UPDATE_CUSTOM_NONCE';

ui/store/actions.js

@@ -2561,6 +2561,14 @@ export function setLastActiveTime() {
   };
 }
 
+export function setDismissSeedBackUpReminder(value) {
+  return async (dispatch) => {
+    dispatch(showLoadingIndication());
+    await promisifiedBackground.setDismissSeedBackUpReminder(value);
+    dispatch(hideLoadingIndication());
+  };
+}
+
 export function setConnectedStatusPopoverHasBeenShown() {
   return () => {
     background.setConnectedStatusPopoverHasBeenShown((err) => {