feat: account ui refactor

src/layouts/components/Breadcrumbs.vue

@@ -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>

src/layouts/components/DefaultLayout.vue

@@ -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 -->

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

@@ -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>
+    <!-- address -->
-      <VList>
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-        <VListItem>
+      <div class="d-flex items-center">
-          <template #prepend>
+        <!-- img -->
-            <VAvatar rounded variant="tonal" size="45" color="primary">
+        <div class="inline-flex relative w-11 h-11 rounded-md">
-              <VIcon icon="mdi-qrcode" />
+          <div class="w-11 h-11 absolute rounded-md opacity-10 bg-primary"></div>
-            </VAvatar>
+            <div class="w-full inline-flex items-center align-middle flex-none justify-center">
-          </template>
+             <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">
+    <!-- Assets -->
-            Address:
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-          </VListItemTitle>
+      <h2 class="card-title mb-4">Assets</h2>
-          <VListItemSubtitle class="text-xs">
+      <div class="grid md:grid-cols-3">
-            {{ address }}
+          <div class=" md:col-span-1">
-          </VListItemSubtitle>
+            <DonutChart :series="totalAmountByCategory" :labels="labels" />
-        </VListItem>
+          </div>
-      </VList>
+          <div class="mt-4 md:col-span-2 md:mt-0 md:ml-4">
-    </VCard>
+            <!-- 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">
+    <!-- Delegations -->
-      <VCardItem>
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-        <VCardTitle>
+      <h2 class="card-title mb-4">Delegations</h2>
-          Delegations
+      <div class="d-flex justify-end mb-4">
-          <div>
+        <label for="delegate" class="btn btn-primary btn-sm mr-2" @click="dialog.open('delegate', {})">Delegate</label>
-            <label for="delegate" class="btn btn-primary float-right btn-sm" @click="dialog.open('delegate', {})">Delegate</label>
+        <label for="withdraw" class="btn btn-primary btn-sm" @click="dialog.open('withdraw', {})">Withdraw</label>
-            <label for="withdraw" class="btn btn-primary float-right btn-sm" @click="dialog.open('withdraw', {})">Withdraw</label>
+      </div>
-          </div>
+      <div class="overdflow-x-auto">
-        </VCardTitle>
+        <table class="table w-full">
-        <VTable>
           <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>
+                <div class="d-flex justify-end">
-                <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="delegate" class="btn btn-primary btn-sm mr-2" @click="dialog.open('delegate', {validator_address: v.delegation.validator_address})">delegate</label>
-                <label for="unbond" class="btn btn-primary float-right btn-sm" @click="dialog.open('unbond', {validator_address: v.delegation.validator_address})">Unbond</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>
+        </table>
-      </VCardItem>
+      </div>
-    </VCard>
+    </div>
-    <VCard class="my-5" v-if="unbonding && unbonding.length > 0">
+
-      <VCardItem>
+    <!-- Unbonding Delegations -->
-        <VCardTitle>Unbonding Delegations</VCardTitle>
+    <div 
-        <VTable>
+      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>
+        </table>
-      </VCardItem>
+      </div>
-    </VCard>
+    </div>
-    <VCard class="my-5">
+
-      <VCardItem>
+     <!-- Transactions -->
-        <VCardTitle>Transactions</VCardTitle>
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-        <VTable>
+      <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>
+        </table>
-      </VCardItem>
+      </div>
-    </VCard>
+    </div>
-    <VCard>
+
-      <VCardItem>
+    <!-- Account -->
-        <VCardTitle>Account</VCardTitle>
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-        <DynamicComponent :value="account" />
+      <h2 class="card-title mb-4">Account</h2>
-      </VCardItem>
+      <DynamicComponent :value="account" />
-    </VCard>
+    </div>
   </div>
   <div v-else>Account does not exists on chain</div>
 </template>