change format of security reports data

ui/marketplace/useMarketplaceApps.tsx

@@ -83,20 +83,9 @@ export default function useMarketplaceApps(
     enabled: feature.isEnabled,
   });
 
-  const appsWithSecurityReports = React.useMemo(() => {
-    if (!securityReports && !isSecurityReportsPlaceholderData) {
-      return data;
-    }
-    return data?.map((app) => {
-      const securityReport = securityReports?.find(item => item.appName === app.id)?.chainsData[config.chain.id || ''];
-      if (securityReport) {
-        const issues: Record<string, number> = securityReport.overallInfo.issueSeverityDistribution;
-        securityReport.overallInfo.totalIssues = Object.values(issues).reduce((acc, val) => acc + val, 0);
-        securityReport.overallInfo.securityScore = Number(securityReport.overallInfo.securityScore.toFixed(2));
-      }
-      return { ...app, securityReport };
-    });
-  }, [ data, securityReports, isSecurityReportsPlaceholderData ]);
+  const appsWithSecurityReports = React.useMemo(() =>
+    data?.map((app) => ({ ...app, securityReport: securityReports?.[app.id] })),
+  [ data, securityReports ]);
 
   const displayedApps = React.useMemo(() => {
     return appsWithSecurityReports?.filter(app => isAppNameMatches(filter, app) && isAppCategoryMatches(selectedCategoryId, app, favoriteApps)) || [];

ui/marketplace/useSecurityReports.tsx

@@ -10,10 +10,23 @@ const securityReportsUrl = (feature.isEnabled && feature.securityReportsUrl) ||
 export default function useSecurityReports() {
   const apiFetch = useApiFetch();
 
-  return useQuery<unknown, ResourceError<unknown>, Array<any>>({ // eslint-disable-line @typescript-eslint/no-explicit-any
+  return useQuery<unknown, ResourceError<unknown>, Record<string, any>>({ // eslint-disable-line @typescript-eslint/no-explicit-any
     queryKey: [ 'marketplace-security-reports' ],
     queryFn: async() => apiFetch(securityReportsUrl, undefined, { resource: 'marketplace-security-reports' }),
-    placeholderData: securityReportsUrl ? [] : undefined,
+    select: (data) => {
+      const securityReports: Record<string, any> = {}; // eslint-disable-line @typescript-eslint/no-explicit-any
+      (data as Array<any>).forEach((item) => { // eslint-disable-line @typescript-eslint/no-explicit-any
+        const report = item.chainsData[config.chain.id || ''];
+        if (report) {
+          const issues: Record<string, number> = report.overallInfo.issueSeverityDistribution;
+          report.overallInfo.totalIssues = Object.values(issues).reduce((acc, val) => acc + val, 0);
+          report.overallInfo.securityScore = Number(report.overallInfo.securityScore.toFixed(2));
+        }
+        securityReports[item.appName] = report;
+      });
+      return securityReports;
+    },
+    placeholderData: securityReportsUrl ? {} : undefined,
     staleTime: Infinity,
     enabled: Boolean(securityReportsUrl),
   });

ui/pages/MarketplaceApp.tsx

@@ -106,7 +106,6 @@ const MarketplaceApp = () => {
   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 ],
@@ -148,7 +147,7 @@ const MarketplaceApp = () => {
         data={ data }
         isLoading={ isPending || isSecurityReportsPending }
         isWalletConnected={ Boolean(address) }
-        securityReport={ securityReport }
+        securityReport={ securityReports?.[id] }
       />
       <DappscoutIframeProvider
         address={ address }