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] 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 d2b7fd62..79c2cf83 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 7e02acd4..a082b714 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 4ac0bfad..9940f6ce 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 00000000..2eade889
--- /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());