How to connect a wallet to your app with Reown AppKit

In this guide, you'll learn how to use Reown AppKit to enable wallet connections and interact with the Monad network.

With AppKit, you can provide seamless wallet connections, including email and social logins, smart accounts, one-click authentication, and wallet notifications, all designed to deliver an exceptional user experience.

In this tutorial, you will learn how to:

1. Initialize a new project using AppKit CLI and setting up the Project ID.
2. Configure the project with Monad Testnet.

This guide takes approximately 5 minutes to complete.

Setup

In this section, you'll set up the development environment to use AppKit with Monad.

For this tutorial, we'll be using Next.js, though you can use any other framework compatible with AppKit.

note

AppKit is available on eight frameworks, including React, Next.js, Vue, JavaScript, React Native, Flutter, Android, iOS, and Unity.

Now, let’s create a Next app using the CLI. In order to do so, please run the command given below:

npx @reown/appkit-cli

The above command uses the AppKit CLI to allow you to effortlessly set up a simple web app configured with Reown AppKit.

After running the command, you will be prompted to confirm the installation of the CLI. Upon your confirmation, the CLI will request the following details:

1. Project Name: Enter the name for your project. (eg: my-monad-appkit-app)
2. Framework: Select your preferred framework or library. Currently, you have three options: React, Next.js, and Vue.
3. Network-Specific libraries: Choose whether you want to install Wagmi, Ethers, Solana, or Multichain (EVM + Solana). In this case, you need to either pick Wagmi or Ethers since Monad is an EVM compatible blockchain. We will be choosing Wagmi for the sake of this tutorial.

After providing the project name and selecting your preferences, the CLI will install a minimal example of AppKit with your preferred blockchain library.

When the example installation is complete, you can enter the project directory by running the below command in your terminal.

cd my-monad-appkit-app

Now, you need to install the dependencies required to run the AppKit project. In order to do this, please run the command given below.

npm install

note

You can also use other package managers such as yarn, bun, pnpm, etc.

Create a new project on Reown Cloud

We need to get a Project ID from Reown Cloud that we will use to set up AppKit with Wagmi config. Navigate to cloud.reown.com and sign in. If you have not created an account yet, please do so before we proceed.

After you have logged in, please navigate to the "Projects" section of the Cloud and click on "Create Project".

Now, enter the name for your project and click on "Continue".

Select the product as "AppKit" and click on "Continue".

Select the framework as "Next.js" and click on "Create". Reown Cloud will now create a new project for you which will also generate a Project ID.

You will notice that your project was successfully created. On the top left corner, you will be able to find your Project ID. Please copy that as you will need that later.

Set up the Project ID

Before we build the app, let’s first configure our .env file. Open the project that you created using the AppKit CLI in your preferred code editor.

On the root level of your code directory, create a new file named .env.

Open that file and create a new variable NEXT_PUBLIC_PROJECT_ID. We will assign the project Id that we copied in the previous step to this environment variable that we just created. This is what it will look like:

NEXT_PUBLIC_PROJECT_ID ="YOUR_PROJECT_ID_HERE"

warning

Note: Please make sure you follow the best practices when you are working with secret keys and other sensitive information. Environment variables that start with NEXT_PUBLIC will be exposed by your app which can be misused by bad actors.

Configure AppKit with Monad Testnet

Navigate to /src/config/index.ts file.

Within this code file, you can notice that the networks configured with AppKit are being pulled from @reown/appkit/networks. Please update the corresponding import statement as shown below.

import { mainnet, monadTestnet } from '@reown/appkit/networks'

Similarly, update the code line where the constant variable networks as shown below.

export const networks = [monadTestnet] as [AppKitNetwork, ...AppKitNetwork[]] 

After you do this, your project will use Monad Testnet with Reown AppKit.

Run your AppKit app

You can now run the app and test it out. In order to do so, run the command given below.

npm run dev

note

If you are using alternative package managers, you can try either of these commands - yarn dev, pnpm dev, or bun dev.

Conclusion

You have now learned how to create a simple app using AppKit CLI that allows users to connect their wallet and interact with Monad testnet.

Reown AppKit is a powerful solution for developers looking to integrate wallet connections and other Web3 functionalities into their apps on any EVM chain. In just a few simple steps, you can provide your users with seamless wallet access, one-click authentication, social logins, and notifications—streamlining their experience while enabling advanced features like on-ramp functionality and smart accounts.

You can view the complete code repository here, Reown AppKit EVM.