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

@@ -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."

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,

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

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 (

ui/selectors/selectors.js

@@ -1031,6 +1031,7 @@ function getAllowedAnnouncementIds(state) {
     20: currentKeyringIsLedger && isFirefox,
     21: isSwapsChain,
     22: true,
+    24: state.metamask.hadAdvancedGasFeesSetPriorToMigration92_3 === true,
   };
 }