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
@@ -46,6 +47,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 * [\#1410](https://github.com/cosmos/voyager/issues/1410) removed end undelegations as not needed in the SDK anymore
 * [\#1543](https://github.com/cosmos/voyager/issues/1543) updated unit tests to use `describe` and `it` instead of `test` @fedekunze
 * [\#1377](https://github.com/cosmos/voyager/issues/1377) deleted AppFooter page @fedekunze
+* [\#1582](https://github.com/cosmos/voyager/issues/1582) proposals now use time instead of block number @fedekunze
 
 ### Fixed
 
@@ -64,6 +66,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
+    router-link#settings(to="/preferences" 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() {
@@ -43,6 +39,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/LiProposal.vue

@@ -3,17 +3,16 @@ tr.li-proposal
   td.li-proposal__value
     span.validator-profile__status(v-bind:class="status.color" v-tooltip.top="status.message")
     h2
-      router-link(:to="{ name: 'Proposal', params: { proposalId, proposal, status }}") {{ proposal.title }}
+      router-link(:to="{ name: 'Proposal', params: { proposalId: proposal.proposal_id, proposal, status }}") {{ proposal.title }}
     p {{ description }}
-  td {{ submitBlock }}
+  td {{ `#` + proposal.proposal_id }}
   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: {
@@ -53,12 +52,6 @@ export default {
       return this.proposal.description.length > 100
         ? this.proposal.description.substring(0, 100) + `…`
         : this.proposal.description.substring(0, 100)
-    },
-    submitBlock() {
-      return `#` + num.prettyInt(this.proposal.submit_block)
-    },
-    proposalId() {
-      return this.proposal.proposal_id
     }
   },
   props: [`proposal`]

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 multicoin 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>