From 881e64b3ff63e0f33c44071b4ef95ad5deb1cece Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Thu, 27 Apr 2023 18:52:48 +0800
Subject: [PATCH 1/8] rounded

---
 src/components/CardParameter.vue     | 2 +-
 src/components/TableParameter.vue    | 2 +-
 src/modules/[chain]/params/index.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/CardParameter.vue b/src/components/CardParameter.vue
index 20078378..b136ca68 100644
--- a/src/components/CardParameter.vue
+++ b/src/components/CardParameter.vue
@@ -8,7 +8,7 @@ const props = defineProps({
 
 </script>
 <template>
-    <div class="bg-card px-4 pt-3 pb-4 rounded-sm mt-6" 
+    <div class="bg-card px-4 pt-3 pb-4 rounded mt-6" 
     v-if="props.cardItem?.items && props.cardItem?.items?.length > 0">
         <div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
         <div class="grid grid-cols-5 gap-4">
diff --git a/src/components/TableParameter.vue b/src/components/TableParameter.vue
index 3433a101..540d886c 100644
--- a/src/components/TableParameter.vue
+++ b/src/components/TableParameter.vue
@@ -12,7 +12,7 @@ function formatTitle (name: string){
 
 </script>
 <template>
-    <div class="bg-card px-4 pt-3 pb-4 rounded-sm mt-6">
+    <div class="bg-card px-4 pt-3 pb-4 rounded mt-6">
         <div class="text-base mb-3 text-main">{{ props.tableItem?.title }}</div>
         <div class="">
                 <div class="d-flex flex-nowrap" v-for="(item,index ) of props.tableItem?.items" :key="index">
diff --git a/src/modules/[chain]/params/index.vue b/src/modules/[chain]/params/index.vue
index 13b36e7e..0dea1c2c 100644
--- a/src/modules/[chain]/params/index.vue
+++ b/src/modules/[chain]/params/index.vue
@@ -15,7 +15,7 @@ onMounted(() => {
 <template>
     <div>
         <!-- Chain ID -->
-        <div class="bg-card px-4 pt-3 pb-4 rounded-sm">
+        <div class="bg-card px-4 pt-3 pb-4 rounded">
             <div class="text-base mb-3 text-main">{{ chain.title }}</div>
             <div class="grid grid-cols-5 gap-4">
                 <div v-for="(item,index) of chain.items" :key="index" class="rounded-sm bg-active px-4 py-2">

From a0104d5fee588a270a3b88885829d3466f95bd92 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Thu, 27 Apr 2023 19:00:44 +0800
Subject: [PATCH 2/8] Parameters Mobile

---
 src/components/CardParameter.vue     | 39 ++++++++------
 src/components/TableParameter.vue    | 39 +++++++-------
 src/modules/[chain]/params/index.vue | 81 +++++++++++++++-------------
 3 files changed, 87 insertions(+), 72 deletions(-)

diff --git a/src/components/CardParameter.vue b/src/components/CardParameter.vue
index b136ca68..cfa873c0 100644
--- a/src/components/CardParameter.vue
+++ b/src/components/CardParameter.vue
@@ -1,22 +1,29 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue';
 const props = defineProps({
-    cardItem: {
-        type: Object as PropType<{title: string;items: Array<any>;}>,
-    },
-})
-
+  cardItem: {
+    type: Object as PropType<{ title: string; items: Array<any> }>,
+  },
+});
 </script>
 <template>
-    <div class="bg-card px-4 pt-3 pb-4 rounded mt-6" 
-    v-if="props.cardItem?.items && props.cardItem?.items?.length > 0">
-        <div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
-        <div class="grid grid-cols-5 gap-4">
-            <div v-for="(item,index) of props.cardItem?.items" :key="index" class="rounded-sm bg-active px-4 py-2">
-                <div class="text-xs mb-2 text-secondary">{{ item?.subtitle }}</div>
-                <div class="text-base text-main">{{ item?.value }}</div>
-                <!-- {{ item }} -->
-            </div>
-        </div>
+  <div
+    class="bg-card px-4 pt-3 pb-4 rounded mt-6"
+    v-if="props.cardItem?.items && props.cardItem?.items?.length > 0"
+  >
+    <div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
+    <div
+      class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4"
+    >
+      <div
+        v-for="(item, index) of props.cardItem?.items"
+        :key="index"
+        class="rounded-sm bg-active px-4 py-2"
+      >
+        <div class="text-xs mb-2 text-secondary">{{ item?.subtitle }}</div>
+        <div class="text-base text-main">{{ item?.value }}</div>
+        <!-- {{ item }} -->
+      </div>
     </div>
-</template>
\ No newline at end of file
+  </div>
+</template>
diff --git a/src/components/TableParameter.vue b/src/components/TableParameter.vue
index 540d886c..d01e5617 100644
--- a/src/components/TableParameter.vue
+++ b/src/components/TableParameter.vue
@@ -1,26 +1,29 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue';
 const props = defineProps({
-    tableItem: {
-        type: Object as PropType<{title: string;items: Object;}>,
-    },
-})
+  tableItem: {
+    type: Object as PropType<{ title: string; items: Object }>,
+  },
+});
 
-function formatTitle (name: string){
-    return String(name).replaceAll('_', ' ')
+function formatTitle(name: string) {
+  return String(name).replaceAll('_', ' ');
 }
-
 </script>
 <template>
-    <div class="bg-card px-4 pt-3 pb-4 rounded mt-6">
-        <div class="text-base mb-3 text-main">{{ props.tableItem?.title }}</div>
-        <div class="">
-                <div class="d-flex flex-nowrap" v-for="(item,index ) of props.tableItem?.items" :key="index">
-                    <div class="mr-6">{{ formatTitle(item?.subtitle) }}</div>
-                    <div class="flex-1" >{{ item?.value }}</div>
-                    <div>{{typeof(item?.value )}}</div>
-                    <!-- {{ item }} -->
-                </div>
-            </div>
+  <div class="bg-card px-4 pt-3 pb-4 rounded mt-6">
+    <div class="text-base mb-3 text-main">{{ props.tableItem?.title }}</div>
+    <div class="">
+      <div
+        class="flex flex-nowrap"
+        v-for="(item, index) of props.tableItem?.items"
+        :key="index"
+      >
+        <div class="mr-6">{{ formatTitle(item?.subtitle) }}</div>
+        <div class="flex-1">{{ item?.value }}</div>
+        <div>{{ typeof item?.value }}</div>
+        <!-- {{ item }} -->
+      </div>
     </div>
-</template>
\ No newline at end of file
+  </div>
+</template>
diff --git a/src/modules/[chain]/params/index.vue b/src/modules/[chain]/params/index.vue
index 0dea1c2c..bab249eb 100644
--- a/src/modules/[chain]/params/index.vue
+++ b/src/modules/[chain]/params/index.vue
@@ -1,50 +1,55 @@
 <script lang="ts" setup>
 import { useParamStore } from '@/stores';
-import { ref, onMounted } from 'vue'
-import CardParameter from '@/components/CardParameter.vue'
-import TableParameter from '@/components/TableParameter.vue'
-import { sort } from 'semver';
-const store = useParamStore()
-const chain = ref(store.chain)
-onMounted(() => {
-    // fetch the data
-    store.initial()
-})
+import { ref, onMounted } from 'vue';
+import CardParameter from '@/components/CardParameter.vue';
+import TableParameter from '@/components/TableParameter.vue';
 
+const store = useParamStore();
+const chain = ref(store.chain);
+onMounted(() => {
+  // fetch the data
+  store.initial();
+});
 </script>
 <template>
-    <div>
-        <!-- Chain ID -->
-        <div class="bg-card px-4 pt-3 pb-4 rounded">
-            <div class="text-base mb-3 text-main">{{ chain.title }}</div>
-            <div class="grid grid-cols-5 gap-4">
-                <div v-for="(item,index) of chain.items" :key="index" class="rounded-sm bg-active px-4 py-2">
-                    <div class="text-xs mb-2 text-secondary">{{ item.subtitle }}</div>
-                    <div class="text-base text-main">{{ item.value }}</div>
-                </div>
-            </div>
+  <div>
+    <!-- Chain ID -->
+    <div class="bg-card px-4 pt-3 pb-4 rounded">
+      <div class="text-base mb-3 text-main">{{ chain.title }}</div>
+      <div
+        class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4"
+      >
+        <div
+          v-for="(item, index) of chain.items"
+          :key="index"
+          class="rounded-sm bg-active px-4 py-2"
+        >
+          <div class="text-xs mb-2 text-secondary">{{ item.subtitle }}</div>
+          <div class="text-base text-main">{{ item.value }}</div>
         </div>
-        <!-- minting Parameters  -->
-        <CardParameter :cardItem="store.mint"/> 
-        <!-- Staking Parameters  -->
-        <CardParameter :cardItem="store.staking"/>
-        <!-- Governance Parameters -->
-        <CardParameter :cardItem="store.gov"/>
-        <!-- Distribution Parameters -->
-        <CardParameter :cardItem="store.distribution"/>
-        <!-- Slashing Parameters -->
-        <CardParameter :cardItem="store.slashing"/>
-        <!-- Application Version -->
-        <TableParameter :tableItem="store.appVersion"/>
-        <!-- Node Information -->
-        <TableParameter :tableItem="store.nodeVersion"/>
+      </div>
     </div>
-
+    <!-- minting Parameters  -->
+    <CardParameter :cardItem="store.mint" />
+    <!-- Staking Parameters  -->
+    <CardParameter :cardItem="store.staking" />
+    <!-- Governance Parameters -->
+    <CardParameter :cardItem="store.gov" />
+    <!-- Distribution Parameters -->
+    <CardParameter :cardItem="store.distribution" />
+    <!-- Slashing Parameters -->
+    <CardParameter :cardItem="store.slashing" />
+    <!-- Application Version -->
+    <TableParameter :tableItem="store.appVersion" />
+    <!-- Node Information -->
+    <TableParameter :tableItem="store.nodeVersion" />
+  </div>
 </template>
+
 <route>
 {
-    meta: {
+  meta: {
     i18n: 'parameters'
-    }
+  }
 }
-</route>
\ No newline at end of file
+</route>

From bc66c57eba3d44317b24810a4d9b414b884d203a Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Thu, 27 Apr 2023 19:02:37 +0800
Subject: [PATCH 3/8] Space mt-5

---
 src/components/CardParameter.vue  | 2 +-
 src/components/TableParameter.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CardParameter.vue b/src/components/CardParameter.vue
index cfa873c0..5be60168 100644
--- a/src/components/CardParameter.vue
+++ b/src/components/CardParameter.vue
@@ -8,7 +8,7 @@ const props = defineProps({
 </script>
 <template>
   <div
-    class="bg-card px-4 pt-3 pb-4 rounded mt-6"
+    class="bg-card px-4 pt-3 pb-4 rounded mt-5"
     v-if="props.cardItem?.items && props.cardItem?.items?.length > 0"
   >
     <div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
diff --git a/src/components/TableParameter.vue b/src/components/TableParameter.vue
index d01e5617..878d7df0 100644
--- a/src/components/TableParameter.vue
+++ b/src/components/TableParameter.vue
@@ -11,7 +11,7 @@ function formatTitle(name: string) {
 }
 </script>
 <template>
-  <div class="bg-card px-4 pt-3 pb-4 rounded mt-6">
+  <div class="bg-card px-4 pt-3 pb-4 rounded mt-">
     <div class="text-base mb-3 text-main">{{ props.tableItem?.title }}</div>
     <div class="">
       <div

From be885dde89d64a90fb7d9dc987d52d93998710c3 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Thu, 27 Apr 2023 19:41:06 +0800
Subject: [PATCH 4/8] feat: tab pill

---
 package.json                      |  2 +-
 src/modules/[chain]/gov/index.vue | 51 +++++++++++++++----------------
 yarn.lock                         | 18 +++++------
 3 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index f832a4c0..d141594f 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,7 @@
     "unplugin-auto-import": "^0.13.0",
     "unplugin-vue-components": "^0.23.0",
     "unplugin-vue-define-options": "1.1.4",
-    "vite": "^4.3.1",
+    "vite": "^4.3.3",
     "vite-plugin-pages": "^0.28.0",
     "vue-tsc": "^1.0.12"
   }
diff --git a/src/modules/[chain]/gov/index.vue b/src/modules/[chain]/gov/index.vue
index b051b96d..373c7445 100644
--- a/src/modules/[chain]/gov/index.vue
+++ b/src/modules/[chain]/gov/index.vue
@@ -1,36 +1,35 @@
 <script lang="ts" setup>
 import { useGovStore } from '@/stores';
 import ProposalListItem from '@/components/ProposalListItem.vue';
-import { ref, onMounted } from 'vue'
-const tab = ref("")
-const store = useGovStore()
-
-onMounted(()=>{
-    store.fetchProposals('2')
-})
+import { ref, onMounted } from 'vue';
+const tab = ref('');
+const store = useGovStore();
 
+onMounted(() => {
+  store.fetchProposals('2');
+});
 </script>
 <template>
-    <div>
-        <VTabs v-model="tab">
-            <VTab value="2">Voting</VTab>
-            <VTab value="3" @click="store.fetchProposals('3')">Passed</VTab>
-            <VTab value="4" @click="store.fetchProposals('4')">Rejected</VTab>
-        </VTabs>
-        <VWindow v-model="tab" class="mt-5">
-            <VWindowItem value="2">
-                <ProposalListItem :proposals="store?.proposals['2']"/>
-            </VWindowItem>  
+  <div>
+    <VTabs v-model="tab" class="v-tabs-pill">
+      <VTab value="2">Voting</VTab>
+      <VTab value="3" @click="store.fetchProposals('3')">Passed</VTab>
+      <VTab value="4" @click="store.fetchProposals('4')">Rejected</VTab>
+    </VTabs>
+    <VWindow v-model="tab" class="mt-5">
+      <VWindowItem value="2">
+        <ProposalListItem :proposals="store?.proposals['2']" />
+      </VWindowItem>
 
-            <VWindowItem value="3">
-                <ProposalListItem :proposals="store?.proposals['3']"/>
-            </VWindowItem>
+      <VWindowItem value="3">
+        <ProposalListItem :proposals="store?.proposals['3']" />
+      </VWindowItem>
 
-            <VWindowItem value="4">
-                <ProposalListItem :proposals="store?.proposals['4']"/>
-            </VWindowItem>
-        </VWindow>
-    </div>
+      <VWindowItem value="4">
+        <ProposalListItem :proposals="store?.proposals['4']" />
+      </VWindowItem>
+    </VWindow>
+  </div>
 </template>
 <route>
     {
@@ -38,4 +37,4 @@ onMounted(()=>{
         i18n: 'governance'
       }
     }
-  </route>
\ No newline at end of file
+  </route>
diff --git a/yarn.lock b/yarn.lock
index 5b5cf531..24f39f22 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6609,7 +6609,7 @@ postcss@^8.0.9, postcss@^8.4.23:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.1.10, postcss@^8.4.21:
+postcss@^8.1.10:
   version "8.4.21"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz"
   integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
@@ -6886,9 +6886,9 @@ rimraf@3.0.2, rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rollup@^3.20.2:
+rollup@^3.21.0:
   version "3.21.0"
-  resolved "https://registry.npmjs.org/rollup/-/rollup-3.21.0.tgz"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.21.0.tgz#0a71517db56e150222670f88e5e7acfa4fede7c8"
   integrity sha512-ANPhVcyeHvYdQMUyCbczy33nbLzI7RzrBje4uvNiTDJGIMtlKoOStmympwr9OtS1LZxiDmE2wvxHyVhoLtf1KQ==
   optionalDependencies:
     fsevents "~2.3.2"
@@ -7749,14 +7749,14 @@ vite-plugin-vuetify@^1.0.2:
     debug "^4.3.3"
     upath "^2.0.1"
 
-vite@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.npmjs.org/vite/-/vite-4.3.1.tgz"
-  integrity sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==
+vite@^4.3.3:
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.3.tgz#26adb4aa01439fc4546c480ea547674d87289396"
+  integrity sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==
   dependencies:
     esbuild "^0.17.5"
-    postcss "^8.4.21"
-    rollup "^3.20.2"
+    postcss "^8.4.23"
+    rollup "^3.21.0"
   optionalDependencies:
     fsevents "~2.3.2"
 

From b4eca8f597159e994a54430b7bb5fa009f4bc43f Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Thu, 27 Apr 2023 22:43:30 +0800
Subject: [PATCH 5/8] feat: Parameters Page style change

---
 src/components/TableItemParameter.vue         | 115 ++++++++++++++++++
 src/components/TableParameter.vue             |  45 +++++--
 src/components/dynamic/ArrayObjectElement.vue |   8 +-
 src/libs/utils.ts                             |  62 ++++++++++
 src/modules/[chain]/params/index.vue          |  58 +++++----
 5 files changed, 256 insertions(+), 32 deletions(-)
 create mode 100644 src/components/TableItemParameter.vue

diff --git a/src/components/TableItemParameter.vue b/src/components/TableItemParameter.vue
new file mode 100644
index 00000000..d66f34bd
--- /dev/null
+++ b/src/components/TableItemParameter.vue
@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+// import { BTable } from 'bootstrap-vue'
+// import {
+//   getStakingValidatorByHex, isHexAddress, isToken, percent, toDay, tokenFormatter,
+// } from '@/libs/utils'
+// export default {
+//   name: 'ArrayFieldComponent',
+//   components: {
+//     BTable,
+//   },
+//   props: {
+//     tablefield: {
+//       type: [Array, Object],
+//       default: () => [],
+//     },
+//   },
+//   computed: {
+//     items() {
+//       if (this.tablefield.length > 0 && typeof (this.tablefield[0]) === 'string') {
+//         return this.tablefield.map(x => ({ array: x }))
+//       }
+//       return this.tablefield
+//     },
+//   },
+//   methods: {
+//     eval_value(value) {
+//       if (typeof (value) === 'string') {
+//         return JSON.parse(value)
+//       }
+//       return value
+//     },
+//     isTokenField(value) {
+//       return isToken(value)
+//     },
+//     isArrayText(value) {
+//       const has = String(value).startsWith('[') && String(value).endsWith(']')
+//       return has
+//     },
+//     formatText(value) {
+//       const reg = /^\d{4}.\d{1,2}.\d{1,2}T\d{2}:\d{2}:.+Z$/
+//       const percentage = /^0\.\d+/
+//       if (reg.test(value)) {
+//         return toDay(value)
+//       }
+//       if (percentage.test(value)) {
+//         return `${percent(value)}%`
+//       }
+//       // if (value.length > 40) {
+//       //   return value.substring(0, 40).concat('...')
+//       // }
+//       return value
+//     },
+//     formatTokens(value) {
+//       return tokenFormatter(value)
+//     },
+//     isHex(value) {
+//       return isHexAddress(value)
+//     },
+//     formatHexAddress(v) {
+//       return getStakingValidatorByHex(this.$http.config.chain_name, v)
+//     },
+//   },
+// }
+</script>
+<template>
+    <div>8888</div>
+    <!-- <b-table
+      :items="items"
+      :sticky-header="true"
+      :no-border-collapse="true"
+      responsive="md"
+      class="ml-0 mr-0 dataview text-nowrap"
+    >
+      <template #cell()="data">
+        <span v-if="isTokenField(data.value)">{{ formatTokens(data.value) }}</span>
+        <span v-else-if="isHex(data.value)">{{ formatHexAddress(data.value) }}</span>
+        <TableItemParameter
+          v-else-if="isArrayText(data.value)"
+          :tablefield="eval_value(data.value)"
+        />
+        <span
+          v-else
+          :title="data.value"
+        >{{ formatText(data.value) }}</span>
+      </template>
+    </b-table> -->
+  </template>
+  
+
+  <style lang="scss">
+//   /* Small devices (landscape phones, 576px and up) */
+//   @media (min-width: 576px) {
+//     .dataview {
+//       max-width: 300px;
+//     }
+//   }
+//   /* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
+//   @media (min-width: 768px) {
+//     .dataview {
+//       max-width: 500px;
+//     }
+//   }
+//   /* Large devices (desktops, 992px and up) */
+//   @media (min-width: 992px) {
+//     .dataview {
+//       max-width: 700px;
+//     }
+//   }
+//   /* Extra large devices (large desktops, 1200px and up) */
+//   @media (min-width: 1200px) {
+//     .dataview {
+//       max-width: 820px;
+//     }
+//   }
+  </style>
\ No newline at end of file
diff --git a/src/components/TableParameter.vue b/src/components/TableParameter.vue
index 878d7df0..5530c16e 100644
--- a/src/components/TableParameter.vue
+++ b/src/components/TableParameter.vue
@@ -1,16 +1,39 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue';
+import { isToken,isStringArray,isHexAddress } from '@/libs/utils'
+import TableItemParameter from '@/components/TableItemParameter.vue'
+import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
+
 const props = defineProps({
-  tableItem: {
-    type: Object as PropType<{ title: string; items: Object }>,
-  },
-});
+    tableItem: {
+        type: Object,
+    },
+})
 
 function formatTitle(name: string) {
   return String(name).replaceAll('_', ' ');
 }
+function isTokenField (value: string){
+    return value ? isToken(value) : false
+}
+
+function formatTokens (name: string){
+    return String(name).replaceAll('_', ' ')
+}
+function isArrayText (value: string){
+    return value ? isStringArray(value) : false
+    
+}
+function isHex(value: string) {
+    return value ? isHexAddress(value) : false
+}
+function formatHexAddress(v:any) {
+      return 2
+    //   getStakingValidatorByHex(this.$http.config.chain_name, v)
+}
 </script>
-<template>
+
+<!-- <template>
   <div class="bg-card px-4 pt-3 pb-4 rounded mt-">
     <div class="text-base mb-3 text-main">{{ props.tableItem?.title }}</div>
     <div class="">
@@ -22,8 +45,14 @@ function formatTitle(name: string) {
         <div class="mr-6">{{ formatTitle(item?.subtitle) }}</div>
         <div class="flex-1">{{ item?.value }}</div>
         <div>{{ typeof item?.value }}</div>
-        <!-- {{ item }} -->
-      </div>
+      </div> -->
+
+
+
+<template>
+    <div class="d-table">
+        <div class="flex  flex-nowrap" v-for="(item,index ) of props.tableItem" :key="index">
+            <DynamicComponent :value="item"/>
+        </div>
     </div>
-  </div>
 </template>
diff --git a/src/components/dynamic/ArrayObjectElement.vue b/src/components/dynamic/ArrayObjectElement.vue
index a6916085..fc76a96d 100644
--- a/src/components/dynamic/ArrayObjectElement.vue
+++ b/src/components/dynamic/ArrayObjectElement.vue
@@ -4,6 +4,10 @@ import DynamicComponent from './DynamicComponent.vue';
 
 const props = defineProps({
   value: { type: Array<Object>},
+  thead: {
+    type: Boolean,
+    default: true
+  }
 })
 
 const header = computed(() => {
@@ -15,8 +19,8 @@ const header = computed(() => {
 
 </script>
 <template>
-  <VTable v-if="header.length > 0" density="compact" height="300px" fixed-header>
-    <thead>
+  <VTable v-if="header.length > 0" density="compact" height="300px" fixed-header hover>
+    <thead v-if="thead">
       <tr>
         <th v-for="k in header" class="text-left text-capitalize">{{ k }}</th>
       </tr>
diff --git a/src/libs/utils.ts b/src/libs/utils.ts
index d053bee6..b16717bd 100644
--- a/src/libs/utils.ts
+++ b/src/libs/utils.ts
@@ -46,3 +46,65 @@ export function numberWithCommas(x: any) {
     return parts.join('.')
 }
 
+export function tokenFormatter(tokens:any, denoms = {}, decimal = 2) {
+    if (Array.isArray(tokens)) {
+      return tokens.map(t => formatToken(t, denoms, decimal)).join(', ')
+    }
+    return formatToken(tokens, denoms, 2)
+}
+export function formatToken(token:any, IBCDenom = {}, decimals = 2, withDenom = true) {
+    if (token) {
+      const denom = IBCDenom[token.denom] || token.denom
+      if (withDenom) {
+        return `${formatTokenAmount(token.amount, decimals, denom)} ${formatTokenDenom(denom)}`
+      }
+      return formatTokenAmount(token.amount, decimals, denom)
+    }
+    return token
+  }
+export function formatTokenDenom(tokenDenom:any) {
+    if (tokenDenom && tokenDenom.code === undefined) {
+        let denom = tokenDenom.denom_trace ? tokenDenom.denom_trace.base_denom : tokenDenom
+        const chains = getLocalChains()
+        const selected = localStorage.getItem('selected_chain')
+        const selChain = chains[selected]
+        const nativeAsset = selChain.assets.find(a => (a.base === denom))
+        if (nativeAsset) {
+        denom = nativeAsset.symbol
+        } else {
+        const config = Object.values(chains)
+        config.forEach(x => {
+            if (x.assets) {
+            const asset = x.assets.find(a => (a.base === denom))
+            if (asset) denom = asset.symbol
+            }
+        })
+        }
+        return denom.length > 10 ? `${denom.substring(0, 7).toUpperCase()}..${denom.substring(denom.length - 3)}` : denom.toUpperCase()
+    }
+    return ''
+}
+
+export function isToken(value: string) {
+    let is = false
+    if (Array.isArray(value)) {
+      is = value.findIndex(x => Object.keys(x).includes('denom')) > -1
+    } else {
+      is = Object.keys(value).includes('denom')
+    }
+    return is
+  }
+  export function isStringArray(value: any) {
+    let is = false
+    if (Array.isArray(value)) {
+      is = value.findIndex(x => typeof x === 'string') > -1
+    }
+    return is
+  }
+
+  export function isHexAddress(v: any) {
+    // const re = /^[A-Z\d]{40}$/
+    // return re.test(v)
+    return v.length === 28
+  }
+  
diff --git a/src/modules/[chain]/params/index.vue b/src/modules/[chain]/params/index.vue
index bab249eb..e53622c4 100644
--- a/src/modules/[chain]/params/index.vue
+++ b/src/modules/[chain]/params/index.vue
@@ -1,18 +1,20 @@
 <script lang="ts" setup>
 import { useParamStore } from '@/stores';
-import { ref, onMounted } from 'vue';
-import CardParameter from '@/components/CardParameter.vue';
-import TableParameter from '@/components/TableParameter.vue';
-
-const store = useParamStore();
-const chain = ref(store.chain);
+import { ref, onMounted } from 'vue'
+import CardParameter from '@/components/CardParameter.vue'
+import TableParameter from '@/components/TableParameter.vue'
+import ArrayObjectElement from '@/components/dynamic/ArrayObjectElement.vue';
+import { sort } from 'semver';
+const store = useParamStore()
+const chain = ref(store.chain)
 onMounted(() => {
-  // fetch the data
-  store.initial();
-});
+    // fetch the data
+    store.initial()
+})
+
 </script>
 <template>
-  <div>
+  <div class="overflow-hidden">
     <!-- Chain ID -->
     <div class="bg-card px-4 pt-3 pb-4 rounded">
       <div class="text-base mb-3 text-main">{{ chain.title }}</div>
@@ -29,20 +31,32 @@ onMounted(() => {
         </div>
       </div>
     </div>
-    <!-- minting Parameters  -->
-    <CardParameter :cardItem="store.mint" />
-    <!-- Staking Parameters  -->
-    <CardParameter :cardItem="store.staking" />
-    <!-- Governance Parameters -->
-    <CardParameter :cardItem="store.gov" />
-    <!-- Distribution Parameters -->
-    <CardParameter :cardItem="store.distribution" />
-    <!-- Slashing Parameters -->
-    <CardParameter :cardItem="store.slashing" />
+        <!-- minting Parameters  -->
+        <CardParameter :cardItem="store.mint"/> 
+        <!-- Staking Parameters  -->
+        <CardParameter :cardItem="store.staking"/>
+        <!-- Governance Parameters -->
+        <CardParameter :cardItem="store.gov"/>
+        <!-- Distribution Parameters -->
+        <CardParameter :cardItem="store.distribution"/>
+        <!-- Slashing Parameters -->
+        <CardParameter :cardItem="store.slashing"/>
+        <!-- Application Version -->
+        <div class="bg-card px-4 pt-3 pb-4 rounded-sm mt-6">
+            <div class="text-base mb-3 text-main">{{ store.appVersion?.title }}</div>
+            <ArrayObjectElement :value="store.appVersion?.items" :thead="false"/>
+        </div>
+        
+        <!-- Node Information -->
+        <div class="bg-card px-4 pt-3 pb-4 rounded-sm mt-6">
+            <div class="text-base mb-3 text-main">{{ store.nodeVersion?.title }}</div>
+            <ArrayObjectElement :value="store.nodeVersion?.items" :thead="false"/>
+        </div>
+ 
     <!-- Application Version -->
-    <TableParameter :tableItem="store.appVersion" />
+    <!-- <TableParameter :tableItem="store.appVersion" /> -->
     <!-- Node Information -->
-    <TableParameter :tableItem="store.nodeVersion" />
+    <!-- <TableParameter :tableItem="store.nodeVersion" /> -->
   </div>
 </template>
 

From 68e2b4a29e1f499b4487c3244a859bde317b0500 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Thu, 27 Apr 2023 22:44:35 +0800
Subject: [PATCH 6/8] feat: remove files

---
 src/components/TableItemParameter.vue | 115 --------------------------
 src/components/TableParameter.vue     |  58 -------------
 2 files changed, 173 deletions(-)
 delete mode 100644 src/components/TableItemParameter.vue
 delete mode 100644 src/components/TableParameter.vue

diff --git a/src/components/TableItemParameter.vue b/src/components/TableItemParameter.vue
deleted file mode 100644
index d66f34bd..00000000
--- a/src/components/TableItemParameter.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<script lang="ts" setup>
-// import { BTable } from 'bootstrap-vue'
-// import {
-//   getStakingValidatorByHex, isHexAddress, isToken, percent, toDay, tokenFormatter,
-// } from '@/libs/utils'
-// export default {
-//   name: 'ArrayFieldComponent',
-//   components: {
-//     BTable,
-//   },
-//   props: {
-//     tablefield: {
-//       type: [Array, Object],
-//       default: () => [],
-//     },
-//   },
-//   computed: {
-//     items() {
-//       if (this.tablefield.length > 0 && typeof (this.tablefield[0]) === 'string') {
-//         return this.tablefield.map(x => ({ array: x }))
-//       }
-//       return this.tablefield
-//     },
-//   },
-//   methods: {
-//     eval_value(value) {
-//       if (typeof (value) === 'string') {
-//         return JSON.parse(value)
-//       }
-//       return value
-//     },
-//     isTokenField(value) {
-//       return isToken(value)
-//     },
-//     isArrayText(value) {
-//       const has = String(value).startsWith('[') && String(value).endsWith(']')
-//       return has
-//     },
-//     formatText(value) {
-//       const reg = /^\d{4}.\d{1,2}.\d{1,2}T\d{2}:\d{2}:.+Z$/
-//       const percentage = /^0\.\d+/
-//       if (reg.test(value)) {
-//         return toDay(value)
-//       }
-//       if (percentage.test(value)) {
-//         return `${percent(value)}%`
-//       }
-//       // if (value.length > 40) {
-//       //   return value.substring(0, 40).concat('...')
-//       // }
-//       return value
-//     },
-//     formatTokens(value) {
-//       return tokenFormatter(value)
-//     },
-//     isHex(value) {
-//       return isHexAddress(value)
-//     },
-//     formatHexAddress(v) {
-//       return getStakingValidatorByHex(this.$http.config.chain_name, v)
-//     },
-//   },
-// }
-</script>
-<template>
-    <div>8888</div>
-    <!-- <b-table
-      :items="items"
-      :sticky-header="true"
-      :no-border-collapse="true"
-      responsive="md"
-      class="ml-0 mr-0 dataview text-nowrap"
-    >
-      <template #cell()="data">
-        <span v-if="isTokenField(data.value)">{{ formatTokens(data.value) }}</span>
-        <span v-else-if="isHex(data.value)">{{ formatHexAddress(data.value) }}</span>
-        <TableItemParameter
-          v-else-if="isArrayText(data.value)"
-          :tablefield="eval_value(data.value)"
-        />
-        <span
-          v-else
-          :title="data.value"
-        >{{ formatText(data.value) }}</span>
-      </template>
-    </b-table> -->
-  </template>
-  
-
-  <style lang="scss">
-//   /* Small devices (landscape phones, 576px and up) */
-//   @media (min-width: 576px) {
-//     .dataview {
-//       max-width: 300px;
-//     }
-//   }
-//   /* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
-//   @media (min-width: 768px) {
-//     .dataview {
-//       max-width: 500px;
-//     }
-//   }
-//   /* Large devices (desktops, 992px and up) */
-//   @media (min-width: 992px) {
-//     .dataview {
-//       max-width: 700px;
-//     }
-//   }
-//   /* Extra large devices (large desktops, 1200px and up) */
-//   @media (min-width: 1200px) {
-//     .dataview {
-//       max-width: 820px;
-//     }
-//   }
-  </style>
\ No newline at end of file
diff --git a/src/components/TableParameter.vue b/src/components/TableParameter.vue
deleted file mode 100644
index 5530c16e..00000000
--- a/src/components/TableParameter.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts" setup>
-import type { PropType } from 'vue';
-import { isToken,isStringArray,isHexAddress } from '@/libs/utils'
-import TableItemParameter from '@/components/TableItemParameter.vue'
-import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
-
-const props = defineProps({
-    tableItem: {
-        type: Object,
-    },
-})
-
-function formatTitle(name: string) {
-  return String(name).replaceAll('_', ' ');
-}
-function isTokenField (value: string){
-    return value ? isToken(value) : false
-}
-
-function formatTokens (name: string){
-    return String(name).replaceAll('_', ' ')
-}
-function isArrayText (value: string){
-    return value ? isStringArray(value) : false
-    
-}
-function isHex(value: string) {
-    return value ? isHexAddress(value) : false
-}
-function formatHexAddress(v:any) {
-      return 2
-    //   getStakingValidatorByHex(this.$http.config.chain_name, v)
-}
-</script>
-
-<!-- <template>
-  <div class="bg-card px-4 pt-3 pb-4 rounded mt-">
-    <div class="text-base mb-3 text-main">{{ props.tableItem?.title }}</div>
-    <div class="">
-      <div
-        class="flex flex-nowrap"
-        v-for="(item, index) of props.tableItem?.items"
-        :key="index"
-      >
-        <div class="mr-6">{{ formatTitle(item?.subtitle) }}</div>
-        <div class="flex-1">{{ item?.value }}</div>
-        <div>{{ typeof item?.value }}</div>
-      </div> -->
-
-
-
-<template>
-    <div class="d-table">
-        <div class="flex  flex-nowrap" v-for="(item,index ) of props.tableItem" :key="index">
-            <DynamicComponent :value="item"/>
-        </div>
-    </div>
-</template>

From ce9787b2f9ddc9fca8ca2a94933ce40824d6e117 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Thu, 27 Apr 2023 23:54:24 +0800
Subject: [PATCH 7/8] feat: Parameters Application Version and  Node
 Information

---
 src/components/CardParameter.vue              |  3 +--
 src/components/dynamic/ArrayObjectElement.vue | 12 ++++++++----
 src/modules/[chain]/params/index.vue          |  4 +---
 src/stores/useParamsStore.ts                  |  2 +-
 yarn.lock                                     |  2 +-
 5 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/CardParameter.vue b/src/components/CardParameter.vue
index 5be60168..97bc1907 100644
--- a/src/components/CardParameter.vue
+++ b/src/components/CardParameter.vue
@@ -21,8 +21,7 @@ const props = defineProps({
         class="rounded-sm bg-active px-4 py-2"
       >
         <div class="text-xs mb-2 text-secondary">{{ item?.subtitle }}</div>
-        <div class="text-base text-main">{{ item?.value }}</div>
-        <!-- {{ item }} -->
+        <div class="text-base text-main">{{ Array.isArray(item?.value) ? (item?.value[0] && item?.value[0].amount)|| '-':`${Number(item?.value)}` === 'NaN' ? item?.value : Number(item?.value)}}</div>
       </div>
     </div>
   </div>
diff --git a/src/components/dynamic/ArrayObjectElement.vue b/src/components/dynamic/ArrayObjectElement.vue
index fc76a96d..079b41a6 100644
--- a/src/components/dynamic/ArrayObjectElement.vue
+++ b/src/components/dynamic/ArrayObjectElement.vue
@@ -3,7 +3,7 @@ import { computed } from '@vue/reactivity';
 import DynamicComponent from './DynamicComponent.vue';
 
 const props = defineProps({
-  value: { type: Array<Object>},
+  value: { type: null as any },
   thead: {
     type: Boolean,
     default: true
@@ -22,13 +22,17 @@ const header = computed(() => {
   <VTable v-if="header.length > 0" density="compact" height="300px" fixed-header hover>
     <thead v-if="thead">
       <tr>
-        <th v-for="k in header" class="text-left text-capitalize">{{ k }}</th>
+        <th v-for="(item, index) in header" :key="index" class="text-left text-capitalize">{{ item }}</th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="v in props.value">
-        <td v-for="k in header"> <DynamicComponent :value="v[k]" /></td>
+      <tr v-for="(item, index) in value" :key="index">
+        <td v-for="(el, key) in header" :key="key"> <DynamicComponent :value="item[el]" /></td>
       </tr>
     </tbody>
   </VTable>
+
+  <div v-else class="h-[300px]">
+
+  </div>
 </template>
\ No newline at end of file
diff --git a/src/modules/[chain]/params/index.vue b/src/modules/[chain]/params/index.vue
index e53622c4..42f9c33f 100644
--- a/src/modules/[chain]/params/index.vue
+++ b/src/modules/[chain]/params/index.vue
@@ -2,9 +2,7 @@
 import { useParamStore } from '@/stores';
 import { ref, onMounted } from 'vue'
 import CardParameter from '@/components/CardParameter.vue'
-import TableParameter from '@/components/TableParameter.vue'
 import ArrayObjectElement from '@/components/dynamic/ArrayObjectElement.vue';
-import { sort } from 'semver';
 const store = useParamStore()
 const chain = ref(store.chain)
 onMounted(() => {
@@ -48,7 +46,7 @@ onMounted(() => {
         </div>
         
         <!-- Node Information -->
-        <div class="bg-card px-4 pt-3 pb-4 rounded-sm mt-6">
+        <div class="bg-card px-4 pt-3 pb-4ß rounded-sm mt-6">
             <div class="text-base mb-3 text-main">{{ store.nodeVersion?.title }}</div>
             <ArrayObjectElement :value="store.nodeVersion?.items" :thead="false"/>
         </div>
diff --git a/src/stores/useParamsStore.ts b/src/stores/useParamsStore.ts
index 05da9ba2..a59c56e6 100644
--- a/src/stores/useParamsStore.ts
+++ b/src/stores/useParamsStore.ts
@@ -143,7 +143,7 @@ export const useParamStore = defineStore("paramstore", {
                 value: value }))
             this.nodeVersion.items = Object.entries(res.default_node_info).map(([key, value]) => ({ subtitle:key,
                 value: value }))
-            console.log('handleAbciInfo', res)
+            console.log('handleAbciInfo', this.nodeVersion.items)
         },
         async getBaseTendermintBlockLatest() {
             return await this.blockchain.rpc.getBaseBlockLatest()
diff --git a/yarn.lock b/yarn.lock
index 24f39f22..740fa4cb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7365,7 +7365,7 @@ symbol-observable@^2.0.3:
 
 tailwindcss@^3.3.1:
   version "3.3.1"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.1.tgz#b6662fab6a9b704779e48d083a9fef5a81d2b81e"
+  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.1.tgz#b6662fab6a9b704779e48d083a9fef5a81d2b81e"
   integrity sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==
   dependencies:
     arg "^5.0.2"

From e6cf8e3bf08b0f42408a99aa5b8676c4fbdd2d22 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Fri, 28 Apr 2023 00:10:25 +0800
Subject: [PATCH 8/8] feat: new uptime page

---
 src/modules/[chain]/uptime/index.vue | 12 ++++++++++++
 src/plugins/i18n/locales/cn.json     |  3 ++-
 src/plugins/i18n/locales/en.json     |  3 ++-
 3 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/[chain]/uptime/index.vue

diff --git a/src/modules/[chain]/uptime/index.vue b/src/modules/[chain]/uptime/index.vue
new file mode 100644
index 00000000..13437e58
--- /dev/null
+++ b/src/modules/[chain]/uptime/index.vue
@@ -0,0 +1,12 @@
+<template>
+  <VCard>
+    UPTIME
+  </VCard>
+</template>
+<route>
+  {
+    meta: {
+      i18n: 'uptime'
+    }
+  }
+</route>
diff --git a/src/plugins/i18n/locales/cn.json b/src/plugins/i18n/locales/cn.json
index 03852525..c2f010df 100644
--- a/src/plugins/i18n/locales/cn.json
+++ b/src/plugins/i18n/locales/cn.json
@@ -4,7 +4,8 @@
     "blocks": "区块和交易",
     "staking": "质押生息",
     "governance": "社区治理",
-    "parameters": "参数"
+    "parameters": "参数",
+    "uptime": "状态"
   },
   "index": {
     "slogan": "Ping Dashboard 是一个区块链浏览器，也是一个网页钱包，还有更多 ... 🛠",
diff --git a/src/plugins/i18n/locales/en.json b/src/plugins/i18n/locales/en.json
index 4bdd6446..6bc0715a 100644
--- a/src/plugins/i18n/locales/en.json
+++ b/src/plugins/i18n/locales/en.json
@@ -4,7 +4,8 @@
     "blocks": "Blocks&Transaction",
     "staking": "Staking",
     "governance": "Governance",
-    "parameters": "Parameters"
+    "parameters": "Parameters",
+    "uptime": "Uptime"
   },
   "index": {
     "slogan": "Ping Dashboard is not just an explorer but also a wallet and more ... 🛠",