zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

feat: address

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-13 07:03:42 +08:00
parent 869d716323
commit 6f32a8db16
2 changed files with 229 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/components/AccountItem.vue Normal file
View File

259
src/modules/[chain]/account/[address].vue
View File

@ -1,5 +1,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useBlockchain, useFormatter, useStakingStore, useTxDialog } from '@/stores'; import {
useBlockchain,
useFormatter,
useStakingStore,
useTxDialog,
} from '@/stores';
import DynamicComponent from '@/components/dynamic/DynamicComponent.vue'; import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
import DonutChart from '@/components/charts/DonutChart.vue'; import DonutChart from '@/components/charts/DonutChart.vue';
import { computed, ref } from '@vue/reactivity'; import { computed, ref } from '@vue/reactivity';
@ -91,9 +96,17 @@ loadAccount(props.address);
<div class="d-flex items-center"> <div class="d-flex items-center">
<!-- img --> <!-- img -->
<div class="inline-flex relative w-11 h-11 rounded-md"> <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
<div class="w-full inline-flex items-center align-middle flex-none justify-center"> class="w-11 h-11 absolute rounded-md opacity-10 bg-primary"
<Icon icon="mdi-qrcode" class="text-primary" style="width: 27px; height: 27px;"/> ></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>
</div> </div>
<!-- content --> <!-- content -->
@ -108,17 +121,31 @@ loadAccount(props.address);
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow"> <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<h2 class="card-title mb-4">Assets</h2> <h2 class="card-title mb-4">Assets</h2>
<div class="grid md:grid-cols-3"> <div class="grid md:grid-cols-3">
<div class=" md:col-span-1"> <div class="md:col-span-1">
<DonutChart :series="totalAmountByCategory" :labels="labels" /> <DonutChart :series="totalAmountByCategory" :labels="labels" />
</div> </div>
<div class="mt-4 md:col-span-2 md:mt-0 md:ml-4"> <div class="mt-4 md:col-span-2 md:mt-0 md:ml-4">
<!-- button --> <!-- button -->
<div class="d-flex justify-end mb-4"> <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
<label for="transfer" class="btn btn-primary btn-sm" @click="dialog.open('transfer', {chain_name: blockchain.current?.prettyName})">transfer</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> </div>
<!-- --> <!-- -->
<VList class="card-list"> <div class="">
<VListItem v-for="v in balances"> <VListItem v-for="v in balances">
<template #prepend> <template #prepend>
<VAvatar rounded variant="tonal" size="35" color="info"> <VAvatar rounded variant="tonal" size="35" color="info">
@ -128,15 +155,15 @@ loadAccount(props.address);
<VListItemTitle class="text-sm font-weight-semibold"> <VListItemTitle class="text-sm font-weight-semibold">
{{ format.formatToken(v) }} {{ format.formatToken(v) }}
</VListItemTitle> </VListItemTitle>
<VListItemSubtitle class="text-xs"> <VListItemSubtitle class="text-xs"> ≈${{ 0 }} </VListItemSubtitle>
≈${{ 0 }}
</VListItemSubtitle>
<template #append> <template #append>
<div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2"> <div
<span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span> class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2"
{{ >
format.calculatePercent(v.amount, totalAmount) <span
}} class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"
></span>
{{ format.calculatePercent(v.amount, totalAmount) }}
</div> </div>
</template> </template>
</VListItem> </VListItem>
@ -150,15 +177,15 @@ loadAccount(props.address);
<VListItemTitle class="text-sm font-weight-semibold"> <VListItemTitle class="text-sm font-weight-semibold">
{{ format.formatToken(v.balance) }} {{ format.formatToken(v.balance) }}
</VListItemTitle> </VListItemTitle>
<VListItemSubtitle class="text-xs"> <VListItemSubtitle class="text-xs"> ≈${{ 0 }} </VListItemSubtitle>
≈${{ 0 }}
</VListItemSubtitle>
<template #append> <template #append>
<div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2"> <div
<span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span> class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2"
{{ >
format.calculatePercent(v.balance.amount, totalAmount) <span
}} class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"
></span>
{{ format.calculatePercent(v.balance.amount, totalAmount) }}
</div> </div>
</template> </template>
</VListItem> </VListItem>
@ -172,47 +199,54 @@ loadAccount(props.address);
<VListItemTitle class="text-sm font-weight-semibold"> <VListItemTitle class="text-sm font-weight-semibold">
{{ format.formatToken(v) }} {{ format.formatToken(v) }}
</VListItemTitle> </VListItemTitle>
<VListItemSubtitle class="text-xs"> <VListItemSubtitle class="text-xs"> ≈${{ 0 }} </VListItemSubtitle>
≈${{ 0 }}
</VListItemSubtitle>
<template #append> <template #append>
<div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2"> <div
<span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span> class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2"
{{ >
format.calculatePercent(v.amount, totalAmount) <span
}} class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"
></span>
{{ format.calculatePercent(v.amount, totalAmount) }}
</div> </div>
</template> </template>
</VListItem> </VListItem>
<VListItem> <div class="flex items-center px-4">
<template #prepend> <div
<VAvatar rounded variant="tonal" size="35" color="error"> class="w-9 h-9 rounded overflow-hidden flex items-center justify-center relative mr-4"
<VIcon icon="mdi-account-arrow-right" size="20" /> >
</VAvatar> <Icon
</template> icon="mdi-account-arrow-right"
class="text-error"
size="20"
/>
<div
class="absolute top-0 bottom-0 left-0 right-0 bg-error opacity-20"
></div>
</div>
<VListItemTitle class="text-sm font-weight-semibold"> <div class="flex-1">
<div class="text-base font-semibold">
{{ {{
format.formatToken({ format.formatToken({
amount: String(unbondingTotal), amount: String(unbondingTotal),
denom: stakingStore.params.bond_denom, 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> </div>
</template> <div class="text-sm">≈${{ 0 }}</div>
</VListItem> </div>
</VList> <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>
</div>
</div>
<div class="divider"></div> <div class="divider"></div>
{{ totalAmount }} {{ totalAmount }}
@ -230,8 +264,22 @@ loadAccount(props.address);
<VCol cols="12" md="8"> <VCol cols="12" md="8">
<VList class="card-list"> <VList class="card-list">
<VListItem> <VListItem>
<label for="transfer" class="btn btn-primary float-right btn-sm" @click="dialog.open('transfer', {chain_name: blockchain.current?.prettyName})">transfer</label> <label
<label for="send" class="btn btn-primary float-right btn-sm" @click="dialog.open('send', {})">Send</label> for="transfer"
class="btn btn-primary float-right btn-sm"
@click="
dialog.open('transfer', {
chain_name: blockchain.current?.prettyName,
})
"
>transfer</label
>
<label
for="send"
class="btn btn-primary float-right btn-sm"
@click="dialog.open('send', {})"
>Send</label
>
</VListItem> </VListItem>
<VListItem v-for="v in balances"> <VListItem v-for="v in balances">
<template #prepend> <template #prepend>
@ -246,11 +294,13 @@ loadAccount(props.address);
≈${{ 0 }} ≈${{ 0 }}
</VListItemSubtitle> </VListItemSubtitle>
<template #append> <template #append>
<div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2"> <div
<span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span> class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2"
{{ >
format.calculatePercent(v.amount, totalAmount) <span
}} class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"
></span>
{{ format.calculatePercent(v.amount, totalAmount) }}
</div> </div>
</template> </template>
</VListItem> </VListItem>
@ -268,11 +318,13 @@ loadAccount(props.address);
≈${{ 0 }} ≈${{ 0 }}
</VListItemSubtitle> </VListItemSubtitle>
<template #append> <template #append>
<div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2"> <div
<span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span> class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2"
{{ >
format.calculatePercent(v.balance.amount, totalAmount) <span
}} class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"
></span>
{{ format.calculatePercent(v.balance.amount, totalAmount) }}
</div> </div>
</template> </template>
</VListItem> </VListItem>
@ -290,11 +342,13 @@ loadAccount(props.address);
≈${{ 0 }} ≈${{ 0 }}
</VListItemSubtitle> </VListItemSubtitle>
<template #append> <template #append>
<div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2"> <div
<span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span> class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2"
{{ >
format.calculatePercent(v.amount, totalAmount) <span
}} class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"
></span>
{{ format.calculatePercent(v.amount, totalAmount) }}
</div> </div>
</template> </template>
</VListItem> </VListItem>
@ -318,11 +372,13 @@ loadAccount(props.address);
≈${{ 0 }} ≈${{ 0 }}
</VListItemSubtitle> </VListItemSubtitle>
<template #append> <template #append>
<div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2"> <div
<span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span> class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2"
{{ >
format.calculatePercent(unbondingTotal, totalAmount) <span
}} class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"
></span>
{{ format.calculatePercent(unbondingTotal, totalAmount) }}
</div> </div>
</template> </template>
</VListItem> </VListItem>
@ -338,14 +394,24 @@ loadAccount(props.address);
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow"> <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<h2 class="card-title mb-4">Delegations</h2> <h2 class="card-title mb-4">Delegations</h2>
<div class="d-flex justify-end mb-4"> <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
<label for="withdraw" class="btn btn-primary btn-sm" @click="dialog.open('withdraw', {})">Withdraw</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>
<div class="overdflow-x-auto"> <div class="overdflow-x-auto">
<table class="table w-full"> <table class="table w-full">
<thead> <thead>
<tr> <tr>
<th style="position:relative">Validator</th> <th style="position: relative">Validator</th>
<th>Delegation</th> <th>Delegation</th>
<th>Rewards</th> <th>Rewards</th>
<th>Action</th> <th>Action</th>
@ -374,9 +440,36 @@ loadAccount(props.address);
</td> </td>
<td> <td>
<div class="d-flex justify-end"> <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
<label for="redelegate" class="btn btn-primary btn-sm mr-2 " @click="dialog.open('redelegate', {validator_address: v.delegation.validator_address})">Redelegate</label> for="delegate"
<label for="unbond" class="btn btn-primary btn-sm" @click="dialog.open('unbond', {validator_address: v.delegation.validator_address})">Unbond</label> 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> </div>
</td> </td>
</tr> </tr>
@ -395,7 +488,7 @@ loadAccount(props.address);
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
<th style="position: relative;">Creation Height</th> <th style="position: relative">Creation Height</th>
<th>Initial Balance</th> <th>Initial Balance</th>
<th>Balance</th> <th>Balance</th>
<th>Completion Time</th> <th>Completion Time</th>
@ -451,10 +544,10 @@ loadAccount(props.address);
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow"> <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<h2 class="card-title mb-4">Transactions</h2> <h2 class="card-title mb-4">Transactions</h2>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="table w-full "> <table class="table w-full">
<thead> <thead>
<tr> <tr>
<th style="position: relative;">Height</th> <th style="position: relative">Height</th>
<th>Hash</th> <th>Hash</th>
<th>Messages</th> <th>Messages</th>
<th>Time</th> <th>Time</th>