feat: refactor layout component and add useOnlineStatus hook

valory-xyz · Feb 5, 2025 · b6c5aa2 · b6c5aa2
1 parent 8aa4be7
commit b6c5aa2
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/frontend/components/Layout/index.tsx b/frontend/components/Layout/index.tsx
@@ -1,20 +1,21 @@
 import { WifiOutlined } from '@ant-design/icons';
 import { message } from 'antd';
-import { PropsWithChildren, useContext, useEffect } from 'react';
+import { PropsWithChildren, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 
 import { COLOR } from '@/constants/colors';
-import { OnlineStatusContext } from '@/context/OnlineStatusProvider';
+import { APP_HEIGHT } from '@/constants/width';
 import { useNotifyOnNewEpoch } from '@/hooks/useNotifyOnNewEpoch';
+import { useOnlineStatusContext } from '@/hooks/useOnlineStatus';
 
 import { TopBar } from './TopBar';
 
-const Container = styled.div<{ blur: 'true' | 'false' }>`
+const Container = styled.div<{ $blur: boolean }>`
   background-color: ${COLOR.WHITE};
   border-radius: 8px;
 
   ${(props) =>
-    props.blur === 'true' &&
+    props.$blur &&
     css`
       filter: blur(2px);
       position: relative;
@@ -34,8 +35,7 @@ const Container = styled.div<{ blur: 'true' | 'false' }>`
 `;
 
 const Body = styled.div`
-  // check main.js for the height of the app ie, 700px
-  max-height: calc(700px - 45px);
+  max-height: calc(${APP_HEIGHT}px - 45px);
   padding-top: 45px;
   overflow-y: auto;
 `;
@@ -47,7 +47,7 @@ const useSystemLevelNotifications = () => {
 export const Layout = ({
   children,
 }: PropsWithChildren & { vertical?: boolean }) => {
-  const { isOnline } = useContext(OnlineStatusContext);
+  const { isOnline } = useOnlineStatusContext();
 
   // all the app level notifications
   useSystemLevelNotifications();
@@ -66,7 +66,7 @@ export const Layout = ({
   }, [isOnline]);
 
   return (
-    <Container blur={isOnline ? 'false' : 'true'}>
+    <Container $blur={!isOnline}>
       <TopBar />
       <Body>{children}</Body>
     </Container>

diff --git a/frontend/constants/width.ts b/frontend/constants/width.ts
@@ -1,4 +1,5 @@
 export const APP_WIDTH = 480;
+export const APP_HEIGHT = 700;
 
 export const MODAL_WIDTH = 412;
 

diff --git a/frontend/hooks/useOnlineStatus.ts b/frontend/hooks/useOnlineStatus.ts
@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+
+import { OnlineStatusContext } from '@/context/OnlineStatusProvider';
+
+export const useOnlineStatusContext = () => useContext(OnlineStatusContext);
diff --git a/frontend/hooks/usePause.tsx → frontend/hooks/usePause.ts b/frontend/hooks/usePause.tsx → frontend/hooks/usePause.ts