feat: new phishing warning UI with metrics #27942

AugmentedMode · 2024-10-17T18:26:11Z

Description

This PR introduces the new phishing-warning-page UI in v4.1.0 along with metrics to track when users click on Back to safety which will lead them to the portfolio as well as when they click on proceed anyways to better track False positives

Some notable improvements in the new UI:

Improved design, highlighting MetaMask as the reason for keeping you safe
Back to safety now relocates to Portfolio, helping drive more eyes to it
Highly shareable: Built-in Share to Twitter/X button, which worked really well at Wallet Guard. This page is shown 400k times per month, so we can gain some free social from this!
Better track false positives with metametrics on proceed anyways

Related issues

Fixes:

Manual testing steps

Go to a scam website that is found on eth-phishing-detect such as web3-lido.lol and you will see the new phishing page UI!
Once on the new phishing page, you can click on Back to safety which will take you to the portfolio or you can click on proceed anyway which will take you to the scam website and allowlist it.

Screenshots/Recordings

Before

After

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-10-17T18:26:23Z

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-10-17T18:28:02Z

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

Package	New capabilities	Transitives	Size	Publisher
npm/@metamask/phishing-warning@4.1.0	None	`0`	1.86 MB	metamaskbot

🚮 Removed packages: npm/@metamask/phishing-warning@4.0.0

View full report↗︎

mindofmar

HUGE win!!

metamaskbot · 2024-10-17T21:16:18Z

Builds ready [3ccbd18]

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

Page Load Metrics (2006 ± 67 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1805	2410	2012	148	71
		domContentLoaded	1733	2298	1972	134	64
		load	1803	2346	2006	139	67
		domInteractive	19	103	55	25	12
		backgroundConnect	9	99	36	30	14
		firstReactRender	48	255	106	50	24
		getState	5	60	12	12	6
		initialActions	0	1	0	0	0
		loadScripts	1265	1680	1470	111	53
		setupStore	12	88	35	25	12
		uiStartup	1943	3095	2274	286	138

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

background: 426 Bytes (0.01%)
ui: 0 Bytes (0.00%)
common: 59 Bytes (0.00%)

app/scripts/metamask-controller.js

Co-authored-by: mar <72634565+mindofmar@users.noreply.github.com>

bschorchit

Love this 🔥

app/scripts/metamask-controller.js

shared/constants/metametrics.ts

…aMask/metamask-extension into feat/new-phishing-warning-ui

metamaskbot · 2024-10-21T01:36:45Z

Builds ready [473e201]

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

Page Load Metrics (2349 ± 332 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	239	4700	2226	770	370
		domContentLoaded	1665	4244	2267	534	257
		load	1682	5078	2349	692	332
		domInteractive	18	144	53	33	16
		backgroundConnect	10	799	75	175	84
		firstReactRender	53	439	133	84	40
		getState	5	317	47	68	33
		initialActions	0	45	2	10	5
		loadScripts	1189	3162	1703	438	210
		setupStore	12	384	53	79	38
		uiStartup	1873	8563	2776	1365	655

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

background: 432 Bytes (0.01%)
ui: 0 Bytes (0.00%)
common: 48 Bytes (0.00%)

…aMask/metamask-extension into feat/new-phishing-warning-ui

metamaskbot · 2024-10-21T02:17:42Z

Builds ready [d82a361]

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

Page Load Metrics (1956 ± 152 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1545	2697	1952	315	151
		domContentLoaded	1534	2688	1908	301	144
		load	1549	2702	1956	317	152
		domInteractive	20	252	59	48	23
		backgroundConnect	9	200	50	51	25
		firstReactRender	46	308	107	52	25
		getState	5	91	30	30	14
		initialActions	0	1	0	0	0
		loadScripts	1094	2067	1432	261	125
		setupStore	11	111	28	25	12
		uiStartup	1705	3068	2208	410	197

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

background: 432 Bytes (0.01%)
ui: 0 Bytes (0.00%)
common: 48 Bytes (0.00%)

metamaskbot · 2024-10-22T17:29:34Z

Builds ready [ee94373]

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

Page Load Metrics (1776 ± 126 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1492	2346	1774	246	118
		domContentLoaded	1485	2248	1734	217	104
		load	1493	2468	1776	262	126
		domInteractive	17	230	54	45	22
		backgroundConnect	7	295	43	65	31
		firstReactRender	43	204	85	34	16
		getState	4	186	25	41	20
		initialActions	0	1	0	0	0
		loadScripts	1081	1812	1280	179	86
		setupStore	11	147	41	33	16
		uiStartup	1673	3589	2021	440	211

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

background: 427 Bytes (0.01%)
ui: 0 Bytes (0.00%)
common: 48 Bytes (0.00%)

metamaskbot · 2024-10-23T15:40:30Z

Builds ready [dbde006]

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

Page Load Metrics (2169 ± 92 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	348	2539	2085	445	214
		domContentLoaded	1850	2517	2127	181	87
		load	1879	2542	2169	191	92
		domInteractive	27	97	45	16	8
		backgroundConnect	9	76	36	24	11
		firstReactRender	89	286	134	54	26
		getState	5	74	21	20	10
		initialActions	0	1	0	0	0
		loadScripts	1332	1876	1577	155	74
		setupStore	12	96	42	29	14
		uiStartup	2136	2917	2466	232	112

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

background: 427 Bytes (0.01%)
ui: 0 Bytes (0.00%)
common: 48 Bytes (0.00%)

feat: new phishing warning UI with metrics

d8f7bd7

AugmentedMode requested a review from a team as a code owner October 17, 2024 18:26

AugmentedMode marked this pull request as draft October 17, 2024 18:26

fix: merge conflicts

320af1a

fix: portfolio metamatrics text

2cfb25c

AugmentedMode self-assigned this Oct 17, 2024

AugmentedMode added the team-product-safety Push issues to Product Safety team label Oct 17, 2024

AugmentedMode added 3 commits October 17, 2024 15:23

fix: some e2e phishing ui tests

ca72d33

fix: fix test that now opens back to safety to portfolio

4d8fa84

fix: fix test that now opens back to safety to portfolio

3ccbd18

AugmentedMode marked this pull request as ready for review October 17, 2024 20:55

mindofmar approved these changes Oct 17, 2024

View reviewed changes

cryptotavares reviewed Oct 17, 2024

View reviewed changes

app/scripts/metamask-controller.js Outdated Show resolved Hide resolved

mindofmar requested changes Oct 17, 2024

View reviewed changes

app/scripts/metamask-controller.js Outdated Show resolved Hide resolved

AugmentedMode and others added 3 commits October 17, 2024 17:31

Update app/scripts/metamask-controller.js

1120234

Co-authored-by: mar <72634565+mindofmar@users.noreply.github.com>

chore: fix pr comments

4975910

Merge branch 'develop' into feat/new-phishing-warning-ui

aabd5fd

bschorchit reviewed Oct 17, 2024

View reviewed changes

app/scripts/metamask-controller.js Outdated Show resolved Hide resolved

shared/constants/metametrics.ts Outdated Show resolved Hide resolved

AugmentedMode and others added 9 commits October 17, 2024 17:38

chore: fix pr comments

a844960

Merge branch 'feat/new-phishing-warning-ui' of https://github.com/Met…

d59ef4a

…aMask/metamask-extension into feat/new-phishing-warning-ui

fix: tests that were failing because of env var

a75e0a5

Merge branch 'develop' into feat/new-phishing-warning-ui

47e1e7a

fix: phishing test for portfolio link

25aebcc

Merge branch 'feat/new-phishing-warning-ui' of https://github.com/Met…

b73d770

…aMask/metamask-extension into feat/new-phishing-warning-ui

fix tests

0b93a7f

fix: tests to pass

8d53dd4

Merge branch 'develop' into feat/new-phishing-warning-ui

473e201

AugmentedMode added 2 commits October 20, 2024 21:38

chore: remove dist changes

d87de5c

Merge branch 'feat/new-phishing-warning-ui' of https://github.com/Met…

d82a361

…aMask/metamask-extension into feat/new-phishing-warning-ui

AugmentedMode enabled auto-merge October 21, 2024 19:12

feat: standarized ways phishing metrics are sent

c0acc37

mindofmar previously approved these changes Oct 21, 2024

View reviewed changes

fix: remove marketing enable in portfolio link

6f11556

AugmentedMode dismissed mindofmar’s stale review via 6f11556 October 21, 2024 19:39

mindofmar approved these changes Oct 21, 2024

View reviewed changes

Merge branch 'develop' into feat/new-phishing-warning-ui

ee94373

cryptotavares approved these changes Oct 22, 2024

View reviewed changes

Merge branch 'develop' into feat/new-phishing-warning-ui

dbde006

AugmentedMode added this pull request to the merge queue Oct 23, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Oct 23, 2024

AugmentedMode added this pull request to the merge queue Oct 23, 2024

Merged via the queue into develop with commit be68e2c Oct 23, 2024
95 checks passed

AugmentedMode deleted the feat/new-phishing-warning-ui branch October 23, 2024 16:36

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: new phishing warning UI with metrics #27942

feat: new phishing warning UI with metrics #27942

AugmentedMode commented Oct 17, 2024 •

edited

Loading

github-actions bot commented Oct 17, 2024

socket-security bot commented Oct 17, 2024 •

edited

Loading

mindofmar left a comment

metamaskbot commented Oct 17, 2024

bschorchit left a comment

metamaskbot commented Oct 21, 2024

metamaskbot commented Oct 21, 2024

metamaskbot commented Oct 22, 2024

metamaskbot commented Oct 23, 2024

feat: new phishing warning UI with metrics #27942

feat: new phishing warning UI with metrics #27942

Conversation

AugmentedMode commented Oct 17, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Oct 17, 2024

socket-security bot commented Oct 17, 2024 • edited Loading

mindofmar left a comment

Choose a reason for hiding this comment

metamaskbot commented Oct 17, 2024

bschorchit left a comment

Choose a reason for hiding this comment

metamaskbot commented Oct 21, 2024

metamaskbot commented Oct 21, 2024

metamaskbot commented Oct 22, 2024

metamaskbot commented Oct 23, 2024

AugmentedMode commented Oct 17, 2024 •

edited

Loading

socket-security bot commented Oct 17, 2024 •

edited

Loading