Support glue-over-websockets

Author: SamWilsn

.eslintrc.cjs

@@ -5,6 +5,12 @@ module.exports = {
         "plugin:@typescript-eslint/recommended-requiring-type-checking",
         "prettier",
     ],
+    rules: {
+        "@typescript-eslint/no-unused-vars": [
+            "warn",
+            { argsIgnorePattern: "^_" },
+        ],
+    },
     parser: "@typescript-eslint/parser",
     plugins: ["@typescript-eslint"],
     root: true,

client/src/glue.ts

@@ -4,13 +4,34 @@ import {
     ActivateChain,
     AddEthereumChain,
     AddEthereumChainEvent,
+    EventMap,
     Glue,
     RequestAccounts,
     RequestAccountsEvent,
     SwitchEthereumChain,
     SwitchEthereumChainEvent,
 } from "@wallet-test-framework/glue";
 import assert from "assert";
+import { Client as WebSocketClient } from "rpc-websockets";
+
+type Events = { [k in keyof EventMap]: null };
+
+const EVENTS: (keyof Events)[] = (() => {
+    const helper: Events = {
+        requestaccounts: null,
+        addethereumchain: null,
+        switchethereumchain: null,
+    } as const;
+
+    const events: (keyof Events)[] = [];
+
+    let key: keyof Events;
+    for (key in helper) {
+        events.push(key);
+    }
+
+    return events;
+})();
 
 type TemplateContext = { [key: string]: string | HTMLElement };
 
@@ -452,3 +473,63 @@ export class ManualGlue extends Glue {
         });
     }
 }
+
+export class WebSocketGlue extends Glue {
+    private readonly client: WebSocketClient;
+
+    public static async connect(address: string): Promise<WebSocketGlue> {
+        const self = new WebSocketGlue(address);
+
+        const open = new Promise((res, rej) => {
+            try {
+                self.client.once("open", res);
+            } catch (e: unknown) {
+                rej(e);
+            }
+        });
+
+        self.client.connect();
+
+        await open;
+
+        for (const key of EVENTS) {
+            self.client.on(key, (evt) => self.handle(key, evt));
+            await self.client.subscribe(key);
+        }
+
+        return self;
+    }
+
+    private constructor(address: string) {
+        super();
+        this.client = new WebSocketClient(address);
+    }
+
+    private handle(key: keyof EventMap, evt: unknown): void {
+        if (!evt || typeof evt !== "object") {
+            throw new TypeError("Event argument not object");
+        }
+
+        // TODO: Validate the event object is correct.
+
+        /* eslint-disable-next-line @typescript-eslint/no-unsafe-argument,
+                                    @typescript-eslint/no-explicit-any */
+        this.emit(key, evt as any);
+    }
+
+    async activateChain(action: ActivateChain): Promise<void> {
+        await this.client.call("activateChain", [action]);
+    }
+
+    async requestAccounts(action: RequestAccounts): Promise<void> {
+        await this.client.call("requestAccounts", [action]);
+    }
+
+    async switchEthereumChain(action: SwitchEthereumChain): Promise<void> {
+        await this.client.call("switchEthereumChain", [action]);
+    }
+
+    async addEthereumChain(action: AddEthereumChain): Promise<void> {
+        await this.client.call("addEthereumChain", [action]);
+    }
+}

client/src/index.ts

@@ -1,4 +1,4 @@
-import { ManualGlue } from "./glue";
+import { ManualGlue, WebSocketGlue } from "./glue";
 import * as tests from "./tests";
 import { spawn } from "./util";
 import { Glue } from "@wallet-test-framework/glue";
@@ -87,6 +87,9 @@ function main() {
         throw "no #connect element";
     }
 
+    // Reload the page when the glue address changes.
+    window.addEventListener("hashchange", () => window.location.reload());
+
     let webSocket: WebSocket | null;
 
     connect.addEventListener(
@@ -158,11 +161,11 @@ function main() {
             };
 
             let glue: Glue;
-            const config = new URLSearchParams(window.location.hash);
+            const config = new URLSearchParams(window.location.hash.slice(1));
             const wsGlueAddress = config.get("glue");
 
             if (wsGlueAddress) {
-                throw new Error("not implemented");
+                glue = await WebSocketGlue.connect(wsGlueAddress);
             } else {
                 const glueElem = document.getElementById("container");
                 if (!glueElem) {

package-lock.json

@@ -61,7 +61,7 @@
         "@types/ws": "^8.5.4",
         "@typescript-eslint/eslint-plugin": "5.57.1",
         "@typescript-eslint/parser": "^5.57.1",
-        "@wallet-test-framework/glue": "^0.3.0",
+        "@wallet-test-framework/glue": "^0.3.1",
         "assert": "^2.0.0",
         "esbuild": "0.17.15",
         "eslint": "8.37.0",
@@ -70,6 +70,7 @@
         "mocha": "^10.2.0",
         "prettier": "2.8.7",
         "process": "^0.11.10",
+        "rpc-websockets": "^7.5.1",
         "solc": "0.8.19",
         "typescript": "^5.0.4",
         "viem": "^0.3.50"