imp: improve dynamic components

src/components/dynamic/ArrayObjectElement.vue

@@ -18,16 +18,8 @@ const header = computed(() => {
 });
 </script>
 <template>
-  <div class="overflow-auto h-[500px] p-4">
-    <div
-      v-if="header.length > 0"
-      class="table table-compact w-full"
-      density="compact"
-      :height="value.length > 5? '300px': ''"
-      fixed-header
-      hover
-     
-    >
+  <div class="overflow-auto p-4 " :class=" value.length > 5 ? 'h-[500px]': ''">
+    <table class="table table-compact w-full">
       <thead v-if="thead">
         <tr>
           <th
@@ -46,8 +38,6 @@ const header = computed(() => {
           </td>
         </tr>
       </tbody>
-    </div>
-
-    <div v-else class="h-[300px]"></div>
+    </table>
   </div>
 </template>

src/components/dynamic/ObjectElement.vue

@@ -9,7 +9,7 @@ const props = defineProps(['value']);
       <tbody>
         <tr v-for="(v, k) of value">
           <td
-            class="text-capitalize whitespace-break-spaces w-1/5"
+            class="capitalize whitespace-break-spaces w-1/5"
             style="min-width: 180px"
           >
             {{ String(k).replaceAll('_', ' ') }}

src/components/dynamic/ObjectHorizontalElement.vue

@@ -12,7 +12,7 @@ const changeTab = (val: string) => {
   <div>
     <div class="tabs">
       <a
-        class="tab tab-bordered text-gray-400 uppercase"
+        class="tab tab-bordered text-gray-400 capitalize"
         v-for="(item, index) of value"
         :value="index"
         :class="{ 'tab-active': tab === String(index) }"

src/components/dynamic/TextElement.vue

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
-import { useFormatter } from '@/stores';
+import { isBech32Address } from '@/libs/utils';
+import { useBlockchain, useFormatter } from '@/stores';
 import MdEditor from 'md-editor-v3';
 import { computed } from 'vue';
 
+const chainStore = useBlockchain()
 const props = defineProps(['value']);
 const format = useFormatter();
 function isMD() {
@@ -15,16 +17,26 @@ function isMD() {
   return false;
 }
 
+function isAddress() {
+  return isBech32Address(props.value) && String(props.value).indexOf('valoper1') === -1
+}
+
 const text = computed(() => {
   if(!props.value) return ""
   const v = props.value
   switch(true) {
     case v.length === 28 && v.endsWith("="): {
-      return format.validator(v)
+      return format.validator(v) || v
+    }
+    // 2023-06-12T03:09:38.253756368Z
+    case v.search(/^[1-9]\d{3}-\d{1,2}-\d{1,2}T\d{1,2}:\d{2}:\d{2}[.\d]*Z$/g) > -1: {
+      return new Date(v).toLocaleString(navigator.language)
     }
   }
   return v
 })
+
+
 </script>
 <template>
   <MdEditor
@@ -33,6 +45,7 @@ const text = computed(() => {
     previewOnly
     class="md-editor-recover"
   ></MdEditor>
+  <RouterLink v-else-if="isAddress()" :to="`/${chainStore.chainName}/account/${text}`">{{ text }}</RouterLink>
   <span v-else>{{ text }}</span>
 </template>
 

src/components/dynamic/TokenElement.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+
+const props = defineProps(['value']);
+
+</script>
+<template>
+  <div class="overflow-auto">
+      {{ value["amount"] }} {{ value["denom"] }}
+  </div>
+</template>

src/components/dynamic/index.ts

@@ -3,7 +3,7 @@ import TextElement from './TextElement.vue';
 import ArrayElement from './ArrayElement.vue';
 import UInt8Array from './UInt8Array.vue';
 import NumberElement from './NumberElement.vue';
-import TxsElement from './TxsElement.vue';
+import TokenElement from './TokenElement.vue';
 import ObjectHorizontalElement from './ObjectHorizontalElement.vue';
 import Long from 'long';
 
@@ -31,6 +31,9 @@ function selectObject(v: Object, direct?: string) {
       return UInt8Array;
     case Array.isArray(v):
       return ArrayElement;
+    case v && Object.keys(v).includes('amount') && Object.keys(v).includes('denom'): {
+      return TokenElement;
+    }
     case direct === 'horizontal':
       return ObjectHorizontalElement;
     default:

src/libs/utils.ts

@@ -103,6 +103,12 @@ export function isHexAddress(v: any) {
   return v.length === 28;
 }
 
+export function isBech32Address(v?: string) {
+  if(!v) return ""
+  const pattern = /^[a-z\d]+1[a-z\d]{38}$/g
+  return v.search(pattern) > -1
+}
+
 export function hexToRgb(hex: string) {
   // remove '#'
   hex = hex.replace('#', '');

src/modules/[chain]/tx/[hash].vue

@@ -56,7 +56,7 @@ const messages = computed(() => {
                         <tr>
                             <td>Time</td>
                             <td>
-                                {{ tx.tx_response.timestamp }} ({{
+                                {{ format.toLocaleDate(tx.tx_response.timestamp) }} ({{
                                     format.toDay(tx.tx_response.timestamp, 'from')
                                 }})
                             </td>
@@ -92,9 +92,8 @@ const messages = computed(() => {
             <h2 class="card-title truncate mb-2">
                 Messages: ({{ messages.length }})
             </h2>
-            <div class="divider"></div>
             <div v-for="(msg, i) in messages">
-                <div>
+                <div class="border border-slate-400 rounded-md mt-4">
                     <DynamicComponent :value="msg" />
                 </div>
             </div>

src/stores/useDashboard.ts

@@ -278,7 +278,9 @@ export const useDashboard = defineStore('dashboard', {
     },
     loadingPrices() {
       const coinIds = [] as string[]
-      Object.keys(this.favoriteMap).forEach(k => {
+      const keys = Object.keys(this.chains) // load all blockchain
+      // Object.keys(this.favoriteMap) //only load favorite once it has too many chains
+      keys.forEach(k => {
         if(this.chains[k]) this.chains[k].assets.forEach(a => {
           if(a.coingecko_id !== undefined && a.coingecko_id.length > 0) {
             coinIds.push(a.coingecko_id)

src/stores/useFormatter.ts

@@ -236,6 +236,10 @@ export const useFormatter = defineStore('formatter', {
     numberAndSign(input: number, fmt = '+0,0') {
       return numeral(input).format(fmt);
     },
+    toLocaleDate(time?: string | number | Date) {
+      if(!time) return ""
+      return new Date(time).toLocaleString(navigator.language)
+    },
     toDay(time?: string | number| Date, format = 'long') {
       if (!time) return '';
       if (format === 'long') {