### Introduction

We're excited to announce significant updates to our Cached Media handling capabilities at BlockSpan. These enhancements will improve how your applications interact with NFT images, videos, and other media types, ensuring faster load times and a better user experience.

### Extended Media Type Support

We now cache and support an expanded list of media types through our CDN. Here’s a summary of the supported formats:

- **Images**: AVIF, GIF, HEIC, JPEG, PNG, SVG, TIFF, WebP
- **Videos**: 3GPP, MP4, QuickTime, WebM, MKV
- **Audio**: AIFF, MPEG, WAV, M4A
- **Others**: JSON, PDF, GLTF models, text/plain, and more.

This broad support ensures your NFT media is reliably available, no matter the format.

### Automatic Resizing for Images

For images, we automatically provide URLs for multiple scaled versions to fit various dimensions:

- **Tiny**: 100px
- **Small**: 250px
- **Medium**: 500px
- **Large**: 1000px
- **Original**: Original size

You can also customize dimensions by adjusting the URL parameters without additional API calls. This feature optimizes image display across different devices and screen sizes, enhancing visual consistency.

```json
"cached_images": {
    "tiny_100_100": "https://cdn.blockspan.com/53616....100_100.jpg",
    "small_250_250": "https://cdn.blockspan.com/53616....250_250.jpg",
    "medium_500_500": "https://cdn.blockspan.com/53616....500_500.jpg",
    "large_1000_1000": "https://cdn.blockspan.com/53616....1000_1000.jpg",
    "original": "https://cdn.blockspan.com/53616....original.jpg",
    "content_type": "image/jpeg"
}
```

### Improved Video Handling

For MP4 videos, the **cached_videos** field now includes direct links to cached MP4 files, and **cached_images** contains URLs to scaled screenshots, simplifying the management of video thumbnails.

```json
"cached_videos": {
    "original": "https://cdn.blockspan.com/53616....original.mp4",
    "content_type": "video/mp4"
},
"cached_images": {
    "tiny_100_100": "https://cdn.blockspan.com/53616....screenshot_100_100.jpg",
    "small_250_250": "https://cdn.blockspan.com/53616....screenshot_250_250.jpg",
    "medium_500_500": "https://cdn.blockspan.com/53616....screenshot_500_500.jpg",
    "large_1000_1000": "https://cdn.blockspan.com/53616....screenshot_1000_1000.jpg",
    "original": "https://cdn.blockspan.com/53616....screenshot.jpg",
    "content_type": "video/mp4"
}
```

### Handling Audio and Other Assets

For audio files and other media formats, the **cached_other_assets** field provides detailed JSON objects for each cached file, improving the handling and display of diverse media types.

```json
"cached_other_assets": [
    {
        "original": "https://cdn.blockspan.com/53616....original.mov",
        "content_type": "video/quicktime"
    },
    {
        "original": "https://cdn.blockspan.com/53616....original.wav",
        "content_type": "audio/wav"
    },
    {
        "original": "https://cdn.blockspan.com/53616....original.html",
        "content_type": "text/html"
    }
]
```

### Optimized Media Delivery

To get an optimized version of the media, append **_optimized** to the URL. This version is up to 90% smaller, ideal for large PNG images.

```url
https://cdn.blockspan.com/53616....500_500_optimized.png
```

### Use Cases and Examples

#### NFT Art Galleries

For developers creating NFT art galleries, using BlockSpan’s enhanced media handling ensures that images load quickly and at optimal resolutions for different devices. For example, displaying high-resolution artwork without sacrificing load times.

#### NFT Marketplaces

NFT marketplaces can benefit from the automatic resizing feature, ensuring that thumbnails, previews, and full-size images are all optimized for performance and user experience. The video handling capabilities allow for smooth integration of video previews.

#### Digital Collectibles

Developers of digital collectible platforms can use the cached media handling to provide users with fast and reliable access to various media types, enhancing the overall interaction with digital collectibles.

### Conclusion

These enhancements are designed to streamline how you handle and display NFT-related media within your applications, ensuring faster load times and a better overall user experience. For more detailed information and implementation guides, please check out the updated documentation on our [developer portal](https://docs.blockspan.com/reference/cached-images). As always, your feedback is invaluable, so let us know how these changes work for you!

Happy coding! 🚀

**About BlockSpan:**
Founded by leading enterprise data platform builders in 2022, BlockSpan is a Web3 innovator focused on delivering easy-to-implement API solutions for the blockchain. With the release of the BlockSpan NFT API platform, software companies building on the blockchain have instant access to highly accurate real-time and historical NFT data (and cached media), empowering them to build scalable, cost-efficient apps in just days.

For more information about BlockSpan and its strategic direction, please visit BlockSpan's website at https://blockspan.com/.


medium_Blockspan_linkedin_cover.PNG

small_Blockspan_linkedin_cover.PNG

thumbnail_Blockspan_linkedin_cover.PNG

Blockspan_linkedin_cover.PNG

We're excited to announce significant updates to our Cached Media handling capabilities at BlockSpan. These enhancements will improve how your applications interact with NFT images, videos, and other media types, ensuring faster load times and a better user experience.

Enhancing BlockSpan's NFT Media Handling Capabilities: A Developer's Guide

### Introduction

Non-fungible tokens (NFTs) have transcended their origins in the art and digital collectibles space to address a pressing issue in the retail world: counterfeiting. This pervasive problem affects various industries, from luxury fashion and electronics to pharmaceuticals, undermining brand integrity and causing significant financial losses. NFTs, leveraging blockchain technology, offer a novel approach to ensure product authenticity and enhance consumer trust.

### The Challenge of Counterfeiting

Counterfeiting is a global issue that costs the economy billions of dollars each year. According to the Global Brand Counterfeiting Report 2018, the amount of total counterfeiting globally reached $1.2 trillion in 2017 and was projected to reach $1.82 trillion by 2020. The luxury goods sector alone suffers immense losses, with counterfeit footwear, handbags, and accessories flooding the market. These knock-offs not only result in direct revenue losses but also damage brand reputation and consumer trust.

### NFTs as a Tool Against Counterfeiting

Non-fungible tokens, unique digital assets verified on a blockchain, present a solution to the counterfeiting dilemma. By assigning a unique digital identifier to each physical product, NFTs offer a way to verify authenticity securely. This system was pioneered by companies like Nike with their "CryptoKicks" patent, where each pair of sneakers is associated with a unique NFT. This NFT ensures that the footwear’s provenance and authenticity can be verified at any point in its lifecycle.

### Benefits of Using NFTs for Anti-Counterfeiting

#### Traceability

Each NFT is immutable and traceable on the blockchain, providing a transparent and unalterable record of the product’s history. This traceability ensures that consumers and retailers can verify the authenticity of products at any point during their lifecycle.

#### Security

Blockchain’s inherent security features, including its decentralized nature and cryptographic protection, prevent the tampering and duplication of NFTs. This makes it nearly impossible for counterfeiters to replicate or falsify the digital certificates of authenticity represented by NFTs.

#### Consumer Engagement

With authenticity assured by NFTs, consumer trust in brands can increase. Furthermore, NFTs can include additional content such as exclusive media or experiences, enhancing customer engagement and loyalty.

### Application in Other Industries

#### Luxury Goods

Luxury brands can employ NFTs to combat the rampant counterfeiting in their sector. For instance, a luxury handbag manufacturer could issue an NFT with each bag sold, ensuring the authenticity of their products. The high-profile case of Hermès against the "MetaBirkin" NFT collection underscores the growing intersection of digital assets and traditional luxury branding.

#### Pharmaceuticals

In the pharmaceutical industry, where counterfeit drugs pose a significant risk to health, NFTs can track drug provenance from manufacture to delivery, ensuring that medications are genuine and safe.

#### Electronics

For electronics manufacturers, NFTs can help assure consumers of the authenticity of their devices, which is increasingly important as counterfeit electronic products flood the market.

### Challenges and Considerations

While the benefits are clear, several challenges remain in the widespread adoption of NFTs for anti-counterfeiting:

#### Technological Hurdles

Implementing a blockchain infrastructure robust enough to support NFTs requires significant investment in technology and training.

#### Legal and Regulatory Issues

The legal landscape surrounding digital ownership and intellectual property rights in relation to NFTs is still evolving. Companies must navigate these complexities to ensure compliance.

#### Market Adoption

For NFTs to be effective in combating counterfeiting, widespread adoption is necessary across industries, requiring collaboration between manufacturers, retailers, and consumers.

### The Future of NFTs in Anti-Counterfeiting

As technology advances, the use of NFTs in combating counterfeiting is expected to grow. Innovations such as enhanced cryptographic security, integration with IoT devices, and better user interfaces are likely to make NFTs more accessible and effective as anti-counterfeiting tools.

### Conclusion

NFTs offer a promising solution to the age-old problem of counterfeiting, providing security, traceability, and enhanced consumer engagement. As industries continue to grapple with the challenges of counterfeit products, NFTs stand out as a technological innovation that not only protects but also adds value, heralding a new era of digital authenticity.

This exploration of NFTs in the fight against counterfeiting reflects a broader shift towards integrating cutting-edge technology to protect and enhance consumer products across the globe. As we move forward, the role of NFTs in retail and beyond will likely become a cornerstone of how businesses safeguard their products and brand integrity.


medium_images_counterfeit_purses_850.jpg

small_images_counterfeit_purses_850.jpg

thumbnail_images_counterfeit_purses_850.jpg

images_counterfeit_purses_850.jpg

Non-fungible tokens (NFTs) have transcended their origins in the art and digital collectibles space to address a pressing issue in the retail world: counterfeiting. This pervasive problem affects various industries, from luxury fashion and electronics to pharmaceuticals, undermining brand integrity and causing significant financial losses. NFTs, leveraging blockchain technology, offer a novel approach to ensure product authenticity and enhance consumer trust.


NFTs and Anti-Counterfeiting Measures: Reinventing Authenticity in the Retail Sector

#### **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

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

### **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

### 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

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.

Featured blog and news articles

Nikhil

Jon

Jon

Nikhil

Nikhil

Latest posts

Nikhil

Jon

Jon

Nikhil

Jon

Nikhil

Nikhil

Jon

Jon

Nikhil

Nikhil

Nikhil

Featured blog and news articles

Nikhil

Jon

Jon

Nikhil

Nikhil

Latest posts

Nikhil

Jon

Jon

Nikhil

Jon

Nikhil

Nikhil

Jon

Jon

Nikhil

Nikhil

Nikhil

Subscribe to our newsletter