Back to videos

How to build a Dapp - Interacting with a smart contract using React and Ethers / useDApp

How to interact with your smart contract using React, useDApp and Ethers ?

In the first tutorial we made a simple smart contract for our tower and deployed it to rinkeby testnet blockchain.

In this second video we create a frontend with React and interact with the deployed smart contract using Ethers library and useDApp framework.

What you'll learn :

  • How to check if a wallet is installed, connect it to your website and check if it is connected to the correct chain

  • How to create transactions and create new floors on the tower

  • How to get the event logs from your contract

Useful links :

The final Dapp you will build

https://www.wawasensei.dev/InfinityTower/

The final tutorial code

https://github.com/wass08/infinity-tower-tutorial-usedapp

useDApp

https://usedapp.io/

Mantine (the UI framework we'll be using in this web3 course)

https://mantine.dev/

Ethers

https://docs.ethers.io/v5/

MetaMask

https://metamask.io/

To get further :

The excellent CryptoZombies courses

https://cryptozombies.io/en/course

Web3js (not used but might be interesting)

https://web3js.readthedocs.io/en/v1.7.4/

If you can't wait for the next videos :

React Three Fiber

https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

If you want to dive into Web3 and Three.js don't forget to subscribe to the channel!

Need help with this tutorial? Join our Discord community!