UX: Updated Custom network displayed for selectable in network selection

app/scripts/controllers/network-order.ts

@@ -15,11 +15,15 @@ const controllerName = 'NetworkOrderController';
 /**
  * The network ID of a network.
  */
-export type NetworkId = string;
+
+export type NetworksInfo = {
+  networkId: string;
+  networkRpcUrl: string;
+};
 
 // State shape for NetworkOrderController
 export type NetworkOrderControllerState = {
-  orderedNetworkList: NetworkId[];
+  orderedNetworkList: NetworksInfo[];
 };
 
 // Describes the structure of a state change event
@@ -48,7 +52,7 @@ export type NetworkOrderControllerMessenger = RestrictedControllerMessenger<
 >;
 
 // Default state for the controller
-const defaultState = {
+const defaultState: NetworkOrderControllerState = {
   orderedNetworkList: [],
 };
 
@@ -116,17 +120,40 @@ export class NetworkOrderController extends BaseController<
     const combinedNetworks = [...MAINNET_CHAINS, ...networkConfigurations];
 
     // Extract unique chainIds from the combined networks
-    const uniqueChainIds = combinedNetworks.map((item) => item.chainId);
+    const uniqueChainIds = combinedNetworks.map((item) => ({
+      networkId: item.chainId,
+      networkRpcUrl: item.rpcUrl,
+    }));
+
+    // Arrays to store reordered and new unique chainIds
+    let reorderedNetworks: NetworksInfo[] = [];
+    const newUniqueNetworks: NetworksInfo[] = [];
+
+    // Iterate through uniqueChainIds to reorder existing elements
+    uniqueChainIds.forEach((newItem) => {
+      const existingIndex = this.state.orderedNetworkList.findIndex(
+        (item) =>
+          item.networkId === newItem.networkId &&
+          item.networkRpcUrl === newItem.networkRpcUrl,
+      );
+      // eslint-disable-next-line no-negated-condition
+      if (existingIndex !== -1) {
+        // Reorder existing element
+        reorderedNetworks[existingIndex] = newItem;
+      } else {
+        // Add new unique element
+        newUniqueNetworks.push(newItem);
+      }
+    });
+
+    // Filter out null values and concatenate reordered and new unique networks
+    reorderedNetworks = reorderedNetworks
+      .filter((item) => Boolean(item))
+      .concat(newUniqueNetworks);
 
     // Update the state with the new networks list
     this.update((state) => {
-      // Combine existing networks with unique chainIds, excluding duplicates
-      state.orderedNetworkList = [
-        ...state.orderedNetworkList,
-        ...uniqueChainIds.filter(
-          (id) => !state.orderedNetworkList.includes(id),
-        ),
-      ];
+      state.orderedNetworkList = reorderedNetworks;
     });
   }
 

shared/constants/network.ts

@@ -377,8 +377,8 @@ export const TEST_CHAINS = [
 ];
 
 export const MAINNET_CHAINS = [
-  { chainId: CHAIN_IDS.MAINNET },
-  { chainId: CHAIN_IDS.LINEA_MAINNET },
+  { chainId: CHAIN_IDS.MAINNET, rpcUrl: MAINNET_RPC_URL },
+  { chainId: CHAIN_IDS.LINEA_MAINNET, rpcUrl: LINEA_MAINNET_RPC_URL },
 ];
 
 const typedCapitalize = <K extends string>(k: K): Capitalize<K> =>

test/e2e/tests/state-snapshots/errors-after-init-opt-in-background-state.json

@@ -114,7 +114,7 @@
     "networkConfigurations": "object"
   },
   "NetworkOrderController": {
-    "orderedNetworkList": { "0": "string", "1": "string", "2": "string" }
+    "orderedNetworkList": { "0": "object", "1": "object", "2": "object" }
   },
   "NftController": {
     "allNftContracts": "object",

test/e2e/tests/state-snapshots/errors-after-init-opt-in-ui-state.json

@@ -134,7 +134,7 @@
     "permissionActivityLog": "object",
     "subjectMetadata": "object",
     "announcements": "object",
-    "orderedNetworkList": { "0": "string", "1": "string", "2": "string" },
+    "orderedNetworkList": { "0": "object", "1": "object", "2": "object" },
     "pinnedAccountList": {},
     "hiddenAccountList": {},
     "gasFeeEstimates": {},

ui/components/multichain/network-list-menu/network-list-menu.js

@@ -96,18 +96,25 @@ export const NetworkListMenu = ({ onClose }) => {
       return nonTestNetworks;
     }
 
-    // Reorder nonTestNetworks based on the order of chainIds in orderedNetworksList
-    const sortedNetworkList = orderedNetworksList
-      .map((chainId) =>
-        nonTestNetworks.find((network) => network.chainId === chainId),
-      )
-      .filter(Boolean);
-
-    return sortedNetworkList;
+    // Create a mapping of chainId to index in orderedNetworksList
+    const orderedIndexMap = {};
+    orderedNetworksList.forEach((network, index) => {
+      orderedIndexMap[`${network.networkId}_${network.networkRpcUrl}`] = index;
+    });
+
+    // Sort nonTestNetworks based on the order in orderedNetworksList
+    const sortedNonTestNetworks = nonTestNetworks.sort((a, b) => {
+      const keyA = `${a.chainId}_${a.rpcUrl}`;
+      const keyB = `${b.chainId}_${b.rpcUrl}`;
+      return orderedIndexMap[keyA] - orderedIndexMap[keyB];
+    });
+
+    return sortedNonTestNetworks;
   };
 
   const networksList = newOrderNetworks();
   const [items, setItems] = useState([...networksList]);
+
   useEffect(() => {
     if (currentlyOnTestNetwork) {
       dispatch(setShowTestNetworks(currentlyOnTestNetwork));
@@ -124,13 +131,20 @@ export const NetworkListMenu = ({ onClose }) => {
     if (!result.destination) {
       return;
     }
+
     const newItems = [...items];
     const [removed] = newItems.splice(result.source.index, 1);
     newItems.splice(result.destination.index, 0, removed);
-    setItems(newItems);
-    const orderedArray = newItems.map((obj) => obj.chainId);
+
+    // Convert the updated array back to NetworksInfo format
+    const orderedArray = newItems.map((obj) => ({
+      networkId: obj.chainId, // Assuming chainId is the networkId
+      networkRpcUrl: obj.rpcUrl,
+    }));
 
     dispatch(updateNetworksList(orderedArray));
+
+    setItems(newItems);
   };
 
   let searchResults =
@@ -161,7 +175,9 @@ export const NetworkListMenu = ({ onClose }) => {
         return null;
       }
 
-      const isCurrentNetwork = currentNetwork.id === network.id;
+      const isCurrentNetwork =
+        currentNetwork.id === network.id &&
+        currentNetwork.rpcUrl === network.rpcUrl;
 
       const canDeleteNetwork =
         isUnlocked && !isCurrentNetwork && network.removable;