MetaMask / MetaMask/metamask-mobile

Improve the network switcher design

Open
#2,477 6 comments 0 reactions 2 assignees View on GitHub

@Cal-L is already working on this.

Since Sep 14, 2021.

Dominant language
TypeScript
Stars
3k
Forks
1.7k
Avg merge
1d 14h
Merged PRs (30d)
669

Description

### **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](https://www.notion.so/Experience-parity-of-custom-networks-with-default-networks-0ff2ba4c16b540e9a3e1460afcc792d1) 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](https://www.notion.so/7af6f9afb8634469ac881acb0c9fd9b4?v=92f5f9ccb9804651a29cea4e313428b5&p=792db403977f49afad30a21e8f47402b)
- [Figma design](https://www.figma.com/file/F8NVM9pM8RpIe3YNbHsk5r/Switch-Network?node-id=54%3A364)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.