feat: add the notifications center (#2001)

Author: iccicci

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

@@ -1,8 +1,10 @@
 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';
@@ -13,7 +15,7 @@ export interface NotificationsCenterContainerProps {
 
 export const NotificationsBellContainer = ({ popupView }: NotificationsCenterContainerProps): React.ReactElement => {
   const posthog = usePostHogClientContext();
-
+  const history = useHistory();
   const [isOpen, setIsOpen] = useState(false);
 
   // TODO Connect with notifications center
@@ -38,6 +40,7 @@ export const NotificationsBellContainer = ({ popupView }: NotificationsCenterCon
 
   const handleViewAll = () => {
     setIsOpen(false);
+    history.push(walletRoutePaths.notifications);
   };
 
   return (

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

@@ -0,0 +1,6 @@
+@import '../../../../../packages/core/src/ui/styles/theme.scss';
+@import '../../../../../packages/common/src/ui/styles/theme.scss';
+
+.button {
+  max-width: size_unit(25);
+}

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Box, Flex } from '@input-output-hk/lace-ui-toolkit';
+
+import { Button, NavigationButton } from '@lace/common';
+import { SectionTitle } from '@components/Layout/SectionTitle';
+
+import styles from './NotificationsCenter.module.scss';
+
+export interface NotificationsCenterProps {
+  onBack: () => void;
+  onMarkAllAsRead: () => void;
+  popupView?: boolean;
+}
+
+export const NotificationsCenter = ({
+  onBack,
+  onMarkAllAsRead,
+  popupView
+}: NotificationsCenterProps): React.ReactElement => {
+  const { t } = useTranslation();
+
+  return (
+    <Box p="$24">
+      <Flex justifyContent="space-between" mb={'$44'}>
+        <Box mb={'$0'}>
+          <SectionTitle
+            sideText={`(${1})`}
+            title={
+              <Flex alignItems="center" gap="$8">
+                <NavigationButton icon="arrow" onClick={onBack} />
+                {t('notificationsCenter.title')}
+              </Flex>
+            }
+          />
+        </Box>
+        {!popupView && (
+          <Button
+            className={styles.button}
+            block
+            color="gradient"
+            data-testid="notifications-bell"
+            onClick={onMarkAllAsRead}
+          >
+            {t('notificationsCenter.markAllAsRead')}
+          </Button>
+        )}
+      </Flex>
+      Notifications Center (Placeholder content)
+    </Box>
+  );
+};

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useHistory } from 'react-router';
+
+import { useWalletStore } from '@stores';
+import { APP_MODE_POPUP } from '@src/utils/constants';
+
+import { NotificationsCenter } from './NotificationsCenter';
+
+export const NotificationsCenterContainer = (): React.ReactElement => {
+  const history = useHistory();
+  const { walletUI } = useWalletStore();
+
+  return (
+    <NotificationsCenter
+      onBack={() => history.goBack()}
+      onMarkAllAsRead={() => {
+        // TODO connect with notifications center
+        // eslint-disable-next-line no-console
+        console.log('onMarkAllAsRead');
+      }}
+      popupView={walletUI.appMode === APP_MODE_POPUP}
+    />
+  );
+};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { Layout, SectionLayout } from '@src/views/browser-view/components/Layout';
+import { EducationalList } from '@src/views/browser-view/components';
+import { useTranslation } from 'react-i18next';
+import { getEducationalList } from '@src/views/browser-view/features/assets/components/AssetEducationalList/AssetEducationalList';
+
+import { NotificationsCenterContainer } from './NotificationsCenterContainer';
+
+export const NotificationsCenterLayout = (): React.ReactElement => {
+  const { t } = useTranslation();
+
+  const educationalItems = getEducationalList(t);
+
+  return (
+    <>
+      <Layout>
+        <SectionLayout
+          sidePanelContent={
+            <EducationalList items={educationalItems} title={t('browserView.sidePanel.aboutYourWallet')} />
+          }
+        >
+          <NotificationsCenterContainer />
+        </SectionLayout>
+      </Layout>
+    </>
+  );
+};

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

@@ -1 +1,3 @@
 export * from './NotificationsBellContainer';
+export * from './NotificationsCenterContainer';
+export * from './NotificationsCenterLayout';

apps/browser-extension-wallet/src/hooks/useNotificationsCenterConfig.ts

@@ -0,0 +1,12 @@
+import { ExperimentName } from '@lib/scripts/types/feature-flags';
+import { usePostHogClientContext } from '@providers/PostHogClientProvider';
+
+export interface NotificationsCenterConfig {
+  isNotificationsCenterEnabled: boolean;
+}
+
+export const useNotificationsCenterConfig = (): NotificationsCenterConfig => {
+  const posthog = usePostHogClientContext();
+
+  return { isNotificationsCenterEnabled: posthog?.isFeatureFlagEnabled(ExperimentName.NOTIFICATIONS_CENTER) ?? false };
+};

apps/browser-extension-wallet/src/routes/ExtensionRoutes.tsx

@@ -15,12 +15,15 @@ import { NftDetail, Nfts } from '@src/features/nfts';
 import { useWalletStore } from '@stores';
 import { config } from '@src/config';
 import { Voting } from '@src/features/voting-beta/components';
+import { NotificationsCenterContainer } from '@src/components/NotificationsCenter';
+import { useNotificationsCenterConfig } from '@hooks/useNotificationsCenterConfig';
 
 const { GOV_TOOLS_URLS } = config();
 
 export const ExtensionRoutes = (): React.ReactElement => {
   const { isSharedWallet, environmentName } = useWalletStore();
   const isVotingCenterEnabled = !!GOV_TOOLS_URLS[environmentName];
+  const { isNotificationsCenterEnabled } = useNotificationsCenterConfig();
 
   return (
     <MainLayout>
@@ -30,6 +33,9 @@ export const ExtensionRoutes = (): React.ReactElement => {
         <Route exact path={walletRoutePaths.activity} component={Activity} />
         <Route exact path={walletRoutePaths.send} component={Send} />
         <Route exact path={walletRoutePaths.nftDetail} component={NftDetail} />
+        {isNotificationsCenterEnabled && (
+          <Route exact path={walletRoutePaths.notifications} component={NotificationsCenterContainer} />
+        )}
         {!isSharedWallet && <Route exact path={walletRoutePaths.earn} component={DelegationContainer} />}
         <Route exact path={walletRoutePaths.addressBook} component={AddressBook} />
         <Route exact path={walletRoutePaths.settings} component={Settings} />

apps/browser-extension-wallet/src/routes/wallet-paths.ts

@@ -5,6 +5,7 @@ export const walletRoutePaths = {
   confirmDelegation: '/delegate/confirm',
   delegate: '/delegate',
   earn: '/earn',
+  notifications: '/notifications',
   nftDetail: '/nft/:id',
   nfts: '/nfts',
   assets: '/assets',

apps/browser-extension-wallet/src/views/browser-view/routes/index.tsx

@@ -47,6 +47,8 @@ import { catchAndBrandExtensionApiError } from '@utils/catch-and-brand-extension
 import { removePreloaderIfExists } from '@utils/remove-reloader-if-exists';
 import { ENHANCED_ANALYTICS_OPT_IN_STATUS_LS_KEY } from '@providers/AnalyticsProvider/config';
 import { EnhancedAnalyticsOptInStatus } from '@providers/AnalyticsProvider/analyticsTracker';
+import { NotificationsCenterLayout } from '@components/NotificationsCenter';
+import { useNotificationsCenterConfig } from '@hooks/useNotificationsCenterConfig';
 
 export const defaultRoutes: RouteMap = [
   {
@@ -84,6 +86,10 @@ export const defaultRoutes: RouteMap = [
   {
     path: routes.nfts,
     component: NftsLayout
+  },
+  {
+    path: routes.notifications,
+    component: NotificationsCenterLayout
   }
 ];
 
@@ -143,10 +149,12 @@ export const BrowserViewRoutes = ({ routesMap = defaultRoutes }: { routesMap?: R
   const posthogClientInitialized = useIsPosthogClientInitialized();
   const location = useLocation<{ background?: Location<unknown> }>();
   const isVotingCenterEnabled = !!GOV_TOOLS_URLS[environmentName];
+  const { isNotificationsCenterEnabled } = useNotificationsCenterConfig();
 
   const availableRoutes = routesMap.filter((route) => {
     if (route.path === routes.staking && isSharedWallet) return false;
     if (route.path === routes.voting && !isVotingCenterEnabled) return false;
+    if (route.path === routes.notifications && !isNotificationsCenterEnabled) return false;
     return true;
   });