Merge pull request #1272 from bancorprotocol/issue-#1206

Add onclick close notification to "view activity" link

src/components/activity/ActivityNotification.tsx

@@ -11,9 +11,14 @@ import style from './ActivityNotification.module.css';
 interface Props {
   notification: NotificationActivity;
   close: () => void;
+  onClick?: () => void;
 }
 
-export const ActivityNotification: FC<Props> = ({ notification, close }) => {
+export const ActivityNotification: FC<Props> = ({
+  notification,
+  close,
+  onClick,
+}) => {
   const titleId = useId();
   const { activity } = notification;
 
@@ -31,6 +36,7 @@ export const ActivityNotification: FC<Props> = ({ notification, close }) => {
         </hgroup>
         <Link
           to="/strategy/$id"
+          onClick={onClick}
           params={{ id: activity.strategy.id }}
           className="font-weight-500 flex items-center"
         >

src/libs/modals/modals/ModalNotifications.tsx

@@ -2,11 +2,13 @@ import { ModalFC } from 'libs/modals/modals.types';
 import { ModalSlideOver } from 'libs/modals/ModalSlideOver';
 import { NotificationLine } from 'libs/notifications/NotificationLine';
 import { useNotifications } from 'hooks/useNotifications';
+import { useModal } from 'hooks/useModal';
 
 export const ModalNotifications: ModalFC<undefined> = ({ id }) => {
   const { notifications, clearNotifications, removeNotification } =
     useNotifications();
   const reversedNotifications = notifications.slice().reverse();
+  const { closeModal } = useModal();
 
   return (
     <ModalSlideOver
@@ -30,6 +32,7 @@ export const ModalNotifications: ModalFC<undefined> = ({ id }) => {
             <NotificationLine
               notification={n}
               close={() => removeNotification(n.id)}
+              onClick={() => closeModal(id)}
             />
           </li>
         ))}

src/libs/notifications/NotificationLine.tsx

@@ -5,14 +5,21 @@ import { Notification } from './types';
 
 interface NotificationLineProps {
   close: () => void;
+  onClick?: () => void;
   notification: Notification;
 }
 export const NotificationLine: FC<NotificationLineProps> = (props) => {
-  const { notification, close } = props;
+  const { notification, close, onClick } = props;
 
   switch (notification.type) {
     case 'activity':
-      return <ActivityNotification notification={notification} close={close} />;
+      return (
+        <ActivityNotification
+          notification={notification}
+          onClick={onClick}
+          close={close}
+        />
+      );
     case 'tx':
       return <TxNotification notification={notification} close={close} />;
     default:

src/libs/notifications/NotificationsProvider.tsx

@@ -65,6 +65,7 @@ const NotificationItem: FC<{ notification: Notification }> = (props) => {
       <NotificationLine
         notification={notification}
         close={() => dismissAlert(id)}
+        onClick={() => dismissAlert(id)}
       />
     </motion.li>
   );