Marketplace improvements

ui/pages/Home.tsx

@@ -35,7 +35,7 @@ const Home = () => {
           </Heading>
           <Box display={{ base: 'none', lg: 'flex' }}>
             { config.features.account.isEnabled && <ProfileMenuDesktop isHomePage/> }
-            <WalletMenuDesktop isHomePage/>
+            { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop isHomePage/> }
           </Box>
         </Flex>
         <LightMode>

ui/shared/Web3ModalProvider.tsx

@@ -75,7 +75,7 @@ const Web3ModalProvider = ({ children, fallback }: Props) => {
   const web3ModalTheme = useColorModeValue('light', 'dark');
 
   if (!wagmiConfig || !ethereumClient || !feature.isEnabled) {
-    return typeof fallback === 'function' ? fallback() : (fallback || null);
+    return typeof fallback === 'function' ? fallback() : (fallback || <>{ children }</>); // eslint-disable-line react/jsx-no-useless-fragment
   }
 
   return (

ui/snippets/header/Burger.tsx

@@ -10,7 +10,11 @@ import NetworkMenuButton from 'ui/snippets/networkMenu/NetworkMenuButton';
 import NetworkMenuContentMobile from 'ui/snippets/networkMenu/NetworkMenuContentMobile';
 import useNetworkMenu from 'ui/snippets/networkMenu/useNetworkMenu';
 
-const Burger = () => {
+interface Props {
+  isAppPage?: boolean;
+}
+
+const Burger = ({ isAppPage }: Props) => {
   const iconColor = useColorModeValue('gray.600', 'white');
   const { isOpen, onOpen, onClose } = useDisclosure();
   const networkMenu = useNetworkMenu();
@@ -57,7 +61,7 @@ const Burger = () => {
             </Flex>
             { networkMenu.isOpen ?
               <NetworkMenuContentMobile tabs={ networkMenu.availableTabs } items={ networkMenu.data }/> :
-              <NavigationMobile onNavLinkClick={ onClose }/>
+              <NavigationMobile onNavLinkClick={ onClose } isAppPage={ isAppPage }/>
             }
           </DrawerBody>
         </DrawerContent>

ui/snippets/header/Header.tsx

@@ -45,12 +45,10 @@ const Header = ({ isHomePage, isAppPage, renderSearchBar }: Props) => {
         >
           <Burger/>
           <NetworkLogo/>
-          <Box display="flex">
+          <Flex columnGap={ 2 }>
             { config.features.account.isEnabled ? <ProfileMenuMobile/> : <Box boxSize={ 10 }/> }
-            <Box ml={ 2 }>
-              <WalletMenuMobile/>
-            </Box>
-          </Box>
+            { config.features.blockchainInteraction.isEnabled && <WalletMenuMobile/> }
+          </Flex>
         </Flex>
         { !isHomePage && searchBar }
       </Box>
@@ -65,7 +63,7 @@ const Header = ({ isHomePage, isAppPage, renderSearchBar }: Props) => {
           >
             { isAppPage && (
               <Box display="flex" alignItems="center" gap={ 3 }>
-                <Burger/>
+                <Burger isAppPage/>
                 <NetworkLogo isCollapsed/>
               </Box>
             ) }
@@ -74,7 +72,7 @@ const Header = ({ isHomePage, isAppPage, renderSearchBar }: Props) => {
             </Box>
             <Box display="flex">
               { config.features.account.isEnabled && <ProfileMenuDesktop/> }
-              <WalletMenuDesktop/>
+              { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop/> }
             </Box>
           </HStack>
         ) }

ui/snippets/navigation/NavLinkGroupMobile.tsx

@@ -17,10 +17,11 @@ import useNavLinkStyleProps from './useNavLinkStyleProps';
 type Props = {
   item: NavGroupItem;
   onClick: () => void;
+  isExpanded?: boolean;
 }
 
-const NavLinkGroup = ({ item, onClick }: Props) => {
-  const styleProps = useNavLinkStyleProps({ isActive: item.isActive });
+const NavLinkGroup = ({ item, onClick, isExpanded }: Props) => {
+  const styleProps = useNavLinkStyleProps({ isActive: item.isActive, isExpanded });
 
   return (
     <Box as="li" listStyleType="none" w="100%" onClick={ onClick }>

ui/snippets/navigation/NavigationMobile.tsx

@@ -11,9 +11,10 @@ import NavLinkGroupMobile from './NavLinkGroupMobile';
 
 interface Props {
   onNavLinkClick?: () => void;
+  isAppPage?: boolean;
 }
 
-const NavigationMobile = ({ onNavLinkClick }: Props) => {
+const NavigationMobile = ({ onNavLinkClick, isAppPage }: Props) => {
   const { mainNavItems, accountNavItems } = useNavItems();
 
   const [ openedGroupIndex, setOpenedGroupIndex ] = React.useState(-1);
@@ -61,9 +62,9 @@ const NavigationMobile = ({ onNavLinkClick }: Props) => {
           >
             { mainNavItems.map((item, index) => {
               if (isGroupItem(item)) {
-                return <NavLinkGroupMobile key={ item.text } item={ item } onClick={ onGroupItemOpen(index) }/>;
+                return <NavLinkGroupMobile key={ item.text } item={ item } onClick={ onGroupItemOpen(index) } isExpanded={ isAppPage }/>;
               } else {
-                return <NavLink key={ item.text } item={ item } onClick={ onNavLinkClick }/>;
+                return <NavLink key={ item.text } item={ item } onClick={ onNavLinkClick } isCollapsed={ isAppPage ? false : undefined }/>;
               }
             }) }
           </VStack>

ui/snippets/profileMenu/ProfileMenuDesktop.tsx

@@ -1,5 +1,5 @@
 import type { IconButtonProps } from '@chakra-ui/react';
-import { Popover, PopoverContent, PopoverBody, PopoverTrigger, IconButton, useColorModeValue, Tooltip, Box } from '@chakra-ui/react';
+import { Popover, PopoverContent, PopoverBody, PopoverTrigger, IconButton, Tooltip, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
@@ -8,13 +8,16 @@ import * as mixpanel from 'lib/mixpanel/index';
 import UserAvatar from 'ui/shared/UserAvatar';
 import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
 
+import useMenuButtonColors from '../useMenuButtonColors';
+
 type Props = {
   isHomePage?: boolean;
 };
 
 const ProfileMenuDesktop = ({ isHomePage }: Props) => {
   const { data, error, isPending } = useFetchProfileInfo();
   const loginUrl = useLoginUrl();
+  const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
   const [ hasMenu, setHasMenu ] = React.useState(false);
 
   React.useEffect(() => {
@@ -51,16 +54,13 @@ const ProfileMenuDesktop = ({ isHomePage }: Props) => {
   }, [ hasMenu, isHomePage ]);
 
   let iconButtonStyles: Partial<IconButtonProps> = {};
-  const themedBackground = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-  const themedBorderColor = useColorModeValue('gray.300', 'gray.700');
-  const themedColor = useColorModeValue('blackAlpha.800', 'gray.400');
   if (hasMenu) {
     iconButtonStyles = {
-      bg: isHomePage ? '#EBF8FF' : themedBackground,
+      bg: isHomePage ? 'blue.50' : themedBackground,
     };
   } else if (isHomePage) {
     iconButtonStyles = {
-      color: '#fff',
+      color: 'white',
     };
   } else {
     iconButtonStyles = {

ui/snippets/profileMenu/ProfileMenuMobile.tsx

@@ -1,4 +1,4 @@
-import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconButton, useColorModeValue } from '@chakra-ui/react';
+import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconButton } from '@chakra-ui/react';
 import type { IconButtonProps } from '@chakra-ui/react';
 import React from 'react';
 
@@ -8,11 +8,13 @@ import * as mixpanel from 'lib/mixpanel/index';
 import UserAvatar from 'ui/shared/UserAvatar';
 import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
 
+import useMenuButtonColors from '../useMenuButtonColors';
+
 const ProfileMenuMobile = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-
   const { data, error, isPending } = useFetchProfileInfo();
   const loginUrl = useLoginUrl();
+  const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
   const [ hasMenu, setHasMenu ] = React.useState(false);
 
   const handleSignInClick = React.useCallback(() => {
@@ -41,10 +43,6 @@ const ProfileMenuMobile = () => {
     };
   })();
 
-  const themedBackground = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-  const themedBorderColor = useColorModeValue('gray.300', 'gray.700');
-  const themedColor = useColorModeValue('blackAlpha.800', 'gray.400');
-
   return (
     <>
       <IconButton

ui/snippets/useMenuButtonColors.tsx

@@ -0,0 +1,9 @@
+import { useColorModeValue } from '@chakra-ui/react';
+
+export default function useMenuColors() {
+  const themedBackground = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+  const themedBorderColor = useColorModeValue('gray.300', 'gray.700');
+  const themedColor = useColorModeValue('blackAlpha.800', 'gray.400');
+
+  return { themedBackground, themedBorderColor, themedColor };
+}

ui/snippets/walletMenu/WalletMenuContent.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, Button, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
@@ -9,43 +9,39 @@ type Props = {
   disconnect?: () => void;
 };
 
-const WalletMenuContent = ({ address, disconnect }: Props) => {
-  const primaryTextColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
-  return (
-    <Box>
-      <Text
-        fontSize="sm"
-        fontWeight={ 600 }
-        mb={ 1 }
-        color={ primaryTextColor }
-        { ...getDefaultTransitionProps() }
-      >
-        My wallet
-      </Text>
-      <Text
-        fontSize="sm"
-        mb={ 5 }
-        fontWeight={ 400 }
-        color="gray.500"
-        { ...getDefaultTransitionProps() }
-      >
-        Your wallet is used to interact with apps and contracts in the explorer.
-      </Text>
-      <AddressEntity
-        address={{ hash: address }}
-        noLink
-        noTooltip
-        truncation="dynamic"
-        fontSize="sm"
-        fontWeight={ 700 }
-        color={ primaryTextColor }
-        mb={ 6 }
-      />
-      <Button size="sm" width="full" variant="outline" onClick={ disconnect }>
-        Disconnect
-      </Button>
-    </Box>
-  );
-};
+const WalletMenuContent = ({ address, disconnect }: Props) => (
+  <Box>
+    <Text
+      fontSize="sm"
+      fontWeight={ 600 }
+      mb={ 1 }
+      { ...getDefaultTransitionProps() }
+    >
+      My wallet
+    </Text>
+    <Text
+      fontSize="sm"
+      mb={ 5 }
+      fontWeight={ 400 }
+      color="text_secondary"
+      { ...getDefaultTransitionProps() }
+    >
+      Your wallet is used to interact with apps and contracts in the explorer.
+    </Text>
+    <AddressEntity
+      address={{ hash: address }}
+      noLink
+      noTooltip
+      truncation="dynamic"
+      fontSize="sm"
+      fontWeight={ 700 }
+      color="text"
+      mb={ 6 }
+    />
+    <Button size="sm" width="full" variant="outline" onClick={ disconnect }>
+      Disconnect
+    </Button>
+  </Box>
+);
 
 export default WalletMenuContent;

ui/snippets/walletMenu/WalletMenuDesktop.tsx

@@ -1,18 +1,21 @@
 import type { ButtonProps } from '@chakra-ui/react';
-import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button, useColorModeValue, Box, useBoolean, Tooltip } from '@chakra-ui/react';
+import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button, Box, useBoolean, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
 import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import useWallet from 'ui/snippets/walletMenu/useWallet';
 import WalletMenuContent from 'ui/snippets/walletMenu/WalletMenuContent';
 
+import useMenuButtonColors from '../useMenuButtonColors';
+
 type Props = {
   isHomePage?: boolean;
 };
 
 const WalletMenuDesktop = ({ isHomePage }: Props) => {
   const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen } = useWallet();
+  const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
   const [ isPopoverOpen, setIsPopoverOpen ] = useBoolean(false);
   const [ isTooltipShown, setIsTooltipShown ] = useBoolean(false);
 
@@ -32,20 +35,17 @@ const WalletMenuDesktop = ({ isHomePage }: Props) => {
   }, [ isWalletConnected, isHomePage ]);
 
   let buttonStyles: Partial<ButtonProps> = {};
-  const themedBackground = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-  const themedBorderColor = useColorModeValue('gray.300', 'gray.700');
-  const themedColor = useColorModeValue('blackAlpha.800', 'gray.400');
   if (isWalletConnected) {
     buttonStyles = {
-      bg: isHomePage ? '#EBF8FF' : themedBackground,
+      bg: isHomePage ? 'blue.50' : themedBackground,
       color: isHomePage ? 'blackAlpha.800' : themedColor,
       _hover: {
         color: isHomePage ? 'blackAlpha.800' : themedColor,
       },
     };
   } else if (isHomePage) {
     buttonStyles = {
-      color: '#FFFFFF',
+      color: 'white',
     };
   } else {
     buttonStyles = {

ui/snippets/walletMenu/WalletMenuMobile.tsx

@@ -1,18 +1,17 @@
-import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconButton, useColorModeValue, Icon } from '@chakra-ui/react';
+import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconButton, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import walletIcon from 'icons/wallet.svg';
 import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
 import useWallet from 'ui/snippets/walletMenu/useWallet';
 import WalletMenuContent from 'ui/snippets/walletMenu/WalletMenuContent';
 
+import useMenuButtonColors from '../useMenuButtonColors';
+
 const WalletMenuMobile = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen } = useWallet();
-
-  const themedBackground = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-  const themedBorderColor = useColorModeValue('gray.300', 'gray.700');
-  const themedColor = useColorModeValue('blackAlpha.800', 'gray.400');
+  const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
 
   return (
     <>