Decompose complex types in JS

Question

My overall goal is to build a generic extrinsic builder, just like the extrinsic tab from polkadot-js/apps. This code is very old and very hard to decipher unfortunately and I couldn't find any doc for this.

The UI lists all the pallets and their methods. The next step is to show all the arguments for each method, with JS/TS types corresponding to the Rust types.

I'm taking a very specific type as an example and we can go from there.

The democracy.vote call takes the following arguments

• { name: "refIndex", type: "Compact<u32>", typeName: "ReferendumIndex" }
  this translates to an integer.
• { name: "vote", type: "PalletDemocracyVoteAccountVote", typeName: "AccountVote" }
  this is more complex and is the reason why I post here.

Here is how I get this:

import { getTypeDef } from '@polkadot/types/create'

const arg = api.tx["democracy"]["vote"].meta.args[1]
const argTypeDef = getTypeDef(arg.type)
console.log('argTypeDef', argTypeDef)
// { name: "vote", type: "PalletDemocracyVoteAccountVote", typeName: "AccountVote" }

Now, under the hood, this type AccountVote is an enum as seen in the rust doc. It has other nested types such as Vote and Conviction

How would you go about coming from the AccountVote to have something incrementally translated into JS, which is what I could pass the the api to construct this call?

{
    Standard {
        vote: {
          aye: boolean,
          conviction: string
        },
        balance: string,
    },
    Split {
        aye: string,
        nay: string,
    },
}

The closest I came is to create an instance of this type, but it initializes it with the defaults so we're missing part of the information.

const instance = argTypeDef.type && api.registry.createType(argTypeDef.type)
console.log(instance.toHuman())
// {
//  "Standard": {
//    "vote": {
//      "conviction": "None",
//      "vote": "Nay"
//    },
//    "balance": "0"
//  }
//}