OCT-1377 Metrics: add patron mode tile for patrons (#46)

golemfoundation · Mar 6, 2024 · d5a128f · d5a128f
1 parent 499195b
commit d5a128f
Show file tree

Hide file tree

Showing 13 changed files with 136 additions and 18 deletions.
diff --git a/client/cypress/e2e/patronMode.cy.ts b/client/cypress/e2e/patronMode.cy.ts
@@ -712,11 +712,13 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes
     it('when entering project view, button icon changes to chevronLeft', () => {
       visitWithLoader(ROOT_ROUTES.proposals.absolute);
       cy.get('[data-test^=ProposalsView__ProposalsListItem').first().click();
-      cy
-        .get('[data-test=Navbar__Button--Projects]')
+      cy.get('[data-test=Navbar__Button--Projects]')
         .find('svg')
         // HTML tag can't be self-closing in CY.
-        .should('have.html','<path stroke="#CDD1CD" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.515 24.485 10.029 16l8.486-8.485"></path>');
+        .should(
+          'have.html',
+          '<path stroke="#CDD1CD" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.515 24.485 10.029 16l8.486-8.485"></path>',
+        );
     });
   });
 });
diff --git a/client/src/components/Earn/EarnBoxPersonalAllocation/EarnBoxPersonalAllocation.tsx b/client/src/components/Earn/EarnBoxPersonalAllocation/EarnBoxPersonalAllocation.tsx
@@ -94,7 +94,7 @@ const EarnBoxPersonalAllocation: FC<EarnBoxPersonalAllocationProps> = ({ classNa
         isFetching: isPatronMode
           ? isFetchingTotalPatronDonations
           : isFetchingWithdrawals || isAppWaitingForTransactionToBeIndexed,
-        valueCrypto: isPatronMode ? totalPatronDonations : withdrawals?.sums.available,
+        valueCrypto: isPatronMode ? totalPatronDonations?.value : withdrawals?.sums.available,
       },
       label: isPatronMode && !isProjectAdminMode ? t('allTime') : i18n.t('common.availableNow'),
     },

diff --git a/client/src/components/Metrics/MetricsGrid/MetricsGridTile/types.ts b/client/src/components/Metrics/MetricsGrid/MetricsGridTile/types.ts
@@ -1,5 +1,8 @@
 import { ReactNode } from 'react';
 
+export const METRICS_GRID_TILE_SZIES = ['S', 'M', 'L', 'custom'] as const;
+export type MetricsGridTileSizes = (typeof METRICS_GRID_TILE_SZIES)[number];
+
 type MetricsGridTileGroup = {
   children: ReactNode;
   hasTitileBottomPadding?: boolean;
@@ -12,13 +15,13 @@ type MetricsGridTileProps =
       className?: string;
       dataTest?: string;
       groups: [MetricsGridTileGroup];
-      size?: 'S' | 'L' | 'custom';
+      size?: Exclude<MetricsGridTileSizes, 'M'>;
     }
   | {
       className?: string;
       dataTest?: string;
       groups: [MetricsGridTileGroup, MetricsGridTileGroup?];
-      size: 'M';
+      size: Exclude<MetricsGridTileSizes, 'S' | 'L' | 'custom'>;
     };
 
 export default MetricsGridTileProps;
diff --git a/client/src/components/Metrics/MetricsPersonal/MetricsPersonal.tsx b/client/src/components/Metrics/MetricsPersonal/MetricsPersonal.tsx
@@ -8,12 +8,14 @@ import TipTile from 'components/shared/TipTile';
 import { METRICS_PERSONAL_ID } from 'constants/metrics';
 import useMediaQuery from 'hooks/helpers/useMediaQuery';
 import useMetricsPersonalDataRewardsUsage from 'hooks/helpers/useMetricsPersonalDataRewardsUsage';
+import useTotalPatronDonations from 'hooks/helpers/useTotalPatronDonations';
 import useCryptoValues from 'hooks/queries/useCryptoValues';
 import useSettingsStore from 'store/settings/store';
 
 import styles from './MetricsPersonal.module.scss';
 import MetricsPersonalGridAllocations from './MetricsPersonalGridAllocations';
 import MetricsPersonalGridDonationsProgressBar from './MetricsPersonalGridDonationsProgressBar';
+import MetricsPersonalGridPatronDonations from './MetricsPersonalGridPatronDonations';
 import MetricsPersonalGridTotalRewardsWithdrawals from './MetricsPersonalGridTotalRewardsWithdrawals';
 
 const MetricsPersonal = (): ReactElement => {
@@ -32,18 +34,29 @@ const MetricsPersonal = (): ReactElement => {
   const { isFetching: isFetchingCryptoValues } = useCryptoValues(displayCurrency);
   const { isFetching: isFetchingMetricsPersonalDataRewardsUsage } =
     useMetricsPersonalDataRewardsUsage();
+  const { data: totalPatronDonations, isFetching: isFetchingTotalPatronDonations } =
+    useTotalPatronDonations();
 
-  const isLoading = isFetchingCryptoValues || isFetchingMetricsPersonalDataRewardsUsage;
+  const isLoading =
+    isFetchingCryptoValues ||
+    isFetchingMetricsPersonalDataRewardsUsage ||
+    isFetchingTotalPatronDonations;
+
+  const wasUserEverAPatron = totalPatronDonations && totalPatronDonations.numberOfEpochs > 0;
 
   return (
     <div className={styles.root} id={METRICS_PERSONAL_ID}>
       <div className={styles.divider} />
       <MetricsHeader title={t('yourMetrics')} />
       {isConnected ? (
         <MetricsGrid className={styles.grid} dataTest="MetricsPersonal__MetricsGrid">
-          <MetricsPersonalGridAllocations isLoading={isLoading} />
+          <MetricsPersonalGridAllocations
+            isLoading={isLoading}
+            size={isDesktop && wasUserEverAPatron ? 'custom' : 'L'}
+          />
           <MetricsPersonalGridTotalRewardsWithdrawals isLoading={isLoading} />
           <MetricsPersonalGridDonationsProgressBar isLoading={isLoading} />
+          {wasUserEverAPatron && <MetricsPersonalGridPatronDonations isLoading={isLoading} />}
         </MetricsGrid>
       ) : (
         <TipTile

diff --git a/...MetricsPersonal/MetricsPersonalGridAllocations/MetricsPersonalGridAllocations.module.scss b/...MetricsPersonal/MetricsPersonalGridAllocations/MetricsPersonalGridAllocations.module.scss
@@ -1,3 +1,10 @@
+.customSize {
+  min-height: 46.4rem;
+  grid-column: span 2;
+  grid-row: span 3;
+  max-height: 50.4rem;
+}
+
 .numberOfAllocationsSuffix {
   display: flex;
   align-items: center;

diff --git a/...Metrics/MetricsPersonal/MetricsPersonalGridAllocations/MetricsPersonalGridAllocations.tsx b/...Metrics/MetricsPersonal/MetricsPersonalGridAllocations/MetricsPersonalGridAllocations.tsx
@@ -10,7 +10,10 @@ import styles from './MetricsPersonalGridAllocations.module.scss';
 import MetricsPersonalGridAllocationsProps from './types';
 import { getReducedUserAllocationsAllEpochs } from './utils';
 
-const MetricsPersonalGridAllocations: FC<MetricsPersonalGridAllocationsProps> = ({ isLoading }) => {
+const MetricsPersonalGridAllocations: FC<MetricsPersonalGridAllocationsProps> = ({
+  isLoading,
+  size,
+}) => {
   const { t } = useTranslation('translation', { keyPrefix: 'views.metrics' });
   const { data: userAllocationsAllEpochs } = useUserAllocationsAllEpochs();
   const reducedUserAllocationsAllEpochs =
@@ -40,6 +43,7 @@ const MetricsPersonalGridAllocations: FC<MetricsPersonalGridAllocationsProps> =
 
   return (
     <MetricsGridTile
+      className={size === 'custom' ? styles.customSize : undefined}
       groups={[
         {
           children,
@@ -51,7 +55,7 @@ const MetricsPersonalGridAllocations: FC<MetricsPersonalGridAllocationsProps> =
           ),
         },
       ]}
-      size="L"
+      size={size}
     />
   );
 };

diff --git a/client/src/components/Metrics/MetricsPersonal/MetricsPersonalGridAllocations/types.ts b/client/src/components/Metrics/MetricsPersonal/MetricsPersonalGridAllocations/types.ts
@@ -1,3 +1,6 @@
+import { MetricsGridTileSizes } from 'components/Metrics/MetricsGrid/MetricsGridTile/types';
+
 export default interface MetricsPersonalGridAllocationsProps {
   isLoading: boolean;
+  size: MetricsGridTileSizes;
 }
diff --git a/...sonal/MetricsPersonalGridDonationsProgressBar/MetricsPersonalGridDonationsProgressBar.tsx b/...sonal/MetricsPersonalGridDonationsProgressBar/MetricsPersonalGridDonationsProgressBar.tsx
@@ -32,8 +32,8 @@ const MetricsPersonalGridDonationsProgressBar: FC<MetricsPersonalGridDonationsPr
             <MetricsDonationsProgressBar
               donationsValue={donationsValue}
               isDisabled={
-                !!(metricsPersonalDataRewardsUsage?.totalDonations === 0n) &&
-                !!(metricsPersonalDataRewardsUsage?.totalWithdrawals === 0n)
+                metricsPersonalDataRewardsUsage?.totalDonations === 0n &&
+                metricsPersonalDataRewardsUsage?.totalWithdrawals === 0n
               }
               isLoading={isLoading}
             />

diff --git a/...MetricsPersonal/MetricsPersonalGridPatronDonations/MetricsPersonalGridPatronDonations.tsx b/...MetricsPersonal/MetricsPersonalGridPatronDonations/MetricsPersonalGridPatronDonations.tsx
@@ -0,0 +1,72 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import MetricsGridTile from 'components/Metrics/MetricsGrid/MetricsGridTile';
+import MetricsGridTileValue from 'components/Metrics/MetricsGrid/MetricsGridTileValue';
+import { getValuesToDisplay } from 'components/ui/DoubleValue/utils';
+import useTotalPatronDonations from 'hooks/helpers/useTotalPatronDonations';
+import useCryptoValues from 'hooks/queries/useCryptoValues';
+import useSettingsStore from 'store/settings/store';
+
+import MetricsPersonalGridPatronDonationsProps from './types';
+
+const MetricsPersonalGridPatronDonations: FC<MetricsPersonalGridPatronDonationsProps> = ({
+  isLoading,
+}) => {
+  const { t } = useTranslation('translation', { keyPrefix: 'views.metrics' });
+  const {
+    data: { displayCurrency },
+  } = useSettingsStore(({ data }) => ({
+    data: {
+      displayCurrency: data.displayCurrency,
+      isCryptoMainValueDisplay: data.isCryptoMainValueDisplay,
+    },
+  }));
+  const { data: cryptoValues, error } = useCryptoValues(displayCurrency);
+  const { data: totalPatronDonations } = useTotalPatronDonations();
+
+  const totalPatronDonationsValues = getValuesToDisplay({
+    cryptoCurrency: 'ethereum',
+    cryptoValues,
+    displayCurrency: displayCurrency!,
+    error,
+    isCryptoMainValueDisplay: true,
+    shouldIgnoreGwei: false,
+    valueCrypto: totalPatronDonations?.value,
+  });
+
+  return (
+    <MetricsGridTile
+      groups={[
+        {
+          children: (
+            <MetricsGridTileValue
+              isLoading={isLoading}
+              size="S"
+              value={t('patronModeActiveLabel', {
+                numberOfEpochs: totalPatronDonations
+                  ? totalPatronDonations.numberOfEpochs.toString()
+                  : '',
+              }).toUpperCase()}
+            />
+          ),
+          title: t('patronModeActive'),
+        },
+        {
+          children: (
+            <MetricsGridTileValue
+              isLoading={isLoading}
+              size="S"
+              subvalue={totalPatronDonationsValues.secondary}
+              value={totalPatronDonationsValues.primary}
+            />
+          ),
+          title: t('donatedAsPatron'),
+        },
+      ]}
+      size="M"
+    />
+  );
+};
+
+export default MetricsPersonalGridPatronDonations;
diff --git a/client/src/components/Metrics/MetricsPersonal/MetricsPersonalGridPatronDonations/index.tsx b/client/src/components/Metrics/MetricsPersonal/MetricsPersonalGridPatronDonations/index.tsx
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export { default } from './MetricsPersonalGridPatronDonations';
diff --git a/client/src/components/Metrics/MetricsPersonal/MetricsPersonalGridPatronDonations/types.ts b/client/src/components/Metrics/MetricsPersonal/MetricsPersonalGridPatronDonations/types.ts
@@ -0,0 +1,3 @@
+export default interface MetricsPersonalGridPatronDonationsProps {
+  isLoading: boolean;
+}
diff --git a/client/src/hooks/helpers/useTotalPatronDonations.ts b/client/src/hooks/helpers/useTotalPatronDonations.ts
@@ -6,9 +6,9 @@ import useIndividualRewardAllEpochs from './useIndividualRewardAllEpochs';
 export default function useTotalPatronDonations({
   isEnabledAdditional,
 }: {
-  isEnabledAdditional: boolean;
-}): {
-  data: bigint | undefined;
+  isEnabledAdditional?: boolean;
+} = {}): {
+  data: { numberOfEpochs: number; value: bigint } | undefined;
   isFetching: boolean;
 } {
   const { address } = useAccount();
@@ -29,9 +29,15 @@ export default function useTotalPatronDonations({
 
   return {
     data: epochPatronsAllEpochs.reduce(
-      (acc, curr, currentIndex) =>
-        curr.includes(address!) ? acc + individualRewardAllEpochs[currentIndex] : acc,
-      BigInt(0),
+      (acc, curr, currentIndex) => {
+        return curr.includes(address!)
+          ? {
+              numberOfEpochs: acc.numberOfEpochs + 1,
+              value: acc.value + individualRewardAllEpochs[currentIndex],
+            }
+          : acc;
+      },
+      { numberOfEpochs: 0, value: BigInt(0) },
     ),
     isFetching: false,
   };

diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
@@ -357,6 +357,9 @@
       "generalMetrics": "General metrics",
       "totalWithdrawals": "Total withdrawals",
       "donationsVsPersonalAllocationValue": "Donations vs personal allocation value",
+      "patronModeActive": "Patron mode active",
+      "patronModeActiveLabel": "{{numberOfEpochs}} epochs",
+      "donatedAsPatron": "Donated as patron",
       "noAllocationsYet": "No allocations yet",
       "totalProjects": "Total projects",
       "totalEthStaked": "Total ETH Staked",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// eslint-disable-next-line no-restricted-exports
		export { default } from './MetricsPersonalGridPatronDonations';