input-output-hk · vetalcore · Oct 7, 2025 · Oct 5, 2025
@@ -13,7 +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';
+import { NotificationsBellContainer } from '@src/features/notifications-center';
 
 export const MainHeader = (): React.ReactElement => {
   const { t } = useTranslation();

@@ -1,6 +1,7 @@
 @import '../../../../../packages/core/src/ui/styles/theme.scss';
 @import '../../../../../packages/common/src/ui/styles/theme.scss';
 
-.button {
-  max-width: size_unit(25);
+.icon {
+  width: size_unit(10.5);
+  height: size_unit(10.5);
 }
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Flex, Text } from '@input-output-hk/lace-ui-toolkit';
+import { useTranslation } from 'react-i18next';
+import styles from './EmptyState.module.scss';
+import SmileyFaceIcon from '../../assets/icons/smiley-face.component.svg';
+
+export const EmptyState = (): React.ReactElement => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex flexDirection="column" gap="$20" alignItems="center" justifyContent="center" data-testid="empty-state">
+      <SmileyFaceIcon className={styles.icon} />
+      <Flex alignItems="center" flexDirection="column" gap="$0">
+        <Text.Body.Large>{t('notificationsCenter.emptyState.title')}</Text.Body.Large>
+        <Text.Body.Small color="secondary">{t('notificationsCenter.emptyState.description')}</Text.Body.Small>
+      </Flex>
+    </Flex>
+  );
+};
@@ -0,0 +1,38 @@
+/* eslint-disable unicorn/no-useless-undefined */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types, promise/catch-or-return, sonarjs/cognitive-complexity, no-magic-numbers, unicorn/no-null */
+import React from 'react';
+import { ContentLayout } from '@src/components/Layout';
+import { useTranslation } from 'react-i18next';
+import { useNotificationsCenter } from '@hooks/useNotificationsCenter';
+import { Flex } from '@input-output-hk/lace-ui-toolkit';
+import { NavigationButton } from '@lace/common';
+import { useHistory } from 'react-router';
+import { SectionTitle } from '@components/Layout/SectionTitle';
+
+export const NotificationDetails = (): React.ReactElement => {
+  const { t } = useTranslation();
+  const { unreadNotifications } = useNotificationsCenter();
+  const history = useHistory();
+
+  return (
+    <ContentLayout
+      title={
+        <SectionTitle
+          isPopup
+          title={
+            <Flex alignItems="center" gap="$8">
+              <NavigationButton icon="arrow" onClick={() => history.goBack()} />
+              {t('notificationsCenter.title')}
+            </Flex>
+          }
+          sideText={`(${unreadNotifications})`}
+          data-testid="notifications-details-title"
+        />
+      }
+    >
+      <div>
+        <h1>Notification Details</h1>
+      </div>
+    </ContentLayout>
+  );
+};
@@ -5,17 +5,32 @@ import TrashOutlineComponent from '../../assets/icons/browser-view/trash-icon.co
 import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
 
+export type LaceMessage = {
+  id: string;
+  topic: string;
+  title: string;
+  body: string;
+  format: string;
+};
+
+export type LaceNotification = {
+  message: LaceMessage;
+  read?: boolean;
+};
+
 export interface NotificationListItemProps {
+  id: string;
   title: string;
   isRead?: boolean;
   popupView?: boolean;
   publisher: string;
-  onRemove?: () => void;
+  onRemove?: (id: string) => void;
   onClick: () => void;
   withBorder?: boolean;
 }
 
 export const NotificationListItem = ({
+  id,
   title,
   isRead = false,
   popupView = false,
@@ -28,7 +43,7 @@ export const NotificationListItem = ({
 
   const handleRemove = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
-    onRemove();
+    onRemove?.(id);
   };
 
   const PublisherTextComponent = popupView ? Text.Label : Text.Body.Small;
@@ -55,6 +70,7 @@ export const NotificationListItem = ({
       onClick={onClick}
       className={classnames(styles.container, withBorder && styles.withBorder)}
       p="$20"
+      w="$fill"
     >
       <Flex className={styles.content} justifyContent="center" alignItems="flex-start" flexDirection="column" gap="$8">
         <Flex alignItems="center" gap="$4" className={styles.copy}>

@@ -25,3 +25,8 @@
   padding: size_unit(1) size_unit(2.75) !important;
   position: relative;
 }
+
+.icon {
+  width: size_unit(2);
+  height: size_unit(2);
+}
@@ -4,10 +4,11 @@ import { Button } from '@lace/common';
 
 import styles from './NotificationsBell.module.scss';
 
-import NotificationBellIcon from '@lace/core/src/ui/assets/icons/notifications-bell.component.svg';
+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+');
+const MAX_NOTIFICATION_COUNT = 9;
+const formatNotificationCount = (count: number) =>
+  count <= MAX_NOTIFICATION_COUNT ? count.toString() : `${MAX_NOTIFICATION_COUNT}+`;
 
 export interface NotificationsBellProps {
   onClick: () => void;
@@ -16,7 +17,7 @@ export interface NotificationsBellProps {
 
 export const NotificationsBell = ({ onClick, unreadNotifications }: NotificationsBellProps): React.ReactElement => (
   <Button className={styles.btn} block color="gradient" data-testid="notifications-bell" onClick={onClick}>
-    <NotificationBellIcon />
+    <NotificationBellIcon className={styles.icon} />
     {unreadNotifications > 0 && <span className={styles.badge}>{formatNotificationCount(unreadNotifications)}</span>}
   </Button>
 );