Skip to content

Commit 61c1aac

Browse files
GusevPMGusevPM
committed
Add hint for unbondings, fix&ref proposal voting power displaying
1 parent dffe0e1 commit 61c1aac

File tree

3 files changed

+84
-71
lines changed

3 files changed

+84
-71
lines changed

‎components/modules/proposal/VotingPower.vue‎

Lines changed: 50 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import Tooltip from "@/components/ui/Tooltip.vue"
44
55
/** Services */
6-
import { comma } from "@/services/utils"
6+
import { comma, roundTo } from "@/services/utils"
77
88
/** Store */
99
import { useAppStore } from "@/store/app.store"
@@ -29,6 +29,45 @@ const totalVotingPower = computed(() => {
2929
return lastHead.value?.total_voting_power ?? 0
3030
})
3131
32+
const voteKinds = {
33+
yes: {
34+
name: "Yes",
35+
color: "var(--brand)",
36+
},
37+
no: {
38+
name: "No",
39+
color: "var(--red)",
40+
},
41+
no_with_veto: {
42+
name: "No with veto",
43+
color: "var(--red)",
44+
},
45+
abstain: {
46+
name: "Abstain",
47+
color: "var(--op-40)",
48+
},
49+
}
50+
const voteDistribution = computed(() => {
51+
const distribution = {}
52+
53+
Object.keys(voteKinds).forEach((kind) => {
54+
distribution[kind] = {
55+
...voteKinds[kind],
56+
power: Number(props.proposal[`${kind}_voting_power`] / 1_000_000 || 0),
57+
shareOfTotal: Number(props.proposal[`${kind}_voting_power`] / 1_000_000 * 100 || 0) / totalVotingPower.value,
58+
}
59+
60+
const shareOfVotes = roundTo(Number(props.proposal[`${kind}_voting_power`] / 1_000_000 * 100 || 0) / (props.proposal.voting_power / 1_000_000), 0)
61+
distribution[kind].shareOfVotes = shareOfVotes === 0 && props.proposal[kind]
62+
? "< 1%"
63+
: shareOfVotes === 100 && props.proposal[kind] < props.proposal.votes_count
64+
? "> 99%"
65+
: `${shareOfVotes}%`
66+
})
67+
68+
return distribution
69+
})
70+
3271
const quorum = props.proposal.status === "active" ? Number(appStore.constants?.gov.quorum) : Number(props.proposal.quorum)
3372
3473
const isQuorumReached = computed(() => {
@@ -55,93 +94,38 @@ const isQuorumReached = computed(() => {
5594
<div :style="{ left: `${quorum * 100}%` }" :class="[$style.threshold, !isQuorumReached && $style.red]" />
5695
5796
<Tooltip
58-
v-if="proposal.yes"
97+
v-for="v in Object.keys(voteDistribution)"
5998
wide
60-
:trigger-width="`${Math.max(5, ((proposal.yes_voting_power / 1_000_000) * 100) / totalVotingPower)}%`"
99+
:trigger-width="`${voteDistribution[v].power ? Math.max(5, voteDistribution[v].shareOfTotal) : 0}%`"
61100
>
62101
<div
63102
:style="{
64-
background: 'var(--brand)',
103+
background: voteDistribution[v].color,
65104
}"
66105
:class="$style.voting_bar"
67106
/>
68107
<template #content>
69-
Yes:
108+
{{ voteDistribution[v].name }}:
70109
<Text color="primary">
71-
{{ comma(Number(proposal.yes_voting_power) / 1_000_000) }}
110+
{{ comma(voteDistribution[v].power) }}
72111
</Text>
73112
TIA
74113
</template>
75114
</Tooltip>
76-
<Tooltip
77-
v-if="proposal.no"
78-
wide
79-
:trigger-width="`${Math.max(5, ((proposal.no_voting_power / 1_000_000) * 100) / totalVotingPower)}%`"
80-
>
81-
<div
82-
:style="{
83-
background: 'var(--red)',
84-
}"
85-
:class="$style.voting_bar"
86-
/>
87-
<template #content>
88-
No: <Text color="primary">{{ comma(Number(proposal.no_voting_power) / 1_000_000) }}</Text> TIA
89-
</template>
90-
</Tooltip>
91-
<Tooltip
92-
v-if="proposal.no_with_veto"
93-
wide
94-
:trigger-width="`${Math.max(5, ((proposal.no_with_veto_voting_power / 1_000_000) * 100) / totalVotingPower)}%`"
95-
>
96-
<div
97-
:style="{
98-
background: 'var(--red)',
99-
}"
100-
:class="$style.voting_bar"
101-
/>
102-
<template #content>
103-
No with veto: <Text color="primary">{{ comma(Number(proposal.no_with_veto_voting_power) / 1_000_000) }}</Text> TIA
104-
</template>
105-
</Tooltip>
106-
<Tooltip
107-
v-if="proposal.abstain"
108-
wide
109-
:trigger-width="`${Math.max(5, ((proposal.abstain_voting_power / 1_000_000) * 100) / totalVotingPower)}%`"
110-
>
111-
<div
112-
:style="{
113-
background: 'var(--op-40)',
114-
}"
115-
:class="$style.voting_bar"
116-
/>
117-
<template #content>
118-
Abstain: <Text color="primary">{{ comma(Number(proposal.abstain_voting_power / 1_000_000)) }}</Text> TIA
119-
</template>
120-
</Tooltip>
121115
</Flex>
122116
123117
<Flex v-if="expand" direction="column" gap="16">
124118
<Flex v-for="vote in votes" align="center" justify="between">
125119
<Flex align="center" gap="6">
126120
<div :class="[$style.dot, $style[vote]]" />
127-
<Text size="12" weight="600" color="secondary" style="text-transform: capitalize">{{ vote.replaceAll("_", " ") }}</Text>
128-
<Text v-if="Number(proposal[`${vote}_voting_power`])" size="12" weight="600" color="tertiary">
129-
{{ comma(proposal[`${vote}_voting_power`] / 1_000_000) }} TIA
121+
<Text size="12" weight="600" color="secondary">{{ voteDistribution[vote].name }}</Text>
122+
<Text v-if="voteDistribution[vote].power" size="12" weight="600" color="tertiary">
123+
{{ comma(voteDistribution[vote].power) }} TIA
130124
</Text>
131125
</Flex>
132126
133-
<Text size="12" weight="600" :color="proposal[vote] ? 'secondary' : 'tertiary'">
134-
<template
135-
v-if="
136-
(Number(proposal[`${vote}_voting_power`]) * 100) / (Number(proposal.voting_power)) > 0 &&
137-
(Number(proposal[`${vote}_voting_power`]) * 100) / (Number(proposal.voting_power)) < 1
138-
"
139-
>
140-
<Text color="tertiary">< 1%</Text>
141-
</template>
142-
<template v-else>
143-
{{ ((Number(proposal[`${vote}_voting_power`]) * 100) / (Number(proposal.voting_power))).toFixed(0) }}%
144-
</template>
127+
<Text size="12" weight="600" :color="!proposal[vote] || voteDistribution[vote].shareOfVotes === '< 1%' ? 'tertiary' : 'secondary'">
128+
{{ voteDistribution[vote].shareOfVotes }}
145129
</Text>
146130
</Flex>
147131

‎components/modules/validator/ValidatorCharts.vue‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Button from "@/components/ui/Button.vue"
77
import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
88
import Popover from "@/components/ui/Popover.vue"
99
import Toggle from "@/components/ui/Toggle.vue"
10+
import Tooltip from "@/components/ui/Tooltip.vue"
1011
1112
/** Components */
1213
import ChartOnEntityPage from "~/components/shared/ChartOnEntityPage.vue"
@@ -324,15 +325,43 @@ onBeforeMount(async() => {
324325
:load-last-value="loadLastValue"
325326
:selected-period="selectedPeriod"
326327
:isLoading="isLoading"
327-
/>
328+
>
329+
<template #header-content>
330+
<Tooltip position="start">
331+
<Icon name="info" size="13" color="tertiary" />
332+
333+
<template #content>
334+
<Flex align="center" :style="{ width: '250px' }">
335+
<Text size="12" color="secondary" :style="{ lineHeight: '1.2' }">
336+
This chart show completed unbondings. Unbonding takes 21 days, so all unbondings will appear here only after that period.
337+
</Text>
338+
</Flex>
339+
</template>
340+
</Tooltip>
341+
</template>
342+
</ChartOnEntityPage>
328343
329344
<ChartOnEntityPage
330345
:series-config="unbondingsCountConfig"
331346
:chart-view="chartView"
332347
:load-last-value="loadLastValue"
333348
:selected-period="selectedPeriod"
334349
:isLoading="isLoading"
335-
/>
350+
>
351+
<template #header-content>
352+
<Tooltip position="start">
353+
<Icon name="info" size="13" color="tertiary" />
354+
355+
<template #content>
356+
<Flex align="center" :style="{ width: '250px' }">
357+
<Text size="12" color="secondary" :style="{ lineHeight: '1.2' }">
358+
This chart show completed unbondings. Unbonding takes 21 days, so all unbondings will appear here only after that period.
359+
</Text>
360+
</Flex>
361+
</template>
362+
</Tooltip>
363+
</template>
364+
</ChartOnEntityPage>
336365
</Flex>
337366
</Flex>
338367
</Flex>

‎services/config.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const useServerURL = () => {
1414
return p.API_ARABICA
1515

1616
case "dev.celenium.io":
17-
return p.API_MAINNET
17+
return p.API_DEV
1818

1919
default:
2020
return p.API_DEV
@@ -33,7 +33,7 @@ export const getServerURL = (network) => {
3333
return p.API_ARABICA
3434

3535
default:
36-
return p.API_MAINNET
36+
return p.API_DEV
3737
}
3838
}
3939

@@ -53,7 +53,7 @@ export const useSocketURL = () => {
5353
return p.WSS_ARABICA
5454

5555
case "dev.celenium.io":
56-
return p.WSS_MAINNET
56+
return p.WSS_DEV
5757

5858
default:
5959
return p.WSS_DEV

0 commit comments

Comments
 (0)