feat: add announcement for users that blockaid will be enabled by default

shared/notifications/index.js

@@ -9,6 +9,7 @@ export const NOTIFICATION_OPEN_BETA_SNAPS = 26;
 export const NOTIFICATION_BUY_SELL_BUTTON = 27;
 export const NOTIFICATION_U2F_LEDGER_LIVE = 28;
 export const NOTIFICATION_STAKING_PORTFOLIO = 29;
+export const NOTIFICATION_BLOCKAID_DEFAULT = 30;
 
 export const UI_NOTIFICATIONS = {
   1: {
@@ -179,6 +180,16 @@ export const UI_NOTIFICATIONS = {
       width: '100%',
     },
   },
+  ///: BEGIN:ONLY_INCLUDE_IF(blockaid)
+  [NOTIFICATION_BLOCKAID_DEFAULT]: {
+    id: Number(NOTIFICATION_BLOCKAID_DEFAULT),
+    date: null,
+    image: {
+      src: 'images/blockaid-security-provider.svg',
+      width: '100%',
+    },
+  },
+  ///: END:ONLY_INCLUDE_IF
 };
 
 export const getTranslatedUINotifications = (t, locale) => {
@@ -474,5 +485,22 @@ export const getTranslatedUINotifications = (t, locale) => {
           )
         : '',
     },
+    ///: BEGIN:ONLY_INCLUDE_IF(blockaid)
+    [NOTIFICATION_BLOCKAID_DEFAULT]: {
+      ...UI_NOTIFICATIONS[NOTIFICATION_BLOCKAID_DEFAULT],
+      title: t('notificationsBlockaidDefaultTitle'),
+      description: [
+        t('notificationsBlockaidDefaultDescriptionOne'),
+        t('notificationsBlockaidDefaultDescriptionTwo'),
+        t('notificationsBlockaidDefaultDescriptionThree'),
+      ],
+      actionText: t('notificationsBlockaidDefaultDescriptionThreeActionText'),
+      date: UI_NOTIFICATIONS[NOTIFICATION_BLOCKAID_DEFAULT].date
+        ? new Intl.DateTimeFormat(formattedLocale).format(
+            new Date(UI_NOTIFICATIONS[NOTIFICATION_BLOCKAID_DEFAULT].date),
+          )
+        : '',
+    },
+    ///: END:ONLY_INCLUDE_IF
   };
 };

test/e2e/fixture-builder.js

@@ -176,6 +176,11 @@ function defaultFixture() {
           23: {
             date: null,
             id: 23,
+            isShown: true,
+          },
+          30: {
+            date: null,
+            id: 30,
             isShown: false,
           },
           ///: END:ONLY_INCLUDE_IF

ui/components/app/whats-new-popup/whats-new-popup.js

@@ -9,6 +9,7 @@ import {
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
 import {
+  NOTIFICATION_BLOCKAID_DEFAULT,
   NOTIFICATION_BUY_SELL_BUTTON,
   NOTIFICATION_DROP_LEDGER_FIREFOX,
   NOTIFICATION_OPEN_BETA_SNAPS,
@@ -129,6 +130,11 @@ function getActionFunctionById(id, history) {
     [NOTIFICATION_STAKING_PORTFOLIO]: () => {
       updateViewedNotifications({ [NOTIFICATION_STAKING_PORTFOLIO]: true });
     },
+    ///: BEGIN:ONLY_INCLUDE_IF(blockaid)
+    [NOTIFICATION_BLOCKAID_DEFAULT]: () => {
+      updateViewedNotifications({ [NOTIFICATION_BLOCKAID_DEFAULT]: true });
+    },
+    ///: END:ONLY_INCLUDE_IF
   };
 
   return actionFunctions[id];
@@ -357,6 +363,9 @@ export default function WhatsNewPopup({ onClose }) {
     [NOTIFICATION_BUY_SELL_BUTTON]: renderFirstNotification,
     [NOTIFICATION_U2F_LEDGER_LIVE]: renderFirstNotification,
     [NOTIFICATION_STAKING_PORTFOLIO]: renderFirstNotification,
+    ///: BEGIN:ONLY_INCLUDE_IF(blockaid)
+    [NOTIFICATION_BLOCKAID_DEFAULT]: renderFirstNotification,
+    ///: END:ONLY_INCLUDE_IF
   };
 
   return (

ui/components/app/whats-new-popup/whats-new-popup.test.js

@@ -3,6 +3,7 @@ import { screen } from '@testing-library/react';
 import { renderWithProvider } from '../../../../test/jest';
 import configureStore from '../../../store/store';
 import mockState from '../../../../test/data/mock-state.json';
+import { NOTIFICATION_BLOCKAID_DEFAULT } from '../../../../shared/notifications';
 import WhatsNewPopup from './whats-new-popup';
 
 const render = () => {
@@ -97,6 +98,11 @@ const render = () => {
           id: 23,
           isShown: false,
         },
+        [NOTIFICATION_BLOCKAID_DEFAULT]: {
+          date: '2022-07-24',
+          id: Number(NOTIFICATION_BLOCKAID_DEFAULT),
+          isShown: false,
+        },
       },
     },
   });

ui/selectors/selectors.js

@@ -91,6 +91,7 @@ import {
 } from '../../shared/modules/conversion.utils';
 import { BackgroundColor } from '../helpers/constants/design-system';
 import {
+  NOTIFICATION_BLOCKAID_DEFAULT,
   NOTIFICATION_BUY_SELL_BUTTON,
   NOTIFICATION_DROP_LEDGER_FIREFOX,
   NOTIFICATION_OPEN_BETA_SNAPS,
@@ -1236,7 +1237,7 @@ function getAllowedAnnouncementIds(state) {
     21: false,
     22: false,
     ///: BEGIN:ONLY_INCLUDE_IF(blockaid)
-    23: true,
+    23: false,
     ///: END:ONLY_INCLUDE_IF
     24: state.metamask.hadAdvancedGasFeesSetPriorToMigration92_3 === true,
     // This syntax is unusual, but very helpful here.  It's equivalent to `unnamedObject[NOTIFICATION_DROP_LEDGER_FIREFOX] =`
@@ -1245,6 +1246,9 @@ function getAllowedAnnouncementIds(state) {
     [NOTIFICATION_BUY_SELL_BUTTON]: true,
     [NOTIFICATION_U2F_LEDGER_LIVE]: currentKeyringIsLedger && !isFirefox,
     [NOTIFICATION_STAKING_PORTFOLIO]: true,
+    ///: BEGIN:ONLY_INCLUDE_IF(blockaid)
+    [NOTIFICATION_BLOCKAID_DEFAULT]: true,
+    ///: END:ONLY_INCLUDE_IF
   };
 }