Add wasm-bindgen-rayon

.cargo/config

@@ -1,2 +1,8 @@
 [target.'cfg(not(target_arch = "wasm32"))']
 rustflags = ["-C", "target-cpu=native"]
+
+[target.wasm32-unknown-unknown]
+rustflags = ["-C", "target-feature=+atomics,+bulk-memory,+mutable-globals"]
+
+[unstable]
+build-std = ["panic_abort", "std"]

wasm/Cargo.toml

@@ -46,12 +46,20 @@ version = "1.0"
 path="../../snarkVM/synthesizer"
 version = "0.9.11"
 default-features = false
-features = [ "wasm" ]
+features = [ "wasm", "parallel" ]
+
+[dependencies.wasm-bindgen-rayon]
+version = "1.0"
+path = "../../wasm-bindgen-rayon"
+
+[dependencies.rayon]
+version = "1.5"
 
 [dependencies.snarkvm-console]
 path="../../snarkVM/console"
 version = "0.9.11"
 default-features = false
+features = [ "parallel" ]
 
 [dependencies.snarkvm-wasm]
 path="../../snarkVM/wasm"
@@ -80,4 +88,7 @@ opt-level = 3
 lto = true
 
 [package.metadata.wasm-pack.profile.release]
-wasm-opt = ["-O4", "--fast-math"]
+wasm-opt = ["-O4"]
+
+# [features]
+# thread_local_internals = [ ]

wasm/rust-toolchain

@@ -0,0 +1 @@
+nightly-2022-12-12

wasm/src/lib.rs

@@ -25,3 +25,5 @@ pub use program::*;
 
 pub(crate) mod types;
 pub(crate) use types::*;
+
+pub use wasm_bindgen_rayon::init_thread_pool;

website/package.json

@@ -32,7 +32,8 @@
     "webpack-dev-server": "^4.7.4"
   },
   "scripts": {
-    "start": "yarn upgrade @aleohq/wasm && webpack-dev-server",
+    "build-wasm": "cd ../wasm && wasm-pack build --release --target web",
+    "start": "yarn build-wasm && yarn upgrade @aleohq/wasm && webpack-dev-server",
     "build": "webpack --config webpack.config.js",
     "predeploy": "yarn build",
     "deploy": "gh-pages -d build",

website/src/tabs/transaction/SendCredits.js

@@ -44,7 +44,8 @@ export const SendCredits = () => {
         startTime = performance.now();
 
         // Build transaction
-        worker.postMessage({privateKey, transferProverBytes: transferProver.bytes, amount, toAddress, plaintext})
+        worker.postMessage({privateKey, transferProverBytes: transferProver.bytes, amount, toAddress, plaintext});
+
         console.log('Called web worker');
       } catch (error) { console.error(error) }
     }

website/src/workers/worker.js

@@ -1,22 +1,24 @@
-import "babel-polyfill";
+import init, * as aleo from '@aleohq/wasm';
 
-import("@aleohq/wasm").then(aleo => {
-  self.addEventListener("message", ev => {
-    const {privateKey, transferProverBytes, toAddress, amount, plaintext} = ev.data;
-    console.log('Web worker: Started Transfer...');
-    console.log(ev.data);
-    let startTime = performance.now();
-    const pK = aleo.PrivateKey.from_string(privateKey);
-    const provingKey = aleo.ProvingKey.from_bytes(transferProverBytes);
-    console.log(`Web worker: Deserialized proving key Completed: ${performance.now() - startTime} ms`);
-    startTime = performance.now();
-    const address = aleo.Address.from_string(toAddress);
-    const rec = aleo.RecordPlaintext.fromString(plaintext);
+await init();
 
-    startTime = performance.now();
-    const result = aleo.TransactionBuilder.build_transfer_full(pK, provingKey, address, BigInt(amount), rec);
-    console.log(`Web worker: Transaction Completed: ${performance.now() - startTime} ms`);
-    console.log(result);
-    self.postMessage({ transaction: result });
-  });
+await aleo.initThreadPool(navigator.hardwareConcurrency);
+
+self.addEventListener("message", ev => {
+  const {privateKey, transferProverBytes, toAddress, amount, plaintext} = ev.data;
+  console.log('Web worker: Started Transfer...');
+  console.log(ev.data);
+  let startTime = performance.now();
+  const pK = aleo.PrivateKey.from_string(privateKey);
+  const provingKey = aleo.ProvingKey.from_bytes(transferProverBytes);
+  console.log(`Web worker: Deserialized proving key Completed: ${performance.now() - startTime} ms`);
+  startTime = performance.now();
+  const address = aleo.Address.from_string(toAddress);
+  const rec = aleo.RecordPlaintext.fromString(plaintext);
+
+  startTime = performance.now();
+  const result = aleo.TransactionBuilder.build_transfer_full(pK, provingKey, address, BigInt(amount), rec);
+  console.log(`Web worker: Transaction Completed: ${performance.now() - startTime} ms`);
+  console.log(result);
+  self.postMessage({ transaction: result });
 });

website/webpack.config.js

@@ -13,6 +13,10 @@ const appConfig = {
     },
     devServer: {
         port: 3000,
+        headers: {
+            'Cross-Origin-Opener-Policy': 'same-origin',
+            'Cross-Origin-Embedder-Policy': 'require-corp'
+        },
     },
     module: {
         rules: [
@@ -35,7 +39,8 @@ const appConfig = {
         maxAssetSize: 8388608
     },
     experiments: {
-        asyncWebAssembly: true
+        asyncWebAssembly: true,
+        topLevelAwait: true
     },
     devtool: 'source-map',
 }
@@ -52,7 +57,9 @@ const workerConfig = {
         filename: "worker.js"
     },
     experiments: {
-        asyncWebAssembly: true
+        syncWebAssembly: true,
+        asyncWebAssembly: true,
+        topLevelAwait: true
     },
     devtool: 'source-map',
 };