improve validator and proposal

src/components/Countdown.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup >
+import VueCountdown from '@chenfengyuan/vue-countdown';
+
+const props = defineProps({
+  time: { type: Number},
+})
+</script>
+<template>
+    <vue-countdown v-if="time" :time="time > 0? time: 0" v-slot="{ days, hours, minutes, seconds }">
+    Time Remaining：{{ days }} days, {{ hours }} hours, {{ minutes }} minutes, {{ seconds }} seconds.
+    </vue-countdown>
+</template>

src/components/ProposalListItem.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import MdEditor from 'md-editor-v3';
-import { useFormatter, useStakingStore } from '@/stores';
+import { useBlockchain, useFormatter, useStakingStore } from '@/stores';
 import type { GovProposal, PaginatedProposals } from '@/types';
 import ProposalProcess from './ProposalProcess.vue';
 import type { PropType } from 'vue';
@@ -11,13 +11,20 @@ const props = defineProps({
 // const list = computed(()=> proposl)
 const format = useFormatter()
 const staking = useStakingStore()
+const chain = useBlockchain()
+function showType(v: string){
+    if(v) {
+        return v.substring(v.lastIndexOf('.')+1)
+    }
+    return v 
+}
 </script>
 <template>
     <VExpansionPanels variant="accordion">
             <VExpansionPanel v-for="(x, i) in proposals?.proposals">
               <VExpansionPanelTitle disable-icon-rotate>
                     <VChip label color="primary" class="mr-2">{{x.proposal_id}}</VChip>
-                    <div class="w-100">{{ x.content?.title }}
+                    <div class="w-100"><VChip label>{{ showType(x.content['@type']) }}</VChip> {{ x.content?.title }}
                       <div class="d-flex mt-1">
                         <small class="text-secondary me-auto"> {{ format.toDay(x.voting_end_time, 'from') }}</small>      
                         <ProposalProcess style="width:300px;" :pool="staking.pool" :tally="x.final_tally_result"></ProposalProcess> 
@@ -42,11 +49,11 @@ const staking = useStakingStore()
               <VExpansionPanelText>
                 <VCard class="card-box">         
                   <VCardText>
-                    {{ x.final_tally_result }}
                     <MdEditor :model-value="format.multiLine(x.content?.description)" previewOnly></MdEditor> 
                   </VCardText>
                   <div class="text-center w-100 my-2">
-                    <VBtn color="primary" variant="flat">Vote</VBtn>
+                    <VBtn :to="`/${chain.chainName}/gov/${x.proposal_id}`" color="primary" variant="flat" size="small">Detail</VBtn> 
+                    <VBtn color="primary" variant="flat" class="ml-2" size="small">Vote</VBtn> 
                   </div>
                 </VCard>
               </VExpansionPanelText>

src/components/dynamic/ArrayCoinElement.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { useFormatter } from '@/stores';
+import type { Coin } from '@/types';
+
+const props = defineProps({
+  value: { type: Array<Coin>},
+})
+
+const format = useFormatter()
+
+</script>
+<template>
+  <div>
+    {{ format.formatTokens(value, true, "0,0.[000000]") }}
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'ArrayCoinElement'
+}
+</script>

src/components/dynamic/ArrayElement.vue

@@ -7,6 +7,7 @@ import {select} from './index'
 import ArrayBytesElement from './ArrayBytesElement.vue';
 import ArrayObjectElement from './ArrayObjectElement.vue';
 import TextElement from './TextElement.vue';
+import ArrayCoinElement from './ArrayCoinElement.vue';
 
 const props = defineProps({
   value: { type: Array<Object>},
@@ -18,6 +19,8 @@ function selectByElement() {
     switch(true) {
       case first instanceof Uint8Array: 
         return ArrayBytesElement
+      case Object.keys(first).includes('denom'):
+        return ArrayCoinElement
       default:
         return ArrayObjectElement
     }

src/components/dynamic/DynamicComponent.vue

@@ -1,7 +1,5 @@
 
 <script lang="ts" setup>
-import TextElement from './TextElement.vue'
-import ObjectElement from './ObjectElement.vue'
 import { select } from './index'
 
 const props = defineProps(["value", "direct"]);

src/components/dynamic/TextElement.vue

@@ -1,6 +1,17 @@
 <script lang="ts" setup>
+import { useFormatter } from '@/stores';
+import MdEditor from 'md-editor-v3';
+
 const props = defineProps(["value"]);
+const format = useFormatter()
+function isMD() {
+    if(props.value && (props.value.indexOf("\n") > -1 || props.value.indexOf("\\n") > -1)){
+        return true
+    }
+    return false
+}
 </script>
-<template>
-    <span>{{ props.value }}</span>
+<template>                 
+    <MdEditor v-if="isMD()" :model-value="format.multiLine(value)" previewOnly></MdEditor> 
+    <span v-else>{{ value }}</span>
 </template>