Show custom RPCs/RuntimeAPIs in PolkadotJS UI

Question

At the moment I try to figure out why PolkadotJS UI (https://polkadot.js.org/) is not able to show my custom RPC endpoints or runtime APIs. They are available in general and also available in the list of RPC methods but not shown under "RPC calls" or "Runtime calls". I am able to call it from our custom UI via PolkdatJS lib. Has anyone an idea why they are not shown?

Maybe important as additional information:

1. All RuntimeAPIs are implemented and defined directly inside the runtime
2. All RPC endpoints are defined in a separate single crate
3. All traits have rust-doc comments

Thanks for the help!

Answer 1

I don't think the hosted Polkadot JS UI supports Custom RPCs.

You need to follow the instructions for defining custom RPCs when initializing your own Polkadot JS instance as documented here

Custom definitions

RPCs are exposed as a method on a specific module. This means that once available: you can call any rpc via api.rpc.<module>.<method>(...params[]). For example, you can define a firstModule_testMethod on the Rust node and if correctly defined it will be callable via api.rpc.firstModule.testMethod(...). To supply custom RPC methods, you provide an rpc object on the options to the API.

...
const api = await ApiPromise.create({
   rpc: {
    firstModule: {
      testMethod: {
        description: 'Just a test method',
        params: [
          {
            name: 'index',
            type: 'u64'
          },
          {
            name: 'at',
            type: 'Hash',
            isOptional: true
          }
        ],
        type: 'Balance'
      },
      anotherMethod: { ... },
      ...
    },
    anotherModule: { ... },
    ...   },
  ... });

In the above example we have defined a new method, which is now available on the API as api.rpc.firstModule.testMethod(index: u64, at?: Hash) => Promise<Balance>. For the optional parameters, we added isOptional: true alongside the name & type in the parameter definition.

Even if you define the method it will only appear on the API if it appears in the list returned by api.rpc.rpc.methods(), which is the list of known RPCs the node exposes. So when making changes to the node you should double-check that it does announce the RPC method and that it conforms to the format <module>_<method>. For example foo_bar is a valid name whereas bar is not. I.E. Methods which do not contain both a module and method component won't be detected and cannot be decorated. If in doubt, follow the conventions in Substrate master.

Answer 2

In order to have your RPC methods to show up, you would need to decorate the types as explained in Shawn's answer, which then need to be added to ./packages/src/api/typesBundle.ts.

I am sure there is a command to run which automatically adds them from the ./package/src/api/spec folder into typesBundle.ts, but for the sake of testing you can add it to typesBundle.ts manually.

When you add it to the typesBundle.ts make sure that the node name of your chain is correctly added, in the example below it is the default node-template, along with the types associated to the custom RPC methods in my node runtime.

Then they should show up in the RPC area is its own module. Like so:

This is enough to get things working, but if you want to make an `api.rpc.. call within the code of apps then it would also needed to be added somewhere else. Which i will include once i find out.