NFT Card Component

The NFT Card component displays an NFT of NFTs fetched from the Alchemy NFT API through the Alchemy SDK. It allows developers to pass an address to a custom API and display the NFTs owned by an address.

Implementation:

1. Create the component file:
   In your create-web3-dapp frontend>components folder, create a new file named nftsGallery.jsx and paste inside the code contained in the component preview component's code tab.

2. Implement the pingJSONToIPFS API:

In your create-web3-dapp frontend>pages>api folder (consult the folder structure for an overview the your cw3d project's folder structure), create a new file named getNFTsForOwner.js and paste inside the code contained in the component preview component's API tab.

3. Add the styles
   In your create-web3-dapp frontend>styles folder, create a new file named NftsGallery.module.css and paste it inside the code contained in the [component preview component's styles tab (https://createweb3dapp.com/nfts#NFTsGallery).

4. Include the component
   To import the NFTs Gallery in your dapp, navigate to the page, in your frontend>pages folder, where you want to implement the NFTs Gallery, and import it:

import NFTsGallery from "../components/nftsGallery"

and add its tag to the return value of your NextJS page function:

import NFTsGallery from "../components/nftsGallery"

export default function Home() {
  return (
    <>
      <NFTsGallery/>
    </>
  );
}

7. Start your application:

Congratulations! Now cd in your frontend folder, and run the following command in your terminal to start your cw3d application:

 npm run dev 

And Enjoy your newly imported NFTs Gallery!

Component explanation:

This React component represents a gallery of NFTs (non-fungible tokens). The NFTGallery component has a NFTs prop that is not used in this code. It also imports useEffect and useState from React, as well as a custom hook useAccount from wagmi.

The component uses the useState hook to create two state variables: nfts and isLoading. nfts holds the data for the NFTs that will be displayed in the gallery, while isLoading is used to keep track of whether the NFTs are currently being fetched from the API.

The useEffect hook is used to make an API call to fetch the NFTs. It will only run once when the component is first rendered because of the empty dependency array. It checks if the user's wallet is connected with isConnected. If it is, the component makes a POST request to the /api/getNFTsForOwner API endpoint, sending along the address of the user's wallet and a pageSize of 32. The API will return a list of NFTs that belong to the user, which is then stored in the nfts state variable. If the API call fails for some reason, the error is logged to the console.

When the component is first loaded and the API call is in progress, the component will show the text "Loading...". If the user's wallet is not connected, the component will show the text "Connect your wallet to get started". If the API call is complete and there are NFTs in the nfts state variable, the component maps over the NFTs and displays a NFTCard component for each one. If there are no NFTs, the component displays the text "No NFTs found - make sure your wallet is connected".

The NFTCard component is a functional component that takes an nft prop and displays information about a single NFT. It displays the NFT's title, contract address, symbol, token ID, and a shortened version of the NFT's description. It also has a button with the text "Let's go". The styling of the component is specified in a CSS module imported as styles.