feat: Integrate JSX into snap notifications #27407

hmalik88 · 2024-09-25T19:41:27Z

Description

Adds an expanded view for snaps notifications, using JSX content returned from the snap to populate the expanded view.

Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions:

What is the reason for the change? Allow for richer snaps notifications
What is the improvement/solution? Add expanded view for snaps, allowing a snap to return jsx content in the expanded view.

Screenshots/Recordings

After

Screen.Recording.2024-11-29.at.4.45.06.AM.mov

Manual testing steps

Pull down https://github.com/hmalik88/swiss-knife-snap and run yarn start to serve the snap and site.
Build this branch using yarn start:flask
Install the snap from the local host site.
Trigger a notification with the "trigger a JSX notification" button and observe the results.

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension 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-09-25T19:41:41Z

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-09-25T19:43:11Z

No dependency changes detected. Learn more about Socket for GitHub ↗︎

👍 No dependency changes detected in pull request

…ications

…ler` (#27489)

## **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? Previously, developers couldn't navigate to parts of the extension with the existing functionality provided to them through snaps UI 2. What is the improvement/solution? The Snaps `Link` component now checks for if the url is a MetaMask url and navigates to the proper path accordingly. ## **Screenshots/Recordings** ### **After** ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] 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](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). 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.

…ications

ui/pages/notifications/notification-components/index.ts

eriknson

Design lgtm!

metamaskbot · 2024-12-05T16:30:07Z

Builds ready [b015142]

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, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1765 ± 58 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1588	1978	1775	124	60
		domContentLoaded	1577	1939	1745	111	53
		load	1584	1966	1765	120	58
		domInteractive	23	61	34	11	6
		backgroundConnect	8	64	23	17	8
		firstReactRender	14	92	24	22	11
		getState	75	312	144	66	32
		initialActions	0	1	0	0	0
		loadScripts	1204	1568	1367	105	50
		setupStore	6	81	15	21	10
		uiStartup	1775	2621	2105	220	106

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

background: 215 Bytes (0.00%)
ui: 6.79 KiB (0.09%)
common: 0 Bytes (0.00%)

ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.js

ui/pages/notification-details/notification-details.tsx

ui/pages/notifications/notification-components/erc1155-sent-received/erc1155-sent-received.tsx

ui/pages/notifications/notification-components/types/notifications/notifications.ts

metamaskbot · 2024-12-05T19:02:20Z

Builds ready [caa3a17]

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, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2027 ± 104 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1643	2324	2025	213	102
		domContentLoaded	1629	2308	1998	218	105
		load	1638	2321	2027	217	104
		domInteractive	23	68	38	13	6
		backgroundConnect	8	67	28	22	10
		firstReactRender	14	93	24	17	8
		getState	94	394	148	70	34
		initialActions	0	0	0	0	0
		loadScripts	1244	1863	1567	182	87
		setupStore	6	79	12	15	7
		uiStartup	1846	3103	2369	333	160

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

background: 215 Bytes (0.00%)
ui: 7.33 KiB (0.09%)
common: 0 Bytes (0.00%)

…markdown content

metamaskbot · 2024-12-05T21:24:34Z

Builds ready [461939e]

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, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2045 ± 139 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	314	2828	1752	653	313
		domContentLoaded	1618	2808	2022	278	133
		load	1629	2892	2045	290	139
		domInteractive	24	108	43	24	11
		backgroundConnect	7	82	29	23	11
		firstReactRender	16	90	24	16	8
		getState	109	288	142	37	18
		initialActions	0	0	0	0	0
		loadScripts	1204	2351	1577	261	125
		setupStore	6	12	9	2	1
		uiStartup	1843	3239	2360	347	167

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

background: 215 Bytes (0.00%)
ui: 7.64 KiB (0.10%)
common: 0 Bytes (0.00%)

hmalik88 and others added 3 commits September 12, 2024 09:00

make adjustments to show notification call

2968d94

Bump Snaps packages

39f7d1b

Merge branch 'develop' into hm/integrate-jsx-notifications

652a6c3

github-actions bot added the team-snaps-platform Snaps Platform team label Sep 25, 2024

hmalik88 changed the base branch from mrtenz/bump-snaps-packages to develop September 25, 2024 19:42

Mrtenz and others added 11 commits September 27, 2024 17:16

Bump dependencies again

bdd1935

update notification controller, update raw snap notification type

0e30d3a

Merge branch 'develop' into hm/integrate-jsx-notifications

4597ba1

Merge branch 'mrtenz/bump-snaps-packages' into hm/integrate-jsx-notif…

5689fe5

…ications

add snap notification modal

3d5a9c4

Merge branch 'develop' into mrtenz/bump-snaps-packages

1dfa869

feat(snaps): Connect getCurrencyRate hook to `multichainRateControl…

306d898

…ler` (#27489)

Merge branch 'mrtenz/bump-snaps-packages' into hm/integrate-jsx-notif…

a6b6016

…ications

Merge branch 'mrtenz/bump-snaps-packages' into hm/integrate-jsx-notif…

8377776

…ications

integrate snaps expanded view into notification system

aad36db

hmalik88 changed the base branch from develop to mrtenz/bump-snaps-packages October 8, 2024 03:54

hmalik88 added 2 commits October 8, 2024 00:04

update yarn lock

bd96aef

update lavamoat policies

f1e5e52

hmalik88 commented Oct 8, 2024

View reviewed changes

ui/pages/notifications/notification-components/index.ts Outdated Show resolved Hide resolved

hmalik88 added 8 commits October 8, 2024 09:24

lint fixes

f26bbb4

another lint fix

e60733e

more lint fixes

8e96b0e

fix type issues

ea99b02

fix export

f7168be

possible fix

be72bb6

use literal instead of enum

c74c866

update notification detail button test

2f49777

eriknson previously approved these changes Dec 5, 2024

View reviewed changes

hmalik88 added 2 commits December 5, 2024 12:48

address PR comments

4ec8491

Merge branch 'main' into hm/integrate-jsx-notifications

73c82ee

hmalik88 dismissed eriknson’s stale review via 73c82ee December 5, 2024 17:49

FrederikBolding reviewed Dec 5, 2024

View reviewed changes

ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.js Outdated Show resolved Hide resolved

hmalik88 added 3 commits December 5, 2024 12:58

remove export

8dc2243

prevent modal rendering if not snap notification

84bf09c

Merge branch 'main' into hm/integrate-jsx-notifications

caa3a17

Prithpal-Sooriya reviewed Dec 5, 2024

View reviewed changes

ui/pages/notification-details/notification-details.tsx Show resolved Hide resolved

Prithpal-Sooriya reviewed Dec 5, 2024

View reviewed changes

ui/pages/notifications/notification-components/erc1155-sent-received/erc1155-sent-received.tsx Show resolved Hide resolved

Prithpal-Sooriya reviewed Dec 5, 2024

View reviewed changes

ui/pages/notifications/notification-components/types/notifications/notifications.ts Show resolved Hide resolved

Prithpal-Sooriya previously approved these changes Dec 5, 2024

View reviewed changes

make sure footer link displays warning modal

921c0e8

hmalik88 dismissed Prithpal-Sooriya’s stale review via 921c0e8 December 5, 2024 19:28

hmalik88 added 3 commits December 5, 2024 14:29

Merge branch 'main' into hm/integrate-jsx-notifications

7f2c175

make sure modal and external link is not shown for metamask links in …

e365317

…markdown content

Merge branch 'main' into hm/integrate-jsx-notifications

461939e

Prithpal-Sooriya approved these changes Dec 5, 2024

View reviewed changes

GuillaumeRx approved these changes Dec 6, 2024

View reviewed changes

matthewwalsh0 approved these changes Dec 6, 2024

View reviewed changes

darkwing approved these changes Dec 6, 2024

View reviewed changes

hmalik88 added this pull request to the merge queue Dec 6, 2024

Merged via the queue into main with commit 8d7f003 Dec 6, 2024
75 checks passed

hmalik88 deleted the hm/integrate-jsx-notifications branch December 6, 2024 14:59

github-actions bot locked and limited conversation to collaborators Dec 6, 2024

metamaskbot added the release-12.10.0 Issue or pull request that will be included in release 12.10.0 label Dec 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Integrate JSX into snap notifications #27407

feat: Integrate JSX into snap notifications #27407

hmalik88 commented Sep 25, 2024 •

edited

Loading

github-actions bot commented Sep 25, 2024

socket-security bot commented Sep 25, 2024 •

edited

Loading

eriknson left a comment

metamaskbot commented Dec 5, 2024

metamaskbot commented Dec 5, 2024

metamaskbot commented Dec 5, 2024

feat: Integrate JSX into snap notifications #27407

feat: Integrate JSX into snap notifications #27407

Conversation

hmalik88 commented Sep 25, 2024 • edited Loading

Description

Screenshots/Recordings

After

Manual testing steps

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Sep 25, 2024

socket-security bot commented Sep 25, 2024 • edited Loading

eriknson left a comment

Choose a reason for hiding this comment

metamaskbot commented Dec 5, 2024

metamaskbot commented Dec 5, 2024

metamaskbot commented Dec 5, 2024

hmalik88 commented Sep 25, 2024 •

edited

Loading

socket-security bot commented Sep 25, 2024 •

edited

Loading