feat: Parameters Page style change

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>

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>

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>

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
+  }
+  

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>