NFT Marketplace Question

FOMOsapiens · December 26, 2022, 1:31pm

I’ve got the NFT Marketplace boilerplate from the “I Cloned OpenSea” tutorial, up and running on my website.

My issue is occurring on the NFT Marketplace page (NFTTokenIds.jsx). It’s displaying a seemingly random, yet consistent group of tokens from the collection I’m selling, and only some of them are tokens listed for sale.

NFTs that are not already among the random group on the Marketplace page are not displayed, even if they are listed for sale.

I’m curious to know if this is working as intended? Is anyone else encountering this?

alex · May 15, 2022, 9:25pm

Can you post examples of the collection e.g. contract address and results or screenshots of the pages, and which ones are random or listed for sale.

FOMOsapiens · May 16, 2022, 12:55am

Here is the contract address: 0x51790d397e3cC5F418635796e75C8B58EA113f3D

Below are two screen shots showing listed and unlisted NFTs, in random? order on the Marketplace page. The NFTs that are listed show the green Buy Now ribbon, the unlisted NFTs don’t.

Thanks for your time.

alex · May 16, 2022, 1:27am

So how should the NFT Market page be displaying them (or how do you want them displayed)? What do the question mark ones represent?

FOMOsapiens · May 16, 2022, 2:36am

It seems logical to me that the Marketplace would display only NFTs for sale.

If not, it would only make sense for newly listed NFTs to take the place of those not for sale.

If the order of the Marketplace page matched the My Collections page, the app would work more intuitively for end users. This wouldn’t really matter to me if the Marketplace page displayed only NFTs listed for sale.

The question marks are the pre-reveal image, I haven’t resynced metadata for those.

alex · May 16, 2022, 2:56am

By default the boilerplate uses synced data from MarketItemCreated event and only uses the filter of (item) => item.seller === walletAddress || item.owner === walletAddress. So in that way, it’s working as intended.

But looking at that contract you posted and its code which doesn’t have MarketItemCreated, I’m not sure how you have implemented this contract in code to pull the collection’s NFTs. You can post it if you get stuck. But that’s what you need to look at doing, filtering out NFTs which aren’t for sale. The Buy Now has come from somewhere so you should be able to use that.

FOMOsapiens · May 16, 2022, 6:49am

Sorry, I misunderstood. I gave you the contract address for my collection. My apologies for creating confusion.

The Marketplace contract was deployed by Moralis, I presume? The Tutorial doesn’t require a contract deployment for the app to function. I don’t know where to find that address . . .

The Marketplace page was displaying all the same NFTs before any of them were for sale. How did it choose those NFTs, and why do they take precedent over new listings?

I’m trying to understand why it displays anything other than MarketItems on the Marketplace page? It doesn’t make sense to show a bunch of items you can’t buy on a sales page.

FOMOsapiens · May 16, 2022, 5:59pm

I did find the Market Contract looking on the forums, in case it matters?

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.4;

import “github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/utils/Counters.sol”;
import “github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC721/ERC721.sol”;
import “github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/security/ReentrancyGuard.sol”;

contract marketPlaceBoilerPlate is ReentrancyGuard {
using Counters for Counters.Counter;
Counters.Counter private _itemIds;
Counters.Counter private _itemsSold;

 address public owner;
 
 constructor() {
     owner = msg.sender;
 }
 
 struct MarketItem {
     uint itemId;
     address nftContract;
     uint256 tokenId;
     address payable seller;
     address payable owner;
     uint256 price;
     bool sold;
 }
 
 mapping(uint256 => MarketItem) private idToMarketItem;
 
 event MarketItemCreated (
    uint indexed itemId,
    address indexed nftContract,
    uint256 indexed tokenId,
    address seller,
    address owner,
    uint256 price,
    bool sold
 );
 
 event MarketItemSold (
     uint indexed itemId,
     address owner
     );
 


function createMarketItem(
    address nftContract,
    uint256 tokenId,
    uint256 price
    ) public payable nonReentrant {
        require(price > 0, "Price must be greater than 0");
        
        _itemIds.increment();
        uint256 itemId = _itemIds.current();

        idToMarketItem[itemId] =  MarketItem(
            itemId,
            nftContract,
            tokenId,
            payable(msg.sender),
            payable(address(0)),
            price,
            false
        );
        
        IERC721(nftContract).transferFrom(msg.sender, address(this), tokenId);
            
        emit MarketItemCreated(
            itemId,
            nftContract,
            tokenId,
            msg.sender,
            address(0),
            price,
            false
        );
    }

FOMOsapiens · May 17, 2022, 4:26am

@cryptokid
@alex

Here’s another angle on this issue.

My NFT Marketplace page (NFTTokenIds.jsx) is displaying Tokens that are not in my MarketItems table.

Can you think of any reason that might be happening?

Thanks for all the help!

alex · May 17, 2022, 5:07am

You can try deleting the table and resyncing.

Also looking at NFTTokenIds.jsx (must have been looking at the wrong file yesterday), it seems by default all NFTs are displayed, and ones that have a sold status of false get the Buy Now button added. So making it only for sale will probably take a bit of a rewrite in the context of making the page look the same.

FOMOsapiens · May 17, 2022, 11:15pm

If I delete the table, I would need to be able to get all of my NFTs back off the Marketplace first, which would apparently mean buying them from myself? There is no remove, or “end sale” kind of function.

You say “all NFTS are displayed”. I would love to know how it selected the NFTS that are being displayed now, Many of them are not in the MarketItems table.

One aspect that makes this app hard to make sense of, is that it doesn’t replace the NFTs that aren’t for sale, with newly listed NFTs. It just shows the same selection on the Marketplace page.

Apparently I have to list and sell from within the predetermined selection, and now that the Marketplace page and the My Collections page are no longer both sorted in the same order, that is too difficult to be practical.

I would just like to know, if the app is working as intended now, is it possible to limit the Marketplace page to display only the items from the MarketItems table?

(edited for attitude problem)

alex · May 18, 2022, 2:06am

If I delete the table, I would need to be able to get all of my NFTs back off the Marketplace first, which would apparently mean buying them from myself? There is no remove, or “end sale” kind of function.

No you would just need to resync all of the events. The MarketItems table only uses data from MarketItemCreated events. But it looks like this isn’t the issue.

Yes it looks like it pulls all NFTs from the defined collections. And then only uses the MarketItem table to adjust the specific NFTs that pass its filter.

FOMOsapiens · May 18, 2022, 8:33pm

There must be some way to filter out anything not for sale, or sort it by price right?

alex · May 18, 2022, 9:32pm

The component will require a bit of a rewrite in the way it works e.g. only show the MarketItems NFTs. Are you able to put your project on GitHub or share it to build on it? Which one are you looking to do first, not for sale or sorted by price?

FOMOsapiens · May 19, 2022, 12:41am

I’m using the NFT Marketplace boilerplate code from the YouTube Tutorial. My only modification was to change .slice (0, 100), in order to display more tokens.

This is the file that creates the NFT Marketplace page:

github.com

ethereum-boilerplate/ethereum-nft-marketplace-boilerplate/blob/main/src/components/NFTTokenIds.jsx

import React, { useState, useEffect } from "react";
import { getNativeByChain } from "helpers/networks";
import { getCollectionsByChain } from "helpers/collections";
import {
  useMoralis,
  useMoralisQuery,
  useNewMoralisObject,
} from "react-moralis";
import { Card, Image, Tooltip, Modal, Badge, Alert, Spin } from "antd";
import { useNFTTokenIds } from "hooks/useNFTTokenIds";
import {
  FileSearchOutlined,
  RightCircleOutlined,
  ShoppingCartOutlined,
} from "@ant-design/icons";
import { useMoralisDapp } from "providers/MoralisDappProvider/MoralisDappProvider";
import { getExplorer } from "helpers/networks";
import { useWeb3ExecuteFunction } from "react-moralis";
const { Meta } = Card;

This file has been truncated. show original

Removing the Tokens not listed for sale from this page is more important than order to me.

Thank you very much for sacrificing your time to help me.

FOMOsapiens · May 19, 2022, 7:18pm

I don’t know if this is something you would be willing to take on as a paid project? I’ve spent a lot of time messing around with the code, and it is way beyond me.

hivelance · May 21, 2022, 11:49am

Hi @FOMOsapiens,

Creating your own custom NFT marketplace involves a lot of layers like backend databases, blockchain platforms, storage platforms, NFT standards and algorithms and Front-end frameworks. it may seems easy but it’s not. The fully grown NFT marketplace developers can only do this. We at Hivelance easily make all these stages of NFT Marketplace well organized. You keep the NFT marketplace vision & mission in mind, we keep the technical infrastructure. Our NFT developers know how to transform ideas into NFT marketplace development.

For getting in touch with us, drop an email, we can sort out this.