MetaMask / MetaMask/metamask-extension
Improve Sepolia and Goerli network icon display method
- 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
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