How to Interact with EVM Smart Contracts using AppKit and React
In this recipe, you will learn how to:
- Read data from a smart contract
- Write data to a smart contract
This guide takes approximately 20 minutes to complete.
Let’s dive in!
Prerequisites
- A fundamental understanding of JavaScript and React.
- A minimal installation of AppKit in React.
- Obtain a new project Id on Reown Cloud at https://cloud.reown.com
Final project
Appkit Wagmi Example with smart contract interactions
Download the full project to try it directly on your computer.
Appkit Ethers Example with smart contract interactions
Download the full project to try it directly on your computer.
Try the demo in Sepolia Testnet
Requirements
In order to interact with a smart contract you will need to have one deployed in a EVM-compatible blockchain. There are several tools to help you deploy a smart contract:
We have already deployed a simple smart contract (0xEe6D291CC60d7CeD6627fA4cd8506912245c8cA4) in Sepolia Testnet for you to use. Once you compile the smart contract, you get the ABI. The ABI is a set of rules that define how the contract’s functions can be called and how data is sent and received.
To interact with the smart contract, you need to have some tokens to pay for gas fees when writing to the contract. You can get them from this faucet, but you can also look for other options on the web. It’s also good to know that reading from a smart contract is free.
For both SDKs, you need to declare the contract address and ABI.
Start building with Wagmi
- Start by importing the hooks to read and write.
- Call the hooks.
- Generate the actions:
Start building with Ethers
- Start by importing the libraries needed to interact:
- Call the AppKit Provider hook:
- Generate the actions calling the functions:
Conclusion
By following this guide, you’ve learned how to integrate Reown AppKit with Wagmi or Ethers to interact with a smart contract. With very few lines of code you can read and write to a smart contract.
Keep exploring AppKit to enhance your dApp’s functionality and user experience!
Was this page helpful?