fix(governance): modal bugs, redable styles, show common names for contracts (#1164)

* fix modal bugs, reable styles, show common names for contracts

* use theme for blue

Author: ianlapham

src/constants/index.ts

@@ -34,6 +34,12 @@ export const UNI: { [chainId in ChainId]: Token } = {
   [ChainId.KOVAN]: new Token(ChainId.KOVAN, UNI_ADDRESS, 18, 'UNI', 'Uniswap')
 }
 
+export const COMMON_CONTRACT_NAMES: { [address: string]: string } = {
+  '0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984': 'UNI',
+  '0x5e4be8Bc9637f0EAA1A755019e06A68ce081D58F': 'Governance Alpha',
+  '0x1a9C8182C09F50C8318d769245beA52c32BE35BC': 'Timelock'
+}
+
 // TODO: specify merkle distributor for mainnet
 export const MERKLE_DISTRIBUTOR_ADDRESS: { [chainId in ChainId]?: string } = {
   [ChainId.MAINNET]: '0x090D4613473dEE047c3f2706764f49E0821D256e'

src/pages/Vote/VotePage.tsx

@@ -17,8 +17,11 @@ import VoteModal from '../../components/vote/VoteModal'
 import { TokenAmount, JSBI } from '@uniswap/sdk'
 import { useTokenBalance } from '../../state/wallet/hooks'
 import { useActiveWeb3React } from '../../hooks'
-import { UNI, ZERO_ADDRESS, PROPOSAL_LENGTH_IN_DAYS } from '../../constants'
+import { UNI, ZERO_ADDRESS, PROPOSAL_LENGTH_IN_DAYS, COMMON_CONTRACT_NAMES } from '../../constants'
 import { isAddress, getEtherscanLink } from '../../utils'
+import { ApplicationModal } from '../../state/application/actions'
+import { useModalOpen, useToggleDelegateModal, useToggleVoteModal } from '../../state/application/hooks'
+import DelegateModal from '../../components/vote/DelegateModal'
 
 const PageWrapper = styled(AutoColumn)`
   width: 100%;
@@ -108,7 +111,12 @@ export default function VotePage({
   const [support, setSupport] = useState<boolean>(true)
 
   // modal for casting votes
-  const [showModal, setShowModal] = useState<boolean>(false)
+  const showVoteModal = useModalOpen(ApplicationModal.VOTE)
+  const toggleVoteModal = useToggleVoteModal()
+
+  // toggle for showing delegation modal
+  const showDelegateModal = useModalOpen(ApplicationModal.DELEGATE)
+  const toggelDelegateModal = useToggleDelegateModal()
 
   // get and format date from data
   const startTimestamp: number | undefined = useTimestampFromBlock(proposalData?.startBlock)
@@ -133,21 +141,19 @@ export default function VotePage({
   )
 
   // show links in propsoal details if content is an address
+  // if content is contract with common name, replace address with common name
   const linkIfAddress = (content: string) => {
     if (isAddress(content) && chainId) {
-      return <ExternalLink href={getEtherscanLink(chainId, content, 'address')}>{content}</ExternalLink>
+      const commonName = COMMON_CONTRACT_NAMES[content] ?? content
+      return <ExternalLink href={getEtherscanLink(chainId, content, 'address')}>{commonName}</ExternalLink>
     }
     return <span>{content}</span>
   }
 
   return (
     <PageWrapper gap="lg" justify="center">
-      <VoteModal
-        isOpen={showModal}
-        onDismiss={() => setShowModal(false)}
-        proposalId={proposalData?.id}
-        support={support}
-      />
+      <VoteModal isOpen={showVoteModal} onDismiss={toggleVoteModal} proposalId={proposalData?.id} support={support} />
+      <DelegateModal isOpen={showDelegateModal} onDismiss={toggelDelegateModal} title="Unlock Votes" />
       <ProposalInfo gap="lg" justify="start">
         <RowBetween style={{ width: '100%' }}>
           <ArrowWrapper to="/vote">
@@ -162,15 +168,15 @@ export default function VotePage({
               {endDate && endDate < now
                 ? 'Voting ended ' + (endDate && endDate.toLocaleString(DateTime.DATETIME_FULL))
                 : proposalData
-                ? 'Voting ends approximately' + (endDate && endDate.toLocaleString(DateTime.DATETIME_FULL))
+                ? 'Voting ends approximately ' + (endDate && endDate.toLocaleString(DateTime.DATETIME_FULL))
                 : ''}
             </TYPE.main>
             {showUnlockVoting && endDate && endDate > now && (
               <ButtonPrimary
                 style={{ width: 'fit-content' }}
                 padding="8px"
                 borderRadius="8px"
-                onClick={() => setShowModal(true)}
+                onClick={toggelDelegateModal}
               >
                 Unlock Voting
               </ButtonPrimary>
@@ -188,7 +194,7 @@ export default function VotePage({
               borderRadius="8px"
               onClick={() => {
                 setSupport(true)
-                setShowModal(true)
+                toggleVoteModal()
               }}
             >
               Vote For
@@ -198,7 +204,7 @@ export default function VotePage({
               borderRadius="8px"
               onClick={() => {
                 setSupport(false)
-                setShowModal(true)
+                toggleVoteModal()
               }}
             >
               Vote Against
@@ -260,7 +266,7 @@ export default function VotePage({
           })}
         </AutoColumn>
         <AutoColumn gap="md">
-          <TYPE.mediumHeader fontWeight={600}>Overview</TYPE.mediumHeader>
+          <TYPE.mediumHeader fontWeight={600}>Description</TYPE.mediumHeader>
           <MarkDownWrapper>
             <ReactMarkdown source={proposalData?.description} />
           </MarkDownWrapper>

src/pages/Vote/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { AutoColumn } from '../../components/Column'
 import styled from 'styled-components'
 import { TYPE, ExternalLink } from '../../theme'
@@ -19,6 +19,8 @@ import { JSBI, TokenAmount, ChainId } from '@uniswap/sdk'
 import { shortenAddress, getEtherscanLink } from '../../utils'
 import Loader from '../../components/Loader'
 import FormattedCurrencyAmount from '../../components/FormattedCurrencyAmount'
+import { useModalOpen, useToggleDelegateModal } from '../../state/application/hooks'
+import { ApplicationModal } from '../../state/application/actions'
 
 const PageWrapper = styled(AutoColumn)``
 
@@ -102,7 +104,10 @@ const EmptyProposals = styled.div`
 
 export default function Vote() {
   const { account, chainId } = useActiveWeb3React()
-  const [showModal, setShowModal] = useState<boolean>(false)
+
+  // toggle for showing delegation modal
+  const showDelegateModal = useModalOpen(ApplicationModal.DELEGATE)
+  const toggelDelegateModal = useToggleDelegateModal()
 
   // get data to list all proposals
   const allProposals: ProposalData[] = useAllProposalData()
@@ -120,8 +125,8 @@ export default function Vote() {
   return (
     <PageWrapper gap="lg" justify="center">
       <DelegateModal
-        isOpen={showModal}
-        onDismiss={() => setShowModal(false)}
+        isOpen={showDelegateModal}
+        onDismiss={toggelDelegateModal}
         title={showUnlockVoting ? 'Unlock Votes' : 'Update Delegation'}
       />
       <TopSection gap="md">
@@ -161,7 +166,7 @@ export default function Vote() {
               style={{ width: 'fit-content' }}
               padding="8px"
               borderRadius="8px"
-              onClick={() => setShowModal(true)}
+              onClick={toggelDelegateModal}
             >
               Unlock Voting
             </ButtonPrimary>
@@ -195,7 +200,7 @@ export default function Vote() {
                   >
                     {userDelegatee === account ? 'Self' : shortenAddress(userDelegatee)}
                   </StyledExternalLink>
-                  <TextButton onClick={() => setShowModal(true)} style={{ marginLeft: '4px' }}>
+                  <TextButton onClick={toggelDelegateModal} style={{ marginLeft: '4px' }}>
                     (edit)
                   </TextButton>
                 </AddressButton>

src/state/application/actions.ts

@@ -24,7 +24,9 @@ export enum ApplicationModal {
   SELF_CLAIM,
   ADDRESS_CLAIM,
   CLAIM_POPUP,
-  MENU
+  MENU,
+  DELEGATE,
+  VOTE
 }
 
 export const updateBlockNumber = createAction<{ chainId: number; blockNumber: number }>('application/updateBlockNumber')

src/state/application/hooks.ts

@@ -51,6 +51,14 @@ export function useToggleSelfClaimModal(): () => void {
   return useToggleModal(ApplicationModal.SELF_CLAIM)
 }
 
+export function useToggleDelegateModal(): () => void {
+  return useToggleModal(ApplicationModal.DELEGATE)
+}
+
+export function useToggleVoteModal(): () => void {
+  return useToggleModal(ApplicationModal.VOTE)
+}
+
 // returns a function that allows adding a popup
 export function useAddPopup(): (content: PopupContent, key?: string) => void {
   const dispatch = useDispatch()

src/theme/index.tsx

@@ -192,6 +192,10 @@ body {
   padding: 0;
 }
 
+ a {
+   color: ${colors(false).blue1}; 
+ }
+
 * {
   box-sizing: border-box;
 }