add whatsnew popup to drop ledger support for firefox (#19498)

* add whatsnew popup to drop ledger support for firefox

* add missing 21 ui notification

* improved look of notification

* added NOTIFICATION_DROP_LEDGER_FIREFOX to prep for merge with develop

---------

Co-authored-by: Howard Braham <howrad@gmail.com>

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."
   },

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),
+          )
+        : '',
+    },
   };
 };

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 (

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,
   };
 }