feat: Snaps settings

[owencraston]

Description

• This PR adds a settings page for each snap that allows users to read the granted permissions, remove the snap, read the description and title.

• The designs for this feature can be found here

This PR does not...

• Render specific snap icons
• Show the connected sites and allow the user to disconnect from them
• install origin and snap version are not clickable
• There are also small UX differences between the designs and my version due to limitations of the existing designs system components

2. What is the improvement/solution?

• Create a stack navigator for the snaps settings and put it inside the app/components/Nav/Main/MainNavigator.js. This stack will then live in the SettingsFlow stack navigator

• Removes the old placement for the snaps workflows inside the DrawerView.

• Add the entry point to the SnapsSettingsList inside the settings screen under the Networks section

• Renamed the old SnapsDev screen to SnapsSettingsList.tsx and had it render a list of SnapElements. This is the component that shows the snap name and id. When clicked it takes the user to the Settings page for a specific snap.

• Modified the SnapElement component to render a a Cell. This cell contains the snap name, snap id, a default icon for all snaps. I did not render the specific snap icon in this PR.

• Clicking on the SnapElement is brings you to a specific SnapSettings screen. This screen contains

  • A SnapDetails
  • A SnapDescription
  • A SnapPermissions which renders the list of permissions in a human readable way. More on this later.
  • And lastly this screen renders a Remove Snap section that contains a red button that when pressed calls SnapController.removeSnap(snap.id); and navigation.goBack();
  

• The app/components/Views/Snaps contains all of these screens and components and matches the desired file structure for components of this nature. Each component lives within its own folder, each of which have a styles.ts file. index.ts file, the component itself and a test folder.

  • Every component and screen are thoroughly tested.

4/d43f23bd-b14f-4130-9c58-ae36489b8652">

New Components

SnapDescription (Low Complexity)

• a trivial component that takes in the name and description of a snap and renders it in a nice box with a border
  The designs:

My Version:

SnapElement (Low Complexity)

• A list element that renders a Cell with the Snap name and id, a placeholder icon and navigates to the SnapSettings screen of that specific snap when clicked.
  The designs:

My version:

SnapVersionBadge (Low Complexity)

• A trivial component that renders the snap version with a v prefix and has an icon beside it. As of now clicking this button does nothing but in the future it will most likely link to other versions of that snap.
  The designs:

My version:

SnapDetails (Medium Complexity)

• A component that renders the Snap name/id, a toggle button to enable/disable the snap, the install origin and date as well as the version badge mentioned below.
  The designs:

My Version:

Related issues

Progresses: https://github.com/MetaMask/accounts-planning/issues/143

Manual testing steps

1. checkout this branch
2. run yarn setup
3. open the .js.env
4. modify the METAMASK_BUILD_TYPE to export METAMASK_BUILD_TYPE="flask"
5. in your terminal run source .js.env and then run yarn watch:clean
6. in xcode select the flask variant and press play
7. open http://metamask.github.io/snaps/test-snaps/1.1.0 in the browser

14. create a wallet
15. navigate to the browser
16. open this url: https://metamask.github.io/snaps/test-snaps/1.1.0/
17. install a snap, I usually install the bip32/bip44 snap
18. the install flow should appear with 3 steps including the a success screen
19. click the Get Public key button on the snap site, you should get a result
20. navigate to settings/snaps
21. you should see a list of all your installed snaps
22. clicking on an installed snap should bring you to the settings page for that snap
23. from this page you should see...
    • the description and name of the snap
    • all of the permissions it uses and when they were granted
    • the ability to disable the snap
    • the ability to remove the snap
24. Clicking remove snap should remove it from the list

Before

• Only the list of snaps was available.
• There was no way to delete a snap or view more details about it

After

Screen.Recording.2023-12-13.at.9.59.44.AM.mov

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.

[codecov-commenter]

Codecov Report

Attention: 3 lines in your changes are missing coverage. Please review.

Comparison is base (f71c426) 39.27% compared to head (03ac749) 39.39%.

❗ Current head 03ac749 differs from pull request most recent head 5bb9912. Consider uploading reports for the commit 5bb9912 to get more accurate results

Files	Patch %	Lines
...mponents/Views/Snaps/SnapSettings/SnapSettings.tsx	94.44%	0 Missing and 1 partial ⚠️
...Views/Snaps/components/SnapDetails/SnapDetails.tsx	91.66%	0 Missing and 1 partial ⚠️
...Views/Snaps/components/SnapElement/SnapElement.tsx	66.66%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8084      +/-   ##
==========================================
+ Coverage   39.27%   39.39%   +0.12%     
==========================================
  Files        1208     1220      +12     
  Lines       29738    29800      +62     
  Branches     2828     2831       +3     
==========================================
+ Hits        11679    11740      +61     
  Misses      17371    17371              
- Partials      688      689       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/d39298f3-d5c3-4cd0-9b71-524e65d2f609
You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[Jonathansoufer]

Good job ! Few comments that need to be addressed before approval.

[github-actions]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/f5e6fdcf-0904-4318-8a86-ba0d7600bea3
You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[Jonathansoufer]

LGTM!

[gantunesr]

LGTM. Ship the last melon 🍈

[sonarcloud]

Quality Gate passed

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

1 New issue
0 Security Hotspots
95.6% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud