diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 018c671a1..7461970bf 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -2885,6 +2885,14 @@ "notifications9Title": { "message": "👓 We are making transactions easier to read." }, + "notificationsDropLedgerFirefoxDescription": { + "message": "Firefox no longer supports U2F, so Ledger won't work with MetaMask on Firefox. Try MetaMask on Google Chrome instead.", + "description": "Description of a notification in the 'See What's New' popup. Describes that ledger will not longer be supported for firefox users and they should use MetaMask on chrome for ledger support instead." + }, + "notificationsDropLedgerFirefoxTitle": { + "message": "Dropping Ledger Support for Firefox", + "description": "Title for a notification in the 'See What's New' popup. Tells firefox users that ledger support is being dropped." + }, "notificationsEmptyText": { "message": "This is where you can find notifications from your installed snaps." }, diff --git a/shared/notifications/index.js b/shared/notifications/index.js index 7c78a3961..6d21190f4 100644 --- a/shared/notifications/index.js +++ b/shared/notifications/index.js @@ -1,4 +1,11 @@ // Messages and descriptions for these locale keys are in app/_locales/en/messages.json + +/** + * I'm trying something new here, where notifications get names that are translated + * into numbers in only one place. This should make merge conflicts easier. + */ +export const NOTIFICATION_DROP_LEDGER_FIREFOX = 25; + export const UI_NOTIFICATIONS = { 1: { id: 1, @@ -135,6 +142,11 @@ export const UI_NOTIFICATIONS = { id: 24, date: null, }, + // This syntax is unusual, but very helpful here. It's equivalent to `UI_NOTIFICATIONS[NOTIFICATION_DROP_LEDGER_FIREFOX] =` + [NOTIFICATION_DROP_LEDGER_FIREFOX]: { + id: Number(NOTIFICATION_DROP_LEDGER_FIREFOX), + date: null, + }, }; export const getTranslatedUINotifications = (t, locale) => { @@ -373,5 +385,16 @@ export const getTranslatedUINotifications = (t, locale) => { ) : '', }, + // This syntax is unusual, but very helpful here. It's equivalent to `unnamedObject[NOTIFICATION_DROP_LEDGER_FIREFOX] =` + [NOTIFICATION_DROP_LEDGER_FIREFOX]: { + ...UI_NOTIFICATIONS[NOTIFICATION_DROP_LEDGER_FIREFOX], + title: t('notificationsDropLedgerFirefoxTitle'), + description: [t('notificationsDropLedgerFirefoxDescription')], + date: UI_NOTIFICATIONS[NOTIFICATION_DROP_LEDGER_FIREFOX].date + ? new Intl.DateTimeFormat(formattedLocale).format( + new Date(UI_NOTIFICATIONS[NOTIFICATION_DROP_LEDGER_FIREFOX].date), + ) + : '', + }, }; }; 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 fc0b387de..9372746db 100644 --- a/ui/components/app/whats-new-popup/whats-new-popup.js +++ b/ui/components/app/whats-new-popup/whats-new-popup.js @@ -16,7 +16,10 @@ import { ///: END:ONLY_INCLUDE_IN } from '../../component-library'; import { updateViewedNotifications } from '../../../store/actions'; -import { getTranslatedUINotifications } from '../../../../shared/notifications'; +import { + NOTIFICATION_DROP_LEDGER_FIREFOX, + getTranslatedUINotifications, +} from '../../../../shared/notifications'; import { getSortedAnnouncementsToShow } from '../../../selectors'; import { BUILD_QUOTE_ROUTE, @@ -395,6 +398,8 @@ export default function WhatsNewPopup({ 23: renderFirstNotification, ///: END:ONLY_INCLUDE_IN 24: renderFirstNotification, + // This syntax is unusual, but very helpful here. It's equivalent to `notificationRenderers[NOTIFICATION_DROP_LEDGER_FIREFOX] =` + [NOTIFICATION_DROP_LEDGER_FIREFOX]: renderFirstNotification, }; return ( diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index 2cb076670..1ccb6eb09 100644 --- a/ui/selectors/selectors.js +++ b/ui/selectors/selectors.js @@ -93,6 +93,7 @@ import { hexToDecimal, } from '../../shared/modules/conversion.utils'; import { BackgroundColor } from '../helpers/constants/design-system'; +import { NOTIFICATION_DROP_LEDGER_FIREFOX } from '../../shared/notifications'; ///: BEGIN:ONLY_INCLUDE_IN(snaps) import { SNAPS_VIEW_ROUTE } from '../helpers/constants/routes'; import { getPermissionSubjects } from './permissions'; @@ -1049,6 +1050,8 @@ function getAllowedAnnouncementIds(state) { 23: true, ///: END:ONLY_INCLUDE_IN 24: state.metamask.hadAdvancedGasFeesSetPriorToMigration92_3 === true, + // This syntax is unusual, but very helpful here. It's equivalent to `unnamedObject[NOTIFICATION_DROP_LEDGER_FIREFOX] =` + [NOTIFICATION_DROP_LEDGER_FIREFOX]: currentKeyringIsLedger && isFirefox, }; }