3a27172e04
* feat: add enviromnemt provider to the ui-toolkit * chore: replace etherscan links * chore: wrap trading app into environment provider * chore: move env provider to react-helpers and wrap every app * chore: remove more env variables from libs and replace them with the env hook * fix: lint * fix: update readme with correct formatting command * fix: warnings for web3 hook * fix: wrap warning in conditional, print message only when env keys are missing * fix: incorrect condition on deposit manager fauceting param Co-authored-by: Matthew Russell <mattrussell36@gmail.com> * fix: cleanup token app ethereum config * chore: add better error handling to the useEnvironment hook * fix: lint * fix: formatting * fix: more lint * fix: throw error if required env variables are missing * fix: remove default eth chain id * fix: add back etherscan testid to withdrawals links * fix: imports * fix: try using babel jest for smart contracts test transpilation * fix: uniform ts syntax * chore: set resolveJsonModule in base tsconfig * fix: add missing data-ids for etherscan links Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
import { useOutletContext } from 'react-router-dom';
|
|
import type { Tranche, EthereumChainId } from '@vegaprotocol/smart-contracts';
|
|
import { useWeb3React } from '@web3-react/core';
|
|
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { TrancheItem } from '../redemption/tranche-item';
|
|
import { TrancheLabel } from './tranche-label';
|
|
import { VestingChart } from './vesting-chart';
|
|
import { Button } from '@vegaprotocol/ui-toolkit';
|
|
import { useEnvironment } from '@vegaprotocol/react-helpers';
|
|
|
|
const trancheMinimum = 10;
|
|
|
|
const shouldShowTranche = (t: Tranche) =>
|
|
!t.total_added.isLessThanOrEqualTo(trancheMinimum);
|
|
|
|
export const Tranches = () => {
|
|
const { ADDRESSES } = useEnvironment();
|
|
const tranches = useOutletContext<Tranche[]>();
|
|
const [showAll, setShowAll] = React.useState<boolean>(false);
|
|
const { t } = useTranslation();
|
|
const { chainId } = useWeb3React();
|
|
const filteredTranches = tranches?.filter(shouldShowTranche) || [];
|
|
|
|
return (
|
|
<section>
|
|
<h2 className="text-h4">{t('chartTitle')}</h2>
|
|
<p className="mb-12">{t('chartAbove')}</p>
|
|
<VestingChart />
|
|
<p className="mb-12">{t('chartBelow')}</p>
|
|
{tranches?.length ? (
|
|
<ul role="list">
|
|
{(showAll ? tranches : filteredTranches).map((tranche) => {
|
|
return (
|
|
<React.Fragment key={tranche.tranche_id}>
|
|
<TrancheItem
|
|
link={`${tranche.tranche_id}`}
|
|
tranche={tranche}
|
|
locked={tranche.locked_amount}
|
|
unlocked={tranche.total_added.minus(tranche.locked_amount)}
|
|
total={tranche.total_added}
|
|
secondaryHeader={
|
|
<TrancheLabel
|
|
contract={ADDRESSES.vestingAddress}
|
|
chainId={`0x${chainId}` as EthereumChainId}
|
|
id={tranche.tranche_id}
|
|
/>
|
|
}
|
|
/>
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</ul>
|
|
) : (
|
|
<p>{t('No tranches')}</p>
|
|
)}
|
|
<section className="text-center mt-32">
|
|
<Button variant="inline-link" onClick={() => setShowAll(!showAll)}>
|
|
{showAll
|
|
? t(
|
|
'Showing tranches with <{{trancheMinimum}} VEGA, click to hide these tranches',
|
|
{ trancheMinimum }
|
|
)
|
|
: t(
|
|
'Not showing tranches with <{{trancheMinimum}} VEGA, click to show all tranches',
|
|
{ trancheMinimum }
|
|
)}
|
|
</Button>
|
|
</section>
|
|
</section>
|
|
);
|
|
};
|