From 7acb33c9764d7478a49fff93d91b21aca9e11517 Mon Sep 17 00:00:00 2001
From: Daniel <80175477+dan437@users.noreply.github.com>
Date: Fri, 14 May 2021 19:17:56 +0200
Subject: [PATCH] Show a notification about BSC Swaps if a user is on the BSC
Mainnet (#11083)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* 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 | 12 +++
app/images/source-logos-bsc.svg | 100 ++++++++++++++++++
shared/notifications/index.js | 17 +++
ui/components/app/whats-new-popup/index.scss | 6 ++
.../app/whats-new-popup/whats-new-popup.js | 21 ++--
ui/selectors/selectors.js | 19 +++-
6 files changed, 167 insertions(+), 8 deletions(-)
create mode 100644 app/images/source-logos-bsc.svg
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 65cd9884d..67365406a 100644
--- a/app/_locales/en/messages.json
+++ b/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"
},
diff --git a/app/images/source-logos-bsc.svg b/app/images/source-logos-bsc.svg
new file mode 100644
index 000000000..cfb0c8440
--- /dev/null
+++ b/app/images/source-logos-bsc.svg
@@ -0,0 +1,100 @@
+
diff --git a/shared/notifications/index.js b/shared/notifications/index.js
index ea1f31706..b84e3e162 100644
--- a/shared/notifications/index.js
+++ b/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),
+ ),
+ },
};
};
diff --git a/ui/components/app/whats-new-popup/index.scss b/ui/components/app/whats-new-popup/index.scss
index 8f2aca460..b55c41b14 100644
--- a/ui/components/app/whats-new-popup/index.scss
+++ b/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;
diff --git a/ui/components/app/whats-new-popup/whats-new-popup.js b/ui/components/app/whats-new-popup/whats-new-popup.js
index fb404e554..e63dd5fc0 100644
--- a/ui/components/app/whats-new-popup/whats-new-popup.js
+++ b/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 && (
![]()
{
);
};
-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 (
{
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);
})}
diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
index 6b99e15c3..a810b70ab 100644
--- a/ui/selectors/selectors.js
+++ b/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),