How to make an RPC call from a working custom RPC, decorate types and display info successfully?

Question

We are building a custom UI for chains containing a specific custom pallet and rpc module.

The custom UI is similar to a polkadot-js clone we built, but much simpler. In our simple custom UI, we are having some issues with making rpc calls to the custom rpc server and then displaying the info, and being roadblocked by type decoration errors.

The issue

We want to make an RPC call such as api.rpc.superSig.listMembers from a live testnet chain, which contains an RPC module called Supersig rpc, which connects to supersig pallet, and display the information on screen, without errors.

rpc: wss://soupcan1.jelliedowl.com

Working version here you can see a working version: Soupcan - polkadot-js clone that succesfully connects with the rpc and displays information in a table.

So we can safely assume there is not a problem with the chain, pallet or rpc server. Link to the code we creates the Dashboard Table and rpc is here

Types we need to use to decorate the RPC are here we also have supersig custom types npm package

The rpc in our pallet is here

Errors

The problem is we are getting some errors when creating a custom UI:

RPC-CORE: listMembers(supersig_id: AccountId): Vec<(AccountId, Role)>:: 2: Supersig error: Module, ModuleError { index: 42, error: [1, 0, 0, 0], message: None }

"42" means that the pallet number is 42 meaning supersig pallet.

VEC: Unable to decode on index 0 Tuple: failed on 1:: DoNotConstruct: Cannot construct unknown type Role

Here is a link to the [branch(https://github.com/decentration/subverse-frontend/tree/issue-status) of our custom UI.

Replicate Issue

steps to replicate the above listMembers error:

• clone branch
• npm install
• npm start
• Connect to Soupcan node (soupcan1.jelliedowl.com) in the top left of the screen (make sure not to connect to soupcan2).
• Go to Dashboard in the Sidebar.
• Go to ./src/components/Dashboard/Dashboard.tsx to find the relevant code.
• Check console

How do you successfully display the listMembers information?

Answer 1

Seems like it's an issue with the runtime, not in front-end.

//rpc/src/lib.rs
fn list_members(
    &self,
    supersig_account: AccountId,
    at: Option<<Block as BlockT>::Hash>,
) -> RpcResult<Vec<(AccountId, Role)>> {
    let api = self.client.runtime_api();
    let at = BlockId::hash(at.unwrap_or_else(|| self.client.info().best_hash));
    let members = api
        .list_members(&at, supersig_account)
        .map_err(runtime_error_into_rpc_err)?
        .map_err(supersig_rpc_error)?;

    Ok(members)
}

const RUNTIME_ERROR: i32 = 1;
const SUPERSIG_ERROR: i32 = 2;

/// Converts a runtime trap into an RPC error.
fn runtime_error_into_rpc_err(err: impl std::fmt::Debug) -> JsonRpseeError {
    CallError::Custom(ErrorObject::owned(
        RUNTIME_ERROR,
        "Runtime error",
        Some(format!("{:?}", err)),
    ))
    .into()
}

// src/rpc.rs
pub fn list_members(
    supersig_account: &T::AccountId,
) -> Result<Vec<(T::AccountId, Role)>, DispatchError> {
    let supersig_id = Self::get_supersig_id_from_account(supersig_account)?;
    Ok(Members::<T>::iter_prefix(supersig_id).collect())
}