Introduction
The web3 ecosystem has prioritized back-end growth of blockchain-based tasks, whereas giving little to no contribution to the front-end stack.
The frontend is the event of the graphical consumer interface (UI) of an utility. It describes how information is being offered and interacted with by the consumer on the browser; principally how the applying performs normally.
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 is best to have the next earlier than persevering with with this tutorial:
What We’re Constructing With Web3UI Package?
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 will have an understanding of the way to arrange and construct a web3 frontend with Web3UI Package elements.
How It Works
Try the essential movement of how our dApp dashboard will operate beneath:
1. Customers will log in by connecting their pockets:
2. Related customers shall be redirected to their dashboard:
Demo
Beneath, is a demo video of the dApp dashboard we’ll construct on this tutorial:
You may also take a look at the reside model of what we’re constructing here.
What Is Web3UI Package?
Web3UI Package is an open supply, light-weight, reusable web3 UI part. It was developed and at present maintained by the Moralis crew. It is much like the Web2 UI part library,Chakra UI and Material UI, however with extra functionalities.
Web3UI Package Elements
The Moralis Web3UI Package gives a straightforward to make use of consumer interface part that may make your dApp growth quicker.
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 part that can be utilized to show an essential discover to the consumer.
2. NFTBalance
The Web3UI <NFTBalance />
is a UI part that fetches and shows all of the NFTs owned by a specific deal with on a specified blockchain.
3. ConnectButton
The Web3UI <ConnectButton />
is an authentication button that enables 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 />
part.
5. Widget
The Web3UI <Widget />
part is a field that can be utilized to show a dataset label and its worth.
6. Todo
The Web3UI Package gives a <Todo />
listing UI part with CRUD performance out of the field. You may implement a practical todo listing in your dApp with just a few traces of code.
7. Hero
The Web3UI equipment <Hero>
part can be utilized to rapidly create a hero part for a dApp touchdown web page.
8. Credentials
The Web3UI <Credentials />
part can be utilized to toggle the visibility of delicate information on the entrance finish, resembling passwords or tokens.
9. Typography
You may enhance the font of your dApp with the Web3UI Package <Typography />
part.
You may take a look at the entire Web3UI Package elements listing here.
Constructing the dApp Dashboard
On this part, we’ll mix all of the Web3UI Package elements we have mentioned above to construct our web3 dashboard.
Step 1 – Putting in Moralis Web3UI Package 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 organising 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 venture 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 "./part/Dashboard";
operate 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 Part
On this step, we’ll create the join pockets part, in order that we are able to log in to the dashboard with our pockets (e.g. Metamask).
In your src
folder:
- Create a brand new
elements
folder - Within the
elements
folder, create a brand newConnectWallet.jsx
file 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 🚀'
top='70vh'
>
<ConnectButton signingMessage='Join pockets' />
</Hero>
</part>
);
};
Within the code above, we’re rendering the <Hero />
and the <ConnectButton />
part.
That is the output of the <ConnectWallet />
part we used above:
Now, the consumer is ready to join with any of their digital wallets:
The pockets modal is from the
<ConnectButton />
part.
Step 4 – Constructing the dApp Dashboard
On this step, we’ll construct the dashboard elements 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 deal with of a related consumer
A todo listing so as to add and delete duties
The NFTs owned by the related consumer
Out of your elements
folder:
- Create a brand new
Dashboard.jsx
file 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 = ({ kind, title, message, place }) => {
dispatch();
};
const fetchTokenBalances = async (chain) => {
const choices = { chain, deal with: userAddress };
const end result = await Web3Api.account.getNativeBalance(choices);
return end result.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.Models.FromWei(mainnetBalance);
const kovanBalanceEther = Moralis.Models.FromWei(kovanBalance);
const rinkebyBalanceEther = Moralis.Models.FromWei(rinkebyBalance);
const goerliBalanceEther = Moralis.Models.FromWei(goerliBalance);
const ropstenBalanceEther = Moralis.Models.FromWei(ropstenBalance);
setMainnetBalance(mainnetBalanceEther);
setKovanBalance(kovanBalanceEther);
setRinkebyBalance(rinkebyBalanceEther);
setGoerliBalance(goerliBalanceEther);
setRopstenBalance(ropstenBalanceEther);
};
useEffect(() => {
if (isAuthenticated) {
const notificationData = {
varieties: "data",
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 hook up with the dApp to see your NFT steadiness."
}
top='40px'
className='dapp-header-banner'
/>
{}
<part className='container topnav'>
<Typography variant='h2'>My Web3 Dashboard</Typography>
<ConnectButton signingMessage='Join pockets' />
</part>
</header>
<predominant>
{isAuthenticated ? (
<part className='container'>
{}
<part className='wallet-balance-widget'>
<Widget
title='MAINNNET'
data={`${mainnetBalance.slice(0, 10)} ETH`}
/>
<Widget
title='RINKEBY'
data={`${rinkebyBalance.slice(0, 10)} ETH`}
/>
<Widget title='KOVAN' data={`${kovanBalance.slice(0, 10)} ETH`} />
<Widget
title='GOERLI'
data={`${goerliBalance.slice(0, 10)} ETH`}
/>
<Widget
title='ROPSTEN'
data={`${ropstenBalance.slice(0, 10)} ETH`}
/>
</part>
{}
<part className='my-secret-credential'>
<Credentials
icon='data'
textual content={userAddress}
title='Pockets Handle:'
/>
</part>
{}
<part className='todo-container'>
<Todo
label='Enter IP'
onChange={operate noRefCheck() {}}
todos={[]}
/>
</part>
{}
<part className='my-nfts-section'>
<NFTBalance deal with={userAddress} chain='rinkeby' />
</part>
</part>
) : (
<ConnectWallet />
)}
</predominant>
<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 examine whether or not or not a pockets is related with the Moralis
isAuthenticated
state.
-
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
rinkeby
community.
Change your index.css
content material with the next traces of code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
physique {
font-family: Arial;
}
.container {
padding: 20px;
}
.not-connected > * > h1 {
z-index: 0 !essential;
}
.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’ll be able to go forward and join your pockets to entry the dashboard or observe the The way it Works.
You will discover the entire React supply code for our tutorial here.
Conclusion
This text demonstrates the way to set up and construct your dApp frontend with the Moralis Web3UIKit.
The Web3UIKit is an open supply frontend library for constructing Web3 tasks interface and it is maintained by Moralis. You may contribute to the Web3UI Package from their official repository here.
The place Do You Go Subsequent?
Now that you know the way to construct an NFT minting sensible contract and the way to work together with it from a React utility:
-
Study How you can Construct a Web3 Login With Web3.js Library here.
-
Study How you can Construct Your Personal NFT Explorer With Moralis React SDK here.
-
Study How you can Construct and Deploy an NFT Minting dApp With Solidity and React here.
This text is part of the Hashnode Web3 blog, the place a crew of curated writers are bringing out new assets that can assist you uncover the universe of web3. Test us out for extra on NFTs, DAOs, blockchains, and the decentralized future.