fix(extension): add notification icon for bitcoin layout [LW-13657 LW-13658] (#2006)

* fix(extension): add notification icon for bitcoin layout

* refactor(extension): uniform notification center detection via hook

* fix(extension): reduce margin to allow notification icon to fit

Author: mirceahasegan

apps/browser-extension-wallet/src/components/MainMenu/MainHeader.module.scss

@@ -12,7 +12,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin: size_unit(1.75) size_unit(3);
+    margin: size_unit(1.75) size_unit(2.75);
     .linkLogo {
       display: flex;
       align-items: center;

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

@@ -2,21 +2,20 @@ import React, { useState } from 'react';
 import { useHistory } from 'react-router';
 import { Dropdown } from 'antd';
 
-import { usePostHogClientContext } from '@providers/PostHogClientProvider';
-import { ExperimentName } from '@lib/scripts/types/feature-flags';
 import { walletRoutePaths } from '@routes';
 
 import { NotificationsBell } from './NotificationsBell';
 import { NotificationsDropDown } from './NotificationsDropDown';
+import { useNotificationsCenterConfig } from '@hooks/useNotificationsCenterConfig';
 
 export interface NotificationsCenterContainerProps {
   popupView?: boolean;
 }
 
 export const NotificationsBellContainer = ({ popupView }: NotificationsCenterContainerProps): React.ReactElement => {
-  const posthog = usePostHogClientContext();
   const history = useHistory();
   const [isOpen, setIsOpen] = useState(false);
+  const { isNotificationsCenterEnabled } = useNotificationsCenterConfig();
 
   // TODO Connect with notifications center
   const [notifications, setNotifications] = useState<string[]>([]);
@@ -44,7 +43,7 @@ export const NotificationsBellContainer = ({ popupView }: NotificationsCenterCon
   };
 
   return (
-    posthog?.isFeatureFlagEnabled(ExperimentName.NOTIFICATIONS_CENTER) && (
+    isNotificationsCenterEnabled && (
       <Dropdown
         onOpenChange={handleOpenChange}
         open={isOpen}

apps/browser-extension-wallet/src/views/bitcoin-mode/components/MainMenu/MainHeader.module.scss

@@ -27,7 +27,7 @@
     .controls {
       display: flex;
       align-items: center;
-      gap: size_unit(1);
+      gap: size_unit(0.75);
 
       .avatar {
         font-size: 20px;

apps/browser-extension-wallet/src/views/bitcoin-mode/components/MainMenu/MainHeader.tsx

@@ -13,6 +13,7 @@ import { useAnalyticsContext, useBackgroundServiceAPIContext, useTheme } from '@
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
 import { useTranslation } from 'react-i18next';
 import { BrowserViewSections } from '@lib/scripts/types';
+import { NotificationsBellContainer } from '@components/NotificationsCenter/NotificationsBellContainer';
 
 export const MainHeader = (): React.ReactElement => {
   const { t } = useTranslation();
@@ -59,6 +60,7 @@ export const MainHeader = (): React.ReactElement => {
             label={t('expandPopup')}
             onClick={() => backgroundServices.handleOpenBrowser({ section: locationBrowserSection[location.pathname] })}
           />
+          <NotificationsBellContainer popupView />
           <DropdownMenu isPopup />
         </div>
       </div>