#928 | Customizing the browser tab title for each network

src/App.vue

@@ -82,10 +82,13 @@ onMounted(async () => {
         providerManager.setProvider(null);
     });
 
-    // if the network is testnet we include the word testnet in the title of the page
-    if (useChainStore().currentChain.settings.isTestnet()) {
+    if (useChainStore().currentChain.settings.getBranding().tab) {
+        document.title = useChainStore().currentChain.settings.getBranding().tab;
+    } else if (useChainStore().currentChain.settings.isTestnet()) {
+        // if the network is testnet we include the word testnet in the title of the page
         document.title = `${document.title} Testnet`;
     }
+
 });
 
 // Watch for changes in the route query to react when network changes

src/config/chains/telos-evm-testnet/index.ts

@@ -1,6 +1,6 @@
 import EVMChainSettings from 'src/core/chains/EVMChainSettings';
 import { RpcEndpoint } from 'universal-authenticator-library';
-import { FooterLinksConfig, HeaderIndicators, HeaderMenuConfig, NativeCurrencyAddress, NetworkConfig, PriceChartData, SocialLink, Themes, addressString } from 'src/core/types';
+import { BrandingType, FooterLinksConfig, HeaderIndicators, HeaderMenuConfig, NativeCurrencyAddress, NetworkConfig, PriceChartData, SocialLink, Themes, addressString } from 'src/core/types';
 import { TokenClass, TokenSourceInfo } from 'src/core/types';
 import { useUserStore } from 'src/core';
 import { getFiatPriceFromIndexer, getCoingeckoPriceChartData, getCoingeckoUsdPrice } from 'src/lib/price';
@@ -16,6 +16,7 @@ const config: NetworkConfig =
     'display': 'Telos EVM (Testnet)',
     'title': 'Telos EVM Testnet Explorer',
     'branding': {
+        'tab': 'Teloscan Testnet',
         'text': 'Teloscan',
         'icon': '/branding/teloscan-logo.png',
     },
@@ -249,7 +250,7 @@ export default class TelosEVM extends EVMChainSettings {
         return config.display;
     }
 
-    getBranding(): { text: string; icon: string } {
+    getBranding(): BrandingType{
         return config.branding;
     }
 

src/config/chains/telos-evm/index.ts

@@ -1,6 +1,6 @@
 import EVMChainSettings from 'src/core/chains/EVMChainSettings';
 import { RpcEndpoint } from 'universal-authenticator-library';
-import { FooterLinksConfig, HeaderIndicators, HeaderMenuConfig, NativeCurrencyAddress, NetworkConfig, PriceChartData, SocialLink, Themes, addressString } from 'src/core/types';
+import { BrandingType, FooterLinksConfig, HeaderIndicators, HeaderMenuConfig, NativeCurrencyAddress, NetworkConfig, PriceChartData, SocialLink, Themes, addressString } from 'src/core/types';
 import { TokenClass, TokenSourceInfo } from 'src/core/types';
 import { useUserStore } from 'src/core';
 import { getFiatPriceFromIndexer, getCoingeckoPriceChartData, getCoingeckoUsdPrice } from 'src/lib/price';
@@ -16,6 +16,7 @@ const config: NetworkConfig =
     'display': 'Telos EVM',
     'title': 'Telos EVM Explorer',
     'branding': {
+        'tab': 'Teloscan',
         'text': 'Teloscan',
         'icon': '/branding/teloscan-logo.png',
     },
@@ -302,7 +303,7 @@ export default class TelosEVM extends EVMChainSettings {
         return config.display;
     }
 
-    getBranding(): { text: string; icon: string } {
+    getBranding(): BrandingType {
         return config.branding;
     }
 

src/config/chains/telos-zkevm-testnet/index.ts

@@ -1,6 +1,6 @@
 import EVMChainSettings from 'src/core/chains/EVMChainSettings';
 import { RpcEndpoint } from 'universal-authenticator-library';
-import { FooterLinksConfig, HeaderIndicators, HeaderMenuConfig, NativeCurrencyAddress, NetworkConfig, PriceChartData, SocialLink, Themes, addressString } from 'src/core/types';
+import { BrandingType, FooterLinksConfig, HeaderIndicators, HeaderMenuConfig, NativeCurrencyAddress, NetworkConfig, PriceChartData, SocialLink, Themes, addressString } from 'src/core/types';
 import { TokenClass, TokenSourceInfo } from 'src/core/types';
 import { useUserStore } from 'src/core';
 import { getFiatPriceFromIndexer, getCoingeckoPriceChartData, getCoingeckoUsdPrice } from 'src/lib/price';
@@ -16,6 +16,7 @@ const config: NetworkConfig =
     'display': 'Telos zkEVM (Testnet)',
     'title': 'Telos zkEVM Testnet Explorer',
     'branding': {
+        'tab': 'Teloscan zkEVM Testnet',
         'text': 'Telos zkEVM',
         'icon': '/branding/teloscan-logo.png',
     },
@@ -251,7 +252,7 @@ export default class TelosZkEVM extends EVMChainSettings {
         return config.display;
     }
 
-    getBranding(): { text: string; icon: string } {
+    getBranding(): BrandingType {
         return config.branding;
     }
 

src/core/chains/EVMChainSettings.ts

@@ -20,6 +20,7 @@ import {
     addressString,
     IndexerTransfersFilter,
     IndexerAccountTransfersResponse,
+    BrandingType,
 } from 'src/core/types';
 import EvmContract from 'src/core/stores/utils/contracts/EvmContract';
 import { ethers } from 'ethers';
@@ -294,7 +295,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
     abstract isTestnet(): boolean;
     abstract getChainId(): string;
     abstract getDisplay(): string;
-    abstract getBranding(): { text: string; icon: string };
+    abstract getBranding(): BrandingType;
     abstract getHyperionEndpoint(): string;
     abstract getRPCEndpoint(): RpcEndpoint;
     abstract getApiEndpoint(): string;

src/core/mocks/ChainStore.ts

@@ -4,7 +4,7 @@
 declare const fathom: { trackEvent: (eventName: string) => void };
 
 import { RpcEndpoint, UAL } from 'universal-authenticator-library';
-import { TokenClass, Theme, Themes, SocialLink, FooterLinksConfig, HeaderMenuConfig, HeaderIndicators } from 'src/core/types';
+import { TokenClass, Theme, Themes, SocialLink, FooterLinksConfig, HeaderMenuConfig, HeaderIndicators, BrandingType } from 'src/core/types';
 import TelosEVM from 'src/config/chains/telos-evm';
 import TelosEVMTestnet from 'src/config/chains/telos-evm-testnet';
 import { ethers } from 'ethers';
@@ -18,7 +18,7 @@ export interface TeloscanEVMChainSettings {
     getWrappedSystemToken: () => TokenClass;
     getChainId: () => string;
     getDisplay: () => string;
-    getBranding: () => { icon: string; text: string };
+    getBranding: () => BrandingType;
     getApplicationTitle: () => string;
     trackAnalyticsEvent: (name: string) => void;
     getRPCEndpoint: () => RpcEndpoint;

src/core/types/ChainSettings.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import { RpcEndpoint } from 'universal-authenticator-library';
-import { PriceChartData, TokenClass } from 'src/core/types';
+import { BrandingType, PriceChartData, TokenClass } from 'src/core/types';
 
 export interface ChainSettings {
     init(): Promise<void>;
@@ -10,7 +10,7 @@ export interface ChainSettings {
     getSystemToken(): TokenClass;
     getTokenList(): Promise<TokenClass[]>;
     getDisplay(): string;
-    getBranding(): { text: string; icon: string };
+    getBranding(): BrandingType;
     getSmallLogoPath(): string;
     getLargeLogoPath(): string;
     getChainId(): string;

src/core/types/NetworkConfig.ts

@@ -12,6 +12,7 @@ export interface NetworkConfig {
 
     // App header branding name
     branding: {
+        tab: string;
         icon: string;
         text: string;
     };

src/core/types/Theme.ts

@@ -52,3 +52,9 @@ export interface HeaderMenuConfig {
   entries: HeaderMenuEntry[];
 }
 
+export interface BrandingType {
+  text: string,
+  icon: string,
+  tab: string,
+}
+