Development & PR Process

1. Follow MetaMask Mobile Coding Standards
2. Add release-xx label to identify the PR slated for a upcoming release (will be used in release discussion)
3. Add needs-dev-review label when work is completed
4. Add needs-qa label when dev review is completed
5. Add QA Passed label when QA has signed off

Description

Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions,
1. What is the reason for the change?

• To have better snaps UX in the settings that allows a user to understand what is installed in their wallet.

• This PR adds...

  • a snaps section in the settings page
  • a list of installed snaps
  • 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.

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:

SnapPermissions (High Complexity)

• This component takes in the initial permissions for a snap, parses them and renders a list of human readable permissions. Some permissions are specified for specific protocols so we show multiple list items for each protocol. This process is complex so I documented the process in this README. Please give it a read and sanity check my methodology.
• I built a derivePermissionsTitles util function to map the permissions to human readable titles.
  The designs:

My version:

• cc @gantunesr @andrepimenta @ritave @FrederikBolding this component deserves your attention in the review.

Notes for reviewers

This PR is big so to help make the reviews easier, I encourage you to look at the tests to get a better understanding of the input/outputs
The tests to look at in order of importance are...

1. SnapPermissions/test/SnapPermission.test.tsx
2. SnapSettings/test/SnapSettings.test.tsx
3. Snaps/test/SnapSettingsList.test.tsx
4. SnapDetails/test/SnapDetails.test.tsx
5. SnapElement/test/SnapElement.test.tsx
6. SnapDescription/test/SnapDescription.test.tsx
7. SnapVersionBadge/test/SnapVersionBadge.test.tsx

Screenshots/Recordings

Photos:

Issue

Progresses https://github.com/MetaMask/mobile-planning/issues/1000

Checklist

• There is a related GitHub issue
• Tests are included if applicable
• Any added code is fully documented