diff --git a/client/cypress/e2e/patronMode.cy.ts b/client/cypress/e2e/patronMode.cy.ts index 854b0a8ca1..a994e1ff6e 100644 --- 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',''); + .should( + 'have.html', + '', + ); }); }); }); diff --git a/client/src/components/Earn/EarnBoxPersonalAllocation/EarnBoxPersonalAllocation.tsx b/client/src/components/Earn/EarnBoxPersonalAllocation/EarnBoxPersonalAllocation.tsx index a7e891cd96..311806db1f 100644 --- a/client/src/components/Earn/EarnBoxPersonalAllocation/EarnBoxPersonalAllocation.tsx +++ b/client/src/components/Earn/EarnBoxPersonalAllocation/EarnBoxPersonalAllocation.tsx @@ -94,7 +94,7 @@ const EarnBoxPersonalAllocation: FC = ({ 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 index e61d605998..69ba6c7a1d 100644 --- 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; } | { className?: string; dataTest?: string; groups: [MetricsGridTileGroup, MetricsGridTileGroup?]; - size: 'M'; + size: Exclude; }; export default MetricsGridTileProps; diff --git a/client/src/components/Metrics/MetricsPersonal/MetricsPersonal.tsx b/client/src/components/Metrics/MetricsPersonal/MetricsPersonal.tsx index c0eb6942f9..6f4a100753 100644 --- 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,8 +34,15 @@ 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 (
@@ -41,9 +50,13 @@ const MetricsPersonal = (): ReactElement => { {isConnected ? ( - + + {wasUserEverAPatron && } ) : ( = ({ isLoading }) => { +const MetricsPersonalGridAllocations: FC = ({ + isLoading, + size, +}) => { const { t } = useTranslation('translation', { keyPrefix: 'views.metrics' }); const { data: userAllocationsAllEpochs } = useUserAllocationsAllEpochs(); const reducedUserAllocationsAllEpochs = @@ -40,6 +43,7 @@ const MetricsPersonalGridAllocations: FC = return ( = ), }, ]} - size="L" + size={size} /> ); }; diff --git a/client/src/components/Metrics/MetricsPersonal/MetricsPersonalGridAllocations/types.ts b/client/src/components/Metrics/MetricsPersonal/MetricsPersonalGridAllocations/types.ts index 75423768ef..dfe4d9b67e 100644 --- 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/client/src/components/Metrics/MetricsPersonal/MetricsPersonalGridDonationsProgressBar/MetricsPersonalGridDonationsProgressBar.tsx b/client/src/components/Metrics/MetricsPersonal/MetricsPersonalGridDonationsProgressBar/MetricsPersonalGridDonationsProgressBar.tsx index 8d97edb6fa..cf4315fcb3 100644 --- a/client/src/components/Metrics/MetricsPersonal/MetricsPersonalGridDonationsProgressBar/MetricsPersonalGridDonationsProgressBar.tsx +++ b/client/src/components/Metrics/MetricsPersonal/MetricsPersonalGridDonationsProgressBar/MetricsPersonalGridDonationsProgressBar.tsx @@ -32,8 +32,8 @@ const MetricsPersonalGridDonationsProgressBar: FC diff --git a/client/src/components/Metrics/MetricsPersonal/MetricsPersonalGridPatronDonations/MetricsPersonalGridPatronDonations.tsx b/client/src/components/Metrics/MetricsPersonal/MetricsPersonalGridPatronDonations/MetricsPersonalGridPatronDonations.tsx new file mode 100644 index 0000000000..d4d54d0836 --- /dev/null +++ b/client/src/components/Metrics/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 = ({ + 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 ( + + ), + title: t('patronModeActive'), + }, + { + children: ( + + ), + 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 new file mode 100644 index 0000000000..9ad78dbe70 --- /dev/null +++ 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 new file mode 100644 index 0000000000..efc892fb51 --- /dev/null +++ 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 index 0e0e4508e0..6063711586 100644 --- 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 index cb9dbef169..f9a9652660 100644 --- 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",