From f388751a9795b184471801b59b66abb989a9533d Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 28 Jun 2019 16:16:55 -0700 Subject: [PATCH] Implement the vote index page with routing to voting pages --- packages/website/ts/components/button.tsx | 3 +- packages/website/ts/components/newLayout.tsx | 13 +- packages/website/ts/components/text.tsx | 3 +- packages/website/ts/index.tsx | 4 +- .../website/ts/pages/governance/countdown.tsx | 4 +- packages/website/ts/pages/governance/data.ts | 181 ++++++++++++++++++ .../ts/pages/governance/governance.tsx | 94 +++------ .../ts/pages/governance/vote_index.tsx | 88 +++++++++ .../ts/pages/governance/vote_index_card.tsx | 103 ++++++++++ .../ts/pages/governance/vote_stats.tsx | 27 ++- .../ts/pages/governance/vote_status_text.tsx | 88 +++++++++ .../website/ts/pages/vote_placeholder.tsx | 50 ----- packages/website/ts/types.ts | 12 ++ 13 files changed, 541 insertions(+), 129 deletions(-) create mode 100644 packages/website/ts/pages/governance/data.ts create mode 100644 packages/website/ts/pages/governance/vote_index.tsx create mode 100644 packages/website/ts/pages/governance/vote_index_card.tsx create mode 100644 packages/website/ts/pages/governance/vote_status_text.tsx delete mode 100644 packages/website/ts/pages/vote_placeholder.tsx diff --git a/packages/website/ts/components/button.tsx b/packages/website/ts/components/button.tsx index 2181ff7531..7f515cc38e 100644 --- a/packages/website/ts/components/button.tsx +++ b/packages/website/ts/components/button.tsx @@ -23,6 +23,7 @@ export interface ButtonInterface { hasIcon?: boolean | string; isInline?: boolean; padding?: string; + fontSize?: string; href?: string; type?: string; target?: string; @@ -78,7 +79,7 @@ const ButtonBase = styled.button` !props.isNoPadding && !props.isWithArrow && ((!!props.padding && props.padding) || '18px 30px')}; white-space: ${props => props.isWithArrow && 'nowrap'}; text-align: center; - font-size: ${props => (props.isWithArrow ? '20px' : '18px')}; + font-size: ${props => (props.fontSize ? props.fontSize : props.isWithArrow ? '20px' : '18px')}; text-decoration: none; cursor: pointer; outline: none; diff --git a/packages/website/ts/components/newLayout.tsx b/packages/website/ts/components/newLayout.tsx index 31337f6a3e..fdc3405498 100644 --- a/packages/website/ts/components/newLayout.tsx +++ b/packages/website/ts/components/newLayout.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; import styled from 'styled-components'; +import { opacify } from 'polished'; + export interface WrapProps { bgColor?: string; id?: string; @@ -27,7 +29,10 @@ export interface SectionProps extends WrapProps { isFullWidth?: boolean; isFlex?: boolean; padding?: string; + margin?: string; paddingMobile?: string; + hasBorder?: boolean; + hasHover?: boolean; flexBreakpoint?: string; maxWidth?: string; bgColor?: 'dark' | 'light' | string; @@ -91,12 +96,18 @@ export const WrapSticky = styled.div` const SectionBase = styled.section` width: ${props => !props.isFullWidth && 'calc(100% - 60px)'}; max-width: 1500px; - margin: 0 auto; + cursor: ${props => props.hasHover && 'pointer'}; + border: ${props => props.hasBorder && `1px solid ${props.theme.lightBgColor}`}; + margin: ${props => (props.margin ? props.margin : '0 auto')}; padding: ${props => props.isPadded && (props.padding || '120px 0')}; background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor}; position: relative; overflow: ${props => !props.isFullWidth && 'hidden'}; + &:hover { + background-color: ${props => props.hasHover && opacify(0.2, props.theme[`lightBgColor`])}; + } + @media (max-width: 768px) { padding: ${props => props.isPadded && (props.paddingMobile || '40px 0')}; } diff --git a/packages/website/ts/components/text.tsx b/packages/website/ts/components/text.tsx index a47e61ef3f..ed771e90c5 100644 --- a/packages/website/ts/components/text.tsx +++ b/packages/website/ts/components/text.tsx @@ -16,6 +16,7 @@ interface HeadingProps extends BaseTextInterface { isFlex?: boolean; isNoMargin?: boolean; isMuted?: boolean | number; + isInline?: boolean; marginBottom?: string; color?: string; } @@ -30,7 +31,7 @@ interface ParagraphProps extends BaseTextInterface { const StyledHeading = styled.h1` max-width: ${props => props.maxWidth}; color: ${props => props.color || props.theme.textColor}; - display: ${props => props.isFlex && `inline-flex`}; + display: ${props => (props.isFlex ? `inline-flex` : props.isInline ? 'inline' : undefined)}; align-items: center; justify-content: ${props => props.isFlex && `space-between`}; font-size: ${props => diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 76a8c50199..dfe7bac067 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -26,6 +26,7 @@ import { Explore } from 'ts/pages/explore'; import { NextEcosystem } from 'ts/pages/ecosystem'; import { Extensions } from 'ts/pages/extensions'; import { Governance } from 'ts/pages/governance/governance'; +import { VoteIndex } from 'ts/pages/governance/vote_index'; import { Next0xInstant } from 'ts/pages/instant'; import { NextLanding } from 'ts/pages/landing'; import { NextLaunchKit } from 'ts/pages/launch_kit'; @@ -120,7 +121,8 @@ render( - + + = ({ deadline }) => { const pstOffset = '-0800'; - const time = moment(deadline, 'X').utcOffset(pstOffset); + const time = deadline.utcOffset(pstOffset); const isPassed = time.isBefore(now); const voteTextPrefix = isPassed ? `Voting ended: ` : `Vote ends: `; const timeText = !isPassed ? ` • ${getRelativeTime(time)}` : ''; diff --git a/packages/website/ts/pages/governance/data.ts b/packages/website/ts/pages/governance/data.ts new file mode 100644 index 0000000000..4c6ee9dee9 --- /dev/null +++ b/packages/website/ts/pages/governance/data.ts @@ -0,0 +1,181 @@ +import { BigNumber } from '@0x/utils'; +import * as moment from 'moment'; + +import { TallyInterface, VoteOutcome, ZeipId } from 'ts/types'; + +export interface ProposalLink { + text: string; + url: string; +} + +export interface ProposalProperty { + title: string; + summary: string; + rating: number; + links: ProposalLink[]; +} + +export interface Proposal { + zeipId: ZeipId; + title: string; + summary: string; + url: string; + voteStartDate: moment.Moment; + voteEndDate: moment.Moment; + outcome?: VoteOutcome; + benefit: ProposalProperty; + risks: ProposalProperty; +} + +export interface Proposals { + [id: number]: Proposal; +} + +export const proposals: Proposals = { + 23: { + zeipId: 23, + title: 'Trade Bundles of Assets', + summary: `This ZEIP introduces the MultiAssetProxy, which adds support for trading arbitrary bundles of assets to 0x protocol. Historically, only a single asset could be traded per each side of a trade. With the introduction of the MultiAssetProxy, users will be able to trade multiple ERC721 assets or even mix ERC721 and ERC20 assets within a single order.`, + url: 'https://blog.0xproject.com/zeip-23-trade-bundles-of-assets-fe69eb3ed960', + voteStartDate: moment(1551042800, 'X'), + voteEndDate: moment(1551142800, 'X'), + outcome: 'accepted', + benefit: { + title: 'Benefit', + summary: `Supporting trades for bundles of assets has been one of the most commonly requested features since the launch of 0x v2. The idea for this feature originated from discussions with gaming and NFT related projects. However, this upgrade also provides utility to relayers for prediction markets or baskets of tokens. The MultiAssetProxy will enable brand new ways of trading.`, + rating: 3, + links: [ + { + text: 'Technical detail', + url: 'https://github.com/0xProject/ZEIPs/issues/23', + }, + ], + }, + risks: { + title: 'Risk', + summary: `While the MultiAssetProxy’s code is relatively straightforward and has successfully undergone a full third-party audit, a bug within the code could result in the loss of user funds. Deploying the MultiAssetProxy is a hot upgrade that requires modifying the state of existing contracts within 0x protocol. The contracts being modified contain allowances to many users’ tokens. We encourage the community to verify the code, as well as the state changes.`, + rating: 2, + links: [ + { + text: 'View Code', + url: + 'https://github.com/0xProject/0x-monorepo/blob/development/contracts/asset-proxy/contracts/src/MultiAssetProxy.sol#L25', + }, + { + text: 'View Audit', + url: 'https://github.com/ConsenSys/0x-audit-report-2018-12', + }, + ], + }, + }, + 39: { + zeipId: 39, + title: 'StaticCallAssetProxy', + summary: `This ZEIP introduces the StaticCallAssetProxy, which adds support for trading arbitrary bundles of assets to 0x protocol. Historically, only a single asset could be traded per each side of a trade. With the introduction of the MultiAssetProxy, users will be able to trade multiple ERC721 assets or even mix ERC721 and ERC20 assets within a single order.`, + url: 'https://blog.0xproject.com/zeip-23-trade-bundles-of-assets-fe69eb3ed960', + voteStartDate: moment().add(2, 'days'), + voteEndDate: moment().add(3, 'days'), + benefit: { + title: 'Benefit', + summary: `Supporting trades for bundles of assets has been one of the most commonly requested features since the launch of 0x v2. The idea for this feature originated from discussions with gaming and NFT related projects. However, this upgrade also provides utility to relayers for prediction markets or baskets of tokens. The MultiAssetProxy will enable brand new ways of trading.`, + rating: 3, + links: [ + { + text: 'Technical detail', + url: 'https://github.com/0xProject/ZEIPs/issues/23', + }, + ], + }, + risks: { + title: 'Risk', + summary: `While the MultiAssetProxy’s code is relatively straightforward and has successfully undergone a full third-party audit, a bug within the code could result in the loss of user funds. Deploying the MultiAssetProxy is a hot upgrade that requires modifying the state of existing contracts within 0x protocol. The contracts being modified contain allowances to many users’ tokens. We encourage the community to verify the code, as well as the state changes.`, + rating: 2, + links: [ + { + text: 'View Code', + url: + 'https://github.com/0xProject/0x-monorepo/blob/development/contracts/asset-proxy/contracts/src/MultiAssetProxy.sol#L25', + }, + { + text: 'View Audit', + url: 'https://github.com/ConsenSys/0x-audit-report-2018-12', + }, + ], + }, + }, + 24: { + zeipId: 24, + title: 'Support ERC-1155 MultiToken Standard', + summary: `This ZEIP introduces the StaticCallAssetProxy, which adds support for trading arbitrary bundles of assets to 0x protocol. Historically, only a single asset could be traded per each side of a trade. With the introduction of the MultiAssetProxy, users will be able to trade multiple ERC721 assets or even mix ERC721 and ERC20 assets within a single order.`, + url: 'https://blog.0xproject.com/zeip-23-trade-bundles-of-assets-fe69eb3ed960', + voteStartDate: moment().subtract(2, 'days'), + voteEndDate: moment().add(3, 'days'), + benefit: { + title: 'Benefit', + summary: `Supporting trades for bundles of assets has been one of the most commonly requested features since the launch of 0x v2. The idea for this feature originated from discussions with gaming and NFT related projects. However, this upgrade also provides utility to relayers for prediction markets or baskets of tokens. The MultiAssetProxy will enable brand new ways of trading.`, + rating: 3, + links: [ + { + text: 'Technical detail', + url: 'https://github.com/0xProject/ZEIPs/issues/23', + }, + ], + }, + risks: { + title: 'Risk', + summary: `While the MultiAssetProxy’s code is relatively straightforward and has successfully undergone a full third-party audit, a bug within the code could result in the loss of user funds. Deploying the MultiAssetProxy is a hot upgrade that requires modifying the state of existing contracts within 0x protocol. The contracts being modified contain allowances to many users’ tokens. We encourage the community to verify the code, as well as the state changes.`, + rating: 2, + links: [ + { + text: 'View Code', + url: + 'https://github.com/0xProject/0x-monorepo/blob/development/contracts/asset-proxy/contracts/src/MultiAssetProxy.sol#L25', + }, + { + text: 'View Audit', + url: 'https://github.com/ConsenSys/0x-audit-report-2018-12', + }, + ], + }, + }, + 25: { + zeipId: 25, + title: 'Support ERC-1155 MultiToken Standard', + summary: `This ZEIP introduces the StaticCallAssetProxy, which adds support for trading arbitrary bundles of assets to 0x protocol. Historically, only a single asset could be traded per each side of a trade. With the introduction of the MultiAssetProxy, users will be able to trade multiple ERC721 assets or even mix ERC721 and ERC20 assets within a single order.`, + url: 'https://blog.0xproject.com/zeip-23-trade-bundles-of-assets-fe69eb3ed960', + voteStartDate: moment().subtract(2, 'days'), + voteEndDate: moment().add(3, 'days'), + benefit: { + title: 'Benefit', + summary: `Supporting trades for bundles of assets has been one of the most commonly requested features since the launch of 0x v2. The idea for this feature originated from discussions with gaming and NFT related projects. However, this upgrade also provides utility to relayers for prediction markets or baskets of tokens. The MultiAssetProxy will enable brand new ways of trading.`, + rating: 3, + links: [ + { + text: 'Technical detail', + url: 'https://github.com/0xProject/ZEIPs/issues/23', + }, + ], + }, + risks: { + title: 'Risk', + summary: `While the MultiAssetProxy’s code is relatively straightforward and has successfully undergone a full third-party audit, a bug within the code could result in the loss of user funds. Deploying the MultiAssetProxy is a hot upgrade that requires modifying the state of existing contracts within 0x protocol. The contracts being modified contain allowances to many users’ tokens. We encourage the community to verify the code, as well as the state changes.`, + rating: 2, + links: [ + { + text: 'View Code', + url: + 'https://github.com/0xProject/0x-monorepo/blob/development/contracts/asset-proxy/contracts/src/MultiAssetProxy.sol#L25', + }, + { + text: 'View Audit', + url: 'https://github.com/ConsenSys/0x-audit-report-2018-12', + }, + ], + }, + }, +}; + +export const ZERO_TALLY: TallyInterface = { + yes: new BigNumber(0), + no: new BigNumber(0), +}; diff --git a/packages/website/ts/pages/governance/governance.tsx b/packages/website/ts/pages/governance/governance.tsx index 25af727d03..fb933e393e 100644 --- a/packages/website/ts/pages/governance/governance.tsx +++ b/packages/website/ts/pages/governance/governance.tsx @@ -1,6 +1,7 @@ import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; +import { RouteComponentProps } from 'react-router-dom'; import styled from 'styled-components'; import { Banner } from 'ts/components/banner'; @@ -11,11 +12,13 @@ import { Column, FlexWrap, Section } from 'ts/components/newLayout'; import { SiteWrap } from 'ts/components/siteWrap'; import { Heading, Paragraph } from 'ts/components/text'; import { Countdown } from 'ts/pages/governance/countdown'; +import { Proposal, proposals } from 'ts/pages/governance/data'; import { ModalVote } from 'ts/pages/governance/modal_vote'; import { RatingBar } from 'ts/pages/governance/rating_bar'; import { VoteInfo, VoteValue } from 'ts/pages/governance/vote_form'; import { VoteStats } from 'ts/pages/governance/vote_stats'; import { colors } from 'ts/style/colors'; +import { TallyInterface } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { documentConstants } from 'ts/utils/document_meta_constants'; import { utils } from 'ts/utils/utils'; @@ -24,15 +27,6 @@ interface LabelInterface { [key: number]: string; } -export interface TallyInterface { - zeip?: string; - yes?: BigNumber; - no?: BigNumber; - blockNumber?: string; - totalVotes?: string; - totalBalance?: BigNumber; -} - interface State { isContactModalOpen: boolean; isVoteModalOpen: boolean; @@ -54,54 +48,20 @@ const riskLabels: LabelInterface = { 3: 'High Risk', }; -const proposalData = { - zeipId: 23, - title: 'ZEIP-23: Trade Bundles of Assets', - summary: `This ZEIP introduces the MultiAssetProxy, which adds support for trading arbitrary bundles of assets to 0x protocol. Historically, only a single asset could be traded per each side of a trade. With the introduction of the MultiAssetProxy, users will be able to trade multiple ERC721 assets or even mix ERC721 and ERC20 assets within a single order.`, - url: 'https://blog.0xproject.com/zeip-23-trade-bundles-of-assets-fe69eb3ed960', - votingDeadline: 1551142800, - benefit: { - title: 'Benefit', - summary: `Supporting trades for bundles of assets has been one of the most commonly requested features since the launch of 0x v2. The idea for this feature originated from discussions with gaming and NFT related projects. However, this upgrade also provides utility to relayers for prediction markets or baskets of tokens. The MultiAssetProxy will enable brand new ways of trading.`, - rating: 3, - links: [ - { - text: 'Technical detail', - url: 'https://github.com/0xProject/ZEIPs/issues/23', - }, - ], - }, - risks: { - title: 'Risk', - summary: `While the MultiAssetProxy’s code is relatively straightforward and has successfully undergone a full third-party audit, a bug within the code could result in the loss of user funds. Deploying the MultiAssetProxy is a hot upgrade that requires modifying the state of existing contracts within 0x protocol. The contracts being modified contain allowances to many users’ tokens. We encourage the community to verify the code, as well as the state changes.`, - rating: 2, - links: [ - { - text: 'View Code', - url: - 'https://github.com/0xProject/0x-monorepo/blob/development/contracts/asset-proxy/contracts/src/MultiAssetProxy.sol#L25', - }, - { - text: 'View Audit', - url: 'https://github.com/ConsenSys/0x-audit-report-2018-12', - }, - ], - }, -}; - -export class Governance extends React.Component { +export class Governance extends React.Component> { public state: State = { isContactModalOpen: false, isVoteModalOpen: false, isWalletConnected: false, isVoteReceived: false, providerName: 'Metamask', - tally: { - totalBalance: new BigNumber(0), - yes: new BigNumber(0), - no: new BigNumber(0), - }, }; + private readonly _proposalData: Proposal; + constructor(props: RouteComponentProps) { + super(props); + const zeipId = parseInt(props.match.params.zeip.split('-')[1], 10); + this._proposalData = proposals[zeipId]; + } public componentDidMount(): void { // tslint:disable:no-floating-promises this._fetchVoteStatusAsync(); @@ -113,12 +73,12 @@ export class Governance extends React.Component {
- - {proposalData.title} - {proposalData.summary} + + {this._proposalData.title} + {this._proposalData.summary} + + ); + default: + return Loading...; + } +}; + +interface VoteStatusTextBaseProps { + color?: string; +} + +const VoteStatusTextBase = styled.div` + font-size: 22px; + color: ${props => props.color}; + margin-bottom: 12px; + span { + position: relative; + margin-right: 8px; + top: 1px; + } +`; diff --git a/packages/website/ts/pages/vote_placeholder.tsx b/packages/website/ts/pages/vote_placeholder.tsx deleted file mode 100644 index 4e5de71ee3..0000000000 --- a/packages/website/ts/pages/vote_placeholder.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; -import styled from 'styled-components'; - -import { Button } from 'ts/components/button'; -import { DocumentTitle } from 'ts/components/document_title'; -import { Column, Section } from 'ts/components/newLayout'; -import { SiteWrap } from 'ts/components/siteWrap'; -import { Heading, Paragraph } from 'ts/components/text'; -import { constants } from 'ts/utils/constants'; -import { documentConstants } from 'ts/utils/document_meta_constants'; - -export const VotePlaceholder = () => ( - - -
- - - Come back on February 18th to vote - - - 0x is conducting a vote on ZEIP-23, which adds the ability to trade bundles of ERC-20 and ERC-721 - tokens via the 0x protocol. Integrating ZEIP-23 requires a modification to the protocol’s smart - contract pipeline, which has access to live digital assets. All ZRX token holders have the right to - vote on this improvement proposal. - - - - - -
- -); - -const LinkWrap = styled.div` - display: inline-flex; - margin-top: 60px; - - a + a { - margin-left: 60px; - } -`; diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 0c39d9eea0..286334bac9 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -765,4 +765,16 @@ export interface Package { description: string; link: ALink; } + +export type VoteOutcome = 'accepted' | 'rejected'; +export type VoteTime = 'upcoming' | 'happening'; +export type VoteStatus = VoteOutcome | VoteTime; +export type ZeipId = 39 | 24 | 23 | 25; + +export interface TallyInterface { + zeipId?: ZeipId; + yes?: BigNumber; + no?: BigNumber; + blockNumber?: string; +} // tslint:disable:max-file-line-count