Add transaction security check toggle (#16271)

Co-authored-by: Brad Decker <bhdecker84@gmail.com>

app/_locales/en/messages.json

@@ -4140,6 +4140,12 @@
   "transactionResubmitted": {
     "message": "Transaction resubmitted with estimated gas fee increased to $1 at $2"
   },
+  "transactionSecurityCheck": {
+    "message": "Transaction security check"
+  },
+  "transactionSecurityCheckDescription": {
+    "message": "Turn this on to enable a third party (OpenSea) to review all your transactions and signature requests and warn you about known malicious requests."
+  },
   "transactionSubmitted": {
     "message": "Transaction submitted with estimated gas fee of $1 at $2."
   },

app/scripts/controllers/preferences.js

@@ -70,6 +70,7 @@ export default class PreferencesController {
         : LEDGER_TRANSPORT_TYPES.U2F,
       theme: 'light',
       improvedTokenAllowanceEnabled: false,
+      transactionSecurityCheckEnabled: false,
       ...opts.initState,
     };
 
@@ -199,6 +200,17 @@ export default class PreferencesController {
     });
   }
 
+  /**
+   * Setter for the `transactionSecurityCheckEnabled` property
+   *
+   * @param transactionSecurityCheckEnabled
+   */
+  setTransactionSecurityCheckEnabled(transactionSecurityCheckEnabled) {
+    this.store.updateState({
+      transactionSecurityCheckEnabled,
+    });
+  }
+
   /**
    * Add new methodData to state, to avoid requesting this information again through Infura
    *

app/scripts/metamask-controller.js

@@ -1648,6 +1648,10 @@ export default class MetamaskController extends EventEmitter {
         preferencesController.setImprovedTokenAllowanceEnabled.bind(
           preferencesController,
         ),
+      setTransactionSecurityCheckEnabled:
+        preferencesController.setTransactionSecurityCheckEnabled.bind(
+          preferencesController,
+        ),
       // AssetsContractController
       getTokenStandardAndDetails: this.getTokenStandardAndDetails.bind(this),
 

ui/helpers/constants/settings.js

@@ -343,4 +343,11 @@ export const SETTINGS_CONSTANTS = [
     route: `${EXPERIMENTAL_ROUTE}#improved-token-allowance`,
     icon: 'fa fa-flask',
   },
+  {
+    tabMessage: (t) => t('experimental'),
+    sectionMessage: (t) => t('transactionSecurityCheck'),
+    descriptionMessage: (t) => t('transactionSecurityCheckDescription'),
+    route: `${EXPERIMENTAL_ROUTE}#transaction-security-check`,
+    icon: 'fa fa-flask',
+  },
 ];

ui/helpers/utils/settings-search.test.js

@@ -182,7 +182,7 @@ describe('Settings Search Utils', () => {
 
     it('should get good experimental section number', () => {
       expect(getNumberOfSettingsInSection(t, t('experimental'))).toStrictEqual(
-        2,
+        3,
       );
     });
 

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

@@ -22,6 +22,8 @@ export default class ExperimentalTab extends PureComponent {
     setEIP1559V2Enabled: PropTypes.func,
     improvedTokenAllowanceEnabled: PropTypes.bool,
     setImprovedTokenAllowanceEnabled: PropTypes.func,
+    transactionSecurityCheckEnabled: PropTypes.bool,
+    setTransactionSecurityCheckEnabled: PropTypes.func,
   };
 
   settingsRefs = Array(
@@ -198,7 +200,7 @@ export default class ExperimentalTab extends PureComponent {
       this.props;
 
     return (
-      <div ref={this.settingsRefs[1]} className="settings-page__content-row">
+      <div ref={this.settingsRefs[2]} className="settings-page__content-row">
         <div className="settings-page__content-item">
           <span>{t('improvedTokenAllowance')}</span>
           <div className="settings-page__content-description">
@@ -229,9 +231,50 @@ export default class ExperimentalTab extends PureComponent {
     );
   }
 
+  renderTransactionSecurityCheckToggle() {
+    const { t } = this.context;
+
+    const {
+      transactionSecurityCheckEnabled,
+      setTransactionSecurityCheckEnabled,
+    } = this.props;
+
+    return (
+      <div ref={this.settingsRefs[1]} className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{t('transactionSecurityCheck')}</span>
+          <div className="settings-page__content-description">
+            {t('transactionSecurityCheckDescription')}
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={transactionSecurityCheckEnabled}
+              onToggle={(value) => {
+                this.context.trackEvent({
+                  category: EVENT.CATEGORIES.SETTINGS,
+                  event: 'Enabled/Disable TransactionSecurityCheck',
+                  properties: {
+                    action: 'Enabled/Disable TransactionSecurityCheck',
+                    legacy_event: true,
+                  },
+                });
+                setTransactionSecurityCheckEnabled(!value);
+              }}
+              offLabel={t('off')}
+              onLabel={t('on')}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   render() {
     return (
       <div className="settings-page__body">
+        {this.renderTransactionSecurityCheckToggle()}
         {this.renderImprovedTokenAllowanceToggle()}
         {this.renderOpenSeaEnabledToggle()}
         {this.renderCollectibleDetectionToggle()}

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

@@ -6,12 +6,14 @@ import {
   setOpenSeaEnabled,
   setEIP1559V2Enabled,
   setImprovedTokenAllowanceEnabled,
+  setTransactionSecurityCheckEnabled,
 } from '../../../store/actions';
 import {
   getUseNftDetection,
   getOpenSeaEnabled,
   getEIP1559V2Enabled,
   getIsImprovedTokenAllowanceEnabled,
+  getIsTransactionSecurityCheckEnabled,
 } from '../../../selectors';
 import ExperimentalTab from './experimental-tab.component';
 
@@ -21,6 +23,8 @@ const mapStateToProps = (state) => {
     openSeaEnabled: getOpenSeaEnabled(state),
     eip1559V2Enabled: getEIP1559V2Enabled(state),
     improvedTokenAllowanceEnabled: getIsImprovedTokenAllowanceEnabled(state),
+    transactionSecurityCheckEnabled:
+      getIsTransactionSecurityCheckEnabled(state),
   };
 };
 
@@ -31,6 +35,8 @@ const mapDispatchToProps = (dispatch) => {
     setEIP1559V2Enabled: (val) => dispatch(setEIP1559V2Enabled(val)),
     setImprovedTokenAllowanceEnabled: (val) =>
       dispatch(setImprovedTokenAllowanceEnabled(val)),
+    setTransactionSecurityCheckEnabled: (val) =>
+      dispatch(setTransactionSecurityCheckEnabled(val)),
   };
 };
 

ui/selectors/selectors.js

@@ -1270,6 +1270,16 @@ export function getIsImprovedTokenAllowanceEnabled(state) {
   return state.metamask.improvedTokenAllowanceEnabled;
 }
 
+/**
+ * To get the `transactionSecurityCheckEnabled` value which determines whether we use the transaction security check
+ *
+ * @param {*} state
+ * @returns Boolean
+ */
+export function getIsTransactionSecurityCheckEnabled(state) {
+  return state.metamask.transactionSecurityCheckEnabled;
+}
+
 export function getIsCustomNetwork(state) {
   const chainId = getCurrentChainId(state);
 

ui/store/actions.js

@@ -3803,6 +3803,20 @@ export function setImprovedTokenAllowanceEnabled(
   };
 }
 
+export function setTransactionSecurityCheckEnabled(
+  transactionSecurityCheckEnabled,
+) {
+  return async () => {
+    try {
+      await submitRequestToBackground('setTransactionSecurityCheckEnabled', [
+        transactionSecurityCheckEnabled,
+      ]);
+    } catch (error) {
+      log.error(error);
+    }
+  };
+}
+
 export function setFirstTimeUsedNetwork(chainId) {
   return submitRequestToBackground('setFirstTimeUsedNetwork', [chainId]);
 }