feat(frontend): adapt pageToken to match network too (#4168)

# Motivation

We will start to have the same token on different networks. For example
USDC both on Ethereum and Solana. To avoid any mistake or mismatch, we
change the store `pageToken` to compare the network name too.

# Changes

Add network name logic in `pageToken` based on store `routeNetwork`.

# Tests

Modified existing tests.

src/frontend/src/lib/components/hero/HeroContent.svelte

@@ -63,7 +63,7 @@
 
 <div
 	class="flex h-full w-full flex-col content-center items-center justify-center rounded-[40px] bg-brand-primary bg-gradient-to-b from-brand-primary via-absolute-blue bg-size-200 bg-pos-0 p-6 text-center text-white transition-all duration-500 ease-in-out"
-	class:bg-pos-100={$networkICP || $networkBitcoin || $networkEthereum || networkSolana}
+	class:bg-pos-100={$networkICP || $networkBitcoin || $networkEthereum || $networkSolana}
 	class:via-interdimensional-blue={$networkICP}
 	class:to-chinese-purple={$networkICP}
 	class:via-beer={$networkBitcoin}

src/frontend/src/lib/derived/page-token.derived.ts

@@ -3,7 +3,7 @@ import { ETHEREUM_TOKEN, SEPOLIA_TOKEN } from '$env/tokens/tokens.eth.env';
 import { ICP_TOKEN } from '$env/tokens/tokens.icp.env';
 import { enabledErc20Tokens } from '$eth/derived/erc20.derived';
 import { enabledIcrcTokens } from '$icp/derived/icrc.derived';
-import { routeToken } from '$lib/derived/nav.derived';
+import { routeNetwork, routeToken } from '$lib/derived/nav.derived';
 import type { OptionToken } from '$lib/types/token';
 import { enabledSolanaTokens } from '$sol/derived/tokens.derived';
 import { isNullish } from '@dfinity/utils';
@@ -13,8 +13,22 @@ import { derived, type Readable } from 'svelte/store';
  * A token derived from the route URL - i.e. if the URL contains a query parameters "token", then this store tries to derive the object from it.
  */
 export const pageToken: Readable<OptionToken> = derived(
-	[routeToken, enabledBitcoinTokens, enabledSolanaTokens, enabledErc20Tokens, enabledIcrcTokens],
-	([$routeToken, $enabledBitcoinTokens, $enabledSolanaTokens, $erc20Tokens, $icrcTokens]) => {
+	[
+		routeToken,
+		routeNetwork,
+		enabledBitcoinTokens,
+		enabledSolanaTokens,
+		enabledErc20Tokens,
+		enabledIcrcTokens
+	],
+	([
+		$routeToken,
+		$routeNetwork,
+		$enabledBitcoinTokens,
+		$enabledSolanaTokens,
+		$erc20Tokens,
+		$icrcTokens
+	]) => {
 		if (isNullish($routeToken)) {
 			return undefined;
 		}
@@ -30,6 +44,9 @@ export const pageToken: Readable<OptionToken> = derived(
 			...$icrcTokens,
 			ETHEREUM_TOKEN,
 			SEPOLIA_TOKEN
-		].find(({ name }) => name === $routeToken);
+		].find(
+			({ name, network: { name: networkName } }) =>
+				name === $routeToken && networkName === $routeNetwork
+		);
 	}
 );

src/frontend/src/tests/lib/derived/page-token.derived.spec.ts

@@ -32,22 +32,22 @@ describe('page-token.derived', () => {
 		['Sepolia token', SEPOLIA_TOKEN]
 		// eslint-disable-next-line local-rules/prefer-object-params
 	])('should find %s', (_, token) => {
-		mockPage.mock({ token: token.name });
+		mockPage.mock({ token: token.name, network: token.network.name });
 		expect(get(pageToken)).toBe(token);
 	});
 
 	it('should find ERC20 token', () => {
 		const mockToken = { ...mockValidErc20Token, enabled: true };
 		erc20UserTokensStore.setAll([{ data: mockToken, certified: true }]);
-		mockPage.mock({ token: mockToken.name });
+		mockPage.mock({ token: mockToken.name, network: mockToken.network.name });
 
 		expect(get(pageToken)?.symbol).toBe(mockToken.symbol);
 	});
 
 	it('should find ICRC token', () => {
 		const mockToken = { ...mockIcrcCustomToken, enabled: true };
 		icrcCustomTokensStore.setAll([{ data: mockToken, certified: true }]);
-		mockPage.mock({ token: mockToken.name });
+		mockPage.mock({ token: mockToken.name, network: mockToken.network.name });
 
 		expect(get(pageToken)?.symbol).toBe(mockToken.symbol);
 	});
@@ -56,4 +56,18 @@ describe('page-token.derived', () => {
 		mockPage.mock({ token: 'non-existent-token' });
 		expect(get(pageToken)).toBeUndefined();
 	});
+
+	it('should return undefined when token name matches but network does not', () => {
+		const mockToken = { ...mockValidErc20Token, enabled: true };
+		mockPage.mock({ token: mockToken.name, network: 'non-existent-network' });
+
+		expect(get(pageToken)).toBeUndefined();
+	});
+
+	it('should return undefined when token network matches but name does not', () => {
+		const mockToken = { ...mockValidErc20Token, enabled: true };
+		mockPage.mock({ token: 'non-existent-token', network: mockToken.network.name });
+
+		expect(get(pageToken)).toBeUndefined();
+	});
 });