feat: add notifications UI views #10405

Jonathansoufer · 2024-07-25T08:02:54Z

Description

This is the last PR from a series of 6 PRs to implement the new notifications feature on MetaMask. This brings all the backbones and UI elements together to present our users:

OptIn Screen
Settings Screen
Notifications List Screen
Notification Details Screen

Related issues

Fixes:

Manual testing steps

Go to this Settings screen, open the new Notifications option and enable it.
Go to main screen, click on the bell icon
See the empty screens.
Perform any onChain transaction
Click on the Notification and see its details

Screenshots/Recordings

NotificationsDemo.mov

Before

After

Pre-merge author checklist

I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
I've completed the PR template to the best of my ability
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.

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 · 2024-07-25T08:03:06Z

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.

socket-security · 2024-07-25T08:04:20Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@jsamr/[email protected]	None	`0`	378 kB	jsamr
npm/@jsamr/[email protected]	None	`0`	114 kB	jsamr
npm/@metamask/[email protected]	network	`0`	1.04 MB	metamaskbot
npm/@metamask/[email protected]	network	`0`	641 kB	metamaskbot
npm/@native-html/[email protected]	None	`0`	351 kB	jsamr
npm/@native-html/[email protected]	None	`0`	566 kB	jsamr
npm/@types/[email protected]	None	`0`	166 kB	types
npm/@types/[email protected]	None	`0`	15.6 kB	types
npm/[email protected]	None	`0`	9.04 kB	wooorm
npm/[email protected]	None	`0`	6.71 kB	wooorm
npm/[email protected]	environment	`0`	90 kB	jacobp100
npm/[email protected]	None	`0`	1.25 MB	faddee
npm/[email protected]	None	`0`	18.1 kB	feedic
npm/[email protected]	None	`0`	89.9 kB	feedic
npm/[email protected]	None	`0`	27.2 kB	evilebottnawi
npm/[email protected]	None	`0`	1.07 MB	davidchambers
npm/[email protected]	network	`0`	783 kB	jsamr
npm/[email protected]	None	`0`	16.2 kB	wooorm
npm/[email protected]	None	`0`	485 kB	pirix-gh
npm/[email protected]	None	`0`	191 kB	rodneyrehm

🚮 Removed packages: npm/@metamask/[email protected], npm/@metamask/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

View full report↗︎

socket-security · 2024-07-25T08:04:23Z

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Alert	Package	Note	Source	CI
Network access	npm/[email protected]	Module: globalThis["fetch"] Location: Package overview	`package.json` `yarn.lock`	🚫

View full report↗︎

Next steps

What is network access?

This module accesses the network.

Packages should remove all network access that is functionally unnecessary. Consumers should audit network access to ensure legitimate use.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/[email protected] or ignore all packages with @SocketSecurity ignore-all

@SocketSecurity ignore npm/[email protected]

github-actions · 2024-07-25T08:06:11Z