Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dot voting demo fixes #1176

Merged
merged 5 commits into from
Aug 23, 2019
Merged

Dot voting demo fixes #1176

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cc4fdef
UI changes made in preparation for demo presentation
rkzel Aug 16, 2019
c0cb519
moved Vote panel to App
rkzel Aug 16, 2019
1c37022
fixed slider width
rkzel Aug 16, 2019
ddf5831
not all votes have balance. this code is on rinkeby now.
rkzel Aug 17, 2019
c8e71c2
post-review fixes
rkzel Aug 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 65 additions & 2 deletions apps/dot-voting/app/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,27 @@ import React from 'react'
import PropTypes from 'prop-types'
import { AppBar, AppView, Main, SidePanel } from '@aragon/ui'
import Decisions from './Decisions'
import tokenBalanceOfAbi from './abi/token-balanceof.json'
import tokenDecimalsAbi from './abi/token-decimals.json'
import tokenSymbolAbi from './abi/token-symbol.json'
import { hasLoadedVoteSettings } from './utils/vote-settings'
import { NewPayoutVotePanelContent } from './components/Panels'
import { VotePanelContent } from './components/Panels'
import { AppTitle, networkContextType } from '../../../shared/ui'
import { useAragonApi } from '@aragon/api-react'
import { IdentityProvider } from '../../../shared/identity'

const tokenAbi = [].concat(tokenBalanceOfAbi, tokenDecimalsAbi, tokenSymbolAbi)

const initialState = {
template: null,
templateData: {},
stepIndex: 0,
settingsLoaded: false,
panelActive: false,
currentVoteId: -1,
currentVote: null,
voteSidebarOpened: false,
}

class App extends React.Component {
Expand Down Expand Up @@ -48,6 +57,7 @@ class App extends React.Component {
super(props)
this.state = {
...initialState,
tokenContract: this.getTokenContract(this.props.tokenAddress),
}
}

Expand All @@ -59,7 +69,7 @@ class App extends React.Component {
},
}
}

rkzel marked this conversation as resolved.
Show resolved Hide resolved
componentWillReceiveProps(nextProps) {
const { settingsLoaded } = this.state
// Is this the first time we've loaded the settings?
Expand All @@ -68,8 +78,16 @@ class App extends React.Component {
settingsLoaded: true,
})
}
if (nextProps.tokenAddress !== this.props.tokenAddress) {
this.setState({
tokenContract: this.getTokenContract(nextProps.tokenAddress),
})
}
}

getTokenContract(tokenAddress) {
return tokenAddress && this.props.api.external(tokenAddress, tokenAbi)
}

handlePanelOpen = () => {
this.setState({ panelActive: true })
}
Expand All @@ -87,6 +105,31 @@ class App extends React.Component {
.requestAddressIdentityModification(address)
.toPromise()
}

handleVoteOpen = selectedVote => {
this.setState({
currentVoteId: selectedVote.voteId,
currentVote: selectedVote,
voteVisible: true,
voteSidebarOpened: false,
})
}

handleVote = (voteId, supports) => {
this.props.api.vote(voteId, supports).toPromise()
this.handleVoteClose()
}
handleVoteTransitionEnd = opened => {
this.setState(opened ? { voteSidebarOpened: true } : { currentVoteId: -1, currentVote: null })
}

handleVoteClose = () => {
this.setState({
currentVoteId: -1,
currentVote: null,
})
}

render() {
const { displayMenuButton = false } = this.props
return (
Expand Down Expand Up @@ -115,6 +158,7 @@ class App extends React.Component {
pctBase={this.props.pctBase / 10 ** 16}
tokenAddress={this.props.tokenAddress}
userAccount={this.props.connectedAccount}
onSelectVote={this.handleVoteOpen}
/>
</AppView>

Expand All @@ -125,6 +169,25 @@ class App extends React.Component {
>
<NewPayoutVotePanelContent />
</SidePanel>

{this.state.currentVote && (<SidePanel
title={'Dot Vote #' + this.state.currentVoteId}
opened={!!this.state.currentVote}
onClose={this.handleVoteClose}
onTransitionEnd={this.handleVoteTransitionEnd}
>
<VotePanelContent
app={this.props.api}
vote={this.state.currentVote}
user={this.props.connectedAccount}
ready={this.state.voteSidebarOpened}
tokenContract={this.state.tokenContract}
onVote={this.handleVote}
minParticipationPct={this.props.minParticipationPct / 10 ** 16}
/>
</SidePanel>
)}

</IdentityProvider>
</Main>
)
Expand Down
59 changes: 3 additions & 56 deletions apps/dot-voting/app/Decisions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ import tokenSymbolAbi from './abi/token-symbol.json'
import { safeDiv } from './utils/math-utils'
import { hasLoadedVoteSettings } from './utils/vote-settings'
import { isBefore } from 'date-fns'
import { EmptyStateCard, SidePanel } from '@aragon/ui'
import { VotePanelContent } from './components/Panels'
import { EmptyStateCard } from '@aragon/ui'
import { EMPTY_CALLSCRIPT, getQuorumProgress, getTotalSupport } from './utils/vote-utils'

const tokenAbi = [].concat(tokenBalanceOfAbi, tokenDecimalsAbi, tokenSymbolAbi)
Expand All @@ -20,21 +19,19 @@ const EmptyIcon = () => <img src={emptyIcon} alt="" />
class Decisions extends React.Component {
static propTypes = {
app: PropTypes.object,
tokenAddress: PropTypes.string.isRequired,
userAccount: PropTypes.string.isRequired,
votes: PropTypes.arrayOf(PropTypes.object).isRequired,
entries: PropTypes.arrayOf(PropTypes.object).isRequired,
minParticipationPct: PropTypes.number.isRequired,
pctBase: PropTypes.number.isRequired,
voteTime: PropTypes.number.isRequired,
onSelectVote: PropTypes.func.isRequired,
}
constructor(props) {
super(props)
this.state = {
createVoteVisible: false,
currentVoteId: 0,
settingsLoaded: true,
tokenContract: this.getTokenContract(props.tokenAddress),
voteVisible: false,
voteSidebarOpened: false,
}
Expand Down Expand Up @@ -62,11 +59,6 @@ class Decisions extends React.Component {
settingsLoaded: true,
})
}
if (nextProps.tokenAddress !== this.props.tokenAddress) {
this.setState({
tokenContract: this.getTokenContract(nextProps.tokenAddress),
})
}
}

getTokenContract(tokenAddress) {
Expand All @@ -82,22 +74,6 @@ class Decisions extends React.Component {
handleCreateVoteClose = () => {
this.setState({ createVoteVisible: false })
}
handleVoteOpen = voteId => {
const exists = this.props.votes.some(vote => voteId === vote.voteId)
if (!exists) return
this.setState({
currentVoteId: voteId,
voteVisible: true,
voteSidebarOpened: false,
})
}
handleVote = (voteId, supports) => {
this.props.app.vote(voteId, supports).toPromise()
this.handleVoteClose()
}
handleVoteClose = () => {
this.setState({ voteVisible: false })
}
handleVoteTransitionEnd = opened => {
rkzel marked this conversation as resolved.
Show resolved Hide resolved
this.setState(opened ? { voteSidebarOpened: true } : { currentVoteId: -1 })
}
Expand All @@ -111,18 +87,12 @@ class Decisions extends React.Component {
app,
pctBase,
minParticipationPct,
userAccount,
votes,
entries,
voteTime,
} = this.props
const {
createVoteVisible,
currentVoteId,
settingsLoaded,
tokenContract,
voteSidebarOpened,
voteVisible,
} = this.state

const displayVotes = settingsLoaded && votes.length > 0
Expand Down Expand Up @@ -150,16 +120,12 @@ class Decisions extends React.Component {
}
})
: votes
const currentVote =
currentVoteId === -1
? null
: preparedVotes.find(vote => vote.voteId === currentVoteId)

return (
<StyledDecisions>
<ScrollWrapper>
{displayVotes ? (
<Votes votes={preparedVotes} onSelectVote={this.handleVoteOpen} app={app}/>
<Votes votes={preparedVotes} onSelectVote={this.props.onSelectVote} app={app}/>
rkzel marked this conversation as resolved.
Show resolved Hide resolved
) : (
<div
style={{
Expand All @@ -178,25 +144,6 @@ class Decisions extends React.Component {
</div>
)}
</ScrollWrapper>

{displayVotes && currentVote &&(
<SidePanel
title={'Dot Vote #' + currentVote.voteId}
opened={Boolean(!createVoteVisible && voteVisible)}
onClose={this.handleVoteClose}
onTransitionEnd={this.handleVoteTransitionEnd}
>
<VotePanelContent
app={app}
vote={currentVote}
user={userAccount}
ready={voteSidebarOpened}
tokenContract={tokenContract}
onVote={this.handleVote}
minParticipationPct={minParticipationPct}
/>
</SidePanel>
)}
</StyledDecisions>
)
}
Expand Down
4 changes: 2 additions & 2 deletions apps/dot-voting/app/components/Card/Vote.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ class Vote extends React.Component {
}

handleVoteClick = () => {
this.props.onSelectVote(this.props.vote.voteId)
this.props.onSelectVote(this.props.vote)
}

handleExecuteVote = () => {
Expand Down Expand Up @@ -142,7 +142,7 @@ class Vote extends React.Component {
</Status>
<Status>
<FieldTitle>End date</FieldTitle>
<span>{format(endDate, 'MMM dd yyyy HH:mm')}</span>
<span>{format(endDate, 'MMM DD YYYY HH:mm')}</span>
rkzel marked this conversation as resolved.
Show resolved Hide resolved
</Status>
</React.Fragment>
)}
Expand Down
41 changes: 17 additions & 24 deletions apps/dot-voting/app/components/Panels/VotePanelContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ class VotePanelContent extends React.Component {
const showInfo = type === 'allocation' || type === 'curation'

const formatDate = date =>
format(date, 'dd/MM/yy') + ' at ' + format(date, 'HH:mm') + 'UTC'
format(date, 'DD/MM/YY') + ' at ' + format(date, 'HH:mm') + 'UTC'

return (
<div>
Expand Down Expand Up @@ -261,9 +261,9 @@ class VotePanelContent extends React.Component {
tokenSupply={totalVoters}
/>
<PastDate
dateTime={format(endDate, 'yyyy-MM-dd\'T\'HH:mm:ss.SSSxxx')}
dateTime={format(endDate, 'YYYY-MM-DD\'T\'HH:mm:ss.SSSxxx')}
>
{format(endDate, 'MMM dd yyyy HH:mm')}
{format(endDate, 'MMM DD YYYY HH:mm')}
</PastDate>

</React.Fragment>
Expand Down Expand Up @@ -320,16 +320,17 @@ class VotePanelContent extends React.Component {
{this.state.voteOptions.map((option, idx) => (
<div key={idx}>
<SliderAndValueContainer>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<div css={'display: flex; flex-direction: column; width: 100%'}>
<Text size="small">{option.label}</Text>
<div
style={{
display: 'flex',
margin: '0.5rem 0 1rem 0',
}}
css={`
display: flex;
margin: 0.5rem 0 1rem 0;
justify-content: space-between;
width: 100%;
`}
>
<Slider
width="270px"
value={option.sliderValue}
onUpdate={value => this.sliderUpdate(value, idx)}
/>
Expand Down Expand Up @@ -392,6 +393,11 @@ class VotePanelContent extends React.Component {
key={index}
progress={safeDiv(parseInt(option.value, 10), totalSupport)}
hasBalance={voteBalance !== undefined}
balanceSplit={
BigNumber(
safeDiv(parseInt(option.value, 10), totalSupport) * displayBalance
).dp(2).toString() + ' ' + tokenSymbol
}
// TODO: Use IdentityBadge for addresses labels once it is integrated on dev branch
// (since we don't have a block explorer network context to plug-in yet)
// Then truncate the address
Expand Down Expand Up @@ -444,15 +450,6 @@ class VotePanelContent extends React.Component {
</span>
}
/>
{voteBalance !== undefined &&
<BalanceSplit>
{
BigNumber(
safeDiv(parseInt(option.value, 10), totalSupport) * displayBalance
).dp(2).toString() + ' ' + tokenSymbol
}
</BalanceSplit>
}
</React.Fragment>
))}
{open && (userBalance === '0') &&
Expand Down Expand Up @@ -506,7 +503,9 @@ const ValueContainer = styled.div`

const SliderAndValueContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
width: 100%
`

const SubmitButton = styled(Button)`
Expand Down Expand Up @@ -534,12 +533,6 @@ const Part = styled.div`
}
`

const BalanceSplit = styled.div`
display: inline-block;
width: 25%;
text-align: right;
`

const Creator = styled.div`
display: flex;
align-items: center;
Expand Down
Loading