MetaMask / MetaMask/metamask-extension

Improve Sepolia and Goerli network icon display method

Open
#21,142 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
13.2k
Forks
5.6k
Avg merge
2d 5h
Merged PRs (30d)
451

Description

### Description
The current approach for displaying the Sepolia and Goerli network icons relies on fetching the background color using the [`getTestNetworkBackgroundColor` selector](https://github.com/MetaMask/metamask-extension/blob/0a215ca2d89958b5bb3902490530b06565114e61/ui/selectors/selectors.js#L650-L660) and then creating the icons using HTML and CSS. This method deviates from how we handle other network icons, adding complexity and increasing the potential for errors and inconsistencies. It would be more advantageous to handle the display of Sepolia and Goerli test networks in the same manner as other built-in networks, using an image and image URL.

See Linea Goerli implementation here https://github.com/MetaMask/metamask-extension/blob/0a215ca2d89958b5bb3902490530b06565114e61/ui/selectors/selectors.js#L1304-L1306

### Technical Description
- Incorporate the attached Sepolia and Goerli images provided in this issue.
- Add image links to the Sepolia and Goerli objects within the array returned by `getTestNetworks`.
- Include a deprecation message for `getTestNetworkBackgroundColor` in favor of obtaining the image link.

### Acceptance Criteria
- The network images for Sepolia and Goerli should be accessible from `getTestNetworks` in the same way as other built-in networks, for instance:
```javascript
const testNetworks = getTestNetworks(state);

```
- `getTestNetworkBackgroundColor` has been deprecated

Contributor guide

Open the contributing guide

Research direction

Start in ui/selectors/selectors.js by comparing getTestNetworks with the Linea Goerli implementation and reviewing getTestNetworkBackgroundColor. Check how the returned network objects are consumed by AvatarNetwork and where the attached Sepolia and Goerli images belong. Done means both network objects expose image URLs through getTestNetworks and getTestNetworkBackgroundColor is marked deprecated.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Refactor
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.