104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
import * as _ from 'lodash';
|
|
import * as moment from 'moment';
|
|
import * as React from 'react';
|
|
import { Link as ReactRouterLink } from 'react-router-dom';
|
|
import styled from 'styled-components';
|
|
|
|
import { Column, FlexWrap, Section } from 'ts/components/newLayout';
|
|
import { Heading, Paragraph } from 'ts/components/text';
|
|
import { getTotalBalancesString } from 'ts/pages/governance/vote_stats';
|
|
import { VoteStatusText } from 'ts/pages/governance/vote_status_text';
|
|
import { TallyInterface, VoteOutcome, VoteTime, ZeipId } from 'ts/types';
|
|
|
|
export interface VoteIndexCardProps {
|
|
title: string;
|
|
zeipId: ZeipId;
|
|
summary: string;
|
|
voteStartDate: moment.Moment;
|
|
voteEndDate: moment.Moment;
|
|
// Non-static properties
|
|
tally?: TallyInterface;
|
|
}
|
|
|
|
const getVoteTime = (voteStartDate: moment.Moment, voteEndDate: moment.Moment): VoteTime | undefined => {
|
|
const now = moment();
|
|
if (now.isBefore(voteEndDate) && now.isAfter(voteStartDate)) {
|
|
return 'happening';
|
|
}
|
|
if (now.isBefore(voteStartDate)) {
|
|
return 'upcoming';
|
|
}
|
|
return undefined;
|
|
};
|
|
|
|
const getVoteOutcome = (tally?: TallyInterface): VoteOutcome | undefined => {
|
|
if (!tally) {
|
|
return undefined;
|
|
}
|
|
if (tally.no.isGreaterThanOrEqualTo(tally.yes)) {
|
|
return 'rejected';
|
|
} else if (tally.yes.isGreaterThan(tally.no)) {
|
|
return 'accepted';
|
|
}
|
|
return undefined;
|
|
};
|
|
|
|
const getDateString = (voteStartDate: moment.Moment, voteEndDate: moment.Moment): string => {
|
|
const voteTime = getVoteTime(voteStartDate, voteEndDate);
|
|
if (voteTime === 'happening') {
|
|
return `Ends ${voteEndDate.format('MMMM Do YYYY, h:mm:ss a')}`;
|
|
}
|
|
if (voteTime === 'upcoming') {
|
|
return `Starting ${voteStartDate.format('MMMM Do YYYY, h:mm:ss a')}`;
|
|
}
|
|
return `Ended ${voteEndDate.format('MMMM Do YYYY')}`;
|
|
};
|
|
|
|
export const VoteIndexCard: React.StatelessComponent<VoteIndexCardProps> = ({
|
|
title,
|
|
zeipId,
|
|
summary,
|
|
voteStartDate,
|
|
voteEndDate,
|
|
tally,
|
|
}) => {
|
|
const voteTime = getVoteTime(voteStartDate, voteEndDate);
|
|
const voteStatus = voteTime || getVoteOutcome(tally);
|
|
const totalBalances = getTotalBalancesString(tally);
|
|
const isPastProposal = voteTime === undefined;
|
|
return (
|
|
<ReactRouterLink to={`vote/zeip-${zeipId}`}>
|
|
<Section
|
|
hasBorder={isPastProposal}
|
|
bgColor={!isPastProposal ? 'dark' : 'none'}
|
|
padding="60px 30px 40px"
|
|
hasHover={true}
|
|
margin="30px auto"
|
|
maxWidth="100%"
|
|
>
|
|
<FlexWrap>
|
|
<Column width="60%" padding="0px 20px 0px 0px">
|
|
<Heading>
|
|
{`${title} `}
|
|
<Muted>{`(ZEIP-${zeipId})`}</Muted>
|
|
</Heading>
|
|
|
|
<Paragraph>{summary}</Paragraph>
|
|
</Column>
|
|
<Column>
|
|
<div className="flex flex-column items-end">
|
|
<VoteStatusText status={voteStatus} />
|
|
<Paragraph marginBottom="12px" isMuted={1}>{`${totalBalances} ZRX Total Vote`}</Paragraph>
|
|
<Paragraph marginBottom="12px">{getDateString(voteStartDate, voteEndDate)}</Paragraph>
|
|
</div>
|
|
</Column>
|
|
</FlexWrap>
|
|
</Section>
|
|
</ReactRouterLink>
|
|
);
|
|
};
|
|
|
|
const Muted = styled.span`
|
|
opacity: 0.6;
|
|
`;
|