feat: redesign UI of the phishing warning page

src/index.ts

@@ -1,6 +1,5 @@
-import { toASCII, toUnicode } from 'punycode/';
+import { toUnicode } from 'punycode/';
 import { pipeline } from 'readable-stream';
-import PhishingDetector from 'eth-phishing-detect/src/detector';
 import { WindowPostMessageStream } from '@metamask/post-message-stream';
 import ObjectMultiplex from '@metamask/object-multiplex';
 
@@ -93,50 +92,8 @@ function isValidSuspectHref(href: string) {
   return disallowedProtocols.indexOf(parsedSuspectHref.protocol) < 0;
 }
 
-const newIssueUrls = {
-  metamask: 'https://github.com/MetaMask/eth-phishing-detect/issues/new',
-  phishfort: 'https://github.com/phishfort/phishfort-lists/issues/new',
-};
-
-const metamaskConfigUrl =
-  'https://raw.githubusercontent.com/MetaMask/eth-phishing-detect/master/src/config.json';
-
-/**
- * Determines whether the given URL was blocked by our phishing configuration or not.
- *
- * @param href - The blocked URL.
- * @returns `true` if this URL is blocked by our phishing configuration, `false` otherwise.
- */
-async function isBlockedByMetamask(href: string) {
-  try {
-    const response = await fetch(metamaskConfigUrl, { cache: 'no-cache' });
-    if (!response.ok) {
-      throw new Error(`Received non-200 response: ${response.status}`);
-    }
-    const config = await response.json();
-    const detector = new PhishingDetector([
-      {
-        allowlist: config.whitelist,
-        blocklist: config.blacklist,
-        fuzzylist: config.fuzzylist,
-        tolerance: config.tolerance,
-        name: 'MetaMask',
-        version: config.version,
-      },
-    ]);
-    const { hostname } = new URL(href);
-
-    const punycodeHostname = toASCII(hostname);
-    const phishingTestResponse = detector.check(punycodeHostname);
-    console.debug('Phishing config test results:', phishingTestResponse);
-
-    return phishingTestResponse.result;
-  } catch (error) {
-    console.error(error);
-    // default to assuming that it is blocked by our configuration
-    return true;
-  }
-}
+const newIssueUrl =
+  'https://github.com/MetaMask/eth-phishing-detect/issues/new';
 
 /**
  * Extract hostname and href from the query string.
@@ -181,20 +138,6 @@ function start() {
   ]);
   const phishingSafelistStream = mux.createStream('metamask-phishing-safelist');
 
-  const backToSafetyLink = document.getElementById('back-to-safety');
-  if (!backToSafetyLink) {
-    throw new Error('Unable to locate back to safety link');
-  }
-
-  backToSafetyLink.addEventListener('click', async () => {
-    phishingSafelistStream.write({
-      jsonrpc: '2.0',
-      method: 'backToSafetyPhishingWarning',
-      params: [],
-      id: createRandomId(),
-    });
-  });
-
   const { hash } = new URL(window.location.href);
   const hashContents = hash.slice(1); // drop leading '#' from hash
   const hashQueryString = new URLSearchParams(hashContents);
@@ -222,10 +165,7 @@ function start() {
   )}&body=${encodeURIComponent(toUnicode(suspectHrefUnicode))}`;
 
   newIssueLink.addEventListener('click', async () => {
-    const listName = (await isBlockedByMetamask(suspectHref))
-      ? 'metamask'
-      : 'phishfort';
-    window.location.href = `${newIssueUrls[listName]}${newIssueParams}`;
+    window.location.href = `${newIssueUrl}${newIssueParams}`;
   });
 
   const continueLink = document.getElementById('unsafe-continue');
@@ -251,4 +191,21 @@ function start() {
 
   // To know when the event listener has been added, to mitigate an e2e race condition
   continueLink.setAttribute('data-testid', 'unsafe-continue-loaded');
+
+  const portfolioLink = document.getElementById('portfolio-link');
+  if (!portfolioLink) {
+    throw new Error('Unable to locate portfolio link');
+  }
+
+  portfolioLink.addEventListener('click', async () => {
+    phishingSafelistStream.write({
+      jsonrpc: '2.0',
+      method: 'backToSafetyPhishingWarning',
+      params: [],
+      id: createRandomId(),
+    });
+
+    window.location.href =
+      'https://portfolio.metamask.io/?metamaskEntry=phishing_page_portfolio_button&marketingEnabled=true';
+  });
 }

static/index.css

@@ -30,7 +30,7 @@ html {
 }
 
 body {
-  background-color: var(--color-error-alternative);
+  background-color: black;
   height: 100%;
   display: flex;
   align-items: center;
@@ -139,7 +139,7 @@ ul {
   margin-bottom: 16px;
 }
 
-.content__header h1 {
+.header-title {
   font-family: var(--typography-s-heading-lg-font-family);
   font-weight: var(--typography-s-heading-lg-font-weight);
   font-size: var(--typography-s-heading-lg-font-size);
@@ -148,7 +148,7 @@ ul {
 }
 
 @media screen and (min-width: 768px) {
-  .content__header h1 {
+  .header-title {
     font-family: var(--typography-l-heading-lg-font-family);
     font-weight: var(--typography-l-heading-lg-font-weight);
     font-size: var(--typography-l-heading-lg-font-size);
@@ -157,9 +157,99 @@ ul {
   }
 }
 
-.content__header svg {
-  fill: var(--color-error-inverse);
-  width: 64px;
-  height: 64px;
+.warning-icon {
+  width: 82px;
+  height: 82px;
   margin-bottom: 24px;
 }
+
+.alert-text {
+  color: #b4b4b4;
+  margin-bottom: 16px; 
+}
+
+.alert-text-lists {
+  color: #b4b4b4;
+}
+
+.threat-list {
+  color: #b4b4b4;
+}
+
+.button-container {
+  display: flex;
+}
+
+.custom-button {
+  display: inline-block;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  cursor: pointer;
+  margin: 10px;
+}
+
+.custom-proceed-button {
+  display: inline-block;
+  padding: 12px 12px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  cursor: pointer;
+  margin: 10px;
+}
+
+.dashboard-button {
+  background-color: #00ff00;
+  color: black;
+  border: none;
+  font-weight: 600;
+}
+
+.proceed-button {
+  background-color: transparent;
+  color: #ffffff;
+  border: none;
+  font-weight: normal;
+}
+
+.custom-button:hover {
+  opacity: 0.8;
+}
+
+.spacer {
+  height: 16px; 
+}
+
+.spacer-larger {
+  height: 48px; 
+}
+
+.twitter-share-container {
+  display: flex;
+  align-items: center;
+  gap: 10px; 
+}
+
+.twitter-share {
+  color: white;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.twitter-share:hover {
+  text-decoration: underline;
+}
+
+.twitter-icon {
+  width: 24px; 
+  height: auto;
+}
+
+.warning-image {
+  max-width: 35%;
+  height: auto;
+}

static/index.html

@@ -13,60 +13,66 @@
       }
     </script>
     <title>MetaMask Phishing Detection</title>
-    <script
-      src="./lockdown-install.js"
-      type="text/javascript"
-      charset="utf-8"
-    ></script>
-    <script
-      src="./lockdown-run.js"
-      type="text/javascript"
-      charset="utf-8"
-    ></script>
-    <script
-      src="./lockdown-more.js"
-      type="text/javascript"
-      charset="utf-8"
-    ></script>
-    <script
-      src="./bundle.js"
-      type="text/javascript"
-      charset="utf-8"
-    ></script>
+    <script src="./lockdown-install.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./lockdown-run.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./lockdown-more.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./bundle.js" type="text/javascript" charset="utf-8"></script>
     <link rel="stylesheet" type="text/css" href="./design-tokens.css">
     <link rel="stylesheet" type="text/css" href="./index.css">
-    <link rel="icon" href="./favicon.ico" sizes="any"><!-- 32×32 -->
+    <link rel="icon" href="./favicon.ico" sizes="any">
     <link rel="icon" href="./metamask-fox.svg" type="image/svg+xml">
   </head>
   <body>
     <div class="content">
       <div class="content__header">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
-          <path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32z"/>
-        </svg>
-        <h1>
-          Deceptive site ahead
+        <img src="./warning-icon.svg" alt="Warning Icon" class="warning-icon" />
+        <h1 class="header-title">
+          This website might be harmful
         </h1>
       </div>
       <div id="content__body" class="content__body">
-        <p>
-          MetaMask flagged the site you're trying to visit as potentially deceptive. Attackers may trick you into doing something dangerous. <a id="csdbLink" rel="noopener" href='https://cryptoscamdb.org/search' target='_blank'>Learn more</a>
+        <p class="alert-text">
+          MetaMask flagged the site you're trying to visit as potentially deceptive. Attackers may trick you into doing something dangerous.
         </p>
-      </br>
-        <p>Potential threats on <span id="suspect-link"></span> include:
-          <ul>
-            <li>Fake versions of MetaMask</li>
-            <li>Secret Recovery Phrase or password theft</li>
-            <li>Malicious transactions resulting in stolen assets </li>
-          </ul>
+
+        <p class="alert-text-lists">Potential threats on <span id="suspect-link"></span> include:</p>
+        <ul class="threat-list">
+          <li>Secret Recovery Phrase or password theft</li>
+          <li>Malicious transactions resulting in stolen assets</li>
+          <li id="detection-repo">Listed on the blocklists of SEAL, ChainPatrol, or MetaMask</li>
+        </ul>
+
+        <div class="spacer"></div> 
+
+        <div class="button-container">
+          <button class="custom-button dashboard-button" id="portfolio-link">My Portfolio</button>
+          <button class="custom-proceed-button proceed-button" id="unsafe-continue">Proceed anyway</button>
+        </div>
+
+        <div class="spacer"></div>
+
+        <p class="alert-text-lists">
+          If we're flagging a legitimate website, please <a id="new-issue-link" href="#">report a detection problem.</a>
         </p>
-      </br>
-        <p>Advisory provided by multiple sources, including <span id="detection-repo">Ethereum Phishing Detector, SEAL, ChainPatrol, and PhishFort.</span>.</p>
-      </br>
-      </br>
-        <p>If we're flagging a legitimate website, please <a id="new-issue-link" href="#">report a detection problem.</a></p>
-        <p>If you understand the risks and still want to proceed, you can <a id="unsafe-continue">continue to the site.</a></p>
-        <button class="button-secondary" type="submit" id="back-to-safety">Back to safety</button>
+
+        <div class="spacer"></div> 
+        <div class="twitter-share-container">
+          <img src="./x-logo-white.png" alt="X Icon" class="twitter-icon">
+          <a
+            class="twitter-share"
+            href="https://twitter.com/intent/tweet?text=MetaMask%20just%20protected%20me%20from%20a%20phishing%20attack!%20Remember%20to%20always%20stay%20vigilant%20when%20clicking%20on%20links.%20Learn%20more%20at&url=https://metamask.io"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+          <p class="alert-text-lists">           
+            If you found this helpful, click here to share on X!
+          </p>
+          </a>
+        </div>
+
+        <div class="spacer-larger"></div> 
+
+        <img src="./metamask-phishing-white.png" alt="MetaMask Phishing Warning Image" class="warning-image">
       </div>
       <div id="content__framed-body" class="content__framed-body">
         <p>