Search
Generic filters
Share on facebook
Share on twitter
Share on linkedin

How to Develop an NFT Rarity Ranking dApp

If there’s one particular area of the crypto sphere that shined the brightest in 2021, these are definitely NFTs. Non-fungible tokens have taken off like crazy, and there seems to be no stopping the NFT hype. Nevertheless, we are still very early in the game, and today is a great time to learn more about NFTs before they truly reach mainstream adoptions. Yet, the ball is rolling down the hill and more and more companies and influencers are starting to notice it. As such, we can expect countless opportunities in relation to NFTs in the upcoming years. And, there’s a particular type of NFTs that tends to grab people’s attention – NFT collectibles. Moreover, the latter has one particular quality that we will discuss herein – NFT rarity.

Using one of the most popular NFT collections, the Bored Ape Yacht Club, as an example, we will show you how to create an NFT marketplace that ranks NFTs from a particular collection based on NFT rarity. To complete our feat, we’ll heavily rely on the ultimate Web3 development platform Moralis (a.k.a Firebase for crypto). The latter will give us access to the ultimate Web3 SDK, including NFT API, which will enable us to use short snippets of code to cover blockchain-related backend programming. The best thing about Moralis is that anyone JavaScript-proficient and who knows how to use MetaMask can become a blockchain developer in an effortless manner. With that said, we invite you to follow our lead and take on our example project yourself to get the most out of this article and thus ensure you learn to work with NFT rarity properly.

What is NFT Rarity?

There are many use cases and types of NFTs and in some cases, rarity is not applicable. For instance, when unique NFT art pieces are in question with only one copy of that NFT created, that peace is completely unique. However, if we focus on collectible NFTs, especially on the kind of collections that are generated by using specific items or traits (in the form of PNG layers) to create a random combination of those layers, NFT rarity is rather important. The rarer the combination or the appearance of a particular layer, the greater the NFT rarity.

Moving forward we will take on an example project, where you will have a chance to create your own NFT rarity ranking dApp (decentralized application). For that purpose, we have created our own rarity calculating equation. And, by taking a closer look at this equation, you’ll gain a clear understanding of NFT rarity and how to use it. 

Our NFT Rarity Ranking dApp – Preview

Before we take a deep dive into the NFT rarity calculating equation and creation of this example dApp, let’s take a preview of our finished rarity ranker. Looking at the screenshot below, you can see our NFT rarity ranking dApp. As promised above, it focuses on the Bored Ape Yacht Club NFT collection, which consists of a total of 10,000 NFTs and it is ranking all NFTs and then arranges them from the rarest (the one with the highest rarity score) to the least rare (the one with the lowest rarity score).

Furthermore, our example dApp also comes with the “Load More” button that loads more NFTs. In addition, it also offers users to select other NFT collections (as long as a collection follows a proper metadata structure that provides all the details about its components) and use a search bar to quickly access a particular NFT. Moreover, to view the details about NFT rarity, users need to click any of the NFTs:

As you can see, the details of the rarity score are presented next to the NFT in question. Each factor that contributes to the overall rarity score is essentially a particular layer of the end result image. The score for each layer is calculated based on our equation (presented below), while the number next to each particular attribute of the layer in question shows how many of the total of 10,000 NFTs possess this attribute. 

Below is another example screenshot, where we have selected a different NFT collection. It follows the same principles as the one above.

How to Calculate NFT Rarity?

As mentioned previously, there are many different options to go about calculating NFT rarity. As long as you are consistent, you can use the equation that makes the most sense to you. However, we believe that the one you’re about to learn herein works great. For one, it ensures that the rarest NFTs get the highest score and it is also very simple. 

Whenever you want to calculate NFT rarity, you need to know the details of a particular collection. You need to know the number of different traits (layers), the total number of NFTs in the collection, and how many NFTs possess a particular feature or attribute (color of the background, type of fur, type of hat, mouth shape, type of eyes or eyewear, etc.). In our example, we focus on the Bored Ape Yacht Club (BAYC), which has a total of 10,000 NFTs all randomly created by using seven layers (some NFTs have certain top layers empty). To ensure that you all get a clear understanding of the NFT rarity concept, let’s take a look at one particular NFT from the BAYC collection:

As you can see in the image above, this particular NFT (#3284) has five out of seven traits (layers). It is the metadata of that NFT that provides us with these details. Furthermore, metadata is also where the details of how many NFTs in total possess a particular attribute (e.g.: robot eyes).

Our NFT Rarity Equation

Moving forward, here’s the gist of how we calculated NFT rarity for our example project:

The above equation provides us with the rarity percentage for each of the seven traits. Since this provides us with a linear result, the weight of each individual trait would not be suitable. Luckily, we can fix this by using the inverse value:

That way we get an inverse proportion between rarity score and rarity percentage and thus ensuring that rare traits get a properly higher rarity score:

Let’s use this equation for the above NFT:

Since there are a total of 350 NFTs within the BAYC collection with robot eyes, this particular attribute gets a rarity percentage of 3.5 %, which leads to a rarity score of 28.6. Of course, to get a total score we need to put all of the traits together:

Looking at the image above, you can see that we even considered the number of traits it has and it turns out that many BAYC NFTs have five out of seven traits. Also, many of them do not have a hat or an earring, thus our example NFT gets a low rarity score for these attributes. To get the final NFT rarity score we just sum the rarity score of each trait. 

Develop an NFT Rarity Ranking dApp with Moralis

Now that you have a clear understanding of how to calculate NFT rarity and what we are going to be building, it is time to roll up your sleeves and start coding. You can follow our lead and start from scratch or you may use the finished code that we made available on GitHub. As promised above, we will use Moralis to speed up the process immensely. Moreover, Moralis has cross-chain interoperability built-in its core, which means that you can deploy your dApps easily on multiple chains. Of course, in the case of NFTs, you need to focus on the chain that is the home of a particular collection (the BAYC collection is based on Ethereum). To use Moralis’ SDK, you need to create your free account and a Moralis server. To complete this simple setup, follow the instructions provided in the subsection below.

Initial Setup – Create a Moralis Server

Whether you want to use Moralis to develop an NFT rarity ranking dApp or any other dApp, you need to start by creating a Moralis server. These are the steps you should follow to do this properly:

  1. Create Your Free Moralis Account Follow the link to the sign-up page, where you’ll need to enter your email and create your password. Also, don’t forget to click the confirmation link that will be sent to your email. On the other hand, in case you already have a Moralis account, just log in to your admin area.
  1. Create a Moralis Server – After logging in to your Moralis admin area, go to the “Servers” tab (the left-hand side in the navigation tab). Once inside that tab, click on the “+ Create a new Server” button in the top-right corner. Then select the network type that best suits your needs from the drop-down menu (see the image below). In the case of example projects, we recommend selecting the “Testnet Server” option (connect to Ethereum testnets). However, since the BAYC is a live project on Ethereum mainnet, select “Mainnet Server”.

In the pop-up window that appears, enter the server name (this can be anything you want), select your region, select network type, chain(s), and spin up your server by clicking on the “Add Instance” button:

  1. Access Server Details – With your server created, you get to access its details by clicking on the “View Details” button: 


By doing so, all the information you need will be displayed in a new window. Then you can simply copy those details (one by one) by clicking on the copy icons:

  1. Initialize Moralis (do this once you clone our GitHub code or create your own files) – Populate your coding files with the Moralis server details (application ID and server URL):

Code Walkthrough

Now that you have your Moralis’ server set up, you are ready to start coding. The first thing we need to do is obtain all the on-chain information for the NFT collection in question (the BAYC). For that purpose, make sure to watch the video below starting at 7:30, where a Moralis expert will lead you through all the steps. He’ll be using a code editor of our choice, Visual Studio Code (VSC); however, feel free to use the one that best suits you. 

For starters, he will create the “main.js” file and install all required dependencies. Then he’ll insert our Moralis’ server details accordingly (as instructed in step 4 above). Keep in mind that you need to use your server’s details. Next, he’ll show you now to provide the BAYC NFT collection’s address and how to generate rarity. The latter will include getting all of the non-fungible tokens in the collection, which is where you’ll already see the power of Moralis by using the “getAllTokenIds()” snippet of code. 

Moving forward (video below at 15:30), you’ll be able to see how to create the NFT rarity generator by using the above-obtained metadata for the NFT collection in question. A lot of solutions will be achieved by using simple “for” loops in combination with the NFT rarity equation covered above. At 36:12, you’ll learn how easy it is to use Moralis’ dashboard (database) to store the now ranked NFT collection. Then, you’ll find out how to create the UI in minutes by using the ultimate Web3 boilerplate at 39:15. To further investigate your NFT rarity dApp, a Moralis expert will also do a quick comparison with rarity.tools (42:00). 

How to Develop an NFT Rarity Ranking dApp – Summary

We’ve covered quite a lot of ground today and if you’ve taken on the example project yourself, you now have your own NFT rarity ranking dApp at your disposal. You’ve also learned how to calculate NFT rarity and how to use Moralis to cover your blockchain-related backend programming needs. As such, you now know how to set up Moralis server, which is your ticket to fast and easy dApp development. You also know how to use Moralis’ NFT API and Moralis database to easily work with the live on-chain data.

Moreover, if you’ve enjoyed this example project, we recommend you check out the Moralis’ YouTube channel and the Moralis’ blog, where we cover many other NFT token development projects, including how to build an NFT trading interface, how to use an OpenSea API alternative, how to generate non-fungible tokens, details of NFT game development, and much more. However, in case you’re just getting started, NFT programming for beginners might interest you the most. Furthermore, we also cover other aspects of blockchain development. For instance, our latest topics show you how to build Ethereum dApps in Angular, explain how do flash loans work, teach you how to do gasless transactions on Ethereum, how to build a cross-chain bridge, how to build a prediction market dApp, how to create a DAO in minutes, how to launch Web3 apps with MetaMask, how to create free token, and a lot more. 

December 30, 2021
Moralis Blog
Moralis Blog
Become a Moralis Mage
Get the latest information about Moralis Web3 in your email
Search
Generic filters
Related Articles
Become a Web3 Expert
Subscribe to our newsletter and get our E-book Web3 Speed run for FREE