feat: new phishing warning UI with metrics

app/scripts/metamask-controller.js

@@ -6652,12 +6652,33 @@ export default class MetamaskController extends EventEmitter {
    * @param {string} origin - the domain to safelist
    */
   safelistPhishingDomain(origin) {
+    this.metaMetricsController.trackEvent({
+      category: MetaMetricsEventCategory.Phishing,
+      event: MetaMetricsEventName.ProceedAnywayPhishingPage,
+      properties: {
+        url: origin,
+        referrer: {
+          url: origin,
+        },
+      },
+    });
+
     return this.phishingController.bypass(origin);
   }
 
   async backToSafetyPhishingWarning() {
-    const extensionURL = this.platform.getExtensionURL();
-    await this.platform.switchToAnotherURL(undefined, extensionURL);
+    const portfolioURL = `${process.env.PORTFOLIO_URL}/?metamaskEntry=phishing_page_portfolio_button&marketingEnabled=true`;
+
+    this.metaMetricsController.trackEvent({
+      category: MetaMetricsEventCategory.Navigation,
+      event: MetaMetricsEventName.PortfolioLinkClicked,
+      properties: {
+        location: 'Phishing Warning',
+        text: 'Back to safety',
+      },
+    });
+
+    await this.platform.switchToAnotherURL(undefined, portfolioURL);
   }
 
   /**

package.json

@@ -476,7 +476,7 @@
     "@metamask/eslint-config-typescript": "^9.0.1",
     "@metamask/eslint-plugin-design-tokens": "^1.1.0",
     "@metamask/forwarder": "^1.1.0",
-    "@metamask/phishing-warning": "^4.0.0",
+    "@metamask/phishing-warning": "^4.1.0",
     "@metamask/preferences-controller": "^13.0.2",
     "@metamask/test-bundler": "^1.0.0",
     "@metamask/test-dapp": "8.7.0",

shared/constants/metametrics.ts

@@ -601,6 +601,7 @@ export enum MetaMetricsEventName {
   PetnameModalOpened = 'Petname Modal Opened',
   PetnameUpdated = 'Petname Updated',
   PhishingPageDisplayed = 'Phishing Page Displayed',
+  ProceedAnywayPhishingPage = 'Proceed Anyway Phishing Page',
   PortfolioLinkClicked = 'Portfolio Link Clicked',
   ProviderMethodCalled = 'Provider Method Called',
   PublicAddressCopied = 'Public Address Copied',

test/e2e/tests/phishing-controller/phishing-detection.spec.js

@@ -59,7 +59,7 @@ describe('Phishing Detection', function () {
         await openDapp(driver);
         await driver.switchToWindowWithTitle('MetaMask Phishing Detection');
         await driver.clickElement({
-          text: 'continue to the site.',
+          text: 'Proceed anyway',
         });
         await driver.wait(until.titleIs(WINDOW_TITLES.TestDApp), 10000);
       },
@@ -104,7 +104,7 @@ describe('Phishing Detection', function () {
 
         await driver.switchToWindowWithTitle('MetaMask Phishing Detection');
         await driver.clickElement({
-          text: 'continue to the site.',
+          text: 'Proceed anyway',
         });
 
         await driver.wait(until.titleIs(WINDOW_TITLES.TestDApp), 10000);
@@ -170,7 +170,7 @@ describe('Phishing Detection', function () {
         });
         await driver.switchToWindowWithTitle('MetaMask Phishing Detection');
         await driver.clickElement({
-          text: 'continue to the site.',
+          text: 'Proceed anyway',
         });
 
         // We don't really know what we're going to see at this blocked site, so a waitAtLeast guard of 1000ms is the best choice
@@ -253,7 +253,7 @@ describe('Phishing Detection', function () {
     );
   });
 
-  it('should open a new extension expanded view when clicking back to safety button', async function () {
+  it('should open MetaMask Portfolio when clicking back to safety button', async function () {
     await withFixtures(
       {
         fixtures: new FixtureBuilder().build(),
@@ -290,11 +290,11 @@ describe('Phishing Detection', function () {
           text: 'Back to safety',
         });
 
-        // Ensure we're redirected to wallet home page
-        const homePage = await driver.findElement('.home__main-view');
-        const homePageDisplayed = await homePage.isDisplayed();
+        const currentUrl = await driver.getCurrentUrl();
+        const expectedPortfolioUrl =
+          'https://portfolio.metamask.io/?metamaskEntry=phishing_page_portfolio_button&marketingEnabled=true';
 
-        assert.equal(homePageDisplayed, true);
+        assert.equal(currentUrl, expectedPortfolioUrl);
       },
     );
   });

yarn.lock

@@ -5031,13 +5031,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/design-tokens@npm:^1.12.0":
-  version: 1.13.0
-  resolution: "@metamask/design-tokens@npm:1.13.0"
-  checksum: 10/a76d10ad3ad6f1f30bf3b8e749e70c71587fd543fafd355b6185fb191994547acb63408c6d5ac4a53c4aa1f9e4022cd63ad83bd98cbac79f21f5bc7df15e63ab
-  languageName: node
-  linkType: hard
-
 "@metamask/design-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "@metamask/design-tokens@npm:4.0.0"
@@ -5966,18 +5959,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/phishing-warning@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "@metamask/phishing-warning@npm:4.0.0"
+"@metamask/phishing-warning@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "@metamask/phishing-warning@npm:4.1.0"
   dependencies:
-    "@metamask/design-tokens": "npm:^1.12.0"
+    "@metamask/design-tokens": "npm:^4.0.0"
     "@metamask/object-multiplex": "npm:^2.0.0"
     "@metamask/post-message-stream": "npm:^8.0.0"
     eth-phishing-detect: "npm:^1.2.0"
     punycode: "npm:^2.3.1"
     readable-stream: "npm:^3.6.2"
     ses: "npm:^1.1.0"
-  checksum: 10/0f85b92880d47a5d9810605574231b5a4b4ab7ac4192d9799c1c95187efd4da3ca5ea7412aeb6aa00eb0aaac3aaad987d28868fdaad1347e24e0d72ce95c6524
+  checksum: 10/6bb1ef9dc2f9dcbcfd3472855dca579e6f7b155082e95bf16259ef734ca8baeb0cd5ab3f06b583c7fc73393e4b03e5ec3937130e19aa98e9a003378c0179a2ed
   languageName: node
   linkType: hard
 
@@ -26146,7 +26139,7 @@ __metadata:
     "@metamask/permission-controller": "npm:^10.0.0"
     "@metamask/permission-log-controller": "npm:^2.0.1"
     "@metamask/phishing-controller": "npm:^12.0.1"
-    "@metamask/phishing-warning": "npm:^4.0.0"
+    "@metamask/phishing-warning": "npm:^4.1.0"
     "@metamask/post-message-stream": "npm:^8.0.0"
     "@metamask/ppom-validator": "npm:0.35.1"
     "@metamask/preferences-controller": "npm:^13.0.2"