vega-frontend-monorepo/apps/trading/client-pages/referrals/tiers.tsx

328 lines
9.3 KiB
TypeScript
Raw Normal View History

import {
addDecimalsFormatNumber,
getDateTimeFormat,
} from '@vegaprotocol/utils';
import { useReferralProgram } from './hooks/use-referral-program';
import { Table } from '../../components/table';
import classNames from 'classnames';
import { BORDER_COLOR, GRADIENT } from './constants';
import { Tag } from '../../components/helpers/tag';
import { getTierColor, getTierGradient } from '../../components/helpers/tiers';
import type { ReactNode } from 'react';
import { ExternalLink, truncateMiddle } from '@vegaprotocol/ui-toolkit';
import {
DApp,
DocsLinks,
TOKEN_PROPOSAL,
TOKEN_PROPOSALS,
useLinks,
} from '@vegaprotocol/environment';
import { useT, ns } from '../../lib/use-t';
import { Trans } from 'react-i18next';
const Loading = ({ variant }: { variant: 'large' | 'inline' }) => (
<div
className={classNames(
'bg-vega-clight-800 dark:bg-vega-cdark-800 rounded-lg animate-pulse',
{
'w-full h-20': variant === 'large',
}
)}
></div>
);
const StakingTier = ({
tier,
referralRewardMultiplier,
minimumStakedTokens,
max,
}: {
tier: number;
referralRewardMultiplier: string;
minimumStakedTokens: string;
max?: number;
}) => {
const t = useT();
const minimum = addDecimalsFormatNumber(minimumStakedTokens, 18);
// TODO: Decide what to do with the multiplier images
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const multiplierImage = (
<div
aria-hidden
className={classNames(
'w-full max-w-[80px] h-full min-h-[80px]',
'bg-cover bg-right-bottom',
{
"bg-[url('/1x.png')]": tier === 1,
"bg-[url('/2x.png')]": tier === 2,
"bg-[url('/3x.png')]": tier === 3,
}
)}
>
<span className="sr-only">{`${referralRewardMultiplier}x multiplier`}</span>
</div>
);
return (
<div
className={classNames(
'overflow-hidden',
'border rounded-md w-full',
'flex flex-row',
'bg-white dark:bg-vega-cdark-900',
GRADIENT,
BORDER_COLOR
)}
>
<div
className={classNames(
'p-3 flex flex-row min-h-[80px] h-full items-center'
)}
>
<div>
<Tag color={getTierColor(tier, max)}>
{t('Multiplier')} {referralRewardMultiplier}x
</Tag>
<p className="mt-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100">
<Trans
defaults="Stake a minimum of <0>{{minimum}}</0> $VEGA tokens"
values={{ minimum }}
components={[<b key={minimum}></b>]}
/>
</p>
</div>
</div>
</div>
);
};
export const TiersContainer = () => {
const t = useT();
const { benefitTiers, stakingTiers, details, loading, error } =
useReferralProgram();
const ends = details?.endOfProgramTimestamp
? getDateTimeFormat().format(new Date(details.endOfProgramTimestamp))
: undefined;
const governanceLink = useLinks(DApp.Governance);
if ((!loading && !details) || error) {
return (
<div className="bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white rounded-lg p-6 mt-1 mb-20 text-sm text-center">
<Trans
defaults="There are currently no active referral programs. Check the <0>Governance App</0> to see if there are any proposals in progress and vote."
components={[
<ExternalLink
href={governanceLink(TOKEN_PROPOSALS)}
key="link"
className="underline"
>
{t('Governance App')}
</ExternalLink>,
]}
ns={ns}
/>{' '}
<Trans
defaults="Use the <0>docs</0> tutorial to propose a new program."
components={[
<ExternalLink
href={DocsLinks?.REFERRALS}
key="link"
className="underline"
>
{t('docs')}
</ExternalLink>,
]}
ns={ns}
/>
</div>
);
}
return (
<>
<h2 className="text-3xl mt-10 font-alpha calt">
{t('Current program details')}
</h2>
{details?.id && (
<p>
<Trans
defaults="As a result of governance proposal <0>{{proposal}}</0> the program below is currently active on the Vega network."
values={{ proposal: truncateMiddle(details.id) }}
components={[
<ExternalLink
key="referral-program-proposal-link"
href={governanceLink(TOKEN_PROPOSAL.replace(':id', details.id))}
className="underline"
>
proposal
</ExternalLink>,
]}
/>
</p>
)}
{/* Meta */}
<div className="mt-10 flex flex-row items-baseline justify-between text-xs text-vega-clight-100 dark:text-vega-cdark-100 font-alpha calt">
{details?.id && (
<span>
{t('Proposal ID:')}{' '}
<ExternalLink
href={governanceLink(TOKEN_PROPOSAL.replace(':id', details.id))}
>
<span>{truncateMiddle(details.id)}</span>
</ExternalLink>
</span>
)}
{ends && (
<span>
{t('Program ends:')} {ends}
</span>
)}
</div>
{/* Container */}
<div
className={classNames(
'md:bg-vega-clight-800',
'md:dark:bg-vega-cdark-800',
'md:text-black',
'md:dark:text-white',
'md:rounded-lg',
'md:p-6',
'mt-1',
'mb-20'
)}
>
{/* Benefit tiers */}
<div className="flex flex-col mb-5">
<h3 className="text-2xl calt">{t('Benefit tiers')}</h3>
<p className="text-sm text-vega-clight-200 dark:text-vega-cdark-200">
{t(
'Members of a referral group can access the increasing commission and discount benefits defined in the program based on their combined running volume.'
)}
</p>
</div>
<div className="mb-10">
{loading || !benefitTiers || benefitTiers.length === 0 ? (
<Loading variant="large" />
) : (
<TiersTable
windowLength={details?.windowLength}
data={benefitTiers.map((bt) => ({
...bt,
tierElement: (
<div className="rounded-full bg-vega-clight-900 dark:bg-vega-cdark-900 p-1 w-8 h-8 text-center">
{bt.tier}
</div>
),
}))}
/>
)}
</div>
{/* Staking tiers */}
<div className="flex flex-col mb-5">
<h3 className="text-2xl calt">{t('Staking multipliers')}</h3>
<p className="text-sm text-vega-clight-200 dark:text-vega-cdark-200">
{t(
'Referrers can access the commission multipliers defined in the program by staking VEGA tokens in the amounts shown.'
)}
</p>
</div>
<div className="gap-5 grid lg:grid-cols-3">
{loading || !stakingTiers || stakingTiers.length === 0 ? (
<>
<Loading variant="large" />
<Loading variant="large" />
<Loading variant="large" />
</>
) : (
<StakingTiers data={stakingTiers} />
)}
</div>
</div>
</>
);
};
const StakingTiers = ({
data,
}: {
data: ReturnType<typeof useReferralProgram>['stakingTiers'];
}) => (
<>
{data.map(({ tier, referralRewardMultiplier, minimumStakedTokens }, i) => (
<StakingTier
key={i}
tier={tier}
max={data.length}
referralRewardMultiplier={referralRewardMultiplier}
minimumStakedTokens={minimumStakedTokens}
/>
))}
</>
);
const TiersTable = ({
data,
windowLength,
}: {
data: Array<{
tier: number;
tierElement: ReactNode;
commission: string;
discount: string;
volume: string;
}>;
windowLength?: number;
}) => {
const t = useT();
return (
<Table
columns={[
{ name: 'tierElement', displayName: t('Tier') },
{
name: 'commission',
displayName: t('Referrer commission'),
tooltip: t(
"The proportion of the referee's taker fees to be rewarded to the referrer"
),
},
{
name: 'discount',
displayName: t('Referee trading discount'),
tooltip: t(
"The proportion of the referee's taker fees to be discounted"
),
},
{
name: 'volume',
displayName: t(
'minTradingVolume',
'Min. trading volume (last {{count}} epochs)',
{
count: windowLength,
}
),
tooltip: t('The minimum running notional for the given benefit tier'),
},
{
name: 'epochs',
displayName: t('Min. epochs'),
tooltip: t(
'The minimum number of epochs the party needs to be in the referral set to be eligible for the benefit'
),
},
]}
className="bg-white dark:bg-vega-cdark-900"
data={data.map((d) => ({
...d,
className: classNames(getTierGradient(d.tier, data.length)),
}))}
/>
);
};