60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import {
|
|
TradingAnchorButton,
|
|
VegaIcon,
|
|
VegaIconNames,
|
|
} from '@vegaprotocol/ui-toolkit';
|
|
import { HowItWorksTable } from './how-it-works-table';
|
|
import { LandingBanner } from './landing-banner';
|
|
import { TiersContainer } from './tiers';
|
|
import { RainbowTabLink } from './buttons';
|
|
import { Outlet } from 'react-router-dom';
|
|
import { Routes } from '../../lib/links';
|
|
import { useVegaWallet } from '@vegaprotocol/wallet';
|
|
import { useReferral } from './hooks/use-referral';
|
|
|
|
export const Referrals = () => {
|
|
const { pubKey } = useVegaWallet();
|
|
const { data: referee } = useReferral(pubKey, 'referee');
|
|
const { data: referrer } = useReferral(pubKey, 'referrer');
|
|
|
|
return (
|
|
<>
|
|
<LandingBanner />
|
|
<div>
|
|
<div className="flex justify-center">
|
|
<RainbowTabLink end to={Routes.REFERRALS}>
|
|
Your referrals
|
|
</RainbowTabLink>
|
|
<RainbowTabLink
|
|
disabled={Boolean(referee || referrer)}
|
|
to={Routes.REFERRALS_APPLY_CODE}
|
|
>
|
|
Apply a code
|
|
</RainbowTabLink>
|
|
</div>
|
|
<div className="py-16 border-t border-b border-vega-cdark-500">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
|
|
<TiersContainer />
|
|
|
|
<div className="mt-10 mb-5 text-center">
|
|
<h2 className="text-2xl">How it works</h2>
|
|
</div>
|
|
<div className="md:w-[60%] mx-auto">
|
|
<HowItWorksTable />
|
|
<div className="mt-5">
|
|
<TradingAnchorButton
|
|
className="mx-auto w-max"
|
|
href="https://docs.vega.xyz/"
|
|
target="_blank"
|
|
>
|
|
Read the terms <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
|
|
</TradingAnchorButton>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|