Merge branch 'ping-pub:master' into master

src/@core/scss/base/bootstrap-extended/_progress.scss

@@ -22,3 +22,28 @@
 .progress {
   border-radius: 3px;
 }
+
+
+.scale {
+  width: 100%;
+  height: 3em;
+  position: relative;
+  /* margin: 30px; // */
+}
+.box {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding-top: 0.5em;
+  /* opacity: 0.7; /**/
+  background: transparent;
+}
+.overlay {
+  z-index: 9;
+  width: 2px;
+  border-right-color: green;
+  border-right-width: 2px;
+  border-right-style: dotted;
+}

src/chains/mainnet/rebus.json

@@ -1,7 +1,7 @@
 {
   "chain_name": "rebus",
-  "api": ["https://api.mainnet.rebus.money:1317"],
+  "api": ["https://api.mainnet.rebus.money:1317","https://api.rebus.nodestake.top"],
-  "rpc": ["https://api.mainnet.rebus.money:26657"],
+  "rpc": ["https://api.mainnet.rebus.money:26657","https://rpc.rebus.nodestake.top"],
   "snapshot_provider": "",
   "sdk_version": "0.45.6",
   "coin_type": "118",

src/chains/mainnet/secret.json

@@ -1,8 +1,8 @@
 {
     "chain_name": "secret",
     "coingecko": "secret",
-    "api": ["https://api.roninventures.io","https://api.scrt.network"],
+    "api": ["https://secretnetwork-lcd.stakely.io", "https://secret.api.consensus.one", "https://secret-4.api.trivium.network:1317"],
-    "rpc": ["http://beta-api.scrt.network:26657", "https://api.scrt.network:443"],
+    "rpc": ["https://secretnetwork-rpc.stakely.io", "https://secret.rpc.consensus.one", "https://secret-4.api.trivium.network:26657"],
     "snapshot_provider": "",
     "sdk_version": "0.45.4",
     "coin_type": "529",

src/chains/mainnet/teritori.json

@@ -1,7 +1,7 @@
 {
   "chain_name": "teritori",
-  "api": ["https://rest.mainnet.teritori.com"],
+  "api": ["https://rest.mainnet.teritori.com","https://api.teritori.nodestake.top"],
-  "rpc": ["https://rpc.mainnet.teritori.com"],
+  "rpc": ["https://rpc.mainnet.teritori.com","https://rpc.teritori.nodestake.top"],
   "snapshot_provider": "",
   "sdk_version": "0.45.4",
   "coin_type": "118",

src/layouts/components/Navbar.vue

@@ -84,9 +84,9 @@
     <!-- <dark-Toggler class="d-none d-lg-block" /> -->
     <!-- Right Col -->
     <b-navbar-nav class="nav align-items-center ml-auto">
-      <dark-Toggler class="d-none d-lg-block" />
+      <dark-Toggler />
       <search-bar />
-      <locale />
+      <locale class="d-none" />
       <b-dropdown
         class="ml-1"
         variant="link"

src/views/Dashboard.vue

@@ -93,33 +93,155 @@
         <b-card-title>Active Proposals</b-card-title>
       </b-card-header>
       <b-card-body>
-        <b-media
+        <b-row
           v-for="prop in proprosals2"
           :key="prop.id"
+        >
+          <b-col
+            md="6"
+            sm="12"
+          >
+            <b-media
               no-body
               class="mb-1"
             >
               <b-media-aside
-            v-b-modal.operation-modal
+                @click="showDetail(prop.id)"
-            @click="selectProposal('Vote',prop.id, prop.title)"
               >
                 <b-avatar
                   rounded
                   size="42"
-              :variant="myVotes[prop.id] ? 'light-primary': 'primary'"
+                  variant="light-primary"
                 >
-              {{ myVotes[prop.id] || 'Vote' }}
+                  {{ prop.id }}
                 </b-avatar>
               </b-media-aside>
               <b-link :to="`./${chain}/gov/${prop.id}`">
                 <b-media-body class="d-flex flex-column justify-content-center">
                   <h6 class="transaction-title">
-                {{ prop.id }}. {{ 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>
+          </b-col>
+          <b-col
+            md="6"
+            sm="12"
+          >
+            <b-row>
+              <b-col cols="8">
+                <div class="scale">
+                  <div class="box">
+                    <b-progress
+                      :max="totalPower? 100 * (totalPower/prop.tally.total) :100"
+                      height="2rem"
+                      show-progress
+                      class="font-small-1"
+                    >
+                      <b-progress-bar
+                        :id="'vote-yes'+prop.id"
+                        variant="success"
+                        :value="percent(prop.tally.yes)"
+                        show-progress
+                        :label="`${percent(prop.tally.yes).toFixed()}%`"
+                      />
+                      <b-progress-bar
+                        :id="'vote-no'+prop.id"
+                        variant="danger"
+                        :value="percent(prop.tally.no)"
+                        :label="`${percent(prop.tally.no).toFixed()}%`"
+                        show-progress
+                      />
+                      <b-progress-bar
+                        :id="'vote-veto'+prop.id"
+                        class="bg-danger bg-darken-4"
+                        :value="percent(prop.tally.veto)"
+                        :label="`${percent(prop.tally.veto).toFixed()}%`"
+                        show-progress
+                      />
+                      <b-progress-bar
+                        :id="'vote-abstain'+prop.id"
+                        variant="secondary"
+                        :value="percent(prop.tally.abstain)"
+                        :label="`${percent(prop.tally.abstain).toFixed()}%`"
+                        show-progress
+                      />
+                    </b-progress>
+                  </div>
+                  <div
+                    v-b-tooltip.hover
+                    title="Threshold"
+                    class="box overlay"
+                    :style="`left:${scaleWidth(prop)}%;`"
+                  />
+                  <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"
+                >
+                  {{ percent(prop.tally.yes) }}% voters voted Yes
+                </b-tooltip>
+                <b-tooltip
+                  :target="'vote-no'+prop.id"
+                >
+                  {{ percent(prop.tally.no) }}% voters voted No
+                </b-tooltip>
+                <b-tooltip
+                  :target="'vote-veto'+prop.id"
+                >
+                  {{ percent(prop.tally.veto) }}% voters voted No With Veto
+                </b-tooltip>
+                <b-tooltip
+                  :target="'vote-abstain'+prop.id"
+                >
+                  {{ percent(prop.tally.abstain) }}% voters voted Abstain
+                </b-tooltip>
+              </b-col>
+              <b-col
+                cols="4"
+                style="padding-top: 0.5em"
+              >
+                <b-button
+                  v-b-modal.operation-modal
+                  variant="primary"
+                  size="sm"
+                  class="mb-2"
+                  @click="selectProposal('Vote',prop.id, prop.title)"
+                >
+                  {{ myVotes[prop.id] ? `${myVotes[prop.id]}`: 'Vote' }}
+                </b-button>
+              </b-col>
+            </b-row>
+          </b-col>
+          <b-col
+            cols="12"
+            :class="detailId === prop.id? 'd-block': 'd-none'"
+          >
+            <b-card
+              border-variant="primary"
+              bg-variant="transparent"
+              class="shadow-none"
+              style="max-height:350px;overflow: auto;"
+            >
+              <VueMarkdown class="pb-1">
+                {{ addNewLine(prop.description) }}
+              </VueMarkdown>
+            </b-card>
+          </b-col>
+        </b-row>
         <div v-if="proprosals2.length === 0">
           No active proposal!
           <b-link :to="`./${chain}/gov`">
@@ -133,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
@@ -343,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,
+  BCardBody, BLink, BButtonGroup, BButton, BTooltip, VBModal, VBTooltip, BCardFooter, BProgress, BProgressBar, BBadge,
 } from 'bootstrap-vue'
 import {
   formatNumber, formatTokenAmount, isToken, percent, timeIn, toDay, toDuration, tokenFormatter, getLocalAccounts,
@@ -352,6 +474,7 @@ import {
 import OperationModal from '@/views/components/OperationModal/index.vue'
 import Ripple from 'vue-ripple-directive'
 import dayjs from 'dayjs'
+import VueMarkdown from 'vue-markdown'
 import ParametersModuleComponent from './components/parameters/ParametersModuleComponent.vue'
 import DashboardCardHorizontal from './components/dashboard/DashboardCardHorizontal.vue'
 import DashboardCardVertical from './components/dashboard/DashboardCardVertical.vue'
@@ -378,6 +501,10 @@ export default {
     BCardBody,
     BLink,
     BCardFooter,
+    BProgress,
+    BProgressBar,
+    VueMarkdown,
+    BBadge,
 
     OperationModal,
     ParametersModuleComponent,
@@ -393,6 +520,7 @@ export default {
   },
   data() {
     return {
+      detailId: 0,
       fields: ['validator', 'delegation', 'rewards', 'action'],
       delegations: [],
       rewards: [],
@@ -414,6 +542,8 @@ export default {
       selectedProposalId: 0,
       selectedTitle: '',
       operationModalType: '',
+      tallyParam: null,
+      totalPower: 0,
       voteColors: {
         YES: 'success',
         NO: 'warning',
@@ -461,9 +591,29 @@ export default {
     },
   },
   created() {
-    this.$http.getGovernanceListByStatus(2).then(res => {
+    this.$http.getStakingParameters().then(res => {
-      this.proposals = res.proposals
+      Promise.all([this.$http.getStakingPool(), this.$http.getBankTotal(res.bond_denom)])
+        .then(pool => {
+          this.supply = `${formatNumber(formatTokenAmount(pool[1].amount, 2, res.bond_denom, false), true, 2)}`
+          this.bonded = `${formatNumber(formatTokenAmount(pool[0].bondedToken, 2, res.bond_denom, false), true, 2)}`
+          this.ratio = `${percent(pool[0].bondedToken / pool[1].amount)}%`
+          this.totalPower = pool[0].bondedToken
         })
+    })
+
+    this.$http.getGovernanceListByStatus(2).then(gov => {
+      this.proposals = gov.proposals
+      this.proposals.forEach(p => {
+        this.$http.getGovernanceTally(p.id, 0).then(update => {
+          // const p2 = p
+          // p2.tally = update
+          // this.proposals.push(p2)
+          // this.proposals.sort((a, b) => a.id - b.id)
+          this.$set(p, 'tally', update)
+        })
+      })
+    })
+
     this.$http.getLatestBlock().then(res => {
       this.height = res.block.header.height
       if (timeIn(res.block.header.time, 3, 'm')) {
@@ -475,19 +625,14 @@ export default {
       this.validators = res.block.last_commit.signatures.length
     })
 
-    this.$http.getStakingParameters().then(res => {
-      Promise.all([this.$http.getStakingPool(), this.$http.getBankTotal(res.bond_denom)])
-        .then(pool => {
-          this.supply = `${formatNumber(formatTokenAmount(pool[1].amount, 2, res.bond_denom, false), true, 2)}`
-          this.bonded = `${formatNumber(formatTokenAmount(pool[0].bondedToken, 2, res.bond_denom, false), true, 2)}`
-          this.ratio = `${percent(pool[0].bondedToken / pool[1].amount)}%`
-        })
-    })
-
     this.$http.getCommunityPool().then(res => {
       this.communityPool = this.formatToken(res.pool)
     })
 
+    this.$http.getGovernanceParameterTallying().then(res => {
+      this.tallyParam = res
+    })
+
     const conf = this.$http.getSelectedConfig()
     if (conf.excludes && conf.excludes.indexOf('mint') > -1) {
       this.inflation = '-'
@@ -500,6 +645,22 @@ 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(p) {
+      if (this.tallyParam) {
+        return Number(this.tallyParam.quorum) * Number(this.tallyParam.threshold) * (1 - p.tally.abstain) * 100
+      }
+      return 50
+    },
     selectProposal(modal, pid, title) {
       this.operationModalType = modal
       this.selectedProposalId = Number(pid)
@@ -609,6 +770,13 @@ export default {
         return { title: this.convert(data[k]), subtitle: k }
       })
     },
+    addNewLine(value) {
+      return value ? value.replace(/(?:\\[rn])+/g, '\n') : '-'
+    },
+    percent: v => percent(v),
+    processBarLength(v) {
+      return percent(v)
+    },
     formatDate: v => dayjs(v).format('YYYY-MM-DD HH:mm:ss'),
     convert(v) {
       if (typeof v === 'object') {
@@ -633,6 +801,13 @@ export default {
       }
       return v
     },
+    showDetail(id) {
+      if (this.detailId !== id) {
+        this.detailId = id
+      } else {
+        this.detailId = 0
+      }
+    },
   },
 }
 </script>

src/views/Governance.vue

@@ -7,7 +7,11 @@
         lg="6"
         md="12"
       >
-        <proposal-summary-component :p="p" />
+        <proposal-summary-component
+          :p="p"
+          :total-power="totalPower"
+          :tally-param="tallyParam"
+        />
       </b-col>
     </b-row>
     <b-row v-if="next">
@@ -64,9 +68,14 @@ export default {
       max: 1,
       operationModalType: '',
       next: '',
+      totalPower: 0,
+      tallyParam: null,
     }
   },
   mounted() {
+    this.$http.getGovernanceParameterTallying().then(res => {
+      this.tallyParam = res
+    })
     this.getList()
   },
   methods: {
@@ -81,9 +90,10 @@ export default {
     },
     updateTally(res) {
       this.$http.getStakingPool().then(pool => {
+        this.totalPower = pool.bondedToken
         const voting = res.filter(i => i.status === 2)
         if (voting.length > 0) {
-          voting.forEach(p => this.$http.getGovernanceTally(p.id, pool.bondedToken).then(update => {
+          voting.forEach(p => this.$http.getGovernanceTally(p.id, 0).then(update => {
             this.$set(p, 'tally', update)
           }))
         }

src/views/GovernanceProposalView.vue

@@ -112,8 +112,11 @@
         </b-card-title>
       </b-card-header>
       <b-card-body>
+        <div>
+          <div class="scale">
+            <div class="box">
               <b-progress
-          :max="100"
+                :max="totalPower && proposal.status ===2? 100 * (totalPower/proposal.tally.total) :100"
                 height="2rem"
                 class="mb-2"
                 show-progress
@@ -127,14 +130,14 @@
                 />
                 <b-progress-bar
                   :id="'vote-no'+proposal.id"
-            variant="warning"
+                  variant="danger"
                   :value="percent(proposal.tally.no)"
                   :label="`${percent(proposal.tally.no).toFixed()}%`"
                   show-progress
                 />
                 <b-progress-bar
                   :id="'vote-veto'+proposal.id"
-            variant="danger"
+                  class="bg-danger bg-darken-4"
                   :value="percent(proposal.tally.veto)"
                   :label="`${percent(proposal.tally.veto).toFixed()}%`"
                   show-progress
@@ -167,6 +170,15 @@
               >
                 {{ percent(proposal.tally.abstain) }}% voted Abstain
               </b-tooltip>
+
+              <div
+                v-if="tallyParam"
+                title="Threshold"
+                class="box overlay"
+                :style="`left:${scaleWidth(proposal)}%;`"
+              />
+            </div>
+          </div>
           <b-table
             v-if="votes.votes && votes.votes.length > 0"
             stacked="sm"
@@ -188,7 +200,7 @@
             <feather-icon icon="PlusIcon" />
             Load More Votes
           </div>
-      </b-card-body>
+        </div></b-card-body>
     </b-card>
     <b-card
       v-if="proposal.total_deposit"
@@ -290,10 +302,12 @@ export default {
   },
   data() {
     return {
+      tallyParam: null,
       latest: {},
       next: null,
       proposal: new Proposal(),
       proposer: new Proposer(),
+      totalPower: 0,
       deposits: [],
       votes: [],
       operationModalType: '',
@@ -356,6 +370,9 @@ export default {
     },
   },
   created() {
+    this.$http.getGovernanceParameterTallying().then(res => {
+      this.tallyParam = res
+    })
     const pid = this.$route.params.proposalid
     if (this.$route.query.from) {
       this.from = this.$route.query.from
@@ -368,7 +385,8 @@ export default {
     this.$http.getGovernance(pid).then(p => {
       if (p.status === 2) {
         this.$http.getStakingPool().then(pool => {
-          this.$http.getGovernanceTally(pid, pool.bondedToken).then(t => p.updateTally(t))
+          this.totalPower = pool.bondedToken
+          this.$http.getGovernanceTally(pid, 0).then(t => p.updateTally(t))
         })
       }
       this.proposal = p
@@ -390,6 +408,15 @@ export default {
     })
   },
   methods: {
+    scaleWidth(p) {
+      if (this.tallyParam) {
+        if (p.status === 2) {
+          return Number(this.tallyParam.quorum) * Number(this.tallyParam.threshold) * (1 - p.tally.abstain) * 100
+        }
+        return Number(this.tallyParam.threshold) * (1 - p.tally.abstain) * 100
+      }
+      return 50
+    },
     percent: v => percent(v),
     formatDate: v => dayjs(v).format('YYYY-MM-DD HH:mm'),
     formatToken: v => tokenFormatter(v, {}),

src/views/WalletVotes.vue

@@ -69,7 +69,6 @@
                 </h6>
               </div>
             </div>
-
             <b-progress
               :max="100"
               height="2rem"
@@ -85,21 +84,21 @@
               />
               <b-progress-bar
                 :id="'vote-no'+p.id"
-                variant="warning"
+                variant="danger"
                 :value="percent(p.tally.no)"
                 :label="`${percent(p.tally.no).toFixed()}%`"
                 show-progress
               />
               <b-progress-bar
                 :id="'vote-veto'+p.id"
-                variant="danger"
+                class="bg-danger bg-darken-4"
                 :value="percent(p.tally.veto)"
                 :label="`${percent(p.tally.veto).toFixed()}%`"
                 show-progress
               />
               <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
@@ -129,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>
@@ -237,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/dashboard/DashboardCardHorizontal.vue

@@ -5,29 +5,53 @@
         <h4 class="mb-25 font-weight-bolder">
           {{ statistic || '-' }}
         </h4>
-        <span>{{ statisticTitle }}</span>
+        <span v-if="!statistic || statistic === '-'">{{ statisticTitle }}</span>
+        <span v-else-if="changes === 0">
+          {{ showPrice(statistic, statisticTitle) }}
+        </span>
+        <span
+          v-else-if="changes < 0"
+          v-b-tooltip.hover.v-danger
+          :title="`${changes.toFixed(1)}%`"
+          class="text-danger"
+        >
+          {{ showPrice(statistic, statisticTitle) }}
+        </span>
+        <span
+          v-else
+          v-b-tooltip.hover.v-success
+          :title="`+${changes.toFixed(1)}%`"
+          class="text-success"
+        >
+          {{ showPrice(statistic, statisticTitle) }}
+        </span>
       </div>
       <b-avatar
+        v-b-tooltip.hover
         :variant="`light-${color}`"
         size="45"
-      >
+        :text="statisticTitle.substring(0,1)"
-        <feather-icon
+        :title="statisticTitle"
-          size="21"
-          :icon="icon"
       />
-      </b-avatar>
     </b-card-body>
   </b-card>
 </template>
 
 <script>
-import { BCard, BCardBody, BAvatar } from 'bootstrap-vue'
+import {
+  BCard, BCardBody, BAvatar, VBTooltip,
+} from 'bootstrap-vue'
+import { getUserCurrency, getUserCurrencySign } from '@/libs/utils'
 
 export default {
   components: {
     BCard,
     BCardBody,
     BAvatar,
+    VBTooltip,
+  },
+  directives: {
+    'b-tooltip': VBTooltip,
   },
   props: {
     icon: {
@@ -47,5 +71,24 @@ export default {
       default: 'primary',
     },
   },
+  data() {
+    return {
+      changes: 0,
+    }
+  },
+  methods: {
+    showPrice(v, statisticTitle) {
+      const token = String(v).split(' ')
+      if (token.length >= 2) {
+        const quote = this.$store.state.chains.quotes[token[1]]
+        if (quote) {
+          const price = quote[getUserCurrency()]
+          this.changes = quote[`${getUserCurrency()}_24h_change`]
+          return `${getUserCurrencySign()}${(Number(token[0].replaceAll(',', '')) * price).toFixed(2)}`
+        }
+      }
+      return statisticTitle
+    },
+  },
 }
 </script>

src/views/components/governance/ProposalSummaryComponent.vue

@@ -63,9 +63,11 @@
         </h6>
       </div>
     </div>
-
+    <div>
+      <div class="scale">
+        <div class="box">
           <b-progress
-      :max="100"
+            :max="totalPower && p.status === 2? 100 * (totalPower/p.tally.total) :100"
             height="2rem"
             class="mb-2"
             show-progress
@@ -79,14 +81,14 @@
             />
             <b-progress-bar
               :id="'vote-no'+p.id"
-        variant="warning"
+              variant="danger"
               :value="percent(p.tally.no)"
               :label="`${percent(p.tally.no).toFixed()}%`"
               show-progress
             />
             <b-progress-bar
               :id="'vote-veto'+p.id"
-        variant="danger"
+              class="bg-danger bg-darken-4"
               :value="percent(p.tally.veto)"
               :label="`${percent(p.tally.veto).toFixed()}%`"
               show-progress
@@ -99,6 +101,21 @@
               show-progress
             />
           </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"
         >
@@ -119,6 +136,7 @@
         >
           {{ percent(p.tally.abstain) }}% voted Abstain
         </b-tooltip>
+      </div>
       <b-card-footer class="pb-0">
         <router-link
           v-ripple.400="'rgba(113, 102, 240, 0.15)'"
@@ -152,12 +170,12 @@
           {{ $t('btn_vote') }}
         </b-button>
       </b-card-footer>
-  </b-card>
+    </div></b-card>
 </template>
 
 <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'
@@ -180,6 +198,7 @@ export default {
   },
   directives: {
     'b-modal': VBModal,
+    'b-tooltip': VBTooltip,
     Ripple,
   },
   props: {
@@ -187,8 +206,25 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    totalPower: {
+      type: Number,
+      default: 0,
+    },
+    tallyParam: {
+      type: Object,
+      default: null,
+    },
   },
   methods: {
+    scaleWidth(p) {
+      if (this.tallyParam) {
+        if (p.status === 2) {
+          return Number(this.tallyParam.quorum) * Number(this.tallyParam.threshold) * (1 - p.tally.abstain) * 100
+        }
+        return Number(this.tallyParam.threshold) * (1 - p.tally.abstain) * 100
+      }
+      return 50
+    },
     selectProposal(modal, pid, title) {
       this.$parent.operationModalType = modal
       this.$parent.selectedProposalId = Number(pid)