Introduction
The web3 ecosystem has prioritized back-end improvement of blockchain-based initiatives, whereas giving little to no contribution to the front-end stack.
The frontend is the event of the graphical consumer interface (UI) of an software. It describes how knowledge is being offered and interacted with by the consumer on the browser; principally how the applying performs basically.
On this article, we’ll be discussing the Web3UI Kit, the primary web3 front-end library, and we’ll additionally construct a dApp dashboard with it and Moralis React SDK.
Stipulations
This text is project-based and it’s best to have the next earlier than persevering with with this tutorial:
What We’re Constructing With Web3UI Equipment?
We’ll construct a dApp dashboard that shows all of the NFTs and steadiness of a related consumer on the Mainnet, Kovan, Rinkeby, Goerli, and the Ropsten Testnet.
After finishing this tutorial, you may have an understanding of how you can arrange and construct a web3 frontend with Web3UI Equipment parts.
How It Works
Take a look at the fundamental move of how our dApp dashboard will perform beneath:
1. Customers will log in by connecting their pockets:
2. Related customers can be redirected to their dashboard:
Demo
Beneath, is a demo video of the dApp dashboard we’ll construct on this tutorial:
You may as well take a look at the stay model of what we’re constructing here.
What Is Web3UI Equipment?
Web3UI Equipment is an open supply, light-weight, reusable web3 UI element. It was developed and presently maintained by the Moralis workforce. It is just like the Web2 UI element library,Chakra UI and Material UI, however with extra functionalities.
Web3UI Equipment Parts
The Moralis Web3UI Equipment gives a straightforward to make use of consumer interface element that may make your dApp improvement sooner.
Beneath, are a few of the Web3UI Kits that we’ll use to construct our web3 dashboard:
1. BannerStrip
The Web3UI <BannerStrip /> is a prime nav element that can be utilized to show an vital discover to the consumer.
2. NFTBalance
The Web3UI <NFTBalance /> is a UI element that fetches and shows all of the NFTs owned by a selected tackle on a specified blockchain.
3. ConnectButton
The Web3UI <ConnectButton /> is an authentication button that permits the consumer to attach or disconnect their pockets from our dApp. Moralis will deal with all of the authentication logic beneath the hood.
4. useNotification
When an occasion or motion takes place in our dApp, the Web3UI useNotification() hook can be utilized to emit and show a brand new notification to the consumer by means of the <Notification /> element.
5. Widget
The Web3UI <Widget /> element is a field that can be utilized to show a dataset label and its worth.
6. Todo
The Web3UI Equipment gives a <Todo /> checklist UI element with CRUD performance out of the field. You possibly can implement a useful todo checklist in your dApp with only some strains of code.
7. Hero
The Web3UI equipment <Hero> element can be utilized to rapidly create a hero part for a dApp touchdown web page.
8. Credentials
The Web3UI <Credentials /> element can be utilized to toggle the visibility of delicate knowledge on the entrance finish, corresponding to passwords or tokens.
9. Typography
You possibly can enhance the font of your dApp with the Web3UI Equipment <Typography /> element.
You possibly can take a look at the whole Web3UI Equipment parts checklist here.
Constructing the dApp Dashboard
On this part, we’ll mix all of the Web3UI Equipment parts we have mentioned above to construct our web3 dashboard.
Step 1 – Putting in Moralis Web3UI Equipment in React
Run the command beneath 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 beneath:
cd my-web3-dashboard
Subsequent, run the command beneath to put in Moralis React SDK and Web3UI Kit:
yarn add moralis react-moralis web3uikit
Begin your React server with the command beneath:
yarn begin
Step 2 – Initializing Moralis SDK in React
After establishing your Moralis server and putting in the Moralis SDK (see right here), the following step is to determine a connection between our React app and our Moralis server, by means of the Moralis SDK.
Create a .env file on the root of your undertaking and retailer your Moralis server particulars, like this:
REACT_APP_SERVER_URL=https://XXXXXX.usemoralis.com:2053/server
REACT_APP_APP_ID=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Change the placeholders along with your Moralis credentials. Subsequent, we have to restart our server after updating the src/.env file.
Use the quick key beneath to cease your server:
ctrl + c
Begin your server once more with:
yarn run begin
Subsequent, we’ll replace our App.js file with the code beneath:
import { NotificationProvider } from "web3uikit";
import { MoralisProvider } from "react-moralis";
import { Dashboard } from "./element/Dashboard";
perform App() {
return (
<MoralisProvider
serverUrl={course of.env.REACT_APP_MORALIS_SERVER_URL}
appId={course of.env.REACT_APP_MORALIS_APP_ID}
>
<NotificationProvider>
<Dashboard />
</NotificationProvider>
</MoralisProvider>
);
}
export default App;
Step 3 – Creating the ConnectButton Element
On this step, we’ll create the join pockets element, in order that we will log in to the dashboard with our pockets (e.g. Metamask).
In your src folder:
- Create a brand new
partsfolder - Within the
partsfolder, create a brand newConnectWallet.jsxfile with the next code:
import React from "react";
import { ConnectButton, Hero } from "web3uikit";
export const ConnectWallet = () => {
return (
<part className='not-connected'>
<Hero
backgroundURL='https://moralis.io/wp-content/uploads/2021/06/blue-blob-background-2.svg'
title='My Web3 Dashboard 🚀'
peak='70vh'
>
<ConnectButton signingMessage='Join pockets' />
</Hero>
</part>
);
};
Within the code above, we’re rendering the <Hero /> and the <ConnectButton /> element.
That is the output of the <ConnectWallet /> element we used above:
Now, the consumer is ready to join with any of their digital wallets:
The pockets modal is from the
<ConnectButton />element.
Step 4 – Constructing the dApp Dashboard
On this step, we’ll construct the dashboard parts that’ll show the next:
The steadiness of the related consumer on the Mainnet, Kovan, Rinkeby, Goerli, and Ropsten Testnets
A toggle card that shows the pockets tackle of a related consumer
A todo checklist so as to add and delete duties
The NFTs owned by the related consumer
Out of your parts folder:
- Create a brand new
Dashboard.jsxfile with the code beneath:
import Moralis from "moralis";
import React, { useEffect } from "react";
import { useMoralis, useMoralisWeb3Api } from "react-moralis";
import {
BannerStrip,
NFTBalance,
ConnectButton,
useNotification,
Widget,
Todo,
Credentials,
Typography,
} from "web3uikit";
import { ConnectWallet } from "./ConnectWallet";
export const Dashboard = () => {
const dispatch = useNotification();
const Web3Api = useMoralisWeb3Api();
const { isAuthenticated, consumer } = useMoralis();
const userAddress = consumer?.get("ethAddress");
const [mainnetBalance, setMainnetBalance] = React.useState("0");
const [kovanBalance, setKovanBalance] = React.useState("0");
const [rinkebyBalance, setRinkebyBalance] = React.useState("0");
const [goerliBalance, setGoerliBalance] = React.useState("0");
const [ropstenBalance, setRopstenBalance] = React.useState("0");
const handleNewNotification = ({ sort, title, message, place }) => {
dispatch();
};
const fetchTokenBalances = async (chain) => {
const choices = { chain, tackle: userAddress };
const consequence = await Web3Api.account.getNativeBalance(choices);
return consequence.steadiness;
};
const fetchBalances = async () => {
const balances = await Promise.all([
fetchTokenBalances("mainnet"),
fetchTokenBalances("kovan"),
fetchTokenBalances("rinkeby"),
fetchTokenBalances("goerli"),
fetchTokenBalances("ropsten"),
]);
const mainnetBalance = balances[0];
const kovanBalance = balances[1];
const rinkebyBalance = balances[2];
const goerliBalance = balances[3];
const ropstenBalance = balances[4];
const mainnetBalanceEther = Moralis.Items.FromWei(mainnetBalance);
const kovanBalanceEther = Moralis.Items.FromWei(kovanBalance);
const rinkebyBalanceEther = Moralis.Items.FromWei(rinkebyBalance);
const goerliBalanceEther = Moralis.Items.FromWei(goerliBalance);
const ropstenBalanceEther = Moralis.Items.FromWei(ropstenBalance);
setMainnetBalance(mainnetBalanceEther);
setKovanBalance(kovanBalanceEther);
setRinkebyBalance(rinkebyBalanceEther);
setGoerliBalance(goerliBalanceEther);
setRopstenBalance(ropstenBalanceEther);
};
useEffect(() => {
if (isAuthenticated) {
const notificationData = {
varieties: "information",
title: "Pockets Related 🤝",
place: "bottomR",
};
handleNewNotification(notificationData);
fetchBalances();
}
}, [isAuthenticated]);
return (
<React.Fragment>
<header>
{}
<BannerStrip
textual content={
isAuthenticated
? "Welcome again 👋"
: "You aren't related to the dApp. Please connect with the dApp to see your NFT steadiness."
}
peak='40px'
className='dapp-header-banner'
/>
{}
<part className='container topnav'>
<Typography variant='h2'>My Web3 Dashboard</Typography>
<ConnectButton signingMessage='Join pockets' />
</part>
</header>
<most important>
{isAuthenticated ? (
<part className='container'>
{}
<part className='wallet-balance-widget'>
<Widget
title='MAINNNET'
information={`${mainnetBalance.slice(0, 10)} ETH`}
/>
<Widget
title='RINKEBY'
information={`${rinkebyBalance.slice(0, 10)} ETH`}
/>
<Widget title='KOVAN' information={`${kovanBalance.slice(0, 10)} ETH`} />
<Widget
title='GOERLI'
information={`${goerliBalance.slice(0, 10)} ETH`}
/>
<Widget
title='ROPSTEN'
information={`${ropstenBalance.slice(0, 10)} ETH`}
/>
</part>
{}
<part className='my-secret-credential'>
<Credentials
icon='information'
textual content={userAddress}
title='Pockets Handle:'
/>
</part>
{}
<part className='todo-container'>
<Todo
label='Enter IP'
onChange={perform noRefCheck() {}}
todos={[]}
/>
</part>
{}
<part className='my-nfts-section'>
<NFTBalance tackle={userAddress} chain='rinkeby' />
</part>
</part>
) : (
<ConnectWallet />
)}
</most important>
<footer className='container'>
Powered by <a href='https://moralis.io'>Moralis Web3UIKit</a>
</footer>
</React.Fragment>
);
};
Within the code above:
- The dashboard contents will solely be accessible if a pockets is related.
We test whether or not or not a pockets is related with the Moralis
isAuthenticatedstate.
-
We’re fetching the steadiness of the related consumer from all of the chains utilizing promise.all() and changing it from wei to ether.
-
We’re additionally displaying all of the consumer’s NFTs within the
rinkebycommunity.
Change your index.css content material with the next strains of code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
physique {
font-family: Arial;
}
.container {
padding: 20px;
}
.not-connected > * > h1 {
z-index: 0 !vital;
}
.topnav {
show: flex;
justify-content: space-between;
align-items: heart;
margin-top: 50px;
margin-bottom: 20px;
}
.wallet-balance-widget {
show: flex;
hole: 20px;
margin: 30px 0;
}
.todo-container {
margin: 30px 0;
width: 100%;
}
.todo-container part {
padding: 0;
}
.my-nfts-section > part {
show: flex;
flex-wrap: wrap;
justify-content: heart;
align-items: heart;
margin: 30px 0;
}
footer {
text-align: heart;
margin-top: 50px;
}
When a pockets is related, our dApp dashboard ought to look one thing like this:
You Made It 👏
Our dApp dashboard is code prepared; you may go forward and join your pockets to entry the dashboard or observe the The way it Works.
You’ll find the whole React supply code for our tutorial here.
Conclusion
This text demonstrates how you can set up and construct your dApp frontend with the Moralis Web3UIKit.
The Web3UIKit is an open supply frontend library for constructing Web3 initiatives interface and it is maintained by Moralis. You possibly can contribute to the Web3UI Equipment from their official repository here.
The place Do You Go Subsequent?
Now that you understand how to construct an NFT minting good contract and how you can work together with it from a React software:
-
Be taught The way to Construct a Web3 Login With Web3.js Library here.
-
Be taught The way to Construct Your Personal NFT Explorer With Moralis React SDK here.
-
Be taught The way to Construct and Deploy an NFT Minting dApp With Solidity and React here.
This text is part of the Hashnode Web3 blog, the place a workforce of curated writers are bringing out new sources that will help you uncover the universe of web3. Verify us out for extra on NFTs, DAOs, blockchains, and the decentralized future.
