Lesson 15: NftMarketplace website deployment (fleek & heroku)

[BTT21000]

Hi All,
I have just finished the chapter 15 (nextjs-nft-marketplace-thegraph) and everything seems to be working when I run the front end on my localhost:3000. I can see the NFTs listed and I can sell/list NFTs using The Goerli testnet.
For completeness I have tried to deploy the website on IPFS (using fleek as shown in the fcc course) and also using heroku as an alternative solution.
However I note that in both cases, the NFTs listed are not being displayed on the Home page whereas there should be about a dozen of them already listed on the Goerli testnet. All I can see on the Home page is the "Loading.." text (see image below).
Here are the deployed sites links fyi:
fleek: https://weathered-forest-2157.on.fleek.co/
heroku: https://nftmarketplace1.herokuapp.com/
Could you please advise why the NFTs listed are not shown?
FYI my repo is there: https://github.com/BTT21000/nextjs-nft-marketplace-thegraph-Fcc

[MUHAMMAD-AMMAR-TANWEER]

@BTT21000 I got the same problem on my side but I resolve it. Let me explain
First replace your next.config.js

const nextConfig = {
    reactStrictMode: false,
    swcMinify: true,
    images: {
        loader: "akamai",
        path: "",
        domains: ["cdn.jsdelivr.net"],
    },
}

module.exports = nextConfig 

Then install a simple package antd using yarn

yarn add antd

Once this is install Replace your NFTBox.js with below code

import { useState, useEffect } from "react"
import { useWeb3Contract, useMoralis } from "react-moralis"
import nftMarketplaceAbi from "../constants/NftMarketplace.json"
import nftAbi from "../constants/BasicNft.json"
import Image from "next/image"
import { Card, useNotification } from "web3uikit"
import { ethers } from "ethers"
import UpdateListingModal from "./UpdateListingModal"
import { Skeleton } from "antd"

const truncateStr = (fullStr, strLen) => {
    if (fullStr.length <= strLen) return fullStr

    const separator = "..."
    const seperatorLength = separator.length
    const charsToShow = strLen - seperatorLength
    const frontChars = Math.ceil(charsToShow / 2)
    const backChars = Math.floor(charsToShow / 2)
    return (
        fullStr.substring(0, frontChars) + separator + fullStr.substring(fullStr.length - backChars)
    )
}

export default function NFTBox({ price, nftAddress, tokenId, marketplaceAddress, seller }) {
    const { isWeb3Enabled, account } = useMoralis()
    const [imageURI, setImageURI] = useState("")
    const [tokenName, setTokenName] = useState("")
    const [tokenDescription, setTokenDescription] = useState("")
    const [showModal, setShowModal] = useState(false)
    const hideModal = () => setShowModal(false)
    const [isURILoaded, setIsURILoaded] = useState(false)
    const dispatch = useNotification()

    const { runContractFunction: getTokenURI } = useWeb3Contract({
        abi: nftAbi,
        contractAddress: nftAddress,
        functionName: "tokenURI",
        params: {
            tokenId: tokenId,
        },
    })

    const { runContractFunction: buyItem } = useWeb3Contract({
        abi: nftMarketplaceAbi,
        contractAddress: marketplaceAddress,
        functionName: "buyItem",
        msgValue: price,
        params: {
            nftAddress: nftAddress,
            tokenId: tokenId,
        },
    })

    async function updateUI() {
        const tokenURI = await getTokenURI()
        console.log(`The TokenURI is ${tokenURI}`)
        // We are going to cheat a little here...
        if (tokenURI) {
            // IPFS Gateway: A server that will return IPFS files from a "normal" URL.
            const requestURL = tokenURI.replace("ipfs://", "https://ipfs.io/ipfs/")
            const tokenURIResponse = await (await fetch(requestURL)).json()
            const imageURI = tokenURIResponse.image
            const imageURIURL = imageURI.replace("ipfs://", "https://ipfs.io/ipfs/")
            setImageURI(imageURIURL)
            setTokenName(tokenURIResponse.name)
            setTokenDescription(tokenURIResponse.description)
            setIsURILoaded(true)
            // We could render the Image on our sever, and just call our sever.
            // For testnets & mainnet -> use moralis server hooks
            // Have the world adopt IPFS
            // Build our own IPFS gateway
        }
        // get the tokenURI
        // using the image tag from the tokenURI, get the image
    }

    useEffect(() => {
        if (isWeb3Enabled) {
            updateUI()
        }
    }, [isWeb3Enabled])

    const isOwnedByUser = seller === account || seller === undefined
    const formattedSellerAddress = isOwnedByUser ? "you" : truncateStr(seller || "", 15)

    const handleCardClick = () => {
        isOwnedByUser
            ? setShowModal(true)
            : buyItem({
                  onError: (error) => console.log(error),
                  onSuccess: () => handleBuyItemSuccess(),
              })
    }

    const handleBuyItemSuccess = () => {
        dispatch({
            type: "success",
            message: "Item bought!",
            title: "Item Bought",
            position: "topR",
        })
    }

    return (
        <div>
            <div>
                {imageURI ? (
                    <div>
                        <UpdateListingModal
                            isVisible={showModal}
                            tokenId={tokenId}
                            marketplaceAddress={marketplaceAddress}
                            nftAddress={nftAddress}
                            onClose={hideModal}
                        />
                        <Card
                            title={tokenName}
                            description={tokenDescription}
                            onClick={handleCardClick}
                        >
                            <div className="p-2">
                                <div className="flex flex-col items-end gap-2">
                                    <div>#{tokenId}</div>
                                    <div className="italic text-sm">
                                        Owned by {formattedSellerAddress}
                                    </div>
                                    <div className="image">
                                        {imageURI ? (
                                            <Image
                                                loader={() => imageURI}
                                                src={imageURI}
                                                height="200"
                                                width="200"
                                            />
                                        ) : (
                                            <Skeleton.Image
                                                style={{ width: 300, height: 300 }}
                                                loading={!isURILoaded}
                                                active
                                                className="nft-skeleton"
                                            />
                                        )}
                                    </div>

                                    <div className="font-bold">
                                        {ethers.utils.formatUnits(price, "ether")} ETH
                                    </div>
                                </div>
                            </div>
                        </Card>
                    </div>
                ) : (
                    <div>Loading...</div>
                )}
            </div>
        </div>
    )
}

This way your website get deployed on fleek without error
Webiste: https://solitary-surf-1784.on.fleek.co/
Github: https://github.com/MUHAMMAD-AMMAR-TANWEER/NFT-Marketplace-Frontend-Graph-Fcc

[BTT21000]

@MUHAMMAD-AMMAR-TANWEER thanks for the suggestion.
I've followed these steps but unfortunately the images are still not loading...
fleek: https://weathered-forest-2157.on.fleek.co/
heroku: https://nftmarketplace1.herokuapp.com/
repo: https://github.com/BTT21000/nextjs-nft-marketplace-thegraph-Fcc
Any ideas how to fix it?

[SADFrancis]

Stole the answer from this stackoverflow answer since I had this error deploying my NFTmarketplace to heroku as well.

Within your NFTBox.js code, go to your line where you declare the imageURIURL variable and replace the https://ipfs.io/ipfs/ that was supposed to be replacing the initial ipfs:// prefix to below:

const imageURIURL = imageURI.replace("ipfs://", "https://gateway.ipfscdn.io/ipfs/");