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.

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

Jordan/1502 page proposal #1531

Merged
merged 23 commits into from
Nov 9, 2018
Merged
Changes from 9 commits
Commits
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
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
* [\#1464](https://github.com/cosmos/voyager/issues/1464) Added governance transactions to tx history page @fedekunze
* [\1401](https://github.com/cosmos/voyager/issues/1401) Display governance proposals index. @fedekunze
* [\#1472](https://github.com/cosmos/voyager/issues/1472) Added mock functionality for redelegation @fedekunze + @faboweb
* [\1502](https://github.com/cosmos/voyager/issues/1502) A page for each proposal. @jbibla

### Changed

4 changes: 3 additions & 1 deletion app/src/renderer/components/common/TmBalance.vue
Original file line number Diff line number Diff line change
@@ -130,5 +130,7 @@ export default {

&.tab-selected
border-bottom 2px solid var(--tertiary)
color var(--bright)

a
color var(--bright)
</style>
39 changes: 30 additions & 9 deletions app/src/renderer/components/governance/LiProposal.vue
Original file line number Diff line number Diff line change
@@ -1,28 +1,49 @@
<template lang="pug">
tr.li-proposal.li-validator
td.li-proposal__value
h2 {{ proposal.title }}
p Status: {{ proposal.proposal_status }}
//- .proposal-profile__status(v-bind:class="statusColor" v-tooltip.top="proposal.proposal_status")
h2
router-link(:to="{ name: 'Proposal', params: { proposalId, proposal }}") {{ proposal.title }}
span.validator-profile__status(v-bind:class="statusColor" v-tooltip.top="status")
p {{ description }}
td {{ submitBlock }}
td.li-proposal__value.yes {{ proposal.tally_result.yes }}
td.li-proposal__value.no {{ proposal.tally_result.no }}
td.li-proposal__value.no_with_veto {{ proposal.tally_result.no_with_veto }}
td.li-proposal__value.abstain {{ proposal.tally_result.abstain }}
</template>

<script>
import num from "scripts/num"
export default {
name: `li-proposal`,
computed: {
statusColor() {
if (this.proposal.proposal_status === `Passed`) return `green`
if (this.proposal.proposal_status === `Rejected`) return `red`
else if (this.proposal.proposal_status === `Passed`) return `green`
if (this.proposal.proposal_status === `Active`) return `blue`
if (this.proposal.proposal_status === `Pending`) return `yellow`
},
// TODO redirect to proposal page
proposalLink() {
return {
name: ``
}
status() {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does this cover all the cases / is this true?

if (this.proposal.proposal_status === `Passed`)
return `This proposal has passed`

if (this.proposal.proposal_status === `Rejected`)
return `This proposal has been rejected and voting is closed`

if (this.proposal.proposal_status === `Active`)
return `Voting for this proposal is open`

if (this.proposal.proposal_status === `Pending`)
return `Deposits are open for this proposal`
},
description() {
return this.proposal.description.substring(0, 100)
},
submitBlock() {
return `#` + num.prettyInt(this.proposal.submit_block)
},
proposalId() {
return this.proposal.proposal_id
}
},
props: [`proposal`]
196 changes: 196 additions & 0 deletions app/src/renderer/components/governance/PageProposal.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
<template lang="pug">
tm-page(data-title='Proposal')
template(slot="menu-body"): tm-balance
div(slot="menu"): tm-tool-bar
router-link(to="/governance" exact): i.material-icons arrow_back

tm-data-error(v-if="!proposal")

template(v-else)
.validator-profile__header.validator-profile__section.proposal
.column.validator-profile__header__info
.row.validator-profile__header__name
.top.column
div.validator-profile__status-and-title
span.validator-profile__status(v-bind:class="statusColor" v-tooltip.top="status")
.validator-profile__header__name__title {{ proposal.title }}
.column.validator-profile__header__actions
tm-btn(v-if="button === 'vote'" value="Vote" color="primary" @click.native="vote")
tm-btn(v-if="button === 'deposit'" value="Deposit" color="primary" @click.native="deposit")
tm-btn(v-if="!button" disabled value="Deposit / Vote" color="primary")

.row.description
p This {{ proposalType }} proposal ({{ `#` + proposal.proposal_id }}) was submitted at block {{ submitBlock }} and voting started at {{ voteBlock }}.

.row.validator-profile__header__data.votes
dl.colored_dl
dt Deposit
dd {{ proposal.total_deposit[0].amount + ` ` + proposal.total_deposit[0].denom }}
.validator-profile__header__data__break
dl.colored_dl
dt Yes
dd {{ proposal.tally_result.yes }} / {{ yesPercentage }}
dl.colored_dl
dt No
dd {{ proposal.tally_result.no }} / {{ noPercentage }}
dl.colored_dl
dt No with Veto
dd {{ proposal.tally_result.no_with_veto }} / {{ noWithVetoPercentage }}
dl.colored_dl
dt Abstain
dd {{ proposal.tally_result.abstain }} / {{ abstainPercentage }}

.validator-profile__details.validator-profile__section
.column
.row
text-block(:content="proposal.description")
</template>

<script>
import num from "scripts/num"
import { TmBtn, TmFormStruct, TmPage, TmPart, TmToolBar } from "@tendermint/ui"
import TmBalance from "common/TmBalance"
import FieldVote from "common/TmFieldVote"
import TextBlock from "common/TextBlock"
export default {
name: `page-proposal`,
props: [`proposal`],
components: {
TmBalance,
TmBtn,
FieldVote,
TmFormStruct,
TmToolBar,
TmPage,
TmPart,
TextBlock
},
computed: {
proposalType() {
return this.proposal.proposal_type.toLowerCase()
},
submitBlock() {
return `#` + num.prettyInt(this.proposal.submit_block)
},
voteBlock() {
if (this.proposal.submit_block === this.proposal.voting_start_block) {
return `the same block`
} else {
return `block #` + num.prettyInt(this.proposal.voting_start_block)
}
},
button() {
if (this.proposal.proposal_status === `Passed`) return null

if (this.proposal.proposal_status === `Rejected`) return null

if (this.proposal.proposal_status === `Active`) return `vote`

if (this.proposal.proposal_status === `Pending`) return `deposit`
},
status() {
if (this.proposal.proposal_status === `Passed`)
return `This proposal has passed`

if (this.proposal.proposal_status === `Rejected`)
return `This proposal has been rejected and voting is closed`

if (this.proposal.proposal_status === `Active`)
return `Voting for this proposal is open`

if (this.proposal.proposal_status === `Pending`)
return `Deposits are open for this proposal`
Copy link
Contributor

@fedekunze fedekunze Nov 8, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deposits are always open as long as the proposal is open (i.e you can also deposit when the proposal is Active), in this case the proposal is Pending because it hasn't met the minimum deposit

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why would a user deposit if a proposal has received enough to open voting?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also said that... But you can ask @sunnya97

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we'll see what sunny says, but i don't think we should block on this.

},
statusColor() {
if (this.proposal.proposal_status === `Passed`) return `green`
if (this.proposal.proposal_status === `Rejected`) return `red`
if (this.proposal.proposal_status === `Active`) return `blue`
if (this.proposal.proposal_status === `Pending`) return `yellow`
},
totalVotes() {
return (
this.proposal.tally_result.yes +
this.proposal.tally_result.no +
this.proposal.tally_result.no_with_veto +
this.proposal.tally_result.abstain
)
},
yesPercentage() {
return num.percentInt(this.proposal.tally_result.yes / this.totalVotes)
},
noPercentage() {
return num.percentInt(this.proposal.tally_result.no / this.totalVotes)
},
noWithVetoPercentage() {
return num.percentInt(
this.proposal.tally_result.no_with_veto / this.totalVotes
)
},
abstainPercentage() {
return num.percentInt(
this.proposal.tally_result.abstain / this.totalVotes
)
}
},
data: () => ({
votePick: `abstain`,
voteVisible: false
}),
methods: {
vote(choice) {
this.votePick = choice
},
confirmVote() {
this.$store.commit(`notify`, {
title: `Voted '${this.votePick}'`,
body: `Your vote has been submitted.`
})
},
commentOnProposal(proposalId) {
this.$store.commit(`notify`, {
title: `View Discussion Thread`,
body: `TODO: Discuss ${proposalId} proposal on the forum.`
})
},
proposalIsSpam(proposalId) {
fedekunze marked this conversation as resolved.
Show resolved Hide resolved
this.$store.commit(`notify`, {
title: `Mark Proposal As Spam`,
body: `TODO: Mark ${proposalId} proposal as a spam attack.`
})
},
toggleVoteVisible() {
this.voteVisible = !this.voteVisible
}
}
}
</script>
<style lang="stylus">
@require '~variables';
.proposal
b
color var(--bright)

.validator-profile__status
position relative
left 0
margin-right 0.5rem

.description
max-width 500px

.votes
padding-top 2rem

.proposal-id
color var(--dim)
font-size 14px
margin 0
font-weight 400
padding-bottom 0.25rem

.text-block
padding 0

.row b
font-weight 500
</style>
6 changes: 6 additions & 0 deletions app/src/renderer/components/governance/TableProposals.vue
Original file line number Diff line number Diff line change
@@ -94,6 +94,12 @@ export default {
tooltip: `The title of the proposal`,
class: `proposal_title`
},
{
title: `Submitted Block`,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sorting by proposal id is the same

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

true, but i added a column for submit block instead. do you think showing ID as its own column would be better?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can discuss it later

value: `submit_block`,
tooltip: `Block height when proposal was submitted`,
class: `submit_block`
},
{
title: `Yes`,
value: `tally_result.yes`,
8 changes: 6 additions & 2 deletions app/src/renderer/components/staking/PageValidator.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template lang="pug">
tm-page(data-title="Validator")
template(slot="menu-body", v-if="config.devMode"): tm-balance
template(slot="menu-body"): tm-balance
div(slot="menu"): tm-tool-bar
router-link(to="/staking" exact): i.material-icons arrow_back

@@ -452,6 +452,7 @@ export default {
display inline-block
font-size h1
line-height h1
font-weight 400
padding 0 0.5rem 0.5rem 0

&__address
@@ -485,6 +486,9 @@ export default {
&.green
background var(--success)

&.blue
background var(--primary)

&__status-and-title
align-items center
display flex
@@ -519,7 +523,7 @@ export default {
align-items center
display flex
flex-direction column
width 6rem
width 6.3rem

&:not(:last-child)
margin-right 1rem
15 changes: 7 additions & 8 deletions app/src/renderer/routes.js
Original file line number Diff line number Diff line change
@@ -25,17 +25,16 @@ export default [
path: `/governance/proposals/new`,
component: governance(`ProposalsNewText`)
},
// TODO: enable once PageProposal is finished
// {
// path: `governance/proposals/:proposal`,
// name: `proposal`,
// component: governance(`Proposal`)
// },

{
path: `/governance/:proposalId`,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd change this to

Suggested change
path: `/governance/:proposalId`,
path: `/governance/proposals/:proposalId`,

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how come?

name: `Proposal`,
component: require(`./components/governance/PageProposal`).default,
props: true
},
// STAKE
{
path: `/staking`,
name: `staking`,
name: `Staking`,
component: staking(`Staking`),
redirect: `/staking/my-delegations/`,
children: [
Original file line number Diff line number Diff line change
@@ -8,12 +8,22 @@ exports[`LiProposal has the expected html structure 1`] = `
class="li-proposal__value"
>
<h2>
Proposal Title
<router-link
to="[object Object]"
>
Proposal Title
</router-link>
</h2>
<span
class="validator-profile__status green"
/>
<p>
Status: Passed
Proposal description
</p>
</td>
<td>
#120
</td>
<td
class="li-proposal__value yes"
>
Loading