Adding Token Detection Toggle to Security & Privacy (#11851)

app/_locales/en/messages.json

@@ -2696,6 +2696,12 @@
   "usePhishingDetectionDescription": {
     "message": "Display a warning for phishing domains targeting Ethereum users"
   },
+  "useTokenDetection": {
+    "message": "Use Token Detection"
+  },
+  "useTokenDetectionDescription": {
+    "message": "We use third-party APIs to detect and display new tokens sent to your wallet. Turn this off if you don’t want MetaMask to pull data from those those services."
+  },
   "usedByClients": {
     "message": "Used by a variety of different clients"
   },

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

@@ -19,6 +19,8 @@ export default class SecurityTab extends PureComponent {
     setShowIncomingTransactionsFeatureFlag: PropTypes.func.isRequired,
     setUsePhishDetect: PropTypes.func.isRequired,
     usePhishDetect: PropTypes.bool.isRequired,
+    useTokenDetection: PropTypes.bool.isRequired,
+    setUseTokenDetection: PropTypes.func.isRequired,
   };
 
   renderSeedWords() {
@@ -141,6 +143,32 @@ export default class SecurityTab extends PureComponent {
     );
   }
 
+  renderTokenDetectionToggle() {
+    const { t } = this.context;
+    const { useTokenDetection, setUseTokenDetection } = this.props;
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{t('useTokenDetection')}</span>
+          <div className="settings-page__content-description">
+            {t('useTokenDetectionDescription')}
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={useTokenDetection}
+              onToggle={(value) => setUseTokenDetection(!value)}
+              offLabel={t('off')}
+              onLabel={t('on')}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   render() {
     const { warning } = this.props;
 
@@ -151,6 +179,7 @@ export default class SecurityTab extends PureComponent {
         {this.renderIncomingTransactionsOptIn()}
         {this.renderPhishingDetectionToggle()}
         {this.renderMetaMetricsOptIn()}
+        {this.renderTokenDetectionToggle()}
       </div>
     );
   }

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

@@ -5,6 +5,7 @@ import {
   setFeatureFlag,
   setParticipateInMetaMetrics,
   setUsePhishDetect,
+  setUseTokenDetection,
 } from '../../../store/actions';
 import SecurityTab from './security-tab.component';
 
@@ -17,6 +18,7 @@ const mapStateToProps = (state) => {
     featureFlags: { showIncomingTransactions } = {},
     participateInMetaMetrics,
     usePhishDetect,
+    useTokenDetection,
   } = metamask;
 
   return {
@@ -24,6 +26,7 @@ const mapStateToProps = (state) => {
     showIncomingTransactions,
     participateInMetaMetrics,
     usePhishDetect,
+    useTokenDetection,
   };
 };
 
@@ -34,6 +37,7 @@ const mapDispatchToProps = (dispatch) => {
     setShowIncomingTransactionsFeatureFlag: (shouldShow) =>
       dispatch(setFeatureFlag('showIncomingTransactions', shouldShow)),
     setUsePhishDetect: (val) => dispatch(setUsePhishDetect(val)),
+    setUseTokenDetection: (val) => dispatch(setUseTokenDetection(val)),
   };
 };