rewrite state model of webwallet

Author: willemolding

.cargo/config.toml

@@ -7,5 +7,5 @@ rustflags = ["-C", "target-feature=+atomics,+bulk-memory,+mutable-globals"]
 # [unstable]
 # build-std = ["panic_abort", "std"]
 
-# [build]
-# target = "wasm32-unknown-unknown"
+[build]
+target = "wasm32-unknown-unknown"

.vscode/settings.json

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

Cargo.toml

@@ -95,7 +95,7 @@ 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/WilsonGramer/wasm_thread.git", rev = "eb41bcc0d98ce0620a313687c0344341391b9d78", default-features = false, features = ["keep_worker_alive"] }
 
 wasm_sync = "0.1.2"
 http = { version = "1.1.0", default-features = false }

justfile

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

package.json

@@ -1,7 +1,8 @@
 {
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "start:dev": "parcel --no-autoinstall packages/demo-wallet"
+    "start:dev": "parcel --no-autoinstall packages/demo-wallet",
+    "build": "parcel build --no-cache --no-autoinstall packages/demo-wallet"
   },
   "dependencies": {
 		"@webzjs/webz-core": "workspace:^",

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

@@ -0,0 +1,41 @@
+import initWasm, { initThreadPool, WebWallet } from "@webzjs/webz-core";
+
+import { 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 syncStateWithWallet(
+  webWallet: WebWallet | undefined,
+  dispatch: React.Dispatch<Action>
+) {
+  if (!webWallet) {
+    return;
+  }
+  let summary = await webWallet?.get_wallet_summary();
+  if (summary) {
+    dispatch({ type: "set-summary", payload: summary });
+  }
+  let chainHeight = await webWallet?.get_latest_block();
+  if (chainHeight) {
+    dispatch({ type: "set-chain-height", payload: chainHeight });
+  }
+}
+
+export async function triggerRescan(
+  webWallet: WebWallet | undefined,
+  dispatch: React.Dispatch<Action>
+) {
+    if (!webWallet) {
+        return;
+    }
+    await webWallet?.sync2();
+    await syncStateWithWallet(webWallet, dispatch);
+}

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

@@ -1,90 +1,99 @@
 import "./App.css";
 
-import React, { useState, useEffect, createContext } from "react";
+import React, { useState, useEffect, createContext, useReducer } from "react";
 
 import Tab from "react-bootstrap/Tab";
 import Tabs from "react-bootstrap/Tabs";
 import Stack from "react-bootstrap/Stack";
 
-import initWasm, {
-  initThreadPool,
-  start,
+import {
   WebWallet,
   WalletSummary,
 } from "@webzjs/webz-core";
 
+import { init } from "./Actions";
 import { Header } from "./components/Header";
 import { ImportAccount } from "./components/ImportAccount";
 import { SendFunds } from "./components/SendFunds";
 import { ReceiveFunds } from "./components/ReceiveFunds";
 import { Summary } from "./components/Summary";
 
-const MAINNET_LIGHTWALLETD_PROXY = "https://zcash-mainnet.chainsafe.dev";
+type State = {
+  webWallet?: WebWallet;
+  activeAccount?: number;
+  summary?: WalletSummary;
+  chainHeight?: bigint;
+};
 
-export const WalletContext = createContext<WebWallet | null>(null);
+const initialState: State = {
+  activeAccount: undefined,
+  summary: undefined,
+  chainHeight: undefined,
+};
 
-export function App() {
-  useEffect(() => {
-    async function init() {
-      await initWasm();
-      await initThreadPool(10);
-      setWebWallet(new WebWallet("main", MAINNET_LIGHTWALLETD_PROXY, 1));
-    }
-    init();
-  }, []);
+export type Action =
+  | { type: "set-active-account"; payload: number }
+  | { type: "set-web-wallet"; payload: WebWallet }
+  | { type: "set-summary"; payload: WalletSummary }
+  | { type: "set-chain-height"; payload: bigint };
 
-  let [webWallet, setWebWallet] = useState<WebWallet | null>(null);
-  let [summary, setSummary] = useState<WalletSummary | null>(null);
-  let [chainHeight, setChainHeight] = useState<bigint | null>(null);
-  let [activeAccoumt, setActiveAccount] = useState<number>(0);
-
-  const refreshSummary = async () => {
-    if (!webWallet) {
-      return;
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "set-active-account": {
+      return { ...state, activeAccount: action.payload };
     }
-    let summary = await webWallet?.get_wallet_summary();
-    if (summary) {
-      setSummary(summary);
+    case "set-web-wallet": {
+      return { ...state, webWallet: action.payload };
     }
-    let chainHeight = await webWallet?.get_latest_block();
-    if (chainHeight) {
-      setChainHeight(chainHeight);
+    case "set-summary": {
+      return { ...state, summary: action.payload };
     }
-  };
+    case "set-chain-height": {
+      return { ...state, chainHeight: action.payload };
+    }
+    default:
+      return state;
+  }
+};
+
+export const WalletContext = createContext<{
+  state: State;
+  dispatch: React.Dispatch<Action>;
+}>({ state: initialState, dispatch: () => {} });
+
+export function App() {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  useEffect(() => {
+    init(dispatch);
+  }, [dispatch]);
 
   const triggerRescan = () => {
-    if (!webWallet) {
+    if (!state.webWallet) {
       return;
     }
     console.log("rescanning");
-    webWallet.sync2().then(() => {
+    state.webWallet.sync2().then(() => {
       console.log("rescan complete");
     });
   };
 
   return (
     <div>
-      <WalletContext.Provider value={webWallet}>
+      <WalletContext.Provider value={{ state, dispatch }}>
         <Stack>
           <h1>WebZjs Wallet Demo</h1>
-          <Header
-            walletSummary={summary}
-            refreshSummary={refreshSummary}
-            activeAccount={activeAccoumt}
-            setActiveAccount={setActiveAccount}
-            triggerRescan={triggerRescan}
-            chainHeight={chainHeight}
-          />
+          <Header />
           <Tabs
             defaultActiveKey="import"
             id="base-wallet-tabs"
             className="mb-3"
           >
             <Tab eventKey="import" title="Import Account">
-              <ImportAccount refreshSummary={refreshSummary} />
+              <ImportAccount />
             </Tab>
             <Tab eventKey="summary" title="Summary">
-              <Summary walletSummary={summary} />
+              <Summary summary={state.summary}/>
             </Tab>
             <Tab eventKey="send" title="Send">
               <SendFunds />

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

@@ -0,0 +1 @@
+export const MAINNET_LIGHTWALLETD_PROXY = "https://zcash-mainnet.chainsafe.dev";

packages/demo-wallet/src/App/components/Header.tsx

@@ -1,35 +1,24 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext } from "react";
 
 import Form from "react-bootstrap/Form";
 import Card from "react-bootstrap/Card";
 import Stack from "react-bootstrap/Stack";
 
 import { WalletContext } from "../App";
-import { WalletSummary } from "@webzjs/webz-core";
+import { syncStateWithWallet, triggerRescan } from "../Actions";
 import { Button } from "react-bootstrap";
 
-export function Header({
-  walletSummary,
-  refreshSummary,
-  activeAccount,
-  setActiveAccount,
-  triggerRescan,
-  chainHeight,
-}: {
-  walletSummary: WalletSummary | null;
-  refreshSummary: () => Promise<void>;
-  activeAccount: number;
-  setActiveAccount: (account: number) => void;
-  triggerRescan: () => void;
-  chainHeight: bigint | null;
-}) {
+export function Header() {
+
+  const { state, dispatch } = useContext(WalletContext);
+
   return (
     <Stack direction="horizontal" gap={3}>
       <Form.Select
-        value={activeAccount}
-        onChange={(e) => setActiveAccount(parseInt(e.target.value))}
+        value={state.activeAccount}
+        onChange={(e) => dispatch({ type: "set-active-account", payload: parseInt(e.target.value)})}
       >
-        {walletSummary?.account_balances.map(([id]) => (
+        {state.summary?.account_balances.map(([id]) => (
           <option key={id} value={id}>
             Account {id}
           </option>
@@ -40,12 +29,12 @@ export function Header({
         <Card.Text>Available Balance: {0} ZEC</Card.Text>
       </Card>
       <Card style={{ width: "30rem" }}>
-        <Card.Text>Chain Height: {chainHeight ? ""+chainHeight : '?'}</Card.Text>
-        <Card.Text>Synced Height: {walletSummary?.fully_scanned_height ? walletSummary?.fully_scanned_height : '?'}</Card.Text>
+        <Card.Text>Chain Height: {state.chainHeight ? ""+state.chainHeight : '?'}</Card.Text>
+        <Card.Text>Synced Height: {state.summary?.fully_scanned_height ? state.summary?.fully_scanned_height : '?'}</Card.Text>
       </Card>
       <Stack>
-        <Button onClick={async () => await refreshSummary()}>Refresh</Button>
-        <Button onClick={() => triggerRescan()}>Sync</Button>
+        <Button onClick={async () => await syncStateWithWallet(state.webWallet, dispatch)}>Refresh</Button>
+        <Button onClick={() => triggerRescan(state.webWallet, dispatch)}>Sync</Button>
       </Stack>
     </Stack>
   );

packages/demo-wallet/src/App/components/ImportAccount.tsx

@@ -5,20 +5,21 @@ import Form from "react-bootstrap/Form";
 import { ToastContainer, toast } from "react-toastify";
 
 import { WalletContext } from "../App";
+import { syncStateWithWallet } from "../Actions";
 
-export function ImportAccount({refreshSummary}: {refreshSummary: () => Promise<void>}) {
-  let webWallet = useContext(WalletContext);
+export function ImportAccount() {
+  let {state, dispatch} = useContext(WalletContext);
 
   let [birthdayHeight, setBirthdayHeight] = useState(2657762);
   let [seedPhrase, setSeedPhrase] = useState("mix sample clay sweet planet lava giraffe hand fashion switch away pool rookie earth purity truly square trumpet goose move actor save jaguar volume");
 
   const handleSubmit = async (event: FormEvent) => {
     event.preventDefault();
-    await webWallet?.create_account(seedPhrase, 0, birthdayHeight);
+    await state.webWallet?.create_account(seedPhrase, 0, birthdayHeight);
     toast.success("Account imported successfully", {
       position: "top-center",
     });
-    await refreshSummary();
+    await syncStateWithWallet(state.webWallet, dispatch);
     setBirthdayHeight(0);
     setSeedPhrase("");
   };