Introduction
Connecting your Dapp front-end to the Ethereum blockchain can be a challenging task. You can go the manual route using Ethers.js or Web3.js, and then connect manually to the wallet of your choice. But now let’s suppose you have a lot of wallets to integrate with. In that case, you’ll need to handle each connection implementation on its own, and figure out how to store the session and a whole bunch of edge cases.
This obviously is not ideal, hence why there exist few libraries to abstract this process in your React app and make connecting your Dapp to your wallet and the Ethereum blockchain easy.
Solution
The key criteria we’ll focus on when choosing a package to work with our React Dapp are:
- Ease of use
- Features
- Documentation
- Supported wallets
- Ease of use
the solution is using packages and libraries that abstract
Wagmi
This one is my absolute favorite. I have used on it on countless projects and it’s always a joy to work with. It has the best documentation you can find, great examples, full Typescript support
Props
- Amazing documentation
- Great examples like how to connect to a wallet, send transactions etc
- Full Typescript support
- Built-in wallet connectors for the most popular wallets like Metamask and WalletConnect
- Caching built-in
Cons
- Support a limited list of connectors (Wallets) compared to other choices
Web3-react
The most popular by GitHub stars, it's simple to use
Props
- Supports many different connectors
- Basic hooks for managing the account
- Used by some popular projects
Cons
- Need to set up connectors and methods for connecting your wallet on your own
- Need to install connectors separately
- Almost no tests or documentation; infrequent updates
useDApp
My second favorite of all.
Props
- Auto-refresh on new blocks and wallet changes
- Multicall support
- Transaction notifications
- Chrome extension and Firefox add-on
Cons
- Non-standard hook API
Conclusion
I hope you find this article useful!
Give it some claps to make others find it too! Make sure you follow me on Medium not to miss anything.
If you like short and simple articles filled with great tips and new tools consider subscribing to my newsletter:
.jpeg)
