add quorum

src/views/Dashboard.vue

@@ -119,9 +119,14 @@
               <b-link :to="`./${chain}/gov/${prop.id}`">
                 <b-media-body class="d-flex flex-column justify-content-center">
                   <h6 class="transaction-title">
-                    {{ prop.title }}
+                    <b-badge
+                      pill
+                      variant="light-primary"
+                    >
+                      {{ formatType(prop.contents['@type']) }}
+                    </b-badge>{{ prop.title }}
                   </h6>
-                  <small>{{ formatType(prop.contents['@type']) }}  {{ formatEnding(prop.voting_end_time) }}</small>
+                  <small>will {{ caculateTallyResult(prop.tally) }}  {{ formatEnding(prop.voting_end_time) }}</small>
                 </b-media-body>
               </b-link>
             </b-media>
@@ -171,9 +176,18 @@
                     </b-progress>
                   </div>
                   <div
+                    v-b-tooltip.hover
+                    title="Threshold"
                     class="box overlay"
                     :style="`left:${scaleWidth(prop.tally)}%;`"
                   />
+                  <div
+                    v-if="tallyParam"
+                    v-b-tooltip.hover
+                    title="Quorum"
+                    class="box overlay"
+                    :style="`left:${Number(tallyParam.quorum) * 100}%; border-color:black`"
+                  />
                 </div>
                 <b-tooltip
                   :target="'vote-yes'+prop.id"
@@ -241,7 +255,7 @@
       bg-variant="transparent"
       class="shadow-none"
     >
-      <b-card-title class="d-flex justify-content-between">
+      <b-card-title class="d-flex justify-content-between text-capitalize">
         <span>{{ walletName }} Assets </span>
         <small>
           <b-link
@@ -451,7 +465,7 @@
 <script>
 import {
   BRow, BCol, BAlert, BCard, BTable, BFormCheckbox, BCardHeader, BCardTitle, BMedia, BMediaAside, BMediaBody, BAvatar,
-  BCardBody, BLink, BButtonGroup, BButton, BTooltip, VBModal, VBTooltip, BCardFooter, BProgress, BProgressBar,
+  BCardBody, BLink, BButtonGroup, BButton, BTooltip, VBModal, VBTooltip, BCardFooter, BProgress, BProgressBar, BBadge,
 } from 'bootstrap-vue'
 import {
   formatNumber, formatTokenAmount, isToken, percent, timeIn, toDay, toDuration, tokenFormatter, getLocalAccounts,
@@ -490,6 +504,7 @@ export default {
     BProgress,
     BProgressBar,
     VueMarkdown,
+    BBadge,
 
     OperationModal,
     ParametersModuleComponent,
@@ -630,11 +645,21 @@ export default {
     }
   },
   methods: {
+    caculateTallyResult(tally) {
+      if (this.tallyParam && tally && this.totalPower > 0) {
+        if (tally.veto < Number(this.tallyParam.veto_threshold)
+        && tally.yes > Number(this.tallyParam.threshold)
+        && tally.total / this.totalPower > Number(this.tallyParam.quorum)) {
+          return 'pass'
+        }
+      }
+      return 'be rejected'
+    },
     scaleWidth() {
       if (this.tallyParam) {
         return Number(this.tallyParam.quorum) * Number(this.tallyParam.threshold) * 100
       }
-      return 30
+      return 50
     },
     selectProposal(modal, pid, title) {
       this.operationModalType = modal

src/views/WalletVotes.vue

@@ -98,7 +98,7 @@
               />
               <b-progress-bar
                 :id="'vote-abstain'+p.id"
-                variant="info"
+                variant="secondary"
                 :value="percent(p.tally.abstain)"
                 :label="`${percent(p.tally.abstain).toFixed()}%`"
                 show-progress
@@ -128,7 +128,7 @@
               <span
                 v-for="(v,k) in p.votes"
                 :key="k"
-              > <b-badge :variant="color(v.vote.option)">{{ v.keyname }} : {{ v.vote.option }}</b-badge></span>
+              > <b-badge :variant="color(v.vote.option)">{{ v.keyname }} : {{ formatOption(v.vote.option) }}</b-badge></span>
             </b-card-footer>
           </b-card>
         </b-col>
@@ -236,6 +236,13 @@ export default {
     percent: v => percent(v),
     formatDate: v => dayjs(v).format('YYYY-MM-DD'),
     formatToken: v => tokenFormatter(v, {}),
+    formatOption: v => {
+      const start = String(v).lastIndexOf('_')
+      if (start > 0) {
+        return String(v).substring(start + 1)
+      }
+      return v
+    },
     init() {
       this.accounts = getLocalAccounts()
       if (this.accounts) {

src/views/components/governance/ProposalSummaryComponent.vue

@@ -103,9 +103,18 @@
           </b-progress>
           <div
             v-if="tallyParam"
+            v-b-tooltip.hover
+            title="Threshold"
             class="box overlay"
             :style="`left:${scaleWidth(p)}%;`"
           />
+          <div
+            v-if="tallyParam && p.status === 2"
+            v-b-tooltip.hover
+            title="Quorum"
+            class="box overlay"
+            :style="`left:${Number(tallyParam.quorum) * 100}%; border-color:black`"
+          />
         </div>
         <b-tooltip
           :target="'vote-yes'+p.id"
@@ -166,7 +175,7 @@
 
 <script>
 import {
-  BCard, BCardTitle, BCardFooter, BButton, BProgressBar, BProgress, BBadge, BTooltip, BRow, BCol, VBModal,
+  BCard, BCardTitle, BCardFooter, BButton, BProgressBar, BProgress, BBadge, BTooltip, BRow, BCol, VBModal, VBTooltip,
 } from 'bootstrap-vue'
 import Ripple from 'vue-ripple-directive'
 import { percent, tokenFormatter } from '@/libs/utils'
@@ -189,6 +198,7 @@ export default {
   },
   directives: {
     'b-modal': VBModal,
+    'b-tooltip': VBTooltip,
     Ripple,
   },
   props: {