oct-1833: project websockets fix + projectDonors update

client/src/api/queryKeys/index.ts

@@ -17,8 +17,8 @@ export const ROOTS: Root = {
   individualReward: 'individualReward',
   matchedProjectRewards: 'matchedProjectRewards',
   patronMode: 'patronMode',
-  projectDonors: 'projectDonors',
   projectRewardsThreshold: 'projectRewardsThreshold',
+  projectsDonors: 'projectsDonors',
   projectsEpoch: 'projectsEpoch',
   projectsIpfsResults: 'projectsIpfsResults',
   upcomingBudget: 'upcomingBudget',
@@ -56,12 +56,8 @@ export const QUERY_KEYS: QueryKeys = {
   lockedSummarySnapshots: ['lockedSummarySnapshots'],
   matchedProjectRewards: epochNumber => [ROOTS.matchedProjectRewards, epochNumber.toString()],
   patronMode: userAddress => [ROOTS.patronMode, userAddress],
-  projectDonors: (projectAddress, epochNumber) => [
-    ROOTS.projectDonors,
-    projectAddress,
-    epochNumber.toString(),
-  ],
   projectRewardsThreshold: epochNumber => [ROOTS.projectRewardsThreshold, epochNumber.toString()],
+  projectsDonors: epochNumber => [ROOTS.projectsDonors, epochNumber.toString()],
   projectsEpoch: epochNumber => [ROOTS.projectsEpoch, epochNumber.toString()],
   projectsIpfsResults: (projectAddress, epochNumber) => [
     ROOTS.projectsIpfsResults,

client/src/api/queryKeys/types.ts

@@ -17,8 +17,8 @@ export type Root = {
   individualReward: 'individualReward';
   matchedProjectRewards: 'matchedProjectRewards';
   patronMode: 'patronMode';
-  projectDonors: 'projectDonors';
   projectRewardsThreshold: 'projectRewardsThreshold';
+  projectsDonors: 'projectsDonors';
   projectsEpoch: 'projectsEpoch';
   projectsIpfsResults: 'projectsIpfsResults';
   upcomingBudget: 'upcomingBudget';
@@ -58,11 +58,8 @@ export type QueryKeys = {
   lockedSummarySnapshots: ['lockedSummarySnapshots'];
   matchedProjectRewards: (epochNumber: number) => [Root['matchedProjectRewards'], string];
   patronMode: (userAddress: string) => [Root['patronMode'], string];
-  projectDonors: (
-    projectAddress: string,
-    epochNumber: number,
-  ) => [Root['projectDonors'], string, string];
   projectRewardsThreshold: (epochNumber: number) => [Root['projectRewardsThreshold'], string];
+  projectsDonors: (epochNumber: number) => [Root['projectsDonors'], string];
   projectsEpoch: (epochNumber: number) => [Root['projectsEpoch'], string];
   projectsIpfsResults: (
     projectAddress: string,

client/src/components/Allocation/AllocationItemRewards/AllocationItemRewards.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import Svg from 'components/ui/Svg';
 import useGetValuesToDisplay from 'hooks/helpers/useGetValuesToDisplay';
-import useProjectDonors from 'hooks/queries/donors/useProjectDonors';
+import useProjectsDonors from 'hooks/queries/donors/useProjectsDonors';
 import useCurrentEpoch from 'hooks/queries/useCurrentEpoch';
 import useIsDecisionWindowOpen from 'hooks/queries/useIsDecisionWindowOpen';
 import useMatchedProjectRewards from 'hooks/queries/useMatchedProjectRewards';
@@ -107,7 +107,8 @@ const AllocationItemRewards: FC<AllocationItemRewardsProps> = ({
   const { data: matchedProjectRewards } = useMatchedProjectRewards();
   const { data: uqScore } = useUqScore(currentEpoch!);
 
-  const { data: projectDonors } = useProjectDonors(address);
+  const { data: projectsDonors } = useProjectsDonors();
+  const projectDonors = projectsDonors?.[address];
 
   // value can an empty string, which crashes parseUnits. Hence the alternative.
   const valueToUse = value || '0';

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

@@ -65,7 +65,7 @@ const MetricsEpoch = (): ReactElement => {
     useEpochUnusedRewards(epoch);
 
   const ethBelowThreshold =
-    projectRewardsThreshold === undefined
+    projectRewardsThreshold === undefined || projectsDonors === undefined
       ? BigInt(0)
       : Object.values(projectsDonors).reduce((acc, curr) => {
           const projectSumOfDonations = curr.reduce((acc2, curr2) => {

client/src/components/Project/ProjectDonors/ProjectDonors.tsx

@@ -8,7 +8,7 @@ import ProjectDonorsHeader from 'components/Project/ProjectDonorsHeader';
 import ProjectDonorsList from 'components/Project/ProjectDonorsList';
 import Button from 'components/ui/Button';
 import { DONORS_SHORT_LIST_LENGTH } from 'constants/donors';
-import useProjectDonors from 'hooks/queries/donors/useProjectDonors';
+import useProjectsDonors from 'hooks/queries/donors/useProjectsDonors';
 import useCurrentEpoch from 'hooks/queries/useCurrentEpoch';
 
 import styles from './ProjectDonors.module.scss';
@@ -23,12 +23,11 @@ const ProjectDonors: FC<ProjectDonorsProps> = ({
   const { data: currentEpoch } = useCurrentEpoch();
 
   const epochNumber = parseInt(epoch!, 10);
-
   const { t } = useTranslation('translation', { keyPrefix: 'components.dedicated.donors' });
-  const { data: projectDonors, isFetching } = useProjectDonors(
-    projectAddress,
+  const { data: projectsDonors, isFetching } = useProjectsDonors(
     epochNumber === currentEpoch ? undefined : epochNumber,
   );
+  const projectDonors = projectsDonors?.[projectAddress];
 
   const [isFullDonorsListModalOpen, setIsFullDonorsListModalOpen] = useState(false);
 

client/src/components/Project/ProjectDonorsHeader/ProjectDonorsHeader.tsx

@@ -3,7 +3,7 @@ import React, { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 
-import useProjectDonors from 'hooks/queries/donors/useProjectDonors';
+import useProjectsDonors from 'hooks/queries/donors/useProjectsDonors';
 import useCurrentEpoch from 'hooks/queries/useCurrentEpoch';
 
 import styles from './ProjectDonorsHeader.module.scss';
@@ -20,10 +20,10 @@ const ProjectDonorsHeader: FC<ProjectDonorsListProps> = ({
 
   const epochNumber = parseInt(epoch!, 10);
 
-  const { data: projectDonors, isFetching } = useProjectDonors(
-    projectAddress,
+  const { data: projectsDonors, isFetching } = useProjectsDonors(
     epochNumber === currentEpoch ? undefined : epochNumber,
   );
+  const projectDonors = projectsDonors?.[projectAddress];
 
   const numberOfDonors = useMemo(() => {
     if (epochNumber === currentEpoch) {

client/src/components/Project/ProjectDonorsList/ProjectDonorsList.tsx

@@ -6,7 +6,7 @@ import ProjectDonorsListItem from 'components/Project/ProjectDonorsListItem';
 import ProjectDonorsListSkeletonItem from 'components/Project/ProjectDonorsListSkeletonItem';
 import ProjectDonorsListTotalDonated from 'components/Project/ProjectDonorsListTotalDonated';
 import { DONORS_SHORT_LIST_LENGTH } from 'constants/donors';
-import useProjectDonors from 'hooks/queries/donors/useProjectDonors';
+import useProjectsDonors from 'hooks/queries/donors/useProjectsDonors';
 import useCurrentEpoch from 'hooks/queries/useCurrentEpoch';
 
 import styles from './ProjectDonorsList.module.scss';
@@ -23,10 +23,10 @@ const ProjectDonorsList: FC<ProjectDonorsListProps> = ({
 
   const epochNumber = parseInt(epoch!, 10);
 
-  const { data: projectDonors, isFetching } = useProjectDonors(
-    projectAddress,
+  const { data: projectsDonors, isFetching } = useProjectsDonors(
     epochNumber === currentEpoch ? undefined : epochNumber,
   );
+  const projectDonors = projectsDonors?.[projectAddress];
 
   return (
     <div className={cx(styles.root, className)} data-test={dataTest}>

client/src/components/Project/ProjectList/ProjectList.tsx

@@ -6,33 +6,18 @@ import ProjectListProps from './types';
 
 const ProjectList: FC<ProjectListProps> = ({ projects, epoch }) => (
   <>
-    {projects.map(
-      (
-        {
-          address,
-          description,
-          name,
-          profileImageSmall,
-          website,
-          totalValueOfAllocations,
-          numberOfDonors,
-        },
-        index,
-      ) => (
-        <ProjectListItem
-          key={address}
-          address={address}
-          description={description}
-          epoch={epoch}
-          index={index}
-          name={name}
-          numberOfDonors={numberOfDonors}
-          profileImageSmall={profileImageSmall}
-          totalValueOfAllocations={totalValueOfAllocations}
-          website={website}
-        />
-      ),
-    )}
+    {projects.map(({ address, description, name, profileImageSmall, website }, index) => (
+      <ProjectListItem
+        key={address}
+        address={address}
+        description={description}
+        epoch={epoch}
+        index={index}
+        name={name}
+        profileImageSmall={profileImageSmall}
+        website={website}
+      />
+    ))}
   </>
 );
 

client/src/components/Project/ProjectListItem/ProjectListItem.tsx

@@ -1,11 +1,12 @@
-import React, { FC, Fragment, memo, useMemo } from 'react';
+import React, { FC, Fragment, useMemo } from 'react';
 
 import ProjectDonors from 'components/Project/ProjectDonors';
 import ProjectListItemHeader from 'components/Project/ProjectListItemHeader';
 import RewardsWithoutThreshold from 'components/shared/RewardsWithoutThreshold';
 import RewardsWithThreshold from 'components/shared/RewardsWithThreshold';
 import Description from 'components/ui/Description';
 import useCurrentEpoch from 'hooks/queries/useCurrentEpoch';
+import useProjectsIpfsWithRewards from 'hooks/queries/useProjectsIpfsWithRewards';
 import decodeBase64ToUtf8 from 'utils/decodeBase64ToUtf8';
 
 import styles from './ProjectListItem.module.scss';
@@ -19,9 +20,13 @@ const ProjectListItem: FC<ProjectListItemProps> = ({
   website,
   index,
   epoch,
-  totalValueOfAllocations,
-  numberOfDonors,
 }) => {
+  const { data: projectsIpfsWithRewards } = useProjectsIpfsWithRewards(epoch);
+  const projectIpfsWithRewards = projectsIpfsWithRewards.find(p => p.address === address);
+  // loadedProjects (ProjectView) aren't updated during changes in open AW
+  // to provide live updates, the following values are taken directly from projectsIpfsWithRewards
+  const numberOfDonors = projectIpfsWithRewards?.numberOfDonors || 0;
+  const totalValueOfAllocations = projectIpfsWithRewards?.totalValueOfAllocations || 0n;
   const { data: currentEpoch } = useCurrentEpoch();
   const isEpoch1 = currentEpoch === 1;
 
@@ -66,4 +71,4 @@ const ProjectListItem: FC<ProjectListItemProps> = ({
   );
 };
 
-export default memo(ProjectListItem);
+export default ProjectListItem;

client/src/components/Project/ProjectListItem/types.ts

@@ -4,9 +4,7 @@ export default interface ProjectListItemProps {
   epoch?: number;
   index: number;
   name?: string;
-  numberOfDonors: number;
   profileImageSmall?: string;
-  totalValueOfAllocations?: bigint;
   website?: {
     label?: string;
     url: string;

client/src/hooks/helpers/useSubscription.ts

@@ -25,6 +25,9 @@ export default function useSubscription<TData>({
     }
 
     websocketService().then(socket => {
+      if (socket.default.hasListeners(event)) {
+        return;
+      }
       socket.default.on(event, data => {
         callback(data);
       });