chore: hide notifs on mobile web view (#1067)

src/hooks/useNotifications.tsx

@@ -309,6 +309,15 @@ const useNotificationsContext = () => {
   // Menu state
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
+  // Unread
+  const hasUnreadNotifications = useMemo(
+    () =>
+      Object.values(notifications).some(
+        (notification) => notification.status < NotificationStatus.Seen
+      ),
+    [notifications]
+  );
+
   // Public
   return {
     notifications,
@@ -336,6 +345,9 @@ const useNotificationsContext = () => {
     isMenuOpen,
     setIsMenuOpen,
 
+    // Unread
+    hasUnreadNotifications,
+
     // Notification Preferences
     notificationPreferences,
     setNotificationPreferences,

src/layout/Footer/FooterMobile.tsx

@@ -7,6 +7,7 @@ import { DEFAULT_MARKETID } from '@/constants/markets';
 import { AppRoute } from '@/constants/routes';
 
 import { useComplianceState } from '@/hooks/useComplianceState';
+import { useNotifications } from '@/hooks/useNotifications';
 import { useShouldShowFooter } from '@/hooks/useShouldShowFooter';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
@@ -31,6 +32,7 @@ export const FooterMobile = () => {
   const marketId = useAppSelector(getCurrentMarketId);
 
   const { disableConnectButton } = useComplianceState();
+  const { hasUnreadNotifications } = useNotifications();
 
   if (!useShouldShowFooter()) return null;
 
@@ -78,7 +80,14 @@ export const FooterMobile = () => {
               {
                 value: 'alerts',
                 label: stringGetter({ key: STRING_KEYS.ALERTS }),
-                slotBefore: <$Icon iconComponent={BellIcon as any} />,
+                slotBefore: (
+                  <div tw="stack">
+                    <$Icon iconComponent={BellIcon as any} />
+                    {hasUnreadNotifications && (
+                      <$UnreadIndicator tw="relative right-[-0.35rem] top-[-0.55rem] place-self-center" />
+                    )}
+                  </div>
+                ),
                 href: AppRoute.Alerts,
               },
               {
@@ -188,3 +197,11 @@ const $StartIcon = styled.div<{ disabled?: boolean }>`
       color: var(--color-text-0);
     `}
 `;
+
+const $UnreadIndicator = styled.div`
+  width: 0.9rem;
+  height: 0.9rem;
+  border-radius: 50%;
+  background-color: var(--color-accent);
+  border: 2px solid var(--color-layer-2);
+`;

src/layout/NotificationsToastArea/index.tsx

@@ -81,7 +81,6 @@ const StyledToastArea = styled.div`
   pointer-events: none;
 
   @media ${breakpoints.mobile} {
-    width: 100%;
-    position: fixed;
+    display: none; // hide notifications on mobile web view
   }
 `;

src/views/menus/NotificationsMenu.tsx

@@ -46,6 +46,8 @@ export const NotificationsMenu = ({
 
     isMenuOpen,
     setIsMenuOpen,
+
+    hasUnreadNotifications,
   } = useNotifications();
 
   const notificationsByStatus: Partial<Record<NotificationStatus, Notification[]>> = useMemo(
@@ -58,11 +60,6 @@ export const NotificationsMenu = ({
     [notifications, getDisplayData]
   );
 
-  const hasUnreadNotifications = useMemo(
-    () => notificationsByStatus[NotificationStatus.Triggered]?.length! > 0,
-    [notificationsByStatus]
-  );
-
   const items: Parameters<typeof ComboboxDialogMenu>[0]['items'] = useMemo(
     () =>
       (Object.entries(notificationsByStatus) as unknown as [NotificationStatus, Notification[]][])