Show a notification about BSC Swaps if a user is on the BSC Mainnet (#11083)

* Add a notification for BSC Swaps

* Add a new logo for BSC sources, update an image for BSC notification

* Mark a BSC notification as seen when a user clicks on “Start swapping”

* Add conditional rendering of notifications

* Remove divider for the last notification

* Remove a divider for the last notification

* Remove !

* Trigger pipeline

app/_locales/en/messages.json

@@ -1282,6 +1282,18 @@
     "message": "Stay secure",
     "description": "Title for a notification in the 'See What's New' popup. Encourages users to consider security."
   },
+  "notifications4ActionText": {
+    "message": "Start swapping",
+    "description": "The 'call to action' on the button, or link, of the 'Swap on Binance Smart Chain!' notification. Upon clicking, users will be taken to a page where then can swap tokens on Binance Smart Chain."
+  },
+  "notifications4Description": {
+    "message": "Get the best prices on token swaps right inside your wallet. MetaMask now connects you to multiple decentralized exchange aggregators and professional market makers on Binance Smart Chain.",
+    "description": "Description of a notification in the 'See What's New' popup."
+  },
+  "notifications4Title": {
+    "message": "Swap on Binance Smart Chain",
+    "description": "Title for a notification in the 'See What's New' popup. Encourages users to do swaps on Binance Smart Chain."
+  },
   "notifications6DescriptionOne": {
     "message": "As of Chrome version 91, the API that enabled our Ledger support (U2F) no longer supports hardware wallets. MetaMask has implemented a new Ledger Live support that allows you to continue to connect to your Ledger device via the Ledger Live desktop app.",
     "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."

shared/notifications/index.js

@@ -18,6 +18,14 @@ export const UI_NOTIFICATIONS = {
     id: 3,
     date: '2021-03-08',
   },
+  4: {
+    id: 4,
+    date: '2021-05-11',
+    image: {
+      src: 'images/source-logos-bsc.svg',
+      width: '100%',
+    },
+  },
   6: {
     id: 6,
     date: '2021-05-26',
@@ -53,6 +61,15 @@ export const getTranslatedUINoficiations = (t, locale) => {
         new Date(UI_NOTIFICATIONS[3].date),
       ),
     },
+    4: {
+      ...UI_NOTIFICATIONS[4],
+      title: t('notifications4Title'),
+      description: t('notifications4Description'),
+      actionText: t('notifications4ActionText'),
+      date: new Intl.DateTimeFormat(formattedLocale).format(
+        new Date(UI_NOTIFICATIONS[4].date),
+      ),
+    },
     6: {
       ...UI_NOTIFICATIONS[6],
       title: t('notifications6Title'),

ui/components/app/whats-new-popup/index.scss

@@ -25,6 +25,12 @@
     }
   }
 
+  &__notification {
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
   &__notification-image {
     align-self: center;
     margin-bottom: 16px;

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

@@ -1,4 +1,5 @@
 import React, { useContext, useMemo, useRef, useState, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -12,8 +13,9 @@ import { updateViewedNotifications } from '../../../store/actions';
 import { getTranslatedUINoficiations } from '../../../../shared/notifications';
 import { getSortedNotificationsToShow } from '../../../selectors';
 import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
+import { BUILD_QUOTE_ROUTE } from '../../../helpers/constants/routes';
 
-function getActionFunctionById(id) {
+function getActionFunctionById(id, history) {
   const actionFunctions = {
     2: () => {
       global.platform.openTab({
@@ -26,6 +28,10 @@ function getActionFunctionById(id) {
         url: 'https://community.metamask.io/t/about-the-security-category/72',
       });
     },
+    4: () => {
+      updateViewedNotifications({ 4: true });
+      history.push(BUILD_QUOTE_ROUTE);
+    },
   };
 
   return actionFunctions[id];
@@ -56,9 +62,9 @@ const renderDescription = (description) => {
   );
 };
 
-const renderFirstNotification = (notification, idRefMap, isLast) => {
+const renderFirstNotification = (notification, idRefMap, history, isLast) => {
   const { id, date, title, description, image, actionText } = notification;
-  const actionFunction = getActionFunctionById(id);
+  const actionFunction = getActionFunctionById(id, history);
   const imageComponent = image && (
     <img
       className="whats-new-popup__notification-image"
@@ -105,10 +111,15 @@ const renderFirstNotification = (notification, idRefMap, isLast) => {
   );
 };
 
-const renderSubsequentNotification = (notification, idRefMap, isLast) => {
+const renderSubsequentNotification = (
+  notification,
+  idRefMap,
+  history,
+  isLast,
+) => {
   const { id, date, title, description, actionText } = notification;
 
-  const actionFunction = getActionFunctionById(id);
+  const actionFunction = getActionFunctionById(id, history);
   return (
     <div
       className={classnames('whats-new-popup__notification', {
@@ -138,6 +149,7 @@ const renderSubsequentNotification = (notification, idRefMap, isLast) => {
 
 export default function WhatsNewPopup({ onClose }) {
   const t = useContext(I18nContext);
+  const history = useHistory();
 
   const notifications = useSelector(getSortedNotificationsToShow);
   const locale = useSelector(getCurrentLocale);
@@ -208,8 +220,13 @@ export default function WhatsNewPopup({ onClose }) {
           const isLast = index === notifications.length - 1;
           // Display the swaps notification with full image
           return index === 0 || id === 1
-            ? renderFirstNotification(notification, idRefMap, isLast)
+            ? renderFirstNotification(notification, idRefMap, history, isLast)
-            : renderSubsequentNotification(notification, idRefMap, isLast);
+            : renderSubsequentNotification(
+                notification,
+                idRefMap,
+                history,
+                isLast,
+              );
         })}
       </div>
     </Popover>

ui/selectors/selectors.js

@@ -3,6 +3,7 @@ import { createSelector } from 'reselect';
 import { addHexPrefix } from '../../app/scripts/lib/util';
 import {
   MAINNET_CHAIN_ID,
+  BSC_CHAIN_ID,
   TEST_CHAINS,
   NETWORK_TYPE_RPC,
   NATIVE_CURRENCY_TOKEN_IMAGE_MAP,
@@ -516,6 +517,21 @@ export function getShowWhatsNewPopup(state) {
   return state.appState.showWhatsNewPopup;
 }
 
+/**
+ * Get an object of notification IDs and if they are allowed or not.
+ * @param {Object} state
+ * @returns {Object}
+ */
+function getAllowedNotificationIds(state) {
+  return {
+    1: true,
+    2: true,
+    3: true,
+    4: getCurrentChainId(state) === BSC_CHAIN_ID,
+    6: true,
+  };
+}
+
 /**
  * @typedef {Object} Notification
  * @property {number} id - A unique identifier for the notification
@@ -536,8 +552,10 @@ export function getShowWhatsNewPopup(state) {
 
 export function getSortedNotificationsToShow(state) {
   const notifications = Object.values(state.metamask.notifications);
+  const allowedNotificationIds = getAllowedNotificationIds(state);
   const notificationsToShow = notifications.filter(
-    (notification) => !notification.isShown,
+    (notification) =>
+      !notification.isShown && allowedNotificationIds[notification.id],
   );
   const notificationsSortedByDate = notificationsToShow.sort(
     (a, b) => new Date(b.date) - new Date(a.date),