• Frontend
• Web3 Libraries

Web3 Libraries

React is pretty basic web2 stuff, but if you want to write web3 app, you need a library to glue the web2 stuffs and web3 stuffs together, that is web3.js and ethers.js, which I think it's simple to get started.

Between these two choices, much more people prefer to use ethers.js. I prefer to use Typechain to generate the types at first with ethers.js used underlying (If you're only a frontend dev, talk to your smart contract devs to generate the types files for you).

Concept of JSON RPC

Ethereum runs JSON RPC protocol to interact (including reading blockchain state and write data to blockchain), versus web2 applications usually use REST API.

For example, to call eth_getBalance method, you can write curl script like this:

// Request
curl -X POST --data '{"jsonrpc":"2.0","method":"eth_getBalance","params":["0x407d73d8a49eeb85d32cf465507dd71d507100c1", "latest"],"id":1}'
// Result
{
  "id":1,
  "jsonrpc": "2.0",
  "result": "0x0234c8a3397aab58" // 158972490234375000
}

Your favorite web3 libraries just wrap all the complication of JSON RPC into a easier to use API.

Web3 wallet modal libraries

There are a lot of libraries handling the connectivity to the web3 wallet, the most used one is web3modal.

And I would like to highlight another one that has a more friendly interface, that is web3-onboard.

There are also other toolkit by wallets like ConnectKit and RainbowKit

Libraries with React hooks

useDApp as it provides easy to use React hooks and you can integrate it with web3modal or web3-onboard when initiating connection, just pass the provider object to useDApp's activate function.

Also, there's another library wagmi which provides more utilities such as erc20 abi.

My opinion is that, you should use useDApp if you want to integrate with other web3 modal library, that will give you a unified interface to get providers / account.

If you will write your own modal and want to gain more control to the web3 connectivity, use wagmi.

Multicall

To reduce the call to the rpc, you should also consider using multicall.

The multicall idea is originated from MakerDAO's multicall contract.

Note that this is different from Uniswap's multicall which will write to blockchain, MakerDAO's multicall do the query only.

I think ethcall is good as it supports deployless contract. But the library is little bit confusing to use.

I wrote a declarative-multicall to simplfy the ethcall control for you.

Examples

A nice example on web3 development is WEB3 BY EXAMPLE, it should contain a lot of example for you to query code.

And you can see an example of how to use declarative-multicall here. It includes other topic such as how to useDApp with web3Modal , how to useDApp with web3-onboard also how to integrate it with React Query

Numbers

Another tricky place to web3 library is the number handling. I've seen some bugs that pass the truncated input to write the chain, but the truncated number is greater than the number on chain, which cannot be successfully written.

Also, you would need to handle the number every time by calling ethers' ethers.utils.formatUnits() function.