OCT-1883: Metrics: Grid update

client/src/components/Metrics/MetricsDonationsProgressBar/MetricsDonationsProgressBar.tsx

@@ -12,6 +12,7 @@ const MetricsDonationsProgressBar: FC<MetricsDonationsProgressBarProps> = ({
   isDisabled,
   isLoading,
   donationsValue,
+  compareValueLabel,
 }) => {
   const { i18n } = useTranslation('translation');
   const donationsPercentage = isDisabled ? 0 : donationsValue.toFixed(2).replace(dotAndZeroes, '');
@@ -50,7 +51,7 @@ const MetricsDonationsProgressBar: FC<MetricsDonationsProgressBarProps> = ({
           ) : (
             <>
               <div className={styles.percentage}>{personalPercentage}%</div>
-              <div className={styles.label}>{i18n.t('common.personal')}</div>
+              <div className={styles.label}>{compareValueLabel}</div>
             </>
           )}
         </div>

client/src/components/Metrics/MetricsDonationsProgressBar/types.ts

@@ -1,4 +1,5 @@
 export default interface MetricsDonationsProgressBarProps {
+  compareValueLabel: string;
   donationsValue: number;
   isDisabled?: boolean;
   isLoading: boolean;

client/src/components/Metrics/MetricsEpoch/MetricsEpoch.module.scss

@@ -1,67 +1,78 @@
 .root {
   width: 100%;
+  border-top: 0.1rem solid $color-octant-grey1;
+  border-bottom: 0.1rem solid $color-octant-grey1;
+  padding-bottom: 6.4rem;
 }
 
 .grid {
-  grid-template-rows: 16rem 16rem minmax(14.4rem, auto);
+  grid-template-rows: repeat(10, 15.6rem);
+
+  @media #{$tablet-up} {
+    grid-template-rows: repeat(6, 15.6rem);
+  }
 
   @media #{$desktop-up} {
-    grid-template-rows: 14.4rem 14.4rem minmax(14.4rem, auto);
+    grid-template-rows: repeat(4, 15.6rem);
+  }
+}
+
+.topProjects,
+.fundsUsage {
+  @media #{$tablet-down} {
+    order: 0;
   }
 }
 
-.topProjects {
+.totalDonations,
+.totalMatching {
   @media #{$tablet-down} {
     order: 1;
   }
 }
-.totalDonationsAndPersonal {
+
+.donationsVsMatching {
   @media #{$tablet-down} {
     order: 2;
   }
 }
-.donationsVsPersonal {
+
+.totalUsers {
   @media #{$tablet-down} {
     order: 3;
   }
 }
-.currentDonors {
+.patrons {
   @media #{$tablet-down} {
     order: 4;
   }
 }
 
-.averageLeverage {
+.currentDonors {
   @media #{$tablet-down} {
     order: 5;
   }
 }
 
-.totalUsers {
+.averageLeverage {
   @media #{$tablet-down} {
     order: 6;
   }
 }
-.patrons {
+
+.rewardsUnused {
   @media #{$tablet-down} {
     order: 7;
   }
 }
-
-.fundsUsage {
+.unallocatedValue {
   @media #{$tablet-down} {
     order: 8;
   }
 }
 
-.unusedAndUnallocatedValue {
+.donationsVsPersonal {
   @media #{$tablet-down} {
     order: 9;
   }
 }
-
-.belowThreshold {
-  @media #{$tablet-down} {
-    order: 10;
-  }
-}

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

@@ -3,13 +3,16 @@ import React, { ReactElement } from 'react';
 import MetricsEpochGridAverageLeverage from 'components/Metrics/MetricsEpoch/MetricsEpochGridAverageLeverage';
 import MetricsEpochGridBelowThreshold from 'components/Metrics/MetricsEpoch/MetricsEpochGridBelowThreshold';
 import MetricsEpochGridCurrentDonors from 'components/Metrics/MetricsEpoch/MetricsEpochGridCurrentDonors';
+import MetricsEpochGridDonationsVsMatching from 'components/Metrics/MetricsEpoch/MetricsEpochGridDonationsVsMatching';
 import MetricsEpochGridDonationsVsPersonalAllocations from 'components/Metrics/MetricsEpoch/MetricsEpochGridDonationsVsPersonalAllocations';
 import MetricsEpochGridFundsUsage from 'components/Metrics/MetricsEpoch/MetricsEpochGridFundsUsage';
 import MetricsEpochGridPatrons from 'components/Metrics/MetricsEpoch/MetricsEpochGridPatrons';
-import MetricsEpochGridRewardsUnusedAndUnallocatedValue from 'components/Metrics/MetricsEpoch/MetricsEpochGridRewardsUnusedAndUnallocatedValue';
+import MetricsEpochGridRewardsUnused from 'components/Metrics/MetricsEpoch/MetricsEpochGridRewardsUnused';
 import MetricsEpochGridTopProjects from 'components/Metrics/MetricsEpoch/MetricsEpochGridTopProjects';
-import MetricsEpochGridTotalDonationsAndPersonal from 'components/Metrics/MetricsEpoch/MetricsEpochGridTotalDonationsAndPersonal';
+import MetricsEpochGridTotalDonations from 'components/Metrics/MetricsEpoch/MetricsEpochGridTotalDonations';
+import MetricsEpochGridTotalMatchingFund from 'components/Metrics/MetricsEpoch/MetricsEpochGridTotalMatchingFund';
 import MetricsEpochGridTotalUsers from 'components/Metrics/MetricsEpoch/MetricsEpochGridTotalUsers';
+import MetricsEpochGridUnallocatedValue from 'components/Metrics/MetricsEpoch/MetricsEpochGridUnallocatedValue';
 import MetricsEpochHeader from 'components/Metrics/MetricsEpoch/MetricsEpochHeader';
 import MetricsGrid from 'components/Metrics/MetricsGrid';
 import { METRICS_EPOCH_ID } from 'constants/domElementsIds';
@@ -47,9 +50,8 @@ const MetricsEpoch = (): ReactElement => {
   const { isFetching: isFetchingMatchedProjectRewards } = useMatchedProjectRewards(
     isDecisionWindowOpen && epoch === lastEpoch ? undefined : epoch,
   );
-  const { isFetching: isFetchingProjectsIpfsWithRewards } = useProjectsIpfsWithRewards(
-    isDecisionWindowOpen && epoch === lastEpoch ? undefined : epoch,
-  );
+  const { data: projectsIpfsWithRewards, isFetching: isFetchingProjectsIpfsWithRewards } =
+    useProjectsIpfsWithRewards(isDecisionWindowOpen && epoch === lastEpoch ? undefined : epoch);
   const { data: projectsDonors, isFetching: isFetchingProjectsDonors } = useProjectsDonors(
     isDecisionWindowOpen && epoch === lastEpoch ? undefined : epoch,
   );
@@ -87,6 +89,11 @@ const MetricsEpoch = (): ReactElement => {
   const epochBudget = epochBudgets?.budgetsSum || BigInt(0);
 
   const totalPersonal = epochBudget - totalUserDonationsWithPatronRewards - unusedRewards;
+  const matchedRewards = projectsIpfsWithRewards.reduce(
+    (acc, curr) => acc + curr.matchedRewards,
+    0n,
+  );
+  const matchingFund = matchedRewards > 0n ? matchedRewards - patronsRewards : 0n;
 
   // All metrics should be visible in the same moment (design). Skeletons are visible to the end of fetching all needed data.
   const isLoading =
@@ -113,18 +120,6 @@ const MetricsEpoch = (): ReactElement => {
       <MetricsEpochHeader />
       <MetricsGrid className={styles.grid} dataTest="MetricsEpoch__MetricsGrid">
         <MetricsEpochGridTopProjects className={styles.topProjects} isLoading={isLoading} />
-        <MetricsEpochGridTotalDonationsAndPersonal
-          className={styles.totalDonationsAndPersonal}
-          isLoading={isLoading}
-          totalPersonal={totalPersonal}
-          totalUserDonationsWithPatronRewards={totalUserDonationsWithPatronRewards}
-        />
-        <MetricsEpochGridDonationsVsPersonalAllocations
-          className={styles.donationsVsPersonal}
-          isLoading={isLoading}
-          totalPersonal={totalPersonal}
-          totalUserDonationsWithPatronRewards={totalUserDonationsWithPatronRewards}
-        />
         <MetricsEpochGridFundsUsage
           className={styles.fundsUsage}
           isLoading={isLoading}
@@ -133,11 +128,34 @@ const MetricsEpoch = (): ReactElement => {
         />
         <MetricsEpochGridTotalUsers className={styles.totalUsers} isLoading={isLoading} />
         <MetricsEpochGridPatrons className={styles.patrons} isLoading={isLoading} />
+        <MetricsEpochGridRewardsUnused className={styles.rewardsUnused} isLoading={isLoading} />
+        <MetricsEpochGridUnallocatedValue
+          className={styles.unallocatedValue}
+          isLoading={isLoading}
+        />
+        <MetricsEpochGridTotalDonations
+          className={styles.totalDonations}
+          isLoading={isLoading}
+          totalUserDonationsWithPatronRewards={totalUserDonationsWithPatronRewards}
+        />
+        <MetricsEpochGridTotalMatchingFund
+          className={styles.totalMatching}
+          isLoading={isLoading}
+          matchingFund={matchingFund}
+        />
         <MetricsEpochGridCurrentDonors className={styles.currentDonors} isLoading={isLoading} />
         <MetricsEpochGridAverageLeverage className={styles.averageLeverage} isLoading={isLoading} />
-        <MetricsEpochGridRewardsUnusedAndUnallocatedValue
-          className={styles.unusedAndUnallocatedValue}
+        <MetricsEpochGridDonationsVsMatching
+          className={styles.donationsVsMatching}
           isLoading={isLoading}
+          matchingFund={matchingFund}
+          totalUserDonationsWithPatronRewards={totalUserDonationsWithPatronRewards}
+        />
+        <MetricsEpochGridDonationsVsPersonalAllocations
+          className={styles.donationsVsPersonal}
+          isLoading={isLoading}
+          totalPersonal={totalPersonal}
+          totalUserDonationsWithPatronRewards={totalUserDonationsWithPatronRewards}
         />
         {epoch < 4 && (
           <MetricsEpochGridBelowThreshold

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

@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import MetricsDonationsProgressBar from 'components/Metrics/MetricsDonationsProgressBar';
+import MetricsGridTile from 'components/Metrics/MetricsGrid/MetricsGridTile';
+import { formatUnitsBigInt } from 'utils/formatUnitsBigInt';
+
+import MetricsEpochGridDonationsVsMatchingProps from './types';
+
+const MetricsEpochGridDonationsVsMatching: FC<MetricsEpochGridDonationsVsMatchingProps> = ({
+  totalUserDonationsWithPatronRewards,
+  isLoading,
+  matchingFund,
+  className,
+}) => {
+  const { t } = useTranslation('translation', { keyPrefix: 'views.metrics' });
+
+  const totalUserDonationWithPatronRewardsNumber = parseFloat(
+    formatUnitsBigInt(totalUserDonationsWithPatronRewards),
+  );
+  const matchingFundNumber = parseFloat(formatUnitsBigInt(matchingFund));
+
+  const donationsValue =
+    totalUserDonationWithPatronRewardsNumber > 0
+      ? (totalUserDonationWithPatronRewardsNumber /
+          (matchingFundNumber + totalUserDonationWithPatronRewardsNumber)) *
+        100
+      : 0;
+
+  return (
+    <MetricsGridTile
+      className={className}
+      dataTest="MetricsEpochGridDonationsVsMatching"
+      groups={[
+        {
+          children: (
+            <MetricsDonationsProgressBar
+              compareValueLabel={t('matching')}
+              donationsValue={donationsValue}
+              isLoading={isLoading}
+            />
+          ),
+          title: t('donationsVsMatchFunding'),
+        },
+      ]}
+    />
+  );
+};
+
+export default MetricsEpochGridDonationsVsMatching;

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

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export { default } from './MetricsEpochGridDonationsVsMatching';

client/src/components/Metrics/MetricsEpoch/MetricsEpochGridDonationsVsMatching/types.ts

@@ -0,0 +1,6 @@
+export default interface MetricsEpochGridDonationsVsMatchingProps {
+  className?: string;
+  isLoading: boolean;
+  matchingFund: bigint;
+  totalUserDonationsWithPatronRewards: bigint;
+}

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

@@ -31,9 +31,13 @@ const MetricsEpochGridDonationsVsPersonalAllocations: FC<
       groups={[
         {
           children: (
-            <MetricsDonationsProgressBar donationsValue={donationsValue} isLoading={isLoading} />
+            <MetricsDonationsProgressBar
+              compareValueLabel={t('personal')}
+              donationsValue={donationsValue}
+              isLoading={isLoading}
+            />
           ),
-          title: t('donationsVsPersonalAllocationValue'),
+          title: t('donationsVsPersonal'),
         },
       ]}
     />

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

@@ -0,0 +1,44 @@
+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 useMetricsEpoch from 'hooks/helpers/useMetrcisEpoch';
+import useEpochUnusedRewards from 'hooks/queries/useEpochUnusedRewards';
+
+import MetricsEpochGridRewardsUnusedProps from './types';
+
+const MetricsEpochGridRewardsUnused: FC<MetricsEpochGridRewardsUnusedProps> = ({
+  isLoading,
+  className,
+}) => {
+  const { t } = useTranslation('translation', { keyPrefix: 'views.metrics' });
+
+  const { epoch } = useMetricsEpoch();
+  const { data: epochUnusedRewards } = useEpochUnusedRewards(epoch);
+
+  const users = `${epochUnusedRewards?.addresses.length || 0}`;
+
+  return (
+    <MetricsGridTile
+      className={className}
+      dataTest="MetricsEpochGridRewardsUnused"
+      groups={[
+        {
+          children: (
+            <MetricsGridTileValue
+              isLoading={isLoading}
+              size="S"
+              subvalue={t('users').toUpperCase()}
+              value={users}
+            />
+          ),
+          title: t('rewardsUnused'),
+        },
+      ]}
+      size="S"
+    />
+  );
+};
+
+export default MetricsEpochGridRewardsUnused;

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

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export { default } from './MetricsEpochGridRewardsUnused';

client/src/components/Metrics/MetricsEpoch/MetricsEpochGridRewardsUnused/types.ts

@@ -0,0 +1,4 @@
+export default interface MetricsEpochGridRewardsUnusedProps {
+  className?: string;
+  isLoading: boolean;
+}