Leveraging Viem in Hardhat for Frontend Development

[aalmada]

I'm really enjoying the Viem integration in Hardhat; it significantly enhances the coding experience within the project. I'm curious if anyone has attempted to repurpose this generated code for frontend development. Any recommendations? I'm currently operating within a monorepo setup. Previously, I've worked with Typechain alongside Ethers, and I had to manually transfer the generated code to the frontend project.

[kanej]

There is a plan to add viem support to Scaffold Eth 2: scaffold-eth/scaffold-eth-2#587

But more generally what is the requirement here? Would the following cover it:

• Hook into the compilation pipeline and output the contract artifacts to another designated folder in the front end
• Similarly export of the d.ts files for the viem contract instances

[aalmada]

Hi @kanej! Thanks for the reply!

I want to leverage strong types as much as possible without dealing with ABIs, similar to how I used Typechain in the past, as described in these articles I wrote a few years ago: Using React Query to query smart contracts - Part 1.

I've already delved into the d.ts files. I'm not a TypeScript expert and I was surprised by what I found. With Typechain, for a MyToken contract, I would typically encounter a MyToken interface with its methods declared.

Recently, I started using hardhat-viem in a small project and, surprisingly, VS Code isn't providing any suggestions or warnings for compilation errors. I'm finding the errors at runtime. You can find the code here. The project was initialized using npx hardhat init.

For these reasons, I don't understand how I could use it on the frontend development. Am I overlooking something? Any help would be appreciated.