Import ABI from json, with as const

[HotCustard]

Is it possible to import an ABI from a json file, with as const assertion?

I can get it working if i copy paste my ABI into a .ts file, but struggling when reading from a json.

[tmm]

Unfortunately TypeScript doesn't support this right now. This is something we are very interested in supporting and are looking into alternatives.

Curious: Where do you get your ABIs from right now (block explorer, forge build, etc.)?

[HotCustard]

Currently from a Json artifact file generated by the Hardhat deploy process.
With 0.6.8 I could just reference the Json directly, now I need to copy paste it into a ts file.
Worth it though for the type safety.

[tmm]

Totally! Bummer that TypeScript doesn’t support json in this way yet.

You should be able to reference the json directly still, you just won’t get type-safety.

[Yuripetusko]

I think this is a great feature and I appreciate you adding it in it's current form, that said It's quite un-usable as it's basically the same as type casting. Having to type abi as js array in each file where the hook is used is not very practical, especially if ABI is huge and during development while ABI is changing often.

Perhaps more of a useDapp + typechain approach can be used instead?

[tmm]

@Yuripetusko How is it the same as type casting? If you have ABIs in JSON format, adding support is straightforward:

1. Update file from .json to .ts format. For example, myAbi.json should be myAbi.ts
2. Add export and const assertion

-[
+ export const myAbi = [
  {
    "inputs": [{ "name": "owner", "type": "address" }],
    "name": "balanceOf",
    "outputs": [{ name: "balance", type: "uint256" }],
    "stateMutability": "view",
    "type": "function",
  }
-]
+] as const

3. Import and use

-import myAbi from 'path/to/myAbi.json'
+import { myAbi } from 'path/to/myAbi'

const { data } = useContractRead({
  address: '0x…',
  abi: myAbi,
  functionName: 'balanceOf',
  args: ['0x…'],
})

Happy to hear additional feedback, but this method should be less work than setting up a tool like TypeChain and more accurate since the types are inferred directly from your ABI.

[Yuripetusko]

This works. I swear I was trying this yesterday and it was giving me unknown type, sorry must have been some silly mistake. Yeah this works well and I can simply write a small script to generate this from my JSON files

[Yuripetusko]

Is there perhaps some script we can use to generate an abi from JSON to a format we can import and pass to wagmi? Otherwise I don't really see a way to use this new feature without duplicating an ABI code in each file where a hook is used? Am I missing something?

[Yuripetusko]

Found this, which seems to do what I was looking for

https://www.npmjs.com/package/typechain-target-react-query-wagmi

[tmm]

See #1084 (reply in thread)

[Yuripetusko]

One thing I noticed is that types are getting lost if I re-import abi in index.ts

export * from './abis/my-abi.ts

[joaoh9]

I forked hardhat's plugin 'hardhat-abi-exporter' and setup a default option (tsFiles) to export ts files inside the abi folder:
https://github.com/H3aven-Labs/hardhat-abi-exporter
you just need to lint it afterwards.
it solved the issue for me!