forked from LaconicNetwork/cosmos-explorer
feat: staking ui retactor
This commit is contained in:
Alisa | Side.one
@@ -7,6 +7,7 @@ import {
|
||||
useStakingStore,
|
||||
} from '@/stores';
|
||||
import { onMounted, computed, ref } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import ValidatorCommissionRate from '@/components/ValidatorCommissionRate.vue';
|
||||
import {
|
||||
consensusPubkeyToHexAddress,
|
||||
@@ -132,31 +133,49 @@ onMounted(() => {
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<VCard class="card-box">
|
||||
<VCardItem>
|
||||
<VRow>
|
||||
<VCol cols="12" md="6">
|
||||
<div class="d-flex pl-2">
|
||||
<VAvatar
|
||||
<div 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-1">
|
||||
<div class="flex">
|
||||
<!-- avator -->
|
||||
<!-- <VAvatar
|
||||
icon="mdi-help-circle-outline"
|
||||
:image="avatars[identity]"
|
||||
size="90"
|
||||
rounded
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
/>
|
||||
<div class="mx-2">
|
||||
<h4>{{ v.description?.moniker }}</h4>
|
||||
<div class="text-sm mb-2">
|
||||
{{ v.description?.identity || '-' }}
|
||||
</div>
|
||||
<VBtn>Delegate</VBtn>
|
||||
/> -->
|
||||
<div
|
||||
class="avatar mr-4 relative w-24 rounded-lg overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="w-24 rounded-lg absolute opacity-10"
|
||||
></div>
|
||||
<div class="w-24 rounded-lg">
|
||||
<img
|
||||
v-if="avatars[identity] !== 'undefined'"
|
||||
:src="`https://s3.amazonaws.com/keybase_processed_uploads/${avatars[identity]}`"
|
||||
class="object-contain"
|
||||
/>
|
||||
<Icon
|
||||
v-else
|
||||
class="text-4xl"
|
||||
:icon="`mdi-help-circle-outline`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<VSpacer />
|
||||
<VCardText>
|
||||
<p class="text-md">About Us</p>
|
||||
<VList class="card-list">
|
||||
<div class="mx-2">
|
||||
<h4>{{ v.description?.moniker }}</h4>
|
||||
<div class="text-sm mb-2">
|
||||
{{ v.description?.identity || '-' }}
|
||||
</div>
|
||||
<button class="btn btn-primary btn-sm w-full">Delegate</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-4 text-sm">
|
||||
<p class="text-md">About Us</p>
|
||||
<VList class="card-list">
|
||||
<VListItem prepend-icon="mdi-web">
|
||||
<span>Website: </span
|
||||
><span> {{ v.description?.website || '-' }}</span>
|
||||
@@ -166,9 +185,8 @@ onMounted(() => {
|
||||
><span> {{ v.description?.security_contact }}</span>
|
||||
</VListItem>
|
||||
</VList>
|
||||
|
||||
<p class="text-md mt-3">Validator Status</p>
|
||||
<VList class="card-list">
|
||||
<p class="text-md mt-3">Validator Status</p>
|
||||
<VList class="card-list">
|
||||
<VListItem prepend-icon="mdi-shield-account-outline">
|
||||
<span>Status: </span
|
||||
><span>
|
||||
@@ -179,10 +197,10 @@ onMounted(() => {
|
||||
<span>Jailed: </span><span> {{ v.jailed || '-' }} </span>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
<div class="d-flex flex-column py-3 justify-space-between">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="d-flex flex-column py-3 justify-space-between">
|
||||
<div class="d-flex">
|
||||
<VAvatar
|
||||
color="secondary"
|
||||
@@ -272,12 +290,11 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
<VDivider />
|
||||
<VCardText>{{ v.description?.details }}</VCardText>
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="text-sm px-4">{{ v.description?.details }}</div>
|
||||
</div>
|
||||
|
||||
<VRow class="mt-3">
|
||||
<VCol md="4" sm="12" class="h-100">
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useBaseStore, useFormatter, useStakingStore } from '@/stores';
|
||||
import { toBase64, toHex } from '@cosmjs/encoding';
|
||||
import { computed } from '@vue/reactivity';
|
||||
import { onMounted, ref, type DebuggerEvent } from 'vue';
|
||||
import { consensusPubkeyToHexAddress } from '@/libs';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import type { Key, Validator } from '@/types';
|
||||
const staking = useStakingStore();
|
||||
const format = useFormatter();
|
||||
@@ -43,11 +43,9 @@ function fetchChange(offset: number) {
|
||||
}
|
||||
|
||||
const change24 = (key: Key) => {
|
||||
// console.log('hex key:', consensusPubkeyToHexAddress(key))
|
||||
const txt = key.key;
|
||||
const n: number = latest.value[txt];
|
||||
const o: number = yesterday.value[txt];
|
||||
// console.log( txt, n, o)
|
||||
return n > 0 && o > 0 ? n - o : 0;
|
||||
};
|
||||
|
||||
@@ -181,24 +179,35 @@ const rank = function (position: number) {
|
||||
<tr v-for="(v, i) in list" :key="v.operator_address">
|
||||
<!-- 👉 rank -->
|
||||
<td>
|
||||
<VChip label :color="rank(i)">
|
||||
<div
|
||||
class="text-xs truncate relative py-2 px-4 rounded-full w-fit"
|
||||
:class="`text-${rank(i)}`"
|
||||
>
|
||||
<span
|
||||
class="inset-x-0 inset-y-0 opacity-10 absolute"
|
||||
:class="`bg-${rank(i)}`"
|
||||
></span>
|
||||
{{ i + 1 }}
|
||||
</VChip>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- 👉 Validator -->
|
||||
<td>
|
||||
<div
|
||||
class="d-flex align-center overflow-hidden"
|
||||
style="max-width: 400px"
|
||||
>
|
||||
<VAvatar
|
||||
variant="tonal"
|
||||
class="me-3"
|
||||
size="34"
|
||||
icon="mdi-help-circle-outline"
|
||||
:image="logo(v.description?.identity)"
|
||||
/>
|
||||
<div class="avatar mr-4 relative w-9 rounded-full overflow-hidden">
|
||||
<div class="w-9 rounded-full bg-gray-400 absolute opacity-10"></div>
|
||||
<div class="w-9 rounded-full">
|
||||
<img
|
||||
v-if="logo(v.description?.identity) !== ''"
|
||||
:src="logo(v.description?.identity)"
|
||||
class="object-contain"
|
||||
/>
|
||||
<Icon v-else class="text-4xl" :icon="`mdi-help-circle-outline`"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="text-sm text-primary">
|
||||
<RouterLink
|
||||
@@ -247,7 +256,14 @@ const rank = function (position: number) {
|
||||
:class="change24Color(v.consensus_pubkey)"
|
||||
>
|
||||
{{ change24Text(v.consensus_pubkey) }}
|
||||
<VChip label v-if="v.jailed" color="error">Jailed</VChip>
|
||||
<div v-if="v.jailed"
|
||||
class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-error"
|
||||
>
|
||||
<span
|
||||
class="inset-x-0 inset-y-0 opacity-10 absolute bg-error"
|
||||
></span>
|
||||
Jailed
|
||||
</div>
|
||||
</td>
|
||||
<!-- 👉 commission -->
|
||||
<td class="text-right">
|
||||
|
||||
Reference in New Issue
Block a user