Merge branch 'v3-single' of https://github.com/alisaweb3/explorer into v3-single

This commit is contained in:
Alisa | Side.one 2023-05-11 00:55:59 +08:00
commit 3db8b87cb2
3 changed files with 78 additions and 44 deletions

View 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

View File

@ -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">

View File

@ -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">