NFT Collection Info Display

The collection info display component displays the general information about an NFT collection, which includes the collection name, description, floor price, total supply and social media handles (if any).

Implementation:

Step 1: Create the Component File

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

Step 2: Implement the getNftContractMetadata API

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

Step 3: Add the Styles

1. In your create-web3-dapp frontend>styles folder, create a new file named NftCollectionInfoDisplay.module.css.
2. Copy the code from the NFT Collection Sales Display Component Preview Component's Styles Tab and paste it inside the NftCollectionInfoDisplay.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 Info 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/nftCollectionInfoDisplay.jsx";

export default function Home() {
  return (
    <>
      <NFTCollectionInfoDisplay collectionAddress={"0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D"} chain={"eth-mainnet"} />
    </>
  );
}

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 Info Display component in your create-web3-dapp project.