add openSeaEnabled preference (#12909)

* add openSeaEnabled preference

* cleanup

* add description copy

app/_locales/en/messages.json

@@ -873,6 +873,12 @@
   "enableFromSettings": {
     "message": " Enable it from Settings."
   },
+  "enableOpenSeaAPI": {
+    "message": "Enable OpenSea API"
+  },
+  "enableOpenSeaAPIDescription": {
+    "message": "Use OpenSea's API to fetch NFT data. NFT auto-detection relies on OpenSea's API, and will not be available when this is turned off."
+  },
   "encryptionPublicKeyNotice": {
     "message": "$1 would like your public encryption key. By consenting, this site will be able to compose encrypted messages to you.",
     "description": "$1 is the web3 site name"

app/scripts/controllers/preferences.js

@@ -38,6 +38,7 @@ export default class PreferencesController {
       // set to false will be using the static list from contract-metadata
       useTokenDetection: false,
       useCollectibleDetection: false,
+      openSeaEnabled: false,
       advancedGasFee: null,
 
       // WARNING: Do not use feature flags for security-sensitive things.
@@ -138,9 +139,28 @@ export default class PreferencesController {
    *
    */
   setUseCollectibleDetection(val) {
+    const { openSeaEnabled } = this.store.getState();
+    if (val && !openSeaEnabled) {
+      throw new Error(
+        'useCollectibleDetection cannot be enabled if openSeaEnabled is false',
+      );
+    }
     this.store.updateState({ useCollectibleDetection: val });
   }
 
+  /**
+   * Setter for the `openSeaEnabled` property
+   *
+   * @param {boolean} val - Whether or not the user prefers to use the OpenSea API for collectibles data.
+   *
+   */
+  setOpenSeaEnabled(val) {
+    this.store.updateState({ openSeaEnabled: val });
+    if (!val) {
+      this.store.updateState({ useCollectibleDetection: false });
+    }
+  }
+
   /**
    * Setter for the `advancedGasFee` property
    *

app/scripts/controllers/preferences.test.js

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

app/scripts/metamask-controller.js

@@ -916,6 +916,10 @@ export default class MetamaskController extends EventEmitter {
         this.preferencesController.setUseCollectibleDetection,
         this.preferencesController,
       ),
+      setOpenSeaEnabled: nodeify(
+        this.preferencesController.setOpenSeaEnabled,
+        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

@@ -13,6 +13,8 @@ export default class ExperimentalTab extends PureComponent {
     setUseTokenDetection: PropTypes.func,
     useCollectibleDetection: PropTypes.bool,
     setUseCollectibleDetection: PropTypes.func,
+    setOpenSeaEnabled: PropTypes.func,
+    openSeaEnabled: PropTypes.func,
   };
 
   renderTokenDetectionToggle() {
@@ -52,7 +54,11 @@ export default class ExperimentalTab extends PureComponent {
 
   renderCollectibleDetectionToggle() {
     const { t } = this.context;
-    const { useCollectibleDetection, setUseCollectibleDetection } = this.props;
+    const {
+      useCollectibleDetection,
+      setUseCollectibleDetection,
+      openSeaEnabled,
+    } = this.props;
 
     return (
       <div className="settings-page__content-row">
@@ -65,6 +71,7 @@ export default class ExperimentalTab extends PureComponent {
         <div className="settings-page__content-item">
           <div className="settings-page__content-item-col">
             <ToggleButton
+              disabled={!openSeaEnabled}
               value={useCollectibleDetection}
               onToggle={(value) => {
                 this.context.metricsEvent({
@@ -85,10 +92,46 @@ export default class ExperimentalTab extends PureComponent {
     );
   }
 
+  renderOpenSeaEnabledToggle() {
+    const { t } = this.context;
+    const { openSeaEnabled, setOpenSeaEnabled } = this.props;
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{t('enableOpenSeaAPI')}</span>
+          <div className="settings-page__content-description">
+            {t('enableOpenSeaAPIDescription')}
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={openSeaEnabled}
+              onToggle={(value) => {
+                this.context.metricsEvent({
+                  eventOpts: {
+                    category: 'Settings',
+                    action: 'Enabled/Disable OpenSea',
+                    name: 'Enabled/Disable OpenSea',
+                  },
+                });
+                setOpenSeaEnabled(!value);
+              }}
+              offLabel={t('off')}
+              onLabel={t('on')}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   render() {
     return (
       <div className="settings-page__body">
         {this.renderTokenDetectionToggle()}
+        {this.renderOpenSeaEnabledToggle()}
         {this.renderCollectibleDetectionToggle()}
       </div>
     );

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

@@ -4,10 +4,12 @@ import { withRouter } from 'react-router-dom';
 import {
   setUseTokenDetection,
   setUseCollectibleDetection,
+  setOpenSeaEnabled,
 } from '../../../store/actions';
 import {
   getUseTokenDetection,
   getUseCollectibleDetection,
+  getOpenSeaEnabled,
 } from '../../../selectors';
 import ExperimentalTab from './experimental-tab.component';
 
@@ -15,6 +17,7 @@ const mapStateToProps = (state) => {
   return {
     useTokenDetection: getUseTokenDetection(state),
     useCollectibleDetection: getUseCollectibleDetection(state),
+    openSeaEnabled: getOpenSeaEnabled(state),
   };
 };
 
@@ -23,6 +26,7 @@ const mapDispatchToProps = (dispatch) => {
     setUseTokenDetection: (val) => dispatch(setUseTokenDetection(val)),
     setUseCollectibleDetection: (val) =>
       dispatch(setUseCollectibleDetection(val)),
+    setOpenSeaEnabled: (val) => dispatch(setOpenSeaEnabled(val)),
   };
 };
 

ui/selectors/selectors.js

@@ -711,6 +711,15 @@ export function getUseCollectibleDetection(state) {
   return Boolean(state.metamask.useCollectibleDetection);
 }
 
+/**
+ * To get the openSeaEnabled flag which determines whether we use OpenSea's API
+ * @param {*} state
+ * @returns Boolean
+ */
+export function getOpenSeaEnabled(state) {
+  return Boolean(state.metamask.openSeaEnabled);
+}
+
 /**
  * To retrieve the tokenList produced by TokenListcontroller
  * @param {*} state

ui/store/actions.js

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