#### **Introduction**
In a move that has sent ripples through the NFT community, Yuga Labs, the powerhouse behind the iconic Bored Ape Yacht Club (BAYC), has acquired Proof, the creator of the Moonbirds collection. This acquisition not only marks a significant consolidation within the NFT space but also highlights the evolving dynamics of digital art and collectibles. As we delve into the implications of this merger, it's essential to consider both the immediate excitement and the long-term impact on the NFT ecosystem.

#### **The Acquisition**
Yuga Labs' strategic acquisition of Proof, including the Moonbirds and other associated collections, signifies a bold step towards expanding its influence in the NFT world. The move has been met with enthusiasm, as evidenced by the surge in Moonbirds' value, with the first token based on the ERC-404 standard, associated with Proof, skyrocketing by 12,000% in a week. This dramatic increase underscores the market's appetite for innovative NFT projects and the confidence in Yuga Labs' stewardship.

#### **Implications for the NFT Space**
- **Market Consolidation**: The acquisition signals a trend towards consolidation in the NFT market, with major players like Yuga Labs expanding their portfolios. This could lead to a more streamlined market, where quality and innovation become the primary drivers of value.
- **Innovation and Growth**: By bringing Moonbirds under its umbrella, Yuga Labs is poised to inject new creativity and resources into the collection. This could lead to enhanced development, broader adoption, and potentially, new use cases for NFTs that leverage the unique attributes of the ERC-404 standard.
- **Community Reaction**: The NFT community's response has been overwhelmingly positive, with increased interest and investment in Moonbirds. This enthusiasm reflects confidence in the combined potential of Yuga Labs and Proof to push the boundaries of what's possible in the NFT space.

#### **Net Positive or Negative?**
While some may view the consolidation of major NFT brands under a single entity with caution, fearing reduced competition, the overarching sentiment is that this acquisition is a net positive for the NFT ecosystem. It represents a fusion of talent, vision, and resources that is likely to spur further innovation, diversity, and growth within the sector.

#### **BlockSpan's Perspective**
From BlockSpan's vantage point, this development presents an exciting opportunity for developers and creators. Our NFT API platform is designed to empower innovation by providing comprehensive metadata, pricing, ownership, rarity, and spam information in real time. As the NFT landscape continues to evolve with acquisitions like Yuga Labs and Moonbirds, BlockSpan's tools and data can help developers harness the full potential of these changes, creating applications and experiences that resonate with users and collectors alike.

#### **Conclusion**
The acquisition of Proof by Yuga Labs is more than just a merger of two companies; it's a landmark event that could define the future trajectory of the NFT market. By fostering innovation, encouraging community engagement, and driving forward with a shared vision, Yuga Labs and Moonbirds are set to explore new frontiers in the digital realm. As the ecosystem grows, BlockSpan remains committed to supporting this evolution, providing the foundational data and analytics necessary for the next generation of NFT innovations.

medium_shutterstock_2159870451_APES_RULE.jpg

small_shutterstock_2159870451_APES_RULE.jpg

thumbnail_shutterstock_2159870451_APES_RULE.jpg

shutterstock_2159870451_APES_RULE.jpg

In a move that has sent ripples through the NFT community, Yuga Labs, the powerhouse behind the iconic Bored Ape Yacht Club (BAYC), has acquired Proof, the creator of the Moonbirds collection. This acquisition not only marks a significant consolidation within the NFT space but also highlights the evolving dynamics of digital art and collectibles. As we delve into the implications of this merger, it's essential to consider both the immediate excitement and the long-term impact on the NFT ecosystem.


Yuga Labs and Moonbirds: A Strategic Acquisition Shaping the NFT Landscape

#### **Introduction**
The Ethereum blockchain is on the verge of a significant evolution with the advent of the ERC-404 standard, a groundbreaking development that merges the functionalities of ERC-20 and ERC-721 tokens. This hybrid approach has already made waves with Pandora, the first token utilizing this experimental standard, showcasing an astonishing 12,000% increase in value within a week.

#### **The Genesis of ERC-404**
ERC-404 represents a novel concept in the Ethereum ecosystem, aiming to create a new class of tokens that combines the best aspects of fungible and non-fungible tokens. This standard allows for the fractionalization of NFTs, enabling multiple wallets to directly own a piece of a single NFT. Such a mechanism opens up unprecedented opportunities for tokenization, including the ability to collateralize or stake these fractional interests.

#### **Pandora: A Case Study in Innovation**
Pandora, the inaugural ERC-404 token, has not only demonstrated the market's appetite for such innovative assets but also highlighted the potential for a new sub-asset class within the crypto market. Starting from a modest $250, Pandora's value skyrocketed to $32,000, driven by its limited supply and the burgeoning interest in ERC-404 tokens. This surge underscores the transformative potential of ERC-404 in creating more dynamic and accessible markets for digital assets.

#### **Expanding the Horizon: Use Cases and Opportunities**
- **Fractional Ownership and Investment**: ERC-404 facilitates new avenues for collective investment in high-value assets, making it easier for individuals to own a share of rare or expensive NFTs.
- **Enhanced Liquidity for NFT Markets**: By allowing NFTs to be fractionalized and traded, ERC-404 can significantly increase market liquidity, making it easier to buy and sell shares of NFTs.
- **Innovative Financial Products**: The standard opens the door to novel financial products and services, such as NFT-backed loans or staking mechanisms, further integrating NFTs into the DeFi ecosystem.

#### **BlockSpan: Empowering ERC-404 Innovation**
As the ERC-404 standard gains traction, BlockSpan's NFT Data and Analytics APIs are ready to support the burgeoning ecosystem. Our platform can provide crucial insights into ERC-404 tokens like Pandora, offering real-time data on pricing, ownership, and market trends. For developers looking to explore the possibilities of ERC-404, BlockSpan's free development tier offers an accessible entry point to experiment with and build on this exciting new standard.

#### **Conclusion**
The introduction of ERC-404 and the success of Pandora signal a new era for Ethereum tokens, blending the lines between fungible and non-fungible assets. As the Ethereum community considers formalizing ERC-404 through an Ethereum Improvement Proposal (EIP), the potential for widespread adoption and innovation grows. BlockSpan remains committed to supporting developers in this evolving landscape, providing the tools and data necessary to unlock the full potential of ERC-404 and beyond.

Stay tuned to BlockSpan as we continue to explore and support the development of ERC-404 and its integration into the blockchain ecosystem.

medium_pandoraerc404.jpg

small_pandoraerc404.jpg

thumbnail_pandoraerc404.jpg

pandoraerc404.jpg

The Ethereum blockchain is on the verge of a significant evolution with the advent of the ERC-404 standard, a groundbreaking development that merges the functionalities of ERC-20 and ERC-721 tokens. This hybrid approach has already made waves with Pandora, the first token utilizing this experimental standard, showcasing an astonishing 12,000% increase in value within a week.


ERC-404 and Pandora: Pioneering the Future of Ethereum Tokens

### **Magic Eden Contributions to Non-Fungible DAO: Implications and Opportunities**

#### **Introduction**
Magic Eden, a leading NFT marketplace, has recently announced its intention to contribute key protocols, including its cross-chain market protocol, to the Non-Fungible DAO. This move, as reported by [Binance News](https://www.binance.com/en/feed/post/2024-01-23-magic-eden-to-contribute-key-protocols-to-non-fungible-dao-and-expand-cross-chain-wallet-promotion-3116771248081), marks a significant step towards decentralized governance in the NFT space.

#### **Magic Eden's Strategic Contribution**
Magic Eden's contribution to the Non-Fungible DAO is a bold initiative that underscores the marketplace's commitment to community ownership and decentralized governance. As highlighted by [Altcoin Buzz](https://www.altcoinbuzz.io/cryptocurrency-news/magic-edens-nft-revolution-introducing-non-fungible-dao/), this move could revolutionize the NFT market, fostering a more collaborative and open ecosystem.

#### **The Cross-Chain Wallet Expansion**
Alongside its DAO contribution, Magic Eden plans to expand the promotion of its cross-chain self-custodial wallet. This wallet, supporting exchanges between Bitcoin, Solana, Ethereum, and Polygon, represents a significant advancement in cross-chain interoperability, as noted by [NFT Now](https://nftnow.com/news/magic-eden-reveals-rewards-platform-and-cross-chain-wallet/).

#### **Implications for the NFT Market**
Magic Eden's initiatives are set to dramatically grow the NFT market. By contributing to the Non-Fungible DAO and enhancing its wallet services, Magic Eden is paving the way for more seamless NFT experiences across various blockchains, potentially increasing adoption and market liquidity.

#### **Leveraging BlockSpan's Free Development Tier**
In the rapidly evolving NFT landscape, BlockSpan's [NFT Data and Analytics APIs](https://blockspan.com/products/) offer a powerful toolset for developers. While not directly integrated with Magic Eden, BlockSpan's technology can be pivotal in powering applications that interact with diverse NFT platforms. Our APIs provide deep insights into NFT market trends, ownership data, and transaction histories, which are crucial for developing applications that thrive in environments shaped by cross-chain opportunities and DAO-driven models.

#### **Conclusion**
Magic Eden's contribution to the Non-Fungible DAO and the expansion of its cross-chain wallet are pivotal developments in the NFT space. These initiatives not only enhance Magic Eden's market position but also open up new avenues for developers and creators. With tools like BlockSpan's APIs, the potential to innovate within this decentralized framework is boundless.

medium_shutterstock_2106311888_850_DAO.jpg

small_shutterstock_2106311888_850_DAO.jpg

thumbnail_shutterstock_2106311888_850_DAO.jpg

shutterstock_2106311888_850_DAO.jpg

Magic Eden, a leading NFT marketplace, has recently announced its intention to contribute key protocols, including its cross-chain market protocol, to the Non-Fungible DAO. This move, as reported by [Binance News](https://www.binance.com/en/feed/post/2024-01-23-magic-eden-to-contribute-key-protocols-to-non-fungible-dao-and-expand-cross-chain-wallet-promotion-3116771248081), marks a significant step towards decentralized governance in the NFT space.

Magic Eden Contributions to Non-Fungible DAO: Implications and Opportunities

### **Introduction**
The NFT landscape is witnessing a historic moment with Polygon's recent surge in NFT sales, surpassing Ethereum in 24-hour NFT sales volume for the first time. This milestone, as reported by [AMBCrypto](https://ambcrypto.com/polygon-nft-landscape-has-its-historic-moment-more-inside/), marks a significant shift in the NFT ecosystem, highlighting the growing importance of Layer-2 solutions in the blockchain space.

### **Polygon's NFT Ecosystem: A Rapid Expansion**
Polygon's NFT market has seen remarkable growth, with sales exceeding $36 million in a single week, driven largely by the collections from the Web3 game Gas Hero. This surge reflects a broader trend in the NFT market, where Layer-2 networks like Polygon are gaining traction due to their scalability and lower transaction costs compared to Ethereum. Sources like [NFT Plazas](https://nftplazas.com/polygon-nft-trades/) and [CryptoNews](https://cryptonews.com/news/polygon-nft-volume-hits-6-month-high-igniting-renewed-interest-in-layer-2-scaling-solution.htm) highlight the increasing interest in Polygon's NFT ecosystem.

### **BlockSpan's Role in Navigating the NFT Boom**
As the NFT market evolves, platforms like BlockSpan are crucial in empowering developers and enterprises to leverage these trends. BlockSpan's advanced [NFT Data and Analytics APIs](https://blockspan.com/products/) provide the necessary tools to analyze and interpret the vast amount of data generated by NFT transactions. This capability is particularly relevant in understanding and capitalizing on the rapid growth of networks like Polygon.

### **Implications for the NFT Space**
Polygon's ascent in the NFT market is not just a testament to its technological prowess but also signals a shift in user preferences and developer focus. The network's ability to offer a more efficient and cost-effective platform for NFT transactions is attracting a new wave of creators and collectors, reshaping the NFT landscape.

### **The Future of NFTs on Polygon**
With its recent achievements, Polygon is poised to become a major player in the NFT space. The network's focus on scalability and user experience aligns well with the growing demand for more accessible and diverse NFT marketplaces. As the NFT ecosystem continues to expand, platforms like Polygon will play a pivotal role in its evolution.

### **Conclusion**
Polygon's historic moment in the NFT market is a clear indicator of the dynamic nature of the blockchain industry. As Layer-2 solutions continue to rise, tools like BlockSpan's NFT Data and Analytics APIs will be essential in navigating this ever-changing landscape, offering insights and opportunities for innovation in the world of Web3.

medium_shutterstock_2065496042_polygon_nft_850.jpg

small_shutterstock_2065496042_polygon_nft_850.jpg

thumbnail_shutterstock_2065496042_polygon_nft_850.jpg

shutterstock_2065496042_polygon_nft_850.jpg

The NFT landscape is witnessing a historic moment with Polygon's recent surge in NFT sales, surpassing Ethereum in 24-hour NFT sales volume for the first time. This milestone, as reported by [AMBCrypto](https://ambcrypto.com/polygon-nft-landscape-has-its-historic-moment-more-inside/), marks a significant shift in the NFT ecosystem, highlighting the growing importance of Layer-2 solutions in the blockchain space.


Polygon's NFT Market Surge: A New Chapter in Web3 Innovation

At BlockSpan, we've always been at the forefront of blockchain data solutions. A couple of months ago, we proudly unveiled our state-of-the-art NFT Analytics Dashboard, a platform designed to provide comprehensive insights into the world of non-fungible tokens (NFTs). Today, we're excited to delve deeper into some of the dashboard's standout features, focusing on the Top Collections set of analytics.

---

### Spotlight: Top Collections Analytics

One of the most anticipated features of our dashboard is the ability to view top collections based on Volume, Sales, and Average Price dimensions. Users can now gain insights for Total, 1 Day, 7 Day, and 30 Day timeframes. 

*Why is this valuable?* 

Having a clear view of top-performing collections allows investors and enthusiasts to identify trends, understand market dynamics, and make informed decisions. For instance, observing a sudden spike in sales volume for a particular collection over a 7-day timeframe could indicate a surge in its popularity or an upcoming event related to it.

> ![dashboard-top-collections.png](https://blockspan-cms-production.s3.us-east-2.amazonaws.com/dashboard_top_collections_8c0f0de557.png)

---

### Powerful Filtering for Detailed Collection Insights

When users drill down into a specific collection, they're now equipped with advanced filtering options:

1. **Filter by Rarity Rank**: This allows users to segment NFTs based on their rarity. Understanding rarity can be crucial for collectors and investors alike. A rare NFT might hold more value or be considered a prized possession in a collection.

2. **Filter by Specific Traits**: Traits can define the uniqueness of an NFT within a collection. By filtering based on specific traits, users can identify NFTs that align with their interests or investment strategies. 

*Future Use Cases:* As the NFT space evolves, collections could represent access, with different traits unlocking varying levels of benefits. Imagine an NFT collection where owning a specific trait grants you exclusive access to events, content, or even physical goods.

> ![dashboard-rarity-traits.png](https://blockspan-cms-production.s3.us-east-2.amazonaws.com/dashboard_rarity_traits_f70cf386d4.png)

---

### Deep Dive into Collection Analytics

Our dashboard doesn't just stop at top-level insights. Users can:

- **Understand Volume and Sales Momentum**: Track how a collection is performing over time, helping to predict future trends or identify investment opportunities.
  
- **Explore the Floor Price**: Gain insights into the minimum price at which an NFT is currently listed for sale in a particular collection, crucial for potential buyers and sellers.

- **Owner Distribution Analysis**: Our dashboard provides a breakdown of how NFTs are distributed among owners. For instance, understanding that 80% of owners have only one item while 15% have 2-3 items can provide insights into the collection's diversity and concentration.

*Why is this valuable?* 

A more distributed ownership might indicate a broader interest in the collection, while a concentrated ownership could signify that a few individuals or entities hold significant power or influence over it.

> ![dashboard-owner-distribution.png](https://blockspan-cms-production.s3.us-east-2.amazonaws.com/dashboard_owner_distribution_d8c433ef93.png)

Additionally, users can view the top active owners for a collection, providing insights into who the major players or influencers are within that NFT space.

---

### Conclusion

BlockSpan's enhanced NFT Analytics Dashboard is more than just a tool; it's a comprehensive platform designed to empower users with actionable insights in the ever-evolving NFT market. As we continue to innovate and add features, we remain committed to bridging the gap between complex blockchain data and everyday users.

For a firsthand experience of our dashboard and to explore these features in detail, visit [BlockSpan's NFT Analytics Dashboard](https://blockspan.com/nft/).



medium_analytics_dashboard_home.png

small_analytics_dashboard_home.png

thumbnail_analytics_dashboard_home.png

analytics_dashboard_home.png

At BlockSpan, we've always been at the forefront of blockchain data solutions. A couple of months ago, we proudly unveiled our state-of-the-art NFT Analytics Dashboard, a platform designed to provide comprehensive insights into the world of non-fungible tokens (NFTs). Today, we're excited to delve deeper into some of the dashboard's standout features, focusing on the Top Collections set of analytics.

BlockSpan's NFT Dashboard: Exploring Top Collections Insights

### USING THE BLOCKSPAN API WITH REACT TO DISPLAY NFT MARKET DATA

In the world of digital art and collectibles, Non-Fungible Tokens (NFTs) have taken center stage, creating a bustling market of unique digital assets. As enthusiasts, collectors, or developers, there's often a need to keep a pulse on the ever-changing market value of these unique tokens. Understanding this, wouldn't it be great if you could create an application to check the current market price of a specific NFT at your fingertips? With the Blockspan API and React, this isn't just possible — it's straightforward!

Blockspan API offers a wealth of data about NFTs. It's a treasure trove for developers who want to build applications around NFTs, whether it's for pricing, trading, analytics, or anything else you can imagine in the NFT space.

In this tutorial, we are going to create a simple web application using ReactJS, a popular front-end library, to interact with the Blockspan API. Our application will allow users to check the current market price of a specific NFT, as well as display some additional information such as the cached image and the name of the NFT.
Let's dive into the world of NFTs, powered by Blockspan API and brought to life with React!


### REQUIREMENTS:
- Node.js and npm installed on your system.
- Basic knowledge of React.js
- Blockspan API key


### STEP 1: SET UP YOUR 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 nft-price-checker`
`cd nft-price-checker`

This will create a new React application named `nft-price-checker` 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 NFT data. Replace the existing src/App.js code with the following:

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

const App = () => {
  const [tokenId, setTokenId] = useState('');
  const [contractAddress, setContractAddress] = useState('');
  const [blockchain, setBlockchain] = useState('eth-main');
  const [nftData, setNftData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  const fetchNFTData = async () => {
    setLoading(true)
    const options = {
      method: 'GET',
      url: `https://api.blockspan.com/v1/nfts/contract/${contractAddress}/token/${tokenId}?chain=${blockchain}`,
      headers: { accept: 'application/json', 'X-API-KEY': 'YOUR_BLOCKSPAN_API_KEY' }
    };

    try {
      const response = await axios.request(options);
      setNftData(response.data);
      setError(null);
    } catch (error) {
      error.response.status === 401 ?
        setError('Invalid blockspan API key!') :
        setError('Error: Verify chain, contract address, and token ID are all valid!');
    }
    setLoading(false)
  };

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

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

  return (
    <div className="App">
      <h1 className="title">NFT Price Checker</h1>
      <p>Select a chain and input contract address and NFT token ID below to see recent transaction price.</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="Contract Address"
          value={contractAddress}
          onChange={(e) => setContractAddress(e.target.value)}
        />
        <input
          type="text"
          placeholder="Token ID"
          value={tokenId}
          onChange={(e) => setTokenId(e.target.value)}
        />
        <button onClick={fetchNFTData}>Check Price</button>
      </div>
      {loading ? (
        <p className='message'>Loading...</p>
      ) : (
        error ? (
          <p className="errorMessage">{error}</p>
        ) : nftData && (
          <div className="nftData">
            <h2>{nftData.name}</h2>
            <div className="imageContainer">
              {nftData.cached_images && nftData.cached_images.medium_500_500 ? (
                <img 
                  className="image" 
                  src={nftData.cached_images.medium_500_500} 
                  alt={nftData.name} />
              ) : (
                <div className='message'>
                  Image not available.
                </div>
              )}
            </div>
            <p className="message">
              Id: {checkData(nftData.id)} | 
              Token Name: {checkData(nftData.token_name)} | 
              Rarity: {checkData(nftData.rarity_rank)} | 
              Recent Price USD: {nftData.recent_price && nftData.recent_price.price_usd ? parseFloat(nftData.recent_price.price_usd).toFixed(2) : 'N/A'} |   
              Recent Price Native Currency: {nftData.recent_price && nftData.recent_price.price ? 
                `${parseFloat(nftData.recent_price.price).toFixed(5)} ${nftData.recent_price.price_currency}` : 
                'N/A'}
            </p>
            <table>
              <thead>
                <tr style={{ backgroundColor: '#f2f2f2' }}>
                  <th>Name</th>
                  <th>Token Type</th>
                  <th>Contract Address</th>
                  <th>Rarity Rank</th>
                  <th>Rarity Score</th>
                </tr>
              </thead>
              <tbody>
                <tr style={{ backgroundColor: '#f2f2f2' }}>
                  <td>{checkData(nftData.token_name)}</td>
                  <td>{checkData(nftData.token_type)}</td>
                  <td>{checkData(nftData.contract_address)}</td>
                  <td>{checkData(nftData.rarity_rank)}</td>
                  <td>{checkData(nftData.rarity_score)}</td>
                </tr>
              </tbody>
            </table>
          </div>
        )
      )}
    </div>
  );
};

export default App;

```

Remember to replace `YOUR_BLOCKSPAN_API_KEY` with your actual Blockspan API key. 


### STEP 4: STYLE YOUR COMPONENT

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

```javascript
.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: 500px;
  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: RUN YOUR APPLICATION

You can now run your React application with the following command:

`npm start`

This will start your React application and open it in your default web browser. You should see the following:
- A dropdown menu to select a blockchain
- Text boxes for contract address and token id
- A check price button

Input the data of the NFT and click the check price button. You should see an image of the NFT and some of its information including the price.

All of the code is available for your convenience at: [https://github.com/BlockSpan/tutorials-nft-price-checker](https://github.com/BlockSpan/tutorials-nft-price-checker)

This wraps up our guide to creating an NFT Price Checking tool using the Blockspan API and React.js. Happy coding!


### APPENDIX: TROUBLESHOOTING COMMON ISSUES

1. CSS not taking effect: Make sure the CSS file is properly linked in your React component. If it is in the same directory, import it with `import './App.css';`. Class names in your JSX must match exactly with those in your CSS file (case-sensitive). If your styles still aren't being applied, try doing a hard refresh in your browser (Ctrl + F5 on most browsers) to clear the cache.

2. API request not working: Ensure you have replaced `'YOUR_BLOCKSPAN_API_KEY'` with your actual Blockspan API key in the Axios options. If the request still isn't working, check your console for any error messages.

3. NFT data not displaying: Make sure the properties you're accessing in the NFT data match exactly with those in the API response (case-sensitive). If the data still isn't displaying, try `console.log(response.data)` after the Axios request to inspect the structure of the API response.

large_Blockspan_linkedin_cover.PNG

medium_Blockspan_linkedin_cover.PNG

small_Blockspan_linkedin_cover.PNG

thumbnail_Blockspan_linkedin_cover.PNG

Blockspan_linkedin_cover.PNG

In this tutorial, we are going to create a simple web application using ReactJS, a popular front-end library, to interact with the Blockspan API. Our application will allow users to check the current market price of a specific NFT, as well as display some additional information such as the cached image and the name of the NFT.
Let's dive into the world of NFTs, powered by Blockspan API and brought to life with React!


Tutorial: NFT Price Checker

### **China's Web3 and NFT Strategy - A New Era for Digital Innovation**

#### **Introduction**
China, a global powerhouse in technology and innovation, is now setting its sights on the burgeoning world of Web3 and Non-Fungible Tokens (NFTs). Despite its stringent stance on cryptocurrencies, the Chinese government is embracing the potential of Web3 technologies, signaling a significant shift in the digital landscape.

#### **China's Strategic Move into Web3 and NFTs**
Recent developments indicate that China is committed to formulating a comprehensive Web3 strategy. This move is aimed at fostering new business models and accelerating innovation in the NFT space. According to [CoinDesk](https://www.coindesk.com/policy/2023/12/20/china-vows-to-clarify-web3-nft-development-path/), China's approach will encourage the development of NFTs and other Web3 technologies, despite the country's well-known restrictions on cryptocurrencies.

#### **Implications for the Global NFT Market**
China's entry into the Web3 and NFT arena could have far-reaching implications for the global market. The country's vast resources, technological expertise, and large consumer base present an opportunity for significant growth and innovation in the NFT space. As reported by [CryptoSlate](https://cryptoslate.com/china-sets-sights-on-web3-innovation-with-national-framework-for-nfts-and-dapps/), the national framework for NFTs and decentralized applications (dApps) could lead to increased adoption and development of these technologies.

#### **Potential Challenges and Opportunities**
While China's involvement in Web3 and NFTs is promising, it also poses challenges, particularly regarding regulatory frameworks and the integration of these technologies within the existing digital ecosystem. However, as noted by [CryptoNews](https://cryptonews.com/news/china-to-craft-a-document-for-web3-development-involving-nfts-dapps-cross-chain-and-privacy-computing.htm), the strategic document being crafted by the Chinese government aims to guide the development of the Web3 ecosystem, addressing cross-chain and privacy computing aspects.

#### **The Future of NFTs in China**
The commitment of the Chinese government to Web3 and NFTs could lead to an "exponential explosion of adoption," as suggested by [Benzinga](https://www.benzinga.com/markets/cryptocurrency/23/12/36325395/china-plans-to-boost-nft-decentralized-applications-could-we-see-an-exponential-explosion-). This development is particularly intriguing given the country's ban on cryptocurrency trading and mining. It highlights China's recognition of the distinct value and potential of NFTs and decentralized applications beyond the realm of traditional cryptocurrencies.

#### **Conclusion**
China's foray into Web3 and NFTs marks a new chapter in the digital world. It underscores the growing importance of blockchain technologies and the potential they hold for creating innovative business models and digital experiences. As China embarks on this journey, the global NFT space is poised for transformative growth and evolution.


medium_shutterstock_1998090368_850.jpg

small_shutterstock_1998090368_850.jpg

thumbnail_shutterstock_1998090368_850.jpg

shutterstock_1998090368_850.jpg

China, a global powerhouse in technology and innovation, is now setting its sights on the burgeoning world of Web3 and Non-Fungible Tokens (NFTs). Despite its stringent stance on cryptocurrencies, the Chinese government is embracing the potential of Web3 technologies, signaling a significant shift in the digital landscape.

Navigating Web3: Insights into China's Emerging Strategy in NFT and Blockchain Innovation

### HOW TO USE THE BLOCKSPAN API TO SEARCH FOR NFTS BY NAME

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. An NFT search tool will help you find NFTs that contain a particular string in them


### 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 nft-search-tool` 
`cd nft-search-tool`

This will create a new React application named `nft-search-tool` 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 `NFTSearch.js` and include the following code:

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

const NFTSearch = () => {
  const [blockchain, setBlockchain] = useState('eth-main');
  const [nfts, setNfts] = useState(null);
  const [query, setQuery] = useState('');
  const [error, setError] = useState(null);
  const [filter, setFilter] = useState('token_name')
  const [loading, setLoading] = useState(false)

  const fetchNFTs = async () => {
    setLoading(true)
    const options = {
      method: 'GET',
      url: `https://api.blockspan.com/v1/nfts/search?chain=${blockchain}&q=${query}&filter=${filter}`,
      headers: { accept: 'application/json', 'X-API-KEY': 'YOUR_BLOCKSPAN_API_KEY' },
    };

    try {
      const response = await axios.request(options);
      console.log(response)
      setNfts(response.data.results);
      setError(null);
      setLoading(false)
    } catch (error) {
      setNfts(null);
      error.response.status === 401 ?
        setError('Invalid blockspan API key!') :
        query === '' ? 
          setError('Query must be non empty string!') :
          setError('No NFTs found!');
      setLoading(false)
    }
  };

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

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

  return (
    <div>
      <h1 className="title">NFT Search Tool</h1>
      <p className="message">
        Select a chain, select a filter and type a query string to search for NFTs with that string.
      </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>
        <select name="filter" value={filter} onChange={(e) => setFilter(e.target.value)}>
          <option value="token_name">Token Name</option>
          <option value="token_description">Token Description</option>
          <option value="token_attributes">Token Attributes</option>
          <option value="all">All</option>
        </select>
        <input type="text" placeholder="Query String" onChange={(e) => setQuery(e.target.value)} />
        <button onClick={fetchNFTs}>Search</button>
      </div>
      {loading && (
        <p className='message'>Loading ...</p>
      )}
      {!loading && (
        error ? (
          <p className="errorMessage">{error}</p>
        ) : (
          nfts && (
            <table>
              <thead>
                <tr style={{ backgroundColor: '#f2f2f2' }}>
                  <th>No.</th>
                  <th>Contract Address</th>
                  <th>Example Token Description</th>
                  <th>Example Token ID</th>
                  <th>Example Token Name</th>
                  <th>Token Type</th>
                </tr>
              </thead>
              <tbody>
                {nfts.map((nft, index) => (
                  <tr key={index} style={{ backgroundColor: index % 2 === 0 ? '#f2f2f2' : 'white' }}>
                    <td>{index+1}</td>
                    <td>{checkData(nft.contract_address)}</td>
                    <td>{checkData(nft.example_token_description)}</td>
                    <td>{checkData(nft.example_token_id)}</td>
                    <td>{checkData(nft.example_token_name)}</td>
                    <td>{checkData(nft.token_type)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )
        )
      )}
    </div>
  );
};

export default NFTSearch;

```

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:

```javascript
.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;
}


th:nth-child(1),
td:nth-child(1) {
  width: 15px;
}

th:nth-child(2),
td:nth-child(2) {
  width: 50px;
}

th:nth-child(3),
td:nth-child(3) {
  width: 150px;
}

th:nth-child(4),
td:nth-child(4) {
  width: 50px;
}

th:nth-child(5),
td:nth-child(5) {
  width: 100px;
}

th:nth-child(6),
td:nth-child(6) {
  width: 100px;
}

```


### STEP 5: INTEGRATING COMPONENTS IN THE APP

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

Open App.js and modify it as follows:

```javascript
import React from 'react';
import NFTSearch from './NFTSearch.js';

function App() {

  return (
    <div className="App">
      <NFTSearch/>
    </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 and a filter
- A text box for query string
- A search button

Input the query string you wish to see NFTs for, and click the search button. You should then see a table with multiple NFTs with that string in the target property. 

All of the code is available for your convenience at: [https://github.com/BlockSpan/tutorials-nft-search-tool](https://github.com/BlockSpan/tutorials-nft-search-tool)

That's it! You've built an nft search tool 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!


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. An NFT search tool will help you find NFTs that contain a particular string in them

Tutorial: NFT Search tool

### HOW TO USE THE BLOCKSPAN API TO FIND NFT RARITY DATA

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. An nft rarity ranking tool will provide users with an overview of nft rarity data, which can help users make informed decisions about which NFTs to buy or sell based on their rarity.


### 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 nft-rarity-ranking-tool` 
`cd nft-rarity-ranking-tool`

This will create a new React application named `nft-rarity-ranking-tool` 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 `RankingTool.js` and include the following code:

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

const RankingTool = () => {
  const [contractAddress, setcontractAddress] = useState('');
  const [blockchain, setBlockchain] = useState('eth-main');
  const [collection, setCollection] = useState(null)
  const [error, setError] = useState(false)
  const [loading, setLoading] = useState(false)

  const getCollection = async () => {
    setCollection(null)
    setLoading(true)
    const url = `https://api.blockspan.com/v1/collections/contract/${contractAddress}?chain=${blockchain}`;
    const headers = {
      accept: 'application/json',
      'X-API-KEY': 'YOUR_BLOCKSPAN_API_KEY',
    };

    try {
      const response = await axios.get(url, { headers });
      setCollection(response)
      console.log('response:', response)
      setError(null);
      setLoading(false)
    } catch (error) {
      console.error(error);
      error.response.status === 401 ?
        setError('Invalid blockspan API key!') :
        setError('Error: verify chain and contract address are valid');
      setCollection(null);
      setLoading(false)
    }
  };

  const checkData = (data) => {
    if (!data || isNaN(data)) {
        return 'N/A'
    } 
    return data
  }

  const rarityCountStats = (array) => {
    const length = array.length
    let total = 0
    let max = 0
    let min = 0
    
    array.forEach((element) => {
      const value = parseInt(element.count)
      total += value
      if (max < value) {
        max = value
      }
      if (min > value || min === 0) {
        min = value
      }
    })
    let average = 0
    if (length !== 0){
      average = (total / length).toFixed(1);
    }
    return {average, min, max}
  }



  return (
    <div>
      <h1 className="title">NFT Rarity Ranking Tool</h1>
      <p className="message">
          Select a blockchain and input a contract address to see NFT rarity information.
      </p>
      <div className="inputContainer">
        <select name="blockchain"
          value={blockchain}
          onChange={e => setBlockchain(e.target.value)}>
          <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="Contract Address" onChange={e => setcontractAddress(e.target.value)}/>
        <button onClick={getCollection}>Get Collection</button>
      </div>
      {loading && (
        <p className='message'>Loading...</p>
      )}
      {error && !loading && (
        <p className='errorMessage'>{error}</p>
      )}
      {collection && collection.data && (
        <p style={{ fontWeight: 'bold', textAlign: 'center' }}>
          Token Type: {collection.data.token_type ? collection.data.token_type : 'N/A'} | 
          Total Tokens: {checkData(collection.data.total_tokens)} | 
          Total Transfers: {checkData(collection.data.total_transfers)}
        </p>
      )}
      {collection && collection.data && collection.data.trait_rarity_counts && (
        <div>
          <table className='tableContainer'>
            <thead>
              <tr style={{ backgroundColor: '#f2f2f2' }}>
                <th>Traits</th>
                <th>Unique Values</th>
                <th>Average Rarity Count</th>
                <th>Lowest Rarity Count</th>
                <th>Highest Rarity Count</th>
              </tr>
            </thead>
            <tbody>
              {collection.data.trait_rarity_counts.map((element) => ( 
                <tr style={{ backgroundColor: '#f2f2f2' }} key={element.trait}>
                  <td>{element.trait}</td>
                  <td>{element.rarity_counts.length}</td>
                  <td>{rarityCountStats(element.rarity_counts).average}</td>
                  <td>{rarityCountStats(element.rarity_counts).min}</td>
                  <td>{rarityCountStats(element.rarity_counts).max}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}

export default RankingTool;

```

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:

```javascript
.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;
}

.successMessage {
  text-align: center;
  color: green;
  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: 500px;
  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: center;
}

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

.tableContainer {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px; 
}

```

### STEP 5: INTEGRATING COMPONENTS IN THE APP

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

Open App.js and modify it as follows:

```javascript
import React from 'react';
import './App.css';
import RankingTool from './RankingTool';

function App() {
  return (
    <div className="App">
      <RankingTool/>
    </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 contract address
- A get collection button

Input the chain and contract address for the collection you want data for, and click the get collection button. You should then see a bold line with general collection information, and a grey table with NFT rarity data if it exists. 

### CONCLUSION

Congratulations! You've just built a simple yet powerful NFT rarity ranking tool using the Blockspan API and React.js. As you've seen, the Blockspan API is intuitive to use and provides detailed and accurate information, making it a perfect choice for this kind of application. This tutorial is just a starting point - there are many ways you can expand and improve your tool. For example, you could add more error checking, improve the UI, or display additional data.

All of the code is available for your convenience at: [https://github.com/BlockSpan/tutorials-nft-rarity-ranking-tool](https://github.com/BlockSpan/tutorials-nft-rarity-ranking-tool)

As the world of NFTs continues to grow and evolve, tools like this will become increasingly important. Whether you're an NFT enthusiast, a developer, or a startup, understanding NFTs is a valuable skill. We hope you found this tutorial helpful.

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. An nft rarity ranking tool will provide users with an overview of nft rarity data, which can help users make informed decisions about which NFTs to buy or sell based on their rarity.

Tutorial: NFT Rarity Ranking Tool

#### **Introduction**
Great news for the Web3 community! BlockSpan is excited to unveil a diverse range of tutorials on our website, designed to empower users with practical knowledge and tools. These tutorials not only provide insights into potential use cases but also offer ready-to-use code as a starting point for your projects. Let's explore some of these tutorials in detail.

#### **Featured Tutorials**

1. **Create an NFT Ownership Verification Tool**
![Verify NFT Ownership](https://blockspan-cms-production.s3.us-east-2.amazonaws.com/tutorial_example_1_2b8b1a2870.png)
   - **Overview**: This tutorial guides you through building a web application for verifying NFT ownership. It demonstrates how to use the BlockSpan API to check if a user owns NFTs within a specific collection by inputting their wallet address and the NFT collection contract.

   - **Key Takeaways**: You'll learn how to integrate BlockSpan's API into a React application, enhancing your skills in creating practical tools for the NFT space. This tutorial is ideal for developers interested in NFT verification and blockchain applications.

   - **GitHub Code Access**: See our [blog post](https://blockspan.com/blog/tutorial-nft-ownership-verification/) for more details and access the complete [code](https://github.com/BlockSpan/tutorials-nft-ownership-verification) on GitHub to quickly set up your NFT verification tool.  


2. **Track NFTs of Wallet across Multiple Chains**
![Multi-chain NFT Holdings Tracker](https://blockspan-cms-production.s3.us-east-2.amazonaws.com/tutorial_example_2_03ede76958.png)
   - **Overview**: This tutorial guides you through through the process of creating a tool to track NFT assets across multiple blockchain networks for a wallet. It demonstrates how to leverage BlockSpan's API to aggregate and display NFT holdings from various chains in a single, unified interface.

   - **Key Takeaways**: Learn about handling data from different blockchain networks and integrating them into a cohesive application. This tutorial is particularly valuable for developers looking to create comprehensive tools for NFT collectors and investors who operate across multiple blockchains.

   - **GitHub Code Access**: See our [blog post](https://blockspan.com/blog/tutorial-multi-chain-nft-wallet-tracker/) for more details and access the complete [code](https://github.com/BlockSpan/tutorials-multi-chain-nft-wallet-tracker) on GitHub to quickly set up your Multichain NFT Holdings Tracker tool.  
   

3. **Research Rarity Distribution of Collection**
![NFT Rarity Rankings](https://blockspan-cms-production.s3.us-east-2.amazonaws.com/tutorial_example_1_2b8b1a2870.png)
   - **Overview**: This tutorial walks you through creating an NFT Rarity Ranking Tool using BlockSpan's API and React.js. It focuses on fetching and displaying rarity data for NFTs within a specific collection, providing users with valuable insights into the uniqueness of each NFT.

   - **Key Takeaways**: You'll learn how to interact with BlockSpan's API to retrieve detailed NFT data and how to present this information effectively in a user-friendly interface. This tutorial is ideal for developers looking to create tools that offer deeper insights into the NFT market, particularly in assessing the rarity and value of NFTs.

   - **GitHub Code Access**: See our [blog post](https://blockspan.com/blog/tutorial-nft-rarity-ranking-tool/) for more details and access the complete [code](https://github.com/BlockSpan/tutorials-nft-rarity-ranking-tool) on GitHub to quickly set up your NFT Rarity Rankings tool.  

#### **Empowering Your Web3 Journey**
These tutorials represent just a fraction of what we've prepared for you. Each guide is meticulously crafted to ensure clarity, practicality, and relevance, catering to both beginners and experienced developers. With GitHub code access, you can easily implement these examples and tailor them to your specific needs.

#### **Conclusion**
BlockSpan's new tutorial series is more than just a learning resource; it's a comprehensive guide to the vast possibilities of NFT technology and Web3 applications. Whether you're looking to integrate NFTs into your business, develop innovative Web3 solutions, or simply expand your knowledge, our tutorials provide the knowledge and tools you need to succeed. Explore our tutorials today and start unlocking the full potential of Web3 with BlockSpan.


medium_tutorial-cover.png

small_tutorial-cover.png

thumbnail_tutorial-cover.png

tutorial-cover.png

Great news for the Web3 community! BlockSpan is excited to unveil a diverse range of tutorials on our website, designed to empower users with practical knowledge and tools. These tutorials not only provide insights into potential use cases but also offer ready-to-use code as a starting point for your projects. Let's explore some of these tutorials in detail.

Unlocking Web3 Potential with BlockSpan's Comprehensive Tutorial Series

### How To Create a NFT Price Dashboard Using Blockspan API

Blockspan API offers a wealth of data about NFTs. It's a treasure trove for developers who want to build applications around NFTs, whether it's for pricing, trading, analytics, or anything else you can imagine in the NFT space.

In this guide, we will create an application that checks a contract address for recent transaction price data. The user will select a chain, currency and, contract address, then click a button to see a table of recent price history. This application will use the Blockspan Get Collection Price Summary API. 

### REQUIREMENTS:
- Node.js and npm installed on your system.
- Basic knowledge of React.js
- Blockspan API key

### STEP 1: SETTING UP THE REACT APP

First, we need to create a new React application. Open your terminal, navigate to the directory where you want to create your project, and run the following command:

`npx create-react-app nft-price-dashboard`

This will create a new folder `nft-price-dashboard` with all the necessary files and dependencies for a React application.

### STEP 2: INSTALL AXIOS

We'll be using Axios to make HTTP requests to the Blockspan API. Navigate into your new project folder and install Axios:

`cd nft-price-dashboard` 
`npm install axios`

### STEP 3: WRITING THE COMPONENT

In `App.js`, we will import React, Axios, and App.css. Then we will set up necessary state variables such as contractAddress and blockchain. Replace everything in `App.js` with the following:

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

function App() {
  const [contractAddress, setContractAddress] = useState('');
  const [priceSummary, setPriceSummary] = useState(null);
  const [blockchain, setBlockchain] = useState('eth-main');
  const [currency, setCurrency] = useState('USD')
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false)

  // fetchData function
  
  // Additonal helper functions

  return (
    // JSX code
  );
}

export default App;
```

### STEP 4: FETCHING AND DISPLAYING THE DATA

We will add a function `fetchData` to our component that makes a get request to the Blockspan API and sets `priceSummary` in our state:

```javascript
// fetchData function

  const fetchData = async () => {
    setLoading(true)
    const options = {
      method: 'GET',
      url: `https://api.blockspan.com/v1/collections/pricesummary/contract/${contractAddress}?chain=${blockchain}`,
      headers: { accept: 'application/json', 'X-API-KEY': 'YOUR_BLOCKSPAN_API_KEY' }
    };

    try {
      const response = await axios.request(options);
      setPriceSummary(response.data.price_summary);
      setError(null);
    } catch (error) {
      error.response.status === 401 ?
      setError('Invalid blockspan API key!') :
      setError('Error: Verify chain and contract address are valid!');
    }
    setLoading(false)
  };
```

Don't forget to replace `YOUR_BLOCKSPAN_API_KEY` with your actual key!

We will then add two helper functions which help simplify our code:

```javascript
// Additional helper functions

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

const checkData = (data) => {
    if (!data || isNaN(data)) {
        return 'N/A'
    } 
    return data
}
```

Our JSX code will display a form for the user to select a chain, select a currency and input a contract address, and a button to view the price dashboard. After the data is fetched, it will be displayed in a table:

```javascript
  return (
    // JSX code

    <div className='App'>
      <h1 className='title'>NFT Price Dashboard</h1>
      <p>Select a chain and input contract address below to see recent transaction price dashboard.</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>
        <select name="currency" value={currency} onChange={(e) => setCurrency(e.target.value)}>
          <option value="USD">USD</option>
          <option value="native">Native Currency</option>
        </select>
        <input
            type="text"
            placeholder="Contract Address"
            value={contractAddress}
            onChange={(e) => setContractAddress(e.target.value)}
          />
        <button onClick={fetchData}>View Price Dashboard</button>
      </div>
      {loading ? (
        <p className='message'>Loading...</p>
      ) : (
        error ? (
          <p className="errorMessage">{error}</p>
        ) : (priceSummary && (
          <table>
            <thead>
              <tr style={{ backgroundColor: '#f2f2f2' }}>
                <th>Period</th>
                <th>Total Transfers</th>
                <th>Available Prices</th>
                { currency === 'USD' ? (
                  <>
                    <th>Min Price USD</th>
                    <th>Max Price USD</th>
                    <th>Avg Price USD</th>
                  </>
                ) : (
                  <>
                    <th>Min Price Native</th>
                    <th>Max Price Native</th>
                    <th>Avg Price Native</th>
                  </>
                )}
              </tr>
            </thead>
            <tbody>
              {Object.keys(priceSummary).map((period) => (
                <tr style={{ backgroundColor: '#f2f2f2' }} key={period}>
                  <td>{period}</td>
                  <td>{checkData(priceSummary[period].total_transfers)}</td>
                  <td>{checkData(priceSummary[period].available_prices)}</td>
                  { currency === 'USD' ? (
                  <>
                    <td>{checkData(parseFloat(priceSummary[period].min_price_usd).toFixed(2))}</td>
                    <td>{checkData(parseFloat(priceSummary[period].max_price_usd).toFixed(2))}</td>
                    <td>{checkData(parseFloat(priceSummary[period].avg_price_usd).toFixed(2))}</td>
                  </>
                ) : (
                  <>
                    <td>{checkData(parseFloat(priceSummary[period].min_price_native).toFixed(7))}</td>
                    <td>{checkData(parseFloat(priceSummary[period].max_price_native).toFixed(7))}</td>
                    <td>{checkData(parseFloat(priceSummary[period].avg_price_native).toFixed(7))}</td>
                  </>
                )}
                </tr>
              ))}
            </tbody>
          </table>
        ))
      )}
    </div>
  );
```

Finally, we will enhance the user interface in the browser by replacing all code in the App.css file with the following:

```javascript
.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: 500px;
  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: RUNNING THE APPLICATION

Now, you can start your application by running `npm start` in your terminal. You should see the following in the browser:

- A dropdown menu to select a blockchain and currency
- Text box for contract address
- A view price dashboard button

Input the data of the chain and contract address you want to check, and click the view price dashboard button. You should then see a table with price information over a one day, seven day, and thrity day period. 

This wraps up our guide to creating an NFT Price Dashboard tool using the Blockspan API and React.js. Happy coding!

## CONCLUSION

Congratulations! You've just built a simple yet powerful NFT price dashboard tool using the Blockspan API and React.js. As you've seen, the Blockspan API is intuitive to use and provides detailed and accurate information, making it a perfect choice for this kind of application. This tutorial is just a starting point - there are many ways you can expand and improve your tool. For example, you could add more error checking, improve the UI, or add support for more blockchains.

All of the code is available for your convenience at: [https://github.com/BlockSpan/tutorials-nft-price-dashboard](https://github.com/BlockSpan/tutorials-nft-price-dashboard)

As the world of NFTs continues to grow and evolve, tools like this will become increasingly important. Whether you're an NFT enthusiast, a developer, or a startup, understanding NFTs is a valuable skill. We hope you found this tutorial helpful.

Blockspan API offers a wealth of data about NFTs. It's a treasure trove for developers who want to build applications around NFTs, whether it's for pricing, trading, analytics, or anything else you can imagine in the NFT space.

In this guide, we will create an application that checks a contract address for recent transaction price data. The user will select a chain, currency and, contract address, then click a button to see a table of recent price history. This application will use the Blockspan Get Collection Price Summary API. 

Tutorial: NFT Price Dashboard

### How To Create a Multi-chain NFT Wallet Tracker Using Blockspan API

Blockspan API offers a wealth of data about NFTs. It's a treasure trove for developers who want to build applications around NFTs, whether it's for pricing, trading, analytics, or anything else you can imagine in the NFT space.

In this guide, we will create an application that finds all NFTs owned by a particular wallet across all blockchains. The user will input only the wallet address, and see a table of all NFTs and their chain. This application will use the Blockspan Get All NFTs Of Owner API. 

### REQUIREMENTS:
- Node.js and npm installed on your system.
- Basic knowledge of React.js
- Blockspan API key

### STEP 1: SETTING UP THE REACT APP

First, we need to create a new React application. Open your terminal, navigate to the directory where you want to create your project, and run the following command:

`npx create-react-app multi-chain-nft-wallet-tracker`

This will create a new folder `multi-chain-nft-wallet-tracker` with all the necessary files and dependencies for a React application.

### STEP 2: INSTALL AXIOS

We'll be using Axios to make HTTP requests to the Blockspan API. Navigate into your new project folder and install Axios:

`cd multi-chain-nft-wallet-tracker` 
`npm install axios`

### STEP 3: WRITING THE COMPONENT

In App.js, we will import React, Axios, and App.css. Then we will set up necessary state variables such as contractAddress and blockchain. Replace everything in App.js with the following:

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

const App = () => {
  const [walletAddress, setWalletAddress] = useState(null);
  const [NFTs, setNFTs] = useState([]);
  const [chainArray, setChainArray] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  const [hasClicked, setHasClicked] = useState(false);

  const blockchains = ['eth-main', 'arbitrum-main', 'optimism-main', 'poly-main', 'bsc-main', 'eth-goerli'];
  const [ethNFTs, setEthNFTs] = useState(null);
  const [arbitrumNFTs, setArbitrumNFTs] = useState(null);
  const [optimismNFTs, setOptimismNFTs] = useState(null);
  const [polyNFTs, setPolyNFTs] = useState(null);
  const [bscNFTs, setBscNFTs] = useState(null);
  const [goerliNFTs, setGoerliNFTs] = useState(null);

  // fetchNFTs function

  // useEffect function

  return (
    // JSX code
  );
}

export default App;
```

### STEP 4: FETCHING AND DISPLAYING THE DATA

We will add a function `fetchNFTs` to our component that makes a get request to the Blockspan API and sets `priceSummary` in our state:

```javascript
// fetchNFTs function

  const fetchNFTs = async () => {
    setEthNFTs(null);
    setArbitrumNFTs(null);
    setOptimismNFTs(null);
    setPolyNFTs(null);
    setBscNFTs(null);
    setGoerliNFTs(null);
    setNFTs([]);
    setIsLoading(true); 
    setError(true);
    setHasClicked(true);

    const fetchPromises = blockchains.map(async (blockchain) => {
      try {
        const options = {
          method: 'GET',
          url: `https://api.blockspan.com/v1/nfts/owner/${walletAddress}?chain=${blockchain}&include_nft_details=true&page_size=25`,
          headers: {
            accept: 'application/json',
            'X-API-KEY': 'YOUR_BLOCKSPAN_API_KEY',
          },
        };
        const response = await axios.request(options);
        switch (blockchain) {
          case 'eth-main':
            await setEthNFTs(response.data.results);
            break;
          case 'arbitrum-main':
            await setArbitrumNFTs(response.data.results);
            break;
          case 'optimism-main':
            await setOptimismNFTs(response.data.results);
            break;
          case 'poly-main':
            await setPolyNFTs(response.data.results);
            break;
          case 'bsc-main':
            await setBscNFTs(response.data.results);
            break;
          case 'eth-goerli':
            await setGoerliNFTs(response.data.results);
            break;
          default:
            break;
        }
        setError(false)
      } catch (error) {
        if (error.response && error.response.status === 401) {
          setError('Invalid blockspan API key!');
        } else {
          setError('No NFTs found in this wallet!');
        }
        console.error('Error fetching collections:', error);
      }
    })
    await Promise.all(fetchPromises);
    setIsLoading(false); 
  };
```

Don't forget to replace `YOUR_BLOCKSPAN_API_KEY` with your actual key!

We will then add a use effect function to combine data from all the chains into one single array

```javascript
// useEffect function

  useEffect(() => {
    let updatedNFTs = [];
    let updatedChainArray = [];

    if (ethNFTs !== null) {
      updatedNFTs = updatedNFTs.concat(ethNFTs);
      updatedChainArray = updatedChainArray.concat(Array(ethNFTs.length).fill('eth-main'));
    }
    if (arbitrumNFTs !== null) {
      updatedNFTs = updatedNFTs.concat(arbitrumNFTs);
      updatedChainArray = updatedChainArray.concat(Array(arbitrumNFTs.length).fill('arbitrum-main'));
    }
    if (optimismNFTs !== null) {
      updatedNFTs = updatedNFTs.concat(optimismNFTs);
      updatedChainArray = updatedChainArray.concat(Array(optimismNFTs.length).fill('optimism-main'));
    }
    if (polyNFTs !== null) {
      updatedNFTs = updatedNFTs.concat(polyNFTs);
      updatedChainArray = updatedChainArray.concat(Array(polyNFTs.length).fill('poly-main'));
    }
    if (bscNFTs !== null) {
      updatedNFTs = updatedNFTs.concat(bscNFTs);
      updatedChainArray = updatedChainArray.concat(Array(bscNFTs.length).fill('bsc-main'));
    }
    if (goerliNFTs !== null) {
      updatedNFTs = updatedNFTs.concat(goerliNFTs);
      updatedChainArray = updatedChainArray.concat(Array(goerliNFTs.length).fill('goerli-main'));
    }

    setNFTs(updatedNFTs);
    setChainArray(updatedChainArray);
  }, [ethNFTs, arbitrumNFTs, optimismNFTs, polyNFTs, bscNFTs, goerliNFTs]);
```

Our JSX code will display a form for the user to input a wallet address, and a button to view NFTs. After the data is fetched, it will be displayed in a table:

```javascript
  return (
    // JSX code

    <div className="App">
      <h1 className="title">Multi Chain NFT Wallet Tracker</h1>
      <p>Input wallet address below to see all NFT assets accross all chains.</p>
      <div className="inputContainer">
        <input
          type="text"
          placeholder="Wallet Address"
          value={walletAddress}
          onChange={(e) => setWalletAddress(e.target.value)}
        />
        <button onClick={fetchNFTs}>View NFTs</button>
      </div>
      {isLoading ? ( 
        <p className="loadingMessage">Loading NFTs...</p>
      ) : error && hasClicked && NFTs.length === 0? (
        <p className="errorMessage">{error}</p>
      ) : NFTs.length !== 0 && (
        <table>
          <thead>
            <tr style={{ backgroundColor: '#f2f2f2' }}>
              <th>NFT Number</th>
              <th>Chain</th>
              <th>Contract Address</th>
              <th>Token ID</th>
              <th>Image</th>
            </tr>
          </thead>
          <tbody>
            {NFTs.map((nft, index) => (
              <tr style={{ backgroundColor: '#f2f2f2' }} key={index}>
                <td>{index + 1}</td>
                <td>{chainArray[index]}</td>
                <td>{nft.contract_address}</td>
                <td>{nft.id}</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>
  );
```

Finally, we will enhance the user interface in the browser by replacing all code in the App.css file with the following:

```javascript
.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: 150px;
  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: RUNNING THE APPLICATION

Now, you can start your application by running `npm start` in your terminal. You should see the following in the browser:

- Text box for wallet address
- A blue view NFTs button

Input the wallet address you want to check, and click the view NFTs button. You should then see a table with multiple NFT images and what chain they belong to. 

This wraps up our guide to creating an NFT Price Dashboard tool using the Blockspan API and React.js. Happy coding!

### CONCLUSION

Congratulations! You've just built a simple yet powerful NFT finder tool using the Blockspan API and React.js. As you've seen, the Blockspan API is intuitive to use and provides detailed and accurate information, making it a perfect choice for this kind of application. This tutorial is just a starting point - there are many ways you can expand and improve your tool. For example, you could add more error checking, improve the UI, or retrieve more NFT data.

All of the code is available for your convenience at: [https://github.com/BlockSpan/tutorials-multi-chain-nft-wallet-tracker](https://github.com/BlockSpan/tutorials-multi-chain-nft-wallet-tracker)

As the world of NFTs continues to grow and evolve, tools like this will become increasingly important. Whether you're an NFT enthusiast, a developer, or a startup, understanding NFTs is a valuable skill. We hope you found this tutorial helpful.

Blockspan API offers a wealth of data about NFTs. It's a treasure trove for developers who want to build applications around NFTs, whether it's for pricing, trading, analytics, or anything else you can imagine in the NFT space.

In this guide, we will create an application that finds all NFTs owned by a particular wallet across all blockchains. The user will input only the wallet address, and see a table of all NFTs and their chain. This application will use the Blockspan Get All NFTs Of Owner API. 


Tutorial: Multi-chain NFT Wallet Tracker

### How To Create an NFT Ownership Verification Tool Using Blockspan API

Blockspan API offers a wealth of data about NFTs. It's a treasure trove for developers who want to build applications around NFTs, whether it's for pricing, trading, analytics, or anything else you can imagine in the NFT space.

In this guide, we'll create a web application that allows users to verify their ownership of NFTs within a specific collection. The user will input their wallet address and a specific NFT collection contract, and our application will use the Blockspan API to retrieve and display the relevant information. 

### REQUIREMENTS:
- Node.js and npm installed on your system.
- Basic knowledge of React.js
- Blockspan API key


### STEP 1: SETTING UP THE REACT APP

First, we need to create a new React application. Open your terminal, navigate to the directory where you want to create your project, and run the following command:

`npx create-react-app nft-ownership-verification`

This will create a new folder `nft-ownership-verification` with all the necessary files and dependencies for a React application.


### STEP 2: INSTALL AXIOS

We'll be using Axios to make HTTP requests to the Blockspan API. Navigate into your new project folder and install Axios:

`cd nft-ownership-verification`
`npm install axios`


### STEP 3: CREATE A NEW COMPONENT

In the `src` directory, create a new file `NFTVerification.js`. This will be our main component for NFT ownership verification.


### STEP 4: WRITING THE COMPONENT

In NFTVerification.js, we'll import App.css, React and Axios, then set up our component with the necessary state variables such as wallet address, contract address, and data:

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

function NFTVerification() {
  const [address, setAddress] = useState('');
  const [contract, setContract] = useState('');
  const [blockchain, setBlockchain] = useState('eth-main');
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false)

  // verifyOwnership function

  // additional helper functions

  return (
    // JSX code
  );
}

export default NFTVerification;
```

### STEP 5: FETCHING AND DISPLAYING THE DATA

We'll add a function `verifyOwnership` to our component that makes a GET request to the Blockspan API and sets the response data in our state:

```javascript
  const verifyOwnership = async () => {
    setLoading(true)
    const url = `https://api.blockspan.com/v1/collections/owner/${address}?chain=${blockchain}&page_size=25`;
    const headers = {
      accept: 'application/json',
      'X-API-KEY': 'YOUR_BLOCKSPAN_API_KEY',
    };

    try {
      const response = await axios.get(url, { headers });
      const filteredResults = response.data.results.filter(
        result => result.contract_address === contract
      );
      const collectionPromises = filteredResults.map(async result => {
        const collectionUrl = `https://api.blockspan.com/v1/collections/contract/${result.contract_address}?chain=${blockchain}`;
        const collectionResponse = await axios.get(collectionUrl, { headers });
        return {
          ...result,
          name: collectionResponse.data.name,
          imageUrl: collectionResponse.data.image_url,
        };
      });
      const collectionsWithData = await Promise.all(collectionPromises);
      setData({ ...response.data, results: collectionsWithData });
      setError(null);
    } catch (error) {
      console.error(error);
      error.response.status === 401 ?
        setError('Invalid blockspan API key!') :
        setError('Error: Verify that chain and wallet address are valid!');
      setData(null);
    }
    setLoading(false)
  };
```

Don't forget to replace `YOUR_BLOCKSPAN_API_KEY` with your actual key!

We will add two helper functions which help simplify our code:

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

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


Our JSX code will display a form for the user to select a chain and input their wallet address and contract address, and a button to initiate the verification. After the data is fetched, it will be displayed in a table:

```javascript
return (
    <div>
      <h1 className="title">NFT Ownership Verification</h1>
      <p className="message">
        Input a wallet address and contract address below to check if that wallet owns the NFT.
      </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)} />
        <input type="text" placeholder="Contract Address" onChange={e => setContract(e.target.value)} />
        <button onClick={verifyOwnership}>Verify Ownership</button>
      </div>
      {loading ? (
        <p className='message'>Loading...</p>
      ) : (
        <>
          {error && <p className="errorMessage">{error}</p>}
          {data !== null && data.results.length === 0 && (
            <p className="errorMessage">Owner does not own NFT in provided contract address!</p>
          )}
          {data !== null && data.results.length > 0 && (
            <div>
              <p className="successMessage">Collection found!</p>
              <h2>Details:</h2>
              <table>
                <thead>
                  <tr style={{ backgroundColor: '#f2f2f2' }}>
                    <th>Name</th>
                    <th>Token Type</th>
                    <th>Contract Address</th>
                    <th>Total Tokens</th>
                    <th>Total Quantity</th>
                    <th>Spam</th>
                  </tr>
                </thead>
                <tbody>
                  {data.results.map((result, index) => (
                    <tr key={index} style={{ backgroundColor: index % 2 === 0 ? '#f2f2f2' : 'white' }}>
                      <td>{checkData(result.name)}</td>
                      <td>{checkData(result.token_type)}</td>
                      <td>{checkData(result.contract_address)}</td>
                      <td>{checkData(result.total_tokens)}</td>
                      <td>{checkData(result.total_quantity)}</td>
                      <td>{checkData(result.is_potential_spam)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </>
      )}
    </div>
  );
```

Finally, we will enhance the user interface in the browser by replacing all code in the App.css file with the following:

```javascript
.App {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}

.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;
}

.message {
  text-align: center;
}

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

.successMessage {
  text-align: center;
  color: green;
  font-weight: bold;
}


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

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


### STEP 6: INTEGRATING THE COMPONENT

Finally, let's integrate our `NFTVerification` component into the main application. In `App.js`, import and use the `NFTVerification` component:

```javascript
import React from 'react';
import './App.css';
import NFTVerification from './NFTVerification';

function App() {
  return (
    <div className="App">
      <NFTVerification />
    </div>
  );
}

export default App;
```

Now, you can start your application by running `npm start` in your terminal. You should see the following:
- A dropdown menu to select a blockchain
- Text boxes for wallet and contract address
- A verify ownership button

Input the data of the NFT and wallet you want to check, and click the verify ownership button. You should then see a green "collection found" message and a table with the NFT information, or a red error message. 

This wraps up our guide to creating an NFT Ownership Verification tool using the Blockspan API and React.js. Happy coding!

### CONCLUSION

Congratulations! You've just built a simple yet powerful NFT ownership verification tool using the Blockspan API and React.js. As you've seen, the Blockspan API is intuitive to use and provides detailed and accurate information, making it a perfect choice for this kind of application.
This tutorial is just a starting point - there are many ways you can expand and improve your tool. For example, you could add more error checking, improve the UI, or add support for more blockchains.

All of the code is available for your convenience at: [https://github.com/BlockSpan/tutorials-nft-ownership-verification](https://github.com/BlockSpan/tutorials-nft-ownership-verification)

As the world of NFTs continues to grow and evolve, tools like this will become increasingly important. Whether you're an NFT enthusiast, a developer, or a startup, understanding how to verify NFT ownership is a valuable skill.
We hope you found this tutorial helpful.

Blockspan API offers a wealth of data about NFTs. It's a treasure trove for developers who want to build applications around NFTs, whether it's for pricing, trading, analytics, or anything else you can imagine in the NFT space.

In this guide, we'll create a web application that allows users to verify their ownership of NFTs within a specific collection. The user will input their wallet address and a specific NFT collection contract, and our application will use the Blockspan API to retrieve and display the relevant information. 

Tutorial: NFT Ownership Verification

### **The Rise of Web3 Gaming in Asia Pacific**

The Asia Pacific (APAC) region is leading a significant shift in the world of Web3 gaming. Home to about 40% of the world's game developers, APAC has become the epicenter of this digital revolution. The United States and South Korea are also key players, but APAC's dominance is clear with its significant development and funding trends.

### **Funding and Development Trends**

The Web3 gaming sector in APAC has seen a financial frenzy, with investments totaling $19 billion since 2018. In 2023 alone, $1.5 billion was raised, with over $800 million earmarked specifically for Web3 gaming. This funding is primarily directed towards sports, MMOs, RPGs, and action games, with a notable preference for Ethereum-based networks and the Polygon ecosystem.

### **The Role of BlockSpan in This Emerging Landscape**

For BlockSpan's customers, this surge in Web3 gaming in APAC presents numerous opportunities. As developers and investors navigate this burgeoning market, the need for reliable, real-time data becomes paramount. This is where BlockSpan's NFT Data API platform becomes invaluable.

1. **Real-Time Data Access**: BlockSpan's API provides real-time access to token prices, ownership data, and exchange information. This is crucial for developers building Web3 games who need to integrate live, accurate data into their platforms.

2. **Simplifying Blockchain Integration**: The complexity of blockchain technology can be daunting. BlockSpan's API simplifies this by handling the heavy lifting, allowing developers to focus on creating engaging gaming experiences.

3. **Comprehensive Metadata Access**: For NFT-based games, access to comprehensive metadata, including images, is essential. BlockSpan's API facilitates this, ensuring that games are not only functional but also rich in content.

4. **Supporting Diverse Gaming Genres**: With investments flowing into various gaming genres, BlockSpan's API can support a range of Web3 gaming applications, from sports and MMOs to RPGs and action games.

### **Conclusion: A New Era for Digital Gaming**

The rise of Web3 gaming in the Asia Pacific region marks a new era in digital entertainment. For BlockSpan's customers, this trend offers exciting possibilities. By leveraging BlockSpan's NFT Data API, developers and investors can tap into this growing market with the tools and data they need to succeed. As the landscape continues to evolve, BlockSpan remains committed to providing the resources necessary to navigate this dynamic sector effectively.


medium_dalle-blog-gaming.png

small_dalle-blog-gaming.png

thumbnail_dalle-blog-gaming.png

dalle-blog-gaming.png

The Asia Pacific (APAC) region is leading a significant shift in the world of Web3 gaming. Home to about 40% of the world's game developers, APAC has become the epicenter of this digital revolution. The United States and South Korea are also key players, but APAC's dominance is clear with its significant development and funding trends.

The Surge of Web3 Gaming in Asia Pacific and Its Implications for BlockSpan's Customers

### HOW TO USE THE BLOCKSPAN API TO FIND COLLECTION SALES DATA

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 collection sales tracking tool will provide users with an overview of recent sales data, including total transfrers and exchange data. 


### 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 collection-sales-tracker` 
`cd collection-sales-tracker`

This will create a new React application named `collection-sales-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 `salesTracker.js` and include the following code:

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

const SalesTracker = () => {
  const [contractAddress, setcontractAddress] = useState('');
  const [blockchain, setBlockchain] = useState('eth-main');
  const [collection, setCollection] = useState(null)
  const [error, setError] = useState(false)
  const [loading, setLoading] = useState(false)
  const [hasClicked, setHasClicked] = useState(false)

  const periods = ['one_day', 'seven_day', 'thirty_day', 'total']

  const getCollection = async () => {
    setHasClicked(true)
    setCollection(null)
    setLoading(true)
    const url = `https://api.blockspan.com/v1/collections/contract/${contractAddress}?chain=${blockchain}`;
    const headers = {
      accept: 'application/json',
      'X-API-KEY': 'YOUR_BLOCKSPAN_API_KEY',
    };

    try {
      const response = await axios.get(url, { headers });
      setCollection(response)
      console.log('response:', response)
      setError(null);
      setLoading(false)
    } catch (error) {
      console.error(error);
      error.response.status === 401 ?
        setError('Invalid blockspan API key!') :
        setError('Error: verify chain and contract address are valid');
      setCollection(null);
      setLoading(false)
    }
  };

  const checkData = (data) => {
    if (data === null || isNaN(data)) {
        return 'N/A'
    } 
    return data
  }

  return (
    <div>
      <h1 className="title">Collection Sales Tracker</h1>
      <p className="message">
          Select a blockchain and input a contract address to see collection sales data.
      </p>
      <div className="inputContainer">
        <select name="blockchain"
          value={blockchain}
          onChange={e => setBlockchain(e.target.value)}>
          <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="Contract Address" onChange={e => setcontractAddress(e.target.value)}/>
        <button onClick={getCollection}>Get Collection</button>
      </div>
      {loading && (
        <p className='message'>Loading...</p>
      )}
      {error && !loading && (
        <p className='errorMessage'>{error}</p>
      )}
      {collection && collection.data && collection.data.exchange_data && collection.data.exchange_data[0].stats ? (
        <p style={{ fontWeight: 'bold', textAlign: 'center' }}>
          Floor Price: {checkData(collection.data.exchange_data[0].stats.floor_price)} | 
          Market Cap: {checkData(parseFloat(collection.data.exchange_data[0].stats.market_cap).toFixed(3))}
        </p>
      ) : !error && hasClicked && !loading && (
        <p className='message'>No sales data found for this collection!</p>
      )}
      {collection && collection.data && collection.data.exchange_data && (
        <div>
          <table className='tableContainer'>
            <thead>
              <tr style={{ backgroundColor: '#f2f2f2' }}>
                <th>Time Period</th>
                <th>Average Price</th>
                <th>Sales</th>
                <th>Volume</th>
              </tr>
            </thead>
            <tbody>
              {periods.map((period) => ( 
                <tr style={{ backgroundColor: '#f2f2f2' }} key={period}>
                  <td>{period}</td>
                  <td>{checkData(parseFloat(collection.data.exchange_data[0].stats[`${period}_average_price`]).toFixed(5))}</td>
                  <td>{checkData(collection.data.exchange_data[0].stats[`${period}_sales`])}</td>
                  <td>{checkData(parseFloat(collection.data.exchange_data[0].stats[`${period}_volume`]).toFixed(5))}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}

export default SalesTracker;

```

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;
}

.successMessage {
  text-align: center;
  color: green;
  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: 500px;
  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: center;
}

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

.tableContainer {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px; 
}

```


### STEP 5: INTEGRATING COMPONENTS IN THE APP

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

Open App.js and modify it as follows:

```
import React from 'react';
import './App.css';
import SalesTracker from './salesTracker';

function App() {
  return (
    <div className="App">
      <SalesTracker/>
    </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 contract address
- A get collection button

Input the chain and contract address for the collection you want data for, and click the get collection button. You should then see a bold line with general collection information, and a grey table with exchange data if it exists. 

### CONCLUSION

Congratulations! You've just built a simple yet powerful collection sales tracker using the Blockspan API and React.js. As you've seen, the Blockspan API is intuitive to use and provides detailed and accurate information, making it a perfect choice for this kind of application. This tutorial is just a starting point - there are many ways you can expand and improve your tool. For example, you could add more error checking, improve the UI, or display additional data.

All of the code is available for your convenience at: [https://github.com/BlockSpan/tutorials-collection-sales-tracker
](https://github.com/BlockSpan/tutorials-collection-sales-tracker
)
As the world of NFTs continues to grow and evolve, tools like this will become increasingly important. Whether you're an NFT enthusiast, a developer, or a startup, understanding NFTs is a valuable skill. We hope you found this tutorial helpful.


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 collection sales tracking tool will provide users with an overview of recent sales data, including total transfrers and exchange data.

Tutorial: Collection Sales Tracker

The evolution of social networking is taking a significant leap forward with the introduction of Lens Protocol V2. This upgrade is not just a step up in features but a giant leap for the decentralized social networking space, further enriched by the integration of BlockSpan's NFT data capabilities.

**What is Lens Protocol?**

Lens Protocol is a decentralized social graph that lays the foundation for a new era of social media platforms. Launched on Polygon in May 2022, it is designed to record social interactions as NFTs and on-chain data, providing a composable and decentralized framework for developers.

**The Revolutionary V2 Upgrade**

The V2 upgrade of Lens Protocol introduces groundbreaking features like Collective Value Share, Open Actions, and integration with the ERC-6551 standard. These enhancements are set to redefine user experience and expand the protocol's capabilities.

**Open Actions and ERC-6551 Integration**

One of the most notable features of V2 is "Open Actions," which allows users to execute actions from external smart contracts directly within the Lens platform. This means users can mint NFTs or perform other contract actions without leaving the Lens environment. With oracle support, these actions can even extend across different blockchains.

The integration with the ERC-6551 standard allows for a more nuanced control of value distribution. Instead of directing value to the owner's address, it can now be attributed to profiles, adding a new layer of functionality and user experience.

**Enhanced Security with Profile Manager**

Security is a paramount concern in any online interaction, and Lens Protocol V2 addresses this with the Profile Manager feature. It enables users to delegate social actions to different wallets, including hardware wallets or smart contracts, without compromising on security. This feature also supports gasless and signless transactions and is compatible with the Account Abstraction standard.

**User Control and Trust & Safety**

Lens Protocol V2 enhances user control by allowing users to block actions on their profiles. This on-chain profile blocking mechanism is a significant step towards improving Trust & Safety across Lens clients. Additionally, the Profile Guardian feature introduces a 7-day cooldown period for profile transfers to reduce phishing attacks.

**BlockSpan's Role in Enhancing Lens Protocol**

BlockSpan's NFT data can play a pivotal role in enriching the Lens Protocol ecosystem. By providing comprehensive NFT analytics, BlockSpan can help users understand the value and rarity of NFTs minted within the Lens environment. This data can be crucial for creators and collectors to gauge the market sentiment and make informed decisions.

**Potential Use Cases with BlockSpan Integration**

With BlockSpan's NFT data integration, virtual real estate in the metaverse could be analyzed for trends and valuation, creating a more interactive and personalized user experience. Educational platforms could leverage the protocol to issue verifiable credentials, with BlockSpan's data providing additional layers of trust and validation. E-commerce platforms could integrate social features directly into their platforms, with insights into NFT ownership distribution aiding in targeted marketing and customer engagement strategies.

**Conclusion**

Lens Protocol V2 is not just an upgrade; it's a vision for the future of social networking. It empowers users and developers with more control, security, and flexibility, paving the way for innovative applications that could reshape the social media landscape. With the added dimension of BlockSpan's NFT data, the possibilities for creators, collectors, and users are even more expansive.

For a firsthand experience of our dashboard and to explore these features in detail, visit [BlockSpan's NFT Analytics Dashboard](https://blockspan.com/nft/).


medium_shutterstock_2128577546social_850.jpg

small_shutterstock_2128577546social_850.jpg

thumbnail_shutterstock_2128577546social_850.jpg

shutterstock_2128577546social_850.jpg

The evolution of social networking is taking a significant leap forward with the introduction of Lens Protocol V2. This upgrade is not just a step up in features but a giant leap for the decentralized social networking space, further enriched by the integration of BlockSpan's NFT data capabilities.

Lens Protocol V2: A New Vision for Web3 Social Networking, Enriched by Token Bound Accounts

**PayPal's NFT Marketplace: A New Frontier in Digital Asset Trading**

PayPal, a global leader in online payments, has recently made a significant move in the NFT space. The company has filed a patent application for a unique NFT purchase and transfer system, signaling its intent to delve deeper into the world of digital assets.

The proposed system is not just another marketplace. It's designed to handle a variety of advanced features, including fractionalization, DAOs (Decentralized Autonomous Organizations), and royalties through a third-party provider. This approach showcases the potential of NFTs beyond mere collectibles, encompassing a broader range of digital assets and real-world items.

![PayPal's NFT Marketplace Schematic](https://blockspan-cms-production.s3.us-east-2.amazonaws.com/paypal_nft_patent_2681818f69.png)

*Image Source: USPTO*

Here's a closer look at some of the innovative aspects of PayPal's proposed system:

1. **On- and Off-Chain Transactions**: The system allows for both on-chain and off-chain transactions. Off-chain transactions are particularly intriguing as they can be executed without broadcasting to the blockchain, eliminating the need for gas fees.

2. **Tokenization**: PayPal envisions leveraging NFTs for tokenizing a wide range of assets, from digital art to legal documents and event tickets. This opens up a world of possibilities for digital ownership and trade.

3. **Fractionalized Purchases**: The system can accommodate fractionalized purchases, allowing multiple users to own a portion of an NFT. This could democratize access to high-value assets.

4. **DAO Integration**: A DAO associated with the service provider could promote NFT liquidity, offering a more dynamic and decentralized trading platform.


**Innovative Use Cases and BlockSpan Data Insights**:

- **Real Estate Tokenization**: Imagine tokenizing real estate properties, allowing users to buy fractional ownership of prime properties. BlockSpan's data could provide insights into the popularity and trading volume of such NFTs, giving potential investors a clearer picture of the market dynamics.

- **Event Ticketing**: NFTs could revolutionize event ticketing by ensuring authenticity and preventing counterfeits. With BlockSpan's analytics, event organizers could gauge the demand for specific events based on NFT sales and transfers.

- **Legal Document Verification**: Legal documents could be tokenized to ensure their authenticity and trace their origin. BlockSpan's data could track the transfer and ownership history of such NFTs, ensuring transparency and trust.

In conclusion, PayPal's move into the NFT space is a testament to the growing significance of digital assets. As the landscape continues to evolve, innovative use cases will emerge, reshaping how we perceive value and ownership in the digital age.

medium_shutterstock_2165348243_paypal_850.jpg

small_shutterstock_2165348243_paypal_850.jpg

thumbnail_shutterstock_2165348243_paypal_850.jpg

shutterstock_2165348243_paypal_850.jpg


PayPal, a global leader in online payments, has recently made a significant move in the NFT space. The company has filed a patent application for a unique NFT purchase and transfer system, signaling its intent to delve deeper into the world of digital assets.

The proposed system is not just another marketplace. It's designed to handle a variety of advanced features, including fractionalization, DAOs (Decentralized Autonomous Organizations), and royalties through a third-party provider. This approach showcases the potential of NFTs beyond mere collectibles, encompassing a broader range of digital assets and real-world items.

Featured blog and news articles

Jon

Nikhil

Nikhil

Jon

Nikhil

Latest posts

Jon

Nikhil

Jon

Nikhil

Nikhil

Jon

Jon

Nikhil

Nikhil

Nikhil

Nikhil

Nikhil

Featured blog and news articles

Jon

Nikhil

Nikhil

Jon

Nikhil

Latest posts

Jon

Nikhil

Jon

Nikhil

Nikhil

Jon

Jon

Nikhil

Nikhil

Nikhil

Nikhil

Nikhil

Subscribe to our newsletter