add and hook up setting to toggle on/off collectible autodetection (#12839)

app/_locales/en/messages.json

@@ -3148,6 +3148,12 @@
   "urlExistsErrorMsg": {
     "message": "This URL is currently used by the $1 network."
   },
+  "useCollectibleDetection": {
+    "message": "Autodetect NFTs"
+  },
+  "useCollectibleDetectionDescription": {
+    "message": "Displaying NFTs media & data may expose your IP address to centralized servers. Third-party APIs (like OpenSea) are used to detect NFTs in your wallet. This exposes your account address with those services. Leave this disabled if you don’t want the app to pull data from those those services."
+  },
   "usePhishingDetection": {
     "message": "Use Phishing Detection"
   },

app/scripts/controllers/preferences.js

@@ -37,6 +37,7 @@ export default class PreferencesController {
       // set to true means the dynamic list from the API is being used
       // set to false will be using the static list from contract-metadata
       useTokenDetection: false,
+      useCollectibleDetection: false,
       advancedGasFee: null,
 
       // WARNING: Do not use feature flags for security-sensitive things.
@@ -130,6 +131,16 @@ export default class PreferencesController {
     this.store.updateState({ useTokenDetection: val });
   }
 
+  /**
+   * Setter for the `useCollectibleDetection` property
+   *
+   * @param {boolean} val - Whether or not the user prefers to autodetect collectibles.
+   *
+   */
+  setUseCollectibleDetection(val) {
+    this.store.updateState({ useCollectibleDetection: val });
+  }
+
   /**
    * Setter for the `advancedGasFee` property
    *

app/scripts/controllers/preferences.test.js

@@ -267,6 +267,25 @@ describe('preferences controller', function () {
     });
   });
 
+  describe('setUseCollectibleDetection', function () {
+    it('should default to false', function () {
+      const state = preferencesController.store.getState();
+      assert.equal(state.useCollectibleDetection, false);
+    });
+
+    it('should set the useCollectibleDetection property in state', function () {
+      assert.equal(
+        preferencesController.store.getState().useCollectibleDetection,
+        false,
+      );
+      preferencesController.setUseCollectibleDetection(true);
+      assert.equal(
+        preferencesController.store.getState().useCollectibleDetection,
+        true,
+      );
+    });
+  });
+
   describe('setAdvancedGasFee', function () {
     it('should default to null', function () {
       const state = preferencesController.store.getState();

app/scripts/metamask-controller.js

@@ -909,6 +909,10 @@ export default class MetamaskController extends EventEmitter {
         this.preferencesController.setUseTokenDetection,
         this.preferencesController,
       ),
+      setUseCollectibleDetection: nodeify(
+        this.preferencesController.setUseCollectibleDetection,
+        this.preferencesController,
+      ),
       setIpfsGateway: this.setIpfsGateway.bind(this),
       setParticipateInMetaMetrics: this.setParticipateInMetaMetrics.bind(this),
       setCurrentLocale: this.setCurrentLocale.bind(this),

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

@@ -11,6 +11,8 @@ export default class ExperimentalTab extends PureComponent {
   static propTypes = {
     useTokenDetection: PropTypes.bool,
     setUseTokenDetection: PropTypes.func,
+    useCollectibleDetection: PropTypes.bool,
+    setUseCollectibleDetection: PropTypes.func,
   };
 
   renderTokenDetectionToggle() {
@@ -48,10 +50,46 @@ export default class ExperimentalTab extends PureComponent {
     );
   }
 
+  renderCollectibleDetectionToggle() {
+    const { t } = this.context;
+    const { useCollectibleDetection, setUseCollectibleDetection } = this.props;
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{t('useCollectibleDetection')}</span>
+          <div className="settings-page__content-description">
+            {t('useCollectibleDetectionDescription')}
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={useCollectibleDetection}
+              onToggle={(value) => {
+                this.context.metricsEvent({
+                  eventOpts: {
+                    category: 'Settings',
+                    action: 'Collectible Detection',
+                    name: 'Collectible Detection',
+                  },
+                });
+                setUseCollectibleDetection(!value);
+              }}
+              offLabel={t('off')}
+              onLabel={t('on')}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   render() {
     return (
       <div className="settings-page__body">
         {this.renderTokenDetectionToggle()}
+        {this.renderCollectibleDetectionToggle()}
       </div>
     );
   }

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

@@ -1,19 +1,28 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import { setUseTokenDetection } from '../../../store/actions';
-import { getUseTokenDetection } from '../../../selectors';
+import {
+  setUseTokenDetection,
+  setUseCollectibleDetection,
+} from '../../../store/actions';
+import {
+  getUseTokenDetection,
+  getUseCollectibleDetection,
+} from '../../../selectors';
 import ExperimentalTab from './experimental-tab.component';
 
 const mapStateToProps = (state) => {
   return {
     useTokenDetection: getUseTokenDetection(state),
+    useCollectibleDetection: getUseCollectibleDetection(state),
   };
 };
 
 const mapDispatchToProps = (dispatch) => {
   return {
     setUseTokenDetection: (val) => dispatch(setUseTokenDetection(val)),
+    setUseCollectibleDetection: (val) =>
+      dispatch(setUseCollectibleDetection(val)),
   };
 };
 

ui/selectors/selectors.js

@@ -699,6 +699,15 @@ export function getUseTokenDetection(state) {
   return Boolean(state.metamask.useTokenDetection);
 }
 
+/**
+ * To get the useCollectibleDetection flag which determines whether we autodetect NFTs
+ * @param {*} state
+ * @returns Boolean
+ */
+export function getUseCollectibleDetection(state) {
+  return Boolean(state.metamask.useCollectibleDetection);
+}
+
 /**
  * To retrieve the tokenList produced by TokenListcontroller
  * @param {*} state

ui/store/actions.js

@@ -2153,6 +2153,19 @@ export function setUseTokenDetection(val) {
   };
 }
 
+export function setUseCollectibleDetection(val) {
+  return (dispatch) => {
+    dispatch(showLoadingIndication());
+    log.debug(`background.setUseCollectibleDetection`);
+    background.setUseCollectibleDetection(val, (err) => {
+      dispatch(hideLoadingIndication());
+      if (err) {
+        dispatch(displayWarning(err.message));
+      }
+    });
+  };
+}
+
 export function setAdvancedGasFee(val) {
   return (dispatch) => {
     dispatch(showLoadingIndication());