MetaMask / MetaMask/metamask-mobile
Improve the network switcher design
@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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.