How to get started with Reown on Plasma

Learn how to use Reown to enable wallet connections and interact with the Plasma network.

With Reown, you can provide seamless wallet connections, including email and social logins, on-ramp functionality, 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. Set up on Reown.
  2. Configure a wallet connection modal and enable interactions with the Plasma network.

This guide takes approximately 5 minutes to complete.

Let’s get started!

Setup

In this section, you'll learn how to set up the development environment to use Reown with Plasma.

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

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.
  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 + Bitcoin). In this case, you need to either pick Wagmi or Ethers since Plasma network is an EVM compatible blockchain. I 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.

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

You can change the above command if you are using yarn, pnpm or bun accordingly.

The example will be pre-configured with a projectId that will only work on localhost. To fully configure your project, please obtain a projectId from the Reown Cloud Dashboard and update your projectId accordingly.

The constant variable projectId can be found in /config/index.ts file.

Create a new project on Reown Dashboard

Now, we need to get a project ID from Reown Cloud that we will use to set up AppKit with Wagmi config. Navigate to dashboard.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 your team’s section of the Cloud Dashboard and click on “+ Project”.

Now, select the product as “AppKit” and enter the name for your project. Then, click on “Create”.

The Dashboard will now create a new project for you, which will also generate a project ID. You will notice that your project was successfully created.

Scroll down, and at the bottom, you will be able to find your Project ID. Please copy that as you will need it later.

Configure AppKit with Plasma

Open the project that you created using the AppKit CLI in your preferred code editor and 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. The example will already be configured with Ethereum mainnet and Plasma mainnet. However, if that is not the case, then please update the corresponding import statement as shown below.

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

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

export const networks = [mainnet, plasma] as [AppKitNetwork, ...AppKitNetwork[]]

After you do this, your project will use Ethereum Mainnet and Plasma Mainnet 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

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

Conclusion

And that’s it! You have now learned how to create a simple app using AppKit that allows users to connect their wallet and interact with the Plasma network.

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. By following this guide, you'll quickly get up and running with Reown’s AppKit, enhancing your app’s user experience and interaction with blockchain technology.

You can view the complete code repository here.

What's Next?

If you're wondering how to use Reown for various use cases and build apps with great UX, feel free to check out our other blogs here.

Need help?

For support, please join the official Reown Discord Server.

Related articles

More articles