imp: adjust the layout.

src/components/Countdown.vue

@@ -11,7 +11,6 @@ const props = defineProps({
     :time="time > 0 ? time : 0"
     v-slot="{ days, hours, minutes, seconds }"
   >
-    Time Remaining：{{ days }} days, {{ hours }} hours, {{ minutes }} minutes,
-    {{ seconds }} seconds.
+    {{ days }} days {{ hours }} hours {{ minutes }} minutes {{ seconds }} seconds
   </Countdown>
 </template>

src/modules/[chain]/account/[address].vue

@@ -19,6 +19,7 @@ import type {
   UnbondingResponses,
 } from '@/types';
 import type { Coin } from '@cosmjs/amino';
+import Countdown from '@/components/Countdown.vue';
 
 const props = defineProps(['address', 'chain']);
 
@@ -65,6 +66,11 @@ const totalAmount = computed(() => {
   return totalAmountByCategory.value.reduce((p, c) => c + p, 0);
 });
 
+const totalValue = computed(() => {
+  return 0;
+});
+
+
 function loadAccount(address: string) {
   blockchain.rpc.getAuthAccount(address).then((x) => {
     account.value = x.account;
@@ -125,14 +131,10 @@ function updateEvent() {
 
     <!-- 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="flex justify-end mb-4 pr-5">
+      <div class="flex justify-between">
+        <h2 class="card-title mb-4">Assets</h2>
+        <!-- button -->
+        <div class="flex justify-end mb-4 pr-5">
             <label
               for="send"
               class="btn btn-primary btn-sm mr-2"
@@ -154,6 +156,12 @@ function updateEvent() {
               >transfer</label
             >
           </div>
+      </div>
+      <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">          
           <!-- list-->
           <div class="">
             <!--balances  -->
@@ -299,7 +307,7 @@ function updateEvent() {
             </div>
           </div>
           <div class="mt-4 text-lg font-semibold mr-5 pl-5 border-t pt-4">
-            {{ totalAmount }}
+            Total Value: ${{ totalValue }}
           </div>
         </div>
       </div>
@@ -307,20 +315,22 @@ function updateEvent() {
 
     <!-- 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="flex justify-end mb-4">
-        <label
-          for="delegate"
-          class="btn btn-primary btn-sm mr-2"
-          @click="dialog.open('delegate', {}, updateEvent)"
-          >Delegate</label
-        >
-        <label
-          for="withdraw"
-          class="btn btn-primary btn-sm"
-          @click="dialog.open('withdraw', {}, updateEvent)"
-          >Withdraw</label
-        >
+      <div class="flex justify-between">
+        <h2 class="card-title mb-4">Delegations</h2>
+        <div class="flex justify-end mb-4">
+          <label
+            for="delegate"
+            class="btn btn-primary btn-sm mr-2"
+            @click="dialog.open('delegate', {}, updateEvent)"
+            >Delegate</label
+          >
+          <label
+            for="withdraw"
+            class="btn btn-primary btn-sm"
+            @click="dialog.open('withdraw', {}, updateEvent)"
+            >Withdraw</label
+          >
+        </div>
       </div>
       <div class="overflow-x-auto">
         <table class="table w-full text-sm table-zebra">
@@ -338,12 +348,12 @@ function updateEvent() {
                 <RouterLink
                   :to="`/${chain}/staking/${v.delegation.validator_address}`"
                   >{{
-                    format.validatorFromBech32(v.delegation.validator_address)
+                    format.validatorFromBech32(v.delegation.validator_address) || v.delegation.validator_address
                   }}</RouterLink
                 >
               </td>
               <td class="py-3">
-                {{ format.formatToken(v.balance, true, '0,0.[00]') }}
+                {{ format.formatToken(v.balance, true, '0,0.[000000]') }}
               </td>
               <td class="py-3">
                 {{
@@ -356,7 +366,7 @@ function updateEvent() {
                 }}
               </td>
               <td class="py-3">
-                <div class="flex justify-end">
+                <div v-if="v.balance" class="flex justify-end">
                   <label
                     for="delegate"
                     class="btn btn-primary btn-xs mr-2"
@@ -423,14 +433,13 @@ function updateEvent() {
               <th class="py-3">Completion Time</th>
             </tr>
           </thead>
-          <tbody class="text-sm">
-            <div v-for="(v, index) in unbonding" :key="index">
+          <tbody class="text-sm" v-for="(v, index) in unbonding" :key="index">
               <tr>
-                <td class="text-caption text-primary py-3">
+                <td class="text-caption text-primary py-3 bg-slate-200" colspan="10">
                   <RouterLink
                     :to="`/${chain}/staking/${v.validator_address}`"
                     >{{
-                      format.validatorFromBech32(v.validator_address)
+                      v.validator_address
                     }}</RouterLink
                   >
                 </td>
@@ -462,11 +471,10 @@ function updateEvent() {
                   }}
                 </td>
                 <td class="py-3">
-                  {{ format.toDay(entry.completion_time, 'to') }}
+                  <Countdown :time="new Date(entry.completion_time).getTime() - new Date().getTime()" />
                 </td>
               </tr>
-            </div>
-          </tbody>
+          </tbody>          
         </table>
       </div>
     </div>

src/stores/useDashboard.ts

@@ -280,7 +280,7 @@ export const useDashboard = defineStore('dashboard', {
       const coinIds = [] as string[]
       Object.keys(this.favoriteMap).forEach(k => {
         if(this.chains[k]) this.chains[k].assets.forEach(a => {
-          if(a.coingecko_id !== undefined) {
+          if(a.coingecko_id !== undefined && a.coingecko_id.length > 0) {
             coinIds.push(a.coingecko_id)
             a.denom_units.forEach(u => {
               this.coingecko[u.denom] = {

src/stores/useFormatter.ts

@@ -85,6 +85,7 @@ export const useFormatter = defineStore('formatter', {
       }
     },
     price(denom: string, currency = "usd") {
+      if(!denom || denom.length < 2) return 0
       const info = this.priceInfo(denom);
       return info ? info[currency] || 0 : 0;
     },
@@ -101,13 +102,21 @@ export const useFormatter = defineStore('formatter', {
       }
       return ""
     },
+    specialDenom(denom: string) {
+      switch(true) {
+        case denom.startsWith('u'): return 6
+        case denom.startsWith("a"): return 18
+        case denom==='inj': return 18
+      }
+      return 0
+    },
     tokenValueNumber(token?: Coin) {
-      if(!token) return 0
+      if(!token || !token.denom) return 0
       // find the symbol, 
-      const symbol = this.dashboard.coingecko[token.denom]?.symbol || "" 
+      const symbol = this.dashboard.coingecko[token.denom]?.symbol || token.denom 
       // convert denomation to to symbol
       const exponent =
-        this.dashboard.coingecko[symbol.toLowerCase()]?.exponent || 0;
+        this.dashboard.coingecko[symbol?.toLowerCase()]?.exponent || this.specialDenom(token.denom);
       // cacualte amount of symbol
       const amount = Number(token.amount) / (10 ** exponent)
       const value = amount * this.price(token.denom)