m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00
Code

Adding "What's New" notification for Ledger Support Update (#11188)

Browse Source 
* Adding "What's New" notification for Ledger Support Update

* Using Typography component
This commit is contained in:
ryanml 2021-05-26 14:29:19 -07:00
parent dec34fa4c6
commit 939a34f16c
11 changed files with 87 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/_locales/en/messages.json
View File

@ -1270,6 +1270,22 @@
"message": "Stay secure",
"description": "Title for a notification in the 'See What's New' popup. Encourages users to consider security."
},
"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."
},
"notifications6DescriptionThree": {
"message": "When interacting with your Ledger account in MetaMask, a new tab will open and you will be asked to open the Ledger Live app. Once the app opens, you'll be asked to allow a WebSocket connection to your MetaMask account. That's all!",
"description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
},
"notifications6DescriptionTwo": {
"message": "You can enable Ledger Live support by clicking Settings > Advanced > Use Ledger Live.",
"description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
},
"notifications6Title": {
"message": "Ledger Support Update for Chrome Users",
"description": "Title for a notification in the 'See What's New' popup. Lets users know about the Ledger support update"
},
"ofTextNofM": {
"message": "of"
},

16
shared/notifications/index.js
View File

@ -18,6 +18,10 @@ export const UI_NOTIFICATIONS = {
id: 3,
date: '2021-03-08',
},
6: {
id: 6,
date: '2021-05-26',
},
};
export const getTranslatedUINoficiations = (t, locale) => {
@ -49,5 +53,17 @@ export const getTranslatedUINoficiations = (t, locale) => {
new Date(UI_NOTIFICATIONS[3].date),
),
},
6: {
...UI_NOTIFICATIONS[6],
title: t('notifications6Title'),
description: [
t('notifications6DescriptionOne'),
t('notifications6DescriptionTwo'),
t('notifications6DescriptionThree'),
],
date: new Intl.DateTimeFormat(locale).format(
new Date(UI_NOTIFICATIONS[6].date),
),
},
};
};

3
test/e2e/fixtures/address-entry/state.json
View File

@ -60,6 +60,9 @@
},
"3": {
"isShown": true
},
"6": {
"isShown": true
}
}
},

3
test/e2e/fixtures/connected-state/state.json
View File

@ -50,6 +50,9 @@
},
"3": {
"isShown": true
},
"6": {
"isShown": true
}
}
},

3
test/e2e/fixtures/import-ui/state.json
View File

@ -101,6 +101,9 @@
},
"3": {
"isShown": true
},
"6": {
"isShown": true
}
}
},

3
test/e2e/fixtures/imported-account/state.json
View File

@ -46,6 +46,9 @@
},
"3": {
"isShown": true
},
"6": {
"isShown": true
}
}
},

3
test/e2e/fixtures/localization/state.json
View File

@ -46,6 +46,9 @@
},
"3": {
"isShown": true
},
"6": {
"isShown": true
}
}
},

3
test/e2e/fixtures/metrics-enabled/state.json
View File

@ -50,6 +50,9 @@
},
"3": {
"isShown": true
},
"6": {
"isShown": true
}
}
},

3
test/e2e/fixtures/send-edit/state.json
View File

@ -47,6 +47,9 @@
},
"3": {
"isShown": true
},
"6": {
"isShown": true
}
}
},

3
test/e2e/fixtures/threebox-enabled/state.json
View File

@ -57,6 +57,9 @@
},
"3": {
"isShown": true
},
"6": {
"isShown": true
}
}
},

35
ui/app/components/app/whats-new-popup/whats-new-popup.js
View File

@ -7,9 +7,11 @@ import { I18nContext } from '../../../contexts/i18n';
import { useEqualityCheck } from '../../../hooks/useEqualityCheck';
import Button from '../../ui/button';
import Popover from '../../ui/popover';
import Typography from '../../ui/typography';
import { updateViewedNotifications } from '../../../store/actions';
import { getTranslatedUINoficiations } from '../../../../../shared/notifications';
import { getSortedNotificationsToShow } from '../../../selectors';
import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
function getActionFunctionById(id) {
const actionFunctions = {
@ -29,6 +31,31 @@ function getActionFunctionById(id) {
return actionFunctions[id];
}
const renderDescription = (description) => {
if (!Array.isArray(description)) {
return (
<Typography variant={TYPOGRAPHY.Paragraph}>{description}</Typography>
);
}
return (
<>
{description.map((piece, index) => {
const isLast = index === description.length - 1;
return (
<Typography
key={`item-${index}`}
variant={TYPOGRAPHY.Paragraph}
boxProps={{ marginBottom: isLast ? 0 : 2 }}
>
{piece}
</Typography>
);
})}
</>
);
};
const renderFirstNotification = (notification, idRefMap) => {
const { id, date, title, description, image, actionText } = notification;
const actionFunction = getActionFunctionById(id);
@ -46,14 +73,14 @@ const renderFirstNotification = (notification, idRefMap) => {
className={classnames(
'whats-new-popup__notification whats-new-popup__first-notification',
)}
key={`whats-new-popop-notificatiion-${id}`}
key={`whats-new-popop-notification-${id}`}
ref={idRefMap[id]}
>
{!placeImageBelowDescription && imageComponent}
<div className="whats-new-popup__notification-title">{title}</div>
<div className="whats-new-popup__description-and-date">
<div className="whats-new-popup__notification-description">
{description}
{renderDescription(description)}
</div>
<div className="whats-new-popup__notification-date">{date}</div>
</div>
@ -79,13 +106,13 @@ const renderSubsequentNotification = (notification, idRefMap) => {
return (
<div
className={classnames('whats-new-popup__notification')}
key={`whats-new-popop-notificatiion-${id}`}
key={`whats-new-popop-notification-${id}`}
ref={idRefMap[id]}
>
<div className="whats-new-popup__notification-title">{title}</div>
<div className="whats-new-popup__description-and-date">
<div className="whats-new-popup__notification-description">
{description}
{renderDescription(description)}
</div>
<div className="whats-new-popup__notification-date">{date}</div>
</div>