use enum for enumerateProposalState #1166 (#1381)

* Use ts enum for ProposalState in state/governance/hooks.ts (#1166)

* Use ProposalState enum in Vote/styled.tsx for determining colors of state text etc. (#1166)

src/pages/Vote/VotePage.tsx

@@ -3,27 +3,33 @@ import { AutoColumn } from '../../components/Column'
 import styled from 'styled-components'
 
 import { RouteComponentProps } from 'react-router-dom'
-import { TYPE, StyledInternalLink, ExternalLink } from '../../theme'
-import { RowFixed, RowBetween } from '../../components/Row'
+import { ExternalLink, StyledInternalLink, TYPE } from '../../theme'
+import { RowBetween, RowFixed } from '../../components/Row'
 import { CardSection, DataCard } from '../../components/earn/styled'
 import { ArrowLeft } from 'react-feather'
 import { ButtonPrimary } from '../../components/Button'
 import { ProposalStatus } from './styled'
-import { useProposalData, useUserVotesAsOfBlock, ProposalData, useUserDelegatee } from '../../state/governance/hooks'
+import {
+  ProposalData,
+  ProposalState,
+  useProposalData,
+  useUserDelegatee,
+  useUserVotesAsOfBlock
+} from '../../state/governance/hooks'
 import { DateTime } from 'luxon'
 import ReactMarkdown from 'react-markdown'
 import VoteModal from '../../components/vote/VoteModal'
-import { TokenAmount, JSBI } from '@uniswap/sdk'
+import { JSBI, TokenAmount } from '@uniswap/sdk'
 import { useActiveWeb3React } from '../../hooks'
 import { AVERAGE_BLOCK_TIME_IN_SECS, COMMON_CONTRACT_NAMES, UNI, ZERO_ADDRESS } from '../../constants'
-import { isAddress, getEtherscanLink } from '../../utils'
+import { getEtherscanLink, isAddress } from '../../utils'
 import { ApplicationModal } from '../../state/application/actions'
-import { useModalOpen, useToggleDelegateModal, useToggleVoteModal, useBlockNumber } from '../../state/application/hooks'
+import { useBlockNumber, useModalOpen, useToggleDelegateModal, useToggleVoteModal } from '../../state/application/hooks'
 import DelegateModal from '../../components/vote/DelegateModal'
-import { GreyCard } from '../../components/Card'
 import { useTokenBalance } from '../../state/wallet/hooks'
 import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
 import { BigNumber } from 'ethers'
+import { GreyCard } from '../../components/Card'
 
 const PageWrapper = styled(AutoColumn)`
   width: 100%;
@@ -152,7 +158,7 @@ export default function VotePage({
     availableVotes &&
     JSBI.greaterThan(availableVotes.raw, JSBI.BigInt(0)) &&
     proposalData &&
-    proposalData.status === 'active'
+    proposalData.status === ProposalState.Active
 
   const uniBalance: TokenAmount | undefined = useTokenBalance(account ?? undefined, chainId ? UNI[chainId] : undefined)
   const userDelegatee: string | undefined = useUserDelegatee()
@@ -181,7 +187,9 @@ export default function VotePage({
           <ArrowWrapper to="/vote">
             <ArrowLeft size={20} /> All Proposals
           </ArrowWrapper>
-          {proposalData && <ProposalStatus status={proposalData?.status ?? ''}>{proposalData?.status}</ProposalStatus>}
+          {proposalData && (
+            <ProposalStatus status={proposalData?.status}>{ProposalState[proposalData?.status]}</ProposalStatus>
+          )}
         </RowBetween>
         <AutoColumn gap="10px" style={{ width: '100%' }}>
           <TYPE.largeHeader style={{ marginBottom: '.5rem' }}>{proposalData?.title}</TYPE.largeHeader>
@@ -194,7 +202,7 @@ export default function VotePage({
                 : ''}
             </TYPE.main>
           </RowBetween>
-          {proposalData && proposalData.status === 'active' && !showVotingButtons && (
+          {proposalData && proposalData.status === ProposalState.Active && !showVotingButtons && (
             <GreyCard>
               <TYPE.black>
                 Only UNI votes that were self delegated or delegated to another address before block{' '}

src/pages/Vote/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { AutoColumn } from '../../components/Column'
 import styled from 'styled-components'
-import { TYPE, ExternalLink } from '../../theme'
+import { ExternalLink, TYPE } from '../../theme'
 import { RowBetween, RowFixed } from '../../components/Row'
 import { Link } from 'react-router-dom'
 import { ProposalStatus } from './styled'
@@ -9,14 +9,20 @@ import { ButtonPrimary } from '../../components/Button'
 
 import { Button } from 'rebass/styled-components'
 import { darken } from 'polished'
-import { CardSection, DataCard, CardNoise, CardBGImage } from '../../components/earn/styled'
-import { useAllProposalData, ProposalData, useUserVotes, useUserDelegatee } from '../../state/governance/hooks'
+import { CardBGImage, CardNoise, CardSection, DataCard } from '../../components/earn/styled'
+import {
+  ProposalData,
+  ProposalState,
+  useAllProposalData,
+  useUserDelegatee,
+  useUserVotes
+} from '../../state/governance/hooks'
 import DelegateModal from '../../components/vote/DelegateModal'
 import { useTokenBalance } from '../../state/wallet/hooks'
 import { useActiveWeb3React } from '../../hooks'
 import { UNI, ZERO_ADDRESS } from '../../constants'
-import { JSBI, TokenAmount, ChainId } from '@uniswap/sdk'
-import { shortenAddress, getEtherscanLink } from '../../utils'
+import { ChainId, JSBI, TokenAmount } from '@uniswap/sdk'
+import { getEtherscanLink, shortenAddress } from '../../utils'
 import Loader from '../../components/Loader'
 import FormattedCurrencyAmount from '../../components/FormattedCurrencyAmount'
 import { useModalOpen, useToggleDelegateModal } from '../../state/application/hooks'
@@ -223,7 +229,7 @@ export default function Vote() {
             <Proposal as={Link} to={'/vote/' + p.id} key={i}>
               <ProposalNumber>{p.id}</ProposalNumber>
               <ProposalTitle>{p.title}</ProposalTitle>
-              <ProposalStatus status={p.status}>{p.status}</ProposalStatus>
+              <ProposalStatus status={p.status}>{ProposalState[p.status]}</ProposalStatus>
             </Proposal>
           )
         })}

src/pages/Vote/styled.tsx

@@ -1,29 +1,25 @@
 import styled from 'styled-components'
+import { ProposalState } from '../../state/governance/hooks'
 
-const handleColorType = (status?: any, theme?: any) => {
+const handleColorType = (status?: ProposalState, theme?: any) => {
   switch (status) {
-    case 'pending':
+    case ProposalState.Pending:
+    case ProposalState.Active:
       return theme.blue1
-    case 'active':
-      return theme.blue1
-    case 'succeeded':
+    case ProposalState.Succeeded:
+    case ProposalState.Executed:
       return theme.green1
-    case 'defeated':
+    case ProposalState.Defeated:
       return theme.red1
-    case 'queued':
-      return theme.text3
-    case 'executed':
-      return theme.green1
-    case 'canceled':
-      return theme.text3
-    case 'expired':
-      return theme.text3
+    case ProposalState.Queued:
+    case ProposalState.Canceled:
+    case ProposalState.Expired:
     default:
       return theme.text3
   }
 }
 
-export const ProposalStatus = styled.span<{ status: string }>`
+export const ProposalStatus = styled.span<{ status: ProposalState }>`
   font-size: 0.825rem;
   font-weight: 600;
   padding: 0.5rem;

src/state/governance/hooks.ts

@@ -22,7 +22,7 @@ export interface ProposalData {
   title: string
   description: string
   proposer: string
-  status: string
+  status: ProposalState
   forCount: number
   againstCount: number
   startBlock: number
@@ -30,9 +30,16 @@ export interface ProposalData {
   details: ProposalDetail[]
 }
 
-const enumerateProposalState = (state: number) => {
-  const proposalStates = ['pending', 'active', 'canceled', 'defeated', 'succeeded', 'queued', 'expired', 'executed']
-  return proposalStates[state]
+export enum ProposalState {
+  Undetermined = -1,
+  Pending,
+  Active,
+  Canceled,
+  Defeated,
+  Succeeded,
+  Queued,
+  Expired,
+  Executed
 }
 
 // get count of all proposals made
@@ -127,7 +134,7 @@ export function useAllProposalData() {
           title: description?.split(/# |\n/g)[1] || 'Untitled',
           description: description || 'No description.',
           proposer: allProposals[i]?.result?.proposer,
-          status: enumerateProposalState(allProposalStates[i]?.result?.[0]) ?? 'Undetermined',
+          status: allProposalStates[i]?.result?.[0] ?? ProposalState.Undetermined,
           forCount: parseFloat(ethers.utils.formatUnits(allProposals[i]?.result?.forVotes.toString(), 18)),
           againstCount: parseFloat(ethers.utils.formatUnits(allProposals[i]?.result?.againstVotes.toString(), 18)),
           startBlock: parseInt(allProposals[i]?.result?.startBlock?.toString()),