fix header after merge

blockscout · Dec 12, 2023 · e0e0220 · e0e0220
1 parent 990aeaf
commit e0e0220
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 89 deletions.
diff --git a/ui/shared/layout/LayoutApp.tsx b/ui/shared/layout/LayoutApp.tsx
@@ -3,21 +3,23 @@ import React from 'react';
 import type { Props } from './types';
 
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
-import Header from 'ui/snippets/header/Header';
 import HeaderAlert from 'ui/snippets/header/HeaderAlert';
+import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
+import HeaderMobile from 'ui/snippets/header/HeaderMobile';
 
 import * as Layout from './components';
 
 const LayoutDefault = ({ children }: Props) => {
   return (
     <Layout.Container>
+      <HeaderMobile/>
       <Layout.MainArea>
         <Layout.MainColumn
           paddingTop={{ base: '138px', lg: 6 }}
           paddingX={{ base: 4, lg: 6 }}
         >
           <HeaderAlert/>
-          <Header isMarketplaceAppPage/>
+          <HeaderDesktop isMarketplaceAppPage/>
           <AppErrorBoundary>
             <Layout.Content pt={{ base: 0, lg: 6 }}>
               { children }

diff --git a/ui/snippets/header/Header.tsx b/ui/snippets/header/Header.tsx
diff --git a/ui/snippets/header/HeaderDesktop.tsx b/ui/snippets/header/HeaderDesktop.tsx
@@ -2,14 +2,19 @@ import { HStack, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
+import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
+import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
+
+import Burger from './Burger';
 
 type Props = {
   renderSearchBar?: () => React.ReactNode;
+  isMarketplaceAppPage?: boolean;
 }
 
-const HeaderDesktop = ({ renderSearchBar }: Props) => {
+const HeaderDesktop = ({ renderSearchBar, isMarketplaceAppPage }: Props) => {
 
   const searchBar = renderSearchBar ? renderSearchBar() : <SearchBar/>;
 
@@ -22,10 +27,19 @@ const HeaderDesktop = ({ renderSearchBar }: Props) => {
       justifyContent="center"
       gap={ 12 }
     >
+      { isMarketplaceAppPage && (
+        <Box display="flex" alignItems="center" gap={ 3 }>
+          <Burger isMarketplaceAppPage/>
+          <NetworkLogo isCollapsed/>
+        </Box>
+      ) }
       <Box width="100%">
         { searchBar }
       </Box>
-      { config.features.account.isEnabled && <ProfileMenuDesktop/> }
+      <Box display="flex">
+        { config.features.account.isEnabled && <ProfileMenuDesktop/> }
+        { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop/> }
+      </Box>
     </HStack>
   );
 };

diff --git a/ui/snippets/header/HeaderMobile.tsx b/ui/snippets/header/HeaderMobile.tsx
@@ -7,6 +7,7 @@ import { useScrollDirection } from 'lib/contexts/scrollDirection';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileMenuMobile from 'ui/snippets/profileMenu/ProfileMenuMobile';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
+import WalletMenuMobile from 'ui/snippets/walletMenu/WalletMenuMobile';
 
 import Burger from './Burger';
 
@@ -47,7 +48,10 @@ const HeaderMobile = ({ isHomePage, renderSearchBar }: Props) => {
       >
         <Burger/>
         <NetworkLogo/>
-        { config.features.account.isEnabled ? <ProfileMenuMobile/> : <Box boxSize={ 10 }/> }
+        <Flex columnGap={ 2 }>
+          { config.features.account.isEnabled ? <ProfileMenuMobile/> : <Box boxSize={ 10 }/> }
+          { config.features.blockchainInteraction.isEnabled && <WalletMenuMobile/> }
+        </Flex>
       </Flex>
       { !isHomePage && searchBar }
     </Box>