LaconicNetwork/vega-frontend-monorepo
6
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

chore(trading): referrals texts tweaks

Browse Source
This commit is contained in:
asiaznik
2023-11-30 20:21:24 +01:00
parent e06f4818fc
commit d09ae9c481
7 changed files with 138 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/trading/client-pages/referrals/apply-code-form.tsx
+3 -1
View File
@@ -236,7 +236,9 @@ export const ApplyCodeForm = () => {
{t('Apply a referral code')}
</h3>
<p className="mb-4 text-center text-base">
{t('Enter a referral code to get trading discounts.')}
{t(
'Apply a referral code to access the discount benefits of the current program.'
)}
</p>
<form
className={classNames('flex w-full flex-col gap-4', {
apps/trading/client-pages/referrals/create-code-form.tsx
+2 -2
View File
@@ -48,7 +48,7 @@ export const CreateCodeForm = () => {
</h3>
<p className="mb-4 text-center text-base">
{t(
'Generate a referral code to share with your friends and start earning commission.'
'Generate a referral code to share with your friends and access the commission benefits of the current program.'
)}
</p>
@@ -268,7 +268,7 @@ const CreateCodeDialog = ({
{(status === 'idle' || status === 'loading' || status === 'error') && (
<p>
{t(
'Generate a referral code to share with your friends and start earning commission.'
'Generate a referral code to share with your friends and access the commission benefits of the current program.'
)}
</p>
)}
apps/trading/client-pages/referrals/hooks/use-referral-program.ts
-7
View File
@@ -4,12 +4,6 @@ import sortBy from 'lodash/sortBy';
import omit from 'lodash/omit';
import { useReferralProgramQuery } from './__generated__/CurrentReferralProgram';
const STAKING_TIERS_MAPPING: Record<number, string> = {
1: 'Tradestarter',
2: 'Mid level degen',
3: 'Reward hoarder',
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const MOCK = {
data: {
@@ -96,7 +90,6 @@ export const useReferralProgram = () => {
).map((t, i) => {
return {
tier: i + 1,
label: STAKING_TIERS_MAPPING[i + 1],
...t,
};
});
apps/trading/client-pages/referrals/landing-banner.tsx
+7 -2
View File
@@ -15,11 +15,16 @@ export const LandingBanner = () => {
</div>
<div className="pt-20 sm:w-[50%]">
<h1 className="text-6xl font-alpha calt mb-10">
{t('Earn commission & stake rewards')}
{t('Vega Community Referral Program')}
</h1>
<p className="text-lg mb-1">
{t(
'Referral programs can be proposed and created via Community governance.'
)}
</p>
<p className="text-lg mb-10">
{t(
'Invite friends and earn rewards from the trading fees they pay. Stake those rewards to earn multipliers on future rewards.'
'Once live, users can generate referral codes to share with their friends and earn commission on their trades, while referred traders can access fee discounts based on the running volume of the group.'
)}
</p>
</div>
apps/trading/client-pages/referrals/referral-statistics.tsx
+3 -4
View File
@@ -10,7 +10,6 @@ import {
import { useVegaWallet } from '@vegaprotocol/wallet';
import { DEFAULT_AGGREGATION_DAYS, useReferral } from './hooks/use-referral';
import { CreateCodeContainer } from './create-code-form';
import classNames from 'classnames';
import { Table } from './table';
import {
@@ -32,7 +31,7 @@ import BigNumber from 'bignumber.js';
import { DocsLinks } from '@vegaprotocol/environment';
import { useT, ns } from '../../lib/use-t';
import { Trans } from 'react-i18next';
import { ApplyCodeForm } from './apply-code-form';
import { ApplyCodeForm, ApplyCodeFormContainer } from './apply-code-form';
export const ReferralStatistics = () => {
const { pubKey } = useVegaWallet();
@@ -53,7 +52,7 @@ export const ReferralStatistics = () => {
if (referee?.code) {
return (
<>
<Statistics data={referee} program={program} as="referee" />;
<Statistics data={referee} program={program} as="referee" />
{!referee.isEligible && <ApplyCodeForm />}
</>
);
@@ -68,7 +67,7 @@ export const ReferralStatistics = () => {
);
}
return <CreateCodeContainer />;
return <ApplyCodeFormContainer />;
};
export const useStats = ({
apps/trading/client-pages/referrals/referrals.tsx
+6 -8
View File
@@ -4,11 +4,10 @@ import {
VegaIcon,
VegaIconNames,
} from '@vegaprotocol/ui-toolkit';
import { HowItWorksTable } from './how-it-works-table';
import { LandingBanner } from './landing-banner';
import { TiersContainer } from './tiers';
import { TabLink } from './buttons';
import { Outlet } from 'react-router-dom';
import { Outlet, useMatch } from 'react-router-dom';
import { Routes } from '../../lib/links';
import { useVegaWallet } from '@vegaprotocol/wallet';
import { useReferral } from './hooks/use-referral';
@@ -21,12 +20,13 @@ import { useT } from '../../lib/use-t';
const Nav = () => {
const t = useT();
const match = useMatch(Routes.REFERRALS_APPLY_CODE);
return (
<div className="flex justify-center border-b border-vega-cdark-500">
<TabLink end to={Routes.REFERRALS}>
{t('I want a code')}
<TabLink end to={match ? Routes.REFERRALS_APPLY_CODE : Routes.REFERRALS}>
{t('Apply code')}
</TabLink>
<TabLink to={Routes.REFERRALS_APPLY_CODE}>{t('I have a code')}</TabLink>
<TabLink to={Routes.REFERRALS_CREATE_CODE}>{t('Create code')}</TabLink>
</div>
);
};
@@ -95,15 +95,13 @@ export const Referrals = () => {
<h2 className="text-2xl">{t('How it works')}</h2>
</div>
<div className="md:w-[60%] mx-auto">
<HowItWorksTable />
<div className="mt-5">
<TradingAnchorButton
className="mx-auto w-max"
href={REFERRAL_DOCS_LINK}
target="_blank"
>
{t('Read the terms')}{' '}
<VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
{t('Read the docs')} <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
</TradingAnchorButton>
</div>
</div>
apps/trading/client-pages/referrals/tiers.tsx
+117 -66
View File
@@ -5,10 +5,11 @@ import classNames from 'classnames';
import { BORDER_COLOR, GRADIENT } from './constants';
import { Tag } from './tag';
import type { ComponentProps, ReactNode } from 'react';
import { ExternalLink } from '@vegaprotocol/ui-toolkit';
import { ExternalLink, truncateMiddle } from '@vegaprotocol/ui-toolkit';
import {
DApp,
DocsLinks,
TOKEN_PROPOSAL,
TOKEN_PROPOSALS,
useLinks,
} from '@vegaprotocol/environment';
@@ -28,12 +29,10 @@ const Loading = ({ variant }: { variant: 'large' | 'inline' }) => (
const StakingTier = ({
tier,
label,
referralRewardMultiplier,
minimumStakedTokens,
}: {
tier: number;
label: string;
referralRewardMultiplier: string;
minimumStakedTokens: string;
}) => {
@@ -49,30 +48,38 @@ const StakingTier = ({
'overflow-hidden',
'border rounded-md w-full',
'flex flex-row',
'bg-white dark:bg-vega-cdark-900',
GRADIENT,
BORDER_COLOR
)}
>
<div aria-hidden className="max-w-[120px]">
{tier < 4 && (
// eslint-disable-next-line @next/next/no-img-element
<img
src={`/${tier}x.png`}
alt={`${referralRewardMultiplier}x multiplier`}
width={240}
height={240}
className="w-full h-full"
/>
<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>
<div className={classNames('p-3')}>
<Tag color={color[tier]}>Multiplier {referralRewardMultiplier}x</Tag>
<h3 className="mt-1 mb-1 text-base">{label}</h3>
<p className="text-sm text-vega-clight-100 dark:text-vega-cdark-100">
{t('Stake a minimum of {{minimumStakedTokens}} $VEGA tokens', {
minimumStakedTokens,
})}
</p>
<div
className={classNames(
'p-3 flex flex-row min-h-[80px] h-full items-center'
)}
>
<div>
<Tag color={color[tier]}>Multiplier {referralRewardMultiplier}x</Tag>
<p className="mt-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100">
{t('Stake a minimum of {{minimumStakedTokens}} $VEGA tokens', {
minimumStakedTokens,
})}
</p>
</div>
</div>
</div>
);
@@ -116,47 +123,93 @@ export const TiersContainer = () => {
return (
<>
{/* Benefit tiers */}
<div className="flex flex-col items-baseline justify-between mt-10 mb-5">
<h2 className="text-2xl">{t('Referral tiers')}</h2>
<h2 className="text-3xl mt-10">{t('Current Program Details')}</h2>
{details?.id && (
<p>
<Trans
defaults="As a result of <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 className="text-sm text-vega-clight-200 dark:text-vega-cdark-200">
<span>
{t('Program ends:')} {ends}
</span>
)}
</div>
<div className="mb-20">
{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-row items-baseline justify-between mb-5">
<h2 className="text-2xl">{t('Staking multipliers')}</h2>
</div>
<div className="mb-20 flex flex-col justify-items-stretch lg:flex-row gap-5">
{loading || !stakingTiers || stakingTiers.length === 0 ? (
<>
{/* Container */}
<div className="bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white rounded-lg 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" />
<Loading variant="large" />
<Loading variant="large" />
</>
) : (
<StakingTiers data={stakingTiers} />
)}
) : (
<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="flex flex-col justify-items-stretch lg:flex-row gap-5">
{loading || !stakingTiers || stakingTiers.length === 0 ? (
<>
<Loading variant="large" />
<Loading variant="large" />
<Loading variant="large" />
</>
) : (
<StakingTiers data={stakingTiers} />
)}
</div>
</div>
</>
);
@@ -168,17 +221,14 @@ const StakingTiers = ({
data: ReturnType<typeof useReferralProgram>['stakingTiers'];
}) => (
<>
{data.map(
({ tier, label, referralRewardMultiplier, minimumStakedTokens }, i) => (
<StakingTier
key={i}
tier={tier}
label={label}
referralRewardMultiplier={referralRewardMultiplier}
minimumStakedTokens={minimumStakedTokens}
/>
)
)}
{data.map(({ tier, referralRewardMultiplier, minimumStakedTokens }, i) => (
<StakingTier
key={i}
tier={tier}
referralRewardMultiplier={referralRewardMultiplier}
minimumStakedTokens={minimumStakedTokens}
/>
))}
</>
);
@@ -218,6 +268,7 @@ const TiersTable = ({
},
{ name: 'epochs', displayName: t('Min. epochs') },
]}
className="bg-white dark:bg-vega-cdark-900"
data={data.map((d) => ({
...d,
className: classNames({