display apps without security score

ui/marketplace/MarketplaceListWithScores.tsx

@@ -35,11 +35,14 @@ const MarketplaceListWithScores = ({
   showContractList,
 }: Props) => {
 
-  const displayedApps = React.useMemo(() =>
-    apps
-      .filter((app) => app.securityReport)
-      .sort((a, b) => b.securityReport.overallInfo.securityScore - a.securityReport.overallInfo.securityScore)
-  , [ apps ]);
+  const displayedApps = React.useMemo(() => apps.sort((a, b) => {
+    if (!a.securityReport) {
+      return 1;
+    } else if (!b.securityReport) {
+      return -1;
+    }
+    return b.securityReport.overallInfo.securityScore - a.securityReport.overallInfo.securityScore;
+  }), [ apps ]);
 
   const content = apps.length > 0 ? (
     <>

ui/marketplace/MarketplaceListWithScores/DataNotAvailable.tsx

+import { Tooltip, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+const DataNotAvailable = () => {
+  return (
+    <Tooltip
+      label="Data will be available soon"
+      textAlign="center"
+      padding={ 2 }
+      openDelay={ 500 }
+    >
+      <chakra.span cursor="default" fontWeight="500" fontSize="sm">
+        n/a
+      </chakra.span>
+    </Tooltip>
+  );
+};
+
+export default DataNotAvailable;

ui/marketplace/MarketplaceListWithScores/ListItem.tsx

-import { Flex, IconButton } from '@chakra-ui/react';
+import { Flex, IconButton, chakra } from '@chakra-ui/react';
 import React from 'react';
 import type { MouseEvent } from 'react';
 
@@ -25,16 +25,7 @@ type Props = {
 }
 
 const ListItem = ({ app, onInfoClick, isFavorite, onFavoriteClick, isLoading, onAppClick, showContractList }: Props) => {
-  const {
-    id,
-    securityReport,
-    securityReport: {
-      overallInfo: {
-        verifiedNumber,
-        totalContractsNumber,
-      },
-    },
-  } = app;
+  const { id, securityReport } = app;
 
   const handleInfoClick = React.useCallback((event: MouseEvent) => {
     event.preventDefault();
@@ -98,18 +89,26 @@ const ListItem = ({ app, onInfoClick, isFavorite, onFavoriteClick, isLoading, on
         </Flex>
         <Flex alignItems="center">
           <Flex flex={ 1 } gap={ 3 } alignItems="center">
-            <AppSecurityReport
-              id={ id }
-              securityReport={ securityReport }
-              showContractList={ showContractList }
-              height="30px"
-            />
-            <ContractListButton onClick={ showAllContracts } variant={ ContractListButtonVariants.ALL_CONTRACTS }>
-              { totalContractsNumber }
-            </ContractListButton>
-            <ContractListButton onClick={ showVerifiedContracts } variant={ ContractListButtonVariants.VERIFIED_CONTRACTS }>
-              { verifiedNumber }
-            </ContractListButton>
+            { securityReport ? (
+              <>
+                <AppSecurityReport
+                  id={ id }
+                  securityReport={ securityReport }
+                  showContractList={ showContractList }
+                  height="30px"
+                />
+                <ContractListButton onClick={ showAllContracts } variant={ ContractListButtonVariants.ALL_CONTRACTS }>
+                  { securityReport.overallInfo.totalContractsNumber }
+                </ContractListButton>
+                <ContractListButton onClick={ showVerifiedContracts } variant={ ContractListButtonVariants.VERIFIED_CONTRACTS }>
+                  { securityReport.overallInfo.verifiedNumber }
+                </ContractListButton>
+              </>
+            ) : (
+              <chakra.span fontWeight="500" fontSize="sm">
+                Data will be available soon
+              </chakra.span>
+            ) }
           </Flex>
           { !isLoading && (
             <MoreInfoButton onClick={ handleInfoClick }/>

ui/marketplace/MarketplaceListWithScores/TableItem.tsx

@@ -11,6 +11,7 @@ import IconSvg from 'ui/shared/IconSvg';
 import AppSecurityReport from '../AppSecurityReport';
 import ContractListButton, { ContractListButtonVariants } from '../ContractListButton';
 import AppLink from './AppLink';
+import DataNotAvailable from './DataNotAvailable';
 import MoreInfoButton from './MoreInfoButton';
 
 type Props = {
@@ -33,16 +34,7 @@ const TableItem = ({
   showContractList,
 }: Props) => {
 
-  const {
-    id,
-    securityReport,
-    securityReport: {
-      overallInfo: {
-        verifiedNumber,
-        totalContractsNumber,
-      },
-    },
-  } = app;
+  const { id, securityReport } = app;
 
   const handleInfoClick = React.useCallback((event: MouseEvent) => {
     event.preventDefault();
@@ -83,17 +75,29 @@ const TableItem = ({
         <AppLink app={ app } isLoading={ isLoading } onAppClick={ onAppClick } isLarge/>
       </Td>
       <Td verticalAlign="middle">
-        <AppSecurityReport id={ id } securityReport={ securityReport } showContractList={ showContractList }/>
+        { securityReport ? (
+          <AppSecurityReport id={ id } securityReport={ securityReport } showContractList={ showContractList }/>
+        ) : (
+          <DataNotAvailable/>
+        ) }
       </Td>
       <Td verticalAlign="middle">
-        <ContractListButton onClick={ showAllContracts } variant={ ContractListButtonVariants.ALL_CONTRACTS }>
-          { totalContractsNumber }
-        </ContractListButton>
+        { securityReport ? (
+          <ContractListButton onClick={ showAllContracts } variant={ ContractListButtonVariants.ALL_CONTRACTS }>
+            { securityReport.overallInfo.totalContractsNumber }
+          </ContractListButton>
+        ) : (
+          <DataNotAvailable/>
+        ) }
       </Td>
       <Td verticalAlign="middle">
-        <ContractListButton onClick={ showVerifiedContracts } variant={ ContractListButtonVariants.VERIFIED_CONTRACTS }>
-          { verifiedNumber }
-        </ContractListButton>
+        { securityReport ? (
+          <ContractListButton onClick={ showVerifiedContracts } variant={ ContractListButtonVariants.VERIFIED_CONTRACTS }>
+            { securityReport.overallInfo.verifiedNumber }
+          </ContractListButton>
+        ) : (
+          <DataNotAvailable/>
+        ) }
       </Td>
       <Td verticalAlign="middle" isNumeric>
         <MoreInfoButton onClick={ handleInfoClick }/>