Merge branch 'ping-pub:master' into master

This commit is contained in:
Erialos 2022-11-07 04:21:05 -07:00 committed by GitHub
commit 6f15b32b3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 547 additions and 225 deletions

View File

@ -22,3 +22,28 @@
.progress { .progress {
border-radius: 3px; 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;
}

View File

@ -1,7 +1,7 @@
{ {
"chain_name": "rebus", "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": "", "snapshot_provider": "",
"sdk_version": "0.45.6", "sdk_version": "0.45.6",
"coin_type": "118", "coin_type": "118",
@ -17,4 +17,4 @@
"logo": "/logos/rebus.png" "logo": "/logos/rebus.png"
} }
] ]
} }

View File

@ -1,8 +1,8 @@
{ {
"chain_name": "secret", "chain_name": "secret",
"coingecko": "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": "", "snapshot_provider": "",
"sdk_version": "0.45.4", "sdk_version": "0.45.4",
"coin_type": "529", "coin_type": "529",

View File

@ -1,7 +1,7 @@
{ {
"chain_name": "teritori", "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": "", "snapshot_provider": "",
"sdk_version": "0.45.4", "sdk_version": "0.45.4",
"coin_type": "118", "coin_type": "118",
@ -17,4 +17,4 @@
"logo": "/logos/teritori.svg" "logo": "/logos/teritori.svg"
} }
] ]
} }

View File

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

View File

@ -93,33 +93,155 @@
<b-card-title>Active Proposals</b-card-title> <b-card-title>Active Proposals</b-card-title>
</b-card-header> </b-card-header>
<b-card-body> <b-card-body>
<b-media <b-row
v-for="prop in proprosals2" v-for="prop in proprosals2"
:key="prop.id" :key="prop.id"
no-body
class="mb-1"
> >
<b-media-aside <b-col
v-b-modal.operation-modal md="6"
@click="selectProposal('Vote',prop.id, prop.title)" sm="12"
> >
<b-avatar <b-media
rounded no-body
size="42" class="mb-1"
:variant="myVotes[prop.id] ? 'light-primary': 'primary'"
> >
{{ myVotes[prop.id] || 'Vote' }} <b-media-aside
</b-avatar> @click="showDetail(prop.id)"
</b-media-aside> >
<b-link :to="`./${chain}/gov/${prop.id}`"> <b-avatar
<b-media-body class="d-flex flex-column justify-content-center"> rounded
<h6 class="transaction-title"> size="42"
{{ prop.id }}. {{ prop.title }} variant="light-primary"
</h6> >
<small>{{ formatType(prop.contents['@type']) }} {{ formatEnding(prop.voting_end_time) }}</small> {{ prop.id }}
</b-media-body> </b-avatar>
</b-link> </b-media-aside>
</b-media> <b-link :to="`./${chain}/gov/${prop.id}`">
<b-media-body class="d-flex flex-column justify-content-center">
<h6 class="transaction-title">
<b-badge
pill
variant="light-primary"
>
{{ formatType(prop.contents['@type']) }}
</b-badge>{{ prop.title }}
</h6>
<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"> <div v-if="proprosals2.length === 0">
No active proposal! No active proposal!
<b-link :to="`./${chain}/gov`"> <b-link :to="`./${chain}/gov`">
@ -133,7 +255,7 @@
bg-variant="transparent" bg-variant="transparent"
class="shadow-none" 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> <span>{{ walletName }} Assets </span>
<small> <small>
<b-link <b-link
@ -343,7 +465,7 @@
<script> <script>
import { import {
BRow, BCol, BAlert, BCard, BTable, BFormCheckbox, BCardHeader, BCardTitle, BMedia, BMediaAside, BMediaBody, BAvatar, 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' } from 'bootstrap-vue'
import { import {
formatNumber, formatTokenAmount, isToken, percent, timeIn, toDay, toDuration, tokenFormatter, getLocalAccounts, formatNumber, formatTokenAmount, isToken, percent, timeIn, toDay, toDuration, tokenFormatter, getLocalAccounts,
@ -352,6 +474,7 @@ import {
import OperationModal from '@/views/components/OperationModal/index.vue' import OperationModal from '@/views/components/OperationModal/index.vue'
import Ripple from 'vue-ripple-directive' import Ripple from 'vue-ripple-directive'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import VueMarkdown from 'vue-markdown'
import ParametersModuleComponent from './components/parameters/ParametersModuleComponent.vue' import ParametersModuleComponent from './components/parameters/ParametersModuleComponent.vue'
import DashboardCardHorizontal from './components/dashboard/DashboardCardHorizontal.vue' import DashboardCardHorizontal from './components/dashboard/DashboardCardHorizontal.vue'
import DashboardCardVertical from './components/dashboard/DashboardCardVertical.vue' import DashboardCardVertical from './components/dashboard/DashboardCardVertical.vue'
@ -378,6 +501,10 @@ export default {
BCardBody, BCardBody,
BLink, BLink,
BCardFooter, BCardFooter,
BProgress,
BProgressBar,
VueMarkdown,
BBadge,
OperationModal, OperationModal,
ParametersModuleComponent, ParametersModuleComponent,
@ -393,6 +520,7 @@ export default {
}, },
data() { data() {
return { return {
detailId: 0,
fields: ['validator', 'delegation', 'rewards', 'action'], fields: ['validator', 'delegation', 'rewards', 'action'],
delegations: [], delegations: [],
rewards: [], rewards: [],
@ -414,6 +542,8 @@ export default {
selectedProposalId: 0, selectedProposalId: 0,
selectedTitle: '', selectedTitle: '',
operationModalType: '', operationModalType: '',
tallyParam: null,
totalPower: 0,
voteColors: { voteColors: {
YES: 'success', YES: 'success',
NO: 'warning', NO: 'warning',
@ -461,9 +591,29 @@ export default {
}, },
}, },
created() { 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.$http.getLatestBlock().then(res => {
this.height = res.block.header.height this.height = res.block.header.height
if (timeIn(res.block.header.time, 3, 'm')) { if (timeIn(res.block.header.time, 3, 'm')) {
@ -475,19 +625,14 @@ export default {
this.validators = res.block.last_commit.signatures.length 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.$http.getCommunityPool().then(res => {
this.communityPool = this.formatToken(res.pool) this.communityPool = this.formatToken(res.pool)
}) })
this.$http.getGovernanceParameterTallying().then(res => {
this.tallyParam = res
})
const conf = this.$http.getSelectedConfig() const conf = this.$http.getSelectedConfig()
if (conf.excludes && conf.excludes.indexOf('mint') > -1) { if (conf.excludes && conf.excludes.indexOf('mint') > -1) {
this.inflation = '-' this.inflation = '-'
@ -500,6 +645,22 @@ export default {
} }
}, },
methods: { 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) { selectProposal(modal, pid, title) {
this.operationModalType = modal this.operationModalType = modal
this.selectedProposalId = Number(pid) this.selectedProposalId = Number(pid)
@ -609,6 +770,13 @@ export default {
return { title: this.convert(data[k]), subtitle: k } 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'), formatDate: v => dayjs(v).format('YYYY-MM-DD HH:mm:ss'),
convert(v) { convert(v) {
if (typeof v === 'object') { if (typeof v === 'object') {
@ -633,6 +801,13 @@ export default {
} }
return v return v
}, },
showDetail(id) {
if (this.detailId !== id) {
this.detailId = id
} else {
this.detailId = 0
}
},
}, },
} }
</script> </script>

View File

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

View File

@ -112,83 +112,95 @@
</b-card-title> </b-card-title>
</b-card-header> </b-card-header>
<b-card-body> <b-card-body>
<b-progress <div>
:max="100" <div class="scale">
height="2rem" <div class="box">
class="mb-2" <b-progress
show-progress :max="totalPower && proposal.status ===2? 100 * (totalPower/proposal.tally.total) :100"
> height="2rem"
<b-progress-bar class="mb-2"
:id="'vote-yes'+proposal.id" show-progress
variant="success" >
:value="percent(proposal.tally.yes)" <b-progress-bar
:label="`${percent(proposal.tally.yes).toFixed()}%`" :id="'vote-yes'+proposal.id"
show-progress variant="success"
/> :value="percent(proposal.tally.yes)"
<b-progress-bar :label="`${percent(proposal.tally.yes).toFixed()}%`"
:id="'vote-no'+proposal.id" show-progress
variant="warning" />
:value="percent(proposal.tally.no)" <b-progress-bar
:label="`${percent(proposal.tally.no).toFixed()}%`" :id="'vote-no'+proposal.id"
show-progress variant="danger"
/> :value="percent(proposal.tally.no)"
<b-progress-bar :label="`${percent(proposal.tally.no).toFixed()}%`"
:id="'vote-veto'+proposal.id" show-progress
variant="danger" />
:value="percent(proposal.tally.veto)" <b-progress-bar
:label="`${percent(proposal.tally.veto).toFixed()}%`" :id="'vote-veto'+proposal.id"
show-progress class="bg-danger bg-darken-4"
/> :value="percent(proposal.tally.veto)"
<b-progress-bar :label="`${percent(proposal.tally.veto).toFixed()}%`"
:id="'vote-abstain'+proposal.id" show-progress
variant="secondary" />
:value="percent(proposal.tally.abstain)" <b-progress-bar
:label="`${percent(proposal.tally.abstain).toFixed()}%`" :id="'vote-abstain'+proposal.id"
show-progress variant="secondary"
/> :value="percent(proposal.tally.abstain)"
</b-progress> :label="`${percent(proposal.tally.abstain).toFixed()}%`"
<b-tooltip show-progress
:target="'vote-yes'+proposal.id" />
> </b-progress>
{{ percent(proposal.tally.yes) }}% voted Yes <b-tooltip
</b-tooltip> :target="'vote-yes'+proposal.id"
<b-tooltip >
:target="'vote-no'+proposal.id" {{ percent(proposal.tally.yes) }}% voted Yes
> </b-tooltip>
{{ percent(proposal.tally.no) }}% voted No <b-tooltip
</b-tooltip> :target="'vote-no'+proposal.id"
<b-tooltip >
:target="'vote-veto'+proposal.id" {{ percent(proposal.tally.no) }}% voted No
> </b-tooltip>
{{ percent(proposal.tally.veto) }}% voted No With Veto <b-tooltip
</b-tooltip> :target="'vote-veto'+proposal.id"
<b-tooltip >
:target="'vote-abstain'+proposal.id" {{ percent(proposal.tally.veto) }}% voted No With Veto
> </b-tooltip>
{{ percent(proposal.tally.abstain) }}% voted Abstain <b-tooltip
</b-tooltip> :target="'vote-abstain'+proposal.id"
<b-table >
v-if="votes.votes && votes.votes.length > 0" {{ percent(proposal.tally.abstain) }}% voted Abstain
stacked="sm" </b-tooltip>
:fields="votes_fields"
:items="votes.votes" <div
striped v-if="tallyParam"
> title="Threshold"
<template #cell(voter)="data"> class="box overlay"
<router-link :to="`../account/${data.item.voter}`"> :style="`left:${scaleWidth(proposal)}%;`"
{{ formatAddress(data.item.voter) }} />
</router-link> </div>
</template> </div>
</b-table> <b-table
<div v-if="votes.votes && votes.votes.length > 0"
v-if="next" stacked="sm"
class="addzone text-center pt-50 pb-50 bg-transparent text-primary" :fields="votes_fields"
@click="loadVotes()" :items="votes.votes"
> striped
<feather-icon icon="PlusIcon" /> >
Load More Votes <template #cell(voter)="data">
</div> <router-link :to="`../account/${data.item.voter}`">
</b-card-body> {{ formatAddress(data.item.voter) }}
</router-link>
</template>
</b-table>
<div
v-if="next"
class="addzone text-center pt-50 pb-50 bg-transparent text-primary"
@click="loadVotes()"
>
<feather-icon icon="PlusIcon" />
Load More Votes
</div>
</div></b-card-body>
</b-card> </b-card>
<b-card <b-card
v-if="proposal.total_deposit" v-if="proposal.total_deposit"
@ -290,10 +302,12 @@ export default {
}, },
data() { data() {
return { return {
tallyParam: null,
latest: {}, latest: {},
next: null, next: null,
proposal: new Proposal(), proposal: new Proposal(),
proposer: new Proposer(), proposer: new Proposer(),
totalPower: 0,
deposits: [], deposits: [],
votes: [], votes: [],
operationModalType: '', operationModalType: '',
@ -356,6 +370,9 @@ export default {
}, },
}, },
created() { created() {
this.$http.getGovernanceParameterTallying().then(res => {
this.tallyParam = res
})
const pid = this.$route.params.proposalid const pid = this.$route.params.proposalid
if (this.$route.query.from) { if (this.$route.query.from) {
this.from = this.$route.query.from this.from = this.$route.query.from
@ -368,7 +385,8 @@ export default {
this.$http.getGovernance(pid).then(p => { this.$http.getGovernance(pid).then(p => {
if (p.status === 2) { if (p.status === 2) {
this.$http.getStakingPool().then(pool => { 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 this.proposal = p
@ -390,6 +408,15 @@ export default {
}) })
}, },
methods: { 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), percent: v => percent(v),
formatDate: v => dayjs(v).format('YYYY-MM-DD HH:mm'), formatDate: v => dayjs(v).format('YYYY-MM-DD HH:mm'),
formatToken: v => tokenFormatter(v, {}), formatToken: v => tokenFormatter(v, {}),

View File

@ -69,7 +69,6 @@
</h6> </h6>
</div> </div>
</div> </div>
<b-progress <b-progress
:max="100" :max="100"
height="2rem" height="2rem"
@ -85,21 +84,21 @@
/> />
<b-progress-bar <b-progress-bar
:id="'vote-no'+p.id" :id="'vote-no'+p.id"
variant="warning" variant="danger"
:value="percent(p.tally.no)" :value="percent(p.tally.no)"
:label="`${percent(p.tally.no).toFixed()}%`" :label="`${percent(p.tally.no).toFixed()}%`"
show-progress show-progress
/> />
<b-progress-bar <b-progress-bar
:id="'vote-veto'+p.id" :id="'vote-veto'+p.id"
variant="danger" class="bg-danger bg-darken-4"
:value="percent(p.tally.veto)" :value="percent(p.tally.veto)"
:label="`${percent(p.tally.veto).toFixed()}%`" :label="`${percent(p.tally.veto).toFixed()}%`"
show-progress show-progress
/> />
<b-progress-bar <b-progress-bar
:id="'vote-abstain'+p.id" :id="'vote-abstain'+p.id"
variant="info" variant="secondary"
:value="percent(p.tally.abstain)" :value="percent(p.tally.abstain)"
:label="`${percent(p.tally.abstain).toFixed()}%`" :label="`${percent(p.tally.abstain).toFixed()}%`"
show-progress show-progress
@ -129,7 +128,7 @@
<span <span
v-for="(v,k) in p.votes" v-for="(v,k) in p.votes"
:key="k" :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-footer>
</b-card> </b-card>
</b-col> </b-col>
@ -237,6 +236,13 @@ export default {
percent: v => percent(v), percent: v => percent(v),
formatDate: v => dayjs(v).format('YYYY-MM-DD'), formatDate: v => dayjs(v).format('YYYY-MM-DD'),
formatToken: v => tokenFormatter(v, {}), formatToken: v => tokenFormatter(v, {}),
formatOption: v => {
const start = String(v).lastIndexOf('_')
if (start > 0) {
return String(v).substring(start + 1)
}
return v
},
init() { init() {
this.accounts = getLocalAccounts() this.accounts = getLocalAccounts()
if (this.accounts) { if (this.accounts) {

View File

@ -5,29 +5,53 @@
<h4 class="mb-25 font-weight-bolder"> <h4 class="mb-25 font-weight-bolder">
{{ statistic || '-' }} {{ statistic || '-' }}
</h4> </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> </div>
<b-avatar <b-avatar
v-b-tooltip.hover
:variant="`light-${color}`" :variant="`light-${color}`"
size="45" size="45"
> :text="statisticTitle.substring(0,1)"
<feather-icon :title="statisticTitle"
size="21" />
:icon="icon"
/>
</b-avatar>
</b-card-body> </b-card-body>
</b-card> </b-card>
</template> </template>
<script> <script>
import { BCard, BCardBody, BAvatar } from 'bootstrap-vue' import {
BCard, BCardBody, BAvatar, VBTooltip,
} from 'bootstrap-vue'
import { getUserCurrency, getUserCurrencySign } from '@/libs/utils'
export default { export default {
components: { components: {
BCard, BCard,
BCardBody, BCardBody,
BAvatar, BAvatar,
VBTooltip,
},
directives: {
'b-tooltip': VBTooltip,
}, },
props: { props: {
icon: { icon: {
@ -47,5 +71,24 @@ export default {
default: 'primary', 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> </script>

View File

@ -63,101 +63,119 @@
</h6> </h6>
</div> </div>
</div> </div>
<div>
<b-progress <div class="scale">
:max="100" <div class="box">
height="2rem" <b-progress
class="mb-2" :max="totalPower && p.status === 2? 100 * (totalPower/p.tally.total) :100"
show-progress height="2rem"
> class="mb-2"
<b-progress-bar show-progress
:id="'vote-yes'+p.id" >
variant="success" <b-progress-bar
:value="percent(p.tally.yes)" :id="'vote-yes'+p.id"
show-progress variant="success"
:label="`${percent(p.tally.yes).toFixed()}%`" :value="percent(p.tally.yes)"
/> show-progress
<b-progress-bar :label="`${percent(p.tally.yes).toFixed()}%`"
:id="'vote-no'+p.id" />
variant="warning" <b-progress-bar
:value="percent(p.tally.no)" :id="'vote-no'+p.id"
:label="`${percent(p.tally.no).toFixed()}%`" variant="danger"
show-progress :value="percent(p.tally.no)"
/> :label="`${percent(p.tally.no).toFixed()}%`"
<b-progress-bar show-progress
:id="'vote-veto'+p.id" />
variant="danger" <b-progress-bar
:value="percent(p.tally.veto)" :id="'vote-veto'+p.id"
:label="`${percent(p.tally.veto).toFixed()}%`" class="bg-danger bg-darken-4"
show-progress :value="percent(p.tally.veto)"
/> :label="`${percent(p.tally.veto).toFixed()}%`"
<b-progress-bar show-progress
:id="'vote-abstain'+p.id" />
variant="secondary" <b-progress-bar
:value="percent(p.tally.abstain)" :id="'vote-abstain'+p.id"
:label="`${percent(p.tally.abstain).toFixed()}%`" variant="secondary"
show-progress :value="percent(p.tally.abstain)"
/> :label="`${percent(p.tally.abstain).toFixed()}%`"
</b-progress> show-progress
<b-tooltip />
:target="'vote-yes'+p.id" </b-progress>
> <div
{{ percent(p.tally.yes) }}% voted Yes v-if="tallyParam"
</b-tooltip> v-b-tooltip.hover
<b-tooltip title="Threshold"
:target="'vote-no'+p.id" class="box overlay"
> :style="`left:${scaleWidth(p)}%;`"
{{ percent(p.tally.no) }}% voted No />
</b-tooltip> <div
<b-tooltip v-if="tallyParam && p.status === 2"
:target="'vote-veto'+p.id" v-b-tooltip.hover
> title="Quorum"
{{ percent(p.tally.veto) }}% voted No With Veto class="box overlay"
</b-tooltip> :style="`left:${Number(tallyParam.quorum) * 100}%; border-color:black`"
<b-tooltip />
:target="'vote-abstain'+p.id" </div>
> <b-tooltip
{{ percent(p.tally.abstain) }}% voted Abstain :target="'vote-yes'+p.id"
</b-tooltip> >
<b-card-footer class="pb-0"> {{ percent(p.tally.yes) }}% voted Yes
<router-link </b-tooltip>
v-ripple.400="'rgba(113, 102, 240, 0.15)'" <b-tooltip
:to="`./gov/${p.id}`" :target="'vote-no'+p.id"
variant="outline-primary" >
> {{ percent(p.tally.no) }}% voted No
<b-button </b-tooltip>
<b-tooltip
:target="'vote-veto'+p.id"
>
{{ percent(p.tally.veto) }}% voted No With Veto
</b-tooltip>
<b-tooltip
:target="'vote-abstain'+p.id"
>
{{ 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)'" v-ripple.400="'rgba(113, 102, 240, 0.15)'"
:href="`./gov/${p.id}`" :to="`./gov/${p.id}`"
variant="outline-primary" variant="outline-primary"
> >
{{ $t('btn_detail') }} <b-button
v-ripple.400="'rgba(113, 102, 240, 0.15)'"
:href="`./gov/${p.id}`"
variant="outline-primary"
>
{{ $t('btn_detail') }}
</b-button>
</router-link>
<b-button
v-if="p.status===1"
v-b-modal.operation-modal
variant="primary"
class="btn float-right mg-2"
@click="selectProposal('GovDeposit',p.id, p.title)"
>
{{ $t('btn_deposit') }}
</b-button> </b-button>
</router-link> <b-button
<b-button v-if="p.status===2"
v-if="p.status===1" v-b-modal.operation-modal
v-b-modal.operation-modal variant="primary"
variant="primary" class="btn float-right mg-2"
class="btn float-right mg-2" @click="selectProposal('Vote',p.id, p.title)"
@click="selectProposal('GovDeposit',p.id, p.title)" >
> {{ $t('btn_vote') }}
{{ $t('btn_deposit') }} </b-button>
</b-button> </b-card-footer>
<b-button </div></b-card>
v-if="p.status===2"
v-b-modal.operation-modal
variant="primary"
class="btn float-right mg-2"
@click="selectProposal('Vote',p.id, p.title)"
>
{{ $t('btn_vote') }}
</b-button>
</b-card-footer>
</b-card>
</template> </template>
<script> <script>
import { 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' } from 'bootstrap-vue'
import Ripple from 'vue-ripple-directive' import Ripple from 'vue-ripple-directive'
import { percent, tokenFormatter } from '@/libs/utils' import { percent, tokenFormatter } from '@/libs/utils'
@ -180,6 +198,7 @@ export default {
}, },
directives: { directives: {
'b-modal': VBModal, 'b-modal': VBModal,
'b-tooltip': VBTooltip,
Ripple, Ripple,
}, },
props: { props: {
@ -187,8 +206,25 @@ export default {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
totalPower: {
type: Number,
default: 0,
},
tallyParam: {
type: Object,
default: null,
},
}, },
methods: { 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) { selectProposal(modal, pid, title) {
this.$parent.operationModalType = modal this.$parent.operationModalType = modal
this.$parent.selectedProposalId = Number(pid) this.$parent.selectedProposalId = Number(pid)