Improve the network switcher design

[omnat]

Description

This ticket focuses on updating a few pieces regarding how displaying of networks work on the network switcher modal. The first use case is for users to be able to add a network from the network switcher modal. The second use case should allow users to hide/show test networks on the network switcher via a toggle in the Advanced settings.

Technical Details

• Update network switch modal with an X close button and introduce a CTA button for adding a network.
• There is no longer a section header for test networks so remove that from the switcher
• Update Ethereum mainnet label from Ethereum Main Network -> Ethereum Mainnet (default).
• Under the Advanced settings page, add a Test networks toggle for controller whether to hide or show test networks in the switcher.
• Track and persist toggle state in redux. Perhaps name it showTestnets.
• Tapping on the add network CTA from switcher will open full screen straight to network entry page.
• might be postpone until IA/Nav Redesign V1 project is delivered - decision required

Acceptance Criteria

• Ability to Add a Network from the network switcher modal
• Ability to toggle hide or show test networks from the Advanced settings
• Custom networks should be unaffected and show up/function the same way as before

References

• Part of Experience parity of custom networks with default networks epic
• All updates on definition and design links here in this Notion page: When I am on the network switcher modal, I want to view my mainnet networks (Ethereum Mainnet, Custom Network Mainnets) primarily, and testnets only as secondary options
• Figma design

[mobularay]

A risk: due to the current Nav/IA work, the Browser item could be significantly impacted. Custom networks as well. Because this is in "Ready for Design" stage, there is time for research to finalize requirements more.

From technical perspective, this switcher feature on how it works in the code has room for improvement. Depending on results from Design level first.

[mobularay]

Could be picked up by @cjeria after completing the Nav AI design work.

[mobularay]

@omnat to confirm if there are other EPICs that would require higher priority attention on Design. So @cjeria check in with @omnat first before picking up this work!

[mobularay]

Decision needed to whether postpone until IA/Nav Redesign V1 project is delivered or not. @omnat @yanrong-chen @Cal-L to discuss

[Cal-L]

@omnat @mobularay I think we should convert this ticket to only capture the testnet toggle, which is not affected by the redesign

[omnat]

@yanrong-chen @Cal-L Let's match the design with the network selector component for IA/Nav