How to use subxt in yew.rs front-end app

Question

Here is test demo, but always fail to run.

• Cargo.toml

[dependencies]
yew = { version = "0.20.0", features = ["csr"] }
gloo = "0.8.0"
wasm-bindgen-futures = "0.4.32"
subxt = { version="0.27.0", default-features = false, features = ["jsonrpsee-web"] }

• main.rs

use gloo::console::log;
// use sp_keyring::AccountKeyring;
use subxt::{OnlineClient, PolkadotConfig};
use wasm_bindgen_futures;
use yew::prelude::*;

#[subxt::subxt(runtime_metadata_path = "metadata.scale")]
pub mod polkadot {}

#[function_component(App)]
fn app() -> Html {
    wasm_bindgen_futures::spawn_local(async move {
        let api = OnlineClient::<PolkadotConfig>::new().await.unwrap();
        log!("hello world");
    });
    html! {
      <>
          <h1 class="text-3xl font-bold underline bg-slate-100">{"Hello world!"}</h1>
      </>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

The problem is #[subxt::subxt(runtime_metadata_path = "metadata.scale")] pub mod polkadot {} always throw an error

error: Failed to decode metadata: Could not decode `RuntimeMetadataPrefixed.1`:
           Could not decode `RuntimeMetadata`, variant doesn't exist

I think I followed the steps exactly in the official documentation

1. Build a local blockchain
2. run cargo install subxt-cli
3. run subxt metadata -f bytes > metadata.scale

• What steps I forgot and need to do?
• By the way, I find if I don't specify the subxt as subxt = { version="0.27.0", default-features = false, features = ["jsonrpsee-web"] } in my Cargo.toml, it seem like impossible to work with Yew.rs.And if i set subxt as subxt = { version="0.27.0", default-features = false, features = ["jsonrpsee-web"] } in my Cargo.toml, the OnlineClient::<PolkadotConfig>::new().await.unwrap(); also throw error.

no function or associated item named `new` found for struct `OnlineClient` in the current scope

Can someone answer this question for me?

Answer 1

1. Build a local blockchain
2. run cargo install subxt-cli
3. run subxt metadata -f bytes > metadata.scale

How are you building/starting a local blockchain node? The error error: Failed to decode metadata: Could not decode RuntimeMetadataPrefixed.1 implies that there is something wrong with your metadata.scale file.

Perhaps you ran into an error running subxt metadata -f bytes > metadata.scale and the file is empty or doesn't have the expected contents in (how big is it? Can you open it with a text editor?). Perhaps the node you started has some sort of issue. I'd need more information to be able to help with this.

By the way, I find if I don't specify the subxt as subxt = { version="0.27.0", default-features = false, features = ["jsonrpsee-web"] } in my Cargo.toml, it seem like impossible to work with Yew.rs

That's right; the default features enabled in Subxt aren't compatible with compiling it to WASM, since it relies (by default) on Substrate bits and Jsonrpsee bits that themselves don't compile to WASM.

As you've found, default-features = false, features = ["jsonrpsee-web"] is required to disable the features which aren't WASM compatible, and then jsonrpsee-web provides a WASM (web) compatible RPC client :)

This does need to be better documented, which is something I will be working on much more in the coming months (notably here; documenting common user flows eg using with wasm).

no function or associated item named new found for struct OnlineClient in the current scope

The OnlineClient::new() method is available in these cases:

#[cfg(any(
    feature = "jsonrpsee-ws",
    all(feature = "jsonrpsee-web", target_arch = "wasm32")
))]

In other words, either the jsonrpsee-ws feature needs to be enabled, or the jsonrpsee-web feature needs to be enabled and you're compiling to WASM. My best guess is that you're using the jsonrpsee-web feature but not compiling to WASM, though again I'd need more information :)