add modules name

package.json

@@ -38,6 +38,7 @@
     "vite-plugin-vuetify": "^1.0.2",
     "vue": "^3.2.45",
     "vue-i18n": "^9.2.2",
+    "vue-json-pretty": "^2.2.4",
     "vue-router": "^4.1.6",
     "vue3-apexcharts": "^1.4.1",
     "vue3-perfect-scrollbar": "^1.6.1",

src/components/dynamic/ObjectElement.vue

@@ -9,9 +9,9 @@ const props = defineProps(["value"]);
     <VTable>
         <tbody>
             <tr v-for="(v, k) of value">
-                <td class="text-capitalize">{{ k }}</td>
+                <td class="text-capitalize" style="max-width: 200px;">{{ k }}</td>
                 <td><div class="overflow-hidden w-auto" style="max-width: 1000px;">
-                    <Component v-if="v" :is="select(v, k)" :value="v"></Component></div>
+                    <Component v-if="v" :is="select(v, 'horizontal')" :value="v"></Component></div>
                 </td>
             </tr>
         </tbody>

src/components/dynamic/ObjectHorizontalElement.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import DynamicComponent from './DynamicComponent.vue';
+import {select} from './index'
+
+const props = defineProps(["value"]);
+const tab = ref("")
+</script>
+<template>
+    <div>
+        <VTabs v-model="tab">
+            <VTab v-for="(v, k) of value" :value="k">{{ k }}</VTab>
+        </VTabs>
+        <VWindow v-model="tab" style="min-height: 25px;">
+            <VWindowItem v-for="(v, k) of value" :value="k"><DynamicComponent :value="v"/></VWindowItem>
+        </VWindow>
+    </div>
+</template>

src/components/dynamic/index.ts

@@ -4,26 +4,26 @@ import ArrayElement from './ArrayElement.vue'
 import UInt8Array from './UInt8Array.vue'
 import NumberElement from './NumberElement.vue'
 import TxsElement from './TxsElement.vue'
+import ObjectHorizontalElement from './ObjectHorizontalElement.vue'
 import Long from 'long'
 
-export function select(v: any, k?: any) {
+export function select(v: any, direct?: string) {
-    if(k === 'txs' && v) {
+    // if(k === 'txs' && v) {
-        console.log("=======txs=======", k, v)
+    //     return TxsElement
-        return TxsElement
+    // } else {
-    } else {
         const type = typeof v
         switch(type) {
             case 'object':
-                return selectObject(v)
+                return selectObject(v, direct)
             case 'number':
                 return NumberElement
             default: 
                 return TextElement
         }
-    }
+    // }
 }
 
-function selectObject(v: Object) {
+function selectObject(v: Object, direct?: string) {
     switch(true) {
         case v instanceof Long:
             return NumberElement
@@ -31,6 +31,8 @@ function selectObject(v: Object) {
             return UInt8Array
         case Array.isArray(v):
             return ArrayElement
+        case direct === 'horizontal':
+            return ObjectHorizontalElement
         default:
             return ObjectElement
     }

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

@@ -68,4 +68,12 @@ const format = useFormatter()
         </VCardActions>
     </VCard>
  
-</template>
+</template>
+
+<route>
+    {
+      meta: {
+        i18n: 'blocks'
+      }
+    }
+  </route>

src/modules/[chain]/index.vue

@@ -189,3 +189,11 @@ function shortName(name: string, id: string) {
   border: 1px solid rgb(var(--v-theme-primary));
 }
 </style>
+
+<route>
+  {
+    meta: {
+      i18n: 'dashboard'
+    }
+  }
+</route>

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

@@ -228,4 +228,12 @@ const rank = function(position: number) {
         </VCardActions>
         </VCard>
     </div>
-</template>
+</template>
+
+<route>
+  {
+    meta: {
+      i18n: 'staking'
+    }
+  }
+</route>

src/modules/[chain]/tx/[hash].vue

@@ -3,6 +3,8 @@ import { useBlockchain, useFormatter } from '@/stores';
 import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
 import { computed, ref } from '@vue/reactivity';
 import type { Tx, TxResponse } from '@/types';
+import VueJsonPretty from 'vue-json-pretty';
+import 'vue-json-pretty/lib/styles.css';
 
 const props = defineProps(['hash', 'chain'])
 
@@ -40,27 +42,21 @@ const messages = computed(() => {
             </VCardItem>
         </VCard>
 
-        <VCard title="Messages" class="my-5">
+        <VCard :title="`Messages: (${messages.length})`" class="my-5">
-            <VCardItem style="border-top: 2px dotted gray;">
+            <VCardItem class="pt-0" style="border-top: 2px dotted gray;">
                 <div v-for="(msg, i) in messages">
                     <div><DynamicComponent :value="msg" /></div>                  
                 </div>
+                <div v-if="messages.length === 0">
+                    <VIcon icon="mdi-empty"/>
+                </div>
             </VCardItem>
         </VCard>
 
-        <VCard title="Detail">
+        <VCard title="JSON">
-            <VExpansionPanels>
+            <VCardItem class="pt-0">
-                <VExpansionPanel title="Transaction">
+                <vue-json-pretty :data="tx" :deep="3"/>
-                    <v-expansion-panel-text>
+            </VCardItem>
-                        <DynamicComponent :value="tx.tx" />
-                    </v-expansion-panel-text>                
-                </VExpansionPanel>
-                <VExpansionPanel title="Transaction Response">
-                    <v-expansion-panel-text>
-                        <DynamicComponent :value="tx.tx_response" />
-                    </v-expansion-panel-text>                
-                </VExpansionPanel>
-            </VExpansionPanels>
         </VCard>
         
     </div>

src/plugins/i18n/locales/cn.json

@@ -1,7 +1,9 @@
 {
   "module": {
-    "chain": "面板首页",
+    "dashboard": "面板首页",
-    "chain-test": "测试功能",
+    "blocks": "区块和交易",
+    "staking": "质押生息",
+    "governance": "社区治理"
   },
   "index": {
     "slogan": "Ping Dashboard 是一个区块链浏览器，也是一个网页钱包，还有更多 ... 🛠",

src/plugins/i18n/locales/en.json

@@ -1,7 +1,9 @@
 {
   "module": {
-    "chain": "Dashboard",
+    "dashboard": "Dashboard",
-    "chain-test": "test",
+    "blocks": "Blocks&Transaction",
+    "staking": "Staking",
+    "governance": "Governance"
   },
   "index": {
     "slogan": "Ping Dashboard is not just an explorer but also a wallet and more ... 🛠",

src/stores/useBankStore.ts

@@ -24,7 +24,7 @@ export const useBankStore = defineStore('bankstore', {
         initial() {
             this.$reset()
             this.supply = {} as Coin
-            const denom = this.staking.params.bondDenom || this.blockchain.current?.assets[0].base
+            const denom = this.staking.params.bond_denom || this.blockchain.current?.assets[0].base
             if(denom) {
                 this.blockchain.rpc.getBankSupplyByDenom(denom).then(res => {
                     if(res.amount) this.supply = res.amount

src/stores/useBlockchain.ts

@@ -43,9 +43,9 @@ export const useBlockchain = defineStore("blockchain", {
           icon: {image: this.current.logo, size: '22'},
           i18n: false,
           children: routes
-                    .filter(x=>x.name && x.name.toString().startsWith('chain'))
+                    .filter(x=> x.meta.i18n)
                     .map(x => ({
-                      title: `module.${x.name?.toString()}`, 
+                      title: `module.${x.meta.i18n}`, 
                       to: {path: x.path.replace(':chain',this.chainName)}, 
                       icon: { icon: 'mdi-chevron-right', size: '22'},
                       i18n: true
@@ -112,7 +112,6 @@ export const useBlockchain = defineStore("blockchain", {
       this.connErr = ''
       this.endpoint = endpoint
       this.rpc = new CosmosRestClient(endpoint.address)
-      // console.log(this.rpc.endpoint)
     },
     setCurrent(name: string) {
       this.chainName = name

yarn.lock

@@ -7814,6 +7814,11 @@ vue-i18n@^9.2.2:
     "@intlify/vue-devtools" "9.2.2"
     "@vue/devtools-api" "^6.2.1"
 
+vue-json-pretty@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/vue-json-pretty/-/vue-json-pretty-2.2.4.tgz#4c82fa78aeb987460c727c3b31e45a58f58d9c95"
+  integrity sha512-JX80b3QDrspcH43C53CdtYeq/froApQGSV5y43bEMWFj2LGOxB96aH1VmvrFA21nD1WTP6nwfFMQqGXuS4jyFQ==
+
 vue-router@^4.1.6:
   version "4.1.6"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.6.tgz#b70303737e12b4814578d21d68d21618469375a1"