post-review changes

ui/marketplace/AppSecurityReport.tsx

@@ -74,7 +74,7 @@ const AppSecurityReport = ({
       <PopoverContent w={{ base: '100vw', lg: '328px' }}>
         <PopoverBody px="26px" py="20px" fontSize="sm">
           <Text fontWeight="500" fontSize="xs" mb={ 2 } variant="secondary">Smart contracts info</Text>
-          <Flex alignItems="center" justifyContent="space-between" h="32px">
+          <Flex alignItems="center" justifyContent="space-between" py={ 1.5 }>
             <Flex alignItems="center">
               <IconSvg name="contracts_verified" boxSize={ 5 } color="green.500" mr={ 1 }/>
               <Text>Verified contracts</Text>

ui/marketplace/MarketplaceAppTopBar.tsx

-import { chakra, Flex, Tooltip, Skeleton, useBoolean } from '@chakra-ui/react';
+import { chakra, Flex, Tooltip, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { MarketplaceAppOverview, MarketplaceAppSecurityReport } from 'types/client/marketplace';
-import { ContractListTypes } from 'types/client/marketplace';
+import type { MarketplaceAppOverview, MarketplaceAppSecurityReport, ContractListTypes } from 'types/client/marketplace';
 
 import { route } from 'nextjs-routes';
 
@@ -27,8 +26,7 @@ type Props = {
 }
 
 const MarketplaceAppTopBar = ({ data, isLoading, securityReport }: Props) => {
-  const [ isContractListShown, setIsContractListShown ] = useBoolean(false);
-  const [ contractListType, setContractListType ] = React.useState(ContractListTypes.ALL);
+  const [ contractListType, setContractListType ] = React.useState<ContractListTypes>();
   const appProps = useAppContext();
   const isMobile = useIsMobile();
 
@@ -45,10 +43,8 @@ const MarketplaceAppTopBar = ({ data, isLoading, securityReport }: Props) => {
     } catch (err) {}
   }
 
-  const showContractList = React.useCallback((id: string, type: ContractListTypes) => {
-    setIsContractListShown.on();
-    setContractListType(type);
-  }, [ setIsContractListShown ]);
+  const showContractList = React.useCallback((id: string, type: ContractListTypes) => setContractListType(type), []);
+  const hideContractList = React.useCallback(() => setContractListType(undefined), []);
 
   return (
     <>
@@ -93,11 +89,11 @@ const MarketplaceAppTopBar = ({ data, isLoading, securityReport }: Props) => {
           </Flex>
         ) }
       </Flex>
-      { isContractListShown && (
+      { contractListType && (
         <ContractListModal
           type={ contractListType }
           contracts={ securityReport?.contractsData }
-          onClose={ setIsContractListShown.off }
+          onClose={ hideContractList }
         />
       ) }
     </>

ui/shared/sort/ButtonDesktop.tsx

@@ -10,14 +10,14 @@ import React from 'react';
 import IconSvg from 'ui/shared/IconSvg';
 
 type ButtonProps = {
-  isMenuOpen: boolean;
+  isActive: boolean;
   onClick: () => void;
   isLoading?: boolean;
   children: React.ReactNode;
   className?: string;
 };
 
-const ButtonDesktop = ({ children, isMenuOpen, onClick, isLoading, className }: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const ButtonDesktop = ({ children, isActive, onClick, isLoading, className }: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
   const primaryColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
   const secondaryColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
 
@@ -33,21 +33,21 @@ const ButtonDesktop = ({ children, isMenuOpen, onClick, isLoading, className }:
         fontWeight="600"
         borderColor="transparent"
         px={ 2 }
-        data-selected={ isMenuOpen }
+        data-selected={ isActive }
       >
         <Box
-          as={ isMenuOpen ? 'div' : 'span' }
-          color={ isMenuOpen ? 'inherit' : secondaryColor }
+          as={ isActive ? 'div' : 'span' }
+          color={ isActive ? 'inherit' : secondaryColor }
           fontWeight="400"
           mr={ 1 }
-          transition={ isMenuOpen ? 'none' : 'inherit' }
+          transition={ isActive ? 'none' : 'inherit' }
         >Sort by</Box>
         { children }
         <IconSvg
           name="arrows/east-mini"
           boxSize={ 5 }
           ml={ 1 }
-          transform={ isMenuOpen ? 'rotate(90deg)' : 'rotate(-90deg)' }
+          transform={ isActive ? 'rotate(90deg)' : 'rotate(-90deg)' }
         />
       </Button>
     </Skeleton>

ui/shared/sort/Sort.tsx

@@ -47,7 +47,7 @@ const Sort = <Sort extends string>({ name, options, isLoading, onChange, default
         { isMobile ? (
           <SortButtonMobile isActive={ isOpen || Boolean(value) } onClick={ onToggle } isLoading={ isLoading }/>
         ) : (
-          <SortButtonDesktop isMenuOpen={ isOpen } isLoading={ isLoading } onClick={ onToggle }>
+          <SortButtonDesktop isActive={ isOpen } isLoading={ isLoading } onClick={ onToggle }>
             { options.find((option: TOption<Sort>) => option.id === value || (!option.id && !value))?.title }
           </SortButtonDesktop>
         ) }