OCT-1725: Combine dozens of frontend requests into just a few (#346)

## Description

## Definition of Done

1. [ ] Acceptance criteria are met.
2. [ ] PR is manually tested before the merge by developer(s).
    - [ ] Happy path is manually checked.
3. [ ] PR is manually tested by QA when their assistance is required
(1).
- [ ] Octant Areas & Test Cases are checked for impact and updated if
required (2).
4. [ ] Unit tests are added unless there is a reason to omit them.
5. [ ] Automated tests are added when required.
6. [ ] The code is merged.
7. [ ] Tech documentation is added / updated, reviewed and approved
(including mandatory approval by a code owner, should such exist for
changed files).
    - [ ] BE: Swagger documentation is updated.
8. [ ] When required by QA:
    - [ ] Deployed to the relevant environment.
    - [ ] Passed system tests.

---

(1) Developer(s) in coordination with QA decide whether it's required.
For small tickets introducing small changes QA assistance is most
probably not required.

(2) [Octant Areas & Test
Cases](https://docs.google.com/spreadsheets/d/1cRe6dxuKJV3a4ZskAwWEPvrFkQm6rEfyUCYwLTYw_Cc).

client/src/api/calls/epochAllocations.ts

@@ -7,7 +7,7 @@ export type Response = {
   allocations: {
     amount: string; // WEI
     donor: string; // address
-    proposal: string; // proposal address
+    project: string; // project address
   }[];
 };
 

client/src/components/Metrics/MetricsEpoch/MetricsEpochGridBelowThreshold/MetricsEpochGridBelowThreshold.tsx

@@ -4,10 +4,10 @@ import { useTranslation } from 'react-i18next';
 import MetricsGridTile from 'components/Metrics/MetricsGrid/MetricsGridTile';
 import MetricsGridTileValue from 'components/Metrics/MetricsGrid/MetricsGridTileValue';
 import useMetricsEpoch from 'hooks/helpers/useMetrcisEpoch';
-import useProjectsDonors from 'hooks/queries/donors/useProjectsDonors';
 import useCryptoValues from 'hooks/queries/useCryptoValues';
 import useIsDecisionWindowOpen from 'hooks/queries/useIsDecisionWindowOpen';
 import useMatchedProjectRewards from 'hooks/queries/useMatchedProjectRewards';
+import useProjectsEpoch from 'hooks/queries/useProjectsEpoch';
 import i18n from 'i18n';
 import useSettingsStore from 'store/settings/store';
 import getValueCryptoToDisplay from 'utils/getValueCryptoToDisplay';
@@ -22,6 +22,7 @@ const MetricsEpochGridBelowThreshold: FC<MetricsEpochGridBelowThresholdProps> =
 }) => {
   const { t } = useTranslation('translation', { keyPrefix: 'views.metrics' });
   const { epoch, lastEpoch } = useMetricsEpoch();
+  const { data: projectsEpoch } = useProjectsEpoch(epoch);
   const { data: isDecisionWindowOpen } = useIsDecisionWindowOpen();
   const { data: matchedProjectRewards } = useMatchedProjectRewards(
     isDecisionWindowOpen && epoch === lastEpoch ? undefined : epoch,
@@ -34,12 +35,9 @@ const MetricsEpochGridBelowThreshold: FC<MetricsEpochGridBelowThresholdProps> =
     },
   }));
   const { data: cryptoValues, error } = useCryptoValues(displayCurrency);
-  const { data: projectsDonors } = useProjectsDonors(
-    isDecisionWindowOpen && epoch === lastEpoch ? undefined : epoch,
-  );
 
   const projectsBelowThreshold =
-    Object.keys(projectsDonors).length -
+    (projectsEpoch?.projectsAddresses.length || 0) -
     (matchedProjectRewards?.filter(({ matched }) => matched !== 0n).length || 0);
 
   const ethBelowThresholdToDisplay = getValueCryptoToDisplay({

client/src/components/Metrics/MetricsEpoch/MetricsEpochGridCurrentDonors/MetricsEpochGridCurrentDonors.tsx

@@ -1,3 +1,4 @@
+import uniqBy from 'lodash/uniqBy';
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -16,7 +17,7 @@ const MetricsEpochGridCurrentDonors: FC<MetricsEpochGridCurrentDonorsProps> = ({
   const { epoch } = useMetricsEpoch();
   const { data: epochAllocations } = useEpochAllocations(epoch);
 
-  const currentDonorsString = `${epochAllocations?.length || 0}`;
+  const currentDonorsString = uniqBy(epochAllocations, 'donor').length.toString();
 
   return (
     <MetricsGridTile

client/src/hooks/queries/donors/useProjectsDonors.ts

@@ -1,14 +1,8 @@
-import { UseQueryResult, useQueries } from '@tanstack/react-query';
-import { useCallback } from 'react';
-
-import { apiGetProjectDonors } from 'api/calls/projectDonors';
-import { QUERY_KEYS } from 'api/queryKeys';
 import useCurrentEpoch from 'hooks/queries/useCurrentEpoch';
+import useEpochAllocations from 'hooks/queries/useEpochAllocations';
 import useIsDecisionWindowOpen from 'hooks/queries/useIsDecisionWindowOpen';
-import useProjectsEpoch from 'hooks/queries/useProjectsEpoch';
 
 import { ProjectDonor } from './types';
-import { mapDataToProjectDonors } from './utils';
 
 export default function useProjectsDonors(epoch?: number): {
   data: { [key: string]: ProjectDonor[] };
@@ -17,57 +11,45 @@ export default function useProjectsDonors(epoch?: number): {
   refetch: () => void;
 } {
   const { data: currentEpoch } = useCurrentEpoch();
-  const { data: projectsEpoch } = useProjectsEpoch(epoch);
   const { data: isDecisionWindowOpen } = useIsDecisionWindowOpen();
 
-  // TODO OCT-1139 implement socket here.
-
-  const projectsDonorsResults: UseQueryResult<ProjectDonor[]>[] = useQueries({
-    queries: (projectsEpoch?.projectsAddresses || []).map(projectAddress => ({
-      enabled:
-        !!projectsEpoch &&
-        !!currentEpoch &&
-        currentEpoch > 1 &&
-        (isDecisionWindowOpen === true || epoch !== undefined),
-      queryFn: () => apiGetProjectDonors(projectAddress, epoch || currentEpoch! - 1),
-      queryKey: QUERY_KEYS.projectDonors(
-        projectAddress,
-        epoch ?? (isDecisionWindowOpen ? currentEpoch! - 1 : currentEpoch!),
-      ),
-      select: response => mapDataToProjectDonors(response),
-    })),
-  });
-
-  const refetchAll = useCallback(() => {
-    projectsDonorsResults.forEach(result => result.refetch());
-  }, [projectsDonorsResults]);
+  const epochToUse = epoch ?? (isDecisionWindowOpen ? currentEpoch! - 1 : currentEpoch!);
+
+  const {
+    data: epochAllocations,
+    refetch,
+    isFetching: isFetchingEpochAllocations,
+    isSuccess,
+  } = useEpochAllocations(epochToUse);
+
+  const projectsDonors =
+    epochAllocations?.reduce((acc, curr) => {
+      if (!acc[curr.project]) {
+        acc[curr.project] = [];
+      }
+
+      acc[curr.project].push({ address: curr.donor, amount: curr.amount });
+      acc[curr.project].sort((a, b) => {
+        if (a.amount > b.amount) {
+          return -1;
+        }
+        if (a.amount < b.amount) {
+          return 1;
+        }
+        return 0;
+      });
+
+      return acc;
+    }, {}) || {};
 
   const isFetching =
-    isDecisionWindowOpen === undefined ||
-    projectsEpoch === undefined ||
-    projectsDonorsResults.length === 0 ||
-    projectsDonorsResults.some(
-      ({ isFetching: isFetchingProjectsDonorsResult }) => isFetchingProjectsDonorsResult,
-    );
-  if (isFetching) {
-    return {
-      data: {},
-      isFetching,
-      isSuccess: false,
-      refetch: refetchAll,
-    };
-  }
+    currentEpoch === undefined || isDecisionWindowOpen === undefined || isFetchingEpochAllocations;
 
   return {
-    data: (projectsDonorsResults || []).reduce((acc, curr, currentIndex) => {
-      return {
-        ...acc,
-        [projectsEpoch?.projectsAddresses[currentIndex]]: curr.data,
-      };
-    }, {}),
-    isFetching: false,
+    data: projectsDonors,
+    isFetching,
     // Ensures projectsDonorsResults is actually fetched with data, and not just an object with undefined values.
-    isSuccess: !projectsDonorsResults.some(element => !element.isSuccess),
-    refetch: refetchAll,
+    isSuccess,
+    refetch,
   };
 }

client/src/hooks/queries/useEpochAllocations.ts

@@ -6,7 +6,8 @@ import { parseUnitsBigInt } from 'utils/parseUnitsBigInt';
 
 type EpochAllocation = {
   amount: bigint;
-  user: string;
+  donor: string;
+  project: string;
 };
 
 type EpochAllocations = EpochAllocation[];
@@ -20,17 +21,10 @@ export default function useEpochAllocations(
     queryKey: QUERY_KEYS.epochAllocations(epoch),
     select: response => {
       return response.allocations.reduce((acc, curr) => {
-        const donorIdx = acc.findIndex(({ user }) => user === curr.donor);
-
-        if (donorIdx > -1) {
-          // eslint-disable-next-line operator-assignment
-          acc[donorIdx].amount = acc[donorIdx].amount + parseUnitsBigInt(curr.amount, 'wei');
-        } else {
-          acc.push({
-            amount: parseUnitsBigInt(curr.amount, 'wei'),
-            user: curr.donor,
-          });
-        }
+        acc.push({
+          ...curr,
+          amount: parseUnitsBigInt(curr.amount, 'wei'),
+        });
 
         return acc;
       }, [] as EpochAllocations);

client/src/hooks/queries/useProjectsIpfsWithRewards.ts

@@ -58,10 +58,11 @@ export default function useProjectsIpfsWithRewards(epoch?: number): {
     const totalValueOfAllocations =
       projectMatchedProjectRewards?.sum ||
       (isSuccessProjectsDonors
-        ? projectsDonors[project.address].reduce((acc, curr) => acc + curr.amount, BigInt(0))
+        ? projectsDonors[project.address]?.reduce((acc, curr) => acc + curr.amount, BigInt(0)) ||
+          BigInt(0)
         : BigInt(0));
     return {
-      numberOfDonors: isSuccessProjectsDonors ? projectsDonors[project.address].length : 0,
+      numberOfDonors: isSuccessProjectsDonors ? projectsDonors[project.address]?.length || 0 : 0,
       percentage: projectMatchedProjectRewards?.percentage,
       totalValueOfAllocations,
       ...project,