add mobile menu

ui/home/HeroBanner.tsx

@@ -4,9 +4,7 @@ import React from 'react';
 import config from 'configs/app';
 import AdBanner from 'ui/shared/ad/AdBanner';
 import ProfileDesktop from 'ui/snippets/profile/ProfileDesktop';
-import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
-import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
 
 const BACKGROUND_DEFAULT = 'radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)';
 const TEXT_COLOR_DEFAULT = 'white';
@@ -54,9 +52,7 @@ const HeroBanner = () => {
             }
           </Heading>
           { config.UI.navigation.layout === 'vertical' && (
-            <Box display={{ base: 'none', lg: 'flex' }}>
-              { config.features.account.isEnabled && <ProfileMenuDesktop isHomePage/> }
-              { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop isHomePage/> }
+            <Box display={{ base: 'none', lg: 'block' }}>
               { config.features.account.isEnabled && <ProfileDesktop isHomePage/> }
             </Box>
           ) }

ui/marketplace/MarketplaceAppTopBar.tsx

@@ -13,8 +13,6 @@ import LinkExternal from 'ui/shared/links/LinkExternal';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileDesktop from 'ui/snippets/profile/ProfileDesktop';
-import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
-import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
 
 import AppSecurityReport from './AppSecurityReport';
 import ContractListModal from './ContractListModal';
@@ -100,8 +98,6 @@ const MarketplaceAppTopBar = ({ appId, data, isLoading, securityReport }: Props)
         />
         { !isMobile && (
           <Flex flex="1" justifyContent="flex-end">
-            { config.features.account.isEnabled && <ProfileMenuDesktop boxSize="32px" fallbackIconSize={ 16 }/> }
-            { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop size="sm"/> }
             { config.features.account.isEnabled && <ProfileDesktop buttonSize="sm"/> }
           </Flex>
         ) }

ui/snippets/header/HeaderDesktop.tsx

@@ -38,7 +38,7 @@ const HeaderDesktop = ({ renderSearchBar, isMarketplaceAppPage }: Props) => {
         { searchBar }
       </Box>
       { config.UI.navigation.layout === 'vertical' && (
-        <Box display="flex">
+        <Box display="flex" flexShrink={ 0 }>
           { config.features.account.isEnabled && <ProfileMenuDesktop/> }
           { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop/> }
           { config.features.account.isEnabled && <ProfileDesktop/> }

ui/snippets/header/HeaderMobile.tsx

@@ -5,9 +5,8 @@ import { useInView } from 'react-intersection-observer';
 import config from 'configs/app';
 import { useScrollDirection } from 'lib/contexts/scrollDirection';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
-import ProfileMenuMobile from 'ui/snippets/profileMenu/ProfileMenuMobile';
+import ProfileMobile from 'ui/snippets/profile/ProfileMobile';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
-import WalletMenuMobile from 'ui/snippets/walletMenu/WalletMenuMobile';
 
 import Burger from './Burger';
 
@@ -48,8 +47,7 @@ const HeaderMobile = ({ hideSearchBar, renderSearchBar }: Props) => {
         <Burger/>
         <NetworkLogo ml={ 2 } mr="auto"/>
         <Flex columnGap={ 2 }>
-          { config.features.account.isEnabled ? <ProfileMenuMobile/> : <Box boxSize={ 10 }/> }
-          { config.features.blockchainInteraction.isEnabled && <WalletMenuMobile/> }
+          { config.features.account.isEnabled ? <ProfileMobile/> : <Box boxSize={ 10 }/> }
         </Flex>
       </Flex>
       { !hideSearchBar && searchBar }

ui/snippets/profile/ProfileDesktop.tsx

@@ -28,7 +28,6 @@ const ProfileDesktop = ({ buttonSize, isHomePage }: Props) => {
             variant={ isHomePage ? 'hero' : 'header' }
             onClick={ profileQuery.data ? profileMenu.onOpen : authModal.onOpen }
           />
-
         </PopoverTrigger>
         { profileQuery.data && (
           <PopoverContent maxW="280px" minW="220px" w="min-content">

ui/snippets/profile/ProfileMenuContent.tsx

@@ -41,7 +41,7 @@ const navLinks: Array<NavLink> = [
 ].filter(Boolean);
 
 interface Props {
-  data?: UserInfo;
+  data: UserInfo;
   onClose?: () => void;
 }
 

ui/snippets/profile/ProfileMobile.tsx

+import { Drawer, DrawerBody, DrawerContent, DrawerOverlay, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
+import AuthModal from 'ui/snippets/auth/AuthModal';
+
+import ProfileButton from './ProfileButton';
+import ProfileMenuContent from './ProfileMenuContent';
+
+const ProfileMobile = () => {
+  const profileQuery = useFetchProfileInfo();
+  const authModal = useDisclosure();
+  const profileMenu = useDisclosure();
+
+  return (
+    <>
+      <ProfileButton
+        profileQuery={ profileQuery }
+        variant="header"
+        onClick={ profileQuery.data ? profileMenu.onOpen : authModal.onOpen }
+      />
+      { profileQuery.data && (
+        <Drawer
+          isOpen={ profileMenu.isOpen }
+          placement="right"
+          onClose={ profileMenu.onClose }
+          autoFocus={ false }
+        >
+          <DrawerOverlay/>
+          <DrawerContent maxWidth="300px">
+            <DrawerBody p={ 6 }>
+              <ProfileMenuContent data={ profileQuery.data } onClose={ profileMenu.onClose }/>
+            </DrawerBody>
+          </DrawerContent>
+        </Drawer>
+      ) }
+      { authModal.isOpen && <AuthModal onClose={ authModal.onClose } initialScreen={{ type: 'select_method' }}/> }
+    </>
+  );
+};
+
+export default React.memo(ProfileMobile);