Tutorial: Personal NFT Portfolio Tracker

HOW TO USE THE BLOCKSPAN API TO CREATE YOUR PERSONAL NFT PORTFOLIO TRACKER

Blockspan is a leading provider of NFT API services, enabling developers to easily interact with the world of non-fungible tokens (NFTs). NFTs represent ownership of a unique item or piece of content on the blockchain. A personal NFT portfolio tracker is an invaluable tool for monitoring the value and transactions of your NFTs.

REQUIREMENTS:

• Node.js and npm installed on your system.
• Basic knowledge of React.js
• Blockspan API key

STEP 1: SET UP YOU REACT APPLICATION

First, you'll need to set up your React application. If you already have a React application set up, you can skip this step.

npx create-react-app personal-nft-portfolio-tracker
cd personal-nft-portfolio-tracker

This will create a new React application named personal-nft-portfolio-tracker and navigate into the new directory.

STEP 2: INSTALL AXIOS

We'll be using Axios to send HTTP requests to the Blockspan API. Install it with the following command:

npm install axios

STEP 3: CREATE YOUR REACT COMPONENT

Next, you'll need to create a React component that uses the Blockspan API to fetch portfolio data. Create a new file in the src directory called NFTPortfolioTracker.js and include the following code:

import React, { useState } from 'react';
import axios from 'axios';
import './App.css';

const NFTPortfolioTracker = () => {
  const [blockchain, setBlockchain] = useState('eth-main');
  const [nfts, setNfts] = useState(null);
  const [address, setAddress] = useState('');
  const [error, setError] = useState(null);

  const fetchNFTs = async () => {
    const options = {
      method: 'GET',
      url: `https://api.blockspan.com/v1/nfts/owner/${address}?chain=${blockchain}&include_nft_details=true&cursor=7&page_size=20`,
      headers: { accept: 'application/json', 'X-API-KEY': 'YOUR_BLOCKSPAN_API_KEY' },
    };

    try {
      const response = await axios.request(options);
      setNfts(response.data.results);
      setError(null);
    } catch (error) {
      setNfts(null);
      setError('Error: Verify that chain and wallet address are valid!');
    }
  };

  const handleBlockchainChange = (event) => {
    setBlockchain(event.target.value);
  };

  const checkData = (data) => (data ? data : 'N/A');

  return (
    <div>
      <h1 className="title">NFT Portfolio Tracker</h1>
      <p className="message">
        Select a chain and input a wallet address below to see what NFTs that wallet owns on that chain.
      </p>
      <div className="inputContainer">
        <select name="blockchain" value={blockchain} onChange={handleBlockchainChange}>
          <option value="eth-main">eth-main</option>
          <option value="arbitrum-main">arbitrum-main</option>
          <option value="optimism-main">optimism-main</option>
          <option value="poly-main">poly-main</option>
          <option value="bsc-main">bsc-main</option>
          <option value="eth-goerli">eth-goerli</option>
        </select>
        <input type="text" placeholder="Wallet Address" onChange={(e) => setAddress(e.target.value)} />
        <button onClick={fetchNFTs}>View Portfolio</button>
      </div>
      {error ? (
        <p className="errorMessage">{error}</p>
      ) : (
        nfts && (
          <table>
            <thead>
              <tr style={{ backgroundColor: '#f2f2f2' }}>
                <th>Token Name</th>
                <th>Id</th>
                <th>Token Type</th>
                <th>Contract Address</th>
                <th>Image</th>
              </tr>
            </thead>
            <tbody>
              {nfts.map((nft, index) => (
                <tr key={index} style={{ backgroundColor: index % 2 === 0 ? '#f2f2f2' : 'white' }}>
                  <td>{checkData(nft.nft_details.token_name)}</td>
                  <td>{checkData(nft.id)}</td>
                  <td>{checkData(nft.token_type)}</td>
                  <td>{checkData(nft.contract_address)}</td>
                  <td>
                    <div className="imageContainer">
                      {nft.nft_details.cached_images && nft.nft_details.cached_images.medium_500_500 ? (
                        <img 
                          className="image" 
                          src={nft.nft_details.cached_images.medium_500_500} 
                          alt={nft.nft_details.name}/>
                      ) : (
                        <div className='message'>
                          Image not available.
                        </div>
                      )}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )
      )}
    </div>
  );
};

export default NFTPortfolioTracker;

Remember to replace YOUR_BLOCKSPAN_API_KEY with your actual Blockspan API key.

STEP 4: UPDATING THE STYLES WITHIN CSS FILE

To enhance the user interface in the browser, replace all code in the App.css file with the following:

.App {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: auto;
}

.title {
  margin-top: 20px;
  margin-bottom: 0;
  text-align: center;
}

.errorMessage {
  text-align: center;
  color: red;
  font-weight: bold;
}

.message {
  text-align: center;
}

.image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.inputContainer {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.inputContainer input {
  padding: 10px;
  font-size: 1em;
  width: 200px;
}

.inputContainer button {
  padding: 10px;
  font-size: 1em;
  background-color: #007BFF;
  color: white;
  border: none;
  cursor: pointer;
}

.inputContainer button:hover {
  background-color: #0056b3;
}

.imageContainer {
  display: flex;
  justify-content: center;
  width: 100%; 
}

.imageContainer img {
  width: 100%; 
  max-width: 100px;
  height: auto; 
}
.nftData {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.nftData .image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nftData h2 {
  margin: 10px 0;
}

.nftData p {
  font-size: 1.2em;
  font-weight: bold;
}

td {
  padding: 10px;
  text-align: left;
}

th {
  padding: 10px;
  text-align: left;
}

.tableContainer {
  display: flex;
  justify-content: center;
}

STEP 5: INTEGRATING COMPONENTS IN THE APP

Finally, let's use the NFTPortfolioTracker component in our main App component.

Open App.js and modify it as follows:

import React from 'react';
import NFTPortfolioTracker from './NFTPortfolioTracker.js';

function App() {

  return (
    <div className="App">
      <NFTPortfolioTracker/>
    </div>
  );
}

export default App;

Now, start the app with the following command:

npm start

You should now see the following:

• A drop down menu to select a blockchain
• A text box for wallet address
• A view portfolio button

Input the wallet address you wish to see the portfolio of, and click the view portfolio button. You should then see a table with all the NFTs owned by that wallet.

All of the code is available for your convenience at: https://github.com/BlockSpan/tutorials-personal-nft-portfolio-tracker

That's it! You've built a personal NFT portfolio tracker using Blockspan API and ReactJS! This is a simple example, but with the power of Blockspan API, you can build even more comprehensive and interactive NFT explorers. Happy coding!!