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

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)`);
       });
     });
   }

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',

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',

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',

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',

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[] {

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);