#915 | abstract the network configuration for easiest multichain support

env.js

@@ -10,18 +10,24 @@ const sharedEnv = {
     PROJECT_ID: '14ec76c44bae7d461fa0f5fd5f8a9da1',
 };
 
-const TESTNET = {
-    ...sharedEnv,
-    APP_NAME: 'Teloscan (testnet)',
-    NETWORK_EVM_NAME: 'telos-evm-testnet',
+const chains = {
+    testnet: {
+        ...sharedEnv,
+        APP_NAME: 'Teloscan (testnet)',
+        NETWORK_EVM_NAME: 'telos-evm-testnet',
+    },
+    mainnet: {
+        ...sharedEnv,
+        APP_NAME: 'Teloscan',
+        NETWORK_EVM_NAME: 'telos-evm',
+    },
+    zkevm_testnet: {
+        ...sharedEnv,
+        APP_NAME: 'Teloscan zkEVM (testnet)',
+        NETWORK_EVM_NAME: 'telos-zkevm-testnet',
+    },
 };
 
-const MAINNET = {
-    ...sharedEnv,
-    APP_NAME: 'Teloscan',
-    NETWORK_EVM_NAME: 'telos-evm',
-};
-
-const env = process.env.NETWORK === 'mainnet' ? MAINNET : TESTNET;
+const env = chains[process.env.NETWORK?.toLowerCase()] || chains.testnet;
 
 module.exports = env;

src/App.vue

@@ -6,7 +6,8 @@ import { useQuasar } from 'quasar';
 import moment from 'moment';
 
 import { getCore, useChainStore } from 'src/core';
-import { TELOS_NETWORK_NAMES } from 'src/core/mocks/chain-constants';
+
+import { TELOS_NETWORK_NAMES } from 'src/config/chains';
 import { providerManager } from 'src/boot/evm';
 import { useRoute } from 'vue-router';
 

src/components/header/AppHeaderBottomBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 
@@ -11,6 +11,7 @@ import { useChainStore } from 'src/core';
 const $q = useQuasar();
 const { t: $t } = useI18n();
 
+
 defineProps<{
     topBarHidden: boolean;
 }>();
@@ -27,8 +28,11 @@ watchEffect(() => {
 function scrollHandler(info: { direction: string; }) {
     menuBottomBarHidden.value = info.direction === 'down';
 }
+const settings = computed(() => useChainStore().currentChain.settings);
+
 </script>
 
+
 <template>
 <div
     :class="{
@@ -41,19 +45,15 @@ function scrollHandler(info: { direction: string; }) {
         <router-link to="/" class="c-header-bottom-bar__logo-container">
             <div class="c-header-bottom-bar__logo-image-container">
                 <img
+                    v-if="!$q.dark.isActive"
                     :alt="$t('components.header.telos_evm_logo_alt')"
-                    src="/branding/telos-scan.png"
-                    height="32"
+                    :src="settings.getThemes().light['title-image']"
+                >
+                <img
+                    v-if="-$q.dark.isActive"
+                    :alt="$t('components.header.telos_evm_logo_alt')"
+                    :src="settings.getThemes().dark['title-image']"
                 >
-            </div>
-
-            <div class="c-header-bottom-bar__logo-text-container">
-                <span class="c-header-bottom-bar__logo-text">
-                    Teloscan
-                </span>
-                <span v-if="useChainStore().currentChain.settings.isTestnet()" class="c-header-bottom-bar__testnet-indicator">
-                    Testnet
-                </span>
             </div>
         </router-link>
 

src/components/header/AppHeaderTopBar.vue

@@ -94,13 +94,13 @@ function toggleDarkMode() {
 <div class="c-header-top-bar">
     <div class="c-header-top-bar__inner-container">
         <div class="c-header-top-bar__left-container">
-            <div v-if="!chainStore.currentChain.settings.isTestnet()" class="text-caption q-mr-md">
+            <div v-if="chainStore.currentChain.settings.getHeaderIndicators().price" class="text-caption q-mr-md">
                 <span class="c-header-top-bar__grey-text">
                     {{ $t('components.header.system_token_price', { token: systemTokenSymbol }) }}
                 </span> ${{ tlosPrice }}
             </div>
 
-            <div v-if="!chainStore.currentChain.settings.isTestnet()" class="text-caption u-flex--center-y">
+            <div v-if="chainStore.currentChain.settings.getHeaderIndicators().gasPrice" class="text-caption u-flex--center-y">
                 <q-icon name="fas fa-gas-pump" class="c-header-top-bar__grey-text q-mr-xs" />
                 <span class="c-header-top-bar__grey-text">
                     {{ $t('components.header.gas') }}:

src/config/chains/index.ts

@@ -0,0 +1,2 @@
+export const TELOS_CHAIN_IDS = ['40', '41', '1310'];
+export const TELOS_NETWORK_NAMES = ['telos-evm', 'telos-evm-testnet', 'telos-zkevm-testnet'];