#884 | when network changes we get a better behavior

src/App.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onMounted } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@@ -8,15 +8,17 @@ import moment from 'moment';
 import { getCore, useChainStore } from 'src/core';
 import { TELOS_NETWORK_NAMES } from 'src/core/mocks/chain-constants';
 import { providerManager } from 'src/boot/evm';
+import { useRoute } from 'vue-router';
 
 const $store = useStore();
 const { t: $t } = useI18n();
 const $q = useQuasar();
+const $route = useRoute();
 
 // computed
 const isNative = computed(() => $store.getters['login/isNative']);
 
-onMounted(async () => {
+const checkNetworkHealth = async () => {
     const network = useChainStore().currentChain.settings.getNetwork();
     if (TELOS_NETWORK_NAMES.includes(network)) {
         const script = document.createElement('script');
@@ -27,7 +29,13 @@ onMounted(async () => {
         document.body.appendChild(script);
     }
     const indexerApi = useChainStore().currentChain.settings.getIndexerApi();
+    const chainName = useChainStore().currentChain.settings.getDisplay();
+    const theme = $q.dark.isActive ? useChainStore().currentChain.settings.getThemes().dark : useChainStore().currentChain.settings.getThemes().light;
     const health = await indexerApi.get('/v1/health');
+    const background = theme?.primary || '#0099FF';
+    const color = theme?.color || 'white';
+    // print in console with background #8B3F98 and white text the following message: Using indexer {health.data.version} with {health.data.secondsBehind} seconds behind
+    console.debug(`%cUsing indexer ${health.data.version} for '${chainName}' with ${health.data.secondsBehind} seconds behind`, `background: ${background}; color: ${color};`);
 
     if (health.data?.secondsBehind > 3) {
         let behindBy = moment(health.data.secondsBehind * 1000).utc().format('HH:mm:ss');
@@ -52,6 +60,10 @@ onMounted(async () => {
             html: true,
         });
     }
+};
+
+onMounted(async () => {
+    // await checkNetworkHealth();
 
     // On login we must set the address and record the provider
     getCore().events.onLoggedOut.subscribe(() => {
@@ -70,7 +82,17 @@ onMounted(async () => {
     });
 });
 
+// Watch for changes in the route query to react when network changes
+watch(
+    () => $route.query.network,
+    async (newNetwork, oldNetwork) => {
+        if (newNetwork !== oldNetwork) {
+            await checkNetworkHealth();
+        }
+    },
+);
 </script>
+
 <template>
 <div id="q-app">
     <router-view />

src/components/InternalTransactionFlatTable.vue

@@ -217,7 +217,7 @@ export default {
             let processedTransactions = 0;
             let lastTransactionHash = '';
             const totalEntries = [];
-            result.results.forEach((internalTrx) => {
+            result.data.results.forEach((internalTrx) => {
                 if (internalTrx.transactionHash !== lastTransactionHash) {
                     processedTransactions++;
                     lastTransactionHash = internalTrx.transactionHash;
@@ -250,9 +250,9 @@ export default {
 
             const filter = Object.assign({}, this.filter ? this.filter : {});
             if (this.address) {
-                path = `/address/${this.address}/internal?limit=${limit}`;
+                path = `v1/address/${this.address}/internal?limit=${limit}`;
             } else {
-                path = `/internal?limit=${limit}`;
+                path = `v1/internal?limit=${limit}`;
             }
 
             if (filter.block) {

src/components/LoginModal.vue

@@ -5,7 +5,6 @@ import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import detectEthereumProvider from '@metamask/detect-provider';
 import { Authenticator } from 'universal-authenticator-library';
-
 import {
     LOGIN_EVM,
     LOGIN_NATIVE,

src/core/chains/EVMChainSettings.ts

@@ -163,6 +163,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
     }
 
     async init(): Promise<void> {
+        console.log('init');
         this.trace('init');
         // this is called only when this chain is needed to avoid initialization of all chains
         if (this.ready) {
@@ -224,12 +225,12 @@ export default abstract class EVMChainSettings implements ChainSettings {
         };
 
         // update indexer health state
-        promise.then((state) => {
+        promise.then((state:IndexerHealthResponse) => {
             this._indexerHealthState.state = state;
             this.indexerChecked$.next(true);
         });
 
-        return promise;
+        return promise as Promise<IndexerHealthResponse>;
     }
 
     /**

src/core/mocks/CoreConfig.ts

@@ -8,8 +8,12 @@ import { App } from 'vue';
 import { Authenticator, RpcEndpoint } from 'universal-authenticator-library';
 import { Subject } from 'rxjs';
 import { AccountModel } from 'src/core/mocks/AccountStore';
-import { ChainModel, TeloscanEVMChainSettings, useChainStore } from './ChainStore';
-import { CURRENT_CONTEXT } from '.';
+import {
+    ChainModel,
+    CURRENT_CONTEXT,
+    TeloscanEVMChainSettings,
+    useChainStore,
+} from 'src/core/mocks';
 import { ethers } from 'ethers';
 
 export interface ComplexMessage {

src/router/index.js

@@ -23,5 +23,32 @@ export default route(function (/* { store, ssrContext } */) {
         // quasar.conf.js -> build -> publicPath
         history: createHistory(process.env.VUE_ROUTER_BASE),
     });
+
+    // Add a global navigation guard to detect changes in route.query.network
+    Router.beforeEach((to, from, next) => {
+        const networkChanged = to.query.network !== from.query.network;
+        if (networkChanged) {
+            // Get the deepest matched route record
+            const matchedRoute = to.matched[to.matched.length - 1];
+            if (matchedRoute && matchedRoute.meta && matchedRoute.meta.networkChange) {
+                // If the route has a 'networkChange' label, redirect to that label
+                // only if the network if different from the current one page name
+                if (matchedRoute.meta.networkChange !== from.name) {
+                    // If the network change is to 'home', redirect to the home page
+                    next({ name: matchedRoute.meta.networkChange });
+                } else {
+                    // Otherwise, proceed to the intended route
+                    next();
+                }
+            } else {
+                // Otherwise, proceed to the intended route
+                next();
+            }
+        } else {
+            // If network has not changed, proceed as normal
+            next();
+        }
+    });
+
     return Router;
 });

src/router/routes.js

@@ -6,6 +6,7 @@ const routes = [
             path: '',
             name: 'home',
             component: () => import('pages/home/HomePage.vue'),
+            meta: { networkChange: null },
         }],
     },
     {
@@ -17,6 +18,7 @@ const routes = [
                 name: 'token',
                 props: route => ({ page: route.query.page, pagesize: route.query.pagesize }),
                 component: () => import('pages/AccountPage.vue'),
+                meta: { networkChange: null },
             },
         ],
     },
@@ -27,6 +29,7 @@ const routes = [
             path: '',
             name: 'sourcify',
             component: () => import('pages/ContractVerification.vue'),
+            meta: { networkChange: 'home' },
         }],
     },
     {
@@ -38,6 +41,7 @@ const routes = [
                 name: 'address',
                 props: route => ({ page: route.query.page, pagesize: route.query.pagesize }),
                 component: () => import('pages/AccountPage.vue'),
+                meta: { networkChange: 'address' },
             },
         ],
     },
@@ -48,6 +52,7 @@ const routes = [
             path: '',
             name: 'transaction',
             component: () => import('pages/TransactionPage.vue'),
+            meta: { networkChange: 'home' },
         }],
     },
     {
@@ -57,6 +62,7 @@ const routes = [
             path: '',
             name: 'transactions',
             component: () => import('pages/TransactionsPage.vue'),
+            meta: { networkChange: null },
         }],
     },
     {
@@ -66,18 +72,18 @@ const routes = [
             path: '',
             name: 'block',
             component: () => import('pages/BlockPage.vue'),
+            meta: { networkChange: 'home' },
         }],
     },
     {
         path: '/blocks',
         component: () => import('layouts/MainLayout.vue'),
-        children: [
-            {
-                path: '',
-                name: 'blocks',
-                component: () => import('pages/BlockListPage.vue'),
-            },
-        ],
+        children: [{
+            path: '',
+            name: 'blocks',
+            component: () => import('pages/BlockListPage.vue'),
+            meta: { networkChange: null },
+        }],
     },
     {
         path: '/holders',
@@ -86,6 +92,7 @@ const routes = [
             path: '',
             name: 'holders',
             component: () => import('pages/Holders.vue'),
+            meta: { networkChange: null },
         }],
     },
     {
@@ -96,6 +103,7 @@ const routes = [
             path: 'inputs',
             name: 'inputs-demo',
             component: () => import('pages/demo/inputs/InputsDemo.vue'),
+            meta: { networkChange: null },
         }],
     },
     {
@@ -105,6 +113,7 @@ const routes = [
             path: '',
             name: 'health',
             component: () => import('pages/HealthPage.vue'),
+            meta: { networkChange: null },
         }],
     },
     {
@@ -118,6 +127,7 @@ const routes = [
             path: '',
             name: 'export',
             component: () => import('pages/export/ExportPage.vue'),
+            meta: { networkChange: null },
         }],
     },
     {
@@ -127,20 +137,11 @@ const routes = [
             path: '',
             name: 'txsinternal',
             component: () => import('pages/InternalTrxPage.vue'),
+            meta: { networkChange: null },
         }],
     },
     {
-        path: '/endpoints',
-        redirect: () => ({ path: '/health' }),
-    },
-    {
-        // if the user falls on a /staking path, we need to redirect the user to https://wallet.telos.net/evm/staking?tab=stake
         path: '/staking',
-        component: () => import('layouts/MainLayout.vue'),
-        hildren: [{
-            path: '',
-            component: () => import('pages/ErrorNotFoundPage.vue'),
-        }],
         beforeEnter() {
             window.location.href = 'https://wallet.telos.net/evm/staking?tab=stake';
         },
@@ -151,6 +152,7 @@ const routes = [
         children: [{
             path: '',
             component: () => import('pages/ErrorNotFoundPage.vue'),
+            meta: { networkChange: null },
         }],
     },
 ];