How to Sign Messages, Send Transactions, and Get Balance in EVM using AppKit with Ethers
Learn how to use Reown AppKit for essential wallet functionalities such as signing messages, sending transactions, and retrieving wallet balances.
In this recipe, you will learn how to:
- Retrieve the balance of the connected wallet
- Sign a message using a connected wallet
- Send a transaction to the EVM blockchain
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 Ethers Example with blockchain interactions
Download the full project to try it directly on your computer.
AppKit Minimal Installation
You can start a small project following the guidelines from our installation React docs using Ethers
Start building
In this guide we are going to use the library Ethers to make calls to the blockchain and to interact with the wallet.
To get the balance, sign a message and send a transaction follow the same steps in each operation:
- Start by importing the BrowserProvider object, some AppKit hooks to get the account information, chain id and the Provider.
- Use the
useAppKitAccount
hook to retrieve the user’s address and check if they are connected. TheuseAppKitNetworkCore
hook to get the chain id and theuseAppKitProvider
hook to get the wallet provider.
Get Balance
Fetching a user’s balance is straightforward using the BrowserProvider
object from ethers.
- Create a function to fetch and display (in console) the balance when triggered
- Finally, to call the function you can show the button in a component when
isConnected
istrue
Sign a message
To raise the modal to sign a message with your wallet. You can follow with these steps:
- Generate the function to raise the modal to sign the message
- Finally, to call the function:
Send a transaction in EVM
In order to raise the modal to sign and send a transaction with your wallet. You can follow with these steps:
- Create the test transaction
- Generate the function to raise the modal to send the transaction
- Finally, to invoke the function:
Conclusion
By following this guide, you’ve learned how to integrate Reown AppKit and Ethers in your React application to perform essential wallet operations. You can now fetch wallet balances, sign messages, and send transactions seamlessly in an EVM-compatible blockchain environment.
Keep exploring AppKit to enhance your dApp’s functionality and user experience!
Was this page helpful?