ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

* use theme for blue
This commit is contained in:
Ian Lapham 2020-10-12 15:45:20 -04:00 committed by GitHub
parent b650b17563
commit 9c473270ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 52 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/constants/index.ts
View File

@ -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'

34
src/pages/Vote/VotePage.tsx
View File

@ -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,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))
: ''}
</TYPE.main>
{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
</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>

17
src/pages/Vote/index.tsx
View File

@ -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>

4
src/state/application/actions.ts
View File

@ -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')

8
src/state/application/hooks.ts
View File

@ -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()

4
src/theme/index.tsx
View File

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