OCT-1370 Patron earnings on Earn view are not displaying correct values

client/src/components/Earn/EarnBoxPersonalAllocation/EarnBoxPersonalAllocation.tsx

@@ -9,8 +9,10 @@ import Sections from 'components/ui/BoxRounded/Sections/Sections';
 import { SectionProps } from 'components/ui/BoxRounded/Sections/types';
 import useEpochAndAllocationTimestamps from 'hooks/helpers/useEpochAndAllocationTimestamps';
 import useIsProjectAdminMode from 'hooks/helpers/useIsProjectAdminMode';
+import useTotalPatronDonations from 'hooks/helpers/useTotalPatronDonations';
 import useCurrentEpoch from 'hooks/queries/useCurrentEpoch';
 import useCurrentEpochProps from 'hooks/queries/useCurrentEpochProps';
+import useIndividualReward from 'hooks/queries/useIndividualReward';
 import useIsDecisionWindowOpen from 'hooks/queries/useIsDecisionWindowOpen';
 import useIsPatronMode from 'hooks/queries/useIsPatronMode';
 import useWithdrawals from 'hooks/queries/useWithdrawals';
@@ -31,7 +33,10 @@ const EarnBoxPersonalAllocation: FC<EarnBoxPersonalAllocationProps> = ({ classNa
   const { timeCurrentEpochStart, timeCurrentAllocationEnd } = useEpochAndAllocationTimestamps();
   const { data: currentEpochProps } = useCurrentEpochProps();
   const { data: withdrawals, isFetching: isFetchingWithdrawals } = useWithdrawals();
+  const { data: individualReward, isFetching: isFetchingIndividualReward } = useIndividualReward();
   const { data: isPatronMode } = useIsPatronMode();
+  const { data: totalPatronDonations, isFetching: isFetchingTotalPatronDonations } =
+    useTotalPatronDonations({ enabled: isPatronMode });
   const { isAppWaitingForTransactionToBeIndexed } = useTransactionLocalStore(state => ({
     isAppWaitingForTransactionToBeIndexed: state.data.isAppWaitingForTransactionToBeIndexed,
   }));
@@ -47,8 +52,8 @@ const EarnBoxPersonalAllocation: FC<EarnBoxPersonalAllocationProps> = ({ classNa
             doubleValueProps: {
               cryptoCurrency: 'ethereum',
               dataTest: 'BoxPersonalAllocation__Section--pending__DoubleValue',
-              isFetching: isFetchingWithdrawals,
-              valueCrypto: withdrawals?.sums.pending,
+              isFetching: isPatronMode ? isFetchingIndividualReward : isFetchingWithdrawals,
+              valueCrypto: isPatronMode ? individualReward : withdrawals?.sums.pending,
             },
             label: isPatronMode ? t('currentEpoch') : t('pending'),
             tooltipProps: isPatronMode
@@ -86,8 +91,10 @@ const EarnBoxPersonalAllocation: FC<EarnBoxPersonalAllocationProps> = ({ classNa
         coinPricesServerDowntimeText: !isProjectAdminMode ? '...' : undefined,
         cryptoCurrency: 'ethereum',
         dataTest: 'BoxPersonalAllocation__Section--availableNow__DoubleValue',
-        isFetching: isFetchingWithdrawals || isAppWaitingForTransactionToBeIndexed,
-        valueCrypto: withdrawals?.sums.available,
+        isFetching: isPatronMode
+          ? isFetchingTotalPatronDonations
+          : isFetchingWithdrawals || isAppWaitingForTransactionToBeIndexed,
+        valueCrypto: isPatronMode ? totalPatronDonations : withdrawals?.sums.available,
       },
       label: isPatronMode && !isProjectAdminMode ? t('allTime') : i18n.t('common.availableNow'),
     },

client/src/hooks/helpers/useEpochPatronsAllEpochs.ts

@@ -1,10 +1,12 @@
-import { useQueries, UseQueryResult } from '@tanstack/react-query';
+import { useQueries, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
 
 import { apiGetEpochPatrons, Response } from 'api/calls/epochPatrons';
 import { QUERY_KEYS } from 'api/queryKeys';
 import useCurrentEpoch from 'hooks/queries/useCurrentEpoch';
 
-export default function useEpochPatronsAllEpochs(): { data: string[][]; isFetching: boolean } {
+export default function useEpochPatronsAllEpochs(
+  options?: Omit<UseQueryOptions<Response, Error, Response, any>, 'queryKey'>,
+): { data: string[][]; isFetching: boolean } {
   const { data: currentEpoch, isFetching: isFetchingCurrentEpoch } = useCurrentEpoch();
 
   const epochPatronsAllEpochs: UseQueryResult<Response>[] = useQueries({
@@ -15,13 +17,14 @@ export default function useEpochPatronsAllEpochs(): { data: string[][]; isFetchi
           return await apiGetEpochPatrons(epoch);
         } catch (error) {
           // For epoch 0 BE returns an error.
-          return new Promise(resolve => {
+          return new Promise<Response>(resolve => {
             resolve({ patrons: [] });
           });
         }
       },
       queryKey: QUERY_KEYS.epochPatrons(epoch),
       retry: false,
+      ...options,
     })),
   });
 

client/src/hooks/helpers/useIndividualRewardAllEpochs.ts

@@ -1,4 +1,4 @@
-import { useQueries } from '@tanstack/react-query';
+import { UseQueryOptions, useQueries } from '@tanstack/react-query';
 import { BigNumber } from 'ethers';
 import { parseUnits } from 'ethers/lib/utils';
 import { useAccount } from 'wagmi';
@@ -7,7 +7,9 @@ import { apiGetIndividualRewards, Response } from 'api/calls/individualRewards';
 import { QUERY_KEYS } from 'api/queryKeys';
 import useCurrentEpoch from 'hooks/queries/useCurrentEpoch';
 
-export default function useIndividualRewardAllEpochs(): { data: BigNumber[]; isFetching: boolean } {
+export default function useIndividualRewardAllEpochs(
+  options?: Omit<UseQueryOptions<Response, Error, Response, any>, 'queryKey'>,
+): { data: BigNumber[]; isFetching: boolean } {
   const { address } = useAccount();
   const { data: currentEpoch, isFetching: isFetchingCurrentEpoch } = useCurrentEpoch();
 
@@ -25,6 +27,7 @@ export default function useIndividualRewardAllEpochs(): { data: BigNumber[]; isF
       },
       queryKey: QUERY_KEYS.individualReward(epoch),
       retry: false,
+      ...options,
     })),
   });
 

client/src/hooks/helpers/useTotalPatronDonations.ts

@@ -0,0 +1,36 @@
+import { UseQueryOptions } from '@tanstack/react-query';
+import { BigNumber } from 'ethers';
+import { useAccount } from 'wagmi';
+
+import useEpochPatronsAllEpochs from './useEpochPatronsAllEpochs';
+import useIndividualRewardAllEpochs from './useIndividualRewardAllEpochs';
+
+export default function useTotalPatronDonations(options?: Omit<UseQueryOptions<any>, 'queryKey'>): {
+  data: BigNumber | undefined;
+  isFetching: boolean;
+} {
+  const { address } = useAccount();
+
+  const { data: individualRewardAllEpochs, isFetching: isFetchingIndividualReward } =
+    useIndividualRewardAllEpochs(options);
+  const { data: epochPatronsAllEpochs, isFetching: isFetchingEpochPatronsAllEpochs } =
+    useEpochPatronsAllEpochs(options);
+
+  const isFetching = isFetchingIndividualReward || isFetchingEpochPatronsAllEpochs;
+
+  if (isFetching) {
+    return {
+      data: undefined,
+      isFetching,
+    };
+  }
+
+  return {
+    data: epochPatronsAllEpochs.reduce(
+      (acc, curr, currentIndex) =>
+        curr.includes(address!) ? acc.add(individualRewardAllEpochs[currentIndex]) : acc,
+      BigNumber.from(0),
+    ),
+    isFetching: false,
+  };
+}