imp: improve UI for dynamic components

src/modules/[chain]/block/[height].vue

@@ -64,11 +64,12 @@ onBeforeRouteUpdate(async (to, from, next) => {
   <div>
     <div v-if="isFutureBlock" class="text-center pt-28">
       <div v-if="remainingBlocks > 0">
+        <div class="text-primary font-bold text-lg md: my-8">#{{ target }}</div>
         <Countdown :time="estimateTime" css="text-5xl font-sans md:mx-5" />
         <div class="my-5">Estimated Time: <span class="text-xl font-bold">{{ format.toLocaleDate(estimateDate) }}</span>
         </div>
         <div class="pt-10 flex justify-center">
-          <table class="table table-compact rounded-lg">
+          <table class="table w-max rounded-lg bg-base-100">
             <tbody>
               <tr class="hover cursor-pointer" @click="edit = !edit">
                 <td>Countdown For Block:</td>

src/modules/[chain]/block/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref } from '@vue/reactivity';
 import { useBaseStore, useFormatter } from '@/stores';
-const props = defineProps(['height', 'chain']);
+const props = defineProps(['chain']);
 
 const tab = ref('blocks');
 
@@ -19,7 +19,10 @@ const list = computed(() => {
     <div>
         <div class="tabs tabs-boxed bg-transparent mb-4">
             <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'blocks' }"
-                @click="tab = 'blocks'">Blocks</a>
+                @click="tab = 'blocks'">Recent Blocks</a>
+            <RouterLink class="tab text-gray-400 uppercase" 
+                :to="`/${chain}/block/${Number(base.latest?.block?.header.height||0) + 10000}`"
+                >Future blocks</RouterLink>
             <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'transactions' }"
                 @click="tab = 'transactions'">Transactions</a>
         </div>

src/modules/wallet/accounts.vue

@@ -312,7 +312,7 @@ async function loadBalances(endpoint: string, address: string) {
               <li v-if="x.delegation.amount">
                 <a>
                   <img :src="x.account.logo" class="w-8 h-8 mr-2" />
-                  <span class="font-bold">{{ format.formatToken(x.delegation, true, '0,0.[000000]', 'all') }} <br><span
+                  <span class="font-bold">{{ format.formatToken(x.delegation, true, '0,0.[00]', 'all') }} <br><span
                       class="text-xs" :class="format.color(x.delegation.change24h)">{{
                         format.formatNumber(x.delegation.change24h, '+0.[00]') }}%</span></span>
                   <span class="float-right text-right">${{ format.formatNumber(x.delegation.value, '0,0.[00]') }}<br><span
@@ -331,7 +331,7 @@ async function loadBalances(endpoint: string, address: string) {
               <li v-for="x in s.balances">
                 <a>
                   <img :src="s.account.logo" class="w-8 h-8 mr-2" />
-                  <span class="font-bold">{{ format.formatToken(x, true, '0,0.[000000]', 'all') }} <br><span
+                  <span class="font-bold">{{ format.formatToken(x, true, '0,0.[00]', 'all') }} <br><span
                       class="text-xs" :class="format.color(x.change24h)">{{ format.formatNumber(x.change24h, '+0.[00]')
                       }}%</span></span>
                   <span class="float-right text-right">${{ format.formatNumber(x.value, '0,0.[00]') }}<br><span