Node Tester SDK examples (#3641)

* create parcel example * update plain html example * move chat examples into own dir * add examples to workspace * update tsconfig path * move webpack base to parent dir
2023-07-05 16:14:21 +01:00
parent a881740c20
commit ad995b1934
51 changed files with 244 additions and 51 deletions
@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "outDir": "./dist"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "build", "dist"]
+}
@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "outDir": "./dist"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "build", "dist"]
+}
@@ -1,6 +1,6 @@
 const path = require('path');
 const { mergeWithRules } = require('webpack-merge');
-const { webpackCommon } = require('../.webpack/webpack.base');
+const { webpackCommon } = require('../../.webpack/webpack.base');

 module.exports = mergeWithRules({
  module: {
@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "outDir": "./dist"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "build", "dist"]
+}
@@ -0,0 +1,14 @@
+# Nym Node Tester - Parcel bundler
+
+This is an example of using the Nym Mixnet node tester.
+
+You can use this example as a seed for a new project.
+
+## Running the example
+
+Try out the node tester app by running:
+
+```
+npm install
+npm start
+```
@@ -0,0 +1,43 @@
+{
+  "name": "@nymproject/sdk-example-node-tester-plain-html-parcel",
+  "description": "An example project that uses WASM and plain HTML bundled with Parcel v2",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "source": "src/index.html",
+  "browserslist": "> 0.5%, last 2 versions, not dead",
+  "dependencies": {
+    "@nymproject/sdk": "1"
+  },
+  "devDependencies": {
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@typescript-eslint/eslint-plugin": "^5.13.0",
+    "@typescript-eslint/parser": "^5.13.0",
+    "eslint": "^8.10.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^16.1.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-root-import": "^1.0.4",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^26.1.1",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^27.1.0",
+    "mini-css-extract-plugin": "^2.2.2",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.7",
+    "ts-jest": "^27.0.5",
+    "typescript": "^4.6.2"
+  },
+  "scripts": {
+    "start": "npx parcel",
+    "build": "npx parcel build",
+    "build:serve": "npx serve dist",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "tsc": "tsc",
+    "tsc:watch": "tsc --watch",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix"
+  }
+}
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Nym WebAssembly Demo</title>
+</head>
+
+<body>
+<p>
+  <label>Mixnode Id: </label><input size="85" type="text" id="mixnodeId" value="">
+</p>
+<p>
+  <button id="test-button">Test</button>
+  <button id="disconnect-button">Disconnect from Gateway</button>
+  <button id="reconnect-button">Reconnect to Gateway</button>
+  <button id="terminate-button">Terminate worker</button>
+</p>
+
+<p>Test a mixnode by entering the mixnode id above and click the Test button</p>
+
+<hr>
+<p>
+<div id="output"></div>
+</p>
+<script src="./index.ts" type="module"></script>
+</body>
+</html>
@@ -0,0 +1,118 @@
+import { createNodeTesterClient, NodeTester } from '@nymproject/sdk';
+
+let nodeTester: NodeTester | null = null;
+
+/**
+ * Display messages that have been sent up the websocket. Colours them blue.
+ *
+ * @param {string} message
+ */
+function displayOutput(message: string, color?: string) {
+  const timestamp = new Date().toISOString().substr(11, 12);
+
+  const sendDiv = document.createElement('div');
+  const paragraph = document.createElement('p');
+  paragraph.setAttribute('style', `color: ${color || 'blue'}`);
+  const paragraphContent = document.createTextNode(`${timestamp} >>> ${message}`);
+  paragraph.appendChild(paragraphContent);
+
+  sendDiv.appendChild(paragraph);
+  document.getElementById('output')?.appendChild(sendDiv);
+}
+
+/**
+ * The main entry point
+ */
+async function main() {
+  nodeTester = await createNodeTesterClient();
+
+  // add node tester to the Window globally, so that it can be used from the dev tools console
+  (window as any).nodeTester = nodeTester;
+
+  if (!nodeTester) {
+    console.error('Oh no! Could not the node test');
+    return;
+  }
+
+  const nymApiUrl = 'https://validator.nymtech.net/api';
+  const nodeTesterId = new Date().toISOString(); // make a new tester id for each session
+  await nodeTester.tester.init(nymApiUrl, nodeTesterId);
+
+  const mixnodes = await (await fetch(`${nymApiUrl}/v1/mixnodes/active`)).json();
+
+  const exampleMixnodeIdentityKey = mixnodes[0].bond_information.mix_node.identity_key;
+
+  const testButton: HTMLButtonElement = document.querySelector('#test-button') as HTMLButtonElement;
+  const reconnectButton: HTMLButtonElement = document.querySelector('#reconnect-button') as HTMLButtonElement;
+  const disconnectButton: HTMLButtonElement = document.querySelector('#disconnect-button') as HTMLButtonElement;
+  const terminateButton: HTMLButtonElement = document.querySelector('#terminate-button') as HTMLButtonElement;
+
+  const mixnodeIdInput = document.getElementById('mixnodeId') as HTMLFormElement;
+
+  mixnodeIdInput.value = exampleMixnodeIdentityKey;
+
+  reconnectButton.onclick = async function () {
+    try {
+      await nodeTester?.tester.reconnectToGateway();
+    } catch (e: any) {
+      console.error('Error', e);
+      displayOutput(`ERROR: ${e.message}`, 'red');
+    }
+  };
+
+  disconnectButton.onclick = async function () {
+    try {
+      await nodeTester?.tester.disconnectFromGateway();
+    } catch (e: any) {
+      console.error('Error', e);
+      displayOutput(`ERROR: ${e.message}`, 'red');
+    }
+  };
+
+  terminateButton.onclick = async function () {
+    try {
+      await nodeTester?.terminate();
+    } catch (e: any) {
+      console.error('Error', e);
+      displayOutput(`ERROR: ${e.message}`, 'red');
+    }
+  };
+
+  if (testButton) {
+    testButton.onclick = async function () {
+      console.log('clicked');
+
+      const mixnodeId = mixnodeIdInput.value;
+      if (!nodeTester) {
+        displayOutput('ERROR: The node tester is not defined');
+        console.error('The node tester is not defined');
+        return;
+      }
+      if (!mixnodeId) {
+        displayOutput('ERROR: No mix id specified');
+        console.error('No mix id specified');
+        return;
+      }
+
+      if (nodeTester && mixnodeId) {
+        displayOutput('Starting test...');
+        try {
+          const response = await nodeTester.tester.startTest(mixnodeId);
+          displayOutput('Done!');
+          if (response) {
+            displayOutput(JSON.stringify(response, null, 2), 'green');
+          }
+        } catch (e: any) {
+          console.error('Error', e);
+          displayOutput(`ERROR: ${e.message}`, 'red');
+        }
+      }
+    };
+  }
+}
+
+// wait for the html to load
+window.addEventListener('DOMContentLoaded', () => {
+  // let's do this!
+  main();
+});
@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "build", "dist"]
+}
@@ -1,4 +1,4 @@
-# HTML Nyn Node Test
+# Nym Node Tester - HTML

 This is an example of using the Nym Mixnet node tester.

@@ -3,6 +3,9 @@
  "description": "An example project that uses WASM node tester and plain HTML",
  "version": "1.0.0",
  "license": "Apache-2.0",
+  "dependencies": {
+    "@nymproject/sdk": "1"
+  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/plugin-transform-async-to-generator": "^7.14.5",
@@ -1,7 +1,6 @@
 {
  "extends": "../../../tsconfig.json",
  "compilerOptions": {
-    "jsx": "react-jsx",
    "outDir": "./dist"
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "outDir": "./dist"
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules",
-    "build",
-    "dist"
-  ]
-}
@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "outDir": "./dist"
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules",
-    "build",
-    "dist"
-  ]
-}
@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "outDir": "./dist"
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules",
-    "build",
-    "dist"
-  ]
-}