Adding experimental flag for blockaid

app/scripts/controllers/preferences.js

@@ -41,6 +41,9 @@ export default class PreferencesController {
       useNftDetection: false,
       useCurrencyRateCheck: true,
       openSeaEnabled: false,
+      ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+      securityAlertsEnabled: false,
+      ///: END:ONLY_INCLUDE_IN
       advancedGasFee: null,
 
       // WARNING: Do not use feature flags for security-sensitive things.
@@ -185,6 +188,19 @@ export default class PreferencesController {
     });
   }
 
+  ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+  /**
+   * Setter for the `securityAlertsEnabled` property
+   *
+   * @param {boolean} securityAlertsEnabled - Whether or not the user prefers to use the security alerts.
+   */
+  setSecurityAlertsEnabled(securityAlertsEnabled) {
+    this.store.updateState({
+      securityAlertsEnabled,
+    });
+  }
+  ///: END:ONLY_INCLUDE_IN
+
   /**
    * Setter for the `advancedGasFee` property
    *

app/scripts/metamask-controller.js

@@ -649,6 +649,11 @@ export default class MetamaskController extends EventEmitter {
         networkControllerMessenger,
         'NetworkController:stateChange',
       ),
+      securityAlertsEnabled:
+        this.preferencesController.store.getState().securityAlertsEnabled,
+      onPreferencesChange: this.preferencesController.store.subscribe.bind(
+        this.preferencesController.store,
+      ),
     });
     ///: END:ONLY_INCLUDE_IN
 
@@ -1596,6 +1601,9 @@ export default class MetamaskController extends EventEmitter {
         this.institutionalFeaturesController.store,
       MmiConfigurationController: this.mmiConfigurationController.store,
       ///: END:ONLY_INCLUDE_IN
+      ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+      PPOMController: this.ppomController,
+      ///: END:ONLY_INCLUDE_IN
       ...resetOnRestartStore,
     });
 
@@ -2153,6 +2161,12 @@ export default class MetamaskController extends EventEmitter {
       setOpenSeaEnabled: preferencesController.setOpenSeaEnabled.bind(
         preferencesController,
       ),
+      ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+      setSecurityAlertsEnabled:
+        preferencesController.setSecurityAlertsEnabled.bind(
+          preferencesController,
+        ),
+      ///: END:ONLY_INCLUDE_IN
       setIpfsGateway: preferencesController.setIpfsGateway.bind(
         preferencesController,
       ),

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

@@ -5,6 +5,96 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
   <div
     class="settings-page__body"
   >
+    <h4
+      class="box mm-text mm-text--heading-sm box--margin-bottom-2 box--flex-direction-row box--color-text-alternative"
+    >
+      Security
+    </h4>
+    <div
+      class="settings-page__content-row settings-page__content-row-experimental"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Security alerts
+        </span>
+        <div
+          class="settings-page__content-description"
+        >
+          <p
+            class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
+          >
+            Enable this to have your transactions and signature requests reviewed locally (no data shared with third parties) and warnings displayed when malicious activity is detected.
+          </p>
+          <p
+            class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
+          >
+            Always be sure to do your own due diligence before approving any requests. There's no guarantee all mailcious activity will be detected by this feature.
+          </p>
+          <p
+            class="box mm-text mm-text--body-sm box--margin-top-3 box--margin-bottom-1 box--flex-direction-row box--color-text-alternative"
+          >
+            Select providers:
+          </p>
+          <div
+            class="settings-page__content-item-col settings-page__content-item-col-open-sea"
+          >
+            <p
+              class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
+            >
+              Blockaid
+            </p>
+            <label
+              class="toggle-button toggle-button--off"
+              tabindex="0"
+            >
+              <div
+                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+              >
+                <div
+                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+                >
+                  <div
+                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+                  />
+                  <div
+                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
+                  />
+                </div>
+                <div
+                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+                >
+                  <div
+                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+                  />
+                </div>
+                <input
+                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+                  type="checkbox"
+                  value="false"
+                />
+              </div>
+              <div
+                class="toggle-button__status"
+              >
+                <span
+                  class="toggle-button__label-off"
+                />
+                <span
+                  class="toggle-button__label-on"
+                />
+              </div>
+            </label>
+          </div>
+          <p
+            class="box mm-text mm-text--body-md box--margin-top-2 box--flex-direction-row box--color-text-muted"
+          >
+            More coming soon...
+          </p>
+        </div>
+      </div>
+    </div>
     <h4
       class="box box--margin-top-1 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-bold typography--style-normal typography--color-text-alternative"
     >

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

@@ -11,6 +11,9 @@ import { Text } from '../../../components/component-library/text/deprecated';
 import {
   FONT_WEIGHT,
   TextColor,
+  ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+  TextVariant,
+  ///: END:ONLY_INCLUDE_IN
   TypographyVariant,
 } from '../../../helpers/constants/design-system';
 ///: BEGIN:ONLY_INCLUDE_IN(desktop)
@@ -30,6 +33,10 @@ export default class ExperimentalTab extends PureComponent {
     openSeaEnabled: PropTypes.bool,
     transactionSecurityCheckEnabled: PropTypes.bool,
     setTransactionSecurityCheckEnabled: PropTypes.func,
+    ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+    securityAlertsEnabled: PropTypes.bool,
+    setSecurityAlertsEnabled: PropTypes.func,
+    ///: END:ONLY_INCLUDE_IN
   };
 
   settingsRefs = Array(
@@ -53,6 +60,87 @@ export default class ExperimentalTab extends PureComponent {
     handleSettingsRefs(t, t('experimental'), this.settingsRefs);
   }
 
+  ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+  renderSecurityAlertsToggle() {
+    const { t } = this.context;
+
+    const { securityAlertsEnabled, setSecurityAlertsEnabled } = this.props;
+
+    return (
+      <>
+        <Text
+          variant={TextVariant.headingSm}
+          color={TextColor.textAlternative}
+          marginBottom={2}
+        >
+          {t('security')}
+        </Text>
+        <div
+          ref={this.settingsRefs[1]}
+          className="settings-page__content-row settings-page__content-row-experimental"
+        >
+          <div className="settings-page__content-item">
+            <span>{t('securityAlerts')}</span>
+            <div className="settings-page__content-description">
+              <Text
+                variant={TextVariant.bodySm}
+                color={TextColor.textAlternative}
+              >
+                {t('securityAlertsDescription1')}
+              </Text>
+              <Text
+                variant={TextVariant.bodySm}
+                color={TextColor.textAlternative}
+              >
+                {t('securityAlertsDescription2')}
+              </Text>
+
+              <Text
+                variant={TextVariant.bodySm}
+                color={TextColor.textAlternative}
+                marginTop={3}
+                marginBottom={1}
+              >
+                {t('selectProvider')}
+              </Text>
+              <div className="settings-page__content-item-col settings-page__content-item-col-open-sea">
+                <Text
+                  variant={TextVariant.bodyMd}
+                  color={TextColor.textDefault}
+                  marginBottom={0}
+                >
+                  {t('blockaid')}
+                </Text>
+                <ToggleButton
+                  value={securityAlertsEnabled}
+                  onToggle={(value) => {
+                    this.context.trackEvent({
+                      category: MetaMetricsEventCategory.Settings,
+                      event: 'Enabled/Disable security_alerts_enabled',
+                      properties: {
+                        action: 'Enabled/Disable security_alerts_enabled',
+                        legacy_event: true,
+                      },
+                    });
+                    setSecurityAlertsEnabled(!value || false);
+                  }}
+                />
+              </div>
+              <Text
+                variant={TextVariant.bodyMd}
+                color={TextColor.textMuted}
+                marginTop={2}
+              >
+                {t('moreComingSoon')}
+              </Text>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+  ///: END:ONLY_INCLUDE_IN
+
   renderOpenSeaEnabledToggle() {
     const { t } = this.context;
     const {
@@ -261,6 +349,11 @@ export default class ExperimentalTab extends PureComponent {
   render() {
     return (
       <div className="settings-page__body">
+        {
+          ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+          this.renderSecurityAlertsToggle()
+          ///: END:ONLY_INCLUDE_IN
+        }
         {this.renderTransactionSecurityCheckToggle()}
         {this.renderOpenSeaEnabledToggle()}
         {

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

@@ -5,11 +5,17 @@ import {
   setUseNftDetection,
   setOpenSeaEnabled,
   setTransactionSecurityCheckEnabled,
+  ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+  setSecurityAlertsEnabled,
+  ///: END:ONLY_INCLUDE_IN
 } from '../../../store/actions';
 import {
   getUseNftDetection,
   getOpenSeaEnabled,
   getIsTransactionSecurityCheckEnabled,
+  ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+  getIsSecurityAlertsEnabled,
+  ///: END:ONLY_INCLUDE_IN
 } from '../../../selectors';
 import ExperimentalTab from './experimental-tab.component';
 
@@ -19,6 +25,9 @@ const mapStateToProps = (state) => {
     openSeaEnabled: getOpenSeaEnabled(state),
     transactionSecurityCheckEnabled:
       getIsTransactionSecurityCheckEnabled(state),
+    ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+    securityAlertsEnabled: getIsSecurityAlertsEnabled(state),
+    ///: END:ONLY_INCLUDE_IN
   };
 };
 
@@ -28,6 +37,9 @@ const mapDispatchToProps = (dispatch) => {
     setOpenSeaEnabled: (val) => dispatch(setOpenSeaEnabled(val)),
     setTransactionSecurityCheckEnabled: (val) =>
       dispatch(setTransactionSecurityCheckEnabled(val)),
+    ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+    setSecurityAlertsEnabled: (val) => setSecurityAlertsEnabled(val),
+    ///: END:ONLY_INCLUDE_IN
   };
 };
 

ui/selectors/selectors.js

@@ -1433,6 +1433,18 @@ export function getIsTransactionSecurityCheckEnabled(state) {
   return state.metamask.transactionSecurityCheckEnabled;
 }
 
+///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+/**
+ * To get the `getIsSecurityAlertsEnabled` value which determines whether security check is enabled
+ *
+ * @param {*} state
+ * @returns Boolean
+ */
+export function getIsSecurityAlertsEnabled(state) {
+  return state.metamask.securityAlertsEnabled;
+}
+///: END:ONLY_INCLUDE_IN
+
 export function getIsCustomNetwork(state) {
   const chainId = getCurrentChainId(state);
 

ui/store/actions.ts

@@ -4344,6 +4344,16 @@ export function setTransactionSecurityCheckEnabled(
   };
 }
 
+///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+export function setSecurityAlertsEnabled(val: boolean): void {
+  try {
+    submitRequestToBackground('setSecurityAlertsEnabled', [val]);
+  } catch (error) {
+    logErrorWithMessage(error);
+  }
+}
+///: END:ONLY_INCLUDE_IN
+
 export function setFirstTimeUsedNetwork(chainId: string) {
   return submitRequestToBackground('setFirstTimeUsedNetwork', [chainId]);
 }