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}