Whether you are building an NFT marketplace, some spectacular dApp, a personal blog showing NFTs you own, an NFT asset inventory in a game, or any other NFT project where you want to display NFTs owned by someone, this is the article for you! This short tutorial will walk you through the simplest way of building an NFT profile in only a couple of minutes. It only takes one simple API call for the magic to happen. 🪄
NFT APIs to fast-track the process
As the core value of NFTs is ownership of digital goods, you probably want to list NFTs for an account to demonstrate that ownership at some point in your NFT project.
If you ever took time to study the web3 developer ecosystem, you might’ve noticed this is not a straightforward thing to do. Even if you have access to a blockchain network node or you are familiar with web3 libraries like web3.js, this is a cumbersome process.
In order to get all NFTs for a user from a blockchain network you would need to:
Scan all NFT-related events on a blockchain network
Index that data in your DB
Keep track of all balances, transfers, burns, mints etc., and then process those events to determine who owns which NFT
Do all of the above in the real-time
The complexity of it all multiplies if you need to get data from more than one chain as each chain has a different infrastructure and setting it up (and maintaining it) is expensive.
If this sounds like too much time-consuming work, especially if you need to pull data from more than one chain, then no worries at all! NFTPort’s simple-to-use multi-chain APIs are doing all of that work for you, so you can focus on building the other parts of your project instead. We take care of all the complicated and the ugly parts, so you can have a good time building awesome products! 🚀
Ready to see how’s it done? Let’s get into it.
How to display NFTs owned by a user (wallet address)?
By using NFTPort, all you need to do to show NFTs owned by a wallet address is one simple API call!
With this API endpoint, you can build a small NFT profile album like the one below.
This only requires a bit of HTML and JS! We will show you the code snippets to create this in a moment, but if you want to jump straight to a working example you can check out this JSFiddle playground.
Step 1: Create a user profile page (HTML)
The below code will be used to output a view similar to the one shown in the picture above. A bit of Bootstrap helps with the aesthetics.
Use your preferred server setup running the above code like Node.js or any other.
We prepared a simple JS Fiddle for you can see a working example instantly.
Step 4: Use your API key
Add your NFTPort API key you got through a sign-up in the HTML form, pick an Ethereum address you want to see NFTs for, and voila – enjoy the magic!
How to display NFTs created by a user (wallet address)?
Similarly to the example above where we pulled in NFTs owned by a user, we can do the same to show NFTs created by a user. This can be really useful for e.g. building your NFT marketplaces, or doing analytics on creators’ portfolios.
For this, the steps are exactly the same as in the example above. We simply need to use the NFT Data API endpoint Retrieve NFTs created by an account, which returns NFTs created (i.e. minted) by a given account (i.e. wallet) address. You can also set it to return each NFT metadata with include parameter.
The Stripe for NFTs — One-Stop, Simple and Developer-First NFT Infrastructure & APIs which Help Developers bring their NFT application to market in hours instead of months. We take care of the NFT infrastructure so you can focus on your application. By devs, for devs.