diff --git a/apps/trading/client-pages/referrals/apply-code-form.tsx b/apps/trading/client-pages/referrals/apply-code-form.tsx index b4121aee4..d1dea5637 100644 --- a/apps/trading/client-pages/referrals/apply-code-form.tsx +++ b/apps/trading/client-pages/referrals/apply-code-form.tsx @@ -17,7 +17,7 @@ import { useReferral } from './hooks/use-referral'; import { Routes } from '../../lib/links'; import { useTransactionEventSubscription } from '@vegaprotocol/web3'; import { t } from '@vegaprotocol/i18n'; -import { Statistics } from './referral-statistics'; +import { Statistics, useStats } from './referral-statistics'; import { useReferralProgram } from './hooks/use-referral-program'; const RELOAD_DELAY = 3000; @@ -132,6 +132,8 @@ export const ApplyCodeForm = () => { }), }); + const { epochsValue, nextBenefitTierValue } = useStats({ program }); + // go to main page when successfully applied useEffect(() => { if (status === 'successful') { @@ -196,6 +198,10 @@ export const ApplyCodeForm = () => { }; }; + const nextBenefitTierEpochsValue = nextBenefitTierValue + ? nextBenefitTierValue.epochs - epochsValue + : 0; + return ( <>
@@ -238,7 +244,12 @@ export const ApplyCodeForm = () => { ) : null} {previewData ? (
-

{t('You are joining')}

+

+ {t( + 'You are joining the group shown, but will not have access to benefits until you have completed at least %s epochs.', + [nextBenefitTierEpochsValue.toString()] + )} +

) : null} diff --git a/apps/trading/client-pages/referrals/referral-statistics.tsx b/apps/trading/client-pages/referrals/referral-statistics.tsx index 69e10d30c..b97f481eb 100644 --- a/apps/trading/client-pages/referrals/referral-statistics.tsx +++ b/apps/trading/client-pages/referrals/referral-statistics.tsx @@ -25,7 +25,7 @@ import compact from 'lodash/compact'; import { useReferralProgram } from './hooks/use-referral-program'; import { useStakeAvailable } from './hooks/use-stake-available'; import sortBy from 'lodash/sortBy'; -import { useLayoutEffect, useRef, useState } from 'react'; +import { useLayoutEffect, useMemo, useRef, useState } from 'react'; import { useCurrentEpochInfoQuery } from './hooks/__generated__/Epoch'; import BigNumber from 'bignumber.js'; import { t } from '@vegaprotocol/i18n'; @@ -59,21 +59,20 @@ export const ReferralStatistics = () => { return ; }; -export const Statistics = ({ +export const useStats = ({ data, program, as, }: { - data: NonNullable['data']>; + data?: NonNullable['data']>; program: ReturnType; - as: 'referrer' | 'referee'; + as?: 'referrer' | 'referee'; }) => { - const { benefitTiers, details } = program; + const { benefitTiers } = program; const { data: epochData } = useCurrentEpochInfoQuery(); - const { stakeAvailable } = useStakeAvailable(); const { data: statsData } = useReferralSetStatsQuery({ variables: { - code: data.code, + code: data?.code || '', }, skip: !data?.code, fetchPolicy: 'cache-and-network', @@ -81,19 +80,12 @@ export const Statistics = ({ const currentEpoch = Number(epochData?.epoch.id); - const compactNumFormat = new Intl.NumberFormat(getUserLocale(), { - minimumFractionDigits: 0, - maximumFractionDigits: 2, - notation: 'compact', - compactDisplay: 'short', - }); - const stats = statsData?.referralSetStats.edges && compact(removePaginationWrapper(statsData.referralSetStats.edges)); - const refereeInfo = data.referee; + const refereeInfo = data?.referee; const refereeStats = stats?.find( - (r) => r.partyId === data.referee?.refereeId + (r) => r.partyId === data?.referee?.refereeId ); const statsAvailable = stats && stats.length > 0 && stats[0]; @@ -136,6 +128,60 @@ export const Statistics = ({ ? nextBenefitTierValue.epochs - epochsValue : 0; + return { + baseCommissionValue, + runningVolumeValue, + referrerVolumeValue, + multiplier, + finalCommissionValue, + discountFactorValue, + currentBenefitTierValue, + nextBenefitTierValue, + epochsValue, + nextBenefitTierVolumeValue, + nextBenefitTierEpochsValue, + }; +}; + +export const Statistics = ({ + data, + program, + as, +}: { + data: NonNullable['data']>; + program: ReturnType; + as: 'referrer' | 'referee'; +}) => { + const { + baseCommissionValue, + runningVolumeValue, + referrerVolumeValue, + multiplier, + finalCommissionValue, + discountFactorValue, + currentBenefitTierValue, + epochsValue, + nextBenefitTierVolumeValue, + nextBenefitTierEpochsValue, + } = useStats({ data, program, as }); + + const isApplyCodePreview = useMemo( + () => data.referee === null, + [data.referee] + ); + + const { benefitTiers } = useReferralProgram(); + + const { stakeAvailable } = useStakeAvailable(); + const { details } = program; + + const compactNumFormat = new Intl.NumberFormat(getUserLocale(), { + minimumFractionDigits: 0, + maximumFractionDigits: 2, + notation: 'compact', + compactDisplay: 'short', + }); + const baseCommissionTile = ( - {currentBenefitTierValue?.tier || 'None'} + {isApplyCodePreview + ? currentBenefitTierValue?.tier || benefitTiers[0]?.tier || 'None' + : currentBenefitTierValue?.tier || 'None'} ); const discountFactorTile = ( - {discountFactorValue * 100}% + + {isApplyCodePreview + ? benefitTiers[0].discountFactor * 100 + : discountFactorValue * 100} + % + ); const runningVolumeTile = (
{currentBenefitTierTile} - {discountFactorTile} + {runningVolumeTile} {codeTile}
- {runningVolumeTile} + {discountFactorTile} {nextTierVolumeTile} {epochsTile} {nextTierEpochsTile}