diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 567e7ca3f8b2..62140fb4e933 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -3645,6 +3645,15 @@ "securityAlert": { "message": "Security alert from $1 and $2" }, + "securityAlerts": { + "message": "Security alerts" + }, + "securityAlertsDescription1": { + "message": "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." + }, + "securityAlertsDescription2": { + "message": "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." + }, "securityAndPrivacy": { "message": "Security & privacy" }, diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js index 9be792c49437..e21f3239e90d 100644 --- a/app/scripts/controllers/preferences.js +++ b/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 * diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index eaeb27816873..1f0761ced3be 100644 --- a/app/scripts/metamask-controller.js +++ b/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, ), diff --git a/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap b/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap index 81a8427b6cf1..ecab1af296d7 100644 --- a/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap +++ b/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap @@ -5,6 +5,96 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
+

+ Security +

+
+
+ + Security alerts + +
+

+ 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. +

+

+ 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. +

+

+ Select providers: +

+
+

+ Blockaid +

+

diff --git a/ui/pages/settings/experimental-tab/experimental-tab.component.js b/ui/pages/settings/experimental-tab/experimental-tab.component.js index 0d6109899f1a..34e444c1a5d2 100644 --- a/ui/pages/settings/experimental-tab/experimental-tab.component.js +++ b/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 ( + <> + + {t('security')} + +
+
+ {t('securityAlerts')} +
+ + {t('securityAlertsDescription1')} + + + {t('securityAlertsDescription2')} + + + + {t('selectProvider')} + +
+ + {t('blockaid')} + + { + 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); + }} + /> +
+ + {t('moreComingSoon')} + +
+
+
+ + ); + } + ///: END:ONLY_INCLUDE_IN + renderOpenSeaEnabledToggle() { const { t } = this.context; const { @@ -261,6 +349,11 @@ export default class ExperimentalTab extends PureComponent { render() { return (
+ { + ///: BEGIN:ONLY_INCLUDE_IN(blockaid) + this.renderSecurityAlertsToggle() + ///: END:ONLY_INCLUDE_IN + } {this.renderTransactionSecurityCheckToggle()} {this.renderOpenSeaEnabledToggle()} { diff --git a/ui/pages/settings/experimental-tab/experimental-tab.container.js b/ui/pages/settings/experimental-tab/experimental-tab.container.js index 97d8ddbd8292..24b412bdeea2 100644 --- a/ui/pages/settings/experimental-tab/experimental-tab.container.js +++ b/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 }; }; diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index 4b8deb66276e..1a79de53c035 100644 --- a/ui/selectors/selectors.js +++ b/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); diff --git a/ui/store/actions.ts b/ui/store/actions.ts index 46ef92d12083..10dcc6b832fb 100644 --- a/ui/store/actions.ts +++ b/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]); }