feat: notifications feature flag (#9406)

## **Description**

This PR implements FEATURE FLAG on Notifications based on a **NEW**
environment variable called **MM_NOTIFICATIONS_UI_ENABLED**=false

## **Related issues**

Fixes: #9366

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

### **Before**


https://github.com/MetaMask/metamask-mobile/assets/44679989/a7881eda-d418-424d-91c7-52c8afe3eeaf

### **After**


https://github.com/MetaMask/metamask-mobile/assets/44679989/9932172d-535f-4837-9214-90b209850b0d

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: sethkfman <[email protected]>

app/components/UI/Navbar/index.js

@@ -22,6 +22,7 @@ import AppConstants from '../../../core/AppConstants';
 import DeeplinkManager from '../../../core/DeeplinkManager/SharedDeeplinkManager';
 import { MetaMetrics, MetaMetricsEvents } from '../../../core/Analytics';
 import { importAccountFromPrivateKey } from '../../../util/address';
+import { isNotificationsFeatureEnabled } from '../../../util/notifications';
 import Device from '../../../util/device';
 import PickerNetwork from '../../../component-library/components/Pickers/PickerNetwork';
 import BrowserUrlBar from '../BrowserUrlBar';
@@ -967,7 +968,7 @@ export function getWalletNavbarOptions(
   }
 
   function handleNotificationOnPress() {
-    if (isNotificationEnabled) {
+    if (isNotificationEnabled && isNotificationsFeatureEnabled()) {
       // [ATTENTION]: will navigate to Notifications screen. Notifications screen will be implemented on a diff PR.
     } else {
       navigation.navigate(Routes.NOTIFICATIONS.OPT_IN_STACK);
@@ -995,14 +996,17 @@ export function getWalletNavbarOptions(
     ),
     headerRight: () => (
       <View style={styles.leftButtonContainer}>
-        <ButtonIcon
-          variant={ButtonIconVariants.Primary}
-          onPress={handleNotificationOnPress}
-          iconName={IconName.Notification}
-          style={styles.infoButton}
-          size={IconSize.Xl}
-          testID={WalletViewSelectorsIDs.WALLET_NOTIFICATIONS_BUTTON}
-        />
+        {!isNotificationsFeatureEnabled() && (
+          <ButtonIcon
+            variant={ButtonIconVariants.Primary}
+            onPress={handleNotificationOnPress}
+            iconName={IconName.Notification}
+            style={styles.infoButton}
+            size={IconSize.Xl}
+            testID={WalletViewSelectorsIDs.WALLET_NOTIFICATIONS_BUTTON}
+          />
+        )}
+
         <ButtonIcon
           variant={ButtonIconVariants.Primary}
           onPress={openQRScanner}

app/components/Views/Settings/index.tsx

@@ -16,6 +16,7 @@ import { createSnapsSettingsListNavDetails } from '../Snaps/SnapsSettingsList/Sn
 ///: END:ONLY_INCLUDE_IF
 import { TextColor } from '../../../component-library/components/Texts/Text';
 import { useMetrics } from '../../../components/hooks/useMetrics';
+import { isNotificationsFeatureEnabled } from '../../../util/notifications';
 
 const createStyles = (colors: Colors) =>
   StyleSheet.create({
@@ -189,12 +190,14 @@ const Settings = () => {
         title={strings('app_settings.advanced_title')}
         testID={SettingsViewSelectorsIDs.ADVANCED}
       />
-      <SettingsDrawer
-        description={strings('app_settings.notifications_desc')}
-        onPress={onPressNotifications}
-        title={strings('app_settings.notifications_title')}
-        testID={SettingsViewSelectorsIDs.NOTIFICATIONS}
-      />
+      {!isNotificationsFeatureEnabled() && (
+        <SettingsDrawer
+          description={strings('app_settings.notifications_desc')}
+          onPress={onPressNotifications}
+          title={strings('app_settings.notifications_title')}
+          testID={SettingsViewSelectorsIDs.NOTIFICATIONS}
+        />
+      )}
       <SettingsDrawer
         description={strings('app_settings.contacts_desc')}
         onPress={onPressContacts}

app/util/notifications/methods/index.ts

@@ -9,6 +9,8 @@ import { strings } from '../../../../locales/i18n';
 import Logger from '../../../util/Logger';
 import { Theme } from '../../../util/theme/models';
 import {
+  ChainId,
+  HalRawNotification,
   Notification,
   TRIGGER_TYPES,
   mmStorage,
@@ -154,10 +156,13 @@ export function viewOnEtherscan(props: ViewOnEtherscanProps, state: any) {
     });
   }
 }
-// TODO: use getNetwork on next PR (Notification's details)
-// function getNetwork(chain_id: HalRawNotification['chain_id']) {
-//   return ChainId[chain_id];
-// }
+
+export function getNetwork(chain_id: HalRawNotification['chain_id']) {
+  return ChainId[chain_id];
+}
+
+export const isNotificationsFeatureEnabled = () =>
+  process.env.MM_NOTIFICATIONS_UI_ENABLED;
 
 export function formatNotificationTitle(rawTitle: string): string {
   const words = rawTitle.split('_');

bitrise.yml

@@ -1287,6 +1287,9 @@ workflows:
 
 app:
   envs:
+    - opts:
+        is_expand: false
+      MM_NOTIFICATIONS_UI_ENABLED: false
     - opts:
         is_expand: false
       PROJECT_LOCATION: android