feat: redesign UI of the phishing warning page (#176)

* feat: new ui v1 - messy code for mvp

* feat: correct twitter logo

* chore: cleanup code

* chore: cleanup code

* chore: fixing tests

* chore: cleanup

* chore: tests now pass

* chore: cleanup comments

* chore: fixed tests for Proceed anyway

* rename portfolio button to back top safety

* fix tests

* feat: design system ui updates (#177)

* fix: redirect to portfolio so that the client handles the url

* fix: update ubuntu version

* fix: set all ubuntu ci versions to 24.04 to fix dependancy issues

* fix: bring back ubuntu-latest

* fix: try ubuntu-22 packages

* fix: bring back depends

* fix: npx playwright install-deps

* chore: remove build folder

* chore: add build folder

* test: tests now pass

---------

Co-authored-by: George Marshall <[email protected]>

Author: AugmentedMode

.github/workflows/build-lint-test.yml

@@ -76,114 +76,39 @@ jobs:
   test:
     name: Run Playwright tests
     timeout-minutes: 60
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-latest # This currently uses Ubuntu 22.04
     needs:
       - prepare
     strategy:
       matrix:
         node-version: [16.x, 18.x, 20.x]
     steps:
       - uses: actions/checkout@v3
+
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'yarn'
+
       - run: yarn --immutable --immutable-cache
-      - name: Install Playwright System Dependencies
-        env:
-          DEBIAN_FRONTEND: noninteractive
-        # https://github.com/microsoft/playwright/blob/release-1.47/packages/playwright-core/src/server/registry/nativeDeps.ts
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y --no-install-recommends \
-            fonts-freefont-ttf \
-            fonts-ipafont-gothic \
-            fonts-liberation \
-            fonts-noto-color-emoji \
-            fonts-tlwg-loma-otf \
-            fonts-unifont \
-            fonts-wqy-zenhei \
-            gstreamer1.0-libav \
-            gstreamer1.0-plugins-bad \
-            gstreamer1.0-plugins-base \
-            gstreamer1.0-plugins-good \
-            libasound2t64 \
-            libatk-bridge2.0-0t64 \
-            libatk1.0-0t64 \
-            libatomic1 \
-            libatspi2.0-0t64 \
-            libcairo-gobject2 \
-            libcairo2 \
-            libcups2t64 \
-            libdbus-1-3 \
-            libdrm2 \
-            libenchant-2-2 \
-            libepoxy0 \
-            libevent-2.1-7t64 \
-            libflite1 \
-            libfontconfig1 \
-            libfreetype6 \
-            libgbm1 \
-            libgdk-pixbuf-2.0-0 \
-            libgles2 \
-            libglib2.0-0t64 \
-            libgstreamer-gl1.0-0 \
-            libgstreamer-plugins-bad1.0-0 \
-            libgstreamer-plugins-base1.0-0 \
-            libgstreamer1.0-0 \
-            libgtk-3-0t64 \
-            libharfbuzz-icu0 \
-            libharfbuzz0b \
-            libhyphen0 \
-            libicu74 \
-            libjpeg-turbo8 \
-            liblcms2-2 \
-            libmanette-0.2-0 \
-            libnspr4 \
-            libnss3 \
-            libopus0 \
-            libpango-1.0-0 \
-            libpangocairo-1.0-0 \
-            libpng16-16t64 \
-            libsecret-1-0 \
-            libsoup-3.0-0 \
-            libvpx9 \
-            libwayland-client0 \
-            libwayland-egl1 \
-            libwayland-server0 \
-            libwebp7 \
-            libwebpdemux2 \
-            libwoff1 \
-            libx11-6 \
-            libx11-xcb1 \
-            libx264-164 \
-            libxcb-shm0 \
-            libxcb1 \
-            libxcomposite1 \
-            libxcursor1 \
-            libxdamage1 \
-            libxext6 \
-            libxfixes3 \
-            libxi6 \
-            libxkbcommon0 \
-            libxml2 \
-            libxrandr2 \
-            libxrender1 \
-            libxslt1.1 \
-            xfonts-cyrillic \
-            xfonts-scalable \
-            xvfb
+
+      - name: Install Playwright Dependencies
+        run: npx playwright install-deps
+
       - name: Install Playwright Browsers
         run: yarn playwright install chrome chromium firefox msedge
+
       - name: Run Playwright tests
         run: yarn test
+
       - uses: actions/upload-artifact@v3
         if: always()
         with:
           name: playwright-report
           path: playwright-report/
           retention-days: 30
+
       - name: Require clean working directory
         shell: bash
         run: |

build/index.js

@@ -23,9 +23,7 @@ const minifiedLockdownSource = path.join(
 
 const filesFromPackages = [
   {
-    source: require.resolve(
-      '@metamask/design-tokens/src/css/design-tokens.css',
-    ),
+    source: require.resolve('@metamask/design-tokens/styles.css'),
     filename: 'design-tokens.css',
   },
   {

package.json

@@ -23,7 +23,7 @@
     "test": "yarn playwright test"
   },
   "dependencies": {
-    "@metamask/design-tokens": "^1.12.0",
+    "@metamask/design-tokens": "^4.0.0",
     "@metamask/object-multiplex": "^2.0.0",
     "@metamask/post-message-stream": "^8.0.0",
     "eth-phishing-detect": "^1.2.0",

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,18 @@ 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(),
+    });
+  });
 }