david+fede+jordan/1402-Proposal creation

CHANGELOG.md

@@ -19,6 +19,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
+* [\#1402](https://github.com/cosmos/voyager/issues/1402) Proposal creation through modal @fedekunze + @NodeGuy + @jbibla
 * [\#1501](https://github.com/cosmos/voyager/issues/1501) Vote on proposals through modal @fedekunze + @jbibla
 * [\#1567](https://github.com/cosmos/voyager/pull/1567) Various refactors on `main`, `node` and `lcdClient`. @NodeGuy
 * [\#1502](https://github.com/cosmos/voyager/issues/1502) A page for each proposal. @jbibla
@@ -61,6 +62,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 * [\#1131](https://github.com/cosmos/voyager/issues/1131) Display only error message on notifications @fedekunze
 * [\#1440](https://github.com/cosmos/voyager/issues/1440) Fixed an error that prevented disconnecting from the RPC websocket if it wasn't defined @fedekunze
 * [\#1460](https://github.com/cosmos/voyager/issues/1460) Removing release-candidate tag when publishing @faboweb
+* [\#1402](https://github.com/cosmos/voyager/issues/1402) Fixed minor issues in voting and deposit @fedekunze
 * [\#1574](https://github.com/cosmos/voyager/issues/1574) Fixed typo on mocked governance txs that prevented the execution of the query @fedekunze
 * [\#1575](https://github.com/cosmos/voyager/issues/1575) Fixed tags on governace transactions query @fedekunze
 

app/src/renderer/components/common/PagePreferences.vue

@@ -1,6 +1,8 @@
 <template lang="pug">
 tm-page(data-title="Preferences")
- div(slot="menu"): vm-tool-bar
+ template(slot="menu-body")
+ tm-balance
+ vm-tool-bar
 
  tm-part(title='Settings')
  tm-list-item(type="field" title="Select network to connect to")
@@ -48,11 +50,13 @@ tm-page(data-title="Preferences")
 import { mapGetters } from "vuex"
 import { TmListItem, TmBtn, TmPage, TmPart, TmField } from "@tendermint/ui"
 import VmToolBar from "common/VmToolBar"
+import TmBalance from "common/TmBalance"
 import TmModal from "common/TmModal"
 
 export default {
  name: `page-preferences`,
  components: {
+ TmBalance,
  TmBtn,
  TmField,
  TmListItem,

app/src/renderer/components/common/TmBalance.vue

@@ -26,6 +26,8 @@
  :class="{'tab-selected': $route.name === tab}",
  )
  router-link(:to="{name: tab}") {{ tab }}
+
+ slot
 </template>
 <script>
 import num from "scripts/num"
@@ -133,4 +135,9 @@ export default {
 
  a
  color var(--bright)
+
+.tm-btn
+ position absolute
+ right 0rem
+ bottom 1rem
 </style>

app/src/renderer/components/common/VmToolBar.vue

@@ -1,25 +1,21 @@
 <template lang="pug">
- tm-tool-bar
+ .tm-tool-bar
  a.back(@click="back" :disabled="user.history.length === 0" v-tooltip.bottom="'Back'")
  i.material-icons arrow_back
  slot
  a.help(@click="enableModalHelp" v-tooltip.bottom="'Help'")
  i.material-icons help_outline
- router-link.settings(to="/preferences" v-tooltip.bottom="'Preferences'")
- i.material-icons#settings settings
+ a#settings(@click="goToPreferences" v-tooltip.bottom="'Preferences'")
+ i.material-icons settings
  a#signOut-btn(@click="signOut" v-tooltip.bottom.end="'Sign Out'")
  i.material-icons exit_to_app
 </template>
 
 <script>
-import { TmToolBar } from "@tendermint/ui"
 import { mapGetters, mapMutations } from "vuex"
 export default {
  // the name needs to be different from TmToolBar (tm-tool-bar) or else recursive rendering takes place
  name: `vm-tool-bar`,
- components: {
- TmToolBar
- },
  methods: {
  ...mapMutations([`pauseHistory`, `popHistory`]),
  back() {
@@ -35,6 +31,9 @@ export default {
  },
  signOut() {
  this.$store.dispatch(`signOut`)
+ },
+ goToPreferences() {
+ this.$router.push(`/preferences`)
  }
  },
  computed: {
@@ -43,6 +42,21 @@ export default {
 }
 </script>
 <style lang="stylus">
-.tm-tool-bar-container a
- margin-top 0 !important
+
+.tm-tool-bar
+ height 100%
+
+.tm-page-header-text
+ padding-right 1rem
+
+ a
+ cursor pointer
+
+ i
+ padding 1rem
+ color var(--dim)
+
+ &:hover
+ color var(--bright)
+
 </style>

app/src/renderer/components/governance/ModalDeposit.vue

@@ -85,7 +85,13 @@ export default {
  this.$emit(`update:showModalDeposit`, false)
  },
  onDeposit() {
- this.$emit(`submitDeposit`, { amount: this.amount })
+ let amount = [
+ {
+ denom: this.denom,
+ amount: String(this.amount)
+ }
+ ]
+ this.$emit(`submitDeposit`, { amount })
  this.close()
  }
  },

app/src/renderer/components/governance/ModalPropose.vue

@@ -0,0 +1,207 @@
+<template lang="pug">
+ .modal-propose#modal-propose(v-click-outside="close")
+ .modal-propose-header
+ img.icon(class='modal-propose-atom' src="~assets/images/cosmos-logo.png")
+ span.tm-modal-title Create Proposal
+ .tm-modal-icon.tm-modal-close#closeBtn(@click="close()")
+ i.material-icons close
+
+ tm-form-group.page-proposal-form-group
+ span Title
+ tm-field#title(
+ type="text"
+ placeholder="Proposal title"
+ v-model="title"
+ v-focus)
+
+ tm-form-group.page-proposal-form-group
+ span Description
+ tm-field#description(
+ type="textarea"
+ placeholder="Write your proposal here..."
+ v-model="description")
+
+ tm-form-group.modal-propose-form-group(
+ field-id='amount')
+ span Deposit amount
+ tm-field#denom(
+ type="text"
+ :placeholder="denom"
+ readonly)
+
+ tm-field#amount(
+ type="number"
+ :max="balance"
+ :min="0"
+ step="any"
+ v-model="amount"
+ v-focus)
+
+ .modal-propose-footer
+ tm-btn#submit-proposal(
+ @click.native="onPropose"
+ :disabled="$v.$invalid"
+ color="primary"
+ value="Submit proposal"
+ size="lg")
+</template>
+
+<script>
+import { mapGetters } from "vuex"
+import ClickOutside from "vue-click-outside"
+import {
+ minLength,
+ maxLength,
+ required,
+ between
+} from "vuelidate/lib/validators"
+import { isEmpty, trim } from "lodash"
+import Modal from "common/TmModal"
+import { TmBtn, TmField, TmFormGroup } from "@tendermint/ui"
+
+const isValid = type =>
+ type === `Text` || type === `ParameterChange` || type === `SoftwareUpgrade`
+
+const notBlank = text => !isEmpty(trim(text))
+
+export default {
+ name: `modal-propose`,
+ props: [`denom`],
+ computed: {
+ // TODO: get coin denom from governance params
+ ...mapGetters([`wallet`]),
+ balance() {
+ // TODO: refactor to get the selected coin when multicooin deposit is enabled
+ if (!this.wallet.balancesLoading && !!this.wallet.balances.length) {
+ let balance = this.wallet.balances.find(
+ coin => coin.denom === this.denom
+ )
+ if (balance) return parseFloat(balance.amount)
+ }
+ return 0
+ }
+ },
+ components: {
+ Modal,
+ TmBtn,
+ TmField,
+ TmFormGroup
+ },
+ data: () => ({
+ titleMinLength: 1,
+ titleMaxLength: 64,
+ descriptionMinLength: 1,
+ descriptionMaxLength: 200,
+ title: ``,
+ description: ``,
+ type: `Text`,
+ amount: 0
+ }),
+ validations() {
+ return {
+ title: {
+ required,
+ minLength(x) {
+ return minLength(this.titleMinLength)(x)
+ },
+ maxLength(x) {
+ return maxLength(this.titleMaxLength)(x)
+ },
+ notBlank
+ },
+ description: {
+ required,
+ minLength(x) {
+ return minLength(this.descriptionMinLength)(x)
+ },
+ maxLength(x) {
+ return maxLength(this.descriptionMaxLength)(x)
+ },
+ notBlank
+ },
+ type: {
+ isValid
+ },
+ amount: {
+ required,
+ between: between(
+ 0.0000000001,
+ this.balance > 0 ? this.balance : 0.0000000001
+ )
+ }
+ }
+ },
+ methods: {
+ close() {
+ this.$emit(`update:showModalPropose`, false)
+ },
+ onPropose() {
+ this.$emit(`createProposal`, {
+ title: this.title,
+ description: this.description,
+ type: this.type,
+ amount: this.amount
+ })
+ this.close()
+ }
+ },
+ directives: {
+ ClickOutside
+ }
+}
+</script>
+
+<style lang="stylus">
+@import '~variables'
+
+.modal-propose
+ background var(--app-nav)
+ display flex
+ flex-direction column
+ justify-content space-between
+ left 50%
+ padding 2rem
+ position fixed
+ bottom 0
+ width 50%
+ z-index z(modal)
+
+ &-header
+ align-items center
+ display flex
+
+ &-atom
+ height 4rem
+ width 4rem
+
+ &-form-group
+ display block
+ padding 0
+
+ #amount
+ margin-top -32px
+
+ #denom
+ border none
+ margin-left 80%
+ text-align right
+ width 72px
+
+ &-footer
+ display flex
+ justify-content flex-end
+
+ button
+ margin-left 1rem
+ margin-top 1rem
+
+ .page-proposal-form-group
+ display block
+ padding 0
+
+ textarea
+ min-height 300px
+
+ .tm-form-group
+ margin 0.5rem 0
+</style>

app/src/renderer/components/governance/ModalVote.vue

@@ -12,29 +12,29 @@
 
  tm-form-group.modal-vote-form-group.options
  tm-btn#vote-yes(
- @click.native="vote('yes')"
- :class="[option === `yes` ? 'active' : '']"
+ @click.native="vote('Yes')"
+ :class="[option === `Yes` ? 'active' : '']"
  color="secondary"
  value="Yes"
  size="md")
 
  tm-btn#vote-no(
- @click.native="vote('no')"
- :class="[option === `no` ? 'active' : '']"
+ @click.native="vote('No')"
+ :class="[option === `No` ? 'active' : '']"
  color="secondary"
  value="No"
  size="md")
 
  tm-btn#vote-veto(
- @click.native="vote('no_with_veto')"
- :class="[option === `no_with_veto` ? 'active' : '']"
+ @click.native="vote('NoWithVeto')"
+ :class="[option === `NoWithVeto` ? 'active' : '']"
  color="secondary"
  value="No With Veto"
  size="md")
 
  tm-btn#vote-abstain(
- @click.native="vote('abstain')"
- :class="[option === `abstain` ? 'active' : '']"
+ @click.native="vote('Abstain')"
+ :class="[option === `Abstain` ? 'active' : '']"
  color="secondary"
  value="Abstain"
  size="md")
@@ -56,10 +56,10 @@ import Modal from "common/TmModal"
 import { TmBtn, TmField, TmFormGroup, TmFormMsg } from "@tendermint/ui"
 
 const isValid = option =>
- option === `yes` ||
- option === `no` ||
- option === `no_with_veto` ||
- option === `abstain`
+ option === `Yes` ||
+ option === `No` ||
+ option === `NoWithVeto` ||
+ option === `Abstain`
 
 export default {
  name: `modal-vote`,