From 8f3ad81d6f1bfa3bb129548e43a21869c13bb1df Mon Sep 17 00:00:00 2001 From: Arjun Porwal <65214523+ap211unitech@users.noreply.github.com> Date: Tue, 16 Sep 2025 22:13:04 +0530 Subject: [PATCH] Modify chain names and order in the side menu (#11829) * fix: labels for chains * fix: swap first two items for group * feat: write to localStrage after reading to avoid redundancy * feat: check relay value exists in chains config * fix: tests --- .../apps-config/src/endpoints/index.spec.ts | 8 ++++---- .../src/endpoints/productionRelayKusama.ts | 6 +++--- .../src/endpoints/productionRelayPolkadot.ts | 6 +++--- .../src/endpoints/testingRelayPaseo.ts | 6 +++--- .../src/endpoints/testingRelayWestend.ts | 6 +++--- packages/apps/src/Endpoints/index.tsx | 11 ++++++++++- packages/apps/src/Endpoints/utils.ts | 18 ++++++++++++++++-- 7 files changed, 42 insertions(+), 19 deletions(-) diff --git a/packages/apps-config/src/endpoints/index.spec.ts b/packages/apps-config/src/endpoints/index.spec.ts index 0827accd37..13069bc9d5 100644 --- a/packages/apps-config/src/endpoints/index.spec.ts +++ b/packages/apps-config/src/endpoints/index.spec.ts @@ -142,10 +142,10 @@ describe('endpopints naming', (): void => { }); it(`[${key}] does not contain a relay name`, (): void => { - assert(!name.includes(' ') || !name.includes('Kusama'), `${name} should not contain "Kusama" (redundant)`); - assert(!name.includes(' ') || !name.includes('Polkadot'), `${name} should not contain "Polkadot" (redundant)`); - assert(!name.includes(' ') || !name.includes('Rococo'), `${name} should not contain "Rococo" (redundant)`); - assert(!name.includes(' ') || !name.includes('Westend'), `${name} should not contain "Westend" (redundant)`); + assert(name.includes('Kusama') ? true : !name.includes(' ') || !name.includes('Kusama'), `${name} should not contain "Kusama" (redundant)`); + assert(name.includes('Polkadot') ? true : !name.includes(' ') || !name.includes('Polkadot'), `${name} should not contain "Polkadot" (redundant)`); + assert(name.includes('Rococo') ? true : !name.includes(' ') || !name.includes('Rococo'), `${name} should not contain "Rococo" (redundant)`); + assert(name.includes('Westend') ? true : !name.includes(' ') || !name.includes('Westend'), `${name} should not contain "Westend" (redundant)`); }); }); } diff --git a/packages/apps-config/src/endpoints/productionRelayKusama.ts b/packages/apps-config/src/endpoints/productionRelayKusama.ts index 6abe52b297..e17de659e2 100644 --- a/packages/apps-config/src/endpoints/productionRelayKusama.ts +++ b/packages/apps-config/src/endpoints/productionRelayKusama.ts @@ -907,7 +907,7 @@ export const prodParasKusamaCommon: EndpointOption[] = [ }, relayName: 'kusama', teleport: [-1, 1002, 1005, 1001, 1004], - text: 'AssetHub', + text: 'Asset Hub', ui: { color: '#113911', logo: chainsAssethubKusamaSVG @@ -930,7 +930,7 @@ export const prodParasKusamaCommon: EndpointOption[] = [ }, relayName: 'kusama', teleport: [-1, 1000], - text: 'BridgeHub', + text: 'Bridge Hub', ui: { logo: nodesBridgeHubBlackSVG } @@ -1032,7 +1032,7 @@ export const prodRelayKusama: EndpointOption = { 'light client': 'light://substrate-connect/kusama' }, teleport: getTeleports(prodParasKusamaCommon), - text: 'Kusama', + text: 'Kusama Relay', ui: { color: '#000000', identityIcon: 'polkadot', diff --git a/packages/apps-config/src/endpoints/productionRelayPolkadot.ts b/packages/apps-config/src/endpoints/productionRelayPolkadot.ts index 1d78d055d3..519896febf 100644 --- a/packages/apps-config/src/endpoints/productionRelayPolkadot.ts +++ b/packages/apps-config/src/endpoints/productionRelayPolkadot.ts @@ -896,7 +896,7 @@ export const prodParasPolkadotCommon: EndpointOption[] = [ }, relayName: 'polkadot', teleport: [-1, 1002, 1001, 1005, 1004], - text: 'AssetHub', + text: 'Asset Hub', ui: { color: '#86e62a', logo: nodesAssetHubSVG @@ -919,7 +919,7 @@ export const prodParasPolkadotCommon: EndpointOption[] = [ }, relayName: 'polkadot', teleport: [-1, 1000], - text: 'BridgeHub', + text: 'Bridge Hub', ui: { logo: nodesBridgeHubSVG } @@ -1021,7 +1021,7 @@ export const prodRelayPolkadot: EndpointOption = { 'light client': 'light://substrate-connect/polkadot' }, teleport: getTeleports(prodParasPolkadotCommon), - text: 'Polkadot', + text: 'Polkadot Relay', ui: { color: '#e6007a', identityIcon: 'polkadot', diff --git a/packages/apps-config/src/endpoints/testingRelayPaseo.ts b/packages/apps-config/src/endpoints/testingRelayPaseo.ts index ec4d9180c0..7438c3a2e1 100644 --- a/packages/apps-config/src/endpoints/testingRelayPaseo.ts +++ b/packages/apps-config/src/endpoints/testingRelayPaseo.ts @@ -437,7 +437,7 @@ export const testParasPaseoCommon: EndpointOption[] = [ }, relayName: 'paseo', teleport: [-1, 1002, 1111], - text: 'AssetHub', + text: 'Asset Hub', ui: { color: '#77bb77', logo: nodesAssetHubSVG @@ -453,7 +453,7 @@ export const testParasPaseoCommon: EndpointOption[] = [ }, relayName: 'paseo', teleport: [-1, 1000], - text: 'BridgeHub', + text: 'Bridge Hub', ui: { color: '#AAADD7', logo: nodesBridgeHubSVG @@ -549,7 +549,7 @@ export const testRelayPaseo: EndpointOption = { // 'light client': 'light://substrate-connect/paseo' }, teleport: getTeleports(testParasPaseoCommon), - text: 'Paseo', + text: 'Paseo Relay', ui: { color: '#38393F', identityIcon: 'polkadot', diff --git a/packages/apps-config/src/endpoints/testingRelayWestend.ts b/packages/apps-config/src/endpoints/testingRelayWestend.ts index 25fd715b56..9e8bd6caed 100644 --- a/packages/apps-config/src/endpoints/testingRelayWestend.ts +++ b/packages/apps-config/src/endpoints/testingRelayWestend.ts @@ -138,7 +138,7 @@ export const testParasWestendCommon: EndpointOption[] = [ }, relayName: 'westend', teleport: [-1, 1002, 1001, 1005, 1004], - text: 'AssetHub', + text: 'Asset Hub', ui: { color: '#77bb77', logo: nodesAssetHubSVG @@ -156,7 +156,7 @@ export const testParasWestendCommon: EndpointOption[] = [ }, relayName: 'westend', teleport: [-1, 1000], - text: 'BridgeHub', + text: 'Bridge Hub', ui: { logo: nodesBridgeHubSVG } @@ -233,7 +233,7 @@ export const testRelayWestend: EndpointOption = { 'light client': 'light://substrate-connect/westend' }, teleport: getTeleports(testParasWestendCommon), - text: 'Westend', + text: 'Westend Relay', ui: { color: '#da68a7', identityIcon: 'polkadot', diff --git a/packages/apps/src/Endpoints/index.tsx b/packages/apps/src/Endpoints/index.tsx index eeb46b9427..e82c819444 100644 --- a/packages/apps/src/Endpoints/index.tsx +++ b/packages/apps/src/Endpoints/index.tsx @@ -48,7 +48,7 @@ function combineEndpoints (endpoints: LinkOption[]): Group[] { const favoriteChains = getFavoriteChains(); let favoriteGroupIndex = -1; - return endpoints.reduce((result: Group[], e): Group[] => { + const combinedEndpoints = endpoints.reduce((result: Group[], e): Group[] => { if (e.isHeader) { const isFavoriteHeader = typeof e.text === 'string' && e.text.includes('Favorite chains'); @@ -103,6 +103,15 @@ function combineEndpoints (endpoints: LinkOption[]): Group[] { return result; }, []); + + // Swap first two items in `networks` if first item is relay chain + combinedEndpoints.forEach((r) => { + if (r.networks.length >= 2 && r.networks[0].isRelay && r.header?.toString().includes('parachains')) { + [r.networks[0], r.networks[1]] = [r.networks[1], r.networks[0]]; + } + }); + + return combinedEndpoints; } function getCustomEndpoints (): string[] { diff --git a/packages/apps/src/Endpoints/utils.ts b/packages/apps/src/Endpoints/utils.ts index c37ddeeaae..4b0f113d32 100644 --- a/packages/apps/src/Endpoints/utils.ts +++ b/packages/apps/src/Endpoints/utils.ts @@ -3,7 +3,10 @@ import type { IFavoriteChainProps, IFavoriteChainsStorage } from './types.js'; +import { createWsEndpoints } from '@polkadot/apps-config'; + export const FAVORITE_CHAINS_KEY = 'polkadot-app-favorite-chains'; +const chainsConfig = createWsEndpoints((k, v) => v?.toString() || k); export const toggleFavoriteChain = ( chainInfo: IFavoriteChainProps @@ -59,7 +62,7 @@ export const getFavoriteChains = (): IFavoriteChainsStorage => { const result: IFavoriteChainsStorage = {}; - for (const [key, value] of Object.entries(parsed)) { + for (const [key, value] of Object.entries(parsed) as [string, IFavoriteChainsStorage[string]][]) { if (!Array.isArray(value)) { throw new Error(`Invalid value for key "${key}": not an array`); } @@ -76,9 +79,20 @@ export const getFavoriteChains = (): IFavoriteChainsStorage => { throw new Error(`Invalid entries under key "${key}"`); } - result[key] = value as IFavoriteChainsStorage[string]; + // Make sure key exists in chain config + if (chainsConfig.find((e) => e.text === key)) { + // Make sure "relay" value also exists in chain config + const matchingFavorites = value.filter((v) => v.relay === 'Unknown' ? true : !!chainsConfig.find((e) => e.text === v.relay)); + + if (matchingFavorites.length > 0) { + result[key] = matchingFavorites; + } + } } + // Set filtered result to localStorage + localStorage.setItem(FAVORITE_CHAINS_KEY, JSON.stringify(result)); + return result; } catch (e) { console.error('Failed to parse favorite chains:', e);