diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index a593774a3..66dcee019 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -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" }, diff --git a/shared/notifications/index.js b/shared/notifications/index.js index ea1f31706..ac14fc8da 100644 --- a/shared/notifications/index.js +++ b/shared/notifications/index.js @@ -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), + ), + }, }; }; diff --git a/test/e2e/fixtures/address-entry/state.json b/test/e2e/fixtures/address-entry/state.json index e53e3a922..1c6f7c010 100644 --- a/test/e2e/fixtures/address-entry/state.json +++ b/test/e2e/fixtures/address-entry/state.json @@ -60,6 +60,9 @@ }, "3": { "isShown": true + }, + "6": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/connected-state/state.json b/test/e2e/fixtures/connected-state/state.json index a88a31a74..b4f9f8e11 100644 --- a/test/e2e/fixtures/connected-state/state.json +++ b/test/e2e/fixtures/connected-state/state.json @@ -50,6 +50,9 @@ }, "3": { "isShown": true + }, + "6": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/import-ui/state.json b/test/e2e/fixtures/import-ui/state.json index 350ed8848..920793cd7 100644 --- a/test/e2e/fixtures/import-ui/state.json +++ b/test/e2e/fixtures/import-ui/state.json @@ -101,6 +101,9 @@ }, "3": { "isShown": true + }, + "6": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/imported-account/state.json b/test/e2e/fixtures/imported-account/state.json index a3d51e5d5..24396e734 100644 --- a/test/e2e/fixtures/imported-account/state.json +++ b/test/e2e/fixtures/imported-account/state.json @@ -46,6 +46,9 @@ }, "3": { "isShown": true + }, + "6": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/localization/state.json b/test/e2e/fixtures/localization/state.json index 22d76151b..eb90a0398 100644 --- a/test/e2e/fixtures/localization/state.json +++ b/test/e2e/fixtures/localization/state.json @@ -46,6 +46,9 @@ }, "3": { "isShown": true + }, + "6": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/metrics-enabled/state.json b/test/e2e/fixtures/metrics-enabled/state.json index 2fa9931c5..5b107f9c4 100644 --- a/test/e2e/fixtures/metrics-enabled/state.json +++ b/test/e2e/fixtures/metrics-enabled/state.json @@ -50,6 +50,9 @@ }, "3": { "isShown": true + }, + "6": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/send-edit/state.json b/test/e2e/fixtures/send-edit/state.json index c5c548f4c..c93539f3a 100644 --- a/test/e2e/fixtures/send-edit/state.json +++ b/test/e2e/fixtures/send-edit/state.json @@ -47,6 +47,9 @@ }, "3": { "isShown": true + }, + "6": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/threebox-enabled/state.json b/test/e2e/fixtures/threebox-enabled/state.json index 8bac5f889..5b6cf9bce 100644 --- a/test/e2e/fixtures/threebox-enabled/state.json +++ b/test/e2e/fixtures/threebox-enabled/state.json @@ -57,6 +57,9 @@ }, "3": { "isShown": true + }, + "6": { + "isShown": true } } }, diff --git a/ui/app/components/app/whats-new-popup/whats-new-popup.js b/ui/app/components/app/whats-new-popup/whats-new-popup.js index 3eaad0af3..499d2ee45 100644 --- a/ui/app/components/app/whats-new-popup/whats-new-popup.js +++ b/ui/app/components/app/whats-new-popup/whats-new-popup.js @@ -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 ( + {description} + ); + } + + return ( + <> + {description.map((piece, index) => { + const isLast = index === description.length - 1; + return ( + + {piece} + + ); + })} + + ); +}; + 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}
{title}
- {description} + {renderDescription(description)}
{date}
@@ -79,13 +106,13 @@ const renderSubsequentNotification = (notification, idRefMap) => { return (
{title}
- {description} + {renderDescription(description)}
{date}