TW-1343: [epic] EVM arch prep

.browserslistrc

@@ -1,8 +1,7 @@
 [production]
 chrome >= 103
 firefox >= 52
-opera >= 36
-safari >= 14
+opera >= 70
 
 [development]
 last 1 chrome version

.eslintrc

@@ -1,18 +1,34 @@
 {
+  "root": true,
+
   "extends": [
-    "react-app",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/strict",
+    "plugin:jsx-a11y/strict",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
     "plugin:import/errors",
     "plugin:import/warnings",
     "plugin:import/typescript"
   ],
-  "plugins": ["import", "prettier", "no-type-assertion"],
-  "parser": "@typescript-eslint/parser",
+
+  "plugins": ["import", "prettier", "@typescript-eslint", "no-type-assertion", "react", "react-hooks", "jsx-a11y"],
+
+  "ignorePatterns": "src/**/*.embed.js",
+
   "overrides": [{
-    "files": ["*.ts", "*.tsx"],
+    "files": ["**/*.ts?(x)"],
+
+    "parser": "@typescript-eslint/parser",
     "parserOptions": {
-      "project": ["./tsconfig.json", "./e2e/tsconfig.json", "./webpack/tsconfig.json"]
+      "ecmaVersion": 2020,
+
+      // typescript-eslint specific options
+      "project": ["tsconfig.json", "e2e/tsconfig.json", "webpack/tsconfig.json"],
+      "warnOnUnsupportedTypeScriptVersion": true
     }
   }],
+
   "settings": {
     "import/resolver": {
       "typescript": {
@@ -21,12 +37,24 @@
       "node": {
         "extensions": [".d.ts"]
       }
+    },
+    "react": {
+      "version": "detect"
     }
   },
-  "ignorePatterns": "src/**/*.embed.js",
+
   "rules": {
     "prettier/prettier": "error",
+
     "prefer-const": "error",
+    "no-undef": "off",
+    "no-unused-vars": "off",
+    "no-empty": "warn",
+    "no-case-declarations": "off",
+    "prefer-rest-params": "off",
+    "no-async-promise-executor": "off",
+    "no-prototype-builtins": "warn",
+
     "import/no-duplicates": "error",
     "import/no-named-as-default": "off",
     "import/no-named-as-default-member": "off",
@@ -51,12 +79,41 @@
         "newlines-between": "always"
       }
     ],
+
     "no-type-assertion/no-type-assertion": "warn",
+
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/await-thenable": "error",
     "@typescript-eslint/prefer-ts-expect-error": "error",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/unified-signatures": "off",
+    "@typescript-eslint/switch-exhaustiveness-check": "warn",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/no-invalid-void-type": "off",
+    "@typescript-eslint/ban-types": "warn",
+    "@typescript-eslint/no-dynamic-delete": "off",
+    "@typescript-eslint/prefer-literal-enum-member": "off",
+    "@typescript-eslint/no-unnecessary-boolean-literal-compare": "off",
+
+    "react/prop-types": "off",
+    "react/display-name": "off",
     "react-hooks/rules-of-hooks": "warn",
     "react-hooks/exhaustive-deps": ["warn", {
-      "additionalHooks": "(useMemoWithCompare|useDidUpdate)"
-    }]
+      "additionalHooks": "(useMemoWithCompare|useDidUpdate|useInterval)"
+    }],
+    "react/jsx-key": "warn",
+    "react/no-unescaped-entities": "off",
+
+    "jsx-a11y/no-autofocus": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-noninteractive-element-interactions": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "jsx-a11y/alt-text": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+    "jsx-a11y/media-has-caption": "warn",
+    "jsx-a11y/no-noninteractive-tabindex": "off",
+    "jsx-a11y/tabindex-no-positive": "off"
   }
 }

.github/workflows/code-quality.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - master
       - development
+      - development-2
       - 'TW-[0-9]+-epic-**'
 
 jobs:

.github/workflows/manual-builds.yml

@@ -133,7 +133,7 @@ jobs:
         uses: adrey/slack-file-upload-action@master
         with:
           token: ${{ secrets.SLACK_E2E_VIDEO_UPLOADER_TOKEN }}
-          path: e2e/video-rep/test-runs.mp4
+          path: e2e/test-results/video-result.webm
           channel: temple-test-runs
           initial_comment: <https://github.com/madfish-solutions/templewallet-extension/pull/${{ github.event.number }}|${{ github.event.pull_request.title }}>  (Run <https://github.com/madfish-solutions/templewallet-extension/actions/runs/${{ github.run_id }}|№${{ github.run_number }}>)
 

.gitignore

@@ -19,6 +19,7 @@ node_modules/
 .DS_Store
 /.idea
 .vscode
+.npmrc
 
 npm-debug.log*
 yarn-debug.log*

README.md

@@ -1,4 +1,4 @@
-# Temple - Tezos Wallet
+# Temple Wallet
 
 Cryptocurrency wallet for [Tezos blockchain](https://tezos.com) as Web Extension for your Browser.<br>
 Providing ability to manage NFT, tez tokens and interact with dApps.

audit-deps.js

@@ -5,7 +5,11 @@ exec('yarn audit --level high', (error, stdout, stderr) => {
     console.log(stdout);
 
     if (stdout.includes('High') || stdout.includes('Critical')) {
-      throw new Error('Audit failed');
+      const countHigh = stdout.match(/Severity: .* (\d+) High/)?.[1];
+      const countCritical = stdout.match(/Severity: .* (\d+) Critical/)?.[1];
+      const count = (countHigh ? Number(countHigh) : 0) + (countCritical ? Number(countCritical) : 0);
+
+      throw new Error(`Audit failed with ${count} vulnerabilities`);
     }
   }
 });

e2e/.gitignore

@@ -0,0 +1,6 @@
+# dependencies
+node_modules/
+
+.env
+
+test-results/

e2e/package.json

@@ -1,41 +1,20 @@
 {
   "name": "temple-wallet-extension-e2e",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "private": true,
   "license": "MIT",
   "scripts": {
-    "start": "./node_modules/.bin/cucumber-js --fail-fast",
-    "start:dev": "yarn start --tags @dev",
-    "start:NFT": "yarn start --tags @collectibles",
-    "start:remove_account": "yarn start --tags @remove_account",
-    "start:create_account": "yarn start --tags @create_account",
-    "start:address_book": "yarn start --tags @address_book",
-    "start:custom_node": "yarn start --tags @custom_node",
-    "start:unlock_screen": "yarn start --tags @unlock_screen",
-    "start:manage_assets": "yarn start --tags @manage_assets",
-    "start:home": "yarn start --tags @home",
-    "start:create_new_wallet": "yarn start --tags @create_new_wallet",
-    "start:delegate": "yarn start --tags @delegate",
-    "start:import_account_mnemonic": "yarn start --tags @import_account_mnemonic",
-    "start:import_account_private_key": "yarn start --tags @import_account_private_key",
-    "start:import_account_public_key": "yarn start --tags @import_account_public_key",
-    "start:import_wallet": "yarn start --tags @import_wallet",
-    "start:reveal_private_key": "yarn start --tags @reveal_private_key",
-    "start:reveal_mnemonic": "yarn start --tags @reveal_mnemonic",
-    "start:send": "yarn start --tags @send",
-    "start:swap": "yarn start --tags @swap",
-    "start:notifications": "yarn start --tags @notifications",
-    "test": "yarn start --exit --tags 'not @dev'",
+    "install": "yarn playwright install chromium",
+    "test": "yarn playwright test",
+    "test-fast": "yarn playwright test --max-failures=1",
     "ts": "tsc --pretty"
   },
   "dependencies": {
-    "@cucumber/cucumber": "^9.4.0",
-    "@types/chai": "^4.3.4",
+    "@playwright/test": "^1.44.0",
+    "@types/node": "^20.12.2",
     "async-retry": "^1.3.3",
-    "chai": "^4.3.7",
     "dotenv": "^16.0.3",
-    "puppeteer": "^19.11.1",
-    "puppeteer-screen-recorder": "^2.1.2",
+    "playwright": "^1.44.0",
     "ts-node": "^10.9.1"
   }
 }

e2e/playwright.config.ts

@@ -0,0 +1,15 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  fullyParallel: false,
+  testDir: './src',
+  workers: 1,
+  projects: [
+    {
+      name: 'chromium',
+      use: { browserName: 'chromium' }
+    }
+  ]
+};
+
+export default config;

e2e/src/classes/browser-context.class.ts

@@ -1,17 +1,8 @@
-import { Browser, Page } from 'puppeteer';
-import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder';
+import { BrowserContext, Page } from '@playwright/test';
 
-import { envVars } from '../utils/env.utils';
-
-export class BrowserContext {
-  public static EXTENSION_ID: string;
-  public static browser: Browser;
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+export class CustomBrowserContext {
+  public static EXTENSION_URL: string;
+  public static browser: BrowserContext;
   public static page: Page;
-  public static seedPhrase = envVars.DEFAULT_HD_ACCOUNT_SEED_PHRASE;
-  public static password = envVars.DEFAULT_PASSWORD;
-  public static recorder: PuppeteerScreenRecorder;
-  public static resetPrivates = () => {
-    BrowserContext.seedPhrase = envVars.DEFAULT_HD_ACCOUNT_SEED_PHRASE;
-    BrowserContext.password = envVars.DEFAULT_PASSWORD;
-  };
 }

e2e/src/classes/page.class.ts

@@ -1,10 +1,10 @@
-import { BrowserContext } from 'e2e/src/classes/browser-context.class';
+import { CustomBrowserContext } from './browser-context.class';
 
 export abstract class Page {
   abstract isVisible(timeout?: number): void;
 
   scrollTo(topPositionPx: number) {
-    return BrowserContext.page.evaluate(top => {
+    return CustomBrowserContext.page.evaluate(top => {
       if (top <= 0 && window.pageYOffset === 0) return Promise.resolve(false);
 
       window.scrollTo({ top, behavior: 'smooth' });