Introduction

When I started to write the Web3 Storage cost calculator I realized that Genesys Go does not surface the cost of immutable storage anywhere. Neither in the docs nor somewhere else. On their Discord I got the response that the storage cost is stored in an on chain account though. This is where I first started to write a deserializer based on the IDL manually. Then I remembered Metaplex Kinobi which can be used to generate complete rust and JS / TS SDKs - including serializers.

In this guide i want tot show you how to use Kinobi to create a simple JS SDK based on an IDL. I will use Shadow Drive as an example.

Generate Umi clients with Kinobi

First generate or download your IDL. If you want to follow this guide with an example IDL you can use the SHDW IDL by Gen Go. Be aware that you need a JSON IDL for this. Not the typescript version. In my example I had to convert the IDL from TS to json "manually". Most of it can be done with a converter like this. You should put the JSON into a new folder.

Then you need to install Kinobi with npm install @metaplex-foundation/kinobi. You can use the package manager of your choice.

You will also need a JS file, in example called kinobi.js, to tell Kinobi what to do. Let's write a simple default file (you can find the full file at the bottom of this page):

First import the required functions:

const kinobi = require('@metaplex-foundation/kinobi');

const createFromIdls = kinobi.createFromIdls;
const RenderJavaScriptVisitor = kinobi.RenderJavaScriptVisitor;

Then instantiate Kinobi. You can pass one or more IDLs here. You have to pass the path to the idl file. If the IDL is in the same folder as the file we are writing right now you can just do it like this:

const kinobiInstance = createFromIdls(['idl.json']);

Last we tell Kinobi where to store the generated client and to run.

// Render JavaScript.
const jsDir = 'clients/generated';
kinobiInstance.accept(new RenderJavaScriptVisitor(jsDir));

Run the script with this cli command:

node kinobi.js

And basically that's it! You should have a whole lot of typescript files now which you can use, e.g. by copying it into your codebase.

Between step 2 and 3 you can set up Kinobi "visitors". Visitors modify the generated code. This can be helpful if your SDK should have default values for example. If you want to see what's possible you can have a look at the kinobi.js file that was written for Metaplex Token Metadata here.

Good to know

There are some things which are good to know to not run into issues. I am going to list those here.

Make sure that your IDL is a JSON, not a Typescript file
Your IDL has to contain 'metadata'. Shank adds it automatically, Anchor does not. You can add it manually to the End of the IDL before the last }. It can look like this, while the address is the address of the program of the IDL:

"metadata": {
    "address": "cndyAnrLdpjq1Ssp1z8xxDsB8dxe7u4HL5Nxi2K5WXZ",
    "origin": "anchor"
  }

The End

Full kinobi.js example script

const kinobi = require('@metaplex-foundation/kinobi');

const createFromIdls = kinobi.createFromIdls;
const RenderJavaScriptVisitor = kinobi.RenderJavaScriptVisitor;

// Instantiate Kinobi.
const kinobiInstance = createFromIdls(['idl.json']);

// Update the Kinobi tree using visitors...

// Render JavaScript.
const jsDir = 'clients/generated';
kinobiInstance.accept(new RenderJavaScriptVisitor(jsDir));