feat: add the notifications center

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,14 @@
+@import '../../../../../packages/core/src/ui/styles/theme.scss';
+@import '../../../../../packages/common/src/ui/styles/theme.scss';
+
+.markAllAsRead {
+  max-width: size_unit(25);
+}
+
+.sectionTitle {
+  margin-bottom: size_unit(5.5);
+
+  .title {
+    margin-bottom: 0px !important;
+  }
+}

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

@@ -0,0 +1,51 @@
+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 className={styles.sectionTitle} justifyContent="space-between">
+        <SectionTitle
+          classname={styles.title}
+          sideText={`(${1})`}
+          title={
+            <Flex alignItems="center" gap="$8">
+              <NavigationButton icon="arrow" onClick={onBack} />
+              {t('notificationsCenter.title')}
+            </Flex>
+          }
+        />
+        {!popupView && (
+          <Button
+            className={styles.markAllAsRead}
+            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,35 @@
+import React from 'react';
+import { useHistory } from 'react-router';
+
+import { usePostHogClientContext } from '@providers/PostHogClientProvider';
+import { ExperimentName } from '@lib/scripts/types/feature-flags';
+import { walletRoutePaths } from '@routes';
+import { useWalletStore } from '@stores';
+import { APP_MODE_POPUP } from '@src/utils/constants';
+
+import { NotificationsCenter } from './NotificationsCenter';
+
+export const NotificationsCenterContainer = (): React.ReactElement => {
+  const posthog = usePostHogClientContext();
+  const history = useHistory();
+  const { walletUI } = useWalletStore();
+
+  if (!posthog?.isFeatureFlagEnabled(ExperimentName.NOTIFICATIONS_CENTER)) {
+    history.push(walletRoutePaths.assets);
+
+    // eslint-disable-next-line unicorn/no-null
+    return null;
+  }
+
+  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/routes/ExtensionRoutes.tsx

@@ -15,6 +15,7 @@ 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';
 
 const { GOV_TOOLS_URLS } = config();
 
@@ -30,6 +31,7 @@ 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} />
+        <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,7 @@ 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';
 
 export const defaultRoutes: RouteMap = [
   {
@@ -84,6 +85,10 @@ export const defaultRoutes: RouteMap = [
   {
     path: routes.nfts,
     component: NftsLayout
+  },
+  {
+    path: routes.notifications,
+    component: NotificationsCenterLayout
   }
 ];
 

packages/translation/src/lib/translations/browser-extension-wallet/en.json

@@ -786,6 +786,7 @@
   "notificationsCenter.allClear.description": "You don't have any notifications currently",
   "notificationsCenter.manageSubscriptions": "Manage subscriptions",
   "notificationsCenter.markAllAsRead": "Mark all as read",
+  "notificationsCenter.title": "Notifications",
   "notificationsCenter.viewAll": "View all",
   "poolDetails.delegate": "Delegate to this pool",
   "poolDetails.sectionTitle": "Pool detail",