From 55475df0b3b616f27f4ef4df9b0156acdf370f0e Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Fri, 22 Sep 2023 16:25:06 -0500
Subject: [PATCH] UX: Show Network Logo Based on Chain ID (#20895)

## Explanation

Adding a network from within MetaMask (the 'Add Network' functionality
within 'Settings') properly provides a `{network}.rpcPrefs.imageUrl` so
that networks in the following areas show the correct network icon:

1. Network picker
2. Network menu
3. Token badge icon
4. NewNetworkInfo modal

The problem is that adding a network from a dapp (example: adding a
network via Uniswap) doesn't always mean they provide an `imageUrl`.

This PR updates the`getNonTestNetworks` selector so that it provides an
`imageURL` or falls back to providing known network icons based on chain
ID.

## Screenshots/Screencaps

### After
<img width="401" alt="SCR-20230914-tjzx"
src="https://github.com/MetaMask/metamask-extension/assets/46655/3c9232ca-50b1-4941-aedc-c9ef4653ac0d">
<img width="508" alt="SCR-20230914-tjju"
src="https://github.com/MetaMask/metamask-extension/assets/46655/68e7b44c-0efb-470a-bc3c-5ebcfe2a25d5">
<img width="743" alt="SCR-20230914-tjgi"
src="https://github.com/MetaMask/metamask-extension/assets/46655/7b989cbb-6312-4efa-b1d2-8be504fa172f">

## Manual Testing Steps


1. Start with a new MetaMask wallet ( so that there aren't existing L2
networks)
2. Go to https://app.uniswap.org/
3. Go to the Swaps page
4. Switch to a network via their network picker
5. See MetaMask pop up, asking to add the new network
6. Approve adding the new networks, which adds the network info
*without* the `imageUrl`
7. See: (1) The network picker and list show the correct icon, (2) the
token list showing the correct network badge, and (3) switching to the
network the first time shows the correct badge

## Pre-merge author checklist

- [ ] I've clearly explained:
  - [ ] What problem this PR is solving
  - [ ] How this problem was solved
  - [ ] How reviewers can test my changes
- [ ] Sufficient automated test coverage has been added

## Pre-merge reviewer checklist

- [ ] Manual testing (e.g. pull and build branch, run in browser, test
code being changed)
- [ ] PR is linked to the appropriate GitHub issue
- [ ] **IF** this PR fixes a bug in the release milestone, add this PR
to the release milestone

If further QA is required (e.g. new feature, complex testing steps,
large refactor), add the `Extension QA Board` label.

In this case, a QA Engineer approval will be be required.
---
 .../__snapshots__/security-tab.test.js.snap   |  6 ++++-
 ui/selectors/selectors.js                     | 14 ++++++++++-
 ui/selectors/selectors.test.js                | 23 +++++++++++++++++++
 3 files changed, 41 insertions(+), 2 deletions(-)

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`] = `
             <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>
             <div
               class="mm-box mm-box--display-flex mm-box--flex-direction-column"
diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
index 656055208c01..01b60ce21496 100644
--- a/ui/selectors/selectors.js
+++ b/ui/selectors/selectors.js
@@ -32,6 +32,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,
@@ -1344,7 +1345,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,
+      })),
   ];
 }
 
diff --git a/ui/selectors/selectors.test.js b/ui/selectors/selectors.test.js
index 91930c94d865..bbfa6f0bb1a5 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', () => {