help with extracting named components from ABI to Typescript type

[yulafezmesi]

Hi everyone! I'm a bit stuck while working with AbiParametersToPrimitiveTypes from Viem. I'm trying to extract component names from the ABI itself — specifically for tuple arrays — so I can define custom renderers per field name for a particular event.

stackblitz

Here’s the ABI event I’m working with:

const abiItem = parseAbiItem(
  'event LogUpdateExchangePrice((address user, address token, uint8 mode, uint256 expandPercent, uint256 expandDuration, uint256 baseDebtCeiling, uint256 maxDebtCeiling)[] userBorrowConfigs, uint256 supplyExPrice_, uint256 borrowExPrice_)'
);

using

type Parsed = AbiParametersToPrimitiveTypes<typeof abiItem.inputs>;

The resulting structure gives me something like a tuple-array style object:

const wrong: Parsed = {
  "0": {
    0: {
      baseDebtCeiling: '',
      expandDuration: '0'
    }
  },
};

What I want instead is something where the component names are preserved, like:

const expected: Parsed = {
  userBorrowConfigs:  {
      user: '0x...',
      token: '0x...',
      mode: 1,
      expandPercent: 100,
      expandDuration: 3600,
      baseDebtCeiling: '1000',
      maxDebtCeiling: '5000',
    }
  supplyExPrice_: '123',
  borrowExPrice_: '456'
};

[kulaizki]

you can use the AbiParameterToPrimitiveType utility from viem (or abitype). if your tuple components have names in the ABI, this utility automatically converts them into a TypeScript object instead of an array.

you can extract the specific tuple type with its names this way:

import { type AbiParameterToPrimitiveType } from 'viem'

// 1. Define your ABI (Must be 'as const' to preserve names!)
const abi = [
  {
    name: 'createUser',
    type: 'function',
    inputs: [
      {
        name: 'user',
        type: 'tuple',
        components: [ // <--- These names are what we want
          { name: 'username', type: 'string' },
          { name: 'age', type: 'uint256' },
          { name: 'isActive', type: 'bool' }
        ]
      }
    ],
    outputs: []
  }
] as const

// 2. Extract the specific Tuple Parameter
// We grab the first input of 'createUser'
type UserTupleParam = typeof abi[0]['inputs'][0]

// 3. Convert to Object Type
// Result: { username: string; age: bigint; isActive: boolean }
type UserObject = AbiParameterToPrimitiveType<UserTupleParam>

// If you just want the keys ('username' | 'age' | 'isActive'):
type UserKeys = keyof UserObject