vega-frontend-monorepo/apps/token/src/routes/rewards/home/reward-info.tsx
Sam Keen 7c8a54b35a
feat(1263): split validator page into separate tables (#2250)
* frontend-monorepo-1263 validator status of pending now named 'candidate' in the ui

* feat(1263): validator table updates, calculating penalties

* feat(1263): bit of cleanup

* feat(1263): tables built and values derived

* feat(1263): tweaks

* feat(1263): upping site max width to 1500px

* feat(1263): tweak to normalised voting power column width

* feat(1263): ensure validator rows when hovered have cursor:pointer

* feat(1263): consensus validators now have a ranking field by voting power shown in the table

* feat(1263): fixed linting errors

* feat(1263): a couple of extra tests and correct import of schema to use enums

* Update apps/token/src/routes/staking/home/validator-tables/standby-pending-validators-table.tsx

Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>

* Update apps/token/src/routes/staking/home/validator-tables/validator-tables.tsx

Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>

* Update apps/token/src/routes/staking/home/validator-tables/validator-tables.tsx

Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>

* Update apps/token/src/routes/staking/home/validator-tables/validator-tables.tsx

Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>

* feat(1263): tweaks from PR comments, initial push of util to remove 'node' from arrs

* feat(1263): updated new util to remove 'node' from 'edges'. Implemented across the monorepo

* feat(1263): cleaned up splitting validators into consensus, pending and ersatz to put into tables

* feat(1263): used decimals from app state in validator-tables.tsx

* feat(1263): removed redundant compact import

Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>
2022-11-30 12:55:30 +00:00

130 lines
3.4 KiB
TypeScript

import { format } from 'date-fns';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { KeyValueTable, KeyValueTableRow } from '@vegaprotocol/ui-toolkit';
import { BigNumber } from '../../../lib/bignumber';
import { DATE_FORMAT_DETAILED } from '../../../lib/date-formats';
import type {
RewardsQuery,
RewardFieldsFragment,
DelegationFieldsFragment,
} from './__generated___/Rewards';
import {
formatNumber,
removePaginationWrapper,
toBigNum,
} from '@vegaprotocol/react-helpers';
import { useAppState } from '../../../contexts/app-state/app-state-context';
interface RewardInfoProps {
data: RewardsQuery | undefined;
currVegaKey: string;
}
export const RewardInfo = ({ data, currVegaKey }: RewardInfoProps) => {
const { t } = useTranslation();
const rewards = React.useMemo(() => {
if (!data?.party || !data.party.rewardsConnection?.edges?.length) return [];
return removePaginationWrapper(data.party.rewardsConnection.edges);
}, [data]);
const delegations = React.useMemo(() => {
if (!data?.party || !data.party.delegationsConnection?.edges?.length) {
return [];
}
return removePaginationWrapper(data.party.delegationsConnection.edges);
}, [data]);
return (
<div>
<p>
{t('Connected Vega key')}: {currVegaKey}
</p>
{rewards.length ? (
rewards.map((reward, i) => {
if (!reward) return null;
return (
<RewardTable
key={i}
reward={reward}
delegations={delegations || []}
/>
);
})
) : (
<p>{t('noRewards')}</p>
)}
</div>
);
};
interface RewardTableProps {
reward: RewardFieldsFragment;
delegations: DelegationFieldsFragment[] | [];
}
export const RewardTable = ({ reward, delegations }: RewardTableProps) => {
const { t } = useTranslation();
const {
appState: { decimals },
} = useAppState();
// Get your stake for epoch in which you have rewards
const stakeForEpoch = React.useMemo(() => {
if (!delegations.length) return '0';
const delegationsForEpoch = delegations
.filter((d) => d.epoch.toString() === reward.epoch.id)
.map((d) => toBigNum(d.amount, decimals));
if (delegationsForEpoch.length) {
return BigNumber.sum.apply(null, [
new BigNumber(0),
...delegationsForEpoch,
]);
}
return new BigNumber(0);
}, [decimals, delegations, reward.epoch.id]);
return (
<div className="mb-24">
<h3 className="text-lg text-white mb-4">
{t('Epoch')} {reward.epoch.id}
</h3>
<KeyValueTable>
<KeyValueTableRow>
{t('rewardType')}
<span>{reward.rewardType}</span>
</KeyValueTableRow>
<KeyValueTableRow>
{t('yourStake')}
<span>{stakeForEpoch.toString()}</span>
</KeyValueTableRow>
<KeyValueTableRow>
{t('reward')}
<span>
{formatNumber(toBigNum(reward.amount, decimals))} {t('VEGA')}
</span>
</KeyValueTableRow>
<KeyValueTableRow>
{t('shareOfReward')}
<span>
{new BigNumber(reward.percentageOfTotal).dp(2).toString()}%
</span>
</KeyValueTableRow>
<KeyValueTableRow>
{t('received')}
<span>
{format(new Date(reward.receivedAt), DATE_FORMAT_DETAILED)}
</span>
</KeyValueTableRow>
</KeyValueTable>
</div>
);
};