From 907cd8b7d1069c176ef9bac8d10e58a2b3f774a8 Mon Sep 17 00:00:00 2001
From: Monte Lai <monte.lai@consensys.net>
Date: Sat, 2 Sep 2023 00:38:04 +0800
Subject: [PATCH] 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                 |  8 +++++++
 shared/notifications/index.js                 | 23 +++++++++++++++++++
 .../app/whats-new-popup/whats-new-popup.js    |  7 +++++-
 ui/selectors/selectors.js                     |  3 +++
 4 files changed, 40 insertions(+), 1 deletion(-)

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