NFT Collection Sales Display Component

The NFT Collection Sales Display component displays the latest sales information for a given NFT collection that occurred through OpenSea’s Seaport.

Implementation:

Step 1: Create the Component File

1. In your create-web3-dapp frontend>components folder, create a new file named nftCollectionSalesDisplay.jsx.
2. Copy the code from the NFT Collection Sales Display Component Preview Component's Code Tab and paste it inside the nftCollectionSalesDisplay.jsx file.

Step 2: Implement the getNftCollectionSale API

1. In your create-web3-dapp frontend>pages>api folder, create a new file named getNftCollectionSale.js.
   Copy the code from the NFT Collection Sales Display Component Preview Component's API Tab and paste it inside the getNftCollectionSale.js file.

Step 3: Add the Styles

1. In your create-web3-dapp frontend>styles folder, create a new file named NftCollectionSalesDisplay.module.css.
2. Copy the code from the NFT Collection Sales Display Component Preview Component's Styles Tab and paste it inside the NftCollectionSalesDisplay.module.css file.

Step 4: Include the Component

1. Navigate to the page, in your frontend>pages folder, where you want to implement the NFT Collection Sales Display Component.

2. Import the component by adding the following line of code at the top:

import NftCollectionSalesDisplay from "./components/nftCollectionSalesDisplay.jsx";

3. Add the component to the return statement of your NextJS page function and pass in the props as parameters:

import NftCollectionSalesDisplay from "../components/nftCollectionSalesDisplay.jsx";

export default function Home() {
  return (
    <>
      <NftCollectionSalesDisplay collectionAddress={"vitalik.eth"} chain={"ETH_MAINNET"} limit={50}/>
    </>
  );
}

Step 5: Start Your Application

Open a terminal and navigate to the frontend folder of your create-web3-dapp project.

Run the following command to start your application:

npm run dev

Congratulations! You have successfully implemented the NFT Collection Sales Display component in your create-web3-dapp project.