diff --git a/apps/voting/app/src/components/NewVotePanelContent.js b/apps/voting/app/src/components/NewVotePanelContent.js index f671554204..b9c830a95c 100644 --- a/apps/voting/app/src/components/NewVotePanelContent.js +++ b/apps/voting/app/src/components/NewVotePanelContent.js @@ -1,9 +1,10 @@ import React from 'react' import styled from 'styled-components' -import { Button, Info, Text, TextInput, Field } from '@aragon/ui' +import { TabBar, Button, Info, Text, TextInput, Field } from '@aragon/ui' const initialState = { question: '', + screenIndex: 0, } class NewVotePanelContent extends React.Component { @@ -23,6 +24,9 @@ class NewVotePanelContent extends React.Component { this.setState({ ...initialState }) } } + handleTabChange = screenIndex => { + this.setState({ screenIndex }) + } handleQuestionChange = event => { this.setState({ question: event.target.value }) } @@ -31,30 +35,61 @@ class NewVotePanelContent extends React.Component { this.props.onCreateVote(this.state.question.trim()) } render() { - const { question } = this.state + const { question, screenIndex } = this.state return (
- - They don’t have any direct repercussion on the organization. - -
- - (this.questionInput = question)} - value={question} - onChange={this.handleQuestionChange} - required - wide - /> - - - - If you are allowed to directly create this vote, you will - automatically vote yes for it. - -
+
+ +
+ {screenIndex === 0 && ( +
+ + (this.questionInput = question)} + value={question} + onChange={this.handleQuestionChange} + required + wide + /> + + +
+ +
+ Questions are used for signaling and don’t have any direct + repercussions on the organization. +
+ +
+
+ )} + {screenIndex === 1 && ( +
+ +
+ Any actions that require consensus, such as + withdrawing funds or minting tokens, will automatically create a + binding vote. +
+ +
+ )}
) } @@ -64,10 +99,4 @@ const Form = styled.form` margin-top: 20px; ` -const Warning = styled(Text.Paragraph).attrs({ - size: 'xsmall', -})` - margin-top: 10px; -` - export default NewVotePanelContent diff --git a/apps/voting/app/src/components/VoteStatus.js b/apps/voting/app/src/components/VoteStatus.js index 776a26854a..8c2bdc3ea2 100644 --- a/apps/voting/app/src/components/VoteStatus.js +++ b/apps/voting/app/src/components/VoteStatus.js @@ -8,7 +8,7 @@ import { VOTE_STATUS_ACCEPTED, VOTE_STATUS_EXECUTED, } from '../vote-types' -import { getVoteStatus } from '../vote-utils' +import { isVoteAction, getVoteStatus } from '../vote-utils' const ATTRIBUTES = { [VOTE_STATUS_ONGOING]: { @@ -40,7 +40,14 @@ const ATTRIBUTES = { const VoteStatus = ({ cardStyle, vote }) => { const settings = useSettings() const status = getVoteStatus(vote, settings.pctBase) - const { label, Icon, color, bold } = ATTRIBUTES[status] + const { Icon, color, bold } = ATTRIBUTES[status] + + const label = + !isVoteAction(vote) && + (status === VOTE_STATUS_EXECUTED || status === VOTE_STATUS_ACCEPTED) + ? 'Accepted' + : ATTRIBUTES[status].label + return (
@@ -73,9 +76,25 @@ const VotingCard = React.memo( -
- View vote -
+
+
+ {action ? : } +
+ +
) @@ -102,6 +121,18 @@ VotingCard.defaultProps = { onOpen: () => {}, } +const BadgeInformative = () => ( + + Informative + +) + +const BadgeAction = () => ( + + Action + +) + const OptionLabel = ({ label, isConnectedAccount }) => ( {label} @@ -121,15 +152,6 @@ const Header = styled.div` padding-left: 5px; ` -const SecondaryButton = styled(Button).attrs({ - mode: 'secondary', - compact: true, -})` - background: ${color(theme.secondaryBackground) - .alpha(0.8) - .cssa()}; -` - const Card = styled.div` display: flex; flex-direction: column; @@ -159,12 +181,6 @@ const PastDate = styled.time` color: #98a0a2; ` -const Footer = styled.div` - display: flex; - justify-content: flex-end; - flex-shrink: 0; -` - const You = styled(Badge.Identity).attrs({ children: 'Your vote' })` margin-left: 5px; font-size: 9px; diff --git a/apps/voting/app/src/vote-utils.js b/apps/voting/app/src/vote-utils.js index 22f559ba05..cf87b7c359 100644 --- a/apps/voting/app/src/vote-utils.js +++ b/apps/voting/app/src/vote-utils.js @@ -9,8 +9,15 @@ import { VOTE_STATUS_EXECUTED, } from './vote-types' -export const getAccountVote = (account, voters) => - voters[account] || VOTE_ABSENT +const EMPTY_SCRIPT = '0x00000001' + +export function isVoteAction(vote) { + return vote.data && vote.data.script && vote.data.script !== EMPTY_SCRIPT +} + +export function getAccountVote(account, voters) { + return voters[account] || VOTE_ABSENT +} export function isVoteOpen(vote, date) { const { executed, endDate } = vote.data