fix: WASM example (#1719)
* fix: wasm example * fix: webpack 5.0 * fix: scripts
This commit is contained in:
DaniPopes
GitHub
parent
e89c7a378b
commit
59a82a1c8f
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -5,4 +5,5 @@ bin/
|
|||
pkg/
|
||||
wasm-pack.log
|
||||
node_modules/
|
||||
yarn-error.log
|
||||
yarn-error.log
|
||||
dist
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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!
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
{
|
||||
"name": "ethers-wasm",
|
||||
"license": "MIT OR Apache-2.0",
|
||||
"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\""
|
||||
},
|
||||
"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"
|
||||
}
|
||||
"name": "ethers-wasm",
|
||||
"license": "MIT OR Apache-2.0",
|
||||
"private": "true",
|
||||
"scripts": {
|
||||
"build": "webpack",
|
||||
"serve": "webpack-dev-server",
|
||||
"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.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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue