Moving UseTokenDetection toggle to new Experimental tab (#12136)

app/_locales/en/messages.json

@@ -871,6 +871,12 @@
   "expandView": {
     "message": "Expand view"
   },
+  "experimental": {
+    "message": "Experimental"
+  },
+  "experimentalSettingsDescription": {
+    "message": "Token detection & more"
+  },
   "exportPrivateKey": {
     "message": "Export Private Key"
   },
@@ -2733,7 +2739,7 @@
     "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."
+    "message": "We use third-party APIs to detect and display new tokens sent to your wallet. Turn off if you don’t want MetaMask to pull data from those services."
   },
   "usedByClients": {
     "message": "Used by a variety of different clients"

ui/helpers/constants/routes.js

@@ -5,6 +5,7 @@ const ASSET_ROUTE = '/asset';
 const SETTINGS_ROUTE = '/settings';
 const GENERAL_ROUTE = '/settings/general';
 const ADVANCED_ROUTE = '/settings/advanced';
+const EXPERIMENTAL_ROUTE = '/settings/experimental';
 const SECURITY_ROUTE = '/settings/security';
 const ABOUT_US_ROUTE = '/settings/about-us';
 const ALERTS_ROUTE = '/settings/alerts';
@@ -73,6 +74,7 @@ const PATH_NAME_MAP = {
   [SETTINGS_ROUTE]: 'Settings Page',
   [GENERAL_ROUTE]: 'General Settings Page',
   [ADVANCED_ROUTE]: 'Advanced Settings Page',
+  [EXPERIMENTAL_ROUTE]: 'Experimental Settings Page',
   [SECURITY_ROUTE]: 'Security Settings Page',
   [ABOUT_US_ROUTE]: 'About Us Page',
   [ALERTS_ROUTE]: 'Alerts Settings Page',
@@ -172,6 +174,7 @@ export {
   CONFIRMATION_V_NEXT_ROUTE,
   INITIALIZE_METAMETRICS_OPT_IN_ROUTE,
   ADVANCED_ROUTE,
+  EXPERIMENTAL_ROUTE,
   SECURITY_ROUTE,
   GENERAL_ROUTE,
   ABOUT_US_ROUTE,

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

@@ -0,0 +1,58 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import ToggleButton from '../../../components/ui/toggle-button';
+
+export default class ExperimentalTab extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  };
+
+  static propTypes = {
+    useTokenDetection: PropTypes.bool,
+    setUseTokenDetection: PropTypes.func,
+  };
+
+  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) => {
+                this.context.metricsEvent({
+                  eventOpts: {
+                    category: 'Settings',
+                    action: 'Token Detection',
+                    name: 'Token Detection',
+                  },
+                });
+                setUseTokenDetection(!value);
+              }}
+              offLabel={t('off')}
+              onLabel={t('on')}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div className="settings-page__body">
+        {this.renderTokenDetectionToggle()}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import sinon from 'sinon';
+import { mount } from 'enzyme';
+import ExperimentalTab from './experimental-tab.container';
+
+describe('Experimental Tab', () => {
+  let wrapper;
+
+  const props = {
+    useTokenDetection: true,
+    setUseTokenDetection: sinon.spy(),
+  };
+
+  beforeEach(() => {
+    wrapper = mount(<ExperimentalTab.WrappedComponent {...props} />, {
+      context: {
+        t: (str) => str,
+        metricsEvent: () => undefined,
+      },
+    });
+  });
+
+  it('toggles Use Token detection', () => {
+    const useTokenDetection = wrapper.find({ type: 'checkbox' }).at(0);
+    useTokenDetection.simulate('click');
+    expect(props.setUseTokenDetection.calledOnce).toStrictEqual(true);
+  });
+});

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

@@ -0,0 +1,23 @@
+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 ExperimentalTab from './experimental-tab.component';
+
+const mapStateToProps = (state) => {
+  return {
+    useTokenDetection: getUseTokenDetection(state),
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    setUseTokenDetection: (val) => dispatch(setUseTokenDetection(val)),
+  };
+};
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps),
+)(ExperimentalTab);

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

@@ -0,0 +1 @@
+export { default } from './experimental-tab.container';

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

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

ui/pages/settings/settings.component.js

@@ -15,6 +15,7 @@ import {
   CONTACT_ADD_ROUTE,
   CONTACT_EDIT_ROUTE,
   CONTACT_VIEW_ROUTE,
+  EXPERIMENTAL_ROUTE,
 } from '../../helpers/constants/routes';
 import SettingsTab from './settings-tab';
 import AlertsTab from './alerts-tab';
@@ -23,6 +24,7 @@ import AdvancedTab from './advanced-tab';
 import InfoTab from './info-tab';
 import SecurityTab from './security-tab';
 import ContactListTab from './contact-list-tab';
+import ExperimentalTab from './experimental-tab';
 
 class SettingsPage extends PureComponent {
   static propTypes = {
@@ -191,6 +193,11 @@ class SettingsPage extends PureComponent {
             description: t('networkSettingsDescription'),
             key: NETWORKS_ROUTE,
           },
+          {
+            content: t('experimental'),
+            description: t('experimentalSettingsDescription'),
+            key: EXPERIMENTAL_ROUTE,
+          },
           {
             content: t('about'),
             description: t('aboutSettingsDescription'),
@@ -217,6 +224,7 @@ class SettingsPage extends PureComponent {
         <Route exact path={ALERTS_ROUTE} component={AlertsTab} />
         <Route path={NETWORKS_ROUTE} component={NetworksTab} />
         <Route exact path={SECURITY_ROUTE} component={SecurityTab} />
+        <Route exact path={EXPERIMENTAL_ROUTE} component={ExperimentalTab} />
         <Route exact path={CONTACT_LIST_ROUTE} component={ContactListTab} />
         <Route exact path={CONTACT_ADD_ROUTE} component={ContactListTab} />
         <Route

ui/pages/settings/settings.container.js

@@ -23,6 +23,7 @@ import {
   NETWORKS_ROUTE,
   SECURITY_ROUTE,
   SETTINGS_ROUTE,
+  EXPERIMENTAL_ROUTE,
 } from '../../helpers/constants/routes';
 import Settings from './settings.component';
 
@@ -38,6 +39,7 @@ const ROUTES_TO_I18N_KEYS = {
   [NETWORKS_ROUTE]: 'networks',
   [NETWORKS_FORM_ROUTE]: 'networks',
   [SECURITY_ROUTE]: 'securityAndPrivacy',
+  [EXPERIMENTAL_ROUTE]: 'experimental',
 };
 
 const mapStateToProps = (state, ownProps) => {