feat: add privacy toggle

[salimtb]

Description

This task aims to add the ability to turn on and off the network verification feature. To do that, we will be adding both a toggleable section in the settings as well as a contextual banner and sheet for quickly toggling it on.

Related issues

Fixes: #1269

Manual testing steps

1. Go to the setting page
2. Go to Security and Privacy
3. Enable/disable the network details check
4. Go to add network
5. if the toggle was disabled you should see a banner ( check the video below )

Screenshots/Recordings

Before

After

https://drive.google.com/drive/folders/1BeTFKHelGrzu5XPUfXLTa-om7inhtowU?usp=drive_link

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've clearly explained what problem this PR is solving and how it is solved.
• I've linked related issues
• I've included manual testing steps
• I've included screenshots/recordings if applicable
• 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.
• I’ve properly set the pull request status:
  • In case it's not yet "ready for review", I've set it to "draft".
  • In case it's "ready for review", I've changed it from "draft" to "non-draft".

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.

[github-actions]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/70d1699d-6d0e-40e5-aeba-735ebfcec33e
You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[github-actions]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/58f823e6-cd4e-454e-ab76-5eb8bf3246f8
You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[salimtb]

Figma - https://www.figma.com/file/t4Zc6ZOA9Urw8POrCReEam/Privacy-epic-%26-update-security-and-privacy-in-settings?type=design&node-id=436-132218&mode=design&t=44JW6eob6cTiA6KB-0
Toggle scenarios - Toggle scenarios - https://docs.google.com/presentation/d/16s_2-kViYyQBAI6WMQRuro8qLPq2Oc3whZ1tlIO68bo/edit#slide=id.g25ba5b08687_1_0

[Cal-L]

@salimtb There was a ticket 2 of 3 prior to this iteration. Is it correct to say those changes are also implemented in this PR? When you have the chance, could you also verify that the network verification errors are still being respected when adding network from both custom and dapps? A video would be fine

[tommasini]

Awesome work!

Just some comments:

• It seems that comparing it with figma is missing bold on the copy Settings -> Security and Privacy part
  
  

• Can we also have a scenario with the recordings of the scenario with warning alerts?

• • When added a chain via Dapp
• • When adding a chain via Custom Network

• It seems that I started the first PR of this Batch and I missed it or it was added to the Figma after, but the banners are missing a cross icon to be able to closed on the right side :( , let me know if you can add it!
  Figma:
  

Recording from the first batch PR

• Also it makes sense to add a condition before we check the networks here , we do not want to fetch anything if the toggle is disabled

NIT:
Do you think it would be better extracting the contextual sheet of enabling/disabling the new privacy toggle would be better for easier change/reusability on the future?

[tommasini]

Also wanted to bring up a product question, I can see that on slide 28 we do show intention to show the warning banners of the network when adding it from our popular list.
I'm wondering if that should be the case, since we control all the add network flow from the networks on our popular list (all that networks data is hardcoded here)

It seems just new noise to the user, let me know your thoughts

cc: @hesterbruikman @alfeng6

[hesterbruikman]

Also wanted to bring up a product question, I can see that on slide 28 we do show intention to show the warning banners of the network when adding it from our popular list. I'm wondering if that should be the case, since we control all the add network flow from the networks on our popular list (all that networks data is hardcoded here)

It seems just new noise to the user, let me know your thoughts

cc: @hesterbruikman @alfeng6

@tommasini Let me see if I understand the logic you're proposing correctly:

• GIVEN User adds Custom Network (manually)
• AND Details of Custom Network Details match those of hardcoded popular network list
• THEN Don't show warning

If so I agree. And we can probably makes this smarter as a next step as well. This would be the sequence of implementation and logic:

• Warn - Any Custom Network based on Chain ID verification [CURRENT BATCH]
• Promote - Auto-populate Network details based on Chain ID (allows editing) - Current batch - Warn for any Custom Network based on Chain ID verification [TICKET OF INCIDENT 337 #1347]
• Optimise for Popular Networks - Hide warning when Custom Network is added where details match Popular Network details [NO TICKET]
• Recommend - Propose Popular Network hardcoded network details when custom is added with same ID of Popular Network list [NO TICKET]

@alfeng6 Wdyt? I do have reservation about my own proposal as a last step. UX improvement, but we should generally avoid making strong recommendations

[chrisleewilcox]

Hi @salimtb
Thanks for looking into this. Looks like the test is working on iOS but it's now failing for android device. Looks like when adding a custom network for android device the approve and switch modal is not showing like it does for iOS after adding a network. These are the lines that fail in the tests when running on android emulator. Can you take an look and ensure that after adding custom network the approve and switch views are shown for android devices?
I tested this locally and it took me awhile to notice this. The test seems to be good as is and should pass once the fix for showing approve and switch views are shown for android. Hope all this makes sense and reach out if you have any questions.

Regression tests showing iOS passes but android fails: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/d13b5fef-a88a-4515-bde7-c31b89c8b1cc

Recording showing approve and switch views not shown on android: https://recordit.co/82bDXlPoXa

[sonarqubecloud]

Quality Gate passed

The SonarCloud Quality Gate passed, but some issues were introduced.

7 New issues
0 Security Hotspots
69.2% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[github-actions]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/8de3fb2b-dcc1-4750-88e8-a2e2a60321f0
You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label