Whats new blockaid popup (#20071)

* deprecate opensea security alerts check

Signedoff-by: Olusegun Akintayo <akintayo.segun@gmail.com>

set metrics to []

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>

fix jest tests

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>

Remove sec provider spec

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>

lint fix

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>

What's new for blockaid...with placeholder texts

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>

i18n

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>

lint fixes

Rebase to develop
Add image to whatsnew blockaid.

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>

Fixed i18n

Fixed snapshot for ui/pages/settings/experimental-tab/experimental-tab.test.js

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>

Fix i18n messages

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>

lint fixes

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>

Add unit tests

Lint fixes

use new image that works for both dark and light mode

22 is taken

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>

* comment out blockaid

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>

* rever change in builds.yml

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>

* reverted changes in test/e2e/tests/security-provider.spec.js

* fix unit test

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>

---------

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>

app/_locales/en/messages.json

@@ -2756,6 +2756,21 @@
   "notifications22Title": {
     "message": "Looking for your account details or the block explorer URL?"
   },
+  "notifications23ActionText": {
+    "message": "Enable security alerts"
+  },
+  "notifications23DescriptionOne": {
+    "message": "Steer clear of known scams while still preserving your privacy with security alerts powered by Blockaid."
+  },
+  "notifications23DescriptionThree": {
+    "message": "If you enabled security alerts from OpenSea, we've moved you over to this feature."
+  },
+  "notifications23DescriptionTwo": {
+    "message": "Always do your own due diligence before approving requests."
+  },
+  "notifications23Title": {
+    "message": "Stay safe with security alerts"
+  },
   "notifications3ActionText": {
     "message": "Read more",
     "description": "The 'call to action' on the button, or link, of the 'Stay secure' notification. Upon clicking, users will be taken to a page about security on the metamask support website."

shared/notifications/index.js

@@ -122,10 +122,20 @@ export const UI_NOTIFICATIONS = {
       width: '100%',
     },
   },
+  ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+  23: {
+    id: 23,
+    date: null,
+    image: {
+      src: 'images/blockaid-security-provider.png',
+      width: '100%',
+    },
+  },
+  ///: END:ONLY_INCLUDE_IN
 };
 
 export const getTranslatedUINotifications = (t, locale) => {
-  const formattedLocale = locale.replace('_', '-');
+  const formattedLocale = locale?.replace('_', '-');
   return {
     1: {
       ...UI_NOTIFICATIONS[1],
@@ -332,5 +342,22 @@ export const getTranslatedUINotifications = (t, locale) => {
           )
         : '',
     },
+    ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+    23: {
+      ...UI_NOTIFICATIONS[23],
+      title: t('notifications23Title'),
+      description: [
+        t('notifications23DescriptionOne'),
+        t('notifications23DescriptionTwo'),
+        t('notifications23DescriptionThree'),
+      ],
+      actionText: t('notifications23ActionText'),
+      date: UI_NOTIFICATIONS[23].date
+        ? new Intl.DateTimeFormat(formattedLocale).format(
+            new Date(UI_NOTIFICATIONS[23].date),
+          )
+        : '',
+    },
+    ///: END:ONLY_INCLUDE_IN
   };
 };

test/e2e/fixture-builder.js

@@ -146,6 +146,13 @@ function defaultFixture() {
             id: 22,
             isShown: true,
           },
+          ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+          23: {
+            date: null,
+            id: 23,
+            isShown: false,
+          },
+          ///: END:ONLY_INCLUDE_IN
         },
       },
       AppStateController: {

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

@@ -100,6 +100,12 @@ function getActionFunctionById(id, history) {
       updateViewedNotifications({ 21: true });
       history.push(PREPARE_SWAP_ROUTE);
     },
+    ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+    23: () => {
+      updateViewedNotifications({ 23: true });
+      history.push(`${EXPERIMENTAL_ROUTE}#transaction-security-check`);
+    },
+    ///: END:ONLY_INCLUDE_IN
   };
 
   return actionFunctions[id];
@@ -116,6 +122,7 @@ const renderDescription = (description) => {
         const isLast = index === description.length - 1;
         return (
           <Text
+            data-testid={`whats-new-description-item-${index}`}
             key={`item-${index}`}
             variant={TextVariant.bodyMd}
             marginBottom={isLast ? 0 : 4}
@@ -376,6 +383,9 @@ export default function WhatsNewPopup({
     18: renderFirstNotification,
     19: renderFirstNotification,
     21: renderFirstNotification,
+    ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+    23: renderFirstNotification,
+    ///: END:ONLY_INCLUDE_IN
   };
 
   return (

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

@@ -92,6 +92,11 @@ const render = () => {
           id: 13,
           isShown: true,
         },
+        23: {
+          date: '2022-07-24',
+          id: 23,
+          isShown: false,
+        },
       },
     },
   });
@@ -118,4 +123,16 @@ describe('WhatsNewPopup', () => {
     render();
     expect(screen.getByTestId('popover-close')).toBeInTheDocument();
   });
+  it('renders WhatsNewPopup component and shows blockaid messages', () => {
+    render();
+    expect(
+      screen.getByTestId('whats-new-description-item-0'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId('whats-new-description-item-1'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId('whats-new-description-item-2'),
+    ).toBeInTheDocument();
+  });
 });

ui/selectors/selectors.js

@@ -1008,6 +1008,9 @@ function getAllowedAnnouncementIds(state) {
     19: false,
     20: currentKeyringIsLedger && isFirefox,
     21: isSwapsChain,
+    ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+    23: true,
+    ///: END:ONLY_INCLUDE_IN
   };
 }