fixup! feat: consume notifications center remote api (and expose mock version)

Author: iccicci

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

@@ -48,6 +48,7 @@ export const NotificationsBellContainer = ({ popupView }: NotificationsCenterCon
           <NotificationsDropDown
             notifications={notifications}
             onMarkAllAsRead={() => markAsRead()}
+            onMarkAsRead={(id: string) => markAsRead(id)}
             onViewAll={handleViewAll}
             popupView={popupView}
           />

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

@@ -4,13 +4,17 @@ import { Box, Flex } from '@input-output-hk/lace-ui-toolkit';
 
 import { Button, NavigationButton } from '@lace/common';
 import { SectionTitle } from '@components/Layout/SectionTitle';
+import { NotificationsTopic } from '@src/types/notifications-center';
 
 import styles from './NotificationsCenter.module.scss';
 
 export interface NotificationsCenterProps {
   onBack: () => void;
   onMarkAllAsRead: () => void;
+  onMarkAsRead: (id: string) => void;
   popupView?: boolean;
+  topics: NotificationsTopic[];
+  unreadNotifications: number;
 }
 
 export const NotificationsCenter = ({

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

@@ -10,7 +10,7 @@ import { NotificationsCenter } from './NotificationsCenter';
 export const NotificationsCenterContainer = (): React.ReactElement => {
   const history = useHistory();
   const { walletUI } = useWalletStore();
-  const { topics, notifications, markAsRead } = useNotificationsCenter();
+  const { markAsRead, notifications, topics, unreadNotifications } = useNotificationsCenter();
 
   // eslint-disable-next-line no-console
   console.log('topics', topics);
@@ -21,7 +21,10 @@ export const NotificationsCenterContainer = (): React.ReactElement => {
     <NotificationsCenter
       onBack={() => history.goBack()}
       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

@@ -12,6 +12,7 @@ import styles from './NotificationsDropDown.module.scss';
 export interface NotificationsDropDownProps {
   notifications: string[];
   onMarkAllAsRead: () => void;
+  onMarkAsRead: (id: string) => void;
   onViewAll: () => void;
   popupView?: boolean;
 }