Feat/adjust header to mobile

src/app/components/account/account.tsx

@@ -1,6 +1,6 @@
 import { useDispatch } from 'react-redux';
 
-import { Button, HStack } from '@chakra-ui/react';
+import { Button, HStack, useBreakpointValue } from '@chakra-ui/react';
 import { AccountMenu } from '@components/account/components/account-menu';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
 import { modalActions } from '@store/slices/modal/modal.actions';
@@ -11,6 +11,7 @@ export function Account(): React.JSX.Element {
 
   const { address, connector, isConnected } = useAccount();
   const { disconnect } = useDisconnect();
+  const isMobile = useBreakpointValue({ base: true, md: false });
 
   function onConnectWalletClick(): void {
     dispatch(modalActions.toggleSelectWalletModalVisibility());
@@ -22,15 +23,21 @@ export function Account(): React.JSX.Element {
   }
 
   return (
-    <HStack w={'275px'}>
+    <HStack h={isMobile ? '40px' : '50px'}>
       {isConnected ? (
         <AccountMenu
           address={address}
           wagmiConnector={connector}
           handleDisconnectWallet={() => onDisconnectWalletClick()}
         />
       ) : (
-        <Button variant={'account'} onClick={() => onConnectWalletClick()}>
+        <Button
+          variant={'account'}
+          onClick={() => onConnectWalletClick()}
+          h={isMobile ? '40px' : '50px'}
+          w={isMobile ? '150px' : '275px'}
+          fontSize={isMobile ? 'md' : 'lg'}
+        >
           Connect Wallet
         </Button>
       )}

src/app/components/account/components/account-menu.tsx

@@ -1,5 +1,14 @@
 import { ChevronDownIcon } from '@chakra-ui/icons';
-import { HStack, Image, Menu, MenuButton, MenuItem, MenuList, Text } from '@chakra-ui/react';
+import {
+  HStack,
+  Image,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+  useBreakpointValue,
+} from '@chakra-ui/react';
 import { truncateAddress } from 'dlc-btc-lib/utilities';
 import { Connector } from 'wagmi';
 
@@ -14,23 +23,31 @@ export function AccountMenu({
   wagmiConnector,
   handleDisconnectWallet,
 }: AccountMenuProps): React.JSX.Element | false {
+  const isMobile = useBreakpointValue({ base: true, md: false });
+
   if (!address || !wagmiConnector) return false;
   return (
     <Menu variant={'account'}>
-      <MenuButton>
+      <MenuButton h={isMobile ? '40px' : '50px'} w={isMobile ? '120px' : '275px'}>
         <HStack justifyContent={'space-evenly'}>
-          <Image
-            p={'2.5px'}
-            src={
-              wagmiConnector.name === 'WalletConnect'
-                ? './images/logos/walletconnect.svg'
-                : wagmiConnector.icon
-            }
-            alt={wagmiConnector.name}
-            boxSize={'35px'}
-          />
-          <Text>{truncateAddress(address)}</Text>
-          <ChevronDownIcon boxSize={'35px'} color={'white'} />
+          {!isMobile ? (
+            <>
+              <Image
+                p={'2.5px'}
+                src={
+                  wagmiConnector.name === 'WalletConnect'
+                    ? './images/logos/walletconnect.svg'
+                    : wagmiConnector.icon
+                }
+                alt={wagmiConnector.name}
+                boxSize={'35px'}
+              />
+              <Text>{truncateAddress(address)}</Text>
+              <ChevronDownIcon boxSize={'35px'} color={'white'} />
+            </>
+          ) : (
+            <Text>{truncateAddress(address)}</Text>
+          )}
         </HStack>
       </MenuButton>
       <MenuList>

src/app/components/company-website-button/company-website-button.tsx

@@ -5,8 +5,8 @@ import { Button, Image } from '@chakra-ui/react';
 export function CompanyWebsiteButton(): React.JSX.Element {
   const navigate = useNavigate();
 
-  const logoPath = './images/logos/dlc-link-logo.svg';
-  const altText = 'DLC.Link Logo';
+  const logoPath = './images/logos/dlc-btc-logo.svg';
+  const altText = 'dlcBTC Logo';
 
   return (
     <Button onClick={() => navigate('/')} variant={'company'} boxSize={'65px'}>

src/app/components/header/components/desktop-header.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { HStack } from '@chakra-ui/react';
+import { Account } from '@components/account/account';
+import { CompanyWebsiteButton } from '@components/company-website-button/company-website-button';
+import { NetworkBox } from '@components/network/network';
+
+import { HeaderLayout } from './header.layout';
+import { NavigationTabs } from './tabs';
+
+interface DesktopHeaderProps {
+  isNetworkMenuOpen: boolean;
+  setIsNetworkMenuOpen: (isOpen: boolean) => void;
+  handleTabClick: (route: string) => void;
+}
+
+const DesktopHeader: React.FC<DesktopHeaderProps> = ({
+  isNetworkMenuOpen,
+  setIsNetworkMenuOpen,
+  handleTabClick,
+}) => {
+  return (
+    <HeaderLayout>
+      <HStack justifyContent={'flex-start'} w={'100%'} gap={'50px'}>
+        <CompanyWebsiteButton />
+        <NavigationTabs activeTab={location.pathname} handleTabClick={handleTabClick} />
+      </HStack>
+      <HStack>
+        <>
+          <NetworkBox isMenuOpen={isNetworkMenuOpen} setIsMenuOpen={setIsNetworkMenuOpen} />
+          <Account />
+        </>
+      </HStack>
+    </HeaderLayout>
+  );
+};
+
+export default DesktopHeader;

src/app/components/header/components/mobile-header.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { HamburgerIcon } from '@chakra-ui/icons';
+import { HStack, IconButton, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
+import { Account } from '@components/account/account';
+import { CompanyWebsiteButton } from '@components/company-website-button/company-website-button';
+import { NetworkBox } from '@components/network/network';
+
+import { HeaderLayout } from './header.layout';
+
+interface MobileHeaderProps {
+  isNetworkMenuOpen: boolean;
+  setIsNetworkMenuOpen: (isOpen: boolean) => void;
+  isActiveTabs: boolean;
+}
+
+const MobileHeader: React.FC<MobileHeaderProps> = ({
+  isNetworkMenuOpen,
+  setIsNetworkMenuOpen,
+  isActiveTabs,
+}) => {
+  const navigate = useNavigate();
+  return (
+    <HeaderLayout>
+      <HStack justifyContent={'space-between'} w={'100%'} gap={'0px'}>
+        <CompanyWebsiteButton />
+        <HStack>
+          <NetworkBox isMenuOpen={isNetworkMenuOpen} setIsMenuOpen={setIsNetworkMenuOpen} />
+          <Account />
+          <Menu>
+            <MenuButton
+              as={IconButton}
+              aria-label="Options"
+              icon={<HamburgerIcon />}
+              height={'40px'}
+              width={'40px'}
+            />
+            <MenuList>
+              <MenuItem onClick={() => navigate('/')}>Points</MenuItem>
+              <MenuItem onClick={() => navigate('/proof-of-reserve')}>Proof of Reserve</MenuItem>
+              {isActiveTabs && (
+                <>
+                  <MenuItem onClick={() => navigate('/mint-withdraw')}>
+                    Mint/Withdraw dlcBTC
+                  </MenuItem>
+                  <MenuItem onClick={() => navigate('/my-vaults')}>My Vaults</MenuItem>
+                </>
+              )}
+            </MenuList>
+          </Menu>
+        </HStack>
+      </HStack>
+    </HeaderLayout>
+  );
+};
+
+export default MobileHeader;

src/app/components/header/header.tsx

@@ -1,24 +1,21 @@
 import React, { useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
-import { HamburgerIcon } from '@chakra-ui/icons';
-import { HStack, IconButton, VStack, useBreakpointValue } from '@chakra-ui/react';
-import { Account } from '@components/account/account';
-import { CompanyWebsiteButton } from '@components/company-website-button/company-website-button';
-import { HeaderLayout } from '@components/header/components/header.layout';
-import { NetworkBox } from '@components/network/network';
+import { VStack, useBreakpointValue } from '@chakra-ui/react';
+import { useActiveTabs } from '@hooks/use-active-tabs';
 import { useAccount } from 'wagmi';
 
 import { Banner } from './components/banner';
-import { NavigationTabs } from './components/tabs';
+import DesktopHeader from './components/desktop-header';
+import MobileHeader from './components/mobile-header';
 
 export function Header(): React.JSX.Element {
   const navigate = useNavigate();
-  const location = useLocation();
   const { chain, isConnected } = useAccount();
 
   const [showBanner, setShowBanner] = useState<boolean>(false);
   const [isNetworkMenuOpen, setIsNetworkMenuOpen] = useState<boolean>(false);
+  const { isActiveTabs } = useActiveTabs();
 
   const handleTabClick = (route: string) => {
     navigate(route);
@@ -45,34 +42,19 @@ export function Header(): React.JSX.Element {
           }}
         />
       )}
-      <HeaderLayout>
-        <HStack
-          justifyContent={isMobile ? 'space-between' : 'flex-start'}
-          w={'100%'}
-          gap={isMobile ? '0px' : '50px'}
-        >
-          <CompanyWebsiteButton />
-          {isMobile ? (
-            <IconButton
-              aria-label="menu"
-              icon={<HamburgerIcon />}
-              onClick={() => {
-                console.log('clicked');
-              }}
-            />
-          ) : (
-            <NavigationTabs activeTab={location.pathname} handleTabClick={handleTabClick} />
-          )}
-        </HStack>
-        <HStack>
-          {!isMobile && (
-            <>
-              <NetworkBox isMenuOpen={isNetworkMenuOpen} setIsMenuOpen={setIsNetworkMenuOpen} />
-              <Account />
-            </>
-          )}
-        </HStack>
-      </HeaderLayout>
+      {isMobile ? (
+        <MobileHeader
+          isNetworkMenuOpen={isNetworkMenuOpen}
+          setIsNetworkMenuOpen={setIsNetworkMenuOpen}
+          isActiveTabs={isActiveTabs}
+        />
+      ) : (
+        <DesktopHeader
+          isNetworkMenuOpen={isNetworkMenuOpen}
+          setIsNetworkMenuOpen={setIsNetworkMenuOpen}
+          handleTabClick={handleTabClick}
+        />
+      )}
     </VStack>
   );
 }

src/app/components/network/components/networks-menu.tsx

@@ -1,29 +1,68 @@
-import { HStack, Menu, MenuButton, MenuItem, MenuList, Text } from '@chakra-ui/react';
+import {
+  HStack,
+  Image,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+  useBreakpointValue,
+} from '@chakra-ui/react';
+import { EthereumNetworkID } from 'dlc-btc-lib/models';
 import { useAccount, useConfig, useSwitchChain } from 'wagmi';
 
 interface NetworksMenuProps {
   isMenuOpen: boolean;
   setIsMenuOpen: (isMenuOpen: boolean) => void;
 }
 
+const getNetworkLogo = (ethereumNetworkId?: EthereumNetworkID) => {
+  switch (ethereumNetworkId) {
+    case EthereumNetworkID.Arbitrum:
+    case EthereumNetworkID.ArbitrumSepolia:
+      return './images/logos/arbitrum-token.svg';
+    case EthereumNetworkID.Sepolia:
+    case EthereumNetworkID.Mainnet:
+      return './images/logos/eth-token.svg';
+    case EthereumNetworkID.BaseSepolia:
+    case EthereumNetworkID.Base:
+      return './images/logos/base-token.svg';
+    default:
+      return './images/logos/arbitrum-token.svg';
+  }
+};
+
 export function NetworksMenu({
   isMenuOpen,
   setIsMenuOpen,
 }: NetworksMenuProps): React.JSX.Element | null {
   const { chains } = useConfig();
   const { chain, isConnected } = useAccount();
   const { switchChain } = useSwitchChain();
+  //TODO: maybe add the network logo to the setstate?
+
+  const isMobile = useBreakpointValue({ base: true, md: false });
 
   if (!isConnected) {
     return null;
   }
 
   return (
     <Menu variant={'networkChange'} isOpen={isMenuOpen}>
-      <MenuButton onClick={() => setIsMenuOpen(!isMenuOpen)}>
-        <HStack justifyContent={'space-evenly'}>
-          <Text>{chain ? chain?.name : 'Not Connected'}</Text>
-        </HStack>
+      <MenuButton onClick={() => setIsMenuOpen(!isMenuOpen)} h={isMobile ? '40px' : '50px'}>
+        {isMobile ? (
+          <Image
+            src={getNetworkLogo(chain?.id.toString() as EthereumNetworkID)}
+            alt={'Selected network logo'}
+            w={'30px'}
+            ml={'4px'}
+          />
+        ) : (
+          //TODO: what to display in case of not connected?
+          <HStack justifyContent={'space-evenly'}>
+            <Text>{chain ? chain?.name : 'Not Connected'}</Text>
+          </HStack>
+        )}
       </MenuButton>
       <MenuList>
         {chains.map(ethereumNetwork => {
@@ -34,6 +73,7 @@ export function NetworksMenu({
               onClick={() => {
                 switchChain({ chainId: ethereumNetwork.id });
                 setIsMenuOpen(!isMenuOpen);
+                getNetworkLogo(chain?.id.toString() as EthereumNetworkID);
               }}
             >
               {ethereumNetwork.name}