add security score to dapp page

ui/marketplace/AppSecurityReport.tsx

 import { Box, Text, Link } from '@chakra-ui/react';
 import React from 'react';
 
-import { ContractListTypes } from 'types/client/marketplace';
-
 import config from 'configs/app';
 import { apos } from 'lib/html-entities';
 import IconSvg from 'ui/shared/IconSvg';
@@ -11,13 +9,16 @@ import SolidityscanReportDetails from 'ui/shared/solidityscanReport/Solidityscan
 import SolidityscanReportScore from 'ui/shared/solidityscanReport/SolidityscanReportScore';
 
 type Props = {
-  id: string;
   securityReport?: any; // eslint-disable-line @typescript-eslint/no-explicit-any
   height?: string | undefined;
-  showContractList: (id: string, type: ContractListTypes) => void;
+  showContractList: () => void;
 }
 
-const AppSecurityReport = ({ id, securityReport, height, showContractList }: Props) => {
+const AppSecurityReport = ({ securityReport, height, showContractList }: Props) => {
+  if (!securityReport) {
+    return null;
+  }
+
   const {
     overallInfo: {
       securityScore,
@@ -27,11 +28,6 @@ const AppSecurityReport = ({ id, securityReport, height, showContractList }: Pro
     },
   } = securityReport;
 
-  const showAnalyzedContracts = React.useCallback(() => {
-
-    showContractList(id, ContractListTypes.ANALYZED);
-  }, [ showContractList, id ]);
-
   return (
     <SolidityscanReportButton
       height={ height }
@@ -49,7 +45,7 @@ const AppSecurityReport = ({ id, securityReport, height, showContractList }: Pro
               <SolidityscanReportDetails vulnerabilities={ issueSeverityDistribution } vulnerabilitiesCount={ totalIssues }/>
             </Box>
           ) }
-          <Link onClick={ showAnalyzedContracts } display="inline-flex" alignItems="center">
+          <Link onClick={ showContractList } display="inline-flex" alignItems="center">
             Analyzed contracts
             <IconSvg name="arrows/north-east" boxSize={ 5 } color="gray.400"/>
           </Link>

ui/marketplace/MarketplaceAppModal.tsx

@@ -68,21 +68,25 @@ const MarketplaceAppModal = ({
   }
 
   const handleFavoriteClick = useCallback(() => {
-    onFavoriteClick(data.id, isFavorite);
-  }, [ onFavoriteClick, data.id, isFavorite ]);
+    onFavoriteClick(id, isFavorite);
+  }, [ onFavoriteClick, id, isFavorite ]);
 
-  const showContractList = useCallback((id: string, type: ContractListTypes) => {
+  const showContractList = useCallback((type: ContractListTypes) => {
     onClose();
     showContractListDefault(id, type);
-  }, [ onClose, showContractListDefault ]);
+  }, [ onClose, showContractListDefault, id ]);
 
   const showAllContracts = React.useCallback(() => {
-    showContractList(id, ContractListTypes.ALL);
-  }, [ showContractList, id ]);
+    showContractList(ContractListTypes.ALL);
+  }, [ showContractList ]);
 
   const showVerifiedContracts = React.useCallback(() => {
-    showContractList(id, ContractListTypes.VERIFIED);
-  }, [ showContractList, id ]);
+    showContractList(ContractListTypes.VERIFIED);
+  }, [ showContractList ]);
+
+  const showAnalyzedContracts = React.useCallback(() => {
+    showContractList(ContractListTypes.ANALYZED);
+  }, [ showContractList ]);
 
   const isMobile = useIsMobile();
   const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
@@ -167,7 +171,7 @@ const MarketplaceAppModal = ({
 
               { securityReport && (
                 <Flex alignItems="center" gap={ 3 }>
-                  <AppSecurityReport id={ data.id } securityReport={ securityReport } showContractList={ showContractList }/>
+                  <AppSecurityReport securityReport={ securityReport } showContractList={ showAnalyzedContracts }/>
                   <ContractListButton
                     onClick={ showAllContracts }
                     variant={ ContractListButtonVariants.ALL_CONTRACTS }

ui/marketplace/MarketplaceAppTopBar.tsx

-import { chakra, Flex, Tooltip, Skeleton } from '@chakra-ui/react';
+import { chakra, Flex, Tooltip, Skeleton, useBoolean } from '@chakra-ui/react';
 import React from 'react';
 
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
+import { ContractListTypes } from 'types/client/marketplace';
 
 import { route } from 'nextjs-routes';
 
@@ -10,6 +11,8 @@ import IconSvg from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 
+import AppSecurityReport from './AppSecurityReport';
+import ContractListModal from './ContractListModal';
 import MarketplaceAppAlert from './MarketplaceAppAlert';
 import MarketplaceAppInfo from './MarketplaceAppInfo';
 
@@ -17,9 +20,11 @@ type Props = {
   data: MarketplaceAppOverview | undefined;
   isLoading: boolean;
   isWalletConnected: boolean;
+  securityReport?: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
-const MarketplaceAppTopBar = ({ data, isLoading, isWalletConnected }: Props) => {
+const MarketplaceAppTopBar = ({ data, isLoading, isWalletConnected, securityReport }: Props) => {
+  const [ showContractList, setShowContractList ] = useBoolean(false);
   const appProps = useAppContext();
 
   const goBackUrl = React.useMemo(() => {
@@ -36,34 +41,46 @@ const MarketplaceAppTopBar = ({ data, isLoading, isWalletConnected }: Props) =>
   }
 
   return (
-    <Flex alignItems="center" flexWrap="wrap" mb={{ base: 6, md: 2 }} rowGap={ 3 } columnGap={ 2 }>
-      <Tooltip label="Back to dApps list" order={ 1 }>
-        <LinkInternal display="inline-flex" href={ goBackUrl } h="32px" isLoading={ isLoading }>
-          <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" margin="auto" color="gray.400"/>
-        </LinkInternal>
-      </Tooltip>
-      <Skeleton width={{ base: '100%', md: 'auto' }} order={{ base: 4, md: 2 }} isLoaded={ !isLoading }>
-        <MarketplaceAppAlert internalWallet={ data?.internalWallet } isWalletConnected={ isWalletConnected }/>
-      </Skeleton>
-      <Skeleton order={{ base: 2, md: 3 }} isLoaded={ !isLoading }>
-        <MarketplaceAppInfo data={ data }/>
-      </Skeleton>
-      <LinkExternal
-        order={{ base: 3, md: 4 }}
-        href={ data?.url }
-        variant="subtle"
-        fontSize="sm"
-        lineHeight={ 5 }
-        minW={ 0 }
-        maxW={{ base: 'calc(100% - 114px)', md: 'auto' }}
-        display="flex"
-        isLoading={ isLoading }
-      >
-        <chakra.span isTruncated>
-          { getHostname(data?.url) }
-        </chakra.span>
-      </LinkExternal>
-    </Flex>
+    <>
+      <Flex alignItems="center" flexWrap="wrap" mb={{ base: 6, md: 2 }} rowGap={ 3 } columnGap={ 2 }>
+        <Tooltip label="Back to dApps list" order={ 1 }>
+          <LinkInternal display="inline-flex" href={ goBackUrl } h="32px" isLoading={ isLoading }>
+            <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" margin="auto" color="gray.400"/>
+          </LinkInternal>
+        </Tooltip>
+        <Skeleton width={{ base: '100%', md: 'auto' }} order={{ base: 4, md: 2 }} isLoaded={ !isLoading }>
+          <MarketplaceAppAlert internalWallet={ data?.internalWallet } isWalletConnected={ isWalletConnected }/>
+        </Skeleton>
+        <Skeleton order={{ base: 2, md: 3 }} isLoaded={ !isLoading }>
+          <MarketplaceAppInfo data={ data }/>
+        </Skeleton>
+        <Skeleton order={{ base: 2, md: 3 }} isLoaded={ !isLoading }>
+          <AppSecurityReport securityReport={ securityReport } showContractList={ setShowContractList.on }/>
+        </Skeleton>
+        <LinkExternal
+          order={{ base: 3, md: 4 }}
+          href={ data?.url }
+          variant="subtle"
+          fontSize="sm"
+          lineHeight={ 5 }
+          minW={ 0 }
+          maxW={{ base: 'calc(100% - 114px)', md: 'auto' }}
+          display="flex"
+          isLoading={ isLoading }
+        >
+          <chakra.span isTruncated>
+            { getHostname(data?.url) }
+          </chakra.span>
+        </LinkExternal>
+      </Flex>
+      { showContractList && (
+        <ContractListModal
+          type={ ContractListTypes.ANALYZED }
+          contracts={ securityReport?.contractsData }
+          onClose={ setShowContractList.off }
+        />
+      ) }
+    </>
   );
 };
 

ui/marketplace/MarketplaceListWithScores/ListItem.tsx

@@ -45,6 +45,10 @@ const ListItem = ({ app, onInfoClick, isFavorite, onFavoriteClick, isLoading, on
     showContractList(id, ContractListTypes.VERIFIED);
   }, [ showContractList, id ]);
 
+  const showAnalyzedContracts = React.useCallback(() => {
+    showContractList(id, ContractListTypes.ANALYZED);
+  }, [ showContractList, id ]);
+
   return (
     <ListItemMobile
       rowGap={ 3 }
@@ -92,9 +96,8 @@ const ListItem = ({ app, onInfoClick, isFavorite, onFavoriteClick, isLoading, on
             { securityReport ? (
               <>
                 <AppSecurityReport
-                  id={ id }
                   securityReport={ securityReport }
-                  showContractList={ showContractList }
+                  showContractList={ showAnalyzedContracts }
                   height="30px"
                 />
                 <ContractListButton onClick={ showAllContracts } variant={ ContractListButtonVariants.ALL_CONTRACTS }>

ui/marketplace/MarketplaceListWithScores/TableItem.tsx

@@ -54,6 +54,10 @@ const TableItem = ({
     showContractList(id, ContractListTypes.VERIFIED);
   }, [ showContractList, id ]);
 
+  const showAnalyzedContracts = React.useCallback(() => {
+    showContractList(id, ContractListTypes.ANALYZED);
+  }, [ showContractList, id ]);
+
   return (
     <Tr>
       <Td verticalAlign="middle" px={ 2 }>
@@ -76,7 +80,7 @@ const TableItem = ({
       </Td>
       <Td verticalAlign="middle">
         { securityReport ? (
-          <AppSecurityReport id={ id } securityReport={ securityReport } showContractList={ showContractList }/>
+          <AppSecurityReport securityReport={ securityReport } showContractList={ showAnalyzedContracts }/>
         ) : (
           <DataNotAvailable/>
         ) }

ui/pages/MarketplaceApp.tsx

@@ -20,6 +20,7 @@ import ContentLoader from 'ui/shared/ContentLoader';
 import MarketplaceAppTopBar from '../marketplace/MarketplaceAppTopBar';
 import useAutoConnectWallet from '../marketplace/useAutoConnectWallet';
 import useMarketplaceWallet from '../marketplace/useMarketplaceWallet';
+import useSecurityReports from '../marketplace/useSecurityReports';
 
 const feature = config.features.marketplace;
 
@@ -104,6 +105,9 @@ const MarketplaceApp = () => {
   const { address, sendTransaction, signMessage, signTypedData } = useMarketplaceWallet(id);
   useAutoConnectWallet();
 
+  const { data: securityReports, isPending: isSecurityReportsPending } = useSecurityReports();
+  const securityReport = securityReports?.find(item => item.appName === id)?.chainsData[config.chain.id || ''];
+
   const query = useQuery<unknown, ResourceError<unknown>, MarketplaceAppOverview>({
     queryKey: [ 'marketplace-dapps', id ],
     queryFn: async() => {
@@ -140,7 +144,12 @@ const MarketplaceApp = () => {
 
   return (
     <>
-      <MarketplaceAppTopBar data={ data } isLoading={ isPending } isWalletConnected={ Boolean(address) }/>
+      <MarketplaceAppTopBar
+        data={ data }
+        isLoading={ isPending || isSecurityReportsPending }
+        isWalletConnected={ Boolean(address) }
+        securityReport={ securityReport }
+      />
       <DappscoutIframeProvider
         address={ address }
         appUrl={ data?.url }