NFT Marketplace Question

Moralis General
#1

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?

#2

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.

#3

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.

screen01
screen011920Ɨ1022 372 KB
screen02
screen021920Ɨ1020 394 KB

Thanks for your time.

#4

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

#5

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.

#6

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.

#7

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.

#8

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
        );
    }
#9

@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!

#10

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.

#11

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)

#12

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.

#13

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

#14

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?

#15

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:

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.

#16

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.

#19