chore(rln-js): convert to typescript (#54)

examples/experimental/rln-identity/webpack.config.js

@@ -2,15 +2,27 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
 const path = require("path");
 
 module.exports = {
-  entry: "./src/index.js",
+  entry: "./src/index.ts",
   output: {
     path: path.resolve(__dirname, "build"),
-    filename: "./index.js",
+    filename: "index.js",
   },
   experiments: {
     asyncWebAssembly: true,
   },
   mode: "development",
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
   plugins: [
     new CopyWebpackPlugin({
       patterns: ["index.html", "favicon.ico", "favicon.png", "manifest.json"],

examples/experimental/rln-js/package.json

@@ -17,6 +17,8 @@
     "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8",
     "eslint-config-next": "13.5.6",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1"

examples/experimental/rln-js/src/rln.ts

@@ -0,0 +1,67 @@
+import { RLNInstance, createRLN, extractMetaMaskSigner } from "@waku/rln";
+import { Signer } from "ethers";
+import { StatusChangeArgs } from "./types";
+
+export async function initRLN(onStatusChange: ({}: StatusChangeArgs) => void) {
+  onStatusChange({
+    newStatus: "Initializing RLN..."
+  });
+
+  let rln: RLNInstance;
+  try {
+    console.time("createRLN")
+    rln = await createRLN();
+    console.timeEnd("createRLN")
+  } catch (err) {
+    onStatusChange({
+      newStatus: `Failed to initialize RLN: ${err}`,
+      className: "error"
+    });
+    throw err;
+  }
+
+  onStatusChange({
+    newStatus: "RLN initialized",
+    className: "success"
+  });
+
+  const connectWallet = async () => {
+    let signer: Signer;
+    try {
+      onStatusChange({
+        newStatus: "Connecting to wallet..."
+      });
+      signer = await extractMetaMaskSigner();
+      console.log("done")
+    } catch (err) {
+      onStatusChange({
+        newStatus: `Failed to access MetaMask: ${err}`,
+        className: "error"
+      });
+      throw err;
+    }
+
+    try {
+      onStatusChange({
+        newStatus: "Connecting to Ethereum..."
+      });
+      await rln.start({ signer });
+    } catch (err) {
+      onStatusChange({
+        newStatus: `Failed to connect to Ethereum: ${err}`,
+        className: "error"
+      });
+      throw err;
+    }
+
+    onStatusChange({
+      newStatus: "RLN started",
+      className: "success"
+    });
+  };
+
+  return {
+    rln,
+    connectWallet,
+  };
+}

examples/experimental/rln-js/src/types.ts

@@ -0,0 +1,4 @@
+export type StatusChangeArgs = {
+    newStatus: string,
+    className?: string
+}

examples/experimental/rln-js/src/ui.ts

@@ -0,0 +1,102 @@
+import { StatusChangeArgs } from "./types";
+
+const status = document.getElementById("status");
+const chat = document.getElementById("chat-area");
+const messages = document.getElementById("messages");
+
+const nickInput = document.getElementById("nick") as HTMLInputElement;
+const textInput = document.getElementById("text") as HTMLInputElement;
+const sendButton = document.getElementById("send") as HTMLInputElement;
+
+const connectWalletButton = document.getElementById("connect");
+
+export const initUI = () => {
+  const onStatusChange = ({ newStatus, className }: StatusChangeArgs) => {
+    if (!status) {
+      console.log("Status element not found.");
+      return;
+    }
+    status.innerText = newStatus;
+    status.className = className || "progress";
+  };
+
+  const onLoaded = () => {
+    if (!chat) {
+      console.log("Chat element not found.");
+      return;
+    }
+    chat.style.display = "block";
+  };
+
+  const _renderMessage = (nick: string, text: string, timestamp: number, proofStatus: string) => {
+    if (!messages) {
+      console.log("Messages element not found.");
+      return;
+    }
+    messages.innerHTML += `
+            <li>
+                (${nick})(${proofStatus})
+                <strong>${text}</strong>
+                <i>[${new Date(timestamp).toISOString()}]</i>
+            </li>
+        `;
+  };
+
+  type Events = {
+    connectWallet: () => Promise<void>,
+    onInitWaku: () => Promise<void>,
+    onSubscribe: (cb: (nick: string, text: string, timestamp: number, proofStatus: string) => void) => void,
+    onSend: (nick: string, text: string) => Promise<void>,
+  }
+
+  const registerEvents = (events: Events) => {
+    if (!connectWalletButton) {
+      console.log("Connect wallet button not found.");
+      return;
+    }
+
+    if (!sendButton) {
+      console.log("Send button not found.");
+      return;
+    }
+
+    connectWalletButton.addEventListener("click", async () => {
+      await events.connectWallet();
+      await events.onInitWaku();
+
+      onLoaded();
+
+      events.onSubscribe((nick: string, text: string, timestamp: number, proofStatus: string) => {
+        _renderMessage(nick, text, timestamp, proofStatus);
+      });
+
+
+      sendButton.addEventListener("click", async () => {
+        if (!nickInput || !textInput) {
+          console.log("Nick or text input not found.");
+          return;
+        }
+        if (!events.onSend) {
+          console.log("onSend event not found.");
+          return;
+        }
+
+        const nick = nickInput.value;
+        const text = textInput.value;
+
+        if (!nick || !text) {
+          console.log("Not sending message: missing nick or text.");
+          return;
+        }
+
+        await events.onSend(nick, text);
+        textInput.value = "";
+      });
+    });
+  };
+
+  return {
+    registerEvents,
+    onStatusChange,
+  };
+};