Fix #17328 - Move NFT settings to Experimental (#17400)

* Fix #17328 - Move NFT settings to Experimental

* Don't indent second NFT setting

* Fix jest test

app/_locales/de/messages.json

@@ -4081,9 +4081,6 @@
   "tokenList": {
     "message": "Token-Listen:"
   },
-  "tokenNftAutoDetection": {
-    "message": "Automatische Token- und NFT-Erkennung"
-  },
   "tokenScamSecurityRisk": {
     "message": "Token-Betrügereien und Sicherheitsrisiken"
   },

app/_locales/el/messages.json

@@ -4081,9 +4081,6 @@
   "tokenList": {
     "message": "Λίστες token:"
   },
-  "tokenNftAutoDetection": {
-    "message": "Αυτόματη ανίχνευση token και NFT"
-  },
   "tokenScamSecurityRisk": {
     "message": "απάτες token και κίνδυνοι για την ασφάλεια"
   },

app/_locales/en/messages.json

@@ -4101,6 +4101,9 @@
   "tokenAlreadyAdded": {
     "message": "Token has already been added."
   },
+  "tokenAutoDetection": {
+    "message": "Token autodetection"
+  },
   "tokenContractAddress": {
     "message": "Token contract address"
   },
@@ -4122,9 +4125,6 @@
   "tokenList": {
     "message": "Token lists:"
   },
-  "tokenNftAutoDetection": {
-    "message": "Token and NFT autodetection"
-  },
   "tokenScamSecurityRisk": {
     "message": "token scams and security risks"
   },

app/_locales/es/messages.json

@@ -4081,9 +4081,6 @@
   "tokenList": {
     "message": "Listas de tokens:"
   },
-  "tokenNftAutoDetection": {
-    "message": "Detección automática de tokens y NFT"
-  },
   "tokenScamSecurityRisk": {
     "message": "estafas de tokens y riesgos de seguridad"
   },

app/_locales/fr/messages.json

@@ -4081,9 +4081,6 @@
   "tokenList": {
     "message": "Listes de tokens :"
   },
-  "tokenNftAutoDetection": {
-    "message": "Détection automatique des jetons et des NFT"
-  },
   "tokenScamSecurityRisk": {
     "message": "les arnaques et les risques de piratage informatique"
   },

app/_locales/hi/messages.json

@@ -4081,9 +4081,6 @@
   "tokenList": {
     "message": "टोकन सूचियां:"
   },
-  "tokenNftAutoDetection": {
-    "message": "टोकन और NFT ऑटो-डिटेक्शन"
-  },
   "tokenScamSecurityRisk": {
     "message": "टोकन घोटाले और सुरक्षा जोखिम"
   },

app/_locales/id/messages.json

@@ -4081,9 +4081,6 @@
   "tokenList": {
     "message": "Daftar token:"
   },
-  "tokenNftAutoDetection": {
-    "message": "Deteksi otomatis Token dan NFT"
-  },
   "tokenScamSecurityRisk": {
     "message": "penipuan token dan risiko keamanan"
   },

app/_locales/ja/messages.json

@@ -4081,9 +4081,6 @@
   "tokenList": {
     "message": "トークンリスト:"
   },
-  "tokenNftAutoDetection": {
-    "message": "トークンと NFT の自動検出"
-  },
   "tokenScamSecurityRisk": {
     "message": "トークン関連の詐欺やセキュリティのリスク"
   },

app/_locales/ko/messages.json

@@ -4081,9 +4081,6 @@
   "tokenList": {
     "message": "토큰 목록:"
   },
-  "tokenNftAutoDetection": {
-    "message": "토큰 및 NFT 자동 감지"
-  },
   "tokenScamSecurityRisk": {
     "message": "토큰 사기 및 보안 위험"
   },

app/_locales/pt/messages.json

@@ -4081,9 +4081,6 @@
   "tokenList": {
     "message": "Listas de tokens:"
   },
-  "tokenNftAutoDetection": {
-    "message": "Detecção automática de tokens e NFTs"
-  },
   "tokenScamSecurityRisk": {
     "message": "golpes e riscos de segurança envolvendo tokens"
   },

app/_locales/ru/messages.json

@@ -4081,9 +4081,6 @@
   "tokenList": {
     "message": "Списки токенов:"
   },
-  "tokenNftAutoDetection": {
-    "message": "Автообнаружение токенов и NFT"
-  },
   "tokenScamSecurityRisk": {
     "message": "мошенничество с токенами и угрозы безопасности"
   },

app/_locales/tl/messages.json

@@ -4081,9 +4081,6 @@
   "tokenList": {
     "message": "Mga listahan ng token:"
   },
-  "tokenNftAutoDetection": {
-    "message": "Awtomatikong pagtuklas ng token at NFT"
-  },
   "tokenScamSecurityRisk": {
     "message": "mga scam sa token at panganib sa seguridad"
   },

app/_locales/tr/messages.json

@@ -4081,9 +4081,6 @@
   "tokenList": {
     "message": "Token listeleri:"
   },
-  "tokenNftAutoDetection": {
-    "message": "Otomatik token ve NFT algılama"
-  },
   "tokenScamSecurityRisk": {
     "message": "token dolandırıcılıkları ve güvenlik riskleri"
   },

app/_locales/vi/messages.json

@@ -4081,9 +4081,6 @@
   "tokenList": {
     "message": "Danh sách token:"
   },
-  "tokenNftAutoDetection": {
-    "message": "Tự động phát hiện Token và NFT"
-  },
   "tokenScamSecurityRisk": {
     "message": "rủi ro về bảo mật và lừa đảo token"
   },

app/_locales/zh_CN/messages.json

@@ -4081,9 +4081,6 @@
   "tokenList": {
     "message": "代币列表："
   },
-  "tokenNftAutoDetection": {
-    "message": "代币和NFT自动检测"
-  },
   "tokenScamSecurityRisk": {
     "message": "代币欺诈和安全风险。"
   },

ui/helpers/constants/settings.js

@@ -204,14 +204,6 @@ export const SETTINGS_CONSTANTS = [
     route: `${SECURITY_ROUTE}#-use-milti-account-balance-checker`,
     icon: 'fa fa-lock',
   },
-  {
-    tabMessage: (t) => t('securityAndPrivacy'),
-    sectionMessage: (t) => t('useCollectibleDetection'),
-    descriptionMessage: (t) => t('useCollectibleDetectionDescription'),
-    route: `${SECURITY_ROUTE}#autodetect-nfts`,
-    icon: 'fa fa-flask',
-    featureFlag: 'NFTS_V1',
-  },
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('currencyRateCheckToggle'),
@@ -336,6 +328,14 @@ export const SETTINGS_CONSTANTS = [
     icon: 'fa fa-flask',
     featureFlag: 'NFTS_V1',
   },
+  {
+    tabMessage: (t) => t('experimental'),
+    sectionMessage: (t) => t('useCollectibleDetection'),
+    descriptionMessage: (t) => t('useCollectibleDetectionDescription'),
+    route: `${EXPERIMENTAL_ROUTE}#autodetect-nfts`,
+    icon: 'fa fa-flask',
+    featureFlag: 'NFTS_V1',
+  },
   {
     tabMessage: (t) => t('advanced'),
     sectionMessage: (t) => t('backupUserData'),

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

@@ -50,9 +50,6 @@ export default class ExperimentalTab extends PureComponent {
   }
 
   renderOpenSeaEnabledToggle() {
-    if (!process.env.NFTS_V1) {
-      return null;
-    }
     const { t } = this.context;
     const {
       openSeaEnabled,
@@ -62,41 +59,77 @@ export default class ExperimentalTab extends PureComponent {
     } = this.props;
 
     return (
-      <div
+      <>
-        ref={this.settingsRefs[1]}
+        <div ref={this.settingsRefs[0]} className="settings-page__content-row">
-        className="settings-page__content-row--parent"
+          <div className="settings-page__content-item">
-      >
+            <span>{t('enableOpenSeaAPI')}</span>
-        <div className="settings-page__content-item">
+            <div className="settings-page__content-description">
-          <span>{t('enableOpenSeaAPI')}</span>
+              {t('enableOpenSeaAPIDescription')}
-          <div className="settings-page__content-description">
+            </div>
-            {t('enableOpenSeaAPIDescription')}
+          </div>
+          <div className="settings-page__content-item">
+            <div className="settings-page__content-item-col">
+              <ToggleButton
+                value={openSeaEnabled}
+                onToggle={(value) => {
+                  this.context.trackEvent({
+                    category: EVENT.CATEGORIES.SETTINGS,
+                    event: 'Enabled/Disable OpenSea',
+                    properties: {
+                      action: 'Enabled/Disable OpenSea',
+                      legacy_event: true,
+                    },
+                  });
+                  // value is positive when being toggled off
+                  if (value && useNftDetection) {
+                    setUseNftDetection(false);
+                  }
+                  setOpenSeaEnabled(!value);
+                }}
+                offLabel={t('off')}
+                onLabel={t('on')}
+              />
+            </div>
           </div>
         </div>
-        <div className="settings-page__content-item">
+        <div ref={this.settingsRefs[1]} className="settings-page__content-row">
-          <div className="settings-page__content-item-col">
+          <div className="settings-page__content-item">
-            <ToggleButton
+            <span>{t('useCollectibleDetection')}</span>
-              value={openSeaEnabled}
+            <div className="settings-page__content-description">
-              onToggle={(value) => {
+              {t('useCollectibleDetectionDescription')}
-                this.context.trackEvent({
+              <br />
-                  category: EVENT.CATEGORIES.SETTINGS,
+              {t('useCollectibleDetectionDescriptionLine2')}
-                  event: 'Enabled/Disable OpenSea',
+              <ul className="settings-page__content-unordered-list">
-                  properties: {
+                <li>{t('useCollectibleDetectionDescriptionLine3')}</li>
-                    action: 'Enabled/Disable OpenSea',
+                <li>{t('useCollectibleDetectionDescriptionLine4')}</li>
-                    legacy_event: true,
+              </ul>
-                  },
+            </div>
-                });
+          </div>
-                // value is positive when being toggled off
+          <div className="settings-page__content-item">
-                if (value && useNftDetection) {
+            <div className="settings-page__content-item-col">
-                  setUseNftDetection(false);
+              <ToggleButton
-                }
+                value={useNftDetection}
-                setOpenSeaEnabled(!value);
+                onToggle={(value) => {
-              }}
+                  this.context.trackEvent({
-              offLabel={t('off')}
+                    category: EVENT.CATEGORIES.SETTINGS,
-              onLabel={t('on')}
+                    event: 'Collectible Detection',
-            />
+                    properties: {
+                      action: 'Collectible Detection',
+                      legacy_event: true,
+                    },
+                  });
+                  if (!value && !openSeaEnabled) {
+                    setOpenSeaEnabled(!value);
+                  }
+                  setUseNftDetection(!value);
+                }}
+                offLabel={t('off')}
+                onLabel={t('on')}
+              />
+            </div>
           </div>
         </div>
-      </div>
+      </>
     );
   }
 
@@ -190,7 +223,7 @@ export default class ExperimentalTab extends PureComponent {
       <div className="settings-page__body">
         {process.env.TRANSACTION_SECURITY_PROVIDER &&
           this.renderTransactionSecurityCheckToggle()}
-        {this.renderOpenSeaEnabledToggle()}
+        {process.env.NFTS_V1 && this.renderOpenSeaEnabledToggle()}
       </div>
     );
   }

ui/pages/settings/index.scss

@@ -279,15 +279,6 @@
     display: flex;
     flex-direction: column;
     padding: 10px 0 20px;
-
-    &--parent {
-      padding: 10px 0 10px;
-    }
-
-    &--dependent {
-      margin-left: 48px;
-      padding: 0 0 20px;
-    }
   }
 
   &__content-item {

ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap

@@ -418,7 +418,7 @@ exports[`Security Tab should match snapshot 1`] = `
     <span
       class="settings-page__security-tab-sub-header"
     >
-      Token and NFT autodetection
+      Token autodetection
     </span>
     <div
       class="settings-page__content-padded"

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

@@ -50,10 +50,6 @@ export default class SecurityTab extends PureComponent {
     setUseMultiAccountBalanceChecker: PropTypes.func.isRequired,
     useCurrencyRateCheck: PropTypes.bool.isRequired,
     setUseCurrencyRateCheck: PropTypes.func.isRequired,
-    useNftDetection: PropTypes.bool,
-    setUseNftDetection: PropTypes.func,
-    setOpenSeaEnabled: PropTypes.func,
-    openSeaEnabled: PropTypes.bool,
   };
 
   state = {
@@ -428,60 +424,6 @@ export default class SecurityTab extends PureComponent {
     );
   }
 
-  renderCollectibleDetectionToggle() {
-    if (!process.env.NFTS_V1) {
-      return null;
-    }
-
-    const { t } = this.context;
-    const {
-      useNftDetection,
-      setUseNftDetection,
-      openSeaEnabled,
-      setOpenSeaEnabled,
-    } = this.props;
-
-    return (
-      <div ref={this.settingsRefs[7]} className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{t('useCollectibleDetection')}</span>
-          <div className="settings-page__content-description">
-            {t('useCollectibleDetectionDescription')}
-            <br />
-            {t('useCollectibleDetectionDescriptionLine2')}
-            <ul className="settings-page__content-unordered-list">
-              <li>{t('useCollectibleDetectionDescriptionLine3')}</li>
-              <li>{t('useCollectibleDetectionDescriptionLine4')}</li>
-            </ul>
-          </div>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={useNftDetection}
-              onToggle={(value) => {
-                this.context.trackEvent({
-                  category: EVENT.CATEGORIES.SETTINGS,
-                  event: 'Collectible Detection',
-                  properties: {
-                    action: 'Collectible Detection',
-                    legacy_event: true,
-                  },
-                });
-                if (!value && !openSeaEnabled) {
-                  setOpenSeaEnabled(!value);
-                }
-                setUseNftDetection(!value);
-              }}
-              offLabel={t('off')}
-              onLabel={t('on')}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   renderCurrencyRateCheckToggle() {
     const { t } = this.context;
     const { useCurrencyRateCheck, setUseCurrencyRateCheck } = this.props;
@@ -570,12 +512,11 @@ export default class SecurityTab extends PureComponent {
           {this.renderIpfsGatewayControl()}
         </div>
         <span className="settings-page__security-tab-sub-header">
-          {this.context.t('tokenNftAutoDetection')}
+          {this.context.t('tokenAutoDetection')}
         </span>
         <div className="settings-page__content-padded">
           {this.renderAutoDectectTokensToggle()}
           {this.renderBatchAccountBalanceRequestsToggle()}
-          {this.renderCollectibleDetectionToggle()}
         </div>
         <span className="settings-page__security-tab-sub-header">
           {this.context.t('metrics')}

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

@@ -9,10 +9,7 @@ import {
   setIpfsGateway,
   setUseMultiAccountBalanceChecker,
   setUseCurrencyRateCheck,
-  setUseNftDetection,
-  setOpenSeaEnabled,
 } from '../../../store/actions';
-import { getOpenSeaEnabled, getUseNftDetection } from '../../../selectors';
 import SecurityTab from './security-tab.component';
 
 const mapStateToProps = (state) => {
@@ -39,8 +36,6 @@ const mapStateToProps = (state) => {
     ipfsGateway,
     useMultiAccountBalanceChecker,
     useCurrencyRateCheck,
-    useNftDetection: getUseNftDetection(state),
-    openSeaEnabled: getOpenSeaEnabled(state),
   };
 };
 
@@ -61,8 +56,6 @@ const mapDispatchToProps = (dispatch) => {
     setUseMultiAccountBalanceChecker: (value) => {
       return dispatch(setUseMultiAccountBalanceChecker(value));
     },
-    setUseNftDetection: (val) => dispatch(setUseNftDetection(val)),
-    setOpenSeaEnabled: (val) => dispatch(setOpenSeaEnabled(val)),
   };
 };