UX: Show Network Logo Based on Chain ID

[darkwing]

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 thegetNonTestNetworks selector so that it provides an imageURL or falls back to providing known network icons based on chain ID.

Screenshots/Screencaps

After

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.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[codecov]

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (4d5c2be) 68.17% compared to head (27a8525) 68.17%.
Report is 2 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #20895   +/-   ##
========================================
  Coverage    68.17%   68.17%           
========================================
  Files          998      998           
  Lines        39963    39965    +2     
  Branches     10684    10686    +2     
========================================
+ Hits         27242    27244    +2     
  Misses       12721    12721           

Files Changed	Coverage Δ
ui/selectors/selectors.js	86.67% <100.00%> (+0.04%)	⬆️

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[metamaskbot]

Builds ready [8815613]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4
  • common: 0, 1, 2, 3, 4, 5, 6
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1396 ± 14 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	106	145	123	11	5
		domContentLoaded	1340	1455	1395	29	14
		load	1340	1455	1396	29	14
		domInteractive	1340	1455	1395	29	14

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 157 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[HowardBraham]

I tested this using https://app.uniswap.org, and most screens showed the logo correctly, but this one did not

[darkwing]

@HowardBraham ...could you try again? Optimism worked for me the first time, then I deleted that network, re-added it via Uniswap, and the icon displayed as it should

[NidhiKJha]

LGTM

[metamaskbot]

Builds ready [27a8525]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4
  • common: 0, 1, 2, 3, 4, 5, 6
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1823 ± 64 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	129	268	162	32	15
		domContentLoaded	1595	2116	1821	135	65
		load	1595	2116	1823	133	64
		domInteractive	1595	2116	1821	135	65

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 157 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[HowardBraham]

@darkwing I tested it again on Firefox with a brand-new clean version of the Extension, no history.
Same result... but... I noticed it's only a problem on some networks!
Optimism and Arbitrum are broken, but Polygon, BNB, Avalanche, and Celo are all fine.
(Side note: we have the old Celo logo)

[darkwing]

@HowardBraham I think we should consider that a separate bug, not only because the image is wrong, but also it states that "ETH" is the native currency of Optimism, etc.

[darkwing]

Filed new issue here: #20934