From 160204b22764da7e7316e25e9d1bb950a85686cb Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 26 Nov 2024 07:49:12 -0300
Subject: [PATCH 1/3] when network changes we get a better behaviour

---
 src/App.vue                                   | 32 ++++++++++++++---
 src/components/AddressMoreInfo.vue            |  2 +-
 .../InternalTransactionFlatTable.vue          |  6 ++--
 src/components/LoginModal.vue                 |  9 +++--
 src/core/chains/EVMChainSettings.ts           | 15 ++++----
 src/core/index.ts                             |  2 +-
 src/core/mocks/AccountStore.ts                | 10 +++---
 .../mocks/{AntelopeConfig.ts => Config.ts}    | 14 +++++---
 src/core/mocks/index.ts                       |  2 +-
 .../authenticators/EVMAuthenticator.ts        |  4 +--
 src/core/wallets/init.ts                      |  4 +--
 src/lib/contract/ContractManager.js           |  4 +--
 src/router/index.js                           | 27 ++++++++++++++
 src/router/routes.js                          | 36 ++++++++++---------
 14 files changed, 111 insertions(+), 56 deletions(-)
 rename src/core/mocks/{AntelopeConfig.ts => Config.ts} (98%)

diff --git a/src/App.vue b/src/App.vue
index 50a8e7143..d75b78a79 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,24 @@
 <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';
 import moment from 'moment';
 
-import { getAntelope, useChainStore } from 'src/core';
+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,16 +60,20 @@ onMounted(async () => {
             html: true,
         });
     }
+};
+
+onMounted(async () => {
+    // await checkNetworkHealth();
 
     // On login we must set the address and record the provider
-    getAntelope().events.onLoggedOut.subscribe(() => {
+    getCore().events.onLoggedOut.subscribe(() => {
         const loginData = localStorage.getItem('loginData');
         if (isNative.value) {
             if (!loginData) {
                 return;
             }
             const loginObj = JSON.parse(loginData);
-            const wallet = getAntelope().config.authenticatorsGetter().find(a => a.getName() === loginObj.provider);
+            const wallet = getCore().config.authenticatorsGetter().find(a => a.getName() === loginObj.provider);
             wallet?.logout();
         }
         $store.commit('login/setLogin', {});
@@ -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 />
diff --git a/src/components/AddressMoreInfo.vue b/src/components/AddressMoreInfo.vue
index b2c52d27f..9855e2696 100644
--- a/src/components/AddressMoreInfo.vue
+++ b/src/components/AddressMoreInfo.vue
@@ -33,7 +33,7 @@ const updateData = async () => {
             lastTxn.value = lastTxnQuery.results[0].hash;
             // use total count to offset query and fetch first transaction
             const offset = lastTxnQuery.total_count - 1;
-            const firstTxnQuery = (await indexerApi.get(`address/${props.address}/transactions?limit=1&offset=${offset}`) as TransactionQueryData).data;
+            const firstTxnQuery = (await indexerApi.get(`v1/address/${props.address}/transactions?limit=1&offset=${offset}`) as TransactionQueryData).data;
             firstTxn.value = firstTxnQuery.results[0].hash;
         } else {
             noTrxYet.value = true;
diff --git a/src/components/InternalTransactionFlatTable.vue b/src/components/InternalTransactionFlatTable.vue
index e72021537..a91892a87 100644
--- a/src/components/InternalTransactionFlatTable.vue
+++ b/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) {
diff --git a/src/components/LoginModal.vue b/src/components/LoginModal.vue
index efcc624b4..551c632fd 100644
--- a/src/components/LoginModal.vue
+++ b/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,
@@ -18,7 +17,7 @@ import {
     AccountModel,
     CURRENT_CONTEXT,
     EvmAccountModel,
-    getAntelope,
+    getCore,
     useAccountStore,
     useChainStore,
 } from 'src/core/mocks';
@@ -40,14 +39,14 @@ const browserSupportsMetaMask = ref(true);
 const isBraveBrowser = ref(false);
 const isIOSMobile = ref(false);
 
-const authenticators = computed(() => getAntelope().config.authenticatorsGetter());
+const authenticators = computed(() => getCore().config.authenticatorsGetter());
 
 onMounted(async () => {
     await detectProvider();
     detectMobile();
 
     // On login we must set the address and record the provider
-    getAntelope().events.onLoggedIn.subscribe((account: AccountModel) => {
+    getCore().events.onLoggedIn.subscribe((account: AccountModel) => {
         const evm_account = account as EvmAccountModel;
         const address = evm_account.account;
         const pr_name = evm_account.authenticator.getName();
@@ -146,7 +145,7 @@ function getIconForWallet(wallet: { getName: () => string; getStyle: () => { ico
 
 async function loginWithAntelope(name:string, autoLogAccount?: string) {
     const label = CURRENT_CONTEXT;
-    const auth = getAntelope().wallets.getAuthenticator(name);
+    const auth = getCore().wallets.getAuthenticator(name);
     if (!auth) {
         console.error(`${name} authenticator not found`);
         return;
diff --git a/src/core/chains/EVMChainSettings.ts b/src/core/chains/EVMChainSettings.ts
index 809c9954c..d148c7a39 100644
--- a/src/core/chains/EVMChainSettings.ts
+++ b/src/core/chains/EVMChainSettings.ts
@@ -26,7 +26,7 @@ import { ethers } from 'ethers';
 import { toStringNumber } from 'src/core/stores/utils/currency-utils';
 import { dateIsWithinXMinutes } from 'src/core/stores/utils/date-utils';
 import { createTraceFunction } from 'src/core/mocks/FeedbackStore';
-import { getAntelope } from 'src/core';
+import { getCore } from 'src/core';
 import { WEI_PRECISION, PRICE_UPDATE_INTERVAL_IN_MIN } from 'src/core/stores/utils';
 import { BehaviorSubject, filter } from 'rxjs';
 import { TelosEvmApi } from '@telosnetwork/telosevm-js';
@@ -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) {
@@ -170,7 +171,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
         }
         this.ready = true;
 
-        // this setTimeout is a work arround because we can't call getAntelope() function before it initializes
+        // this setTimeout is a work arround because we can't call getCore() function before it initializes
         setTimeout(() => {
             const timer = setInterval(async () => {
                 try {
@@ -179,7 +180,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
                     clearInterval(timer);
                     console.error('Indexer API not working for this chain:', this.getNetwork(), e);
                 }
-            }, getAntelope().config.indexerHealthCheckInterval);
+            }, getCore().config.indexerHealthCheckInterval);
         }, 1000);
 
         // Update system token price
@@ -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>;
     }
 
     /**
@@ -243,7 +244,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
         ).subscribe(() => {
             if (!this.indexerHealthWarningShown && !this.isIndexerHealthy()) {
                 this.indexerHealthWarningShown = true;
-                const  ant = getAntelope();
+                const  ant = getCore();
                 ant.config.notifyNeutralMessageHandler(
                     ant.config.localizationHandler('antelope.chain.indexer_bad_health_warning'),
                 );
@@ -257,7 +258,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
         } else {
             return (
                 this._indexerHealthState.state.success &&
-                this._indexerHealthState.state.secondsBehind < getAntelope().config.indexerHealthThresholdSeconds
+                this._indexerHealthState.state.secondsBehind < getCore().config.indexerHealthThresholdSeconds
             );
         }
     }
diff --git a/src/core/index.ts b/src/core/index.ts
index b96906287..8fa5f0aa7 100644
--- a/src/core/index.ts
+++ b/src/core/index.ts
@@ -1,5 +1,5 @@
 export * from 'src/core/mocks/AccountStore';
-export * from 'src/core/mocks/AntelopeConfig';
+export * from 'src/core/mocks/Config';
 export * from 'src/core/mocks/ChainStore';
 export * from 'src/core/mocks/UserStore';
 export * from 'src/core/mocks/ContractStore';
diff --git a/src/core/mocks/AccountStore.ts b/src/core/mocks/AccountStore.ts
index 2ceee9bf8..f5dc4a07e 100644
--- a/src/core/mocks/AccountStore.ts
+++ b/src/core/mocks/AccountStore.ts
@@ -6,7 +6,7 @@ import { EVMAuthenticator } from 'src/core/wallets';
 import { AntelopeError, addressString } from 'src/core/types';
 import { CURRENT_CONTEXT, TeloscanEVMChainSettings, createTraceFunction, useChainStore } from 'src/core/mocks';
 import { BigNumber } from 'ethers'; 'src/core/mocks/FeedbackStore';
-import { getAntelope } from 'src/core/mocks/AntelopeConfig';
+import { getCore } from 'src/core/mocks/Config';
 import { useFeedbackStore } from 'src/core/mocks';
 import { EvmABI, EvmFunctionParam, Label, TransactionResponse } from 'src/core/types';
 import { subscribeForTransactionReceipt } from 'src/core/wallets/utils/trx-utils';
@@ -60,7 +60,7 @@ class AccountStore {
 
         if (currentAccount) {
             const account = useAccountStore().getAccount(authenticator.label);
-            getAntelope().events.onLoggedIn.next(account);
+            getCore().events.onLoggedIn.next(account);
         }
         return !!currentAccount;
     }
@@ -69,7 +69,7 @@ class AccountStore {
         currentAuthenticator.logout();
         currentAuthenticator = {} as EVMAuthenticator;
         currentAccount = null;
-        getAntelope().events.onLoggedOut.next();
+        getCore().events.onLoggedOut.next();
     }
 
     get loggedAccount() {
@@ -99,7 +99,7 @@ class AccountStore {
         parameters: EvmFunctionParam[],
         value?: BigNumber,
     ): Promise<TransactionResponse>{
-        const ant = getAntelope();
+        const ant = getCore();
         const funcname = 'signCustomTransaction';
         this.trace(funcname, label, contract, abi, parameters, value?.toString());
 
@@ -157,7 +157,7 @@ class AccountStore {
         if (!await useAccountStore().isConnectedToCorrectNetwork(label)) {
             // eslint-disable-next-line no-async-promise-executor
             return new Promise<boolean>(async (resolve) => {
-                const ant = getAntelope();
+                const ant = getCore();
                 const authenticator = useAccountStore().loggedAccount.authenticator as EVMAuthenticator;
                 try {
                     await authenticator.ensureCorrectChain();
diff --git a/src/core/mocks/AntelopeConfig.ts b/src/core/mocks/Config.ts
similarity index 98%
rename from src/core/mocks/AntelopeConfig.ts
rename to src/core/mocks/Config.ts
index 32bcce20b..54d038ff1 100644
--- a/src/core/mocks/AntelopeConfig.ts
+++ b/src/core/mocks/Config.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 {
@@ -74,7 +78,7 @@ export class AntelopeWallets {
 
 }
 
-export class AntelopeConfig {
+export class Config {
     transactionError(description: string, error: unknown): AntelopeError {
         if (error instanceof AntelopeError) {
             return error as AntelopeError;
@@ -366,7 +370,7 @@ export class AntelopeConfig {
 
 }
 
-const config = new AntelopeConfig();
+const config = new Config();
 const wallets = new AntelopeWallets();
 const events = {
     onLoggedIn: new Subject<AccountModel>(),
@@ -385,6 +389,6 @@ events.onNetworkChanged.subscribe(() => {
     Antelope.wallets.resetWeb3Provider();
 });
 
-export const getAntelope = () => Antelope;
+export const getCore = () => Antelope;
 // ----------------------------------------------------------------
 
diff --git a/src/core/mocks/index.ts b/src/core/mocks/index.ts
index 9256e1e44..25aad8e00 100644
--- a/src/core/mocks/index.ts
+++ b/src/core/mocks/index.ts
@@ -1,6 +1,6 @@
 export * from 'src/core/mocks/FeedbackStore';
 export * from 'src/core/mocks/AccountStore';
-export * from 'src/core/mocks/AntelopeConfig';
+export * from 'src/core/mocks/Config';
 export * from 'src/core/mocks/ChainStore';
 export * from 'src/core/mocks/ContractStore';
 export * from 'src/core/mocks/EVMStore';
diff --git a/src/core/wallets/authenticators/EVMAuthenticator.ts b/src/core/wallets/authenticators/EVMAuthenticator.ts
index 092b10ef1..527dd27bb 100644
--- a/src/core/wallets/authenticators/EVMAuthenticator.ts
+++ b/src/core/wallets/authenticators/EVMAuthenticator.ts
@@ -5,7 +5,7 @@
 import { SendTransactionResult, WriteContractResult } from '@wagmi/core';
 import { BigNumber, ethers } from 'ethers';
 import { createTraceFunction } from 'src/core/mocks/FeedbackStore';
-import { CURRENT_CONTEXT, getAntelope, useAccountStore } from 'src/core/mocks';
+import { CURRENT_CONTEXT, getCore, useAccountStore } from 'src/core/mocks';
 import { TeloscanEVMChainSettings } from 'src/core/mocks';
 import { useChainStore } from 'src/core/mocks';
 import { useEVMStore } from 'src/core/mocks';
@@ -119,7 +119,7 @@ export abstract class EVMAuthenticator {
             const showSwitchNotification = !(await this.isConnectedToCorrectChain());
             return useEVMStore().ensureCorrectChain(this).then((result) => {
                 if (showSwitchNotification) {
-                    const ant = getAntelope();
+                    const ant = getCore();
                     const networkName = useChainStore().getChain(this.label).settings.getDisplay();
                     ant.config.notifyNeutralMessageHandler(
                         ant.config.localizationHandler('antelope.wallets.network_switch_success', { networkName }),
diff --git a/src/core/wallets/init.ts b/src/core/wallets/init.ts
index 8540b2078..f050ddb28 100644
--- a/src/core/wallets/init.ts
+++ b/src/core/wallets/init.ts
@@ -5,7 +5,7 @@ import { Web3ModalConfig } from '@web3modal/html';
 import { MetamaskAuth, SafePalAuth, WalletConnectAuth, BraveAuth, useChainStore } from 'src/core/wallets';
 import { configureChains, createConfig } from '@wagmi/core';
 import { telos, telosTestnet } from '@wagmi/core/chains';
-import { getAntelope } from 'src/core/mocks/AntelopeConfig';
+import { getCore } from 'src/core/mocks/Config';
 import { App } from 'vue';
 import { AntelopeError } from 'src/core/types';
 
@@ -38,7 +38,7 @@ export function initAntelope(app: App) {
     const explorerExcludedWalletIds = 'ALL' as const; // Web3Modal option excludes all but recomended
     const wagmiOptions: Web3ModalConfig = { projectId, explorerRecommendedWalletIds, explorerExcludedWalletIds };
 
-    const ant = getAntelope();
+    const ant = getCore();
     ant.config.init(app);
 
     // settting notification handlers --
diff --git a/src/lib/contract/ContractManager.js b/src/lib/contract/ContractManager.js
index ba9b192de..80e974e58 100644
--- a/src/lib/contract/ContractManager.js
+++ b/src/lib/contract/ContractManager.js
@@ -4,7 +4,7 @@ import axios from 'axios';
 import { getTopicHash } from 'src/lib/utils';
 import { ERC1155_TRANSFER_SIGNATURE, TRANSFER_SIGNATURES } from 'src/lib/abi/signature/transfer_signatures.js';
 import { erc1155Abi, erc721MetadataAbi } from 'src/lib/abi';
-import { getAntelope, useChainStore } from 'src/core';
+import { getCore, useChainStore } from 'src/core';
 const tokenList = 'https://raw.githubusercontent.com/telosnetwork/token-list/main/telosevm.tokenlist.json';
 const systemContractList =
     'https://raw.githubusercontent.com/telosnetwork/token-list/main/telosevm.systemcontractlist.json';
@@ -100,7 +100,7 @@ export default class ContractManager {
     }
 
     getEthersProvider() {
-        return getAntelope().wallets.getWeb3Provider();
+        return getCore().wallets.getWeb3Provider();
     }
     async getTransfers(raw) {
         if(!raw.logs || raw.logs?.length === 0){
diff --git a/src/router/index.js b/src/router/index.js
index fef6e1fa8..44f02ca5d 100644
--- a/src/router/index.js
+++ b/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;
 });
diff --git a/src/router/routes.js b/src/router/routes.js
index 9a42af9d4..d86a3b143 100644
--- a/src/router/routes.js
+++ b/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 },
         }],
     },
 ];

From 5e7129038359c3d9843c12e4adfc821ec499930e Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Wed, 11 Dec 2024 11:55:31 -0300
Subject: [PATCH 2/3] refactoring the multichain and network selection utils to
 a specific file

---
 src/components/header/AppHeaderLinks.vue  | 68 ++--------------
 src/components/header/AppHeaderTopBar.vue | 85 ++-----------------
 src/layouts/MainLayout.vue                | 10 ++-
 src/lib/multichain-utils.ts               | 99 +++++++++++++++++++++++
 4 files changed, 120 insertions(+), 142 deletions(-)
 create mode 100644 src/lib/multichain-utils.ts

diff --git a/src/components/header/AppHeaderLinks.vue b/src/components/header/AppHeaderLinks.vue
index d2b7fd627..79c2cf83f 100644
--- a/src/components/header/AppHeaderLinks.vue
+++ b/src/components/header/AppHeaderLinks.vue
@@ -4,15 +4,11 @@ import { useRoute, useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 
-import {
-    TELOSCAN_MAINNET_URL,
-    TELOSCAN_TESTNET_URL,
-} from 'src/lib/chain-utils';
-
 import LanguageSwitcherModal from 'components/header/LanguageSwitcherModal.vue';
 import OutlineButton from 'components/OutlineButton.vue';
 import { useChainStore } from 'src/core';
 import { HeaderMenuEntry } from 'src/core/types';
+import { chains, multichainSelectedNetwork, switchChain } from 'src/lib/multichain-utils';
 
 const $route = useRoute();
 const $router = useRouter();
@@ -24,17 +20,6 @@ defineProps<{
 }>();
 const emit = defineEmits(['close-menu']);
 
-const networksMenuItems = {
-    mainnet: [{
-        url: TELOSCAN_MAINNET_URL,
-        label: 'Telos Mainnet',
-    }],
-    testnet: [{
-        url: TELOSCAN_TESTNET_URL,
-        label: 'Telos Testnet',
-    }],
-};
-
 const blockchainMenuExpandedMobile = ref(false);
 const developersMenuExpandedMobile = ref(false);
 const moreMenuExpandedMobile = ref(false);
@@ -105,28 +90,6 @@ function toggleDarkMode() {
     $q.dark.toggle();
     localStorage.setItem('darkModeEnabled', $q.dark.isActive.toString());
 }
-
-function getIsCurrentNetworkMenuItem(url: string) {
-    networksMenuItems.mainnet.forEach((item) => {
-        if (item.url === url) {
-            return true;
-        }
-    });
-    return false;
-}
-
-function goTo(to: string | { name: string }) {
-    blurActiveElement();
-    closeAllMenus();
-
-    const httpsRegex = /^https/;
-    if (typeof to === 'string' && httpsRegex.test(to)) {
-        window.open(to, '_blank');
-        return;
-    }
-
-    $router.push(to);
-}
 </script>
 
 <template>
@@ -249,35 +212,18 @@ function goTo(to: string | { name: string }) {
             }"
         >
             <li
-                v-for="item in networksMenuItems.mainnet"
-                :key="`networks-submenu-item-mainnet-${item.label}`"
-                :class="{
-                    'c-header-links__submenu-li': true,
-                    'c-header-links__submenu-li--current': getIsCurrentNetworkMenuItem(item.url),
-                }"
-                tabindex="0"
-                role="link"
-                @click="goTo(item.url)"
-                @keydown.enter="goTo(item.url)"
-            >
-                {{ item.label }}
-            </li>
-
-            <q-separator />
-
-            <li
-                v-for="item in networksMenuItems.testnet"
-                :key="`networks-submenu-item-testnet-${item.label}`"
+                v-for="chain in chains"
+                :key="chain.network"
                 :class="{
                     'c-header-links__submenu-li': true,
-                    'c-header-links__submenu-li--current': getIsCurrentNetworkMenuItem(item.url),
+                    'c-header-links__submenu-li--current': multichainSelectedNetwork?.network === chain.network
                 }"
                 tabindex="0"
                 role="link"
-                @click="goTo(item.url)"
-                @keydown.enter="goTo(item.url)"
+                @click="switchChain(chain)"
+                @keydown.enter="switchChain(chain)"
             >
-                {{ item.label }}
+                {{ chain.settings.getDisplay() }}
             </li>
         </ul>
     </li>
diff --git a/src/components/header/AppHeaderTopBar.vue b/src/components/header/AppHeaderTopBar.vue
index 7e02acd46..a082b714f 100644
--- a/src/components/header/AppHeaderTopBar.vue
+++ b/src/components/header/AppHeaderTopBar.vue
@@ -4,24 +4,22 @@ import {
     onBeforeMount,
     onBeforeUnmount,
     onMounted,
-    ref,
-    watch,
 } from 'vue';
 import { useQuasar } from 'quasar';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { formatUnits } from 'ethers/lib/utils';
-import { useRoute, useRouter } from 'vue-router';
-import { TeloscanEVMChainSettings, evmSettings, useChainStore } from 'src/core';
+import { useRoute } from 'vue-router';
+import { useChainStore } from 'src/core';
 
 
 import AppHeaderWallet from 'components/header/AppHeaderWallet.vue';
 import OutlineButton from 'components/OutlineButton.vue';
 import AppSearch from 'components/AppSearch.vue';
-import { CURRENT_CONTEXT } from 'src/core/mocks';
+import { chains, multichainSelectedNetwork, switchChain } from 'src/lib/multichain-utils';
 
 const $route = useRoute();
-const $router = useRouter();
+
 const $q = useQuasar();
 const $store = useStore();
 const $i18n = useI18n();
@@ -90,57 +88,6 @@ function toggleDarkMode() {
     localStorage.setItem('darkModeEnabled', $q.dark.isActive.toString());
 }
 
-
-// Multichain
-interface ChainOption {
-    network: string;
-    settings: TeloscanEVMChainSettings;
-}
-
-const chains = [
-    {
-        network: 'telos-evm',
-        settings: evmSettings['telos-evm'],
-    },
-    {
-        network: 'telos-evm-testnet',
-        settings: evmSettings['telos-evm-testnet'],
-    },
-] as ChainOption[];
-
-const selectedNetwork = ref<ChainOption | undefined>(undefined);
-const switchChain = (network: ChainOption) => {
-    selectedNetwork.value = network;
-};
-
-onMounted(() => {
-    const defaultNetwork = Object.keys(evmSettings)[0];
-    let network = new URLSearchParams(window.location.search).get('network');
-    if (network) {
-        const exists = Object.keys(evmSettings).some(key => evmSettings[key].getNetwork() === network);
-        if (!exists) {
-            network = defaultNetwork;
-        }
-    } else {
-        network = defaultNetwork;
-    }
-    $router.replace({ query: { ...$route.query, network } });
-    selectedNetwork.value = chains.find(chain => chain.network === network);
-});
-
-watch(selectedNetwork, () => {
-    if (selectedNetwork.value) {
-        chainStore.setChain(CURRENT_CONTEXT, selectedNetwork.value.network);
-        // replace the url to reflect the network
-        $router.replace({ query: { ...$route.query, network: selectedNetwork.value.network } });
-    }
-});
-
-watch(() => chainStore.currentChain, (currentChain) => {
-    selectedNetwork.value = chains.find(chain => chain.network === currentChain.settings.getNetwork());
-});
-
-
 </script>
 
 <template>
@@ -189,28 +136,6 @@ watch(() => chainStore.currentChain, (currentChain) => {
 
                 <q-menu>
                     <q-list>
-                        <!--q-item
-                            clickable
-                            role="link"
-                            @click="goToTeloscanMainnet"
-                            @keydown.enter="goToTeloscanMainnet"
-                        >
-                            <q-item-section :class="chainStore.currentChain.settings.isTestnet() ? '' : 'text-primary'">
-                                Telos Mainnet
-                            </q-item-section>
-                        </q-item>
-                        <q-separator />
-                        <q-item
-                            clickable
-                            role="link"
-                            @click="goToTeloscanTestnet"
-                            @keydown.enter="goToTeloscanTestnet"
-                        >
-                            <q-item-section :class="chainStore.currentChain.settings.isTestnet() ? 'text-primary' : ''">
-                                Telos Testnet
-                            </q-item-section>
-                        </q-item-->
-
                         <template v-for="chain in chains" :key="chain.network">
                             <q-separator/>
                             <q-item
@@ -219,7 +144,7 @@ watch(() => chainStore.currentChain, (currentChain) => {
                                 @click="switchChain(chain)"
                                 @keydown.enter="switchChain(chain)"
                             >
-                                <q-item-section :class="selectedNetwork?.network === chain.network ? 'text-primary' : ''">
+                                <q-item-section :class="multichainSelectedNetwork?.network === chain.network ? 'text-primary' : ''">
                                     <div class="c-header-top-bar__chain-option">
                                         <img :src="chain.settings.getSmallLogoPath()" height="24" width="24">
                                         <span>{{  chain.settings.getDisplay() }}</span>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 4ac0bfad7..9940f6ce3 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -6,7 +6,7 @@ import {
     ref,
     watch,
 } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { setCssVar, useQuasar } from 'quasar';
 
 import AppHeader from 'components/header/AppHeader.vue';
@@ -15,8 +15,11 @@ import FooterMain from 'components/FooterMain.vue';
 import { getBrowserName } from 'src/lib/utils';
 import { useChainStore } from 'src/core';
 import { Themes } from 'src/core/types';
+import { initMultichain } from 'src/lib/multichain-utils';
 
 const $route = useRoute();
+const $router = useRouter();
+
 const $q = useQuasar();
 
 const scrollY = ref(0);
@@ -88,6 +91,11 @@ watch(() => $route.query.network, () => {
 watch(() => $q.dark.isActive, () => {
     setTheme();
 });
+
+onMounted(() => {
+    initMultichain($router, $route);
+});
+
 </script>
 
 <template>
diff --git a/src/lib/multichain-utils.ts b/src/lib/multichain-utils.ts
new file mode 100644
index 000000000..2eade889d
--- /dev/null
+++ b/src/lib/multichain-utils.ts
@@ -0,0 +1,99 @@
+import { evmSettings, TeloscanEVMChainSettings, useChainStore } from 'src/core';
+import { CURRENT_CONTEXT } from 'src/core/mocks';
+import { ref, watch } from 'vue';
+import { RouteLocationNormalizedLoaded, Router } from 'vue-router';
+
+export interface ChainOption {
+    network: string;
+    settings: TeloscanEVMChainSettings;
+}
+
+export const chains = [
+    {
+        network: 'telos-evm',
+        settings: evmSettings['telos-evm'],
+    },
+    {
+        network: 'telos-evm-testnet',
+        settings: evmSettings['telos-evm-testnet'],
+    },
+] as ChainOption[];
+
+console.log('process.env.NETWORK_EVM_NAME:', process.env.NETWORK_EVM_NAME); // FIXME: remove
+
+export const multichainSelectedNetwork = ref<ChainOption | undefined>(chains.find(chain => chain.network === process.env.NETWORK_EVM_NAME));
+
+export const switchChain = (chain: ChainOption) => {
+    console.log('Multichain switchChain()', { chain });
+    multichainSelectedNetwork.value = chain;
+    updateSelectedNetworkFromUserChoise();
+};
+
+const quasar = {
+    $router: null as never as Router,
+    $route: null as never as RouteLocationNormalizedLoaded,
+};
+
+export function initMultichain($router: Router, $route: RouteLocationNormalizedLoaded) {
+    quasar.$router = $router;
+    quasar.$route = $route;
+    console.log('Multichain initMultichain()');
+    const defaultNetwork = Object.keys(evmSettings)[0];
+    let network = new URLSearchParams(window.location.search).get('network');
+    if (network) {
+        const exists = Object.keys(evmSettings).some(key => evmSettings[key].getNetwork() === network);
+        if (!exists) {
+            network = defaultNetwork;
+        }
+    } else {
+        network = defaultNetwork;
+    }
+    quasar.$router.replace({ query: { ...quasar.$route.query, network } });
+    multichainSelectedNetwork.value = chains.find(chain => chain.network === network);
+}
+
+const chainStore = useChainStore();
+
+async function updateSelectedNetworkFromUrl() {
+    console.log('Multichain updateSelectedNetworkFromUrl()');
+
+    const network = new URLSearchParams(window.location.search).get('network');
+    if (network) {
+        const exists = Object.keys(evmSettings).some(key => evmSettings[key].getNetwork() === network);
+        if (exists) {
+            multichainSelectedNetwork.value = chains.find(chain => chain.network === network);
+        } else {
+            console.error('Multichain updateSelectedNetworkFromUrl() invalid network', { network });
+        }
+    }
+}
+
+async function updateSelectedNetworkFromUserChoise() {
+    console.log('Multichain updateSelectedNetworkFromChainStore()');
+    const network = multichainSelectedNetwork?.value?.network;
+    if (typeof network === 'string') {
+        chainStore.setChain(CURRENT_CONTEXT, network);
+        quasar.$router.replace({ query: { ...quasar.$route.query, network } });
+        return;
+    }
+    console.error('Multichain updateSelectedNetworkFromChainStore() invalid network', { network });
+}
+
+
+// watch(multichainSelectedNetwork, () => {
+//     console.log('Multichain watch multichainSelectedNetwork', { value: multichainSelectedNetwork.value, useRouter: useRouter() });
+//     if (multichainSelectedNetwork.value) {
+//         chainStore.setChain(CURRENT_CONTEXT, multichainSelectedNetwork.value.network);
+//         // replace the url to reflect the network
+//         const $route = useRoute();
+//         useRouter().replace({ query: { ...$route.query, network: multichainSelectedNetwork.value.network } });
+//     }
+// });
+//
+// watch(() => chainStore.currentChain, (currentChain) => {
+//     console.log('Multichain watch chainStore.currentChain', { network: currentChain.settings.getNetwork(), currentChain });
+//     multichainSelectedNetwork.value = chains.find(chain => chain.network === currentChain.settings.getNetwork());
+// });
+
+// watch(() => multichainSelectedNetwork, () => updateSelectedNetworkFromUserChoise());
+watch(() => window.location.search, () => updateSelectedNetworkFromUrl());

From 6f8f5c8f3d691bd78fa0e05e6eade9475145b8e7 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Wed, 11 Dec 2024 16:55:12 -0300
Subject: [PATCH 3/3] big merge back to "redirect to network website" menu-link
 (but without rolling all back)

---
 src/boot/core.ts            |  3 ++-
 src/lib/multichain-utils.ts | 48 ++++++++++++++-----------------------
 2 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/src/boot/core.ts b/src/boot/core.ts
index d49ddb102..431a12c9a 100644
--- a/src/boot/core.ts
+++ b/src/boot/core.ts
@@ -6,7 +6,8 @@ export default boot(({ app }) => {
     initCore(app);
 
     const defaultNetwork = Object.keys(evmSettings)[0];
-    let network = new URLSearchParams(window.location.search).get('network');
+    let network = new URLSearchParams(window.location.search).get('network') ?? process.env.NETWORK_EVM_NAME;
+    console.log('Multichain initMultichain()', { network, NETWORK_EVM_NAME: process.env.NETWORK_EVM_NAME });
     if (network) {
         const exists = Object.keys(evmSettings).some(key => evmSettings[key].getNetwork() === network);
         if (!exists) {
diff --git a/src/lib/multichain-utils.ts b/src/lib/multichain-utils.ts
index 2eade889d..f3c71e829 100644
--- a/src/lib/multichain-utils.ts
+++ b/src/lib/multichain-utils.ts
@@ -6,27 +6,32 @@ import { RouteLocationNormalizedLoaded, Router } from 'vue-router';
 export interface ChainOption {
     network: string;
     settings: TeloscanEVMChainSettings;
+    extern: boolean;
 }
 
 export const chains = [
     {
         network: 'telos-evm',
         settings: evmSettings['telos-evm'],
+        extern: true,
     },
     {
         network: 'telos-evm-testnet',
         settings: evmSettings['telos-evm-testnet'],
+        extern: true,
     },
 ] as ChainOption[];
 
-console.log('process.env.NETWORK_EVM_NAME:', process.env.NETWORK_EVM_NAME); // FIXME: remove
-
-export const multichainSelectedNetwork = ref<ChainOption | undefined>(chains.find(chain => chain.network === process.env.NETWORK_EVM_NAME));
+export const multichainSelectedNetwork = ref<ChainOption | undefined>(undefined);
 
 export const switchChain = (chain: ChainOption) => {
-    console.log('Multichain switchChain()', { chain });
-    multichainSelectedNetwork.value = chain;
-    updateSelectedNetworkFromUserChoise();
+    if (chain.extern) {
+        window.open(chain.settings.getExplorerUrl(), '_blank');
+        return;
+    } else {
+        multichainSelectedNetwork.value = chain;
+        updateSelectedNetworkFromUserChoise();
+    }
 };
 
 const quasar = {
@@ -37,9 +42,8 @@ const quasar = {
 export function initMultichain($router: Router, $route: RouteLocationNormalizedLoaded) {
     quasar.$router = $router;
     quasar.$route = $route;
-    console.log('Multichain initMultichain()');
     const defaultNetwork = Object.keys(evmSettings)[0];
-    let network = new URLSearchParams(window.location.search).get('network');
+    let network = new URLSearchParams(window.location.search).get('network') ?? process.env.NETWORK_EVM_NAME;
     if (network) {
         const exists = Object.keys(evmSettings).some(key => evmSettings[key].getNetwork() === network);
         if (!exists) {
@@ -48,16 +52,18 @@ export function initMultichain($router: Router, $route: RouteLocationNormalizedL
     } else {
         network = defaultNetwork;
     }
-    quasar.$router.replace({ query: { ...quasar.$route.query, network } });
+    if (process.env.NETWORK_EVM_NAME !== network) {
+        // only if different from default
+        quasar.$router.replace({ query: { ...quasar.$route.query, network } });
+    }
     multichainSelectedNetwork.value = chains.find(chain => chain.network === network);
 }
 
 const chainStore = useChainStore();
 
 async function updateSelectedNetworkFromUrl() {
-    console.log('Multichain updateSelectedNetworkFromUrl()');
 
-    const network = new URLSearchParams(window.location.search).get('network');
+    const network = new URLSearchParams(window.location.search).get('network') ?? process.env.NETWORK_EVM_NAME;
     if (network) {
         const exists = Object.keys(evmSettings).some(key => evmSettings[key].getNetwork() === network);
         if (exists) {
@@ -69,8 +75,7 @@ async function updateSelectedNetworkFromUrl() {
 }
 
 async function updateSelectedNetworkFromUserChoise() {
-    console.log('Multichain updateSelectedNetworkFromChainStore()');
-    const network = multichainSelectedNetwork?.value?.network;
+    const network = multichainSelectedNetwork?.value?.network ?? process.env.NETWORK_EVM_NAME;
     if (typeof network === 'string') {
         chainStore.setChain(CURRENT_CONTEXT, network);
         quasar.$router.replace({ query: { ...quasar.$route.query, network } });
@@ -79,21 +84,4 @@ async function updateSelectedNetworkFromUserChoise() {
     console.error('Multichain updateSelectedNetworkFromChainStore() invalid network', { network });
 }
 
-
-// watch(multichainSelectedNetwork, () => {
-//     console.log('Multichain watch multichainSelectedNetwork', { value: multichainSelectedNetwork.value, useRouter: useRouter() });
-//     if (multichainSelectedNetwork.value) {
-//         chainStore.setChain(CURRENT_CONTEXT, multichainSelectedNetwork.value.network);
-//         // replace the url to reflect the network
-//         const $route = useRoute();
-//         useRouter().replace({ query: { ...$route.query, network: multichainSelectedNetwork.value.network } });
-//     }
-// });
-//
-// watch(() => chainStore.currentChain, (currentChain) => {
-//     console.log('Multichain watch chainStore.currentChain', { network: currentChain.settings.getNetwork(), currentChain });
-//     multichainSelectedNetwork.value = chains.find(chain => chain.network === currentChain.settings.getNetwork());
-// });
-
-// watch(() => multichainSelectedNetwork, () => updateSelectedNetworkFromUserChoise());
 watch(() => window.location.search, () => updateSelectedNetworkFromUrl());