custom header for home page

pages/_app.tsx

@@ -4,16 +4,21 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import type { AppProps } from 'next/app';
 import React, { useState } from 'react';
 
+import appConfig from 'configs/app/config';
 import { AppContextProvider } from 'lib/appContext';
 import { Chakra } from 'lib/Chakra';
 import useConfigSentry from 'lib/hooks/useConfigSentry';
 import type { ErrorType } from 'lib/hooks/useFetch';
+import useScrollDirection from 'lib/hooks/useScrollDirection';
+import { SocketProvider } from 'lib/socket/context';
 import theme from 'theme';
+import ScrollDirectionContext from 'ui/ScrollDirectionContext';
 import AppError from 'ui/shared/AppError/AppError';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
 
 function MyApp({ Component, pageProps }: AppProps) {
   useConfigSentry();
+  const directionContext = useScrollDirection();
 
   const [ queryClient ] = useState(() => new QueryClient({
     defaultOptions: {
@@ -57,7 +62,11 @@ function MyApp({ Component, pageProps }: AppProps) {
       <ErrorBoundary renderErrorScreen={ renderErrorScreen } onError={ handleError }>
         <AppContextProvider pageProps={ pageProps }>
           <QueryClientProvider client={ queryClient }>
-            <Component { ...pageProps }/>
+            <ScrollDirectionContext.Provider value={ directionContext }>
+              <SocketProvider url={ `${ appConfig.api.socket }${ appConfig.api.basePath }/socket/v2` }>
+                <Component { ...pageProps }/>
+              </SocketProvider>
+            </ScrollDirectionContext.Provider>
             <ReactQueryDevtools/>
           </QueryClientProvider>
         </AppContextProvider>

ui/home/LatestTxs.tsx

@@ -27,7 +27,7 @@ const LatestTransactions = () => {
   if (isLoading) {
     content = (
       <>
-        <Skeleton h="56px" w="100%"/>
+        <Skeleton h="56px" w="100%" borderBottomLeftRadius={ 0 } borderBottomRightRadius={ 0 }/>
         { Array.from(Array(txsCount)).map((item, index) => <LatestTxsItemSkeleton key={ index }/>) }
       </>
     );

ui/pages/Home.tsx

@@ -6,28 +6,42 @@ import LatestBlocks from 'ui/home/LatestBlocks';
 import LatestTxs from 'ui/home/LatestTxs';
 import Stats from 'ui/home/Stats';
 import Page from 'ui/shared/Page/Page';
+import ColorModeToggler from 'ui/snippets/header/ColorModeToggler';
+import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
 
 const Home = () => {
   return (
-    <Page hasSearch={ false }>
+    <Page isHomePage>
       <Box
         w="100%"
         backgroundImage="radial-gradient(farthest-corner at 0 0, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%)"
         borderRadius="24px"
-        padding={{ base: '24px 40px', lg: '48px' }}
+        padding={{ base: '24px', lg: '48px' }}
         minW={{ base: 'unset', lg: '900px' }}
       >
-        <Heading
-          as="h1"
-          size={{ base: 'lg', ld: 'xl' }}
-          fontWeight={{ base: 600, lg: 500 }}
-          color="white"
-          mb={{ base: 6, lg: 8 }}
-        >
-          Welcome to Blockscout explorer
-        </Heading>
-        <LightMode><SearchBar isHomepage/></LightMode>
+        <Flex mb={{ base: 6, lg: 8 }} justifyContent="space-between">
+          <Heading
+            as="h1"
+            size={{ base: 'md', lg: 'xl' }}
+            lineHeight={{ base: '32px', lg: '50px' }}
+            fontWeight={ 500 }
+            color="white"
+          >
+            Welcome to Blockscout explorer
+          </Heading>
+          <Flex
+            alignItems="center"
+            display={{ base: 'none', lg: 'flex' }}
+            columnGap={ 12 }
+          >
+            <ColorModeToggler trackBg="whiteAlpha.500"/>
+            <ProfileMenuDesktop/>
+          </Flex>
+        </Flex>
+        <LightMode>
+          <SearchBar isHomepage/>
+        </LightMode>
       </Box>
       <Stats/>
       <ChainIndicators/>

ui/shared/Page/Page.tsx

@@ -4,12 +4,8 @@ import React from 'react';
 
 import { QueryKeys } from 'types/client/queries';
 
-import appConfig from 'configs/app/config';
 import * as cookies from 'lib/cookies';
 import useFetch from 'lib/hooks/useFetch';
-import useScrollDirection from 'lib/hooks/useScrollDirection';
-import { SocketProvider } from 'lib/socket/context';
-import ScrollDirectionContext from 'ui/ScrollDirectionContext';
 import AppError from 'ui/shared/AppError/AppError';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
 import PageContent from 'ui/shared/Page/PageContent';
@@ -20,14 +16,14 @@ interface Props {
   children: React.ReactNode;
   wrapChildren?: boolean;
   hideMobileHeaderOnScrollDown?: boolean;
-  hasSearch?: boolean;
+  isHomePage?: boolean;
 }
 
 const Page = ({
   children,
   wrapChildren = true,
   hideMobileHeaderOnScrollDown,
-  hasSearch = true,
+  isHomePage,
 }: Props) => {
   const fetch = useFetch();
 
@@ -35,32 +31,26 @@ const Page = ({
     enabled: Boolean(cookies.get(cookies.NAMES.API_TOKEN)),
   });
 
-  const directionContext = useScrollDirection();
-
   const renderErrorScreen = React.useCallback(() => {
     return wrapChildren ?
-      <PageContent hasSearch={ hasSearch }><AppError statusCode={ 500 } mt="50px"/></PageContent> :
+      <PageContent isHomePage={ isHomePage }><AppError statusCode={ 500 } mt="50px"/></PageContent> :
       <AppError statusCode={ 500 }/>;
-  }, [ wrapChildren, hasSearch ]);
+  }, [ isHomePage, wrapChildren ]);
 
   const renderedChildren = wrapChildren ? (
-    <PageContent hasSearch={ hasSearch }>{ children }</PageContent>
+    <PageContent isHomePage={ isHomePage }>{ children }</PageContent>
   ) : children;
 
   return (
-    <SocketProvider url={ `${ appConfig.api.socket }${ appConfig.api.basePath }/socket/v2` }>
-      <ScrollDirectionContext.Provider value={ directionContext }>
-        <Flex w="100%" minH="100vh" alignItems="stretch">
-          <NavigationDesktop/>
-          <Flex flexDir="column" width="100%">
-            <Header hasSearch={ hasSearch } hideOnScrollDown={ hideMobileHeaderOnScrollDown }/>
-            <ErrorBoundary renderErrorScreen={ renderErrorScreen }>
-              { renderedChildren }
-            </ErrorBoundary>
-          </Flex>
-        </Flex>
-      </ScrollDirectionContext.Provider>
-    </SocketProvider>
+    <Flex w="100%" minH="100vh" alignItems="stretch">
+      <NavigationDesktop/>
+      <Flex flexDir="column" width="100%">
+        <Header isHomePage={ isHomePage } hideOnScrollDown={ hideMobileHeaderOnScrollDown }/>
+        <ErrorBoundary renderErrorScreen={ renderErrorScreen }>
+          { renderedChildren }
+        </ErrorBoundary>
+      </Flex>
+    </Flex>
   );
 };
 

ui/shared/Page/PageContent.tsx

@@ -3,17 +3,17 @@ import React from 'react';
 
 interface Props {
   children: React.ReactNode;
-  hasSearch?: boolean;
+  isHomePage?: boolean;
 }
 
-const PageContent = ({ children, hasSearch }: Props) => {
+const PageContent = ({ children, isHomePage }: Props) => {
   return (
     <Box
       as="main"
       w="100%"
       paddingX={{ base: 4, lg: 12 }}
       paddingBottom={ 10 }
-      paddingTop={{ base: hasSearch ? '138px' : '88px', lg: 0 }}
+      paddingTop={{ base: isHomePage ? '88px' : '138px', lg: isHomePage ? 9 : 0 }}
     >
       { children }
     </Box>

ui/snippets/header/ColorModeToggler.tsx

@@ -21,7 +21,9 @@ import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 export interface ColorModeTogglerProps
   extends Omit<UseCheckboxProps, 'isIndeterminate'>,
   Omit<HTMLChakraProps<'label'>, keyof UseCheckboxProps>,
-  ThemingProps<'Switch'> {}
+  ThemingProps<'Switch'> {
+  trackBg?: string;
+}
 
 const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref) => {
   const ownProps = omitThemingProps(props);
@@ -39,7 +41,7 @@ const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref)
   const transitionProps = getDefaultTransitionProps();
 
   const trackStyles: SystemStyleObject = React.useMemo(() => ({
-    bg: trackBg,
+    bgColor: props.trackBg || trackBg,
     width: '72px',
     height: '32px',
     borderRadius: 'full',
@@ -50,7 +52,7 @@ const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref)
     cursor: 'pointer',
     ...transitionProps,
     transitionDuration: 'ultra-slow',
-  }), [ trackBg, transitionProps ]);
+  }), [ props.trackBg, trackBg, transitionProps ]);
 
   const thumbStyles: SystemStyleObject = React.useMemo(() => ({
     bg: thumbBg,

ui/snippets/header/Header.tsx

@@ -11,11 +11,11 @@ import Burger from './Burger';
 import ColorModeToggler from './ColorModeToggler';
 
 type Props = {
-  hasSearch: boolean;
+  isHomePage?: boolean;
   hideOnScrollDown?: boolean;
 }
 
-const Header = ({ hideOnScrollDown, hasSearch }: Props) => {
+const Header = ({ hideOnScrollDown, isHomePage }: Props) => {
   const bgColor = useColorModeValue('white', 'black');
 
   return (
@@ -43,22 +43,27 @@ const Header = ({ hideOnScrollDown, hasSearch }: Props) => {
               <NetworkLogo/>
               <ProfileMenuMobile/>
             </Flex>
-            { hasSearch && <SearchBar withShadow={ !hideOnScrollDown }/> }
-          </Box><HStack
-            as="header"
-            width="100%"
-            alignItems="center"
-            justifyContent="center"
-            gap={ 12 }
-            display={{ base: 'none', lg: 'flex' }}
-            paddingX={ 12 }
-            paddingTop={ 9 }
-            paddingBottom="52px"
-          >
-            <Box width="100%">{ hasSearch && <SearchBar/> }</Box>
-            <ColorModeToggler/>
-            <ProfileMenuDesktop/>
-          </HStack>
+            { !isHomePage && <SearchBar withShadow={ !hideOnScrollDown }/> }
+          </Box>
+          { !isHomePage && (
+            <HStack
+              as="header"
+              width="100%"
+              alignItems="center"
+              justifyContent="center"
+              gap={ 12 }
+              display={{ base: 'none', lg: 'flex' }}
+              paddingX={ 12 }
+              paddingTop={ 9 }
+              paddingBottom="52px"
+            >
+              <Box width="100%">
+                <SearchBar/>
+              </Box>
+              <ColorModeToggler/>
+              <ProfileMenuDesktop/>
+            </HStack>
+          ) }
         </>
       ) }
     </ScrollDirectionContext.Consumer>