feat: add node Info and application version
This commit is contained in:
parent
248f4411e3
commit
987f76b7d4
@ -10,13 +10,13 @@ const props = defineProps({
|
|||||||
<template>
|
<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-sm mt-6"
|
||||||
v-if="props.cardItem?.items && props.cardItem?.items?.length > 0">
|
v-if="props.cardItem?.items && props.cardItem?.items?.length > 0">
|
||||||
<div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
|
<div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
|
||||||
<div class="grid grid-cols-5 gap-4">
|
<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 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-xs mb-2 text-secondary">{{ item?.subtitle }}</div>
|
||||||
<div class="text-base text-main">{{ item?.value }}</div>
|
<div class="text-base text-main">{{ item?.value }}</div>
|
||||||
<!-- {{ item }} -->
|
<!-- {{ item }} -->
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
26
src/components/TableParameter.vue
Normal file
26
src/components/TableParameter.vue
Normal file
@ -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>
|
@ -25,9 +25,7 @@ const format = useFormatter();
|
|||||||
const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex]);
|
const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex]);
|
||||||
|
|
||||||
blockchain.$subscribe((m, s) => {
|
blockchain.$subscribe((m, s) => {
|
||||||
console.log('index:', m);
|
|
||||||
if (!Array.isArray(m.events) && ['chainName', 'endpoint'].includes(m.events.key)) {
|
if (!Array.isArray(m.events) && ['chainName', 'endpoint'].includes(m.events.key)) {
|
||||||
console.log(m.events.key);
|
|
||||||
store.loadDashboard();
|
store.loadDashboard();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -176,7 +176,6 @@ export const useIndexModule = defineStore('module-index', {
|
|||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
async loadDashboard() {
|
async loadDashboard() {
|
||||||
console.log('initial dashboard')
|
|
||||||
this.$reset()
|
this.$reset()
|
||||||
this.initCoingecko()
|
this.initCoingecko()
|
||||||
useMintStore().fetchInflation()
|
useMintStore().fetchInflation()
|
||||||
|
@ -2,6 +2,8 @@
|
|||||||
import { useParamStore } from '@/stores';
|
import { useParamStore } from '@/stores';
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import CardParameter from '@/components/CardParameter.vue'
|
import CardParameter from '@/components/CardParameter.vue'
|
||||||
|
import TableParameter from '@/components/TableParameter.vue'
|
||||||
|
import { sort } from 'semver';
|
||||||
const store = useParamStore()
|
const store = useParamStore()
|
||||||
const chain = ref(store.chain)
|
const chain = ref(store.chain)
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -22,13 +24,10 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- minting Parameters -->
|
<!-- minting Parameters -->
|
||||||
<CardParameter :cardItem="store.mint"/>
|
<CardParameter :cardItem="store.mint"/>
|
||||||
|
|
||||||
<!-- Staking Parameters -->
|
<!-- Staking Parameters -->
|
||||||
<CardParameter :cardItem="store.staking"/>
|
<CardParameter :cardItem="store.staking"/>
|
||||||
|
|
||||||
<!-- Governance Parameters -->
|
<!-- Governance Parameters -->
|
||||||
<CardParameter :cardItem="store.gov"/>
|
<CardParameter :cardItem="store.gov"/>
|
||||||
<!-- Distribution Parameters -->
|
<!-- Distribution Parameters -->
|
||||||
@ -36,7 +35,9 @@ onMounted(() => {
|
|||||||
<!-- Slashing Parameters -->
|
<!-- Slashing Parameters -->
|
||||||
<CardParameter :cardItem="store.slashing"/>
|
<CardParameter :cardItem="store.slashing"/>
|
||||||
<!-- Application Version -->
|
<!-- Application Version -->
|
||||||
|
<TableParameter :tableItem="store.appVersion"/>
|
||||||
<!-- Node Information -->
|
<!-- Node Information -->
|
||||||
|
<TableParameter :tableItem="store.nodeVersion"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
@ -36,7 +36,6 @@ export const useBlockchain = defineStore("blockchain", {
|
|||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const routes = router?.getRoutes()||[]
|
const routes = router?.getRoutes()||[]
|
||||||
console.log(routes)
|
|
||||||
if(this.current && routes) {
|
if(this.current && routes) {
|
||||||
currNavItem = [{
|
currNavItem = [{
|
||||||
title: this.current?.prettyName || this.chainName || '',
|
title: this.current?.prettyName || this.chainName || '',
|
||||||
@ -115,7 +114,6 @@ export const useBlockchain = defineStore("blockchain", {
|
|||||||
},
|
},
|
||||||
setCurrent(name: string) {
|
setCurrent(name: string) {
|
||||||
this.chainName = name
|
this.chainName = name
|
||||||
console.log('set current', name)
|
|
||||||
},
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -44,6 +44,14 @@ export const useParamStore = defineStore("paramstore", {
|
|||||||
title: 'Governance Parameters',
|
title: 'Governance Parameters',
|
||||||
items: [] as Array<any>,
|
items: [] as Array<any>,
|
||||||
},
|
},
|
||||||
|
appVersion: {
|
||||||
|
title: 'Application Version',
|
||||||
|
items: {},
|
||||||
|
},
|
||||||
|
nodeVersion: {
|
||||||
|
title: 'Node Information',
|
||||||
|
items: {},
|
||||||
|
},
|
||||||
}),
|
}),
|
||||||
getters: {
|
getters: {
|
||||||
blockchain() {
|
blockchain() {
|
||||||
@ -58,6 +66,7 @@ export const useParamStore = defineStore("paramstore", {
|
|||||||
this.handleSlashingParams()
|
this.handleSlashingParams()
|
||||||
this.handleDistributionParams()
|
this.handleDistributionParams()
|
||||||
this.handleGovernanceParams()
|
this.handleGovernanceParams()
|
||||||
|
this.handleAbciInfo()
|
||||||
},
|
},
|
||||||
async handleBaseBlockLatest() {
|
async handleBaseBlockLatest() {
|
||||||
try {
|
try {
|
||||||
@ -65,7 +74,6 @@ export const useParamStore = defineStore("paramstore", {
|
|||||||
const height = this.chain.items.findIndex(x => x.subtitle === 'height')
|
const height = this.chain.items.findIndex(x => x.subtitle === 'height')
|
||||||
this.chain.title = `Chain ID: ${res.block.header.chain_id}`
|
this.chain.title = `Chain ID: ${res.block.header.chain_id}`
|
||||||
this.chain.items[height].value = res.block.header.height
|
this.chain.items[height].value = res.block.header.height
|
||||||
console.log(res, 999)
|
|
||||||
// if (timeIn(res.block.header.time, 3, 'm')) {
|
// if (timeIn(res.block.header.time, 3, 'm')) {
|
||||||
// this.syncing = true
|
// this.syncing = true
|
||||||
// } else {
|
// } else {
|
||||||
@ -111,7 +119,6 @@ export const useParamStore = defineStore("paramstore", {
|
|||||||
const res = await this.getSlashingParams()
|
const res = await this.getSlashingParams()
|
||||||
this.slashing.items = Object.entries(res.params).map(([key, value]) => ({ subtitle:key,
|
this.slashing.items = Object.entries(res.params).map(([key, value]) => ({ subtitle:key,
|
||||||
value: value }))
|
value: value }))
|
||||||
console.log('Slashing', res)
|
|
||||||
},
|
},
|
||||||
async handleDistributionParams(){
|
async handleDistributionParams(){
|
||||||
const res = await this.getDistributionParams()
|
const res = await this.getDistributionParams()
|
||||||
@ -124,13 +131,20 @@ export const useParamStore = defineStore("paramstore", {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
Promise.all([this.getGovParamsVoting(),this.getGovParamsDeposit(),this.getGovParamsTally()]).then((resArr) => {
|
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}
|
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,
|
this.gov.items = Object.entries(govParams).map(([key, value]) => ({ subtitle:key,
|
||||||
value: value }))
|
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() {
|
async getBaseTendermintBlockLatest() {
|
||||||
return await this.blockchain.rpc.getBaseBlockLatest()
|
return await this.blockchain.rpc.getBaseBlockLatest()
|
||||||
},
|
},
|
||||||
@ -168,6 +182,9 @@ export const useParamStore = defineStore("paramstore", {
|
|||||||
async getGovParamsTally() {
|
async getGovParamsTally() {
|
||||||
return await this.blockchain.rpc.getGovParamsTally()
|
return await this.blockchain.rpc.getGovParamsTally()
|
||||||
},
|
},
|
||||||
|
async fetchAbciInfo() {
|
||||||
|
return this.blockchain.rpc.getBaseNodeInfo()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user