Any progress on this yet?
Yes I will make another server later⊠Now I need to integrate a minting dapp because I already have one that works well but I would like to put everything on my marketplaceâŠ
And i see that moralis tutorials are only in ERC1155⊠personally i prefer ERC721 with a random mint functionâŠ
I will post any examples when finished. There are a few complications that come with larger collections.
Thank you, appreciate the help. Im not sure if loading the entire collection is necessary, but there definitely needs to be some way to sort or filter the items, especially ones that are up for sale.
This is a basic rough example, but good enough to get started.
1: Sync NFT contract results from getAllTokenIds into a Class
This code uses this example which loops through all of the NFTs and syncs each one as an Object to the Class (bulkWrite may be better here). It would make sense to use separate Classes for each collection. To test, you can run this code in the frontend - but it should be done in a backend or Cloud Function.
const Sync = Moralis.Object.extend('CollectionName');
let cursor = null;
do {
const response = await Moralis.Web3API.token.getAllTokenIds({
address: '0x51790d397e3cc5f418635796e75c8b58ea113f3d',
chain: 'polygon',
cursor,
});
// for each NFT, sync each to the Sync table
for (const nft of response.result) {
const sync = new Sync();
// Issue of numbers as strings not being sortable from DB, workaround is to save token_id as a number
sync.set({
...nft,
token_id: Number(nft.token_id),
});
sync.save();
}
cursor = response.cursor;
} while (cursor !== '' && cursor != null);
2: Query this data in hooks\useNFTTokenIds.js
The fetch uses getNFTTokenIds which is used already so the rest of the hook doesnât need to be changed.
// remove : getNFTTokenIds from old getAllTokenIds fetch
const { fetch: getNFTTokenIds, data } = useMoralisQuery(
'CollectionName',
(query) => query.descending('token_id') // ascending available
);
useEffect(() => {
async function run() {
// create deep clone of flattened data so is similar to API response structure
const NFTs = JSON.parse(JSON.stringify(data.map(({ attributes }) => attributes)));
// same code from existing useEffect
// setTotalNFTs(); // we don't have a total now, you can get it yourself from getAllTokenIds
setFetchSuccess(true);
for (let NFT of NFTs) {
if (NFT?.metadata) {
NFT.metadata = JSON.parse(NFT.metadata);
NFT.image = resolveLink(NFT.metadata?.image);
} else if (NFT?.token_uri) {
try {
await fetch(NFT.token_uri)
.then((response) => response.json())
.then((data) => {
NFT.image = resolveLink(data.image);
});
} catch (error) {
setFetchSuccess(false);
}
}
}
setNFTTokenIds(NFTs);
}
if (data) {
run();
}
}, [data]);
// comment out other useEffect
3: Use new data source in components\NFTTokenIds.jsx
Fetch MarketItems data.
const { fetch, data } = useMoralisQuery('MarketItems');
Set up filter function:
// use existing NFTTokenIds data from the hook as initial state
const [filteredNFTs, setFilteredNFTs] = useState(NFTTokenIds);
function filterHandler(e) {
const marketItems = data.map(({ attributes }) => attributes); // flatten
if (e.target.checked) { // if checkbox is ticked
// filter results based on matching token_address and token_id
const filtered = NFTTokenIds.filter((token) => {
return marketItems.some((marketItem) => {
return (
marketItem.nftContract === token.token_address &&
marketItem.tokenId === String(token.token_id)
);
});
});
setFilteredNFTs(filtered);
} else {
setFilteredNFTs(NFTTokenIds);
}
}
Map over the new state instead of NFTTokenIds:
{inputValue !== 'explore' &&
filteredNFTs.map((nft, index) => (
...
Then set up the checkbox to test the filter.
<label htmlFor="sale">For sale</label>
<input type="checkbox" id="sale" onChange={(e) => filterHandler(e)} />
...
{contractABIJson.noContractDeployed && (
Notes:
This example uses static addresses, names, etc. so you will need to change things appropriately for multiple collections.
For a large collection (this one used 25,000 so 3-5 minutes), it will take some time to sync. And it may error out, so you have to handle that - you could do length checks of the DB vs the total given by getAllTokenIds.
If you want people adding their own collections to your site you will have to factor in potential simultaneous API calls to get the NFT data - upgrade your plan for a higher API limit or pay for a custom limit.
If you run into this issue for testing from your app Too many requests to Web3 API from this particular client, adjust your rate limits.
You can implement pagination so users can go over more pages of NFTs.
Thank you for the information. Im not familiar with how to do most of what you said, but I will do my best to try to figure it out. What exactly would implementing all of this do? Not sure what the result of all this would give me? Having these elements would be ideal:
Getting the search by name or attribute & filter by price low to high are the first 2 concerns. Then adding the information about items, owners, floor price & total volume. Maybe just in the section where the collection size data is rendered in the boilerplate?
Really just need these 3 things in that order & ill be ready to launch. I will launch with just 1 &/or 2 completed if option 3 is hard to do to start. Is that what your example would do?
So Iâve copied the Etherium Boilerplate and started going through the tutorial. However it looks to be somewhat different than whatâs on the YouTube tutorial. Did I copy the right Eth boilerplate?
ethereum nft marketplace boilerplate is the correct one to copy.
1 Like
Thanks but Iâve already seen this one. He talks about creating his nft⊠I already have my contract which contains 200 nft ready to be minted by people⊠
Hey is anyone getting. this error
src/components/AddressInput.jsx
Line 14:6: React Hook useEffect has missing dependencies: âpropsâ and âvalidatedAddressâ. Either include them or remove the dependency array. However, âpropsâ will change when any prop changes, so the preferred fix is to destructure the âpropsâ object outside of the useEffect call and refer to those specific props inside useEffect react-hooks/exhaustive-deps
My dapp was working then this error popped up, any solutions?
Thanks guys
Your app should still work despite that warning, you can ignore this for now. You may need to reload the page.
An example of what you asked for; it syncs all NFT data for a collection to the server, then pulls the latest NFTs by token_id with an input to filter by MarketItems only.
You can read through the docs on how to use the DB: https://docs.moralis.io/moralis-dapp/database and then go through all of the components to learn how each part works. The example more or less involves copying and pasting in the right places as itâs based on the boilerplate.
For searching, you can use a tutorial like this.
For those options on OpenSea, you will need to implement those yourself. So get counts of collections, find out the lower price, use the API to get NFT owners. And then customize your components appropriately. These additions are more React/JavaScript concepts, not Moralis specific.
1 Like
Hi serâŠ
Iâm coming back to you because I have 2 problems.
The 1: when I reload the page I have this error ( when I backtrack too )
Error 404 - Not found
The required file was not found. It may be a technical error. Please retry later. If you cannot access the file after several attempts, it has been deleted.
The 2: I canât sell NFTs with more than 3 digits
999 CRO maximumâŠ
Thanks again
I have searched all over the forum but I havenât found anything that works for meâŠ
There is another person who could not sell above 999 Matic but the solution was not published eitherâŠ
I just rebuilt the whole thing and I still have the same problemâŠ
The 1: when I reload the page I have this error ( when I backtrack too )
Error 404 - Not found
The required file was not found. It may be a technical error. Please retry later. If you cannot access the file after several attempts, it has been deleted.
The 2: I canât sell NFTs with more than 3 digits
I donât know what to do anymore 
My nft marketplace is only fetching 100 nfts when in reality I have 200 NFTs in that collection.
when I change the number to 200 in both NFTTokenids.jsx and useNFTTokenid.js then NFt are shown in explore tab. w
{inputValue !== "explore" &&
NFTTokenIds.slice(0, 100).map((nft, index) => { }
}
useNFtTokenIds
= useMoralisWeb3ApiCall(token.getAllTokenIds, {
chain: chainId,
address: addr,
limit: 100,
})
Are you the owner of all 200 NFTs�