From 5f7339c04bf8ce79d0519ff880fd752d08ef88af Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Fri, 21 Apr 2023 16:08:31 +0800
Subject: [PATCH] add accounts

---
 src/components/charts/DonutChart.vue          |  22 ++++
 src/components/charts/PriceMarketChart.vue    |   2 +-
 .../{apexCharConfig.ts => apexChartConfig.ts} |  10 +-
 src/libs/registry.ts                          |   2 +-
 src/modules/[chain]/account/[address].vue     | 110 +++++++++++++++---
 src/stores/useFormatter.ts                    |   2 +-
 src/types/staking.ts                          |  13 ++-
 7 files changed, 134 insertions(+), 27 deletions(-)
 create mode 100644 src/components/charts/DonutChart.vue
 rename src/components/charts/{apexCharConfig.ts => apexChartConfig.ts} (98%)

diff --git a/src/components/charts/DonutChart.vue b/src/components/charts/DonutChart.vue
new file mode 100644
index 00000000..dae181ad
--- /dev/null
+++ b/src/components/charts/DonutChart.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import VueApexCharts from 'vue3-apexcharts'
+import { useTheme } from 'vuetify'
+import { getDonutChartConfig } from './apexChartConfig'
+
+const props = defineProps(["series", "labels"])
+
+const vuetifyTheme = useTheme()
+
+const expenseRationChartConfig = computed(() => getDonutChartConfig(vuetifyTheme.current.value, props.labels))
+
+
+</script>
+
+<template>
+  <VueApexCharts
+    type="donut"
+    height="410"
+    :options="expenseRationChartConfig"
+    :series="series"
+  />
+</template>
diff --git a/src/components/charts/PriceMarketChart.vue b/src/components/charts/PriceMarketChart.vue
index ae36430f..eb010810 100644
--- a/src/components/charts/PriceMarketChart.vue
+++ b/src/components/charts/PriceMarketChart.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import VueApexCharts from 'vue3-apexcharts'
 import { useTheme } from 'vuetify'
-import { getAreaChartSplineConfig, getMarketPriceChartConfig } from './apexCharConfig'
+import { getAreaChartSplineConfig, getMarketPriceChartConfig } from './apexChartConfig'
 import { useIndexModule } from '@/modules/[chain]/indexStore';
 import { computed, ref } from '@vue/reactivity';
 
diff --git a/src/components/charts/apexCharConfig.ts b/src/components/charts/apexChartConfig.ts
similarity index 98%
rename from src/components/charts/apexCharConfig.ts
rename to src/components/charts/apexChartConfig.ts
index 059fdc43..4782212d 100644
--- a/src/components/charts/apexCharConfig.ts
+++ b/src/components/charts/apexChartConfig.ts
@@ -383,7 +383,7 @@ export const getRadialBarChartConfig = (themeColors: ThemeInstance['themes']['va
   }
 }
 
-export const getDonutChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
+export const getDonutChartConfig = (themeColors: ThemeInstance['themes']['value']['colors'], labels: string[]) => {
   const donutColors = {
     series1: '#fdd835',
     series2: '#00d4bd',
@@ -396,7 +396,7 @@ export const getDonutChartConfig = (themeColors: ThemeInstance['themes']['value'
 
   return {
     stroke: { width: 0 },
-    labels: ['Operational', 'Networking', 'Hiring', 'R&D'],
+    labels,
     colors: [donutColors.series1, donutColors.series5, donutColors.series3, donutColors.series2],
     dataLabels: {
       enabled: true,
@@ -425,10 +425,10 @@ export const getDonutChartConfig = (themeColors: ThemeInstance['themes']['value'
               formatter: (val: string) => `${parseInt(val, 10)}`,
             },
             total: {
-              show: true,
+              show: false,
               fontSize: '1.5rem',
-              label: 'Operational',
-              formatter: () => '31%',
+              // label: 'Operational',
+              // formatter: () => '31%',
               color: themePrimaryTextColor,
             },
           },
diff --git a/src/libs/registry.ts b/src/libs/registry.ts
index de24181f..3e7cdb7b 100644
--- a/src/libs/registry.ts
+++ b/src/libs/registry.ts
@@ -64,7 +64,7 @@ export interface RequestRegistry {
   staking_validators_address: Request<{validator: Validator}>;
   staking_validators_delegations: Request<PaginatedDelegations>;
   staking_validators_delegations_delegator: Request<{delegation_response: Delegation}>;
-  staking_validators_delegations_unbonding_delegations: Request<any>;
+  staking_validators_delegations_unbonding_delegations: Request<PaginatedUnbonding>;
 
   base_tendermint_abci_query: Request<any>;
   base_tendermint_block_latest: Request<Block>;
diff --git a/src/modules/[chain]/account/[address].vue b/src/modules/[chain]/account/[address].vue
index 919d55b5..b701c1eb 100644
--- a/src/modules/[chain]/account/[address].vue
+++ b/src/modules/[chain]/account/[address].vue
@@ -1,32 +1,52 @@
 <script lang="ts" setup>
-import { useBlockchain, useFormatter } from '@/stores';
+import { useBlockchain, useFormatter, useStakingStore } from '@/stores';
 import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
+import DonutChart from '@/components/charts/DonutChart.vue'
 import { computed, ref } from '@vue/reactivity';
 import 'vue-json-pretty/lib/styles.css';
-import type { AuthAccount, Delegation, TxResponse, DelegatorRewards } from '@/types';
+import type { AuthAccount, Delegation, TxResponse, DelegatorRewards, UnbondingResponses } from '@/types';
 import type { Coin } from '@cosmjs/amino';
 
 const props = defineProps(['address', 'chain'])
 
 const blockchain = useBlockchain()
+const stakingStore = useStakingStore()
 const format = useFormatter()
 const account = ref({} as AuthAccount)
 const txs = ref({} as TxResponse[])
 const delegations = ref([] as Delegation[])
 const rewards = ref({} as DelegatorRewards)
 const balances = ref([] as Coin[])
-const totalAmount = computed(()=> {
-    let total = 0;
+const unbonding = ref([] as UnbondingResponses[])
+const unbondingTotal = ref(0)
+const chart = {}
+
+const totalAmountByCategory = computed(()=> {
+    let sumDel = 0;
     delegations.value?.forEach(x => {
-        total += Number(x.balance.amount)
+        sumDel += Number(x.balance.amount)
     })
+    let sumRew = 0
     rewards.value?.total?.forEach(x => {
-        total += Number(x.amount)
+        sumRew += Number(x.amount)
     })
+    let sumBal = 0
     balances.value?.forEach(x => {
-        total += Number(x.amount)
+        sumBal += Number(x.amount)
     })
-    return total
+    let sumUn = 0
+    unbonding.value?.forEach(x => {
+        x.entries?.forEach(y => {
+            sumUn += Number(y.balance)
+        })
+    })
+    return [sumBal, sumDel, sumRew, sumUn]
+})
+
+const labels = ['Balance', 'Delegation', 'Reward', 'Unbonding']
+
+const totalAmount= computed(()=> {
+    return totalAmountByCategory.value.reduce((p, c)=> c + p, 0)
 })
 
 
@@ -46,6 +66,14 @@ function loadAccount(address: string) {
     blockchain.rpc.getBankBalances(address).then(x => {
         balances.value = x.balances
     })
+    blockchain.rpc.getStakingDelegatorUnbonding(address).then(x => {
+        unbonding.value = x.unbonding_responses
+        x.unbonding_responses?.forEach(y => {
+            y.entries.forEach(z => {
+                unbondingTotal.value += Number(z.balance)
+            })
+        })
+    })
 }
 loadAccount(props.address)
 </script>
@@ -80,7 +108,7 @@ loadAccount(props.address)
             <VCardItem>
             <VRow>
                 <VCol cols="12" md="4">
-                    xx
+                    <DonutChart :series="totalAmountByCategory" :labels="labels"/>
                 </VCol>
                 <VCol cols="12" md="8">
                     <VList class="card-list">
@@ -89,10 +117,10 @@ loadAccount(props.address)
                             <VAvatar
                             rounded
                             variant="tonal"
-                            size="45"
-                            color="success"
+                            size="35"
+                            color="info"
                             >
-                                <VIcon icon="mdi-card" />
+                                <VIcon icon="mdi-account-cash"  size="20"/>
                             </VAvatar>
                         </template>
                         <VListItemTitle class="text-sm font-weight-semibold">
@@ -110,10 +138,10 @@ loadAccount(props.address)
                             <VAvatar
                             rounded
                             variant="tonal"
-                            size="45"
-                            color="info"
+                            size="35"
+                            color="warning"
                             >
-                                <VIcon icon="mdi-lock" />
+                                <VIcon icon="mdi-user-clock"  size="20" />
                             </VAvatar>
                         </template>
 
@@ -132,10 +160,10 @@ loadAccount(props.address)
                             <VAvatar
                             rounded
                             variant="tonal"
-                            size="45"
-                            color="warning"
+                            size="35"
+                            color="success"
                             >
-                                <VIcon icon="mdi-up" />
+                                <VIcon icon="mdi-account-arrow-up" size="20" />
                             </VAvatar>
                         </template>
 
@@ -149,6 +177,29 @@ loadAccount(props.address)
                             <VChip color="primary">{{ format.calculatePercent(v.amount, totalAmount) }}</VChip>
                         </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>
+                            <VChip color="primary">{{ format.calculatePercent(unbondingTotal, totalAmount) }}</VChip>
+                        </template>
+                        </VListItem>
                     </VList>
                     <VDivider class="my-2"></VDivider>
                     {{ totalAmount }}
@@ -177,6 +228,29 @@ loadAccount(props.address)
                 </VTable>
             </VCardItem>
         </VCard>
+        <VCard class="my-5" v-if="unbonding && unbonding.length > 0">
+            <VCardItem>
+                <VCardTitle>Unbonding Delegations</VCardTitle>
+                <VTable>
+                    <thead>
+                        <tr><th>Creation Height</th><th>Initial Balance</th><th>Balance</th><th>Completion Time</th></tr>
+                    </thead>
+                    <tbody>
+                        <div v-for="v in unbonding">
+                        <tr>
+                            <td>{{ format.validatorFromBech32(v.validator_address) }} </td>
+                        </tr>
+                        <tr v-for="entry in v.entries">
+                            <td>{{ entry.creation_height }}</td>
+                            <td>{{ format.formatToken({ amount: entry.initial_balance, denom: stakingStore.params.bond_denom }, true, "0,0.[00]") }}</td>
+                            <td>{{ format.formatToken({ amount: entry.balance, denom: stakingStore.params.bond_denom }, true, "0,0.[00]") }}</td>
+                            <td>{{ format.toDay(entry.completion_time, "to") }} </td>
+                        </tr>
+                        </div>
+                    </tbody>
+                </VTable>
+            </VCardItem>
+        </VCard>
         <VCard class="my-5">
             <VCardItem>
                 <VCardTitle>Transactions</VCardTitle>
diff --git a/src/stores/useFormatter.ts b/src/stores/useFormatter.ts
index de040f03..3c9dc00f 100644
--- a/src/stores/useFormatter.ts
+++ b/src/stores/useFormatter.ts
@@ -124,7 +124,7 @@ export const useFormatter = defineStore('formatter', {
             const validator = this.staking.validators.find(x => x.operator_address === address)
             return validator?.description?.moniker
         },
-        calculatePercent(input?: string, total?: string|number ) {
+        calculatePercent(input?: string|number, total?: string|number ) {
             if(!input || !total) return '0'
             const percent = Number(input)/Number(total)
             console.log(input, total, percent);
diff --git a/src/types/staking.ts b/src/types/staking.ts
index eb2ce901..484b6045 100644
--- a/src/types/staking.ts
+++ b/src/types/staking.ts
@@ -29,6 +29,17 @@ export interface CommissionRate {
     "update_time": string
 }
 
+export interface UnbondingResponses {
+    delegator_address: string,
+    validator_address: string,
+    entries: {
+        creation_height: string,
+        completion_time: string,
+        initial_balance: string,
+        balance: string
+      }[]
+  }
+
 export interface Delegation {
     delegation: {
         delegator_address: string,
@@ -70,7 +81,7 @@ export interface PaginatedRedelegations extends PaginatedResponse {
 }
 
 export interface PaginatedUnbonding extends PaginatedResponse {
-    unbonding_responses: any[]
+    unbonding_responses: UnbondingResponses[]
 }
 
 export interface PaginatedValdiators extends PaginatedResponse {