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."
+  },
   "ofTextNofM": {
     "message": "of"
   },

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%',
+    },
+  },
 };
 
 export const getTranslatedUINoficiations = (t, locale) => {
@@ -49,5 +57,14 @@ 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(locale).format(
+        new Date(UI_NOTIFICATIONS[4].date),
+      ),
+    },
   };
 };

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

@@ -12,6 +12,12 @@
     border-bottom: 1px solid $Grey-100;
   }
 
+  &__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';
@@ -10,8 +11,9 @@ import Popover from '../../ui/popover';
 import { updateViewedNotifications } from '../../../store/actions';
 import { getTranslatedUINoficiations } from '../../../../shared/notifications';
 import { getSortedNotificationsToShow } from '../../../selectors';
+import { BUILD_QUOTE_ROUTE } from '../../../helpers/constants/routes';
 
-function getActionFunctionById(id) {
+function getActionFunctionById(id, history) {
   const actionFunctions = {
     2: () => {
       global.platform.openTab({
@@ -24,14 +26,18 @@ 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];
 }
 
-const renderFirstNotification = (notification, idRefMap) => {
+const renderFirstNotification = (notification, idRefMap, history) => {
   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"
@@ -72,10 +78,10 @@ const renderFirstNotification = (notification, idRefMap) => {
   );
 };
 
-const renderSubsequentNotification = (notification, idRefMap) => {
+const renderSubsequentNotification = (notification, idRefMap, history) => {
   const { id, date, title, description, actionText } = notification;
 
-  const actionFunction = getActionFunctionById(id);
+  const actionFunction = getActionFunctionById(id, history);
   return (
     <div
       className={classnames('whats-new-popup__notification')}
@@ -100,6 +106,7 @@ const renderSubsequentNotification = (notification, idRefMap) => {
 
 export default function WhatsNewPopup({ onClose }) {
   const t = useContext(I18nContext);
+  const history = useHistory();
 
   const notifications = useSelector(getSortedNotificationsToShow);
   const locale = useSelector(getCurrentLocale);
@@ -168,8 +175,8 @@ export default function WhatsNewPopup({ onClose }) {
         {notifications.map(({ id }, index) => {
           const notification = getTranslatedUINoficiations(t, locale)[id];
           return index === 0
-            ? renderFirstNotification(notification, idRefMap)
-            : renderSubsequentNotification(notification, idRefMap);
+            ? renderFirstNotification(notification, idRefMap, history)
+            : renderSubsequentNotification(notification, idRefMap, history);
         })}
       </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,
@@ -519,6 +520,20 @@ 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,
+  };
+}
+
 /**
  * @typedef {Object} Notification
  * @property {number} id - A unique identifier for the notification
@@ -539,8 +554,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),