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

feat(governance): remove graph from tranches page (#3049)

Browse Source
This commit is contained in:
Sam Keen 2023-03-02 14:35:46 +00:00 committed by GitHub
parent a8401d4c6f
commit 79b0868ff7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/governance/src/i18n/translations/dev.json
View File

@ -552,9 +552,6 @@
"resourceNotFound": "Resource Not Found",
"Or": "Or",
"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",
"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",

18
apps/governance/src/routes/tranches/tranches.tsx
View File

@ -1,15 +1,12 @@
import { useWeb3React } from '@web3-react/core';
import React from 'react';
import { useState } from 'react';
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 { 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 type { Tranche } from '../../lib/tranches/tranches-store';
const trancheMinimum = 10;
@ -18,7 +15,7 @@ const shouldShowTranche = (t: Tranche) =>
export const Tranches = () => {
const tranches = useTranches((state) => state.tranches);
const [showAll, setShowAll] = React.useState<boolean>(false);
const [showAll, setShowAll] = useState<boolean>(false);
const { t } = useTranslation();
const { chainId } = useWeb3React();
const { config } = useEthereumConfig();
@ -30,10 +27,6 @@ export const Tranches = () => {
return (
<section>
<SubHeading title={t('chartTitle')} />
<p>{t('chartAbove')}</p>
<VestingChart />
<p>{t('chartBelow')}</p>
{tranches?.length ? (
<ul role="list">
{(showAll ? tranches : filteredTranches).map((tranche) => {
@ -55,6 +48,7 @@ export const Tranches = () => {
) : (
<p>{t('No tranches')}</p>
)}
<section className="text-center mt-4">
<ButtonLink onClick={() => setShowAll(!showAll)}>
{showAll

149
apps/governance/src/routes/tranches/vesting-chart.tsx
View File

@ -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>
);
};