Files
protocol/packages/website/ts/pages/governance/vote_stats.tsx
2019-02-17 12:22:26 -08:00

42 lines
1.4 KiB
TypeScript

import * as _ from 'lodash';
import * as React from 'react';
import { TallyInterface } from 'ts/pages/governance/governance';
import { Heading, Paragraph } from 'ts/components/text';
import { VoteBar } from 'ts/pages/governance/vote_bar';
import { colors } from 'ts/style/colors';
import { BigNumber } from '@0x/utils';
import { Web3Wrapper } from '@0x/web3-wrapper';
interface VoteStatsProps {
tally?: TallyInterface;
}
export const VoteStats: React.StatelessComponent<VoteStatsProps> = ({ tally }) => {
BigNumber.config({
FORMAT: {
decimalSeparator: '.',
groupSeparator: ',',
groupSize: 3,
secondaryGroupSize: 0,
fractionGroupSeparator: ' ',
fractionGroupSize: 0,
},
});
// const totalBalance = tally.totalBalance.toFormat(3, 2);
const totalBalance = Web3Wrapper.toUnitAmount(tally.totalBalance, 18).toFormat(0, 2);
return (
<>
<Heading asElement="h3" size="small" marginBottom="10px">
Results
</Heading>
<VoteBar label="Yes" color={colors.brandLight} percentage={tally.yesPercentage} />
<VoteBar label="No" color={colors.brandDark} percentage={tally.noPercentage} marginBottom="24px" />
<Paragraph marginBottom="24px">({totalBalance} ZRX total vote)</Paragraph>
</>
);
};