diff --git a/src/constants/index.ts b/src/constants/index.ts index eceab05610..72eb77ca98 100644 --- a/src/constants/index.ts +++ b/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' diff --git a/src/pages/Vote/VotePage.tsx b/src/pages/Vote/VotePage.tsx index c67c763527..ec3697511a 100644 --- a/src/pages/Vote/VotePage.tsx +++ b/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(true) // modal for casting votes - const [showModal, setShowModal] = useState(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 {content} + const commonName = COMMON_CONTRACT_NAMES[content] ?? content + return {commonName} } return {content} } return ( - setShowModal(false)} - proposalId={proposalData?.id} - support={support} - /> + + @@ -162,7 +168,7 @@ 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)) : ''} {showUnlockVoting && endDate && endDate > now && ( @@ -170,7 +176,7 @@ export default function VotePage({ style={{ width: 'fit-content' }} padding="8px" borderRadius="8px" - onClick={() => setShowModal(true)} + onClick={toggelDelegateModal} > Unlock Voting @@ -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({ })} - Overview + Description diff --git a/src/pages/Vote/index.tsx b/src/pages/Vote/index.tsx index 8bf0d5eae0..00f6f96008 100644 --- a/src/pages/Vote/index.tsx +++ b/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(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 ( setShowModal(false)} + isOpen={showDelegateModal} + onDismiss={toggelDelegateModal} title={showUnlockVoting ? 'Unlock Votes' : 'Update Delegation'} /> @@ -161,7 +166,7 @@ export default function Vote() { style={{ width: 'fit-content' }} padding="8px" borderRadius="8px" - onClick={() => setShowModal(true)} + onClick={toggelDelegateModal} > Unlock Voting @@ -195,7 +200,7 @@ export default function Vote() { > {userDelegatee === account ? 'Self' : shortenAddress(userDelegatee)} - setShowModal(true)} style={{ marginLeft: '4px' }}> + (edit) diff --git a/src/state/application/actions.ts b/src/state/application/actions.ts index d9a504fd5c..8576d1326c 100644 --- a/src/state/application/actions.ts +++ b/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') diff --git a/src/state/application/hooks.ts b/src/state/application/hooks.ts index c01cc26e14..6427574742 100644 --- a/src/state/application/hooks.ts +++ b/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() diff --git a/src/theme/index.tsx b/src/theme/index.tsx index 39cb99b116..46de86e6c0 100644 --- a/src/theme/index.tsx +++ b/src/theme/index.tsx @@ -192,6 +192,10 @@ body { padding: 0; } + a { + color: ${colors(false).blue1}; + } + * { box-sizing: border-box; }