Yew Subxt WASM examples #968
Conversation
.gitignore
Outdated
| @@ -2,3 +2,4 @@ | |||
| **/*.rs.bk | |||
| **/.DS_Store | |||
| cargo-timing* | |||
| /examples/wasm-example/dist | |||
There was a problem hiding this comment.
nit:
| /examples/wasm-example/dist | |
| /examples/wasm-example/dist | |
examples/wasm-example/Cargo.toml
Outdated
| [dependencies] | ||
| futures = "0.3.28" | ||
| subxt = { path = "../../subxt", default-features = false, features = ["jsonrpsee-web"], target_arch = "wasm32" } | ||
| yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] } |
There was a problem hiding this comment.
DQ: does yew = {version = "0.20.0", features = ["csr"] } provides enough features here?
| //! Also make sure your browser supports WASM. | ||
| use futures::{self, FutureExt}; | ||
|
|
||
| use yew::prelude::*; |
There was a problem hiding this comment.
nit: do we need to import everything here?
|
|
||
| button:hover{ | ||
| background-color: $secondary; | ||
| } |
| html! { | ||
| <div> | ||
| if let Some(operation_title) = &self.operation_title{ | ||
| <button onclick={reload}>{"🡄 Back"}</button> |
There was a problem hiding this comment.
nit: the prefixed characters do not render properly on my machine, could we change it to something else?
Maybe plain Back or with some other chars?
| let decoded_ext = ext.as_root_extrinsic::<polkadot::Call>(); | ||
|
|
||
| writeln!(output, " Extrinsic #{idx}:").ok(); | ||
| writeln!(output, " Bytes: {bytes_hex}").ok(); |
There was a problem hiding this comment.
nit: is there something we could do here to wrap the bytes on the screens width?
I'm seeing the bytes exceeding the green and black boxes on my machine
There was a problem hiding this comment.
Possibly a word-wrap: break-word; in the css
| //! ``` | ||
| //! Run the app locally: | ||
| //! ``` | ||
| //! trunk serve --open |
There was a problem hiding this comment.
After running this command on the repo trunk serve --open the Cargo.lock will get modified leading to some git uncommitted changes. Could we make sure that the Cargo.lock is up to date before merging this? Thanks!
| # This cannot be a workspace dependency, because it requires | ||
| # mutually exclusive jsonrpsee features to work, and workspaces | ||
| # will aggregate features used across crates: |
There was a problem hiding this comment.
Nit: this comment should probbaly be tweaked/added to
| /examples/wasm-example/dist | ||
| /examples/wasm-example/target |
There was a problem hiding this comment.
Maybe worth doing the same for the other excluded crate, testing/wasm-tests?
|
At a quick glance I can't see any guidance on how to run this example in the code; am I missing something? If not, I think a README.md in the wasm-example folder on how to start it would be super handy for people :) |
|
I merge it now, I keep all of your comments in mind for a second PR I am going to put out today adding a singer example, where I fix the nits as well. |
* add wasm examples * cargo fmt * change crate name * resolve workspace conflicts
relates to #920
Added an example Yew Application showcasing some of the functionality of Subxt.
The main focus is to show users a working configuration that enables them to start building WASM apps with Subxt.
To run the app locally, navigate to examples/wasm_examples and use Trunk, a WASM bundler:
Run the app locally:
You need to have a local polkadot/substrate node with it's JSON-RPC HTTP server running at 127.0.0.1:9933 in order for the examples to be working.