From f25141b870261813a597a0fb68222ea04b9135f3 Mon Sep 17 00:00:00 2001 From: Viterbo Date: Wed, 8 Jan 2025 12:21:57 -0300 Subject: [PATCH] customizing the browser tab title for each network --- src/App.vue | 7 +++++-- src/config/chains/telos-evm-testnet/index.ts | 5 +++-- src/config/chains/telos-evm/index.ts | 5 +++-- src/config/chains/telos-zkevm-testnet/index.ts | 5 +++-- src/core/chains/EVMChainSettings.ts | 3 ++- src/core/mocks/ChainStore.ts | 4 ++-- src/core/types/ChainSettings.ts | 4 ++-- src/core/types/NetworkConfig.ts | 1 + src/core/types/Theme.ts | 6 ++++++ 9 files changed, 27 insertions(+), 13 deletions(-) diff --git a/src/App.vue b/src/App.vue index 69ec64ff..af5c0324 100644 --- a/src/App.vue +++ b/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 diff --git a/src/config/chains/telos-evm-testnet/index.ts b/src/config/chains/telos-evm-testnet/index.ts index a5177a7b..63b4a977 100644 --- a/src/config/chains/telos-evm-testnet/index.ts +++ b/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; } diff --git a/src/config/chains/telos-evm/index.ts b/src/config/chains/telos-evm/index.ts index 8211d75b..7736b2c2 100644 --- a/src/config/chains/telos-evm/index.ts +++ b/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; } diff --git a/src/config/chains/telos-zkevm-testnet/index.ts b/src/config/chains/telos-zkevm-testnet/index.ts index 813e1d0a..daecca1a 100644 --- a/src/config/chains/telos-zkevm-testnet/index.ts +++ b/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; } diff --git a/src/core/chains/EVMChainSettings.ts b/src/core/chains/EVMChainSettings.ts index eb35b5db..759bc4d3 100644 --- a/src/core/chains/EVMChainSettings.ts +++ b/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; diff --git a/src/core/mocks/ChainStore.ts b/src/core/mocks/ChainStore.ts index a681d1b0..43a87abc 100644 --- a/src/core/mocks/ChainStore.ts +++ b/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; diff --git a/src/core/types/ChainSettings.ts b/src/core/types/ChainSettings.ts index c44213e6..e234888b 100644 --- a/src/core/types/ChainSettings.ts +++ b/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; @@ -10,7 +10,7 @@ export interface ChainSettings { getSystemToken(): TokenClass; getTokenList(): Promise; getDisplay(): string; - getBranding(): { text: string; icon: string }; + getBranding(): BrandingType; getSmallLogoPath(): string; getLargeLogoPath(): string; getChainId(): string; diff --git a/src/core/types/NetworkConfig.ts b/src/core/types/NetworkConfig.ts index 30c4cf58..3a69b8e1 100644 --- a/src/core/types/NetworkConfig.ts +++ b/src/core/types/NetworkConfig.ts @@ -12,6 +12,7 @@ export interface NetworkConfig { // App header branding name branding: { + tab: string; icon: string; text: string; }; diff --git a/src/core/types/Theme.ts b/src/core/types/Theme.ts index 080c9c2a..e0154596 100644 --- a/src/core/types/Theme.ts +++ b/src/core/types/Theme.ts @@ -52,3 +52,9 @@ export interface HeaderMenuConfig { entries: HeaderMenuEntry[]; } +export interface BrandingType { + text: string, + icon: string, + tab: string, +} +