feat: add notifications' details screen

[Jonathansoufer]

Description

This PR are part of a series of PRs to implement the new notifications feature on MetaMask. This brings UI elements together to present our users:

• Notification DETAILS Screen

Related issues

Fixes:

Manual testing steps

1. Go to this Settings screen, open the new Notifications option and enable it.
2. Go to main screen, click on the bell icon
3. See the empty screens.
4. Perform any onChain transaction
5. 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]

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]

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

Package	New capabilities	Transitives	Size	Publisher
npm/@jsamr/counter-style@2.0.2	None	0	378 kB	jsamr
npm/@jsamr/react-native-li@2.3.1	None	0	114 kB	jsamr
npm/@native-html/css-processor@1.11.0	None	0	351 kB	jsamr
npm/@native-html/transient-render-engine@11.2.3	None	0	566 kB	jsamr
npm/@types/ramda@0.27.66	None	0	166 kB	types
npm/@types/urijs@1.19.25	None	0	15.6 kB	types
npm/character-entities-html4@1.1.4	None	0	9.04 kB	wooorm
npm/character-entities-legacy@1.1.4	None	0	6.71 kB	wooorm
npm/css-to-react-native@3.2.0	environment	0	90 kB	jacobp100
npm/csstype@3.1.3	None	0	1.25 MB	faddee
npm/dom-serializer@1.3.2	None	0	18.1 kB	feedic
npm/htmlparser2@7.2.0	None	0	89.9 kB	feedic
npm/postcss-value-parser@4.2.0	None	0	27.2 kB	evilebottnawi
npm/ramda@0.27.2	None	0	1.07 MB	davidchambers
npm/react-native-render-html@6.3.4	network	0	783 kB	jsamr
npm/stringify-entities@3.1.0	None	0	16.2 kB	wooorm
npm/ts-toolbelt@6.15.5	None	0	485 kB	pirix-gh
npm/urijs@1.19.11	None	0	191 kB	rodneyrehm

🚮 Removed packages: npm/css-to-react-native@2.3.2, npm/csstype@3.0.8, npm/dom-serializer@2.0.0, npm/domhandler@5.0.3, npm/domutils@3.1.0, npm/entities@4.5.0, npm/postcss-value-parser@3.3.1, npm/ramda@0.29.0

View full report↗︎

[socket-security]

🚨 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/react-native-render-html@6.3.4	Module: globalThis["fetch"] Location: Package overview	package.json yarn.lock	🚫

[**View full report↗︎**](https://socket.dev/dashboard/org/MetaMask/diff/b31834fd-c765-43af-97b3-cd106ac3c0f3/b28690c8-b50a-4988-b0fa-792a358181eb) ### 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/foo@1.0.0 or ignore all packages with @SocketSecurity ignore-all

• @SocketSecurity ignore npm/react-native-render-html@6.3.4

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: b020eb3
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/a152b24b-3e1f-4a91-9dc8-44a46aa04610

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 0e7733e
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/2e4a4324-3880-4b8e-a561-825d86c9ec6b

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[tommasini]

LGTM!

[tommasini]

Ah, actually the unit tests are failing, let's address that as well

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: e1daaa8
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/d2bad12e-0430-499f-b87c-796bd84a1d10

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[sonarqubecloud]

Quality Gate passed

Issues
23 New issues
0 Accepted issues

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

See analysis details on SonarCloud