update link buttons, add tooltip, update modal title

ui/marketplace/ContractListModal.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 import { ContractListTypes } from 'types/client/marketplace';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import { apos } from 'lib/html-entities';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 import ContractSecurityReport from './ContractSecurityReport';
@@ -17,6 +18,12 @@ type Props = {
   contracts: Array<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
+const titles = {
+  [ContractListTypes.ALL]: `All app${ apos }s smart contracts`,
+  [ContractListTypes.ANALYZED]: 'Analyzed contracts',
+  [ContractListTypes.VERIFIED]: 'Verified contracts',
+};
+
 const ContractListModal = ({ onClose, type, contracts }: Props) => {
   const isMobile = useIsMobile();
 
@@ -43,7 +50,7 @@ const ContractListModal = ({ onClose, type, contracts }: Props) => {
     >
       <ModalOverlay/>
       <ModalContent>
-        <ModalHeader fontWeight="500" textStyle="h3" mb={ 4 }>Contracts</ModalHeader>
+        <ModalHeader fontWeight="500" textStyle="h3" mb={ 4 }>{ titles[type] }</ModalHeader>
         <ModalCloseButton/>
         <ModalBody
           maxH={ isMobile ? 'auto' : '352px' }

ui/marketplace/MarketplaceListWithScores/AppSecurityReport.tsx

@@ -5,6 +5,7 @@ import { ContractListTypes } from 'types/client/marketplace';
 
 import config from 'configs/app';
 import { apos } from 'lib/html-entities';
+import IconSvg from 'ui/shared/IconSvg';
 import SolidityscanReportButton from 'ui/shared/solidityscanReport/SolidityscanReportButton';
 import SolidityscanReportDetails from 'ui/shared/solidityscanReport/SolidityscanReportDetails';
 import SolidityscanReportScore from 'ui/shared/solidityscanReport/SolidityscanReportScore';
@@ -48,7 +49,10 @@ const AppSecurityReport = ({ id, securityReport, isLarge, showContractList }: Pr
               <SolidityscanReportDetails vulnerabilities={ issueSeverityDistribution } vulnerabilitiesCount={ totalIssues }/>
             </Box>
           ) }
-          <Link onClick={ showAnalyzedContracts }>Analyzed contracts</Link>
+          <Link onClick={ showAnalyzedContracts } display="inline-flex" alignItems="center">
+            Analyzed contracts
+            <IconSvg name="arrows/north-east" boxSize={ 5 } color="gray.400"/>
+          </Link>
         </>
       ) }
     />

ui/marketplace/MarketplaceListWithScores/LinkButton.tsx

-import { Link } from '@chakra-ui/react';
+import { Link, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 import type { MouseEvent } from 'react';
 
+import config from 'configs/app';
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
 
+export enum LinkButtonVariants {
+  DEFAULT = 'default',
+  ALL_CONTRACTS = 'all contracts',
+  VERIFIED_CONTRACTS = 'verified contracts',
+}
+
+const values = {
+  [LinkButtonVariants.ALL_CONTRACTS]: {
+    icon: 'contracts' as IconName,
+    iconColor: 'gray.500',
+    tooltip: `Total number of contracts deployed by the protocol on ${ config.chain.name }`,
+  },
+  [LinkButtonVariants.VERIFIED_CONTRACTS]: {
+    icon: 'contracts_verified' as IconName,
+    iconColor: 'green.500',
+    tooltip: `Number of verified contracts on ${ config.chain.name }`,
+  },
+  [LinkButtonVariants.DEFAULT]: {
+    icon: null,
+    iconColor: null,
+    tooltip: null,
+  },
+};
+
 interface Props {
   children: string;
   onClick: (event: MouseEvent) => void;
-  icon?: IconName;
-  iconColor?: string;
-  fontSize?: string;
-  fontWeight?: string;
+  variant?: LinkButtonVariants;
 }
 
-const LinkButton = ({ children, onClick, icon, iconColor = 'gray.500', fontSize = 'sm', fontWeight = '500' }: Props) => {
+const LinkButton = ({ children, onClick, variant = LinkButtonVariants.DEFAULT }: Props) => {
+  const { icon, iconColor, tooltip } = values[variant];
   return (
-    <Link
-      fontSize={ fontSize }
-      href="#"
-      onClick={ onClick }
-      fontWeight={ fontWeight }
-      display="inline-flex"
+    <Tooltip
+      label={ tooltip }
+      textAlign="center"
+      padding={ 2 }
+      isDisabled={ !tooltip }
+      openDelay={ 500 }
+      width="250px"
     >
-      { icon && <IconSvg name={ icon } boxSize={ 5 } color={ iconColor } mr={ 1 }/> }
-      { children }
-    </Link>
+      <Link
+        fontSize="sm"
+        onClick={ onClick }
+        fontWeight="500"
+        display="inline-flex"
+      >
+        { icon && <IconSvg name={ icon } boxSize={ 5 } color={ iconColor } mr={ 1 }/> }
+        { children }
+      </Link>
+    </Tooltip>
   );
 };
 

ui/marketplace/MarketplaceListWithScores/ListItem.tsx

@@ -11,7 +11,7 @@ import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 
 import AppLink from './AppLink';
 import AppSecurityReport from './AppSecurityReport';
-import LinkButton from './LinkButton';
+import LinkButton, { LinkButtonVariants } from './LinkButton';
 
 type Props = {
   app: MarketplaceAppPreview & { securityReport?: any }; // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -89,8 +89,8 @@ const ListItem = ({ app, onInfoClick, isFavorite, onFavoriteClick, isLoading, on
         <Flex alignItems="center">
           <Flex flex={ 1 } gap={ 3 } alignItems="center">
             <AppSecurityReport id={ id } securityReport={ securityReport } showContractList={ showContractList }/>
-            <LinkButton onClick={ showAllContracts } icon="contracts">{ totalContractsNumber }</LinkButton>
-            <LinkButton onClick={ showVerifiedContracts } icon="contracts_verified" iconColor="green.500">{ verifiedNumber }</LinkButton>
+            <LinkButton onClick={ showAllContracts } variant={ LinkButtonVariants.ALL_CONTRACTS }>{ totalContractsNumber }</LinkButton>
+            <LinkButton onClick={ showVerifiedContracts } variant={ LinkButtonVariants.VERIFIED_CONTRACTS }>{ verifiedNumber }</LinkButton>
           </Flex>
           { !isLoading && (
             <LinkButton onClick={ handleInfoClick }>More info</LinkButton>

ui/marketplace/MarketplaceListWithScores/TableItem.tsx

@@ -10,7 +10,7 @@ import IconSvg from 'ui/shared/IconSvg';
 
 import AppLink from './AppLink';
 import AppSecurityReport from './AppSecurityReport';
-import LinkButton from './LinkButton';
+import LinkButton, { LinkButtonVariants } from './LinkButton';
 
 type Props = {
   app: MarketplaceAppPreview & { securityReport?: any }; // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -85,10 +85,12 @@ const TableItem = ({
         <AppSecurityReport id={ id } securityReport={ securityReport } showContractList={ showContractList } isLarge/>
       </Td>
       <Td verticalAlign="middle">
-        <LinkButton onClick={ showAllContracts } icon="contracts">{ totalContractsNumber }</LinkButton>
+        <LinkButton onClick={ showAllContracts } variant={ LinkButtonVariants.ALL_CONTRACTS }>
+          { totalContractsNumber }
+        </LinkButton>
       </Td>
       <Td verticalAlign="middle">
-        <LinkButton onClick={ showVerifiedContracts } icon="contracts_verified" iconColor="green.500">{ verifiedNumber }</LinkButton>
+        <LinkButton onClick={ showVerifiedContracts } variant={ LinkButtonVariants.VERIFIED_CONTRACTS }>{ verifiedNumber }</LinkButton>
       </Td>
       <Td verticalAlign="middle" isNumeric>
         <LinkButton onClick={ handleInfoClick }>More info</LinkButton>