feat: consume notifications center remote api (and expose mock version) (#2005)

Author: iccicci

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

@@ -3,39 +3,21 @@ import { useHistory } from 'react-router';
 import { Dropdown } from 'antd';
 
 import { walletRoutePaths } from '@routes';
+import { useNotificationsCenter } from '@hooks/useNotificationsCenter';
+import { useNotificationsCenterConfig } from '@hooks/useNotificationsCenterConfig';
 
 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 { isNotificationsCenterEnabled } = useNotificationsCenterConfig();
+  const { markAsRead, notifications, unreadNotifications } = useNotificationsCenter();
   const history = useHistory();
   const [isOpen, setIsOpen] = useState(false);
-  const { isNotificationsCenterEnabled } = useNotificationsCenterConfig();
-
-  // TODO Connect with notifications center
-  const [notifications, setNotifications] = useState<string[]>([]);
-
-  const handleOpenChange = (open: boolean) => {
-    setIsOpen(open);
-
-    // TODO remove this placeholder logic
-    if (!open) {
-      setNotifications(
-        // eslint-disable-next-line no-magic-numbers
-        notifications.length === 11 ? [] : [...notifications, `Notification ${notifications.length + 1}`]
-      );
-    }
-  };
-
-  const handleMarkAllAsRead = () => {
-    // TODO remove this placeholder logic
-    setNotifications([]);
-  };
 
   const handleViewAll = () => {
     setIsOpen(false);
@@ -45,20 +27,22 @@ export const NotificationsBellContainer = ({ popupView }: NotificationsCenterCon
   return (
     isNotificationsCenterEnabled && (
       <Dropdown
-        onOpenChange={handleOpenChange}
+        onOpenChange={setIsOpen}
         open={isOpen}
         dropdownRender={() => (
           <NotificationsDropDown
             notifications={notifications}
-            onMarkAllAsRead={handleMarkAllAsRead}
+            onMarkAllAsRead={() => markAsRead()}
+            onMarkAsRead={(id: string) => markAsRead(id)}
             onViewAll={handleViewAll}
             popupView={popupView}
+            unreadNotifications={unreadNotifications}
           />
         )}
         placement="bottomRight"
         trigger={['click']}
       >
-        <NotificationsBell onClick={() => setIsOpen(!isOpen)} unreadNotifications={notifications.length} />
+        <NotificationsBell onClick={() => setIsOpen(!isOpen)} unreadNotifications={unreadNotifications} />
       </Dropdown>
     )
   );

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

@@ -4,20 +4,26 @@ import { Box, Flex } from '@input-output-hk/lace-ui-toolkit';
 
 import { Button, NavigationButton } from '@lace/common';
 import { SectionTitle } from '@components/Layout/SectionTitle';
+import { LaceNotification, NotificationsTopic } from '@src/types/notifications-center';
 
 import styles from './NotificationsCenter.module.scss';
 import { WarningModal } from '@src/views/browser-view/components/WarningModal/WarningModal';
 
 export interface NotificationsCenterProps {
+  notifications: LaceNotification[];
   onBack: () => void;
   onMarkAllAsRead: () => void;
+  onMarkAsRead: (id: string) => void;
   popupView?: boolean;
+  topics: NotificationsTopic[];
+  unreadNotifications: number;
 }
 
 export const NotificationsCenter = ({
   onBack,
   onMarkAllAsRead,
-  popupView
+  popupView,
+  unreadNotifications
 }: NotificationsCenterProps): React.ReactElement => {
   const { t } = useTranslation();
   const [isRemoveNotificationModalVisible, setIsRemoveNotificationModalVisible] = useState(false);
@@ -45,7 +51,7 @@ export const NotificationsCenter = ({
         <Flex justifyContent="space-between" mb={'$44'}>
           <Box mb={'$0'}>
             <SectionTitle
-              sideText={`(${1})`}
+              sideText={unreadNotifications > 0 ? `(${unreadNotifications})` : undefined}
               title={
                 <Flex alignItems="center" gap="$8">
                   <NavigationButton icon="arrow" onClick={onBack} />

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

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

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

@@ -5,22 +5,27 @@ import { Menu } from 'antd';
 
 import { Divider, Flex, Text } from '@input-output-hk/lace-ui-toolkit';
 
+import { LaceNotification } from '@src/types/notifications-center';
+
 import { NotificationsAllClear } from './NotificationsAllClear';
 
 import styles from './NotificationsDropDown.module.scss';
 
 export interface NotificationsDropDownProps {
-  notifications: string[];
+  notifications: LaceNotification[];
   onMarkAllAsRead: () => void;
+  onMarkAsRead: (id: string) => void;
   onViewAll: () => void;
   popupView?: boolean;
+  unreadNotifications: number;
 }
 
 export const NotificationsDropDown = ({
   notifications,
   onMarkAllAsRead,
   onViewAll,
-  popupView
+  popupView,
+  unreadNotifications
 }: NotificationsDropDownProps): React.ReactElement => {
   const { t } = useTranslation();
 
@@ -36,7 +41,7 @@ export const NotificationsDropDown = ({
             {t(`notificationsCenter.${notifications.length > 0 ? 'viewAll' : 'manageSubscriptions'}`)}
           </a>
         </Text.Body.Normal>
-        {notifications.length > 0 && (
+        {unreadNotifications > 0 && (
           <Text.Body.Normal>
             <a onClick={onMarkAllAsRead}>{t('notificationsCenter.markAllAsRead')}</a>
           </Text.Body.Normal>

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

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import { runtime } from 'webextension-polyfill';
+
+import { consumeRemoteApi } from '@cardano-sdk/web-extension';
+import { logger, useObservable } from '@lace/common';
+import {
+  LaceNotification,
+  notificationsCenterProperties,
+  NotificationsCenterProperties,
+  NotificationsTopic
+} from '@src/types/notifications-center';
+
+const notificationsCenterApi = consumeRemoteApi<NotificationsCenterProperties>(
+  {
+    baseChannel: 'notifications-center',
+    properties: notificationsCenterProperties
+  },
+  { logger, runtime }
+);
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useNotificationsCenter = () => {
+  const { markAsRead, notifications$, remove } = notificationsCenterApi.notifications;
+  const { topics$, subscribe, unsubscribe } = notificationsCenterApi.topics;
+
+  const notifications = useObservable<LaceNotification[]>(notifications$);
+  const topics = useObservable<NotificationsTopic[]>(topics$);
+
+  const unreadNotifications = useMemo(
+    () => notifications?.reduce((unreadCounter, { read }) => unreadCounter + (read ? 0 : 1), 0) ?? 0,
+    [notifications]
+  );
+
+  return {
+    notifications,
+    unreadNotifications,
+    topics,
+    subscribe,
+    unsubscribe,
+    markAsRead,
+    remove
+  };
+};

apps/browser-extension-wallet/src/lib/scripts/background/index.ts

@@ -9,3 +9,4 @@ import './keep-alive-sw';
 import './onUninstall';
 import './nami-migration';
 import './onStorageChange';
+import './notifications-center';

apps/browser-extension-wallet/src/lib/scripts/background/notifications-center.ts

@@ -0,0 +1,104 @@
+import { runtime } from 'webextension-polyfill';
+import { of, Subject } from 'rxjs';
+import { exposeApi } from '@cardano-sdk/web-extension';
+
+import {
+  LaceNotification,
+  NotificationsCenterProperties,
+  notificationsCenterProperties,
+  NotificationsTopic
+} from '@src/types/notifications-center';
+import { logger } from '@lace/common';
+
+const exposeNotificationsCenterAPI = (): void => {
+  let notifications: LaceNotification[] = [
+    {
+      message: {
+        body: 'The Glacier Drop phase 2 is live',
+        chain: 'Midnight',
+        format: 'plain',
+        id: 'id-1',
+        publisher: 'Midnight',
+        topic: 'topic-1',
+        title: 'The Glacier Drop phase 2 is live'
+      }
+    },
+    {
+      message: {
+        body: 'The new node version XYZ is out',
+        chain: 'Midnight',
+        format: 'plain',
+        id: 'id-2',
+        publisher: 'Midnight',
+        topic: 'topic-2',
+        title: 'The new node version XYZ is out'
+      }
+    },
+    {
+      message: {
+        body: 'The governance council has opened voting for governance action number 26.\nNIGHT holders are welcome to cast their votes until Aug-31 via the portal at\n\nhttps://governance.midnight.network',
+        chain: 'Cardano',
+        format: 'plain',
+        id: 'id-3',
+        publisher: 'Governance',
+        topic: 'topic-1',
+        title: 'The governance council has opened voting for governance action number 26'
+      },
+      read: true
+    }
+  ];
+
+  const topics: NotificationsTopic[] = [{ name: 'topic-1' }, { name: 'topic-2', subscribed: true }];
+
+  const notifications$ = new Subject<LaceNotification[]>();
+  const topics$ = new Subject<NotificationsTopic[]>();
+
+  const markAsRead = async (id?: string): Promise<void> => {
+    for (const notification of notifications) if (notification.message.id === id || !id) notification.read = true;
+
+    notifications$.next(notifications);
+
+    return Promise.resolve();
+  };
+
+  const remove = async (id: string): Promise<void> => {
+    notifications = notifications.filter((notification) => notification.message.id !== id);
+
+    notifications$.next(notifications);
+
+    return Promise.resolve();
+  };
+
+  const subscribe = async (topic: string): Promise<void> => {
+    for (const currTopic of topics) if (currTopic.name === topic) currTopic.subscribed = true;
+
+    topics$.next(topics);
+
+    return Promise.resolve();
+  };
+
+  const unsubscribe = async (topic: string): Promise<void> => {
+    for (const currTopic of topics) if (currTopic.name === topic) delete currTopic.subscribed;
+
+    topics$.next(topics);
+
+    return Promise.resolve();
+  };
+
+  exposeApi<NotificationsCenterProperties>(
+    {
+      api$: of({
+        notifications: { markAsRead, notifications$, remove },
+        topics: { topics$, subscribe, unsubscribe }
+      }),
+      baseChannel: 'notifications-center',
+      properties: notificationsCenterProperties
+    },
+    { logger, runtime }
+  );
+
+  notifications$.next(notifications);
+  topics$.next(topics);
+};
+
+if (!(globalThis as unknown as { LMP_BUNDLE: boolean }).LMP_BUNDLE) exposeNotificationsCenterAPI();

apps/browser-extension-wallet/src/types/index.ts

@@ -10,3 +10,4 @@ export * from './ui';
 export * from './side-menu';
 export * from './pgp';
 export * from './paperWallet';
+export * from './notifications-center';

apps/browser-extension-wallet/src/types/notifications-center.ts

@@ -0,0 +1,48 @@
+import { Observable } from 'rxjs';
+import { RemoteApiProperties, RemoteApiPropertyType } from '@cardano-sdk/web-extension';
+
+export interface LaceMessage {
+  body: string;
+  chain: string;
+  format: string;
+  id: string;
+  publisher: string;
+  title: string;
+  topic: string;
+}
+
+export interface LaceNotification {
+  message: LaceMessage;
+  read?: boolean;
+}
+
+export interface NotificationsTopic {
+  name: string;
+  subscribed?: boolean;
+}
+
+export interface NotificationsCenterProperties {
+  notifications: {
+    markAsRead: (id?: string) => Promise<void>; // markAsRead() marks all as read
+    notifications$: Observable<LaceNotification[]>;
+    remove: (id: string) => Promise<void>;
+  };
+  topics: {
+    topics$: Observable<NotificationsTopic[]>;
+    subscribe: (topic: string) => Promise<void>;
+    unsubscribe: (topic: string) => Promise<void>;
+  };
+}
+
+export const notificationsCenterProperties: RemoteApiProperties<NotificationsCenterProperties> = {
+  notifications: {
+    markAsRead: RemoteApiPropertyType.MethodReturningPromise,
+    notifications$: RemoteApiPropertyType.HotObservable,
+    remove: RemoteApiPropertyType.MethodReturningPromise
+  },
+  topics: {
+    topics$: RemoteApiPropertyType.HotObservable,
+    subscribe: RemoteApiPropertyType.MethodReturningPromise,
+    unsubscribe: RemoteApiPropertyType.MethodReturningPromise
+  }
+};