feat: add notification center bell icon and badge (#1994)

Author: iccicci

apps/browser-extension-wallet/src/assets/icons/notifications-bell.component.svg

@@ -27,7 +27,7 @@
     .controls {
       display: flex;
       align-items: center;
-      gap: size_unit(1);
+      gap: size_unit(0.75);
 
       .avatar {
         font-size: 20px;
@@ -47,7 +47,7 @@
 }
 
 .betaPill {
-  background: linear-gradient(94.22deg, #FF92E1 -18.3%, #FDC300 118.89%);
+  background: linear-gradient(94.22deg, #ff92e1 -18.3%, #fdc300 118.89%);
   border-radius: 100px;
 
   .betaPillCopy {

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

@@ -13,6 +13,7 @@ import { BrowserViewSections } from '@lib/scripts/types';
 import { NetworkPill } from '@components/NetworkPill';
 import { useAnalyticsContext } from '@providers';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
+import { NotificationsBellContainer } from '@components/NotificationsCenter';
 
 export const MainHeader = (): React.ReactElement => {
   const { t } = useTranslation();
@@ -60,6 +61,7 @@ export const MainHeader = (): React.ReactElement => {
                 .then(() => window.close())
             }
           />
+          <NotificationsBellContainer popupView />
           <DropdownMenu isPopup />
         </div>
       </div>

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button } from '@lace/common';
+import styles from './NotificationsCenter.module.scss';
+import NotificationBellIcon from '../../assets/icons/notifications-bell.component.svg';
+
+// eslint-disable-next-line no-magic-numbers
+const formatNotificationCount = (count: number) => (count < 10 ? count.toString() : '9+');
+
+export interface NotificationsBellProps {
+  notificationsCount: number;
+  onClick: () => void;
+  popupView?: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const NotificationsBell = ({ notificationsCount, onClick }: NotificationsBellProps): React.ReactElement => (
+  <Button className={styles.btn} block onClick={onClick} color="gradient" data-testid="notifications-bell">
+    <NotificationBellIcon />
+    {notificationsCount > 0 && <span className={styles.badge}>{formatNotificationCount(notificationsCount)}</span>}
+  </Button>
+);

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

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import { NotificationsBell } from './NotificationsBell';
+
+export interface NotificationsCenterContainerProps {
+  popupView?: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const NotificationsBellContainer = ({ popupView }: NotificationsCenterContainerProps): React.ReactElement => {
+  // TODO Connect with notifications center
+  const [notificationsCount, setNotificationsCount] = useState(0);
+
+  // TODO Connect with notifications center
+  const handleClick = () => {
+    // eslint-disable-next-line no-magic-numbers
+    setNotificationsCount(notificationsCount === 11 ? 0 : notificationsCount + 1);
+  };
+
+  return <NotificationsBell notificationsCount={notificationsCount} onClick={handleClick} popupView={popupView} />;
+};

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

@@ -0,0 +1,27 @@
+@import '../../../../../packages/core/src/ui/styles/theme.scss';
+@import '../../../../../packages/common/src/ui/styles/theme.scss';
+
+.badge {
+  position: absolute;
+  top: size_unit(-2);
+  right: size_unit(-2);
+  background: purple;
+  color: white;
+  border-radius: 50%;
+  padding: 2px 2px;
+  font-size: size_unit(1.5);
+  font-weight: bold;
+  min-width: size_unit(2.5);
+  height: size_unit(2.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Proxima Nova', Arial, Helvetica, sans-serif;
+}
+
+.btn {
+  max-width: size_unit(6);
+  min-width: size_unit(6) !important;
+  padding: size_unit(1) size_unit(2.75) !important;
+  position: relative;
+}

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

@@ -0,0 +1,2 @@
+export * from './NotificationsBell';
+export * from './NotificationsBellContainer';

apps/browser-extension-wallet/src/components/NotificationsCenter/index.ts

@@ -9,6 +9,7 @@ import styles from './SectionLayout.modules.scss';
 import { SidePanelButton } from '../SidePanelButton/SidePanelButton';
 import { CollapsiblePanelContainer } from '../CollapsiblePanelContainer/CollapsiblePanelContainer';
 import { BREAKPOINT_SMALL } from '@src/styles/constants';
+import { NotificationsBellContainer } from '@components/NotificationsCenter';
 
 export const CONTENT_ID = 'content';
 
@@ -65,6 +66,7 @@ export const SidePanel = ({ sidePanelContent, isSidePanelFixed = true }: Section
       })}
     >
       <TransactionCTAsBox />
+      <NotificationsBellContainer />
       <DropdownMenu />
       {!!sidePanelContent && isScreenTooSmallForSidePanel && (
         <SidePanelButton active={isPanelVisible} onClick={toggleSidePanelVisibility} />