feat: new metamask notifications #24482

matteoscurati · 2024-05-10T13:54:06Z

Description

This PR introduces new features within the MetaMask Extension:

Authentication -> Users can choose to authenticate using the new Profile Syncing feature. This functionality allows users to anonymously share data across different clients authenticated with the same account. MetaMask cannot decrypt this information.
Notifications -> Users can decide whether to enable notifications to track their on-chain activities. Notifications can be viewed on a dedicated page or received via browser notifications.
Users can choose to activate or deactivate these services at any time.

Four new controllers are managing the feature, already merged in previous PRs:

Authentication Controller
User Storage Controller
Push Notification Controller
MetaMask Notification Controller

Related issues

Manual testing steps

To test the function, it is necessary:

Follow the onboarding procedure.
In the menu, use the notifications option to enable notifications.

At this point, the user will have enabled notifications.

Screenshots/Recordings

Before

After

To see the entire flow, there is this Figma where the various steps used are described:

https://www.figma.com/design/c7GgNw2kScGrVyRGAPhwEd/Notifications

Pre-merge author checklist

I’ve followed MetaMask 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.

…n states

…ns controller states

ensures that snaps are still visible and not blocked by enabling wallet notifications

this is a small prompt to help guide users to the new feature if they have no notifications

… feat/new-metamask-notifications

metamaskbot · 2024-05-23T00:22:12Z

Builds ready [341d8b7]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8
- content-script: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (303 ± 338 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	62	124	86	17	8
		domContentLoaded	9	35	13	6	3
		load	51	2427	303	703	338
		domInteractive	9	35	12	6	3

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 43.43 KiB (1.24%)
ui: 159.42 KiB (2.40%)
common: 11.22 KiB (0.18%)

we can sync with snaps team to make sure that the new UI is aligned.

test/e2e/snaps/test-snap-notification.spec.js

Prithpal-Sooriya · 2024-05-23T08:15:29Z

test/e2e/snaps/test-snap-notification.spec.js

@@ -104,11 +104,11 @@ describe('Test Snap Notification', function () {

        // look for the correct text in notifications (via xpath)
        await driver.waitForSelector({
-          css: '.notifications__item__details__message',
+          css: '.snap-notifications__item__details__message',


classname change - the corresponding scss classname has also been updated. We are retaining the original styles.

FUTURE - a separate PR will be made to see if we can get snap notifications to be in a "similar-ish" design to the other notifications. See Figma

Prithpal-Sooriya · 2024-05-23T08:18:37Z

ui/pages/notifications/notification-components/snap/snap.tsx

+  snapNotification: SnapNotification;
+};
+
+function NotificationItem({ snapNotification }: SnapComponentProps) {


This is the original snap notification item. Mostly ported over from JS to TS (which found some bugs) - we kept as is (using @ts-expect-error). These fixes, alongside a minor redesign that both teams are satisfied with, will come in a separate PR.

Prithpal-Sooriya · 2024-05-23T08:21:06Z

ui/pages/notifications/snap/types/types.ts

+export type SnapNotification = {
+  id: string;
+  createdAt: string;
+  isRead: boolean;
+  type: typeof SNAP;
+  data: RawSnapNotification;
+};


This is the new snap notification shape.

The data field retains the original snap shape.

The reason for these additional fields are for Notification interface consistency & so we can figure out which notification is which (via the type field acting as a discriminated union.)

Prithpal-Sooriya · 2024-05-23T08:22:05Z

ui/pages/notifications/snap/utils/utils.ts

+import type { RawSnapNotification, SnapNotification } from '../types/types';
+import { SNAP } from '../types/types';
+
+export const processSnapNotifications = (


This is an internal process to convert snap notifications into the new shape (which vibes with the rest of out notifications).

metamaskbot · 2024-05-23T09:53:06Z

Builds ready [636d009]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8
- content-script: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (619 ± 537 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	69	163	90	26	13
		domContentLoaded	8	22	13	4	2
		load	56	3129	619	1119	537
		domInteractive	8	22	13	4	2

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 43.43 KiB (1.24%)
ui: 159.8 KiB (2.41%)
common: 11.4 KiB (0.18%)

app/scripts/controllers/metamask-notifications/metamask-notifications.ts

this includes removing the toggle and removing from our controller. If we need fine grain control, this will happen in a future PR

… feat/new-metamask-notifications

danjm

Re-approving the privacy snapshot changes (I also have reviewed most of the code in the app/ directory)

metamaskbot · 2024-05-23T12:05:20Z

Builds ready [3e1e984]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8
- content-script: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (284 ± 320 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	55	122	78	15	7
		domContentLoaded	8	43	13	8	4
		load	44	2500	284	666	320
		domInteractive	8	43	13	8	4

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 43.03 KiB (1.23%)
ui: 158.83 KiB (2.40%)
common: 11.19 KiB (0.18%)

matteoscurati added 30 commits April 15, 2024 10:52

feat: ✨ add new selectors to handle profile syncing and authenticatio…

7ba866e

…n states

feat: 🚨 fix linter errors

ac4a516

Merge branch 'develop' into feat/new-authentication-flow

6e67372

feat: 🚧 wip

8b8a9cb

Merge branch 'develop' into feat/new-authentication-flow

78cc399

Merge branch 'develop' into feat/new-authentication-flow

74dca75

Merge branch 'develop' into feat/new-authentication-flow

5c1be1b

refactor: ♻️ change the way we are handling some metamask notificatio…

b4a8cc9

…ns controller states

docs: 📝 Update JSDocs

c00505b

Merge branch 'develop' into feat/new-authentication-flow

30e9eb5

feat: ✨ Use the new Authentication Flow

cdb1903

Merge branch 'develop' into feat/new-authentication-flow

dce192f

feat: 💚 Fix lavamoat errors

5599d6d

refactor: ♻️ small fixes

cb2482e

feat: 💚 add hosts in the privacy-snapshot

f64a634

Merge branch 'develop' into feat/new-authentication-flow

c4f3dcd

Merge branch 'develop' into feat/new-authentication-flow

517864e

test: ✅ update sentry tests

6615477

Merge branch 'develop' into feat/new-authentication-flow

1ee584b

test: 🧪 try to fix a test

efc5002

test: 🧪 try to fix a test

889c678

test: 🧪 try this test

6a3d849

Merge branch 'develop' into feat/new-authentication-flow

3800084

test: 🧪 fix e2e tests

2303c25

test: ✅ add sentry tests

9e2bb22

test: ✅ udapte firefox tests

ff76253

Merge branch 'develop' into feat/new-authentication-flow

1da83ba

Merge branch 'develop' into feat/new-authentication-flow

04e8047

Merge branch 'develop' into feat/new-authentication-flow

55e43e4

fix: 🚨 fix lint error

6173b3a

Prithpal-Sooriya added 8 commits May 22, 2024 23:35

feat: add new notifications menu flow

2e96579

ensures that snaps are still visible and not blocked by enabling wallet notifications

refactor: cleanup - remove unnecessary public methods

0dcd62f

fix: ensure we don't delete triggers when disabling notifications

6476a5e

test: add tests covering disable notifications bug

b37bed3

test: fix tests

4c990c9

feat: show and switch between the new tag and notification counter

e362ee3

this is a small prompt to help guide users to the new feature if they have no notifications

Merge branch 'develop' of github.com:MetaMask/metamask-extension into…

5bfd638

… feat/new-metamask-notifications

test: fix e2e notification test regressions

341d8b7

revert: snap notification items back to original

b6c4003

we can sync with snaps team to make sure that the new UI is aligned.

Prithpal-Sooriya reviewed May 23, 2024

View reviewed changes

test/e2e/snaps/test-snap-notification.spec.js Show resolved Hide resolved

test: update snap e2e test

c4110ae

Prithpal-Sooriya reviewed May 23, 2024

View reviewed changes

refactor: fix linting

636d009

GuillaumeRx reviewed May 23, 2024

View reviewed changes

app/scripts/controllers/metamask-notifications/metamask-notifications.ts Outdated Show resolved Hide resolved

matteoscurati and others added 3 commits May 23, 2024 12:37

Merge branch 'develop' into feat/new-metamask-notifications

09d19d0

refactor: remove snap state and controls from our services

a678bfa

this includes removing the toggle and removing from our controller. If we need fine grain control, this will happen in a future PR

Merge branch 'develop' of github.com:MetaMask/metamask-extension into…

3e1e984

… feat/new-metamask-notifications

danjm approved these changes May 23, 2024

View reviewed changes

GuillaumeRx approved these changes May 23, 2024

View reviewed changes

matteoscurati merged commit cde9ebd into develop May 23, 2024
71 of 72 checks passed

matteoscurati deleted the feat/new-metamask-notifications branch May 23, 2024 12:11

github-actions bot locked and limited conversation to collaborators May 23, 2024

metamaskbot added the release-11.18.0 Issue or pull request that will be included in release 11.18.0 label May 23, 2024

matteoscurati restored the feat/new-metamask-notifications branch May 23, 2024 14:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: new metamask notifications #24482

feat: new metamask notifications #24482

matteoscurati commented May 10, 2024 •

edited

metamaskbot commented May 23, 2024

Prithpal-Sooriya May 23, 2024 •

edited

Prithpal-Sooriya May 23, 2024

Prithpal-Sooriya May 23, 2024

Prithpal-Sooriya May 23, 2024

metamaskbot commented May 23, 2024

danjm left a comment

metamaskbot commented May 23, 2024

feat: new metamask notifications #24482

feat: new metamask notifications #24482

Conversation

matteoscurati commented May 10, 2024 • edited

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

metamaskbot commented May 23, 2024

Prithpal-Sooriya May 23, 2024 • edited

Choose a reason for hiding this comment

Prithpal-Sooriya May 23, 2024

Choose a reason for hiding this comment

Prithpal-Sooriya May 23, 2024

Choose a reason for hiding this comment

Prithpal-Sooriya May 23, 2024

Choose a reason for hiding this comment

metamaskbot commented May 23, 2024

danjm left a comment

Choose a reason for hiding this comment

metamaskbot commented May 23, 2024

matteoscurati commented May 10, 2024 •

edited

Prithpal-Sooriya May 23, 2024 •

edited