-
Notifications
You must be signed in to change notification settings - Fork 1.5k
/
Summary.tsx
74 lines (64 loc) · 2.29 KB
/
Summary.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// Copyright 2017-2019 @polkadot/app-staking authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import { Balance } from '@polkadot/types/interfaces';
import { I18nProps } from '@polkadot/react-components/types';
import BN from 'bn.js';
import React, { useEffect, useState } from 'react';
import { SummaryBox, CardSummary } from '@polkadot/react-components';
import { useApi, useCall } from '@polkadot/react-hooks';
import { formatBalance } from '@polkadot/util';
import translate from '../translate';
interface Props extends I18nProps {
lastReward: BN;
totalStaked: BN;
}
interface StakeInfo {
percentage: string;
staked: string | null;
}
function Summary ({ lastReward, t, totalStaked }: Props): React.ReactElement<Props> {
const { api } = useApi();
const totalInsurance = useCall<Balance>(api.query.balances.totalIssuance, []);
const [{ percentage, staked }, setStakeInfo] = useState<StakeInfo>({ percentage: '-', staked: null });
const [total, setTotal] = useState<string | null>(null);
useEffect((): void => {
if (totalInsurance) {
setTotal(
`${formatBalance(totalInsurance, false)}${formatBalance.calcSi(totalInsurance.toString()).value}`
);
}
}, [totalInsurance]);
useEffect((): void => {
if (totalInsurance && totalStaked?.gtn(0)) {
setStakeInfo({
percentage: `${(totalStaked.muln(10000).div(totalInsurance).toNumber() / 100).toFixed(2)}%`,
staked: `${formatBalance(totalStaked, false)}${formatBalance.calcSi(totalStaked.toString()).value}`
});
}
}, [totalInsurance, totalStaked]);
return (
<SummaryBox>
<section className='ui--media-small'>
<CardSummary label={t('total staked')}>
{staked || '-'}
</CardSummary>
<CardSummary label=''>/</CardSummary>
<CardSummary label={t('total issuance')}>
{total || '-'}
</CardSummary>
</section>
<CardSummary label={t('staked')}>
{percentage}
</CardSummary>
<CardSummary label={t('last reward')}>
{
lastReward.gtn(0)
? `${formatBalance(lastReward, false)}`
: '-'
}
</CardSummary>
</SummaryBox>
);
}
export default translate(Summary);