feat: create tari web extension application stub (#3535)

* feat: create tari web extension application

Co-authored-by: Martin Stefcek <gcifko@gmail.com>

* scaffold

* docs: minor

* wasm hello world

Co-authored-by: Martin Stefcek <gcifko@gmail.com>

Author: Byron Hambly

Cargo.lock

@@ -0,0 +1 @@
+dist/

applications/tari_web_extension/.gitignore

@@ -0,0 +1,36 @@
+{
+  "name": "@tari/web-extension",
+  "version": "0.1.0",
+  "description": "Tari Web Extension",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest",
+    "build": "webpack",
+    "serve": "webpack serve"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tari-project/tari.git"
+  },
+  "keywords": [
+    "tari"
+  ],
+  "author": "The Tari Development Community",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/tari-project/tari/issues"
+  },
+  "homepage": "https://github.com/tari-project/tari#readme",
+  "dependencies": {
+    "wallet-grpc-client": "file:../../clients/wallet_grpc_client"
+  },
+  "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "1.5.0",
+    "html-webpack-plugin": "^5.3.2",
+    "jest": "^27.3.1",
+    "text-encoding": "^0.7.0",
+    "webpack": "^5.49.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2"
+  }
+}

applications/tari_web_extension/package-lock.json

@@ -0,0 +1,11 @@
+# tari web extension
+
+- `npm i`
+- Run tari console wallet with grpc
+- `npm test`
+
+todo:
+
+- instructions for how to install and use the web extension
+- js bundling
+- ux flow

applications/tari_web_extension/package.json

@@ -0,0 +1,8 @@
+console.log("background.js execute");
+chrome.runtime.onConnect.addListener(function (port) {
+  if (port.name === "tari-port") {
+    port.onMessage.addListener(function (payload) {
+      console.log(payload);
+    });
+  }
+});

applications/tari_web_extension/readme.md

@@ -0,0 +1,40 @@
+console.log("content.js executed");
+
+function script() {
+  class Tari {
+    constructor() {
+      console.log("initiating tari");
+    }
+    login() {
+      window.postMessage(
+        { type: "TARI", payload: { user: "username", password: "password" } },
+        "*"
+      );
+    }
+  }
+  window.tari = new Tari();
+  console.log("injecting tari");
+}
+
+function inject(fn) {
+  const script = document.createElement("script");
+  script.text = `(${fn.toString()})();`;
+  document.documentElement.appendChild(script);
+}
+
+inject(script);
+
+let port = chrome.runtime.connect({ name: "tari-port" });
+window.addEventListener(
+  "message",
+  (event) => {
+    if (event.source != window) {
+      return;
+    }
+    if (event.data.type && event.data.type == "TARI") {
+      console.log("content received : ", event.data.payload);
+      port.postMessage(event.data.payload);
+    }
+  },
+  false
+);

applications/tari_web_extension/src/background.js

@@ -0,0 +1,6 @@
+// Note that a dynamic `import` statement here is required due to
+// webpack/webpack#6615, but in theory `import { greet } from './pkg';`
+// will work here one day as well!
+const rust = import("./key_manager");
+
+rust.then((m) => m.greet("World!")).catch(console.error);

applications/tari_web_extension/src/content.js

@@ -0,0 +1,20 @@
+// requires a running wallet with grpc enabled
+const { Client } = require("wallet-grpc-client");
+
+const host = process.env.HOST || "127.0.0.1";
+const port = process.env.PORT || "18143";
+const address = `${host}:${port}`;
+const wallet = Client.connect(address);
+
+test("identify", async () => {
+  const { public_key, public_address, node_id } = await wallet.identify();
+
+  expect(public_key).toBeDefined();
+  expect(public_key.length).toBe(64);
+
+  expect(public_address).toBeDefined();
+  expect(typeof public_address).toEqual("string");
+
+  expect(node_id).toBeDefined();
+  expect(node_id.length).toBe(26);
+});

applications/tari_web_extension/src/icons/icon-128x128.png

@@ -0,0 +1,7 @@
+{
+  "typeAcquisition": {
+    "include": [
+      "chrome"
+    ]
+  }
+}

applications/tari_web_extension/src/icons/icon-16x16.png

@@ -0,0 +1,31 @@
+{
+  "name": "Tari Web Extension",
+  "description": "Tari Web Extension",
+  "version": "0.1.0",
+  "manifest_version": 2,
+  "icons": {
+    "16": "./icons/icon-16x16.png",
+    "32": "./icons/icon-32x32.png",
+    "48": "./icons/icon-48x48.png",
+    "128": "./icons/icon-128x128.png"
+  },
+  "background": {
+    "scripts": ["./background.js"]
+  },
+  "content_scripts": [
+    {
+      "matches": ["file://*/*", "http://*/*", "https://*/*"],
+      "run_at": "document_start",
+      "js": ["content.js"]
+    }
+  ],
+  "options_page": "./options.html",
+  "browser_action": {
+    "default_popup": "popup.html"
+  },
+  "permissions": ["https://*/*"],
+  "externally_connectable": {
+    "ids": ["*"],
+    "accepts_tls_channel_id": false
+  }
+}

applications/tari_web_extension/src/icons/icon-32x32.png

@@ -0,0 +1,30 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const webpack = require("webpack");
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
+const KEY_MANAGER_PATH = "../../base_layer/key_manager/";
+
+module.exports = {
+  entry: "./src/index.js",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "index.js",
+  },
+  plugins: [
+    new HtmlWebpackPlugin(),
+    new WasmPackPlugin({
+      crateDirectory: path.resolve(__dirname, KEY_MANAGER_PATH),
+      outDir: path.resolve(__dirname, `${KEY_MANAGER_PATH}/pkg`), // https://github.com/wasm-tool/wasm-pack-plugin/issues/93
+    }),
+    // Have this example work in Edge which doesn't ship `TextEncoder` or
+    // `TextDecoder` at this time.
+    new webpack.ProvidePlugin({
+      TextDecoder: ["text-encoding", "TextDecoder"],
+      TextEncoder: ["text-encoding", "TextEncoder"],
+    }),
+  ],
+  mode: "development",
+  experiments: {
+    asyncWebAssembly: true,
+  },
+};

applications/tari_web_extension/src/icons/icon-48x48.png

@@ -0,0 +1 @@
+pkg/

applications/tari_web_extension/src/icons/icon.png

@@ -7,6 +7,9 @@ license = "BSD-3-Clause"
 version = "0.13.0"
 edition = "2018"
 
+[lib]
+crate-type = ["lib", "cdylib"]
+
 [dependencies]
 tari_crypto = { git = "https://github.com/tari-project/tari-crypto.git", branch = "main" }
 
@@ -17,9 +20,14 @@ chacha20 = "0.7.1"
 chrono = { version = "0.4.6", features = ["serde"] }
 clear_on_drop = "=0.2.4"
 crc32fast = "1.2.1"
-rand = "0.8"
 digest = "0.9.0"
+getrandom = { version = "0.2.3", features = ["js"] }
+rand = "0.8"
+serde = "1.0.89"
+serde_derive = "1.0.89"
+serde_json = "1.0.39"
 thiserror = "1.0.26"
+wasm-bindgen = "0.2"
 
 [dev-dependencies]
 sha2 = "0.9.8"

applications/tari_web_extension/src/index.js

@@ -1 +1 @@
-# Tari Key manager
+# Tari Key manager

applications/tari_web_extension/src/index.test.js

@@ -11,3 +11,4 @@ pub mod error;
 pub mod key_manager;
 pub mod mnemonic;
 pub mod mnemonic_wordlists;
+pub mod wasm;

applications/tari_web_extension/src/jsconfig.json

@@ -0,0 +1,11 @@
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+extern "C" {
+    pub unsafe fn alert(s: &str);
+}
+
+#[wasm_bindgen]
+pub fn greet(name: &str) {
+    alert(&format!("Hello, {}!", name));
+}