fix: WASM example (#1719)

* fix: wasm example

* fix: webpack 5.0

* fix: scripts

Cargo.lock

@@ -1500,7 +1500,7 @@ dependencies = [
  "ethers",
  "hex",
  "serde",
- "serde_derive",
+ "serde-wasm-bindgen",
  "serde_json",
  "wasm-bindgen",
  "wasm-bindgen-futures",
@@ -3433,9 +3433,9 @@ checksum = "930c0acf610d3fdb5e2ab6213019aaa04e227ebe9547b0649ba599b16d788bd7"
 
 [[package]]
 name = "serde"
-version = "1.0.137"
+version = "1.0.144"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "61ea8d54c77f8315140a05f4c7237403bf38b72704d031543aa1d16abbf517d1"
+checksum = "0f747710de3dcd43b88c9168773254e809d8ddbdf9653b84e2554ab219f17860"
 dependencies = [
  "serde_derive",
 ]
@@ -3450,6 +3450,17 @@ dependencies = [
  "serde_json",
 ]
 
+[[package]]
+name = "serde-wasm-bindgen"
+version = "0.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1cfc62771e7b829b517cb213419236475f434fb480eddd76112ae182d274434a"
+dependencies = [
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "serde_cbor"
 version = "0.11.2"
@@ -3462,9 +3473,9 @@ dependencies = [
 
 [[package]]
 name = "serde_derive"
-version = "1.0.137"
+version = "1.0.144"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1f26faba0c3959972377d3b2d306ee9f71faee9714294e41bb777f83f88578be"
+checksum = "94ed3a816fb1d101812f83e789f888322c34e291f894f19590dc310963e87a00"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -3473,9 +3484,9 @@ dependencies = [
 
 [[package]]
 name = "serde_json"
-version = "1.0.79"
+version = "1.0.85"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8e8d9fa5c3b304765ce1fd9c4c8a3de2c8db365a5b91be52f186efc675681d95"
+checksum = "e55a28e3aaef9d5ce0506d0a14dbba8054ddc7e499ef522dd8b26859ec9d4a44"
 dependencies = [
  "itoa 1.0.1",
  "ryu",

examples/ethers-wasm/.gitignore

@@ -6,3 +6,4 @@ pkg/
 wasm-pack.log
 node_modules/
 yarn-error.log
+dist

examples/ethers-wasm/Cargo.toml

@@ -1,16 +1,15 @@
 [package]
 name = "ethers-wasm"
 version = "0.1.0"
-authors = ["Matthias Seitz <matthias.seitz@outlook.de>"]
 edition = "2018"
+rust-version = "1.62"
+authors = ["Matthias Seitz <matthias.seitz@outlook.de>"]
 license = "MIT OR Apache-2.0"
 readme = "README.md"
 documentation = "https://docs.rs/ethers"
 repository = "https://github.com/gakonst/ethers-rs"
 homepage = "https://docs.rs/ethers"
-description = """
-How to use ethers in the browser with WASM.
-"""
+description = "How to use ethers in the browser with WASM."
 
 [lib]
 crate-type = ["cdylib", "rlib"]
@@ -20,10 +19,13 @@ default = ["console_error_panic_hook"]
 
 [dependencies]
 ethers = { path = "../..", version = "0.17.0", features = ["abigen", "legacy", "ws"] }
-serde_derive = "1.0.137"
+
 wasm-bindgen-futures = "0.4.33"
-serde_json = "1.0.64"
-wasm-bindgen = { version = "0.2.81", features = ["serde-serialize"] }
+wasm-bindgen = { version = "0.2.83", features = ["serde-serialize"] }
+
+serde = { version = "1.0.144", features = ["derive"] }
+serde_json = "1.0.85"
+serde-wasm-bindgen = "0.4.3"
 
 # The `console_error_panic_hook` crate provides better debugging of panics by
 # logging them with `console.error`. This is great for development, but requires
@@ -38,9 +40,9 @@ console_error_panic_hook = { version = "0.1.6", optional = true }
 # Unfortunately, `wee_alloc` requires nightly Rust when targeting wasm for now.
 wee_alloc = { version = "0.4.5", optional = true }
 
-serde = { version = "1.0.126", features = ["derive"] }
+web-sys = { version = "0.3.60", features = ["console"] }
+
 hex = "0.4.3"
-web-sys = "0.3.60"
 
 [dev-dependencies]
 wasm-bindgen-test = "0.3.33"

examples/ethers-wasm/README.md

@@ -1,15 +1,19 @@
-## Example usage of ethers-rs from WASM
+# ethers-wasm
+
+## Example
 
 Install wasm-pack with
 
     yarn install
 
-Start a local ganache instance
+Start a local Anvil or Ganache instance
 
+    yarn anvil
+    or
     yarn ganache
 
-Then you can build the example locally with:
+Build the example locally with:
 
     yarn serve
 
-and then visiting http://localhost:8080 in a browser should run the example!
+Visit http://localhost:8080 in a browser to run the example!

examples/ethers-wasm/package.json

@@ -1,18 +1,20 @@
 {
     "name": "ethers-wasm",
     "license": "MIT OR Apache-2.0",
+    "private": "true",
     "scripts": {
         "build": "webpack",
         "serve": "webpack-dev-server",
-    "ganache": "ganache-cli --blockTime 2 -m \"stuff inherit faith park genre spread huge knee ecology private marble supreme\""
+        "anvil": "anvil -m 'stuff inherit faith park genre spread huge knee ecology private marble supreme'",
+        "ganache": "ganache-cli -m 'stuff inherit faith park genre spread huge knee ecology private marble supreme'"
     },
     "devDependencies": {
-    "@wasm-tool/wasm-pack-plugin": "1.0.1",
-    "html-webpack-plugin": "^3.2.0",
-    "text-encoding": "^0.7.0",
-    "webpack": "^4.29.4",
-    "webpack-cli": "^3.1.1",
-    "webpack-dev-server": "^3.1.0",
-    "ganache-cli": "^6.12.2"
+        "@wasm-tool/wasm-pack-plugin": "^1.6",
+        "html-webpack-plugin": "^5.5",
+        "text-encoding": "^0.7",
+        "webpack": "^5.74",
+        "webpack-cli": "^4.10",
+        "webpack-dev-server": "^4.11",
+        "ganache-cli": "^6.12"
     }
 }

examples/ethers-wasm/src/lib.rs

@@ -1,17 +1,12 @@
-#![allow(clippy::all)]
-
-use std::sync::Arc;
-
-use wasm_bindgen::prelude::*;
-use web_sys::console;
-
+use crate::utils::SIMPLECONTRACT_BIN;
 use ethers::{
     contract::abigen,
     prelude::{ContractFactory, Provider, SignerMiddleware},
     providers::Ws,
 };
-
-use crate::utils::SIMPLECONTRACT_BIN;
+use std::sync::Arc;
+use wasm_bindgen::prelude::*;
+use web_sys::console;
 
 pub mod utils;
 
@@ -26,6 +21,7 @@ macro_rules! log {
         web_sys::console::log_1(&format!( $( $t )* ).into());
     }
 }
+
 abigen!(
     SimpleContract,
     "./../contract_abi.json",
@@ -38,16 +34,16 @@ pub async fn deploy() {
 
     console::log_2(
         &"SimpleContract ABI: ".into(),
-        &JsValue::from_serde(&*SIMPLECONTRACT_ABI).unwrap(),
+        &serde_wasm_bindgen::to_value(&*SIMPLECONTRACT_ABI).unwrap(),
     );
 
     let wallet = utils::key(0);
     log!("Wallet: {:?}", wallet);
 
     let endpoint = "ws://127.0.0.1:8545";
-    let provider = Provider::new(Ws::connect(endpoint).await.unwrap());
+    let provider = Provider::<Ws>::connect(endpoint).await.unwrap();
     let client = Arc::new(SignerMiddleware::new(provider, wallet));
-    log!("Provider connected to `{}`", endpoint);
+    log!("Connected to: `{}`", endpoint);
 
     let bytecode = hex::decode(SIMPLECONTRACT_BIN).unwrap();
     let factory = ContractFactory::new(SIMPLECONTRACT_ABI.clone(), bytecode.into(), client.clone());
@@ -62,7 +58,7 @@ pub async fn deploy() {
     let value = "bye from WASM!";
     log!("Setting value... `{}`", value);
     let receipt = contract.set_value(value.to_owned()).send().await.unwrap().await.unwrap();
-    console::log_2(&"Set value receipt: ".into(), &JsValue::from_serde(&receipt).unwrap());
+    console::log_2(&"Set value receipt: ".into(), &serde_wasm_bindgen::to_value(&receipt).unwrap());
 
     log!("Fetching logs...");
     let logs = contract.value_changed_filter().from_block(0u64).query().await.unwrap();
@@ -71,6 +67,6 @@ pub async fn deploy() {
 
     console::log_2(
         &format!("Value: `{}`. Logs: ", value).into(),
-        &JsValue::from_serde(&logs).unwrap(),
+        &serde_wasm_bindgen::to_value(&logs).unwrap(),
     );
 }

examples/ethers-wasm/webpack.config.js

@@ -1,29 +1,31 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack');
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const webpack = require("webpack");
 const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 
 module.exports = {
-    entry: './index.js',
+    entry: "./index.js",
     output: {
-        path: path.resolve(__dirname, 'dist'),
-        filename: 'index.js',
+        path: path.resolve(__dirname, "dist"),
+        filename: "index.js",
     },
     plugins: [
         new HtmlWebpackPlugin({
-                template: './index.html',
-                inject: false
-            }
-        ),
+            template: "./index.html",
+            inject: false,
+        }),
         new WasmPackPlugin({
-            crateDirectory: path.resolve(__dirname, ".")
+            crateDirectory: path.resolve(__dirname, "."),
         }),
         // 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']
-        })
+            TextDecoder: ["text-encoding", "TextDecoder"],
+            TextEncoder: ["text-encoding", "TextEncoder"],
+        }),
     ],
-    mode: 'development'
+    experiments: {
+        asyncWebAssembly: true,
+    },
+    mode: "development",
 };