feat(governance): remove graph from tranches page (#3049)
This commit is contained in:
parent
a8401d4c6f
commit
79b0868ff7
@ -552,9 +552,6 @@
|
|||||||
"resourceNotFound": "Resource Not Found",
|
"resourceNotFound": "Resource Not Found",
|
||||||
"Or": "Or",
|
"Or": "Or",
|
||||||
"addTokenToWallet": "Show this token in your Ethereum wallet",
|
"addTokenToWallet": "Show this token in your Ethereum wallet",
|
||||||
"chartBelow": "*Certain activities, for example community incentive tokens, do not have specific dates to be credited and so an approximation has been used. ",
|
|
||||||
"chartTitle": "Token unlocking schedule",
|
|
||||||
"chartAbove": "This chart shows the approximate* schedule for how tokens will unlock from vesting tranches over time.",
|
|
||||||
"date": "Date",
|
"date": "Date",
|
||||||
"noEthereumProviderError": "No Ethereum browser extension detected, install MetaMask on desktop or visit from a dApp browser on mobile",
|
"noEthereumProviderError": "No Ethereum browser extension detected, install MetaMask on desktop or visit from a dApp browser on mobile",
|
||||||
"unsupportedChainIdError": "You're connected to an unsupported network",
|
"unsupportedChainIdError": "You're connected to an unsupported network",
|
||||||
|
@ -1,15 +1,12 @@
|
|||||||
import { useWeb3React } from '@web3-react/core';
|
import { useWeb3React } from '@web3-react/core';
|
||||||
import React from 'react';
|
import { useState } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import { SubHeading } from '../../components/heading';
|
|
||||||
import { TrancheItem } from '../redemption/tranche-item';
|
|
||||||
import { TrancheLabel } from './tranche-label';
|
|
||||||
import { VestingChart } from './vesting-chart';
|
|
||||||
import { ButtonLink } from '@vegaprotocol/ui-toolkit';
|
import { ButtonLink } from '@vegaprotocol/ui-toolkit';
|
||||||
import { useEthereumConfig } from '@vegaprotocol/web3';
|
import { useEthereumConfig } from '@vegaprotocol/web3';
|
||||||
import type { Tranche } from '../../lib/tranches/tranches-store';
|
import { TrancheItem } from '../redemption/tranche-item';
|
||||||
|
import { TrancheLabel } from './tranche-label';
|
||||||
import { useTranches } from '../../lib/tranches/tranches-store';
|
import { useTranches } from '../../lib/tranches/tranches-store';
|
||||||
|
import type { Tranche } from '../../lib/tranches/tranches-store';
|
||||||
|
|
||||||
const trancheMinimum = 10;
|
const trancheMinimum = 10;
|
||||||
|
|
||||||
@ -18,7 +15,7 @@ const shouldShowTranche = (t: Tranche) =>
|
|||||||
|
|
||||||
export const Tranches = () => {
|
export const Tranches = () => {
|
||||||
const tranches = useTranches((state) => state.tranches);
|
const tranches = useTranches((state) => state.tranches);
|
||||||
const [showAll, setShowAll] = React.useState<boolean>(false);
|
const [showAll, setShowAll] = useState<boolean>(false);
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { chainId } = useWeb3React();
|
const { chainId } = useWeb3React();
|
||||||
const { config } = useEthereumConfig();
|
const { config } = useEthereumConfig();
|
||||||
@ -30,10 +27,6 @@ export const Tranches = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section>
|
<section>
|
||||||
<SubHeading title={t('chartTitle')} />
|
|
||||||
<p>{t('chartAbove')}</p>
|
|
||||||
<VestingChart />
|
|
||||||
<p>{t('chartBelow')}</p>
|
|
||||||
{tranches?.length ? (
|
{tranches?.length ? (
|
||||||
<ul role="list">
|
<ul role="list">
|
||||||
{(showAll ? tranches : filteredTranches).map((tranche) => {
|
{(showAll ? tranches : filteredTranches).map((tranche) => {
|
||||||
@ -55,6 +48,7 @@ export const Tranches = () => {
|
|||||||
) : (
|
) : (
|
||||||
<p>{t('No tranches')}</p>
|
<p>{t('No tranches')}</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<section className="text-center mt-4">
|
<section className="text-center mt-4">
|
||||||
<ButtonLink onClick={() => setShowAll(!showAll)}>
|
<ButtonLink onClick={() => setShowAll(!showAll)}>
|
||||||
{showAll
|
{showAll
|
||||||
|
@ -1,149 +0,0 @@
|
|||||||
import { format, startOfMonth } from 'date-fns';
|
|
||||||
import React from 'react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import {
|
|
||||||
Area,
|
|
||||||
AreaChart,
|
|
||||||
Label,
|
|
||||||
Legend,
|
|
||||||
ReferenceLine,
|
|
||||||
ResponsiveContainer,
|
|
||||||
Tooltip,
|
|
||||||
XAxis,
|
|
||||||
YAxis,
|
|
||||||
} from 'recharts';
|
|
||||||
import colors from 'tailwindcss/colors';
|
|
||||||
|
|
||||||
import { DATE_FORMAT_LONG } from '../../lib/date-formats';
|
|
||||||
import data from './data.json';
|
|
||||||
|
|
||||||
import { theme } from '@vegaprotocol/tailwindcss-config';
|
|
||||||
const Colors = theme.colors;
|
|
||||||
|
|
||||||
const ORDER = ['community', 'publicSale', 'earlyInvestors', 'team'];
|
|
||||||
|
|
||||||
export const VestingChart = () => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const currentDate = React.useMemo(
|
|
||||||
() => format(startOfMonth(new Date()), DATE_FORMAT_LONG),
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
return (
|
|
||||||
<div style={{ marginBottom: 25 }}>
|
|
||||||
<ResponsiveContainer height={400} width="100%">
|
|
||||||
<AreaChart data={data}>
|
|
||||||
<defs>
|
|
||||||
{[
|
|
||||||
['pink', Colors.vega.pink.DEFAULT],
|
|
||||||
['green', Colors.vega.green.DEFAULT],
|
|
||||||
['orange', Colors.warning],
|
|
||||||
['yellow', Colors.vega.yellow.DEFAULT],
|
|
||||||
].map(([key, color]) => (
|
|
||||||
<linearGradient key={key} id={key} x1="0" y1="0" x2="0" y2="1">
|
|
||||||
<stop offset="0%" stopColor={color} stopOpacity={0.85} />
|
|
||||||
<stop offset="100%" stopColor={color} stopOpacity={0} />
|
|
||||||
</linearGradient>
|
|
||||||
))}
|
|
||||||
</defs>
|
|
||||||
<Tooltip
|
|
||||||
contentStyle={{ backgroundColor: colors.black }}
|
|
||||||
separator=":"
|
|
||||||
// @ts-ignore formatter doesnt seem to allow returning JSX but nonetheless it works
|
|
||||||
formatter={(value: number) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
textAlign: 'right',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{Intl.NumberFormat().format(value)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
||||||
itemSorter={(label: any) => {
|
|
||||||
return ORDER.indexOf(label.dataKey) + 1;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<YAxis type="number" width={100}>
|
|
||||||
<Label
|
|
||||||
angle={270}
|
|
||||||
value={t('VEGA').toString()}
|
|
||||||
position="left"
|
|
||||||
offset={-5}
|
|
||||||
fill={colors.white}
|
|
||||||
/>
|
|
||||||
</YAxis>
|
|
||||||
<XAxis dataKey="date">
|
|
||||||
<Label
|
|
||||||
value={t('date').toString()}
|
|
||||||
position="bottom"
|
|
||||||
offset={5}
|
|
||||||
fill={colors.white}
|
|
||||||
/>
|
|
||||||
</XAxis>
|
|
||||||
<ReferenceLine
|
|
||||||
x={currentDate}
|
|
||||||
stroke={colors.white}
|
|
||||||
strokeWidth={2}
|
|
||||||
label={{
|
|
||||||
position: 'left',
|
|
||||||
value: currentDate,
|
|
||||||
fill: colors.white,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
dot={false}
|
|
||||||
type="linear"
|
|
||||||
dataKey="team"
|
|
||||||
stroke={Colors.vega.pink.DEFAULT}
|
|
||||||
fill="url(#pink)"
|
|
||||||
yAxisId={0}
|
|
||||||
strokeWidth={2}
|
|
||||||
fillOpacity={0.85}
|
|
||||||
stackId="1"
|
|
||||||
name={t('Team')}
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
dot={false}
|
|
||||||
type="monotone"
|
|
||||||
dataKey="earlyInvestors"
|
|
||||||
stroke={Colors.vega.green.DEFAULT}
|
|
||||||
fill="url(#green)"
|
|
||||||
yAxisId={0}
|
|
||||||
strokeWidth={2}
|
|
||||||
fillOpacity={0.85}
|
|
||||||
stackId="1"
|
|
||||||
name={t('Early Investors')}
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
dot={false}
|
|
||||||
type="monotone"
|
|
||||||
dataKey="publicSale"
|
|
||||||
stroke={Colors.vega.yellow.DEFAULT}
|
|
||||||
fill="url(#yellow)"
|
|
||||||
yAxisId={0}
|
|
||||||
strokeWidth={2}
|
|
||||||
stackId="1"
|
|
||||||
fillOpacity={0.85}
|
|
||||||
name={t('Public Sale')}
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
dot={false}
|
|
||||||
type="monotone"
|
|
||||||
dataKey="community"
|
|
||||||
stroke={Colors.warning}
|
|
||||||
fill="url(#orange)"
|
|
||||||
yAxisId={0}
|
|
||||||
strokeWidth={2}
|
|
||||||
fillOpacity={0.85}
|
|
||||||
stackId="1"
|
|
||||||
name={t('Community')}
|
|
||||||
/>
|
|
||||||
<Legend wrapperStyle={{ position: 'relative' }} />
|
|
||||||
</AreaChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
Loading…
Reference in New Issue
Block a user