From 72e03d0c48598370d08454491cc388386f3951dd Mon Sep 17 00:00:00 2001 From: ALI-HUP Date: Mon, 4 Nov 2024 12:47:47 +0330 Subject: [PATCH] feat: Added titles for both Guard and Watcher, set a dynamic title for Watcher to display the network --- .changeset/great-islands-drum.md | 5 ++ .changeset/many-ducks-give.md | 6 ++ apps/guard/app/layout.tsx | 5 ++ apps/watcher/app/App.tsx | 120 +++++++++++++++++++++++++++++++ apps/watcher/app/layout.tsx | 97 ++----------------------- 5 files changed, 142 insertions(+), 91 deletions(-) create mode 100644 .changeset/great-islands-drum.md create mode 100644 .changeset/many-ducks-give.md create mode 100644 apps/watcher/app/App.tsx diff --git a/.changeset/great-islands-drum.md b/.changeset/great-islands-drum.md new file mode 100644 index 00000000..511410f8 --- /dev/null +++ b/.changeset/great-islands-drum.md @@ -0,0 +1,5 @@ +--- +'@rosen-bridge/watcher-app': major +--- + +Split layout.tsx into layout.tsx and App.tsx files, Implemented a dynamic title feature to display the network diff --git a/.changeset/many-ducks-give.md b/.changeset/many-ducks-give.md new file mode 100644 index 00000000..bd948eeb --- /dev/null +++ b/.changeset/many-ducks-give.md @@ -0,0 +1,6 @@ +--- +'@rosen-bridge/watcher-app': minor +'@rosen-bridge/guard-app': minor +--- + +Add a meta tag title to ensure an appropriate title is displayed in browsers diff --git a/apps/guard/app/layout.tsx b/apps/guard/app/layout.tsx index 250bed85..de3e1b6c 100644 --- a/apps/guard/app/layout.tsx +++ b/apps/guard/app/layout.tsx @@ -1,7 +1,12 @@ import React from 'react'; +import { Metadata } from 'next'; import App from './App'; +export const metadata: Metadata = { + title: 'Rosen Guard', +}; + const RootLayout = ({ children }: { children: React.ReactNode }) => { return ( /** diff --git a/apps/watcher/app/App.tsx b/apps/watcher/app/App.tsx new file mode 100644 index 00000000..daee2936 --- /dev/null +++ b/apps/watcher/app/App.tsx @@ -0,0 +1,120 @@ +'use client'; + +import React, { useEffect } from 'react'; +import SWRConfig from '@rosen-ui/swr-mock'; + +/** + * FIXME: import NoSsr from ui-kit + * local:ergo/rosen-bridge/ui#193 + */ +import { NoSsr } from '@mui/material'; + +import { + AppSnackbar, + styled, + SnackbarProvider, + ThemeProvider, + CssBaseline, +} from '@rosen-bridge/ui-kit'; +import { ApiKeyContextProvider } from '@rosen-bridge/shared-contexts'; + +import { SideBar } from './SideBar'; +import Toolbar from './Toolbar'; + +import { theme } from './_theme/theme'; + +import mockedData from './_mock/mockedData'; +import useInfo from './_hooks/useInfo'; +import { upperFirst } from 'lodash-es'; + +const Root = styled('div')(({ theme }) => ({ + width: '100vw', + height: '100vh', + display: 'flex', + flexDirection: 'row', + backgroundColor: theme.palette.secondary.dark, + backgroundImage: + theme.palette.mode === 'light' + ? `linear-gradient(180deg, ${theme.palette.gradient.a} 0%, ${theme.palette.gradient.b} 20%, ${theme.palette.gradient.c} 40%, ${theme.palette.gradient.d} 60%, ${theme.palette.gradient.e} 80%, ${theme.palette.gradient.f} 100%)` + : 'none', + [theme.breakpoints.down('tablet')]: { + flexDirection: 'column', + backgroundImage: + theme.palette.mode === 'light' + ? `linear-gradient(90deg, ${theme.palette.gradient.a} 0%, ${theme.palette.gradient.b} 20%, ${theme.palette.gradient.c} 40%, ${theme.palette.gradient.d} 60%, ${theme.palette.gradient.e} 80%, ${theme.palette.gradient.f} 100%)` + : 'none', + }, +})); + +const Main = styled('main')(({ theme }) => ({ + flexGrow: 1, + overflowY: 'auto', + minHeight: '100%', + backgroundColor: theme.palette.background.default, + borderTopLeftRadius: theme.shape.borderRadius * 2, + borderBottomLeftRadius: theme.shape.borderRadius * 2, + paddingTop: theme.shape.borderRadius, + paddingBottom: theme.shape.borderRadius * 3, + paddingLeft: theme.shape.borderRadius * 2, + paddingRight: theme.shape.borderRadius * 2, + + [theme.breakpoints.down('tablet')]: { + backgroundColor: theme.palette.background.paper, + borderTopRightRadius: theme.shape.borderRadius * 2, + borderBottomLeftRadius: 0, + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + paddingBottom: theme.shape.borderRadius * 6, + }, +})); + +interface AppProps { + children?: React.ReactNode; +} + +const App = ({ children }: AppProps) => { + const { data: info, isLoading } = useInfo(); + + /** + * TODO: In the next phase, refactor this React hook to utilize SSR and data fetching + * local:ergo/rosen-bridge/ui#408 + */ + useEffect(() => { + const networkTitle = isLoading + ? 'Watcher' + : `[${info?.network ? upperFirst(info.network) : ''}] Watcher`; + + document.title = networkTitle; + }, [isLoading, info]); + + return ( + + + <> + + + + + + +
+ + {children} + +
+ + + + + + + + ); +}; + +export default App; diff --git a/apps/watcher/app/layout.tsx b/apps/watcher/app/layout.tsx index 67bd833c..ccc79593 100644 --- a/apps/watcher/app/layout.tsx +++ b/apps/watcher/app/layout.tsx @@ -1,70 +1,10 @@ -'use client'; - import React from 'react'; -import SWRConfig from '@rosen-ui/swr-mock'; - -/** - * FIXME: import NoSsr from ui-kit - * local:ergo/rosen-bridge/ui#193 - */ -import { NoSsr } from '@mui/material'; - -import { - AppSnackbar, - styled, - SnackbarProvider, - ThemeProvider, - CssBaseline, -} from '@rosen-bridge/ui-kit'; -import { ApiKeyContextProvider } from '@rosen-bridge/shared-contexts'; - -import { SideBar } from './SideBar'; -import Toolbar from './Toolbar'; - -import { theme } from './_theme/theme'; +import App from './App'; +import { Metadata } from 'next'; -import mockedData from './_mock/mockedData'; - -const Root = styled('div')(({ theme }) => ({ - width: '100vw', - height: '100vh', - display: 'flex', - flexDirection: 'row', - backgroundColor: theme.palette.secondary.dark, - backgroundImage: - theme.palette.mode === 'light' - ? `linear-gradient(180deg, ${theme.palette.gradient.a} 0%, ${theme.palette.gradient.b} 20%, ${theme.palette.gradient.c} 40%, ${theme.palette.gradient.d} 60%, ${theme.palette.gradient.e} 80%, ${theme.palette.gradient.f} 100%)` - : 'none', - [theme.breakpoints.down('tablet')]: { - flexDirection: 'column', - backgroundImage: - theme.palette.mode === 'light' - ? `linear-gradient(90deg, ${theme.palette.gradient.a} 0%, ${theme.palette.gradient.b} 20%, ${theme.palette.gradient.c} 40%, ${theme.palette.gradient.d} 60%, ${theme.palette.gradient.e} 80%, ${theme.palette.gradient.f} 100%)` - : 'none', - }, -})); - -const Main = styled('main')(({ theme }) => ({ - flexGrow: 1, - overflowY: 'auto', - minHeight: '100%', - backgroundColor: theme.palette.background.default, - borderTopLeftRadius: theme.shape.borderRadius * 2, - borderBottomLeftRadius: theme.shape.borderRadius * 2, - paddingTop: theme.shape.borderRadius, - paddingBottom: theme.shape.borderRadius * 3, - paddingLeft: theme.shape.borderRadius * 2, - paddingRight: theme.shape.borderRadius * 2, - - [theme.breakpoints.down('tablet')]: { - backgroundColor: theme.palette.background.paper, - borderTopRightRadius: theme.shape.borderRadius * 2, - borderBottomLeftRadius: 0, - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - paddingBottom: theme.shape.borderRadius * 6, - }, -})); +export const metadata: Metadata = { + title: 'Watcher', +}; const RootLayout = ({ children }: { children: React.ReactNode }) => { return ( @@ -74,32 +14,7 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => { */ - - - <> - - - - - - -
- - {children} - -
- - - - - - - + {children} );