cerc-io/cosmos-explorer
16
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: staking validatore commission rate

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-12 18:29:34 +08:00
parent 1c038b465f
commit f6d07b7515
2 changed files with 70 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/ValidatorCommissionRate.vue
View File

@ -136,35 +136,27 @@ const chartConfig = computed(() => {
</script>
<template>
<VCard
title="Commission Rate"
:subtitle="`Updated at ${format.toDay(
props.commission?.update_time,
'short'
)}`"
>
<VCardText>
<VueApexCharts
type="donut"
height="257"
:options="chartConfig"
:series="series"
/>
<div class="flex items-center justify-center flex-wrap mx-2 gap-x-6">
<div class="flex items-center gap-2">
<div class="bg-base-100 rounded shadow p-4">
<div class="text-lg text-main font-semibold mb-1">Commission Rate</div>
<div class="text-sm text-gray-500 dark:text-gray-400">
{{ `Updated at ${format.toDay(props.commission?.update_time, 'short')}` }}
</div>
<VueApexCharts type="donut" :options="chartConfig" :series="series" />
<div>
<div class="flex items-center justify-center flex-wrap gap-x-3">
<div class="flex items-center gap-x-2">
<div class="bg-success w-[6px] h-[6px] rounded-full"></div>
<span class="text-caption">Rate:{{ rate }}%</span>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center gap-x-2">
<div class="bg-success w-[6px] h-[6px] rounded-full opacity-60"></div>
<span class="text-caption">24h: ±{{ change }}%</span>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center gap-x-2">
<div class="bg-secondary w-[6px] h-[6px] rounded-full"></div>
<span class="text-caption">Max:{{ max }}%</span>
</div>
</div>
</VCardText>
</VCard>
</div>
</div>
</template>

107
src/modules/[chain]/staking/[validator].vue
View File

@ -135,10 +135,7 @@ onMounted(() => {
</script>
<template>
<div>
<div
style="border-width: 1px"
class="bg-base-100 px-4 pt-3 pb-4 rounded shadow border-indigo-500"
>
<div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow border-indigo-500">
<div class="flex flex-col lg:flex-row">
<div class="flex-1">
<div class="flex">
@ -325,10 +322,7 @@ onMounted(() => {
<div
v-for="(i, k) in rewards"
:key="`reward-${k}`"
color="success"
label
variant="outlined"
class="mr-1 mb-1 badge"
class="mr-1 mb-1 badge text-xs"
>
{{ format.formatToken2(i) }}
</div>
@ -346,44 +340,47 @@ onMounted(() => {
</div>
</div>
</div>
<div md="4" sm="12">
<VCard title="Addresses" class="h-100">
<VList class="pt-0">
<VListItem>
<VListItemTitle>Account</VListItemTitle>
<VListItemSubtitle class="text-caption text-primary"
><RouterLink :to="`/${chain}/account/${addresses.account}`">{{
addresses.account
}}</RouterLink></VListItemSubtitle
<div>
<div class="h-100 bg-base-100 rounded shadow">
<div class="px-4 pt-4 mb-2 text-main font-lg font-semibold">
Addresses
</div>
<div class="px-4">
<div class="mb-3">
<div class="text-sm">Account</div>
<RouterLink
class="text-xs text-primary"
:to="`/${chain}/account/${addresses.account}`"
>
</VListItem>
<VListItem>
<VListItemTitle>Operator Address</VListItemTitle>
<VListItemSubtitle class="text-caption">{{
v.operator_address
}}</VListItemSubtitle>
</VListItem>
<VListItem>
<VListItemTitle>Hex Address</VListItemTitle>
<VListItemSubtitle class="text-caption">{{
addresses.hex
}}</VListItemSubtitle>
</VListItem>
<VListItem>
<VListItemTitle>Signer Address</VListItemTitle>
<VListItemSubtitle class="text-caption">{{
addresses.valCons
}}</VListItemSubtitle>
</VListItem>
</VList>
</VCard>
{{ addresses.account }}
</RouterLink>
</div>
<div class="mb-3">
<div class="text-sm">Operator Address</div>
<div class="text-xs">
{{ v.operator_address }}
</div>
</div>
<VCard title="Transactions" class="mt-5">
<VCardItem class="pt-0">
<VTable>
<div class="mb-3">
<div class="text-sm">Hex Address</div>
<div class="text-xs">{{ addresses.hex }}</div>
</div>
<div>
<div class="text-sm">Signer Address</div>
<div class="text-xs">{{ addresses.valCons }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-5 bg-base-100 shadow rounded p-4">
<div class="text-lg mb-4 font-semibold">Transactions</div>
<div class="rounded overflow-auto">
<table class="table validatore-table w-full">
<thead>
<th class="text-left pl-4">Height</th>
<th class="text-left pl-4" style="position: relative; z-index: 2">
Height
</th>
<th class="text-left pl-4">Hash</th>
<th class="text-left pl-4" width="40%">Messages</th>
<th class="text-left pl-4">Time</th>
@ -399,24 +396,30 @@ onMounted(() => {
{{ item.txhash }}
</td>
<td>
{{ format.messages(item.tx.body.messages) }}
<VIcon
<div class="flex items-center">
<span class="mr-2">{{
format.messages(item.tx.body.messages)
}}</span>
<Icon
v-if="item.code === 0"
icon="mdi-check"
color="success"
></VIcon>
<VIcon v-else icon="mdi-multiply" color="error"></VIcon>
class="text-yes"
/>
<Icon v-else icon="mdi-multiply" class="text-no" />
</div>
</td>
<td width="150">{{ format.toDay(item.timestamp, 'from') }}</td>
</tr>
</tbody>
</VTable>
</VCardItem>
</VCard>
</table>
</div>
</div>
</div>
</template>
<style>
.card-list {
--v-card-list-gap: 10px;
.validatore-table.table :where(th, td) {
padding: 0.6rem 1rem;
font-size: 14px;
}
</style>