feat: implement notification list component

Author: vetalcore

apps/browser-extension-wallet/src/assets/icons/loader.component.svg

@@ -0,0 +1,7 @@
+@import '../../../../../packages/core/src/ui/styles/theme.scss';
+@import '../../../../../packages/common/src/ui/styles/theme.scss';
+
+.icon {
+  width: size_unit(10.5);
+  height: size_unit(10.5);
+}

apps/browser-extension-wallet/src/assets/icons/notifications-bell.component.svg

@@ -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>
+  );
+};

apps/browser-extension-wallet/src/assets/icons/smiley-face.component.svg

@@ -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}>

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

@@ -0,0 +1,84 @@
+/* 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, { useState } from 'react';
+import { ContentLayout } from '@src/components/Layout';
+import { useTranslation } from 'react-i18next';
+import { WarningModal } from '@src/views/browser-view/components';
+import { useNotificationsCenter } from '@hooks/useNotificationsCenter';
+import { NotificationsList } from './NotificationsList';
+import { EmptyState } from './EmptyState';
+import { Box, 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 NotificationsCenter = (): React.ReactElement => {
+  const { t } = useTranslation();
+  const [isRemoveNotificationModalVisible, setIsRemoveNotificationModalVisible] = useState(false);
+  const { notifications, loadMore, remove, unreadNotifications, isLoading } = useNotificationsCenter();
+  const [notificationIdToRemove, setNotificationIdToRemove] = useState<string | undefined>();
+  const history = useHistory();
+
+  const onShowRemoveNotificationModal = (id: string) => {
+    setNotificationIdToRemove(id);
+    setIsRemoveNotificationModalVisible(true);
+  };
+
+  const onHideRemoveNotificationModal = () => {
+    setNotificationIdToRemove(undefined);
+    setIsRemoveNotificationModalVisible(false);
+  };
+
+  const isInitialLoad = typeof notifications === 'undefined';
+
+  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-center-title"
+        />
+      }
+      isLoading={isInitialLoad}
+    >
+      <div>
+        {notifications?.length > 0 ? (
+          <NotificationsList
+            isLoading={isLoading}
+            hasMore
+            loadMore={loadMore}
+            notifications={notifications}
+            scrollableTarget="contentLayout"
+            dataLength={notifications.length}
+            onRemove={onShowRemoveNotificationModal}
+            popupView
+          />
+        ) : (
+          <Box mt="$96">
+            <EmptyState />
+          </Box>
+        )}
+      </div>
+      <WarningModal
+        visible={isRemoveNotificationModalVisible}
+        header={t('notificationsCenter.removeNotification')}
+        content={t('notificationsCenter.removeNotification.description')}
+        onCancel={onHideRemoveNotificationModal}
+        cancelLabel={t('notificationsCenter.removeNotification.cancel')}
+        confirmLabel={t('notificationsCenter.removeNotification.confirm')}
+        onConfirm={() => {
+          remove(notificationIdToRemove);
+          onHideRemoveNotificationModal();
+        }}
+        isPopupView
+      />
+    </ContentLayout>
+  );
+};

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

@@ -25,3 +25,8 @@
   padding: size_unit(1) size_unit(2.75) !important;
   position: relative;
 }
+
+.icon {
+  width: size_unit(2);
+  height: size_unit(2);
+}

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

@@ -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>
 );