UX: Show Network Logo Based on Chain ID

ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap

@@ -370,7 +370,11 @@ exports[`Security Tab should match snapshot 1`] = `
             <div
               class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
-              C
+              <img
+                alt="Custom Mainnet RPC logo"
+                class="mm-avatar-network__network-image"
+                src="./images/eth_logo.png"
+              />
             </div>
             <p
               class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default mm-box--background-color-transparent"

ui/selectors/selectors.js

@@ -31,6 +31,7 @@ import {
   LINEA_GOERLI_TOKEN_IMAGE_URL,
   LINEA_MAINNET_DISPLAY_NAME,
   LINEA_MAINNET_TOKEN_IMAGE_URL,
+  CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
 } from '../../shared/constants/network';
 import {
   WebHIDConnectedStatuses,
@@ -1333,7 +1334,18 @@ export function getNonTestNetworks(state) {
     // Custom networks added by the user
     ...Object.values(networkConfigurations)
       .filter(({ chainId }) => ![CHAIN_IDS.LOCALHOST].includes(chainId))
-      .map((network) => ({ ...network, removable: true })),
+      .map((network) => ({
+        ...network,
+        rpcPrefs: {
+          ...network.rpcPrefs,
+          // Provide an image based on chainID if a network
+          // has been added without an image
+          imageUrl:
+            network?.rpcPrefs?.imageUrl ??
+            CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[network.chainId],
+        },
+        removable: true,
+      })),
   ];
 }
 

ui/selectors/selectors.test.js

@@ -5,6 +5,7 @@ import {
   CHAIN_IDS,
   LOCALHOST_DISPLAY_NAME,
   NETWORK_TYPES,
+  OPTIMISM_DISPLAY_NAME,
 } from '../../shared/constants/network';
 import * as selectors from './selectors';
 
@@ -342,6 +343,28 @@ describe('Selectors', () => {
       );
       expect(customNetwork.removable).toBe(true);
     });
+
+    it('properly proposes a known network image when not provided by adding function', () => {
+      const networks = selectors.getAllNetworks({
+        metamask: {
+          preferences: {
+            showTestNetworks: true,
+          },
+          networkConfigurations: {
+            'some-config-name': {
+              chainId: CHAIN_IDS.OPTIMISM,
+              nickname: OPTIMISM_DISPLAY_NAME,
+              id: 'some-config-name',
+            },
+          },
+        },
+      });
+
+      const optimismConfig = networks.find(
+        ({ chainId }) => chainId === CHAIN_IDS.OPTIMISM,
+      );
+      expect(optimismConfig.rpcPrefs.imageUrl).toBe('./images/optimism.svg');
+    });
   });
 
   describe('#getCurrentNetwork', () => {