feat: staking
This commit is contained in:
Alisa | Side.one
parent
24f2969e6e
commit
4ebc325b88
@ -135,29 +135,19 @@ onMounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div style="border-width:1px" class="bg-base-100 px-4 pt-3 pb-4 rounded shadow border-indigo-500">
|
<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 flex-col lg:flex-row">
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<!-- avator -->
|
<div class="avatar mr-4 relative w-24 rounded-lg overflow-hidden">
|
||||||
<!-- <VAvatar
|
<div class="w-24 rounded-lg absolute opacity-10"></div>
|
||||||
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">
|
<div class="w-24 rounded-lg">
|
||||||
<img
|
<img
|
||||||
v-if="avatars[identity] !== 'undefined'"
|
v-if="avatars[identity] !== 'undefined'"
|
||||||
:src="`https://s3.amazonaws.com/keybase_processed_uploads/${avatars[identity]}`"
|
v-lazy="`https://s3.amazonaws.com/keybase_processed_uploads/${avatars[identity]}`"
|
||||||
class="object-contain"
|
class="object-contain"
|
||||||
/>
|
/>
|
||||||
<Icon
|
<Icon
|
||||||
@ -172,126 +162,133 @@ onMounted(() => {
|
|||||||
<div class="text-sm mb-2">
|
<div class="text-sm mb-2">
|
||||||
{{ v.description?.identity || '-' }}
|
{{ v.description?.identity || '-' }}
|
||||||
</div>
|
</div>
|
||||||
<label for="delegate" class="btn btn-primary btn-sm w-full" @click="dialog.open('delegate', {validator_address: v.operator_address})">Delegate</label>
|
<label
|
||||||
|
for="delegate"
|
||||||
|
class="btn btn-primary btn-sm w-full"
|
||||||
|
@click="
|
||||||
|
dialog.open('delegate', {
|
||||||
|
validator_address: v.operator_address,
|
||||||
|
})
|
||||||
|
"
|
||||||
|
>Delegate</label
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="m-4 text-sm">
|
<div class="m-4 text-sm">
|
||||||
<p class="text-md">About Us</p>
|
<p class="text-md">About Us</p>
|
||||||
<VList class="card-list">
|
<VList class="card-list">
|
||||||
<VListItem prepend-icon="mdi-web">
|
<VListItem prepend-icon="mdi-web">
|
||||||
<span>Website: </span
|
<span>Website: </span
|
||||||
><span> {{ v.description?.website || '-' }}</span>
|
><span> {{ v.description?.website || '-' }}</span>
|
||||||
</VListItem>
|
</VListItem>
|
||||||
<VListItem prepend-icon="mdi-email-outline">
|
<VListItem prepend-icon="mdi-email-outline">
|
||||||
<span>Contact: </span
|
<span>Contact: </span
|
||||||
><span> {{ v.description?.security_contact }}</span>
|
><span> {{ v.description?.security_contact }}</span>
|
||||||
</VListItem>
|
</VListItem>
|
||||||
</VList>
|
</VList>
|
||||||
<p class="text-md mt-3">Validator Status</p>
|
<p class="text-md mt-3">Validator Status</p>
|
||||||
<VList class="card-list">
|
<VList class="card-list">
|
||||||
<VListItem prepend-icon="mdi-shield-account-outline">
|
<VListItem prepend-icon="mdi-shield-account-outline">
|
||||||
<span>Status: </span
|
<span>Status: </span
|
||||||
><span>
|
><span>
|
||||||
{{ String(v.status).replace('BOND_STATUS_', '') }}
|
{{ String(v.status).replace('BOND_STATUS_', '') }}
|
||||||
</span>
|
</span>
|
||||||
</VListItem>
|
</VListItem>
|
||||||
<VListItem prepend-icon="mdi-shield-alert-outline">
|
<VListItem prepend-icon="mdi-shield-alert-outline">
|
||||||
<span>Jailed: </span><span> {{ v.jailed || '-' }} </span>
|
<span>Jailed: </span><span> {{ v.jailed || '-' }} </span>
|
||||||
</VListItem>
|
</VListItem>
|
||||||
</VList>
|
</VList>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<div class="d-flex flex-column py-3 justify-space-between">
|
<div class="d-flex flex-column py-3 justify-space-between">
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<VAvatar
|
<VAvatar
|
||||||
color="secondary"
|
color="secondary"
|
||||||
rounded
|
rounded
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
icon="mdi-coin"
|
icon="mdi-coin"
|
||||||
></VAvatar>
|
></VAvatar>
|
||||||
<div class="ml-3 d-flex flex-column justify-center">
|
<div class="ml-3 d-flex flex-column justify-center">
|
||||||
<h4>
|
<h4>
|
||||||
{{
|
{{
|
||||||
format.formatToken2({
|
format.formatToken2({
|
||||||
amount: v.tokens,
|
amount: v.tokens,
|
||||||
denom: staking.params.bond_denom,
|
denom: staking.params.bond_denom,
|
||||||
})
|
})
|
||||||
}}
|
}}
|
||||||
</h4>
|
</h4>
|
||||||
<span class="text-sm">Total Bonded Tokens</span>
|
<span class="text-sm">Total Bonded Tokens</span>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex">
|
|
||||||
<VAvatar
|
|
||||||
color="secondary"
|
|
||||||
rounded
|
|
||||||
variant="outlined"
|
|
||||||
icon="mdi-percent"
|
|
||||||
></VAvatar>
|
|
||||||
<div class="ml-3 d-flex flex-column justify-center">
|
|
||||||
<h4>
|
|
||||||
{{ format.formatToken(selfBonded.balance) }} ({{
|
|
||||||
selfRate
|
|
||||||
}})
|
|
||||||
</h4>
|
|
||||||
<span class="text-sm">Self Bonded</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-flex">
|
|
||||||
<VAvatar
|
|
||||||
color="secondary"
|
|
||||||
rounded
|
|
||||||
variant="outlined"
|
|
||||||
icon="mdi-account-tie"
|
|
||||||
></VAvatar>
|
|
||||||
<div class="ml-3 d-flex flex-column justify-center">
|
|
||||||
<h4>
|
|
||||||
{{ v.min_self_delegation }} {{ staking.params.bond_denom }}
|
|
||||||
</h4>
|
|
||||||
<span class="text-sm">Min Self Delegation:</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex">
|
|
||||||
<VAvatar
|
|
||||||
color="secondary"
|
|
||||||
rounded
|
|
||||||
variant="outlined"
|
|
||||||
icon="mdi-finance"
|
|
||||||
></VAvatar>
|
|
||||||
<div class="ml-3 d-flex flex-column justify-center">
|
|
||||||
<h4>{{ apr }}</h4>
|
|
||||||
<span class="text-sm">Annual Profit</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-flex">
|
|
||||||
<VAvatar
|
|
||||||
color="secondary"
|
|
||||||
rounded
|
|
||||||
variant="outlined"
|
|
||||||
icon="mdi-stairs-up"
|
|
||||||
></VAvatar>
|
|
||||||
<div class="ml-3 d-flex flex-column justify-center">
|
|
||||||
<h4>{{ v.unbonding_height }}</h4>
|
|
||||||
<span class="text-sm">Unbonding Height</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-flex">
|
|
||||||
<VAvatar
|
|
||||||
color="secondary"
|
|
||||||
rounded
|
|
||||||
variant="outlined"
|
|
||||||
icon="mdi-clock"
|
|
||||||
></VAvatar>
|
|
||||||
<div class="ml-3 d-flex flex-column justify-center">
|
|
||||||
<h4>{{ format.toDay(v.unbonding_time, 'from') }}</h4>
|
|
||||||
<span class="text-sm">Unbonding Time</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="d-flex">
|
||||||
|
<VAvatar
|
||||||
|
color="secondary"
|
||||||
|
rounded
|
||||||
|
variant="outlined"
|
||||||
|
icon="mdi-percent"
|
||||||
|
></VAvatar>
|
||||||
|
<div class="ml-3 d-flex flex-column justify-center">
|
||||||
|
<h4>
|
||||||
|
{{ format.formatToken(selfBonded.balance) }} ({{ selfRate }})
|
||||||
|
</h4>
|
||||||
|
<span class="text-sm">Self Bonded</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex">
|
||||||
|
<VAvatar
|
||||||
|
color="secondary"
|
||||||
|
rounded
|
||||||
|
variant="outlined"
|
||||||
|
icon="mdi-account-tie"
|
||||||
|
></VAvatar>
|
||||||
|
<div class="ml-3 d-flex flex-column justify-center">
|
||||||
|
<h4>
|
||||||
|
{{ v.min_self_delegation }} {{ staking.params.bond_denom }}
|
||||||
|
</h4>
|
||||||
|
<span class="text-sm">Min Self Delegation:</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex">
|
||||||
|
<VAvatar
|
||||||
|
color="secondary"
|
||||||
|
rounded
|
||||||
|
variant="outlined"
|
||||||
|
icon="mdi-finance"
|
||||||
|
></VAvatar>
|
||||||
|
<div class="ml-3 d-flex flex-column justify-center">
|
||||||
|
<h4>{{ apr }}</h4>
|
||||||
|
<span class="text-sm">Annual Profit</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex">
|
||||||
|
<VAvatar
|
||||||
|
color="secondary"
|
||||||
|
rounded
|
||||||
|
variant="outlined"
|
||||||
|
icon="mdi-stairs-up"
|
||||||
|
></VAvatar>
|
||||||
|
<div class="ml-3 d-flex flex-column justify-center">
|
||||||
|
<h4>{{ v.unbonding_height }}</h4>
|
||||||
|
<span class="text-sm">Unbonding Height</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex">
|
||||||
|
<VAvatar
|
||||||
|
color="secondary"
|
||||||
|
rounded
|
||||||
|
variant="outlined"
|
||||||
|
icon="mdi-clock"
|
||||||
|
></VAvatar>
|
||||||
|
<div class="ml-3 d-flex flex-column justify-center">
|
||||||
|
<h4>{{ format.toDay(v.unbonding_time, 'from') }}</h4>
|
||||||
|
<span class="text-sm">Unbonding Time</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="divider"></div>
|
<div class="divider"></div>
|
||||||
@ -309,9 +306,7 @@ onMounted(() => {
|
|||||||
<VCardTitle>Commissions & Rewards</VCardTitle>
|
<VCardTitle>Commissions & Rewards</VCardTitle>
|
||||||
<VCardItem class="pt-0 pb-0">
|
<VCardItem class="pt-0 pb-0">
|
||||||
<div class="overflow-auto" style="max-height: 280px">
|
<div class="overflow-auto" style="max-height: 280px">
|
||||||
<VCardSubtitle>
|
<VCardSubtitle> Commissions </VCardSubtitle>
|
||||||
Commissions
|
|
||||||
</VCardSubtitle>
|
|
||||||
<VDivider class="mb-2"></VDivider>
|
<VDivider class="mb-2"></VDivider>
|
||||||
<VChip
|
<VChip
|
||||||
v-for="(i, k) in commission"
|
v-for="(i, k) in commission"
|
||||||
@ -336,7 +331,16 @@ onMounted(() => {
|
|||||||
{{ format.formatToken2(i) }}
|
{{ format.formatToken2(i) }}
|
||||||
</VChip>
|
</VChip>
|
||||||
</div>
|
</div>
|
||||||
<label for="withdraw_commission" class="btn btn-primary mt-2 w-full btn-sm" @click="dialog.open('withdraw_commission', {validator_address: v.operator_address})">Withdraw</label>
|
<label
|
||||||
|
for="withdraw_commission"
|
||||||
|
class="btn btn-primary mt-2 w-full btn-sm"
|
||||||
|
@click="
|
||||||
|
dialog.open('withdraw_commission', {
|
||||||
|
validator_address: v.operator_address,
|
||||||
|
})
|
||||||
|
"
|
||||||
|
>Withdraw</label
|
||||||
|
>
|
||||||
</VCardItem>
|
</VCardItem>
|
||||||
</VCard>
|
</VCard>
|
||||||
</VCol>
|
</VCol>
|
||||||
|
|||||||
@ -1,5 +1,10 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useBaseStore, useFormatter, useStakingStore, useTxDialog } from '@/stores';
|
import {
|
||||||
|
useBaseStore,
|
||||||
|
useFormatter,
|
||||||
|
useStakingStore,
|
||||||
|
useTxDialog,
|
||||||
|
} from '@/stores';
|
||||||
import { computed } from '@vue/reactivity';
|
import { computed } from '@vue/reactivity';
|
||||||
import { onMounted, ref, type DebuggerEvent } from 'vue';
|
import { onMounted, ref, type DebuggerEvent } from 'vue';
|
||||||
import { Icon } from '@iconify/vue';
|
import { Icon } from '@iconify/vue';
|
||||||
@ -7,7 +12,7 @@ import type { Key, Validator } from '@/types';
|
|||||||
|
|
||||||
const staking = useStakingStore();
|
const staking = useStakingStore();
|
||||||
const format = useFormatter();
|
const format = useFormatter();
|
||||||
const dialog = useTxDialog()
|
const dialog = useTxDialog();
|
||||||
|
|
||||||
const cache = JSON.parse(localStorage.getItem('avatars') || '{}');
|
const cache = JSON.parse(localStorage.getItem('avatars') || '{}');
|
||||||
const avatars = ref(cache || {});
|
const avatars = ref(cache || {});
|
||||||
@ -218,7 +223,7 @@ const rank = function (position: number) {
|
|||||||
<!-- 👉 Validator -->
|
<!-- 👉 Validator -->
|
||||||
<td>
|
<td>
|
||||||
<div
|
<div
|
||||||
class="d-flex align-center overflow-hidden"
|
class="flex items-center overflow-hidden"
|
||||||
style="max-width: 400px"
|
style="max-width: 400px"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
@ -241,7 +246,7 @@ const rank = function (position: number) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="d-flex flex-column">
|
<div class="flex flex-col">
|
||||||
<h6 class="text-sm text-primary">
|
<h6 class="text-sm text-primary">
|
||||||
<RouterLink
|
<RouterLink
|
||||||
:to="{
|
:to="{
|
||||||
@ -262,7 +267,7 @@ const rank = function (position: number) {
|
|||||||
|
|
||||||
<!-- 👉 Voting Power -->
|
<!-- 👉 Voting Power -->
|
||||||
<td class="text-right">
|
<td class="text-right">
|
||||||
<div class="d-flex flex-column">
|
<div class="flex flex-col">
|
||||||
<h6 class="text-sm font-weight-medium">
|
<h6 class="text-sm font-weight-medium">
|
||||||
{{
|
{{
|
||||||
format.formatToken(
|
format.formatToken(
|
||||||
@ -309,7 +314,16 @@ const rank = function (position: number) {
|
|||||||
</td>
|
</td>
|
||||||
<!-- 👉 Action -->
|
<!-- 👉 Action -->
|
||||||
<td>
|
<td>
|
||||||
<label for="delegate" class="btn btn-xs bg-primary" @click="dialog.open('delegate', {validator_address: v.operator_address})">Delegate</label>
|
<label
|
||||||
|
for="delegate"
|
||||||
|
class="btn btn-xs bg-primary"
|
||||||
|
@click="
|
||||||
|
dialog.open('delegate', {
|
||||||
|
validator_address: v.operator_address,
|
||||||
|
})
|
||||||
|
"
|
||||||
|
>Delegate</label
|
||||||
|
>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user