MetaMask / metamask-mobile

Mobile web browser providing access to websites that use the Ethereum blockchain
https://metamask.io
Other
2.14k stars 1.1k forks source link

feat: adjusting the 'add network screen' in network bottom sheet, for network UI redesign #10005

Closed EtherWizard33 closed 3 months ago

EtherWizard33 commented 3 months ago

Description

This PR shows the 'Add custom network' form directly after clicking the button, where the user can add and connect to a custom network. A demo can be viewed here: https://www.loom.com/share/bd380aca1065428ea584b0421ce69fb9

Here is a link to the figma: https://www.figma.com/design/76R5BvAVubUhWaN2Ld7MAv/Default-Networks?node-id=1303-34400&m=dev

Related issues

Ensures that the form is displayed directly after clicking since the list of popular networks are now integrated in the list.

Manual testing steps

  1. From the home page, click the network selector at the top of the screen, a bottom sheet comes up with a list of networks
  2. At the bottom of the bottom sheet, click Add custom network button, a form should show up allowing to add a network
  3. Fill the form with relevant information and add the network

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions[bot] commented 3 months ago

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.

salimtb commented 3 months ago

work as expected , good job !

sonarcloud[bot] commented 3 months ago

Quality Gate Passed Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
50.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud