chore: fix pipelines

.github/workflows/ci.yml

@@ -3,8 +3,11 @@ name: CI
 on: [push]
 
 jobs:
-  tests:
+  static_checks:
     runs-on: ubuntu-latest
+    defaults:
+      run: 
+        working-directory: ./extension
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
@@ -16,7 +19,22 @@ jobs:
           cache: "pnpm"
           cache-dependency-path: "**/pnpm-lock.yaml"
       - run: pnpm install --prefer-offline
-        working-directory: ./extension
       - name: Run static checks
         run: pnpm check
+  unit_tests:
+    runs-on: ubuntu-latest
+    defaults:
+      run: 
         working-directory: ./extension
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - uses: actions/setup-node@v4
+        with:
+          node-version: latest
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+      - run: pnpm install --prefer-offline
+      - run: pnpm test:unit

extension/.cspell.json

@@ -67,16 +67,24 @@
     "walletconnect",
     "whatsabi",
     "xdai",
-    "xmlhttprequest"
+    "xmlhttprequest",
+    "serviceworker",
+    "textbox",
+    "servedir",
+    "sidepanel",
+    "sandboxed",
+    "speculationrules"
   ],
   "flagWords": [],
   "ignorePaths": [
     "package.json",
-    "package-lock.json",
+    "pnpm-lock.yaml",
     "node_modules/**",
     "tsconfig.json",
     "public/build/**",
     "public/_metadata/**",
-    "**/*.svg"
+    "playwright-report/**",
+    "**/*.svg",
+    "patches/**"
   ]
 }

extension/e2e/fixture.ts

@@ -1,13 +1,13 @@
 /* eslint-disable no-empty-pattern */
 import { test as base, chromium, type BrowserContext } from '@playwright/test'
-import path from 'path'
+import { fileURLToPath } from 'url'
 
 export const test = base.extend<{
   context: BrowserContext
   extensionId: string
 }>({
   context: async ({}, use) => {
-    const pathToExtension = path.join(__dirname, '../public')
+    const pathToExtension = fileURLToPath(new URL('../public', import.meta.url))
 
     const context = await chromium.launchPersistentContext('', {
       headless: false,

extension/esbuild.js

@@ -1,10 +1,12 @@
-// @ts-check
-const esbuild = require('esbuild')
-const cssModulesPlugin = require('esbuild-css-modules-plugin')
-const plugin = require('node-stdlib-browser/helpers/esbuild/plugin')
-const stdLibBrowser = require('node-stdlib-browser')
+import esbuild from 'esbuild'
+import cssModulesPlugin from 'esbuild-css-modules-plugin'
+import stdLibBrowser from 'node-stdlib-browser'
+import plugin from 'node-stdlib-browser/helpers/esbuild/plugin'
+import { fileURLToPath } from 'url'
 
-require('dotenv').config()
+import { config } from 'dotenv'
+
+config()
 
 const SERVE_PORT = 3999
 
@@ -38,7 +40,11 @@ esbuild
     target: ['chrome96'],
     outdir: './public/build',
     publicPath: '/build',
-    inject: [require.resolve('node-stdlib-browser/helpers/esbuild/shim')],
+    inject: [
+      fileURLToPath(
+        import.meta.resolve('node-stdlib-browser/helpers/esbuild/shim')
+      ),
+    ],
     define: {
       'process.env.LIVE_RELOAD':
         process.env.NODE_ENV === 'development'

extension/eslint.config.mjs

@@ -1,11 +1,11 @@
-import globals from 'globals'
 import { fixupPluginRules } from '@eslint/compat'
 import eslint from '@eslint/js'
-import tsEslint from 'typescript-eslint'
 import prettierConfig from 'eslint-config-prettier'
+import jsxA11y from 'eslint-plugin-jsx-a11y'
 import eslintPluginReact from 'eslint-plugin-react'
 import eslintPluginReactHooks from 'eslint-plugin-react-hooks'
-import jsxA11y from 'eslint-plugin-jsx-a11y'
+import globals from 'globals'
+import tsEslint from 'typescript-eslint'
 
 export default tsEslint.config(
   eslint.configs.recommended,
@@ -39,5 +39,12 @@ export default tsEslint.config(
         },
       ],
     },
+  },
+  {
+    ignores: ['public/build'],
+  },
+  {
+    files: ['esbuild.js', 'manifest-util.js'],
+    languageOptions: { globals: { process: true } },
   }
 )

extension/manifest-util.js

@@ -1,4 +1,4 @@
-const fs = require('fs')
+import fs from 'fs'
 
 // this script is used to update the release value
 // in the manifest.json when released through github

extension/package.json

@@ -1,6 +1,7 @@
 {
   "name": "zodiac-pilot",
   "version": "0.0.0",
+  "type": "module",
   "description": "Chrome extension to simulate dApp interactions and record transactions",
   "main": "index.js",
   "repository": "https://github.com/gnosisguild/zodiac-pilot.git",
@@ -11,11 +12,11 @@
     "build": "NODE_ENV=production rimraf public/build && node esbuild.js",
     "zip": "mv public zodiac-pilot && zip -vr zodiac-pilot.zip zodiac-pilot/ -x \"*.DS_Store\" && mv zodiac-pilot public",
     "dev": "NODE_ENV=development node esbuild.js",
-    "test": "vitest",
+    "test:unit": "vitest",
     "test:e2e": "playwright test --headed",
     "check": "pnpm check:ts && pnpm check:format && pnpm check:lint && pnpm check:spelling",
     "check:ts": "pnpm tsc --noEmit",
-    "check:lint": "eslint src",
+    "check:lint": "eslint . --max-warnings=0",
     "check:format": "prettier \"src/**/*.(ts|tsx)\" --list-different",
     "check:spelling": "cspell \"**\"",
     "fix": "pnpm fix:format && pnpm fix:lint",
@@ -41,6 +42,7 @@
     "@types/chrome": "^0.0.268",
     "@types/eslint__js": "^8.42.3",
     "@types/events": "^3.0.3",
+    "@types/jest": "^29.5.13",
     "@types/node": "^22.7.5",
     "@types/react": "^18.2.39",
     "@types/react-dom": "^18.2.17",
@@ -88,17 +90,18 @@
     "typescript": "^5.5.4",
     "typescript-eslint": "^7.16.0",
     "typescript-plugin-css-modules": "^5.1.0",
-    "vitest": "^2.0.2",
+    "vitest": "2.1.3",
+    "vitest-chrome": "0.1.0",
     "zodiac-roles-deployments": "^2.2.2"
   },
   "packageManager": "[email protected]",
   "dependencies": {
     "@epic-web/invariant": "^1.0.0",
     "react-router-dom": "^6.26.1"
   },
-  "dependenciesMeta": {
-    "[email protected]": {
-      "unplugged": true
+  "pnpm": {
+    "patchedDependencies": {
+      "vitest-chrome": "patches/vitest-chrome.patch"
     }
   }
 }

extension/patches/vitest-chrome.patch

@@ -0,0 +1,16 @@
+diff --git a/package.json b/package.json
+index 7851237425be569a2acdaf3cd3b16fc1be67ff6d..4215791da33b6c3f5d1ba8e254441edd7b803f99 100644
+--- a/package.json
++++ b/package.json
+@@ -25,6 +25,11 @@
+     "vitest-chrome-schema.json",
+     "vitest-chrome.d.ts"
+   ],
++  "exports": {
++    "types": "./types/index.d.ts",
++    "require": "./lib/index.cjs.js",
++    "import": "./lib/index.esm.js"
++  },
+   "scripts": {
+     "build": "run-s build:clean build:pro build:types build:copy",
+     "build:clean": "rm -rf lib types",

extension/playwright.config.ts

@@ -1,12 +1,7 @@
 import { defineConfig, devices } from '@playwright/test'
-
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
 import dotenv from 'dotenv'
-import path from 'path'
-dotenv.config({ path: path.resolve(__dirname, '.env') })
+
+dotenv.config()
 
 /**
  * See https://playwright.dev/docs/test-configuration.