Adding "What's New" Notification for Add Popular networks (#15121)

* Adding "What's New" Notification for Add Popular networks

* Adding action text to notification

* Addressing review feedback

* Flag removal

app/_locales/en/messages.json

@@ -2190,6 +2190,16 @@
   "notifications12Title": {
     "message": "Wen dark mode? Now dark mode! 🕶️🦊"
   },
+  "notifications13ActionText": {
+    "message": "Show custom network list"
+  },
+  "notifications13Description": {
+    "message": "You can now add the following popular custom networks easily: Arbitrum, Avalanche, Binance Smart Chain, Fantom, Harmony, Optimism, Palm and Polygon! To enable this feature, go to Settings -> Experimental and turn \"Show custom network list\" on!",
+    "description": "Description of a notification in the 'See What's New' popup. Describes popular network feature."
+  },
+  "notifications13Title": {
+    "message": "Add Popular Networks"
+  },
   "notifications1Description": {
     "message": "MetaMask Mobile users can now swap tokens inside their mobile wallet. Scan the QR code to get the mobile app and start swapping.",
     "description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."

shared/notifications/index.js

@@ -66,6 +66,10 @@ export const UI_NOTIFICATIONS = {
       width: '100%',
     },
   },
+  13: {
+    id: 13,
+    date: '2022-07-12',
+  },
 };
 
 export const getTranslatedUINoficiations = (t, locale) => {
@@ -182,5 +186,14 @@ export const getTranslatedUINoficiations = (t, locale) => {
         new Date(UI_NOTIFICATIONS[12].date),
       ),
     },
+    13: {
+      ...UI_NOTIFICATIONS[13],
+      title: t('notifications13Title'),
+      description: t('notifications13Description'),
+      actionText: t('notifications13ActionText'),
+      date: new Intl.DateTimeFormat(formattedLocale).format(
+        new Date(UI_NOTIFICATIONS[13].date),
+      ),
+    },
   };
 };

test/e2e/fixtures/address-entry/state.json

@@ -69,6 +69,9 @@
         },
         "12": {
           "isShown": true
+        },
+        "13": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/connected-state/state.json

@@ -59,6 +59,9 @@
         },
         "12": {
           "isShown": true
+        },
+        "13": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/custom-rpc/state.json

@@ -55,6 +55,9 @@
         },
         "12": {
           "isShown": true
+        },
+        "13": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/custom-token/state.json

@@ -73,6 +73,9 @@
         },
         "12": {
           "isShown": true
+        },
+        "13": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/eip-1559-v2-dapp/state.json

@@ -56,6 +56,9 @@
         },
         "12": {
           "isShown": true
+        },
+        "13": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/eip-1559-v2/state.json

@@ -56,6 +56,9 @@
         },
         "12": {
           "isShown": true
+        },
+        "13": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/import-ui/state.json

@@ -110,6 +110,9 @@
         },
         "12": {
           "isShown": true
+        },
+        "13": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/imported-account/state.json

@@ -55,6 +55,9 @@
         },
         "12": {
           "isShown": true
+        },
+        "13": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/localization/state.json

@@ -55,6 +55,9 @@
         },
         "12": {
           "isShown": true
+        },
+        "13": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/metrics-enabled/state.json

@@ -59,6 +59,9 @@
         },
         "12": {
           "isShown": true
+        },
+        "13": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/navigate-transactions/state.json

@@ -55,6 +55,9 @@
         },
         "12": {
           "isShown": true
+        },
+        "13": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/onboarding/state.json

@@ -30,6 +30,9 @@
       "notifications": {
         "12": {
           "isShown": true
+        },
+        "13": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/send-edit-v2/state.json

@@ -56,6 +56,9 @@
         },
         "12": {
           "isShown": true
+        },
+        "13": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/send-edit/state.json

@@ -56,6 +56,9 @@
         },
         "12": {
           "isShown": true
+        },
+        "13": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/special-settings/state.json

@@ -55,6 +55,9 @@
         },
         "12": {
           "isShown": true
+        },
+        "13": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/threebox-enabled/state.json

@@ -66,6 +66,9 @@
         },
         "12": {
           "isShown": true
+        },
+        "13": {
+          "isShown": true
         }
       }
     },

ui/components/app/whats-new-popup/whats-new-popup.js

@@ -54,6 +54,10 @@ function getActionFunctionById(id, history) {
       updateViewedNotifications({ 12: true });
       history.push(EXPERIMENTAL_ROUTE);
     },
+    13: () => {
+      updateViewedNotifications({ 13: true });
+      history.push(`${EXPERIMENTAL_ROUTE}#show-custom-network`);
+    },
   };
 
   return actionFunctions[id];

ui/selectors/selectors.js

@@ -826,6 +826,7 @@ function getAllowedAnnouncementIds(state) {
     10: Boolean(process.env.TOKEN_DETECTION_V2) && !process.env.IN_TEST,
     11: Boolean(process.env.TOKEN_DETECTION_V2) && !process.env.IN_TEST,
     12: true,
+    13: true,
   };
 }