leave the original governance components

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

@@ -40,7 +40,13 @@ export default {
     UserPane
   },
   computed: {
-    ...mapGetters([`validators`, `config`, `lastHeader`, `mockedConnector`]),
+    ...mapGetters([
+      `proposals`,
+      `validators`,
+      `config`,
+      `lastHeader`,
+      `mockedConnector`
+    ]),
     isValidatorPage() {
       return this.$route.params.validator
     }

app/src/renderer/components/govern/ChartVotes.vue

@@ -4,44 +4,31 @@
   .chart-legend(v-if="size === 'lg'" :class="chartLabelClass")
     .kv.abstain: .container
       .key Abstain
-      .value {{ this.ratToNumber(votes.abstain) }}
+      .value {{ votes.abstain }}
     .kv.yes: .container
       .key Yes
-      .value {{ this.ratToNumber(votes.yes) }}
+      .value {{ votes.yes }}
+    .kv.reject: .container
+      .key Reject
+      .value {{ votes.reject }}
     .kv.no: .container
       .key No
-      .value {{ this.ratToNumber(votes.no) }}
-    .kv.no_with_veto: .container
-      .key No With Veto
-      .value {{ this.ratToNumber(votes.no_with_veto) }}
+      .value {{ votes.no }}
   .chart-legend(v-else :class="chartLabelClass")
-    .kv.abstain {{ this.ratToNumber(votes.abstain) }}
-    .kv.yes {{ this.ratToNumber(votes.yes) }}
-    .kv.no_with_veto {{ this.ratToNumber(votes.no_with_veto) }}
-    .kv.no {{ this.ratToNumber(votes.no) }}
+    .kv.abstain {{ votes.abstain }}
+    .kv.yes {{ votes.yes }}
+    .kv.reject {{ votes.reject }}
+    .kv.no {{ votes.no }}
 </template>
 
 <script>
 import { mapGetters } from "vuex"
 import Chart from "chart.js"
-const BN = require(`bignumber.js`).BigNumber
 export default {
   name: `chart-votes`,
   props: [`votes`, `size`],
   computed: {
     ...mapGetters([`themes`]),
-    yes() {
-      return this.ratToNumber(votes.yes)
-    },
-    no() {
-      return this.ratToNumber(votes.no)
-    },
-    abstain() {
-      return this.ratToNumber(votes.abstain)
-    },
-    noWithVeto() {
-      return this.ratToNumber(votes.no_with_veto)
-    },
     cssClass() {
       if (this.size === `lg`) {
         return `chart-votes-size-lg`
@@ -62,7 +49,7 @@ export default {
         case 1:
           return `no`
         default:
-          return `no_with_veto`
+          return `reject`
       }
     },
     chartData() {
@@ -73,7 +60,7 @@ export default {
         abstainBgColor = `#000000`
       }
       return {
-        labels: [`Yes`, `No`, `No with veto`, `Abstain`],
+        labels: [`Yes`, `No`, `Reject`, `Abstain`],
         datasets: [
           {
             borderWidth: 0,
@@ -106,20 +93,6 @@ export default {
     }
   }),
   methods: {
-    ratToNumber(rat) {
-      let idx = rat.indexOf(`/`)
-      if (idx == -1) {
-        return Number(rat)
-      }
-      rat = rat.split("/")
-      let n = new BN(rat[0])
-      let d = new BN(rat[1])
-
-      return n
-        .div(d)
-        .toNumber()
-        .toFixed(0)
-    },
     drawChart() {
       let ctx = this.$el.querySelector(`canvas`)
       new Chart(ctx, {
@@ -149,20 +122,20 @@ export default {
 
   &.chart-votes-size-sm
     .chart-canvas
-      width 6rem
-      height 6rem
+      width 4rem
+      height 4rem
 
     .chart-legend
       position absolute
       top 0
       left 0
-      width 6rem
-      height 6rem
+      width 4rem
+      height 4rem
       display flex
       flex-flow row wrap
       align-items center
       justify-content center
-      padding-right 8rem
+      padding 1rem
 
       .kv
         width 1rem
@@ -180,13 +153,13 @@ export default {
         &.no
           color var(--danger)
 
-        &.no_with_veto
-          color var(--darkred)
+        &.reject
+          color var(--warning)
 
   &.chart-votes-size-lg
     .chart-canvas
-      width 15rem
-      height 15rem
+      width 18rem
+      height 18rem
       border-radius 9rem
 
     .legend
@@ -208,10 +181,10 @@ export default {
           color var(--success)
 
         &.no .value
-          color var(--danger)
+          color var(--warning)
 
-        &.no_with_veto .value
-          color var(--danger-bc)
+        &.reject .value
+          color var(--danger)
 
         .container
           flex 1

app/src/renderer/components/govern/LiProposal.vue

@@ -1,25 +1,30 @@
 <template lang="pug">
 transition(name="proposal")
-  .card-proposal
-    .chart: chart-votes(:votes="this.proposal.tally_result")
+  router-link.card-proposal(:to="proposalLink")
+    .chart: chart-votes(:votes="proposal.votes")
     .text
-      .title #[span {{ this.proposal.type }}] {{ this.proposal.title }}
-        .author Status: {{ this.proposal.proposal_status }}
-        .date Submit Block: {{ this.proposal.submit_block }}
+      .title #[span {{ proposal.type }}] {{ proposal.title }}
+      .meta
+        .author {{ proposal.validatorId }}
+        .date {{ timeAgo(this.proposal.createdAt) }}
 </template>
+
 <script>
-import moment from "moment"
 import ChartVotes from "govern/ChartVotes"
+import moment from "moment"
 export default {
   name: `li-proposal`,
-  components: {
-    ChartVotes
+  components: { ChartVotes },
+  computed: {
+    proposalLink() {
+      return { name: `proposal`, params: { proposal: this.proposal.id } }
+    }
+  },
+  methods: {
+    timeAgo(date) {
+      return moment(date, `x`).fromNow()
+    }
   },
-  // computed: {
-  //   proposalLink() {
-  //     return { name: `proposal`, params: { proposal: this.proposal.proposal_id } }
-  //   }
-  // },
   props: [`proposal`]
 }
 </script>
@@ -63,6 +68,7 @@ export default {
       border px solid var(--bc)
 
   .meta
+    display flex
     font-size sm
     .author
       margin-right 0.25rem

app/src/renderer/components/govern/PageProposal.vue

@@ -1,22 +1,22 @@
 <template lang="pug">
 tm-page(data-title='Proposal')
   div(slot="menu"): vm-tool-bar
-    a(@click="commentOnProposal(proposal.proposal_id)"): i.material-icons comment
-    a(@click="proposalIsSpam(proposal.proposal_id)"): i.material-icons error
+    a(@click="commentOnProposal(proposal.id)"): i.material-icons comment
+    a(@click="proposalIsSpam(proposal.id)"): i.material-icons error
 
-  tm-part(v-if="proposal.type === 'Text' && proposal.proposal_status === 'VotingPeriod'")
-    div(slot='title') Proposed by #[router-link(:to="{ name: 'delegate', params: { delegate: proposal.proposer }}") {{ proposal.proposer }}]
-    text-block(:content="proposal.title")
+  tm-part(v-if="proposal.type === 'text'")
+    div(slot='title') Proposed by #[router-link(:to="{ name: 'delegate', params: { delegate: proposal.validatorId }}") {{ proposal.validatorId }}]
+    text-block(:content="proposal.data.text")
 
-  tm-part(title='Time to vote: 13D 23H 27M' v-if="proposal.proposal_status === 'VotingPeriod'"): tm-form-struct(:submit='confirmVote')
+  tm-part(title='Time to vote: 13D 23H 27M'): tm-form-struct(:submit='confirmVote')
     field-vote(@click.native="vote('yes')" dt='Yes' :dd='yesPct'
       color='hsl(120,50%,35%)' :active="votePick === 'yes'" :results="voteVisible")
 
     field-vote(@click.native="vote('no')" dt='No' :dd="noPct"
       color='hsl(0,50%,35%)' :active="votePick === 'no'" :results="voteVisible")
 
-    field-vote(@click.native="vote('no_with_veto')" dt='No with veto' :dd="rejectPct"
-      color='hsl(330,50%,35%)' :active="votePick === 'no_with_veto'" :results="voteVisible")
+    field-vote(@click.native="vote('reject')" dt='Reject' :dd="rejectPct"
+      color='hsl(330,50%,35%)' :active="votePick === 'reject'" :results="voteVisible")
 
     field-vote(@click.native="vote('abstain')" dt='Abstain' :dd="abstainPct"
       color='hsl(0,0%,35%)' :active="votePick === 'abstain'" :results="voteVisible")
@@ -44,37 +44,39 @@ export default {
     VmToolBar
   },
   computed: {
+    ...mapGetters([`proposals`]),
     proposal() {
       if (this.proposals) {
-        return this.proposals[this.$route.params.proposal]
+        return this.proposals.items.find(
+          p => p.id === this.$route.params.proposal
+        )
       } else {
         return {}
       }
     },
     totalVotes() {
-      console.log(this.proposal.tally_result)
       return (
-        this.proposal.tally_result.yes +
-        this.proposal.tally_result.no +
-        this.proposal.tally_result.no_with_veto +
-        this.proposal.tally_result.abstain
+        this.proposal.votes.yes +
+        this.proposal.votes.no +
+        this.proposal.votes.reject +
+        this.proposal.votes.abstain
       )
     },
     yesPct() {
-      return this.proposal.tally_result.yes / this.totalVotes
+      return this.proposal.votes.yes / this.totalVotes
     },
     noPct() {
-      return this.proposal.tally_result.no / this.totalVotes
+      return this.proposal.votes.no / this.totalVotes
     },
     rejectPct() {
-      return this.proposal.tally_result.no_with_veto / this.totalVotes
+      return this.proposal.votes.reject / this.totalVotes
     },
     abstainPct() {
-      return this.proposal.tally_result.abstain / this.totalVotes
+      return this.proposal.votes.abstain / this.totalVotes
     }
   },
   data: () => ({
-    votePick: `no_with_veto`,
+    votePick: `abstain`,
     voteVisible: false
   }),
   methods: {

app/src/renderer/components/govern/PageProposals.vue

@@ -12,9 +12,9 @@ tm-page(data-title='Proposals')
   data-empty-search(v-else-if="filteredProposals.length === 0")
   li-proposal(
     v-else
-    v-for="(value, key) in proposals"
-    :key="key"
-    :proposal="value")
+    v-for="p in filteredProposals"
+    :key="p.id"
+    :proposal="p")
 </template>
 
 <script>
@@ -40,14 +40,13 @@ export default {
   computed: {
     ...mapGetters([`proposals`, `filters`]),
     somethingToSearch() {
-      console.log(this.proposals)
-      return !this.proposals && !Object.keys(this.proposals).length
+      return !this.proposals.loading && !!this.proposals.length
     },
     filteredProposals() {
-      if (this.proposals && this.filters) {
+      if (this.proposals.items && this.filters) {
         let query = this.filters.proposals.search.query
         let proposals = orderBy(
-          this.proposals,
+          this.proposals.items,
           [this.sort.property],
           [this.sort.order]
         )
@@ -96,9 +95,6 @@ export default {
     }
   }),
   methods: {
-    getProposals() {
-      this.$store.dispatch(`getProposals`)
-    },
     gotoPrevote() {
       this.$store.commit(`notify`, {
         title: `TODO: Prevote Proposals`,
@@ -120,7 +116,6 @@ export default {
     }
   },
   mounted() {
-    this.getProposals()
     Mousetrap.bind([`command+f`, `ctrl+f`], () => this.setSearch(true))
     Mousetrap.bind([`command+n`, `ctrl+n`], () => this.gotoNewProposal())
     Mousetrap.bind(`esc`, () => this.setSearch(false))

app/src/renderer/styles/app.styl

@@ -63,7 +63,6 @@ a
   --warning-bc hsl(35,75%,38%)
   --danger hsl(0,100%,55%)
   --danger-bc hsl(0,100%,41%)
-  --darkred rgb(139,0,0)
   --tendermint #5EAD37
 
 #app