Generate key pair via p2panda-js and store it locally

.gitignore

@@ -102,3 +102,5 @@ dist
 
 # TernJS port file
 .tern-port
+
+.vscode

package.json

@@ -7,7 +7,7 @@
     "build": "npm run clear && webpack --mode production",
     "clear": "rimraf ./dist",
     "lint": "eslint '*/**/*.{ts,tsx}'",
-    "serve": "webpack serve --mode development --config webpack.config.js",
+    "serve": "webpack serve --mode development",
     "start": "npm run serve",
     "tauri:build": "tauri build",
     "tauri:info": "tauri info",
@@ -29,37 +29,38 @@
   },
   "homepage": "https://github.com/p2panda/beep-boop#readme",
   "dependencies": {
+    "p2panda-js": "^0.1.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "tauri": "^0.13.0"
+    "tauri": "^0.14.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.1",
-    "@babel/core": "^7.12.3",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.5",
-    "@babel/preset-typescript": "^7.12.1",
-    "@types/react": "^16.9.56",
-    "@types/react-dom": "^16.9.9",
-    "@typescript-eslint/eslint-plugin": "^4.7.0",
-    "@typescript-eslint/parser": "^4.7.0",
-    "babel-loader": "^8.2.1",
-    "core-js": "^3.7.0",
-    "eslint": "^7.17.0",
-    "eslint-config-prettier": "^7.1.0",
+    "@babel/cli": "^7.12.17",
+    "@babel/core": "^7.12.17",
+    "@babel/preset-env": "^7.12.17",
+    "@babel/preset-react": "^7.12.13",
+    "@babel/preset-typescript": "^7.12.17",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.15.1",
+    "@typescript-eslint/parser": "^4.15.1",
+    "babel-loader": "^8.2.2",
+    "core-js": "^3.9.0",
+    "eslint": "^7.20.0",
+    "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
-    "eslint-webpack-plugin": "^2.4.1",
-    "html-webpack-plugin": "^4.5.0",
+    "eslint-webpack-plugin": "^2.5.2",
+    "html-webpack-plugin": "^5.1.0",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
-    "ts-loader": "^8.0.11",
-    "typescript": "^4.0.5",
-    "webpack": "^5.4.0",
-    "webpack-cli": "^4.2.0",
-    "webpack-dev-server": "^3.11.0"
+    "ts-loader": "^8.0.17",
+    "typescript": "^4.1.5",
+    "webpack": "^5.23.0",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2"
   },
   "engines": {
     "node": ">= v12.0.0"

src/pages/Home.tsx

@@ -1,6 +1,39 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import p2panda from 'p2panda-js';
 import { Link } from 'react-router-dom';
 
+const LogWindow = () => {
+  const [message, setMessage] = useState('');
+  const [perfLoad, setPerfLoad] = useState<number>();
+  const [perfKeyPair, setPerfKeyPair] = useState<number>();
+
+  useEffect(() => {
+    const asyncEffect = async () => {
+      const timeStart = performance.now();
+      const { KeyPair } = await p2panda;
+
+      const timeP2PandaLoaded = performance.now();
+      setPerfLoad(timeP2PandaLoaded - timeStart);
+
+      const keyPair = new KeyPair();
+      setMessage(`${keyPair.publicKey()}, ${keyPair.privateKey()}`);
+      const timeKeyPair = performance.now();
+      setPerfKeyPair(timeKeyPair - timeP2PandaLoaded);
+    };
+    asyncEffect();
+  }, []);
+
+  return (
+    <div>
+      <h2>Key pair</h2>
+      <p>p2panda says: {message ? message : 'Generating key pair...'}</p>
+      <h2>Performance</h2>
+      <p>Loading p2panda lib: {perfLoad}ms</p>
+      <p>Generating key pair: {perfKeyPair}ms</p>
+    </div>
+  );
+};
+
 const Home = (): JSX.Element => {
   return (
     <section>
@@ -30,6 +63,7 @@ const Home = (): JSX.Element => {
         <li>well equiped kitchen</li>
         <li>...</li>
       </ul>
+      <LogWindow />
     </section>
   );
 };

src/typescript/helpers.ts

@@ -0,0 +1,4 @@
+/**
+ * Resolve a promise's type recursively
+ */
+export type Resolved<T> = T extends PromiseLike<infer U> ? Resolved<U> : T;

tsconfig.json

@@ -3,7 +3,7 @@
     "baseUrl": "./",
     "esModuleInterop": true,
     "jsx": "react",
-    "module": "es6",
+    "module": "ES2020",
     "moduleResolution": "node",
     "noImplicitAny": false,
     "paths": {

webpack.config.js

@@ -24,12 +24,6 @@ module.exports = (env, argv) => {
       },
       extensions: ['.js', '.ts', '.tsx'],
     },
-    experiments: {
-      // Support the new WebAssembly according to the updated specification, it
-      // makes a WebAssembly module an async module.
-      // See: https://webpack.js.org/configuration/experiments/
-      asyncWebAssembly: true,
-    },
     module: {
       rules: [
         {