diff --git a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
index 147715ddbc68..d83b52f9ff2c 100644
--- a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
+++ b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
@@ -315,7 +315,11 @@ exports[`Security Tab should match snapshot 1`] = `
- C
+
![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,
+ })),
];
}
diff --git a/ui/selectors/selectors.test.js b/ui/selectors/selectors.test.js
index b2d62666e286..bfa8c412f2c6 100644
--- a/ui/selectors/selectors.test.js
+++ b/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', () => {