2022-04-20 19:37:44 +00:00
|
|
|
import { gql, useQuery } from '@apollo/client';
|
|
|
|
import React from 'react';
|
|
|
|
import { Trans, useTranslation } from 'react-i18next';
|
|
|
|
import { Link } from 'react-router-dom';
|
|
|
|
|
|
|
|
import { Heading } from '../../components/heading';
|
|
|
|
import { Links } from '../../config';
|
|
|
|
import { useAppState } from '../../contexts/app-state/app-state-context';
|
|
|
|
import { useDocumentTitle } from '../../hooks/use-document-title';
|
|
|
|
import { BigNumber } from '../../lib/bignumber';
|
|
|
|
import type { RouteChildProps } from '..';
|
2022-08-10 08:50:15 +00:00
|
|
|
import Routes from '../routes';
|
2022-04-20 19:37:44 +00:00
|
|
|
import type { NodeData } from './__generated__/NodeData';
|
|
|
|
import { TokenDetails } from './token-details';
|
|
|
|
import { Button } from '@vegaprotocol/ui-toolkit';
|
|
|
|
|
|
|
|
export const TOTAL_STAKED_QUERY = gql`
|
|
|
|
query NodeData {
|
|
|
|
nodeData {
|
|
|
|
stakedTotal
|
|
|
|
stakedTotalFormatted @client
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Home = ({ name }: RouteChildProps) => {
|
|
|
|
useDocumentTitle(name);
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const { appState } = useAppState();
|
|
|
|
const { data } = useQuery<NodeData>(TOTAL_STAKED_QUERY);
|
|
|
|
const totalStaked = React.useMemo(() => {
|
|
|
|
return new BigNumber(data?.nodeData?.stakedTotalFormatted || '0');
|
|
|
|
}, [data]);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
2022-06-07 18:24:43 +00:00
|
|
|
<Heading title={t('pageTitleHome')} />
|
2022-05-13 11:12:30 +00:00
|
|
|
<HomeSection>
|
|
|
|
<TokenDetails
|
|
|
|
totalSupply={appState.totalSupply}
|
|
|
|
totalStaked={totalStaked}
|
2022-04-20 19:37:44 +00:00
|
|
|
/>
|
2022-05-13 11:12:30 +00:00
|
|
|
</HomeSection>
|
|
|
|
<HomeSection>
|
2022-06-28 13:41:43 +00:00
|
|
|
<h2>{t('Token Vesting')}</h2>
|
|
|
|
<p>
|
2022-05-13 11:12:30 +00:00
|
|
|
{t(
|
|
|
|
'The vesting contract holds VEGA tokens until they have become unlocked.'
|
|
|
|
)}
|
|
|
|
</p>
|
2022-06-28 13:41:43 +00:00
|
|
|
<p>
|
2022-05-13 11:12:30 +00:00
|
|
|
<Trans
|
|
|
|
i18nKey="Tokens are held in different <trancheLink>Tranches</trancheLink>. Each tranche has its own schedule for how the tokens are unlocked."
|
|
|
|
components={{
|
2022-06-24 13:24:49 +00:00
|
|
|
trancheLink: (
|
2022-06-24 14:26:16 +00:00
|
|
|
<Link
|
|
|
|
data-testid="tranches-link"
|
|
|
|
to={Routes.TRANCHES}
|
|
|
|
className="underline text-white"
|
|
|
|
/>
|
2022-06-24 13:24:49 +00:00
|
|
|
),
|
2022-05-13 11:12:30 +00:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</p>
|
2022-06-28 13:41:43 +00:00
|
|
|
<p>
|
2022-05-13 11:12:30 +00:00
|
|
|
{t(
|
|
|
|
'Once unlocked they can be redeemed from the contract so that you can transfer them between wallets.'
|
|
|
|
)}
|
|
|
|
</p>
|
|
|
|
<Link to={Routes.VESTING}>
|
2022-06-24 13:24:49 +00:00
|
|
|
<Button variant="secondary" data-testid="check-vesting-page-btn">
|
2022-05-13 11:12:30 +00:00
|
|
|
{t('Check to see if you can redeem unlocked VEGA tokens')}
|
|
|
|
</Button>
|
2022-04-20 19:37:44 +00:00
|
|
|
</Link>
|
2022-05-13 11:12:30 +00:00
|
|
|
</HomeSection>
|
|
|
|
<HomeSection>
|
2022-06-28 13:41:43 +00:00
|
|
|
<h2 className="uppercase">{t('Use your Vega tokens')}</h2>
|
|
|
|
<p>
|
2022-05-13 11:12:30 +00:00
|
|
|
{t(
|
|
|
|
'To use your tokens on the Vega network they need to be associated with a Vega wallet/key.'
|
|
|
|
)}
|
|
|
|
</p>
|
2022-06-28 13:41:43 +00:00
|
|
|
<p>
|
2022-05-13 11:12:30 +00:00
|
|
|
{t(
|
|
|
|
'This can happen both while held in the vesting contract as well as when redeemed.'
|
|
|
|
)}
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<a
|
2022-06-24 13:24:49 +00:00
|
|
|
data-testid="get-vega-wallet-link"
|
2022-07-18 11:35:44 +00:00
|
|
|
href={Links.WALLET_PAGE}
|
2022-06-07 18:24:43 +00:00
|
|
|
className="underline text-white"
|
2022-05-13 11:12:30 +00:00
|
|
|
target="_blank"
|
|
|
|
rel="nofollow noreferrer"
|
|
|
|
>
|
|
|
|
{t('Get a Vega wallet')}
|
|
|
|
</a>
|
|
|
|
</p>
|
2022-06-24 13:24:49 +00:00
|
|
|
<p>
|
2022-06-07 18:24:43 +00:00
|
|
|
<Link
|
2022-06-24 13:24:49 +00:00
|
|
|
data-testid="associate-vega-tokens-link-on-homepage"
|
2022-06-07 18:24:43 +00:00
|
|
|
to={`${Routes.STAKING}/associate`}
|
|
|
|
className="underline text-white"
|
|
|
|
>
|
2022-05-13 11:12:30 +00:00
|
|
|
{t('Associate VEGA tokens')}
|
|
|
|
</Link>
|
|
|
|
</p>
|
|
|
|
</HomeSection>
|
2022-06-07 18:24:43 +00:00
|
|
|
<div className="flex gap-40">
|
|
|
|
<div className="flex-1">
|
2022-05-13 11:12:30 +00:00
|
|
|
<HomeSection>
|
2022-06-28 13:41:43 +00:00
|
|
|
<h2>{t('Staking')}</h2>
|
|
|
|
<p>
|
2022-05-13 11:12:30 +00:00
|
|
|
{t(
|
|
|
|
'VEGA token holders can nominate a validator node and receive staking rewards.'
|
|
|
|
)}
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<Link to={Routes.STAKING}>
|
2022-06-24 13:24:49 +00:00
|
|
|
<Button
|
|
|
|
variant="secondary"
|
|
|
|
data-testid="staking-button-on-homepage"
|
|
|
|
>
|
|
|
|
{t('Nominate a validator')}
|
|
|
|
</Button>
|
2022-05-13 11:12:30 +00:00
|
|
|
</Link>
|
|
|
|
</p>
|
|
|
|
</HomeSection>
|
2022-04-20 19:37:44 +00:00
|
|
|
</div>
|
2022-06-07 18:24:43 +00:00
|
|
|
<div className="flex-1">
|
2022-05-13 11:12:30 +00:00
|
|
|
<HomeSection>
|
2022-06-28 13:41:43 +00:00
|
|
|
<h2>{t('Governance')}</h2>
|
|
|
|
<p>
|
2022-05-13 11:12:30 +00:00
|
|
|
{t(
|
|
|
|
'VEGA token holders can vote on proposed changes to the network and create proposals.'
|
|
|
|
)}
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<Link to={Routes.GOVERNANCE}>
|
2022-06-24 13:24:49 +00:00
|
|
|
<Button
|
|
|
|
variant="secondary"
|
|
|
|
data-testid="governance-button-on-homepage"
|
|
|
|
>
|
2022-05-13 11:12:30 +00:00
|
|
|
{t('View Governance proposals')}
|
|
|
|
</Button>
|
|
|
|
</Link>
|
|
|
|
</p>
|
|
|
|
</HomeSection>
|
2022-04-20 19:37:44 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Home;
|
2022-05-13 11:12:30 +00:00
|
|
|
|
|
|
|
export const HomeSection = ({ children }: { children: React.ReactNode }) => {
|
2022-06-28 13:41:43 +00:00
|
|
|
return <section className="mb-28">{children}</section>;
|
2022-05-13 11:12:30 +00:00
|
|
|
};
|