Merge branch '4darsh-Dev:main' into add/about-page

frontend/src/components/NFTCard.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { ethers } from 'ethers'
 
-const NFTCard = ({ nft, onBuy }) => {
+const NFTCard = ({ nft, onBuy, imageUrl, name, description }) => {
     const truncateAddress = (address) =>
         `${address.slice(0, 6)}...${address.slice(-4)}`
 
@@ -13,6 +13,19 @@ const NFTCard = ({ nft, onBuy }) => {
         <div className="bg-white rounded-lg shadow-md overflow-hidden">
             <div className="p-4">
                 <h2 className="text-xl font-semibold mb-2">{`NFT #${nft.tokenId}`}</h2>
+                {imageUrl && (
+                    <img
+                        src={imageUrl}
+                        alt={name}
+                        className="w-full h-64 object-cover mb-4"
+                    />
+                )}
+                {/* <h2 className="text-xl font-bold mb-2">
+                    {name || `NFT #${nft.tokenId}`}
+                </h2> */}
+                <p className="mb-2">
+                    {description || 'No description available'}
+                </p>
                 <p className="text-gray-600 mb-2">
                     <span className="font-semibold">Contract:</span>{' '}
                     <span

frontend/src/pages/ExplorePage.jsx

@@ -4,6 +4,8 @@ import NFTCard from '../components/NFTCard'
 import { connectWallet } from '../utils/ethereum'
 import { ethers } from 'ethers'
 
+const VITE_PINATA_GATEWAY = import.meta.env.VITE_PINATA_GATEWAY
+
 const ExplorePage = () => {
     const [nfts, setNfts] = useState([])
     const [loading, setLoading] = useState(true)
@@ -31,14 +33,13 @@ const ExplorePage = () => {
                 setLoading(true)
                 setError(null)
                 const items = await fetchMarketItems(wallet)
-                console.log('Fetched items:', items)
-
+                //dbg
+                // console.log('Fetched items:', items)
                 if (!Array.isArray(items)) {
                     throw new Error(
                         'Fetched items are not in the expected format'
                     )
                 }
-
                 const formattedItems = items.map((item) => ({
                     itemId: item[0].toString(),
                     nftContract: item[1],
@@ -47,9 +48,10 @@ const ExplorePage = () => {
                     owner: item[4],
                     price: ethers.formatEther(item[5]),
                     sold: item[6],
+                    metadata: item.metadata,
                 }))
-
-                console.log('Formatted items:', formattedItems)
+                //dbg
+                // console.log('Formatted items:', formattedItems)
                 setNfts(formattedItems)
             } catch (error) {
                 console.error('Error loading NFTs:', error)
@@ -101,6 +103,12 @@ const ExplorePage = () => {
         )
     }
 
+    // Debugging: Log the metadata for each NFT
+    // console.log('nft value', nfts)
+    // for (let i = 0; i < nfts.length; i++) {
+    //     console.log('nft value', nfts[i].metadata.name)
+    // }
+
     return (
         <div className="container mx-auto px-4 py-8">
             <h1 className="text-3xl font-bold mb-8">Explore NFTs</h1>
@@ -110,9 +118,25 @@ const ExplorePage = () => {
                 </p>
             ) : (
                 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                    {nfts.map((nft) => (
-                        <NFTCard key={nft.itemId} nft={nft} onBuy={handleBuy} />
-                    ))}
+                    {nfts.map((nft) => {
+                        const metadata = nft.metadata // Parse the metadata string
+
+                        return (
+                            <NFTCard
+                                key={nft.itemId}
+                                nft={nft}
+                                onBuy={handleBuy}
+                                imageUrl={
+                                    'https://' +
+                                    VITE_PINATA_GATEWAY +
+                                    '/ipfs/' +
+                                    metadata.image
+                                }
+                                name={metadata.name} // Access the parsed name field
+                                description={metadata.description} // Access the parsed description field
+                            />
+                        )
+                    })}
                 </div>
             )}
         </div>

frontend/src/utils/ethereum.js

@@ -14,6 +14,7 @@ const marketplaceAddress = import.meta.env.VITE_MARKET_ADDRESS
 // const API_URL = "http://localhost:3000"
 
 const API_URL = import.meta.env.VITE_API_URL
+const VITE_PINATA_GATEWAY = import.meta.env.VITE_PINATA_GATEWAY
 
 export const connectWallet = async () => {
     if (window.ethereum) {
@@ -107,10 +108,7 @@ export const createNFT = async (signer, name, description, price, file) => {
         )
         const mintReceipt = await mintTx.wait()
 
-        // Printing the mint receipt for debugging purposes
-        // console.log('Mint Receipt:', JSON.stringify(mintReceipt, null, 2));
 
-        // Extract tokenId using a more flexible approach
         let tokenId
         if (mintReceipt.events) {
             const transferEvent = mintReceipt.events.find(
@@ -166,11 +164,49 @@ export const createNFT = async (signer, name, description, price, file) => {
     }
 }
 
+
+const fetchMetadata = async (tokenURI) => {
+    try {
+        //dbg
+        // console.log('Fetching metadata from:', tokenURI)
+        let tokenLink = ('https://' + VITE_PINATA_GATEWAY + '/ipfs/' + tokenURI)
+        const response = await fetch(tokenLink)
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`)
+        }
+        const metadata = await response.json()
+        //dbg
+        // console.log('Fetched metadata:', metadata)
+        return metadata
+    } catch (error) {
+        console.error('Error fetching metadata:', error)
+        return null
+    }
+}
+
 export const fetchMarketItems = async (signer) => {
     const marketplaceContract = getMarketplaceContract(signer)
-    return await marketplaceContract.fetchMarketItems()
+    const items = await marketplaceContract.fetchMarketItems()
+
+    // Fetch token URIs for each item
+    const itemsWithMetadata = await Promise.all(items.map(async (item) => {
+        const nftContract = getNFTContract(signer)
+        try {
+            const tokenURI = await nftContract.tokenURI(item.tokenId)
+            //dbg
+            // console.log(`Token URI for item ${item.tokenId}:`, tokenURI)
+            const metadata = await fetchMetadata(tokenURI)
+            return { ...item, metadata }
+        } catch (error) {
+            console.error(`Error fetching tokenURI for item ${item.tokenId}:`, error)
+            return { ...item, metadata: null }
+        }
+    }))
+
+    return itemsWithMetadata
 }
 
+
 export const fetchMyNFTs = async (signer) => {
     const marketplaceContract = getMarketplaceContract(signer)
     return await marketplaceContract.fetchMyNFTs()