improve index and connect wallet

src/layouts/components/NavBarWallet.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { useWalletStore } from '@/stores';
+import type { Icon } from '@iconify/vue';
 import { ref, computed } from 'vue';
 const walletStore = useWalletStore();
-walletStore.$subscribe((m, s) => {
-  console.log(m, s);
-});
+// walletStore.$subscribe((m, s) => {
+//   console.log(m, s);
+// });
 function walletStateChange(res: any) {
   walletStore.setConnectedWallet(res.detail?.value);
 }
@@ -105,7 +106,7 @@ const addressChange = computed(() => {
       <ping-connect-wallet
         :chain-id="'juno-1'"
         :hd-path="`m/44'/118/0'/0/0`"
-        @change="walletStateChange"
+        @connect="walletStateChange"
       />
     </Teleport>
   </div>

src/modules/[chain]/index.vue

@@ -9,6 +9,7 @@ import {
   useTxDialog,
   useWalletStore,
   useStakingStore,
+useParamStore,
 } from '@/stores';
 import { onMounted, ref } from 'vue';
 import { useIndexModule } from './indexStore';
@@ -16,6 +17,7 @@ import { computed } from '@vue/reactivity';
 
 import CardStatisticsVertical from '@/components/CardStatisticsVertical.vue';
 import ProposalListItem from '@/components/ProposalListItem.vue';
+import ArrayObjectElement from '@/components/dynamic/ArrayObjectElement.vue'
 
 const props = defineProps(['chain']);
 
@@ -25,6 +27,7 @@ const walletStore = useWalletStore();
 const format = useFormatter();
 const dialog = useTxDialog();
 const stakingStore = useStakingStore();
+const paramStore = useParamStore()
 const coinInfo = computed(() => {
   return store.coinInfo;
 });
@@ -32,6 +35,9 @@ const coinInfo = computed(() => {
 onMounted(() => {
   store.loadDashboard();
   walletStore.loadMyAsset();
+  paramStore.handleAbciInfo()
+  // if(!(coinInfo.value && coinInfo.value.name)) {
+  // }
 });
 const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex]);
 
@@ -42,6 +48,7 @@ blockchain.$subscribe((m, s) => {
   ) {
     store.loadDashboard();
     walletStore.loadMyAsset();
+    paramStore.handleAbciInfo()
   }
 });
 function shortName(name: string, id: string) {
@@ -102,8 +109,7 @@ const color = computed(() => {
           <div class="text-xl font-semibold text-main">
             {{ coinInfo.name }} (<span class="uppercase">{{
               coinInfo.symbol
-            }}</span
-            >)
+            }}</span>)
           </div>
           <div class="text-xs mt-2">
             Rank:
@@ -360,6 +366,21 @@ const color = computed(() => {
         ></ping-token-convert>
       </Teleport>
     </div>
+
+    <div class="bg-base-100 rounded mt-4 shadow">
+      <div class="px-4 pt-4 pb-2 text-lg font-semibold text-main">
+        Application
+      </div>
+      <!-- Application Version -->
+      <ArrayObjectElement :value="paramStore.appVersion?.items" :thead="false" />
+    </div>
+
+    <div v-if="!store.coingeckoId" class="bg-base-100 rounded mt-4 shadow">
+      <div class="px-4 pt-4 pb-2 text-lg font-semibold text-main">
+        Node Information
+      </div>
+      <ArrayObjectElement :value="paramStore.nodeVersion?.items" :thead="false" />
+    </div>
   </div>
 </template>
 

src/modules/[chain]/indexStore.ts

@@ -200,6 +200,12 @@ export const useIndexModule = defineStore('module-index', {
         },
       ];
     },
+
+    coingeckoId() {
+      this.tickerIndex = 0;
+      const [firstAsset] = this.blockchain?.assets || [];
+      return firstAsset.coingecko_id
+    }
   },
   actions: {
     async loadDashboard() {