endpoint switch improvement

src/layouts/components/ChainProfile.vue

@@ -33,7 +33,7 @@ function changeEndpoint(item: Endpoint) {
             baseStore.latest?.block?.header?.height ||
             chainStore.chainName ||
             ''
-          }}
+          }} <span class="text-error">{{ baseStore.connected ? '' : 'disconnected' }}</span>
         </div>
         <div
           class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden md:!block"

src/layouts/components/DefaultLayout.vue

@@ -18,12 +18,18 @@ import type { NavGroup, NavLink, NavSectionTitle, VerticalNavItems } from '../ty
 const dashboard = useDashboard();
 dashboard.initial();
 const blockchain = useBlockchain();
+blockchain.randomSetupEndpoint();
 
-const current = ref('');
+const current = ref(''); // the current chain
+const temp = ref('')
 blockchain.$subscribe((m, s) => {
+  if(current.value ===s.chainName && temp.value != s.endpoint.address) {
+    temp.value = s.endpoint.address
+    blockchain.initial();
+  }
   if (current.value != s.chainName) {
     current.value = s.chainName;
-    blockchain.initial();
+    blockchain.randomSetupEndpoint();
   }
 });
 

src/stores/useBaseStore.ts

@@ -5,6 +5,7 @@ import dayjs from 'dayjs';
 import type { Block } from '@/types';
 import { hashTx } from '@/libs';
 import { fromBase64 } from '@cosmjs/encoding';
+import { useRouter } from 'vue-router';
 
 export const useBaseStore = defineStore('baseStore', {
     state: () => {
@@ -15,6 +16,7 @@ export const useBaseStore = defineStore('baseStore', {
             theme: (window.localStorage.getItem('theme') || 'dark') as
                 | 'light'
                 | 'dark',
+            connected: true,
         };
     },
     getters: {
@@ -66,13 +68,18 @@ export const useBaseStore = defineStore('baseStore', {
     },
     actions: {
         async initial() {
-            this.fetchLatest();
+            this.fetchLatest()
         },
         async clearRecentBlocks() {
             this.recents = [];
         },
         async fetchLatest() {
-            this.latest = await this.blockchain.rpc?.getBaseBlockLatest();
+            try{
+                this.latest = await this.blockchain.rpc?.getBaseBlockLatest();
+                this.connected = true
+            }catch(e) {
+                this.connected = false
+            }
             if (
                 !this.earlest ||
                 this.earlest?.block?.header?.chain_id !=

src/stores/useBlockchain.ts

@@ -139,7 +139,6 @@ export const useBlockchain = defineStore('blockchain', {
       //     global.current
       // }
       useWalletStore().$reset();
-      await this.randomSetupEndpoint();
       await useStakingStore().init();
       useBankStore().initial();
       useBaseStore().initial();