From 6d2cc98b81d2ada5e283aee1cf1c9bf84e8fbfcc Mon Sep 17 00:00:00 2001
From: Brad Decker <bhdecker84@gmail.com>
Date: Tue, 29 Aug 2023 16:15:35 -0500
Subject: [PATCH] Add whats new popup for changes to advanced gas fee (#20632)

* Add whats new popup for changes to advanced gas fee

* Update shared/notifications/index.js

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

* updated text

* verified working, changed order of init

* use first renderer for formatting issue

---------

Co-authored-by: Mark Stacey <markjstacey@gmail.com>
Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
---
 app/_locales/en/messages.json                     |  9 +++++++++
 app/scripts/controllers/app-state.js              |  6 +++---
 shared/notifications/index.js                     | 15 +++++++++++++++
 .../app/whats-new-popup/whats-new-popup.js        |  4 ++++
 ui/selectors/selectors.js                         |  1 +
 5 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 3fbc3e374..0d9c8dbe2 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -2747,6 +2747,15 @@
   "notifications22Title": {
     "message": "Looking for your account details or the block explorer URL?"
   },
+  "notifications24ActionText": {
+    "message": "Got it"
+  },
+  "notifications24Description": {
+    "message": "Advanced gas fee settings are now remembered based on the network you're using. This means you can set specific advanced gas fees for each network and avoid overpaying for gas or stuck transactions."
+  },
+  "notifications24Title": {
+    "message": "Advanced gas fees by network"
+  },
   "notifications3ActionText": {
     "message": "Read more",
     "description": "The 'call to action' on the button, or link, of the 'Stay secure' notification. Upon clicking, users will be taken to a page about security on the metamask support website."
diff --git a/app/scripts/controllers/app-state.js b/app/scripts/controllers/app-state.js
index 3eec99a87..28e6d964b 100644
--- a/app/scripts/controllers/app-state.js
+++ b/app/scripts/controllers/app-state.js
@@ -49,13 +49,13 @@ export default class AppStateController extends EventEmitter {
       showProductTour: true,
       trezorModel: null,
       currentPopupId: undefined,
-      ...initState,
-      qrHardware: {},
-      nftsDropdownState: {},
       // This key is only used for checking if the user had set advancedGasFee
       // prior to Migration 92.3 where we split out the setting to support
       // multiple networks.
       hadAdvancedGasFeesSetPriorToMigration92_3: false,
+      ...initState,
+      qrHardware: {},
+      nftsDropdownState: {},
       usedNetworks: {
         '0x1': true,
         '0x5': true,
diff --git a/shared/notifications/index.js b/shared/notifications/index.js
index f5d496b8b..f7f38ceec 100644
--- a/shared/notifications/index.js
+++ b/shared/notifications/index.js
@@ -121,6 +121,10 @@ export const UI_NOTIFICATIONS = {
       src: 'images/global-menu-block-explorer.svg',
     },
   },
+  24: {
+    id: 24,
+    date: null,
+  },
 };
 
 export const getTranslatedUINotifications = (t, locale) => {
@@ -331,5 +335,16 @@ export const getTranslatedUINotifications = (t, locale) => {
           )
         : '',
     },
+    24: {
+      ...UI_NOTIFICATIONS[24],
+      title: t('notifications24Title'),
+      description: t('notifications24Description'),
+      actionText: t('notifications24ActionText'),
+      date: UI_NOTIFICATIONS[24].date
+        ? new Intl.DateTimeFormat(formattedLocale).format(
+            new Date(UI_NOTIFICATIONS[24].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 94631434e..15ec13270 100644
--- a/ui/components/app/whats-new-popup/whats-new-popup.js
+++ b/ui/components/app/whats-new-popup/whats-new-popup.js
@@ -103,6 +103,9 @@ function getActionFunctionById(id, history) {
     22: () => {
       updateViewedNotifications({ 22: true });
     },
+    24: () => {
+      updateViewedNotifications({ 24: true });
+    },
   };
 
   return actionFunctions[id];
@@ -364,6 +367,7 @@ export default function WhatsNewPopup({
     19: renderFirstNotification,
     21: renderFirstNotification,
     22: renderFirstNotification,
+    24: renderFirstNotification,
   };
 
   return (
diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
index 3c7006a86..e6ae9e425 100644
--- a/ui/selectors/selectors.js
+++ b/ui/selectors/selectors.js
@@ -1031,6 +1031,7 @@ function getAllowedAnnouncementIds(state) {
     20: currentKeyringIsLedger && isFirefox,
     21: isSwapsChain,
     22: true,
+    24: state.metamask.hadAdvancedGasFeesSetPriorToMigration92_3 === true,
   };
 }