WIP: Sidepanel

connect/README.md

@@ -1,3 +1,4 @@
-This is a minimal web app running under https://connect.pilot.gnosisguild.org to allow connecting to the user's wallet extension.
+This is an empty web app running under https://connect.pilot.gnosisguild.org to allow connecting to the user's wallet extension.
 
-It communicates with the Pilot extension side panel through `window.postMessage`.
+It's sole purpose is having a host for connecting to the wallet.
+Since extensions don't have access to injected wallets, Pilot will load this empty site in an iframe injecting a script to use it as a bridge to the wallet.

extension/.cspell.json

@@ -9,8 +9,8 @@
     "apikey",
     "arbitrum",
     "barnbridge",
-    "bitshift",
     "Bitmask",
+    "bitshift",
     "Blockhash",
     "blockie",
     "blockies",
@@ -29,6 +29,7 @@
     "hexlify",
     "honeyswap",
     "IERC20",
+    "Iframe",
     "iframes",
     "instadapp",
     "keyvaluestorage",

extension/README.md

@@ -0,0 +1,65 @@
+## Things to keep in mind
+
+### Content scripts
+
+Can access the page's DOM, but JavaScript is sandboxed from the page's execution context. They have access to `chrome.` APIs.
+
+There are multiple ways to register content scripts:
+
+1. statically via `content_scripts` in manifest.json
+2. dynamically via `chrome.scripting.registerContentScripts()` (supports [same properties](https://developer.chrome.com/docs/extensions/reference/api/scripting#type-RegisteredContentScript) as `content_scripts` in manifest.json)
+3. dynamically via `chrome.scripting.executeScript()`
+
+While options 1 and 2 will automatically run the content script once for every page load, option 3 just runs once at the moment `executeScript()` is invoked.
+So we have to manually track when a tab loads a new page to run the content script again in the context of the new page.
+
+We have yet to find a way that reliably lets us run `executeScript()` exactly once for every page.
+At the moment we use the `chrome.tabs.onUpdated` event which can trigger multiple times per page loaded.
+Thus content scripts executed in this way must handle the case that multiple instances of themselves might run in parallel.
+
+### Injected script
+
+Scripts that are inserted from content scripts via script nodes into the page's DOM. As such they run in the page's execution context. They have no access to `chrome.` APIs. Communicate with content scripts via `window.postMessage`.
+
+## src folder overview
+
+### panel
+
+React app running in the sidePanel document. Does not have access to window.ethereum provided by the user's wallet extension.
+
+### connect
+
+Establish a connection to the user's wallet provided by another extension, such as MetaMask. We connect using an extra iframe we inject to every active tab. This allows us to connect to the wallet under origin `connect.pilot.gnosisguild.org`.
+The communication between the injected wallet in the iframe and the Eip1193 provider in the app, goes through messages:
+
+```
+REQUEST:
+panel --runtime.tabs.sendMessage()--> connect/contentScript --iframe.window.postMessage()--> connect/injectedScript
+
+RESPONSE
+connect/injectedScript --window.top.postMessage()--> connect/contentScript --runtime.tabs.sendMessage.sendResponse()--> panel
+```
+
+### inject
+
+Override the `window.ethereum` injected provider for apps to connect to Pilot. Will only be injected to pages that are loaded while the panel is open.
+
+Wallet requests will be relayed to the panel app through messages:
+
+```
+inject/InjectedProvider --window.top.postMessage()--> inject/contentScript --runtime.tabs.sendMessage.sendResponse()--> panel
+```
+
+### monitor
+
+Injected only to the top-level window (not child frames windows), this content script is responsible for hinting the user about required page reload after panel toggling.
+
+### background
+
+The background script, handling tracking of tabs with active Pilot sessions and simulations and RPC request intercepting. There is always only a single running instance of the script across all windows.
+
+Communication between the background script and the panel app goes exclusively through a single port.
+
+### components
+
+A collection of React UI components. These components implement pure, self-contained UI controls so they could eventually make up a design system.

extension/esbuild.js

@@ -6,15 +6,24 @@ const stdLibBrowser = require('node-stdlib-browser')
 
 require('dotenv').config()
 
+const SERVE_PORT = 3999
+
 esbuild
   .context({
     entryPoints: [
-      './src/background.ts',
-      './src/contentScript.ts',
-      './src/introduce.ts',
-      './src/launch.ts',
-      './src/injection.ts',
-      './src/app.tsx',
+      './src/background/index.ts',
+
+      './src/connect/contentScript.ts',
+      './src/connect/contentScriptIframe.ts',
+      './src/connect/injectedScript.ts',
+
+      './src/inject/injectedScript.ts',
+      './src/inject/contentScript.ts',
+
+      './src/monitor/injectedScript.ts',
+      './src/monitor/contentScript.ts',
+
+      './src/panel/app.tsx',
     ],
     bundle: true,
     minify: process.env.NODE_ENV === 'production',
@@ -24,20 +33,25 @@ esbuild
       '.woff': 'file',
       '.woff2': 'file',
       '.png': 'file',
+      '.html': 'text',
     },
     target: ['chrome96'],
     outdir: './public/build',
     publicPath: '/build',
     inject: [require.resolve('node-stdlib-browser/helpers/esbuild/shim')],
     define: {
-      'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`,
+      'process.env.LIVE_RELOAD':
+        process.env.NODE_ENV === 'development'
+          ? `"http://127.0.0.1:${SERVE_PORT}/esbuild"`
+          : 'false',
       global: 'window',
     },
     plugins: [plugin(stdLibBrowser), cssModulesPlugin()],
     logLevel: 'info',
   })
   .then(async (ctx) => {
     if (process.env.NODE_ENV === 'development') {
+      await ctx.serve({ port: SERVE_PORT, servedir: './public' })
       await ctx.watch()
     } else {
       await ctx.rebuild()

extension/package.json

@@ -36,7 +36,7 @@
     "@testing-library/dom": "^10.3.1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
-    "@types/chrome": "^0.0.233",
+    "@types/chrome": "^0.0.268",
     "@types/eslint__js": "^8.42.3",
     "@types/events": "^3.0.3",
     "@types/react": "^18.2.39",
@@ -87,5 +87,8 @@
     "vitest": "^2.0.2",
     "zodiac-roles-deployments": "^2.2.2"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "react-router-dom": "^6.26.1"
+  }
 }

extension/public/manifest.json

@@ -10,16 +10,27 @@
     "128": "zodiac128.png"
   },
   "action": {
-    "default_title": "Zodiac Pilot"
+    "default_title": "Click to open Zodiac Pilot panel"
+  },
+  "side_panel": {
+    "default_path": "sidepanel.html"
+  },
+  "externally_connectable": {
+    "matches": [
+      "<all_urls>"
+    ]
   },
   "permissions": [
+    "sidePanel",
     "tabs",
+    "scripting",
     "declarativeNetRequestWithHostAccess",
     "declarativeNetRequestFeedback",
-    "webRequest"
+    "webRequest",
+    "storage"
   ],
   "background": {
-    "service_worker": "build/background.js"
+    "service_worker": "build/background/index.js"
   },
   "host_permissions": [
     "<all_urls>"
@@ -29,28 +40,38 @@
       "matches": [
         "<all_urls>"
       ],
+      "exclude_globs": [
+        "https://connect.pilot.gnosisguild.org/",
+        "about:*",
+        "chrome:*"
+      ],
       "run_at": "document_start",
-      "all_frames": true,
       "js": [
-        "build/contentScript.js"
+        "build/connect/contentScript.js"
       ]
     },
     {
       "matches": [
-        "https://pilot.gnosisguild.org/"
+        "<all_urls>"
+      ],
+      "exclude_globs": [
+        "https://connect.pilot.gnosisguild.org/",
+        "about:*",
+        "chrome:*"
       ],
       "run_at": "document_start",
       "js": [
-        "build/introduce.js"
+        "build/monitor/contentScript.js"
       ]
     },
     {
       "matches": [
-        "https://pilot.gnosisguild.org/"
+        "https://connect.pilot.gnosisguild.org/"
       ],
-      "run_at": "document_end",
+      "run_at": "document_start",
+      "all_frames": true,
       "js": [
-        "build/launch.js"
+        "build/connect/contentScriptIframe.js"
       ]
     }
   ],

extension/public/sidepanel.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" type="image/png" href="zodiac32.png" sizes="32x32" />
+  <link rel="icon" type="image/png" href="zodiac128.png" sizes="128x128" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta
+    name="description"
+    content="Simulate dApp interactions and record transactions"
+  />
+  <title>Zodiac Pilot</title>
+  <link rel="stylesheet" href="/build/panel/app.css" />
+  <script src="/build/panel/app.js" defer></script>
+</head>
+<body>
+  <div id="root"></div>
+</body>