forked from cerc-io/cosmos-explorer
feat: account ui refactor
This commit is contained in:
Alisa | Side.one
parent
ad4ad7bdee
commit
869d716323
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { useBlockchain } from '@/stores/useBlockchain';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { computed } from '@vue/reactivity';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
@ -20,10 +21,10 @@ const items = computed(() => [
|
||||
<template>
|
||||
<div class="d-flex flex-rows align-center">
|
||||
<span class="text-h5 mr-3">{{ moduleName }}</span>
|
||||
<v-icon icon="mdi-dots-vertical" />
|
||||
<Icon icon="mdi-dots-vertical"/>
|
||||
<VBreadcrumbs :items="items">
|
||||
<template v-slot:divider>
|
||||
<v-icon icon="mdi-chevron-right"></v-icon>
|
||||
<Icon icon="mdi-chevron-right"/>
|
||||
</template>
|
||||
</VBreadcrumbs>
|
||||
</div>
|
||||
|
||||
@ -175,7 +175,8 @@ const sidebarShow = ref(false);
|
||||
<NavBarNotifications class="hidden md:inline-block" />
|
||||
<NavBarI18n class="hidden md:inline-block" />
|
||||
<NavbarThemeSwitcher class="hidden md:inline-block" />
|
||||
<NavBarWallet class="md:inline-block" />
|
||||
|
||||
<NavBarWallet class="block truncate md:inline-block text-xs md:text-sm" />
|
||||
</div>
|
||||
|
||||
<!-- 👉 Pages -->
|
||||
|
||||
@ -3,6 +3,7 @@ import { useBlockchain, useFormatter, useStakingStore, useTxDialog } from '@/sto
|
||||
import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
|
||||
import DonutChart from '@/components/charts/DonutChart.vue';
|
||||
import { computed, ref } from '@vue/reactivity';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import 'vue-json-pretty/lib/styles.css';
|
||||
import type {
|
||||
AuthAccount,
|
||||
@ -85,24 +86,139 @@ loadAccount(props.address);
|
||||
</script>
|
||||
<template>
|
||||
<div v-if="account">
|
||||
<VCard>
|
||||
<VList>
|
||||
<VListItem>
|
||||
<template #prepend>
|
||||
<VAvatar rounded variant="tonal" size="45" color="primary">
|
||||
<VIcon icon="mdi-qrcode" />
|
||||
</VAvatar>
|
||||
</template>
|
||||
<!-- address -->
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||
<div class="d-flex items-center">
|
||||
<!-- img -->
|
||||
<div class="inline-flex relative w-11 h-11 rounded-md">
|
||||
<div class="w-11 h-11 absolute rounded-md opacity-10 bg-primary"></div>
|
||||
<div class="w-full inline-flex items-center align-middle flex-none justify-center">
|
||||
<Icon icon="mdi-qrcode" class="text-primary" style="width: 27px; height: 27px;"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- content -->
|
||||
<div class="flex flex-1 flex-col truncate pl-4">
|
||||
<h2 class="text-sm card-title">Address:</h2>
|
||||
<span class="text-xs truncate"> {{ address }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VListItemTitle class="text-sm font-weight-semibold">
|
||||
Address:
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="text-xs">
|
||||
{{ address }}
|
||||
</VListItemSubtitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCard>
|
||||
<!-- Assets -->
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||
<h2 class="card-title mb-4">Assets</h2>
|
||||
<div class="grid md:grid-cols-3">
|
||||
<div class=" md:col-span-1">
|
||||
<DonutChart :series="totalAmountByCategory" :labels="labels" />
|
||||
</div>
|
||||
<div class="mt-4 md:col-span-2 md:mt-0 md:ml-4">
|
||||
<!-- button -->
|
||||
<div class="d-flex justify-end mb-4">
|
||||
<label for="send" class="btn btn-primary btn-sm mr-2" @click="dialog.open('send', {})">Send</label>
|
||||
<label for="transfer" class="btn btn-primary btn-sm" @click="dialog.open('transfer', {chain_name: blockchain.current?.prettyName})">transfer</label>
|
||||
</div>
|
||||
<!-- -->
|
||||
<VList class="card-list">
|
||||
<VListItem v-for="v in balances">
|
||||
<template #prepend>
|
||||
<VAvatar rounded variant="tonal" size="35" color="info">
|
||||
<VIcon icon="mdi-account-cash" size="20" />
|
||||
</VAvatar>
|
||||
</template>
|
||||
<VListItemTitle class="text-sm font-weight-semibold">
|
||||
{{ format.formatToken(v) }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="text-xs">
|
||||
≈${{ 0 }}
|
||||
</VListItemSubtitle>
|
||||
<template #append>
|
||||
<div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2">
|
||||
<span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span>
|
||||
{{
|
||||
format.calculatePercent(v.amount, totalAmount)
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
</VListItem>
|
||||
<VListItem v-for="v in delegations">
|
||||
<template #prepend>
|
||||
<VAvatar rounded variant="tonal" size="35" color="warning">
|
||||
<VIcon icon="mdi-user-clock" size="20" />
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="text-sm font-weight-semibold">
|
||||
{{ format.formatToken(v.balance) }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="text-xs">
|
||||
≈${{ 0 }}
|
||||
</VListItemSubtitle>
|
||||
<template #append>
|
||||
<div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2">
|
||||
<span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span>
|
||||
{{
|
||||
format.calculatePercent(v.balance.amount, totalAmount)
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
</VListItem>
|
||||
<VListItem v-for="v in rewards.total">
|
||||
<template #prepend>
|
||||
<VAvatar rounded variant="tonal" size="35" color="success">
|
||||
<VIcon icon="mdi-account-arrow-up" size="20" />
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="text-sm font-weight-semibold">
|
||||
{{ format.formatToken(v) }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="text-xs">
|
||||
≈${{ 0 }}
|
||||
</VListItemSubtitle>
|
||||
<template #append>
|
||||
<div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2">
|
||||
<span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span>
|
||||
{{
|
||||
format.calculatePercent(v.amount, totalAmount)
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
</VListItem>
|
||||
|
||||
<VListItem>
|
||||
<template #prepend>
|
||||
<VAvatar rounded variant="tonal" size="35" color="error">
|
||||
<VIcon icon="mdi-account-arrow-right" size="20" />
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="text-sm font-weight-semibold">
|
||||
{{
|
||||
format.formatToken({
|
||||
amount: String(unbondingTotal),
|
||||
denom: stakingStore.params.bond_denom,
|
||||
})
|
||||
}}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="text-xs">
|
||||
≈${{ 0 }}
|
||||
</VListItemSubtitle>
|
||||
<template #append>
|
||||
<div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2">
|
||||
<span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span>
|
||||
{{
|
||||
format.calculatePercent(unbondingTotal, totalAmount)
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
|
||||
<div class="divider"></div>
|
||||
{{ totalAmount }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VCard class="mt-5">
|
||||
<VCardTitle>Assets</VCardTitle>
|
||||
@ -218,25 +334,24 @@ loadAccount(props.address);
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
|
||||
<VCard class="my-5">
|
||||
<VCardItem>
|
||||
<VCardTitle>
|
||||
Delegations
|
||||
<div>
|
||||
<label for="delegate" class="btn btn-primary float-right btn-sm" @click="dialog.open('delegate', {})">Delegate</label>
|
||||
<label for="withdraw" class="btn btn-primary float-right btn-sm" @click="dialog.open('withdraw', {})">Withdraw</label>
|
||||
</div>
|
||||
</VCardTitle>
|
||||
<VTable>
|
||||
<!-- Delegations -->
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||
<h2 class="card-title mb-4">Delegations</h2>
|
||||
<div class="d-flex justify-end mb-4">
|
||||
<label for="delegate" class="btn btn-primary btn-sm mr-2" @click="dialog.open('delegate', {})">Delegate</label>
|
||||
<label for="withdraw" class="btn btn-primary btn-sm" @click="dialog.open('withdraw', {})">Withdraw</label>
|
||||
</div>
|
||||
<div class="overdflow-x-auto">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Validator</th>
|
||||
<th style="position:relative">Validator</th>
|
||||
<th>Delegation</th>
|
||||
<th>Rewards</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tbody class="text-sm">
|
||||
<tr v-for="v in delegations">
|
||||
<td class="text-caption text-primary">
|
||||
<RouterLink
|
||||
@ -258,28 +373,35 @@ loadAccount(props.address);
|
||||
}}
|
||||
</td>
|
||||
<td>
|
||||
<label for="delegate" class="btn btn-primary float-right btn-sm" @click="dialog.open('delegate', {validator_address: v.delegation.validator_address})">delegate</label>
|
||||
<label for="redelegate" class="btn btn-primary float-right btn-sm" @click="dialog.open('redelegate', {validator_address: v.delegation.validator_address})">Redelegate</label>
|
||||
<label for="unbond" class="btn btn-primary float-right btn-sm" @click="dialog.open('unbond', {validator_address: v.delegation.validator_address})">Unbond</label>
|
||||
<div class="d-flex justify-end">
|
||||
<label for="delegate" class="btn btn-primary btn-sm mr-2" @click="dialog.open('delegate', {validator_address: v.delegation.validator_address})">delegate</label>
|
||||
<label for="redelegate" class="btn btn-primary btn-sm mr-2 " @click="dialog.open('redelegate', {validator_address: v.delegation.validator_address})">Redelegate</label>
|
||||
<label for="unbond" class="btn btn-primary btn-sm" @click="dialog.open('unbond', {validator_address: v.delegation.validator_address})">Unbond</label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
<VCard class="my-5" v-if="unbonding && unbonding.length > 0">
|
||||
<VCardItem>
|
||||
<VCardTitle>Unbonding Delegations</VCardTitle>
|
||||
<VTable>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Unbonding Delegations -->
|
||||
<div
|
||||
class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow"
|
||||
v-if="unbonding && unbonding.length > 0"
|
||||
>
|
||||
<h2 class="card-title mb-4">Unbonding Delegations</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Creation Height</th>
|
||||
<th style="position: relative;">Creation Height</th>
|
||||
<th>Initial Balance</th>
|
||||
<th>Balance</th>
|
||||
<th>Completion Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tbody class="text-sm">
|
||||
<div v-for="v in unbonding">
|
||||
<tr>
|
||||
<td class="text-caption text-primary">
|
||||
@ -321,22 +443,24 @@ loadAccount(props.address);
|
||||
</tr>
|
||||
</div>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
<VCard class="my-5">
|
||||
<VCardItem>
|
||||
<VCardTitle>Transactions</VCardTitle>
|
||||
<VTable>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transactions -->
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||
<h2 class="card-title mb-4">Transactions</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table w-full ">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Height</th>
|
||||
<th style="position: relative;">Height</th>
|
||||
<th>Hash</th>
|
||||
<th>Messages</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tbody class="text-sm">
|
||||
<tr v-for="v in txs">
|
||||
<td class="text-sm text-primary">
|
||||
<RouterLink :to="`/${chain}/block/${v.height}`">{{
|
||||
@ -358,15 +482,15 @@ loadAccount(props.address);
|
||||
<td>{{ format.toDay(v.timestamp, 'from') }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Account</VCardTitle>
|
||||
<DynamicComponent :value="account" />
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Account -->
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||
<h2 class="card-title mb-4">Account</h2>
|
||||
<DynamicComponent :value="account" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>Account does not exists on chain</div>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user