Demo Web Wallet Implementation

.gitignore

@@ -2,3 +2,5 @@
 node_modules
 .DS_STORE
 .idea
+.parcel-cache
+dist

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "rust-analyzer.workspace.discoverConfig": null,
+    "rust-analyzer.cargo.features": "all"
+}

Cargo.toml

@@ -20,7 +20,6 @@ path = "examples/simple-sync.rs"
 name = "message-board-sync"
 path = "examples/message-board-sync.rs"
 
-
 [profile.release]
 # Tell `rustc` to optimize for small code size.
 opt-level = 3
@@ -41,8 +40,7 @@ wasm-parallel = ["wasm", "wasm-bindgen-rayon", "multicore"]
 native = ["tonic/channel", "tonic/gzip", "tonic/tls-webpki-roots", "tokio/macros", "tokio/rt", "tokio/rt-multi-thread"]
 sqlite-db = ["dep:zcash_client_sqlite"]
 console_error_panic_hook = ["dep:console_error_panic_hook"]
-no-bundler = ["wasm-bindgen-rayon?/no-bundler"]
-
+no-bundler = ["wasm-bindgen-rayon?/no-bundler", "wasm_thread/no-bundler"]
 sync2 = []
 
 [dependencies]
@@ -95,12 +93,13 @@ tracing-subscriber = { version = "0.3.18", features = ["env-filter"] }
 tracing = "0.1.40"
 rayon = { version = "1.8", features = ["web_spin_lock"] }
 subtle = "2.6.1"
-wasm_thread = { git = "https://github.com/WilsonGramer/wasm_thread.git", rev = "eb41bcc0d98ce0620a313687c0344341391b9d78", features = ["keep_worker_alive"] }
+wasm_thread = { git = "https://github.com/ec2/wasm_thread", rev = "9e432077948d927d49373d1d039c23447d3648df", default-features = false, features = ["keep_worker_alive", "es_modules"] }
 
 wasm_sync = "0.1.2"
 http = { version = "1.1.0", default-features = false }
 serde = { version = "1", features = ["derive"], default-features = false }
 postcard = { version = "1.0.10", features = ["alloc"] }
+serde-wasm-bindgen = "0.6.5"
 
 [dev-dependencies]
 wasm-bindgen-test = "0.3.43"
@@ -118,6 +117,8 @@ wasm-bindgen-rayon = { git = "https://github.com/9SMTM6/wasm-bindgen-rayon", rev
 shardtree = { git = "https://github.com/ec2/incrementalmerkletree.git", rev = "16eff253ad2575d48feec04f7387e6507a7dd698" }
 incrementalmerkletree = { git = "https://github.com/ec2/incrementalmerkletree.git", rev = "16eff253ad2575d48feec04f7387e6507a7dd698" }
 
+# [patch.'https://github.com/WilsonGramer/wasm_thread']
+# wasm_thread = { git = "https://github.com/ec2/wasm_thread", rev = "9e432077948d927d49373d1d039c23447d3648df" }
 
 #[patch.'https://github.com/chainsafe/librustzcash']
 #zcash_address = { path = "../librustzcash/components/zcash_address" }

README.md

@@ -36,6 +36,32 @@ just build-web
 
 After building the resulting lib can be found in `packages/webz-core`.
 
+### Building the example web-wallet
+
+#### Prerequisites
+
+[Install pnpm](https://pnpm.io/installation)
+
+### Building
+
+Install dependencies with
+
+```shell
+pnpm i
+```
+
+Build WebZjs with
+
+```shell
+just build
+```
+
+Start a dev server with the page
+
+```shell
+pnpm start:dev
+```
+
 ## Development
 
 The [`.cargo/config.toml`](./.cargo/config.toml) file sets the build target to `wasm32-unknown-unknown` so the regular cargo commands (e.g. `check`, `build`) will run against this target.
@@ -48,6 +74,8 @@ Tests are run in a headless browser environment and can be run with
 just test-web
 ```
 
+
+
 ## Security Warnings
 
 These libraries are currently under development, have received no reviews or audit, and come with no guarantees whatsoever.

justfile

@@ -1,8 +1,8 @@
 default:
     just --list
 
-build:
-    wasm-pack build -t web  --release --out-dir ./packages/webz-core --no-default-features --features="wasm-parallel,no-bundler" -Z build-std="panic_abort,std"
+build *features:
+    wasm-pack build --no-opt -t web --scope webzjs --release --out-dir ./packages/webz-core --no-default-features --features="wasm wasm-parallel sync2 {{features}}" -Z build-std="panic_abort,std"
 
 # All Wasm Tests
 test-web *features:

package.json

@@ -1,4 +1,17 @@
 {
-    "name": "webzjs",
-    "workspaces": ["packages/*"]
-  }
+  "scripts": {
+    "preinstall": "npx only-allow pnpm",
+    "start:dev": "parcel --no-autoinstall packages/demo-wallet",
+    "build": "parcel build --no-cache --no-autoinstall packages/demo-wallet"
+  },
+  "dependencies": {
+    "@webzjs/webz-core": "workspace:^",
+    "@webzjs/demo-wallet": "workspace:^"
+  },
+  "devDependencies": {
+    "@parcel/core": "^2.12.0",
+    "parcel": "^2.12.0",
+    "process": "^0.11.10"
+  },
+  "packageManager": "[email protected]+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b"
+}

packages/demo-wallet/.gitignore

@@ -0,0 +1,11 @@
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+dist
+.parcel-cache
+wasm-pkg

packages/demo-wallet/.proxyrc.js

@@ -0,0 +1,7 @@
+module.exports = function (app) {
+    app.use((req, res, next) => {
+      res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
+      res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
+      next();
+    });
+  };

packages/demo-wallet/README.md

@@ -0,0 +1 @@
+# WebZjs Demo Web Wallet

packages/demo-wallet/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@webzjs/demo-wallet",
+  "source": "src/index.html",
+  "dependencies": {
+    "@types/react": "^18.3.9",
+    "@types/react-dom": "^18.3.0",
+    "@webzjs/webz-core": "workspace:^",
+    "bootstrap": "^5.3.3",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.10.4",
+    "react-dom": "^18.2.0",
+    "react-toastify": "^10.0.5",
+    "typescript": "^5.6.2"
+  }
+}

packages/demo-wallet/src/App/Actions.tsx

@@ -0,0 +1,65 @@
+import initWasm, { initThreadPool, WebWallet } from "@webzjs/webz-core";
+
+import { State, Action } from "./App";
+import { MAINNET_LIGHTWALLETD_PROXY } from "./constants";
+
+export async function init(dispatch: React.Dispatch<Action>) {
+  await initWasm();
+  await initThreadPool(10);
+  dispatch({
+    type: "set-web-wallet",
+    payload: new WebWallet("main", MAINNET_LIGHTWALLETD_PROXY, 1),
+  });
+}
+
+export async function addNewAccount(state: State, dispatch: React.Dispatch<Action>, seedPhrase: string, birthdayHeight: number) {
+    await state.webWallet?.create_account(seedPhrase, 0, birthdayHeight);
+    dispatch({ type: "append-account-seed", payload: seedPhrase });
+    await syncStateWithWallet(state, dispatch);
+}
+
+export async function syncStateWithWallet(
+  state: State,
+  dispatch: React.Dispatch<Action>
+) {
+  if (!state.webWallet) {
+    throw new Error("Wallet not initialized");
+  }
+  let summary = await state.webWallet?.get_wallet_summary();
+  if (summary) {
+    dispatch({ type: "set-summary", payload: summary });
+  }
+  let chainHeight = await state.webWallet?.get_latest_block();
+  if (chainHeight) {
+    dispatch({ type: "set-chain-height", payload: chainHeight });
+  }
+  dispatch({ type: "set-active-account", payload: summary?.account_balances[0][0] });
+}
+
+export async function triggerRescan(
+  state: State,
+  dispatch: React.Dispatch<Action>
+) {
+    if (!state.webWallet) {
+        throw new Error("Wallet not initialized");
+    }
+    await state.webWallet?.sync2();
+    await syncStateWithWallet(state, dispatch);
+}
+
+export async function triggerTransfer(
+  state: State,
+  dispatch: React.Dispatch<Action>,
+  toAddress: string,
+  amount: bigint
+) {
+    if (!state.webWallet) {
+        throw new Error("Wallet not initialized");
+    }
+    if (state.activeAccount == null) {
+        throw new Error("No active account");
+    }
+
+    await state.webWallet?.transfer(state.accountSeeds[state.activeAccount], state.activeAccount, toAddress, amount);
+    await syncStateWithWallet(state, dispatch);
+}

packages/demo-wallet/src/App/App.css

@@ -0,0 +1,10 @@
+/* Style inputs */
+input, select, button {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+}