Moralis for building Dapps

Intermediate

Moralis for building Dapps

This tutorial provides an overview of building Dapps on the Cronos chain using Moralis, a full-stack workflow for Web3 development. The tutorial outlines the steps involved in setting up the Moralis Server and building the login component and dashboard for the Dapp. The tutorial also introduces various functions and components provided by Moralis, such as the login component, getBalances(), getTransactions(), getNFTs(), and logout(). The tutorial suggests that interested developers refer to the Moralis official documentation and Dapp building guide for more detailed information on building Dapps on the Cronos chain using Moralis.

Introduction

Moralis provides the full-stack workflow for building high-performance Dapps, which is now integrated with Cronos Chain. It serves as one of the leading platforms for Web3 development that Web3 developers can simplify their workflow by accessing the Moralis developer tools on the Cronos chain, including high-performance JSON-RPC endpoints, NFT data indexers, and other advanced functionalities. Cronos integration is available for Moralis Identity, Moralis Real-Time, Moralis API and Moralis SDK.

Building Cronos Dapp with Moralis includes three main steps, which are setting up Moralis Server and building the login component as well as Dashboard. Below provides a brief introduction of components and functions for Cronos Dapp building with Moralis. Developers interested in exploring the full details can refer to Moralis official doc and Moralis Dapp building guide.

Moralis Server

Developers need to have an account with Moralis to get started.

In the main dashboard go to “Create New Dapp” and select Cronos Testnet or Cronos mainnet for launching your Dapp on the Cronos chain.

Functions and Components

To install the SDK, add the following to the HTML file for the login component:

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src=”https://unpkg.com/moralis/dist/moralis.js"></script>

To initialize Moralis, input the following into the file where you have JavaScript logic to make the elements interactive and add your server URL and application ID:

const serverUrl = "YOUR_SERVER_URL"; 
const appId = "YOUR_APP_ID";

For authenticating logic, this function allows users to authenticate themselves and saves the details being used to sign the message. The function also redirects the users to the dashboard page.

login = async () => {
    Moralis.authenticate().then(async function (user) {
        console.log(user.get(’logged in’))
        user.set(”name”, document.getElementById(’user-username’).value)
        user.set(”email”, document.getElementById(’user-email’).value)
        await user.save();
        window.location.href = ”dashboard.html”; 
    })
}

`Functions:`

Users can see their transaction history, assets details and other elements you set to display on the dashboard. Some of the common Moralis functions are as follows.

`getBalances()`

It is used to fetch data regarding users’ balances, then you can feed the data to your Dapp.

getBalances = async () => {
  console.log('Get balances clicked');
  const ethBalance = await Moralis.Web3API.account.getNativeBalance();
}

`getTransactions()`

Moralis API allows fetching the transaction history of a particular Web3 wallet easily. It can return an object with the number of transactions and the array of native transactions (asynchronous).

getTransactions = async () => {
  const options = {chain: "…", address: "0x…" };
  const transactions = await Moralis.Web3API.account.getTransactions(options);
  console.log(transactions);
}

`getNFTs()`

With Moralis’ NFT API, developers can fetch a user’s NFT balance easily. This function fetches all of the current user’s NFTs and supposes both ERC721 and ERC1155. The next is to loop through each token and fetch the metadata.

getNFTs = async () => {
  console.log('get nfts clicked');
  let nfts = await Moralis.Web3API.account.getNFTs({ chain: '…' });
  console.log(nfts); 
}

`logout()`

It logs out from the account and redirects the users to the login component.

logout = async () => {
    Moralis.User.logOut();
    window.location.href = <dashboard file>;
}

Cronos