Dark Mode: What's New Announcement (#14346)

app/_locales/en/messages.json

@@ -2131,6 +2131,15 @@
   "notifications11Title": {
     "message": "Scam and security risks"
   },
+  "notifications12ActionText": {
+    "message": "Enable dark mode"
+  },
+  "notifications12Description": {
+    "message": "Dark Mode will be enabled for new users depending on their system preferences. For existing users, enable Dark Mode manually under Settings -> Experimental."
+  },
+  "notifications12Title": {
+    "message": "Wen dark mode? Now dark mode! 🕶️🦊"
+  },
   "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

@@ -58,6 +58,14 @@ export const UI_NOTIFICATIONS = {
     id: 11,
     date: '2022-04-18',
   },
+  12: {
+    id: 12,
+    date: '2022-05-18',
+    image: {
+      src: 'images/darkmode-banner.png',
+      width: '100%',
+    },
+  },
 };
 
 export const getTranslatedUINoficiations = (t, locale) => {
@@ -165,5 +173,14 @@ export const getTranslatedUINoficiations = (t, locale) => {
         new Date(UI_NOTIFICATIONS[11].date),
       ),
     },
+    12: {
+      ...UI_NOTIFICATIONS[12],
+      title: t('notifications12Title'),
+      description: t('notifications12Description'),
+      actionText: t('notifications12ActionText'),
+      date: new Intl.DateTimeFormat(formattedLocale).format(
+        new Date(UI_NOTIFICATIONS[12].date),
+      ),
+    },
   };
 };

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

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

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

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

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

@@ -52,6 +52,9 @@
         },
         "8": {
           "isShown": true
+        },
+        "12": {
+          "isShown": true
         }
       }
     },

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

@@ -70,6 +70,9 @@
       "notifications": {
         "8": {
           "isShown": true
+        },
+        "12": {
+          "isShown": true
         }
       }
     },

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

@@ -53,6 +53,9 @@
         },
         "8": {
           "isShown": true
+        },
+        "12": {
+          "isShown": true
         }
       }
     },

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

@@ -53,6 +53,9 @@
         },
         "8": {
           "isShown": true
+        },
+        "12": {
+          "isShown": true
         }
       }
     },

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

@@ -107,6 +107,9 @@
         },
         "8": {
           "isShown": true
+        },
+        "12": {
+          "isShown": true
         }
       }
     },

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

@@ -52,6 +52,9 @@
         },
         "8": {
           "isShown": true
+        },
+        "12": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/localization/state.json

@@ -52,6 +52,9 @@
         },
         "8": {
           "isShown": true
+        },
+        "12": {
+          "isShown": true
         }
       }
     },

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

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

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

@@ -52,6 +52,9 @@
         },
         "8": {
           "isShown": true
+        },
+        "12": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/onboarding/state.json

@@ -26,6 +26,13 @@
       },
       "network": "1337"
     },
+    "NotificationController": {
+      "notifications": {
+        "12": {
+          "isShown": true
+        }
+      }
+    },
     "CurrencyController": {
       "conversionDate": 1617927806.941,
       "conversionRate": 2084.64,

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

@@ -53,6 +53,9 @@
         },
         "8": {
           "isShown": true
+        },
+        "12": {
+          "isShown": true
         }
       }
     },

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

@@ -53,6 +53,9 @@
         },
         "8": {
           "isShown": true
+        },
+        "12": {
+          "isShown": true
         }
       }
     },

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

@@ -63,6 +63,9 @@
         },
         "8": {
           "isShown": true
+        },
+        "12": {
+          "isShown": true
         }
       }
     },

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

@@ -15,6 +15,7 @@ import { getSortedNotificationsToShow } from '../../../selectors';
 import {
   BUILD_QUOTE_ROUTE,
   ADVANCED_ROUTE,
+  EXPERIMENTAL_ROUTE,
 } from '../../../helpers/constants/routes';
 import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
 
@@ -49,6 +50,10 @@ function getActionFunctionById(id, history) {
       updateViewedNotifications({ 10: true });
       history.push(`${ADVANCED_ROUTE}#token-description`);
     },
+    12: () => {
+      updateViewedNotifications({ 12: true });
+      history.push(EXPERIMENTAL_ROUTE);
+    },
   };
 
   return actionFunctions[id];

ui/selectors/selectors.js

@@ -728,6 +728,7 @@ function getAllowedNotificationIds(state) {
     9: getIsMainnet(state),
     10: Boolean(process.env.TOKEN_DETECTION_V2),
     11: Boolean(process.env.TOKEN_DETECTION_V2),
+    12: true,
   };
 }