Getting started with WalletConnect and Moralis

In this guide, we'll be building a NextJS application that can authenticate users with WalletConnect and display a greeting message. This can be an ideal tutorial if you are looking to build your first dapp under 10 minutes.

Prerequisites

Basic knowledge with React/ JavaScript.
A cup of coffee and a mind filled with excitement

What is WalletConnect?

WalletConnect is the web3 standard to connect blockchain wallets to dapps. It enables developers to easily integrate more than 100 leading wallets into their dapps with just a few lines of code. With WalletConnect, users can choose to use their favorite wallet on any device. Developers can create multi-chain experiences and applications as WalletConnect is chain agnostic and built to work with any blockchain.

What is Moralis?

Moralis is considered to be the ‘Firebase of crypto’. Moralis provides a managed backend for blockchain projects. With the Moralis SDK, developers can speed up their development with the help of ready-made workflows for authentication, identity management, user balances, tokens, NFTs and much more.

Step 1 : Create a Moralis server

Go to Moralis and register a free account. After creating your account, you will be able to create a new moralis server. Enter the details pertaining to your project and hit the 'Add instance' button. This will take a couple of minutes to spin up and you will be able to find serverUrl and appId in your project's server details tab. We will be using these credentials in the upcoming steps.

Step 2 : Setting up your NextJS application

In order to create a NextJS application, enter the below command into your terminal,

npx create-next-app <any_name_of_your_choice>

This should eventually create a folder which contains all the required files for a NextJS application. More information about create-next-app can be found here.

Step 3 : Installing and initializing the Moralis SDK

The next step is to install the Moralis SDK by running the following command in your terminal.

npm install moralis react-moralis @walletconnect/web3-provider

Once the installation is complete, goto the index.js file on your IDE and import the MoralisProvider from the react-moralis package. Use the MoralisProvider to wrap up the components as shown below,

// pages/_app.js

import { MoralisProvider } from "react-moralis";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return;
  <MoralisProvider serverUrl="https://xxxxx/server" appId="YOUR_APP_ID">
    <Component {...pageProps} />
  </MoralisProvider>;
}

export default MyApp;

Replace the serverUrl and appId with the credentials that were obtained in step 1.

Step 4 : Authenticating the user

Now that the Moralis SDK is sucessfully connected, we will be able to authenticate users using WalletConnect. Goto the index.js file and replace the contents of the file with the code below,

// pages/index.js

import { useMoralis } from "react-moralis";

export default function Home() {
  const { authenticate, isAuthenticated, user, logout,  } =
    useMoralis();

  if (!isAuthenticated) {
    return (
      <div>
        <h1>Wallet Connect Authentication</h1>

        <button onClick={() => authenticate({ provider: "walletconnect" })}>
          Authenticate
        </button>
      </div>
    );
  }

  return (
    <div>
      <h1>Welcome {user.get("address")}</h1>
      <button onClick={() => logout()}>
        Authenticate
      </button>{" "}
    </div>
  );
}

Let us break down the code to understand what it actually does.

All the required functions to authentication and check the authentication state are imported from the useMoralis() hook.

const { authenticate, isAuthenticated, user, logout } = useMoralis();

In order to authenticate the user with WalletConnect, simply indicate authenticate({provider: "walletconnect"}).

When isAuthenticated is false, the function returns a 'Connect wallet' button which can be pressed to open the WalletConnect popup. After successful authentication, the isAuthenticated variable will be set to true.

If isAuthenticated is true - a greeting message containing the wallet address of the user is displayed. A logout button will also be displayed if the user is authenticated.

Step 5 : Testing the dapp

In order to run the NextJS application locally, enter the following command into your terminal,

npm run dev

What's next?

WalletConnect has a ton of features to offer. You can restrict specific wallets for your dapp, specify chain Id and also use custom signing messages. Checkout WalletConnect's documentation if you are interested to know more and feel free to drop your questions in our Discord channel.