feat: add notifications center feature flag (#1995)

Author: iccicci

apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsBellContainer.tsx

@@ -1,12 +1,15 @@
 import React, { useState } from 'react';
 import { NotificationsBell } from './NotificationsBell';
-
+import { usePostHogClientContext } from '@providers/PostHogClientProvider';
+import { ExperimentName } from '@lib/scripts/types/feature-flags';
 export interface NotificationsCenterContainerProps {
   popupView?: boolean;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const NotificationsBellContainer = ({ popupView }: NotificationsCenterContainerProps): React.ReactElement => {
+  const posthog = usePostHogClientContext();
+
   // TODO Connect with notifications center
   const [notificationsCount, setNotificationsCount] = useState(0);
 
@@ -16,5 +19,9 @@ export const NotificationsBellContainer = ({ popupView }: NotificationsCenterCon
     setNotificationsCount(notificationsCount === 11 ? 0 : notificationsCount + 1);
   };
 
-  return <NotificationsBell notificationsCount={notificationsCount} onClick={handleClick} popupView={popupView} />;
+  return (
+    posthog?.isFeatureFlagEnabled(ExperimentName.NOTIFICATIONS_CENTER) && (
+      <NotificationsBell notificationsCount={notificationsCount} onClick={handleClick} popupView={popupView} />
+    )
+  );
 };

apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsCenter.module.scss

@@ -5,7 +5,7 @@
   position: absolute;
   top: size_unit(-2);
   right: size_unit(-2);
-  background: purple;
+  background: #7f5af0;
   color: white;
   border-radius: 50%;
   padding: 2px 2px;

apps/browser-extension-wallet/src/lib/scripts/types/feature-flags.ts

@@ -15,7 +15,8 @@ export enum ExperimentName {
   BITCOIN_WALLETS = 'bitcoin-wallets',
   NFTPRINTLAB = 'nftprintlab',
   GLACIER_DROP = 'glacier-drop',
-  MEMPOOLSPACE_FEE_MARKET = 'bitcoin-mempool-space-fee-market'
+  MEMPOOLSPACE_FEE_MARKET = 'bitcoin-mempool-space-fee-market',
+  NOTIFICATIONS_CENTER = 'notifications-center'
 }
 
 export type FeatureFlag = `${ExperimentName}`;

apps/browser-extension-wallet/src/providers/PostHogClientProvider/client/config.ts

@@ -39,7 +39,8 @@ const defaultFeatureFlags: FeatureFlags = {
   [ExperimentName.BITCOIN_WALLETS]: false,
   [ExperimentName.NFTPRINTLAB]: false,
   [ExperimentName.GLACIER_DROP]: false,
-  [ExperimentName.MEMPOOLSPACE_FEE_MARKET]: false
+  [ExperimentName.MEMPOOLSPACE_FEE_MARKET]: false,
+  [ExperimentName.NOTIFICATIONS_CENTER]: false
 };
 
 export const featureFlagsByNetworkInitialValue: FeatureFlagsByNetwork = {