feat: extract notifications to the separate page

dapplets · Jan 22, 2025 · 244823e · 244823e
1 parent d46a87d
commit 244823e
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 89 deletions.
diff --git a/libs/shared-components/src/mini-overlay/assets/icons/bell.tsx b/libs/shared-components/src/mini-overlay/assets/icons/bell.tsx
@@ -2,19 +2,20 @@ import React from 'react'
 
 const Bell = () => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="24" height="24" rx="12" fill="#F8F9FF" />
       <path
-        d="M9.4375 3.81817C9.4375 2.95019 9.08982 2.11776 8.47095 1.504C7.85208 0.890245 7.01271 0.545441 6.1375 0.545441C5.26229 0.545441 4.42292 0.890245 3.80405 1.504C3.18518 2.11776 2.8375 2.95019 2.8375 3.81817C2.8375 7.63635 1.1875 8.72726 1.1875 8.72726H11.0875C11.0875 8.72726 9.4375 7.63635 9.4375 3.81817Z"
-        fill="currentColor"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        d="M15.4375 9.81818C15.4375 8.9502 15.0898 8.11777 14.471 7.50402C13.8521 6.89026 13.0127 6.54546 12.1375 6.54546C11.2623 6.54546 10.4229 6.89026 9.80405 7.50402C9.18518 8.11777 8.8375 8.9502 8.8375 9.81818C8.8375 13.6364 7.1875 14.7273 7.1875 14.7273H17.0875C17.0875 14.7273 15.4375 13.6364 15.4375 9.81818Z"
+        fill="#7A818B"
+        stroke="#7A818B"
+        stroke-linecap="round"
+        stroke-linejoin="round"
       />
       <path
-        d="M7.08855 10.9091C6.99185 11.0744 6.85306 11.2116 6.68607 11.307C6.51908 11.4024 6.32976 11.4526 6.13705 11.4526C5.94434 11.4526 5.75501 11.4024 5.58802 11.307C5.42103 11.2116 5.28224 11.0744 5.18555 10.9091"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        d="M13.089 16.9091C12.9923 17.0744 12.8535 17.2116 12.6866 17.307C12.5196 17.4024 12.3302 17.4526 12.1375 17.4526C11.9448 17.4526 11.7555 17.4024 11.5885 17.307C11.4215 17.2116 11.2827 17.0744 11.186 16.9091"
+        stroke="#7A818B"
+        stroke-linecap="round"
+        stroke-linejoin="round"
       />
     </svg>
   )

diff --git a/libs/shared-components/src/mini-overlay/assets/icons/index.ts b/libs/shared-components/src/mini-overlay/assets/icons/index.ts
@@ -17,6 +17,7 @@ import Person from './person'
 import Home from './home'
 import Info from './info'
 import LoaderSettings from './loader-settings'
+import Bell from './bell'
 
 export {
   MutationFallbackIcon,
@@ -38,4 +39,5 @@ export {
   Home,
   Info,
   LoaderSettings,
+  Bell,
 }
diff --git a/libs/shared-components/src/mini-overlay/components/header.tsx b/libs/shared-components/src/mini-overlay/components/header.tsx
@@ -9,6 +9,7 @@ import {
   Copy as CopyIcon,
   Disconnect as DisconnectIcon,
   Person as PersonIcon,
+  Bell as BellIcon,
 } from '../assets/icons'
 
 const HeaderWrapper = styled.div`
@@ -274,10 +275,13 @@ const Header: FC = () => {
             className={cn({ active: location.pathname === '/system/profile' })}
             data-testid="profile-page-button"
             disabled={waiting}
-            onClick={() => location.pathname !== '/system/profile' && navigate(`/system/profile`)}
+            onClick={() => navigate(`/system/profile`)}
           >
             <PersonIcon />
           </ProfileButton>
+          <HeaderButton disabled={waiting} onClick={() => navigate(`/system/notifications`)}>
+            <BellIcon />
+          </HeaderButton>
           <HeaderButton
             disabled={waiting}
             onClick={() => navigator.clipboard.writeText(loggedInAccountId)}

diff --git a/libs/shared-components/src/mini-overlay/pages/main.tsx b/libs/shared-components/src/mini-overlay/pages/main.tsx
@@ -1,65 +1,19 @@
-import { Space, Typography } from 'antd'
 import React, { FC } from 'react'
 import styled from 'styled-components'
-import MultitablePanel from '../../multitable-panel'
-import NotificationFeed from '../../notifications/notification-feed'
-import { useEngine } from '../../contexts/engine-context'
-
-const { Title, Text } = Typography
+import { Dropdown } from '../../multitable-panel/components/dropdown'
 
 const MainContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 10px;
 `
 
-export interface IMainProps {
-  modalContainerRef: React.RefObject<HTMLElement>
-}
-const Main: FC<IMainProps> = ({ modalContainerRef }) => {
-  const { loggedInAccountId, onConnectWallet } = useEngine()
+export interface IMainProps {}
+
+const Main: FC<IMainProps> = ({}) => {
   return (
     <MainContainer data-testid="main-page">
-      <MultitablePanel />
-      {loggedInAccountId ? (
-        <NotificationFeed
-          onConnectWallet={onConnectWallet}
-          loggedInAccountId={loggedInAccountId}
-          modalContainerRef={modalContainerRef}
-        />
-      ) : (
-        <Space
-          direction="vertical"
-          style={{
-            width: '100%',
-            borderRadius: '20px',
-            background: '#fff',
-            padding: '8px 8px 20px',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <Space direction="horizontal" style={{ width: '100%', display: 'flex' }}>
-            <Title style={{ userSelect: 'none', margin: '0 auto' }} level={3}>
-              Sign in
-            </Title>
-          </Space>
-
-          <Text
-            type="secondary"
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              padding: '5px',
-              textAlign: 'center',
-              fontSize: '12px',
-            }}
-          >
-            To see personalized notifications, you must sign in by connecting your wallet.
-          </Text>
-        </Space>
-      )}
+      <Dropdown />
     </MainContainer>
   )
 }

diff --git a/libs/shared-components/src/mini-overlay/pages/notifications.tsx b/libs/shared-components/src/mini-overlay/pages/notifications.tsx
@@ -0,0 +1,66 @@
+import { Space, Typography } from 'antd'
+import React, { FC } from 'react'
+import styled from 'styled-components'
+import NotificationFeed from '../../notifications/notification-feed'
+import { useEngine } from '../../contexts/engine-context'
+
+const { Title, Text } = Typography
+
+const MainContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`
+
+export interface INotificationsProps {
+  modalContainerRef: React.RefObject<HTMLElement>
+}
+
+const Notifications: FC<INotificationsProps> = ({ modalContainerRef }) => {
+  const { loggedInAccountId, onConnectWallet } = useEngine()
+  return (
+    <MainContainer data-testid="main-page">
+      {loggedInAccountId ? (
+        <NotificationFeed
+          onConnectWallet={onConnectWallet}
+          loggedInAccountId={loggedInAccountId}
+          modalContainerRef={modalContainerRef}
+        />
+      ) : (
+        <Space
+          direction="vertical"
+          style={{
+            width: '100%',
+            borderRadius: '20px',
+            background: '#fff',
+            padding: '8px 8px 20px',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Space direction="horizontal" style={{ width: '100%', display: 'flex' }}>
+            <Title style={{ userSelect: 'none', margin: '0 auto' }} level={3}>
+              Sign in
+            </Title>
+          </Space>
+
+          <Text
+            type="secondary"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '5px',
+              textAlign: 'center',
+              fontSize: '12px',
+            }}
+          >
+            To see personalized notifications, you must sign in by connecting your wallet.
+          </Text>
+        </Space>
+      )}
+    </MainContainer>
+  )
+}
+
+export default Notifications
diff --git a/libs/shared-components/src/mini-overlay/side-panel.tsx b/libs/shared-components/src/mini-overlay/side-panel.tsx
@@ -4,6 +4,7 @@ import Header from './components/header'
 import MainPage from './pages/main'
 import ProfilePage from './pages/profile'
 import EditMutationPage from './pages/edit-mutation'
+import NotificationsPage from './pages/notifications'
 
 export interface ISidePanelProps {}
 
@@ -20,14 +21,12 @@ export const SidePanel: FC<ISidePanelProps> = ({}) => {
         <Header />
         <Routes>
           <Route path="/" element={<Navigate to="/system/main" replace />} />
+          <Route path="/system/main" element={<MainPage />} />
+          <Route path="/system/profile" element={<ProfilePage />} />
           <Route
-            path="/system/main"
-            element={
-              // ToDo: avoid props drilling
-              <MainPage modalContainerRef={modalContainerRef} />
-            }
+            path="/system/notifications"
+            element={<NotificationsPage modalContainerRef={modalContainerRef} />}
           />
-          <Route path="/system/profile" element={<ProfilePage />} />
           <Route path="/system/edit-mutation/:mutationId" element={<EditMutationPage />} />
         </Routes>
       </div>

diff --git a/libs/shared-components/src/multitable-panel/index.tsx b/libs/shared-components/src/multitable-panel/index.tsx