From f12c16bb9b8f1ee14306fc2fb29e497689d87f72 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Thu, 15 Jun 2023 18:47:44 +0800
Subject: [PATCH] imp: improve UI for dynamic components

---
 src/components/dynamic/ArrayObjectElement.vue | 4 ++--
 src/components/dynamic/ObjectElement.vue      | 5 +----
 src/components/dynamic/TextElement.vue        | 2 +-
 src/layouts/components/DefaultLayout.vue      | 6 ++++--
 src/libs/utils.ts                             | 2 +-
 src/modules/[chain]/block/[height].vue        | 3 ++-
 src/modules/[chain]/block/index.vue           | 7 +++++--
 src/modules/wallet/accounts.vue               | 4 ++--
 8 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/dynamic/ArrayObjectElement.vue b/src/components/dynamic/ArrayObjectElement.vue
index 2032002a..c759a08d 100644
--- a/src/components/dynamic/ArrayObjectElement.vue
+++ b/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]': ''">
-    <table class="table table-compact table-pin-rows w-full">
+  <div class="overflow-auto max-h-96 ">
+    <table class="table table-xs table-compact table-pin-rows w-full">
       <thead v-if="thead">
         <tr>
           <th
diff --git a/src/components/dynamic/ObjectElement.vue b/src/components/dynamic/ObjectElement.vue
index 7722e3ff..67cadc37 100644
--- a/src/components/dynamic/ObjectElement.vue
+++ b/src/components/dynamic/ObjectElement.vue
@@ -15,10 +15,7 @@ const props = defineProps(['value']);
             {{ String(k).replaceAll('_', ' ') }}
           </td>
           <td>
-            <div
-              class="overflow-hidden w-auto whitespace-normal"
-              style="max-width: 1000px"
-            >
+            <div class="overflow-hidden w-auto whitespace-normal" >
               <Component
                 v-if="v"
                 :is="select(v, 'horizontal')"
diff --git a/src/components/dynamic/TextElement.vue b/src/components/dynamic/TextElement.vue
index 5e9ae150..0c0923e3 100644
--- a/src/components/dynamic/TextElement.vue
+++ b/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
diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index 7a3117cd..493b81d3 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/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"
diff --git a/src/libs/utils.ts b/src/libs/utils.ts
index 2aca768e..c87454be 100644
--- a/src/libs/utils.ts
+++ b/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) {
diff --git a/src/modules/[chain]/block/[height].vue b/src/modules/[chain]/block/[height].vue
index fac09e98..66094b7a 100644
--- a/src/modules/[chain]/block/[height].vue
+++ b/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>
diff --git a/src/modules/[chain]/block/index.vue b/src/modules/[chain]/block/index.vue
index ea81220b..bdbd1859 100644
--- a/src/modules/[chain]/block/index.vue
+++ b/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>
diff --git a/src/modules/wallet/accounts.vue b/src/modules/wallet/accounts.vue
index 1ebf2ce4..d216c7a7 100644
--- a/src/modules/wallet/accounts.vue
+++ b/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