Merge pull request #386 from 0xProject/feat/governance-proposal-history-updates

governance proposal history UI updates

Author: lyaunzbe

ts/pages/governance/countdown.tsx

@@ -37,7 +37,7 @@ export const Countdown: React.StatelessComponent<Props> = ({ startDate, endDate
         voteTextPrefix = 'Voting ends: ';
     }
     const timeToDisplay = isUpcoming ? startTime : endTime;
-    const timeText = ` • ${getRelativeTime(timeToDisplay)}`;
+    const timeText = isUpcoming ? ` • ${getRelativeTime(timeToDisplay)}` : ``;
     const voteText = `${voteTextPrefix} ${timeToDisplay.format('L LT')} ${moment()
         .tz(moment.tz.guess())
         .format('z')} ${timeText}`;

ts/pages/governance/governance.tsx

@@ -36,6 +36,13 @@ interface State {
     tally?: TallyInterface;
 }
 
+interface HistoryState {
+    done: boolean;
+    timestamp: moment.Moment;
+    outcome?: string;
+    show: boolean;
+}
+
 const benefitLabels: LabelInterface = {
     1: 'Little Benefit',
     2: 'Medium Benefit',
@@ -48,7 +55,7 @@ const riskLabels: LabelInterface = {
     3: 'High Risk',
 };
 
-type ProposalState = 'created' | 'active' | 'failed' | 'accepted';
+type ProposalState = 'active' | 'finalized';
 
 export class Governance extends React.Component<RouteComponentProps<any>> {
     public state: State = {
@@ -79,25 +86,16 @@ export class Governance extends React.Component<RouteComponentProps<any>> {
         const outcome = getVoteOutcome(tally);
 
         const proposalHistoryState = {
-            created: {
-                done: true,
-                timestamp: voteStartDate,
-                show: true,
-            },
             active: {
                 done: now.isAfter(voteStartDate),
                 timestamp: voteStartDate,
                 show: true,
             },
-            failed: {
-                done: hasVoteEnded && outcome === 'rejected',
-                timestamp: this._proposalData?.voteEndDate,
-                show: hasVoteEnded && outcome === 'rejected',
-            },
-            accepted: {
-                done: hasVoteEnded && outcome === 'accepted',
+            finalized: {
+                done: hasVoteEnded && (outcome === 'rejected' || outcome === 'accepted'),
                 timestamp: this._proposalData?.voteEndDate,
-                show: (hasVoteStarted && !hasVoteEnded) || (hasVoteEnded && outcome === 'accepted'),
+                outcome,
+                show: hasVoteEnded && (outcome === 'rejected' || outcome === 'accepted'),
             },
         };
 
@@ -135,22 +133,25 @@ export class Governance extends React.Component<RouteComponentProps<any>> {
                         <ProposalHistory>
                             <Ticks>
                                 {Object.keys(proposalHistoryState).map((state: string) => {
-                                    const historyState = proposalHistoryState[state as ProposalState];
+                                    const historyState: HistoryState = proposalHistoryState[state as ProposalState];
                                     if (!historyState.show) {
                                         return null;
                                     }
                                     return (
                                         <>
-                                            <Tick isActive={historyState.done} isFailed={state === 'failed'}>
+                                            <Tick
+                                                isActive={historyState.done}
+                                                isFailed={historyState.outcome === 'rejected'}
+                                            >
                                                 <img
                                                     src={
-                                                        state === 'failed'
+                                                        historyState.outcome === 'rejected'
                                                             ? '/images/governance/cross.svg'
                                                             : '/images/governance/tick_mark.svg'
                                                     }
                                                 />
                                             </Tick>
-                                            {!['accepted', 'failed'].includes(state) && (
+                                            {!['accepted', 'failed', 'finalized'].includes(state) && (
                                                 <Connector className={state === 'active' ? 'small' : ''} />
                                             )}
                                         </>
@@ -159,7 +160,7 @@ export class Governance extends React.Component<RouteComponentProps<any>> {
                             </Ticks>
                             <HistoryCells>
                                 {Object.keys(proposalHistoryState).map((state: string) => {
-                                    const historyState = proposalHistoryState[state as ProposalState];
+                                    const historyState: HistoryState = proposalHistoryState[state as ProposalState];
                                     if (!historyState.show) {
                                         return null;
                                     }
@@ -172,6 +173,11 @@ export class Governance extends React.Component<RouteComponentProps<any>> {
                                                 fontWeight={400}
                                             >
                                                 {state}
+                                                {historyState.done &&
+                                                (historyState.outcome === 'rejected' ||
+                                                    historyState.outcome === 'accepted')
+                                                    ? ` - ${historyState.outcome}`
+                                                    : ''}
                                             </StateTitle>
                                             <Text
                                                 fontColor={colors.textDarkSecondary}
@@ -180,7 +186,7 @@ export class Governance extends React.Component<RouteComponentProps<any>> {
                                                 fontWeight={300}
                                             >
                                                 {historyState.done
-                                                    ? historyState.timestamp.format('MMMM Do, YYYY - hh:mm a')
+                                                    ? `${historyState.timestamp.format('MMMM Do, YYYY - hh:mm a')}`
                                                     : 'TBD'}
                                             </Text>
                                         </CellContent>

ts/pages/governance/vote_index_card.tsx

@@ -127,6 +127,7 @@ export const VoteIndexCard: React.StatelessComponent<VoteIndexCardProps> = (prop
                 forVotes,
                 quorumThreshold,
             } = props;
+
             return (
                 <ReactRouterLink style={{ order }} to={`${WebsitePaths.Vote}/proposal/${id}`}>
                     <Section
@@ -160,7 +161,7 @@ export const VoteIndexCard: React.StatelessComponent<VoteIndexCardProps> = (prop
                                     <VoteStatusText
                                         status={getStatus(
                                             isCanceled,
-                                            againstVotes < forVotes && forVotes > quorumThreshold,
+                                            !isHappening && againstVotes < forVotes && forVotes > quorumThreshold,
                                             isUpcoming,
                                         )}
                                     />