Wagmi and Viem Experiment

[alcercu]

Determine if we are using packages in the front-end that are too low level and are forcing us to replicate boilerplate code among projects. The aim of this issue is to do a time-boxed exploration of different libraries, and try to asses if we should migrate from ethersjs to a more abstracted library like wagmi, useDapp, etc. , to another low level like viem, or if there is no migration needed at all.

[greenlucid]

I think wagmi and viem are for different things. wagmi is react hooks, viem is low-level, minimalistic ethers.
so far, I'm loving viem, it's insane quality:

• magic typescript autocomplete, without parsing or codegen
• small bundle size
• less non-sense types (such as, BigNumber is just bigint instead)

Wagmi, in the future, will be refactored to support viem.
Then there's rainbow wallet, which we should look into since most frontends are using it lately and it uses wagmi under the hood.

[AndreiMVP]

Viem is what.. 1 month old? I would give it some time before starting to use it in our apps. Wagmi adapting it would be cool (since they say it would help with some of the difficulties they faced). For the moment I think ethers w/ typechain is fine. The boilerplate you have also dictates how you use it around the codebase, which can lead to better or worse code.

A tool like typechain but for generating React specific hooks/components for the smart contract functions/data used (and more minimalistic) would be cool imo.

[jxom]

Hi! wagmi & viem author here! Just lurking GitHub.

@AndreiMVP — @wagmi/cli can generate React Hooks from an ABI definition. :)
React Plugin: https://wagmi.sh/cli/plugins/react

wagmi also infers types from an ABI at compile time, which removes the need for a build step altogether to generate types (no need for TypeChain). We use abitype (our other library) to achieve this. You can see the comparison here.

Would be awesome if ya’ll considered wagmi — let me know if you have any questions.