zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions 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> </script>
<template> <template>
<VCard <div class="bg-base-100 rounded shadow p-4">
title="Commission Rate" <div class="text-lg text-main font-semibold mb-1">Commission Rate</div>
:subtitle="`Updated at ${format.toDay( <div class="text-sm text-gray-500 dark:text-gray-400">
props.commission?.update_time, {{ `Updated at ${format.toDay(props.commission?.update_time, 'short')}` }}
'short' </div>
)}`" <VueApexCharts type="donut" :options="chartConfig" :series="series" />
> <div>
<VCardText> <div class="flex items-center justify-center flex-wrap gap-x-3">
<VueApexCharts <div class="flex items-center gap-x-2">
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-success w-[6px] h-[6px] rounded-full"></div> <div class="bg-success w-[6px] h-[6px] rounded-full"></div>
<span class="text-caption">Rate:{{ rate }}%</span> <span class="text-caption">Rate:{{ rate }}%</span>
</div> </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> <div class="bg-success w-[6px] h-[6px] rounded-full opacity-60"></div>
<span class="text-caption">24h: ±{{ change }}%</span> <span class="text-caption">24h: ±{{ change }}%</span>
</div> </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> <div class="bg-secondary w-[6px] h-[6px] rounded-full"></div>
<span class="text-caption">Max:{{ max }}%</span> <span class="text-caption">Max:{{ max }}%</span>
</div> </div>
</div> </div>
</VCardText> </div>
</VCard> </div>
</template> </template>

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

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