forked from cerc-io/cosmos-explorer
feat: staking ui retactor
This commit is contained in:
parent
e419bd1e34
commit
52bcb61299
1
src/components/icons/IconWeb.vue
Normal file
1
src/components/icons/IconWeb.vue
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" tag="i" class="v-icon notranslate v-theme--light v-icon--size-default iconify iconify--mdi" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16.36 14c.08-.66.14-1.32.14-2c0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2c0-.68.06-1.35.16-2h4.68c.09.65.16 1.32.16 2c0 .68-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.923 7.923 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8.008 8.008 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2c0 .68.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.65 15.65 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2Z"></path></svg>
|
After Width: | Height: | Size: 1.0 KiB |
@ -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,29 +133,47 @@ 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="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>
|
||||
<div class="mx-2">
|
||||
<h4>{{ v.description?.moniker }}</h4>
|
||||
<div class="text-sm mb-2">
|
||||
{{ v.description?.identity || '-' }}
|
||||
</div>
|
||||
<VBtn>Delegate</VBtn>
|
||||
<button class="btn btn-primary btn-sm w-full">Delegate</button>
|
||||
</div>
|
||||
</div>
|
||||
<VSpacer />
|
||||
<VCardText>
|
||||
<div class="m-4 text-sm">
|
||||
<p class="text-md">About Us</p>
|
||||
<VList class="card-list">
|
||||
<VListItem prepend-icon="mdi-web">
|
||||
@ -166,7 +185,6 @@ onMounted(() => {
|
||||
><span> {{ v.description?.security_contact }}</span>
|
||||
</VListItem>
|
||||
</VList>
|
||||
|
||||
<p class="text-md mt-3">Validator Status</p>
|
||||
<VList class="card-list">
|
||||
<VListItem prepend-icon="mdi-shield-account-outline">
|
||||
@ -179,9 +197,9 @@ onMounted(() => {
|
||||
<span>Jailed: </span><span> {{ v.jailed || '-' }} </span>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="d-flex flex-column py-3 justify-space-between">
|
||||
<div class="d-flex">
|
||||
<VAvatar
|
||||
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user