feat: add node Info and application version

src/components/CardParameter.vue

@@ -10,13 +10,13 @@ const props = defineProps({
 <template>
     <div class="bg-card px-4 pt-3 pb-4 rounded-sm 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 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>
 </template>

src/components/TableParameter.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+const props = defineProps({
+    tableItem: {
+        type: Object as PropType<{title: string;items: Object;}>,
+    },
+})
+
+function formatTitle (name: string){
+    return String(name).replaceAll('_', ' ')
+}
+
+</script>
+<template>
+    <div class="bg-card px-4 pt-3 pb-4 rounded-sm 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>
+</template>

src/modules/[chain]/index.vue

@@ -25,9 +25,7 @@ const format = useFormatter();
 const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex]);
 
 blockchain.$subscribe((m, s) => {
-  console.log('index:', m);
   if (!Array.isArray(m.events) && ['chainName', 'endpoint'].includes(m.events.key)) {
-    console.log(m.events.key);
     store.loadDashboard();
   }
 });

src/modules/[chain]/indexStore.ts

@@ -176,7 +176,6 @@ export const useIndexModule = defineStore('module-index', {
     },
     actions: {
         async loadDashboard() {
-            console.log('initial dashboard')
             this.$reset()
             this.initCoingecko()
             useMintStore().fetchInflation()

src/modules/[chain]/params/index.vue

@@ -2,6 +2,8 @@
 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(() => {
@@ -22,13 +24,10 @@ onMounted(() => {
                 </div>
             </div>
         </div>
-
         <!-- minting Parameters  -->
-        <CardParameter :cardItem="store.mint"/>
-        
+        <CardParameter :cardItem="store.mint"/> 
         <!-- Staking Parameters  -->
         <CardParameter :cardItem="store.staking"/>
-
         <!-- Governance Parameters -->
         <CardParameter :cardItem="store.gov"/>
         <!-- Distribution Parameters -->
@@ -36,7 +35,9 @@ onMounted(() => {
         <!-- Slashing Parameters -->
         <CardParameter :cardItem="store.slashing"/>
         <!-- Application Version -->
+        <TableParameter :tableItem="store.appVersion"/>
         <!-- Node Information -->
+        <TableParameter :tableItem="store.nodeVersion"/>
     </div>
 
 </template>

src/stores/useBlockchain.ts

@@ -36,7 +36,6 @@ export const useBlockchain = defineStore("blockchain", {
 
       const router = useRouter()
       const routes = router?.getRoutes()||[]
-      console.log(routes)
       if(this.current && routes) {
         currNavItem = [{
           title: this.current?.prettyName || this.chainName || '',
@@ -115,7 +114,6 @@ export const useBlockchain = defineStore("blockchain", {
     },
     setCurrent(name: string) {
       this.chainName = name
-      console.log('set current', name)
     },
 
   }

src/stores/useParamsStore.ts

@@ -44,6 +44,14 @@ export const useParamStore = defineStore("paramstore", {
             title: 'Governance Parameters',
             items: [] as Array<any>,
         },
+        appVersion: {
+            title: 'Application Version',
+            items: {},
+        },
+        nodeVersion:  {
+            title: 'Node Information',
+            items: {},
+        },
     }),
     getters: {
         blockchain() {
@@ -58,6 +66,7 @@ export const useParamStore = defineStore("paramstore", {
             this.handleSlashingParams()
             this.handleDistributionParams()
             this.handleGovernanceParams()
+            this.handleAbciInfo()
         },
         async handleBaseBlockLatest() {
             try {
@@ -65,7 +74,6 @@ export const useParamStore = defineStore("paramstore", {
                 const height = this.chain.items.findIndex(x => x.subtitle === 'height')
                 this.chain.title = `Chain ID: ${res.block.header.chain_id}`
                 this.chain.items[height].value = res.block.header.height
-                console.log(res, 999)
                 // if (timeIn(res.block.header.time, 3, 'm')) {
                 //   this.syncing = true
                 // } else {
@@ -111,7 +119,6 @@ export const useParamStore = defineStore("paramstore", {
             const res = await this.getSlashingParams()
             this.slashing.items = Object.entries(res.params).map(([key, value]) => ({ subtitle:key,
                 value: value }))
-            console.log('Slashing', res)
         },
         async handleDistributionParams(){
             const res = await this.getDistributionParams()
@@ -124,13 +131,20 @@ export const useParamStore = defineStore("paramstore", {
                 return
             }
             Promise.all([this.getGovParamsVoting(),this.getGovParamsDeposit(),this.getGovParamsTally()]).then((resArr) => {
-                console.log(resArr, 'resArrr')
                 const govParams = {...resArr[0]?.voting_params,...resArr[1]?.deposit_params,...resArr[2]?.tally_params}
                 this.gov.items = Object.entries(govParams).map(([key, value]) => ({ subtitle:key,
                     value: value }))
             })
             
         },
+        async handleAbciInfo(){
+            const res = await this.fetchAbciInfo()
+            this.appVersion.items =  Object.entries(res.application_version).map(([key, value]) => ({ subtitle:key,
+                value: value }))
+            this.nodeVersion.items = Object.entries(res.default_node_info).map(([key, value]) => ({ subtitle:key,
+                value: value }))
+            console.log('handleAbciInfo', res)
+        },
         async getBaseTendermintBlockLatest() {
             return await this.blockchain.rpc.getBaseBlockLatest()
         },
@@ -168,6 +182,9 @@ export const useParamStore = defineStore("paramstore", {
         async getGovParamsTally() {
             return await this.blockchain.rpc.getGovParamsTally()
         },
+        async fetchAbciInfo() {
+            return this.blockchain.rpc.getBaseNodeInfo()
+        }
 
         
     }