refactor: the network name and image utils into selectors

[EtherWizard33]

Description

We are replacing calls to the get network name and get network image from utils to use a selector instead.

This way all places referring to it will do so in the same way and all with the same memoization provided by reselect.

Related issues

Fixes:

Manual testing steps

1. Where the network name and image were used before, the network name and image should still display after, there are about 15 places for each.
2. Mostly used for the network logos and it's network name used as a fallback letter
3. Other use cases are plainly to display the network name as text

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[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.

[tommasini]

After addressing the conversations and the unit test failure.

Could you record a video of the app-impacted screens?

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@metamask/[email protected]	None	+11	1.43 MB	metamaskbot
npm/@metamask/[email protected]	Transitive: environment, network	+18	1.63 MB	metamaskbot
npm/@metamask/[email protected]	environment Transitive: network	+8	1.18 MB	metamaskbot
npm/@metamask/[email protected]	Transitive: network	+9	1 MB	metamaskbot
npm/@metamask/[email protected]	None	+6	301 kB	metamaskbot
npm/@metamask/[email protected]	None	0	30.1 kB	metamaskbot
npm/@reduxjs/[email protected]	environment	+1	13.1 MB	acemarke
npm/[email protected]	None	0	285 kB	isaacs
npm/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	+244	366 MB	kudochien
npm/[email protected]	environment	+2	318 kB	acemarke
npm/[email protected]	None	0	14.7 kB	robwalkerco
npm/[email protected]	Transitive: environment	+9	735 kB	redux-saga-release-bot
npm/[email protected]	environment	0	169 kB	timdorr
npm/[email protected]	network Transitive: filesystem	+2	3.05 MB	traviskn

🚮 Removed packages: npm/@metamask/[email protected], npm/@metamask/[email protected], npm/@metamask/[email protected], npm/@metamask/[email protected], npm/@metamask/[email protected], npm/@metamask/[email protected], npm/@metamask/[email protected], npm/@metamask/[email protected], npm/@reduxjs/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

View full report↗︎

[socket-security]

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Alert	Package	Note	Source
New author	npm/@jest/[email protected]	New Author: scotthovestadt Previous Author: rubennorte	package.json
New author	npm/[email protected]	New Author: scotthovestadt Previous Author: rubennorte	package.json
New author	npm/[email protected]	New Author: scotthovestadt Previous Author: rubennorte	package.json
New author	npm/@metamask/[email protected]	New Author: metamaskbot Previous Author: gudahtt	package.json
Network access	npm/[email protected]	Module: globalThis["fetch"] Location: Package overview	package.json
New author	npm/[email protected]	New Author: jstejada Previous Author: fb	package.json
New author	npm/@react-native-community/[email protected]	New Author: grabbou Previous Author: thymikee	package.json
New author	npm/@react-native-community/[email protected]	New Author: grabbou Previous Author: esemesek	package.json

View full report↗︎

Next steps

What is new author?

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Scrutinize new collaborator additions to packages because they now have the ability to publish code into your dependency tree. Packages should avoid frequent or unnecessary additions or changes to publishing rights.

What is network access?

This module accesses the network.

Packages should remove all network access that is functionally unnecessary. Consumers should audit network access to ensure legitimate use.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/[email protected] or ignore all packages with @SocketSecurity ignore-all

• @SocketSecurity ignore npm/@jest/[email protected]
• @SocketSecurity ignore npm/[email protected]
• @SocketSecurity ignore npm/[email protected]
• @SocketSecurity ignore npm/@metamask/[email protected]
• @SocketSecurity ignore npm/[email protected]
• @SocketSecurity ignore npm/[email protected]
• @SocketSecurity ignore npm/@react-native-community/[email protected]
• @SocketSecurity ignore npm/@react-native-community/[email protected]

[sonarcloud]

Quality Gate failed

Failed conditions
33.2% Coverage on New Code (required ≥ 40%)

See analysis details on SonarCloud

[brianacnguyen]

why are we removing the close option in toast?

[EtherWizard33]

why are we removing the close option in toast?

Hi Brian, this PR got merged with too much content which included stuff about the close option which is not part of this PR.
I actually had to recreated a new PR which is just about selectors, and no UI, closing this one.