mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
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
This commit is contained in:
parent
3f70afb3ff
commit
e4ac5eed94
@ -1282,6 +1282,18 @@
|
|||||||
"message": "Stay secure",
|
"message": "Stay secure",
|
||||||
"description": "Title for a notification in the 'See What's New' popup. Encourages users to consider security."
|
"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": {
|
"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.",
|
"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."
|
"description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
|
||||||
|
100
app/images/source-logos-bsc.svg
Normal file
100
app/images/source-logos-bsc.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 99 KiB |
@ -18,6 +18,14 @@ export const UI_NOTIFICATIONS = {
|
|||||||
id: 3,
|
id: 3,
|
||||||
date: '2021-03-08',
|
date: '2021-03-08',
|
||||||
},
|
},
|
||||||
|
4: {
|
||||||
|
id: 4,
|
||||||
|
date: '2021-05-11',
|
||||||
|
image: {
|
||||||
|
src: 'images/source-logos-bsc.svg',
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
},
|
||||||
6: {
|
6: {
|
||||||
id: 6,
|
id: 6,
|
||||||
date: '2021-05-26',
|
date: '2021-05-26',
|
||||||
@ -53,6 +61,15 @@ export const getTranslatedUINoficiations = (t, locale) => {
|
|||||||
new Date(UI_NOTIFICATIONS[3].date),
|
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: {
|
6: {
|
||||||
...UI_NOTIFICATIONS[6],
|
...UI_NOTIFICATIONS[6],
|
||||||
title: t('notifications6Title'),
|
title: t('notifications6Title'),
|
||||||
|
@ -25,6 +25,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__notification {
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__notification-image {
|
&__notification-image {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import React, { useContext, useMemo, useRef, useState, useEffect } from 'react';
|
import React, { useContext, useMemo, useRef, useState, useEffect } from 'react';
|
||||||
|
import { useHistory } from 'react-router-dom';
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
@ -12,8 +13,9 @@ import { updateViewedNotifications } from '../../../store/actions';
|
|||||||
import { getTranslatedUINoficiations } from '../../../../shared/notifications';
|
import { getTranslatedUINoficiations } from '../../../../shared/notifications';
|
||||||
import { getSortedNotificationsToShow } from '../../../selectors';
|
import { getSortedNotificationsToShow } from '../../../selectors';
|
||||||
import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
|
import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
|
||||||
|
import { BUILD_QUOTE_ROUTE } from '../../../helpers/constants/routes';
|
||||||
|
|
||||||
function getActionFunctionById(id) {
|
function getActionFunctionById(id, history) {
|
||||||
const actionFunctions = {
|
const actionFunctions = {
|
||||||
2: () => {
|
2: () => {
|
||||||
global.platform.openTab({
|
global.platform.openTab({
|
||||||
@ -26,6 +28,10 @@ function getActionFunctionById(id) {
|
|||||||
url: 'https://community.metamask.io/t/about-the-security-category/72',
|
url: 'https://community.metamask.io/t/about-the-security-category/72',
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
4: () => {
|
||||||
|
updateViewedNotifications({ 4: true });
|
||||||
|
history.push(BUILD_QUOTE_ROUTE);
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
return actionFunctions[id];
|
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 { id, date, title, description, image, actionText } = notification;
|
||||||
const actionFunction = getActionFunctionById(id);
|
const actionFunction = getActionFunctionById(id, history);
|
||||||
const imageComponent = image && (
|
const imageComponent = image && (
|
||||||
<img
|
<img
|
||||||
className="whats-new-popup__notification-image"
|
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 { id, date, title, description, actionText } = notification;
|
||||||
|
|
||||||
const actionFunction = getActionFunctionById(id);
|
const actionFunction = getActionFunctionById(id, history);
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={classnames('whats-new-popup__notification', {
|
className={classnames('whats-new-popup__notification', {
|
||||||
@ -138,6 +149,7 @@ const renderSubsequentNotification = (notification, idRefMap, isLast) => {
|
|||||||
|
|
||||||
export default function WhatsNewPopup({ onClose }) {
|
export default function WhatsNewPopup({ onClose }) {
|
||||||
const t = useContext(I18nContext);
|
const t = useContext(I18nContext);
|
||||||
|
const history = useHistory();
|
||||||
|
|
||||||
const notifications = useSelector(getSortedNotificationsToShow);
|
const notifications = useSelector(getSortedNotificationsToShow);
|
||||||
const locale = useSelector(getCurrentLocale);
|
const locale = useSelector(getCurrentLocale);
|
||||||
@ -208,8 +220,13 @@ export default function WhatsNewPopup({ onClose }) {
|
|||||||
const isLast = index === notifications.length - 1;
|
const isLast = index === notifications.length - 1;
|
||||||
// Display the swaps notification with full image
|
// Display the swaps notification with full image
|
||||||
return index === 0 || id === 1
|
return index === 0 || id === 1
|
||||||
? renderFirstNotification(notification, idRefMap, isLast)
|
? renderFirstNotification(notification, idRefMap, history, isLast)
|
||||||
: renderSubsequentNotification(notification, idRefMap, isLast);
|
: renderSubsequentNotification(
|
||||||
|
notification,
|
||||||
|
idRefMap,
|
||||||
|
history,
|
||||||
|
isLast,
|
||||||
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
</Popover>
|
</Popover>
|
||||||
|
@ -3,6 +3,7 @@ import { createSelector } from 'reselect';
|
|||||||
import { addHexPrefix } from '../../app/scripts/lib/util';
|
import { addHexPrefix } from '../../app/scripts/lib/util';
|
||||||
import {
|
import {
|
||||||
MAINNET_CHAIN_ID,
|
MAINNET_CHAIN_ID,
|
||||||
|
BSC_CHAIN_ID,
|
||||||
TEST_CHAINS,
|
TEST_CHAINS,
|
||||||
NETWORK_TYPE_RPC,
|
NETWORK_TYPE_RPC,
|
||||||
NATIVE_CURRENCY_TOKEN_IMAGE_MAP,
|
NATIVE_CURRENCY_TOKEN_IMAGE_MAP,
|
||||||
@ -516,6 +517,21 @@ export function getShowWhatsNewPopup(state) {
|
|||||||
return state.appState.showWhatsNewPopup;
|
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
|
* @typedef {Object} Notification
|
||||||
* @property {number} id - A unique identifier for the notification
|
* @property {number} id - A unique identifier for the notification
|
||||||
@ -536,8 +552,10 @@ export function getShowWhatsNewPopup(state) {
|
|||||||
|
|
||||||
export function getSortedNotificationsToShow(state) {
|
export function getSortedNotificationsToShow(state) {
|
||||||
const notifications = Object.values(state.metamask.notifications);
|
const notifications = Object.values(state.metamask.notifications);
|
||||||
|
const allowedNotificationIds = getAllowedNotificationIds(state);
|
||||||
const notificationsToShow = notifications.filter(
|
const notificationsToShow = notifications.filter(
|
||||||
(notification) => !notification.isShown,
|
(notification) =>
|
||||||
|
!notification.isShown && allowedNotificationIds[notification.id],
|
||||||
);
|
);
|
||||||
const notificationsSortedByDate = notificationsToShow.sort(
|
const notificationsSortedByDate = notificationsToShow.sort(
|
||||||
(a, b) => new Date(b.date) - new Date(a.date),
|
(a, b) => new Date(b.date) - new Date(a.date),
|
||||||
|
Loading…
Reference in New Issue
Block a user