diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index bda06fe82..e864d40f2 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1295,6 +1295,22 @@ "message": "Your \"Seed Phrase\" is now called your \"Secret Recovery Phrase.\"", "description": "Description of a notification in the 'See What's New' popup. Describes the seed phrase wording update." }, + "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 ee5aabbe5..8311693ea 100644 --- a/shared/notifications/index.js +++ b/shared/notifications/index.js @@ -26,6 +26,10 @@ export const UI_NOTIFICATIONS = { id: 5, date: '2021-05-18', }, + 6: { + id: 6, + date: '2021-05-26', + }, }; export const getTranslatedUINoficiations = (t, locale) => { @@ -66,5 +70,17 @@ export const getTranslatedUINoficiations = (t, locale) => { new Date(UI_NOTIFICATIONS[5].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 abf7e220c..0bc9f3b9d 100644 --- a/test/e2e/fixtures/address-entry/state.json +++ b/test/e2e/fixtures/address-entry/state.json @@ -60,6 +60,9 @@ }, "5": { "isShown": true + }, + "6": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/connected-state/state.json b/test/e2e/fixtures/connected-state/state.json index 4f3e724af..baebea6b7 100644 --- a/test/e2e/fixtures/connected-state/state.json +++ b/test/e2e/fixtures/connected-state/state.json @@ -50,6 +50,9 @@ }, "5": { "isShown": true + }, + "6": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/custom-rpc/state.json b/test/e2e/fixtures/custom-rpc/state.json index df646bb0d..aa93a938c 100644 --- a/test/e2e/fixtures/custom-rpc/state.json +++ b/test/e2e/fixtures/custom-rpc/state.json @@ -46,6 +46,9 @@ }, "5": { "isShown": true + }, + "6": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/import-ui/state.json b/test/e2e/fixtures/import-ui/state.json index 380d28b22..1e6572574 100644 --- a/test/e2e/fixtures/import-ui/state.json +++ b/test/e2e/fixtures/import-ui/state.json @@ -101,6 +101,9 @@ }, "5": { "isShown": true + }, + "6": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/imported-account/state.json b/test/e2e/fixtures/imported-account/state.json index fc3ea0a4f..7c4a2108a 100644 --- a/test/e2e/fixtures/imported-account/state.json +++ b/test/e2e/fixtures/imported-account/state.json @@ -46,6 +46,9 @@ }, "5": { "isShown": true + }, + "6": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/localization/state.json b/test/e2e/fixtures/localization/state.json index d0ddfd0f9..009e8ac77 100644 --- a/test/e2e/fixtures/localization/state.json +++ b/test/e2e/fixtures/localization/state.json @@ -46,6 +46,9 @@ }, "5": { "isShown": true + }, + "6": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/metrics-enabled/state.json b/test/e2e/fixtures/metrics-enabled/state.json index 91e3553d2..8e0f082d5 100644 --- a/test/e2e/fixtures/metrics-enabled/state.json +++ b/test/e2e/fixtures/metrics-enabled/state.json @@ -50,6 +50,9 @@ }, "5": { "isShown": true + }, + "6": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/send-edit/state.json b/test/e2e/fixtures/send-edit/state.json index 228cf7004..a5f3a8bab 100644 --- a/test/e2e/fixtures/send-edit/state.json +++ b/test/e2e/fixtures/send-edit/state.json @@ -47,6 +47,9 @@ }, "5": { "isShown": true + }, + "6": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/threebox-enabled/state.json b/test/e2e/fixtures/threebox-enabled/state.json index 5908d0a25..f182c5d47 100644 --- a/test/e2e/fixtures/threebox-enabled/state.json +++ b/test/e2e/fixtures/threebox-enabled/state.json @@ -57,6 +57,9 @@ }, "5": { "isShown": true + }, + "6": { + "isShown": true } } }, 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 df0656810..0c9ce98d2 100644 --- a/ui/components/app/whats-new-popup/whats-new-popup.js +++ b/ui/components/app/whats-new-popup/whats-new-popup.js @@ -8,10 +8,12 @@ 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 { BUILD_QUOTE_ROUTE } from '../../../helpers/constants/routes'; +import { TYPOGRAPHY } from '../../../helpers/constants/design-system'; function getActionFunctionById(id, history) { const actionFunctions = { @@ -41,6 +43,31 @@ function getActionFunctionById(id, history) { 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, history) => { const { id, date, title, description, image, actionText } = notification; const actionFunction = getActionFunctionById(id, history); @@ -58,14 +85,14 @@ const renderFirstNotification = (notification, idRefMap, history) => { 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}
@@ -91,13 +118,13 @@ const renderSubsequentNotification = (notification, idRefMap, history) => { return (
{title}
- {description} + {renderDescription(description)}
{date}
diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index 5b429c8f7..70c249ed1 100644 --- a/ui/selectors/selectors.js +++ b/ui/selectors/selectors.js @@ -529,6 +529,7 @@ function getAllowedNotificationIds(state) { 3: true, 4: getCurrentChainId(state) === BSC_CHAIN_ID, 5: true, + 6: true, }; }