Web3 for Frontend Developers – Getting Started With Moralis Web3UI Kit

Introduction

The web3 ecosystem has prioritized back-end development of blockchain-based projects, while giving little to no contribution to the front-end stack.

The frontend is the development of the graphical user interface (UI) of an application. It describes how data is being presented and interacted with by the user on the browser; basically how the application performs in general.

In this article, we’ll be discussing the Web3UI Kit, the first web3 front-end library, and we’ll also build a dApp dashboard with it and Moralis React SDK.

Prerequisites

This article is project-based and you should have the following before continuing with this tutorial:

What We’re Building With Web3UI Kit?

We’ll build a dApp dashboard that displays all the NFTs and balance of a connected user on the Mainnet, Kovan, Rinkeby, Goerli, and the Ropsten Testnet.

After completing this tutorial, you’ll have an understanding of how to set up and build a web3 frontend with Web3UI Kit components.

How It Works

Check out the basic flow of how our dApp dashboard will function below:

1. Users will log in by connecting their wallet:

2. Connected users will be redirected to their dashboard:

Demo

Below, is a demo video of the dApp dashboard we’re going to build in this tutorial:

You can also check out the live version of what we’re building here.

What Is Web3UI Kit?

Web3UI Kit is an open source, lightweight, reusable web3 UI component. It was developed and currently maintained by the Moralis team. It’s similar to the Web2 UI component library,Chakra UI and Material UI, but with more functionalities.

Web3UI Kit Components

The Moralis Web3UI Kit provides an easy to use user interface component that can make your dApp development faster.

Below, are some of the Web3UI Kits that we’ll use to build our web3 dashboard:

1. BannerStrip

The Web3UI is a top nav component that can be used to display an important notice to the user.

2. NFTBalance

The Web3UI is a UI component that fetches and displays all the NFTs owned by a particular address on a specified blockchain.

3. ConnectButton

The Web3UI is an authentication button that allows the user to connect or disconnect their wallet from our dApp. Moralis will handle all the authentication logic under the hood.

4. useNotification

When an event or action takes place in our dApp, the Web3UI useNotification() hook can be used to emit and display a new notification to the user through the component.

5. Widget

The Web3UI component is a box that can be used to display a dataset label and its value.

6. Todo

The Web3UI Kit provides a list UI component with CRUD functionality out of the box. You can implement a functional todo list in your dApp with only a few lines of code.

7. Hero

The Web3UI kit component can be used to quickly create a hero section for a dApp landing page.

8. Credentials

The Web3UI component can be used to toggle the visibility of sensitive data on the front end, such as passwords or tokens.

9. Typography

You can improve the font of your dApp with the Web3UI Kit component.

You can check out the complete Web3UI Kit components list here.

Building the dApp Dashboard

In this section, we’re going to combine all the Web3UI Kit components we’ve discussed above to build our web3 dashboard.

Step 1 – Installing Moralis Web3UI Kit in React

Run the command below to create a React app with yarn and Create React App (CRA):

yarn create react-app my-web3-dashboard 

Navigate to the newly created folder with the command below:

cd my-web3-dashboard 

Next, run the command below to install Moralis React SDK and Web3UI Kit:

yarn add moralis react-moralis web3uikit 

Start your React server with the command below:

yarn start 

Step 2 – Initializing Moralis SDK in React

After setting up your Moralis server and installing the Moralis SDK (see here), the next step is to establish a connection between our React app and our Moralis server, through the Moralis SDK.

Create a .env file at the root of your project and…