metamask-extension
metamask-extension copied to clipboard
MetaMask
feat: new phishing warning UI with metrics
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 tack 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!
Related issues
Fixes:
Manual testing steps
- Go to a scam website that is found on
eth-phishing-detectsuch asweb3-lido.loland you will see the new phishing page UI! - Once on the new phishing page, you can click on
Back to safetywhich 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
- [x] I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using JSDoc format if applicable
- [x] 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.
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.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
New and removed dependencies detected. Learn more about Socket for GitHub ↗︎
| Package | New capabilities | Transitives | Size | Publisher |
|---|---|---|---|---|
| npm/@metamask/[email protected] | None | 0 |
1.86 MB | metamaskbot |
🚮 Removed packages: npm/@metamask/[email protected]
![socket-security[bot] avatar](https://avatars.githubusercontent.com/in/156372?v=4 "Published by a pub.dev verified publisher"){kind=small}
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
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%)
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
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%)
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
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%)
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
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%)
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
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%)