imp: improve UI for dynamic components

src/components/dynamic/ArrayObjectElement.vue

@@ -18,8 +18,8 @@ const header = computed(() => {
 });
 </script>
 <template>
-  <div class="overflow-auto p-4 " :class=" value.length > 5 ? 'h-[500px]': ''">
+  <div class="overflow-auto max-h-96 ">
-    <table class="table table-compact table-pin-rows w-full">
+    <table class="table table-xs table-compact table-pin-rows w-full">
       <thead v-if="thead">
         <tr>
           <th

src/components/dynamic/ObjectElement.vue

@@ -15,10 +15,7 @@ const props = defineProps(['value']);
             {{ String(k).replaceAll('_', ' ') }}
           </td>
           <td>
-            <div
+            <div class="overflow-hidden w-auto whitespace-normal" >
-              class="overflow-hidden w-auto whitespace-normal"
-              style="max-width: 1000px"
-            >
               <Component
                 v-if="v"
                 :is="select(v, 'horizontal')"

src/components/dynamic/TextElement.vue

@@ -25,7 +25,7 @@ function isAddress() {
 
 const text = computed(() => {
   if(!props.value) return ""
-  const v = props.value
+  const v = String(props.value)
   switch(true) {
     case v.length === 28 && v.endsWith("="): {
       return format.validator(v) || v

src/layouts/components/DefaultLayout.vue

@@ -147,7 +147,9 @@ function selected(route: any, nav: NavLink) {
                 <img
                   v-if="el?.icon?.image"
                   :src="el?.icon?.image"
-                  class="w-6 h-6 rounded-full mr-3 ml-4"
+                  class="w-6 h-6 rounded-full mr-3 ml-4 " :class="{
+                  'border border-gray-300 bg-white': selected($route, el),
+                }"
                 />
                 <div
                   class="text-base capitalize text-gray-500 dark:text-gray-300"
@@ -180,7 +182,7 @@ function selected(route: any, nav: NavLink) {
           <img
             v-if="item?.icon?.image"
             :src="item?.icon?.image"
-            class="w-6 h-6 rounded-full mr-3"
+            class="w-6 h-6 rounded-full mr-3 border border-blue-100"
           />
           <div
             class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap"

src/libs/utils.ts

@@ -106,7 +106,7 @@ export function isHexAddress(v: any) {
 export function isBech32Address(v?: string) {
   if(!v) return ""
   const pattern = /^[a-z\d]+1[a-z\d]{38}$/g
-  return v.search(pattern) > -1
+  return String(v).search(pattern) > -1
 }
 
 export function hexToRgb(hex: string) {

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