That message will be displayed if there is no object for this NFT in your Moralis server’s MarketItems Class. Can you doublecheck this.
What about this warnings when I run
yarn install
Likely due to conflicts with installing the latest react-moralis, I did not encounter any of these although I am using npm. Possibly installing some of the latest dependencies like eslint will fix some of these, you can try it, but keep a note of the previous version so you can revert if things break.
And one more warning after running
yarn start
You can install the @web3auth/web3auth package to get rid of this warning but things should be working fine so you could ignore it unless you need to use web3auth.
Ok! Thanks for the help and tips!
I saw in the tutorial , the badge ribbon is supposed to be on currently listed market items on the NFT marketplace. but idk why in my case , i can’t see that on the listed items.
I’m getting this error as well in the NFTTokenIds.js
line31
Unhandled Rejection (SyntaxError): Unexpected token o in JSON at position 1
Line 31 in the NFTTokenIds.js github code is of css styles. If this is the line that is causing the error, then there must be a syntax error in the json properties.
If you are referring to some other code, can you paste the reference of that code.
can you try console.log of the parameters of getAllTokenIds and also the other the result data of getAllTokenIds function. I think the 400 error is due to some wrong parameters.
You don’t have to worry about this 400 error, it is just due to how the boilerplate is set up.
This unexpected token error means you’re parsing something that’s not valid JSON. What is the contract address you’re using?
An option is to use a try and catch block so if the error happens to just use the metadata directly (dependent on it being a valid object).
try {
NFT.metadata = JSON.parse(NFT.metadata);
} catch (err) {
console.log(err);
}
NFT.image = resolveLink(NFT.metadata?.image);
{“0x44fb27EE0D375c21291E6dcD02e0496A431A69Ac”} this is the smart contract address i’m using currently which is deployed on BSC testnet.
Thanks. Currently no NFT results exist for that contract with the Moralis API. There don’t seem to be any Transfer events so any NFTs won’t be picked up. You can post your contract code.
Hey I have the build folder and it still wont let me deploy any reason why?
What’s the reason you think or any error encountered ?
Have you specified your Moralis serverUrl and appId? In frontend\Providers.tsx or through your .env file. If you have try hardcoding them directly into <MoralisProvider>.
Good Day to all!
Was hoping someone around here may be able to help me out-I have the boilerplate that I am attempting to ‘deconstruct’.
I have the NFTBalance.jsx here and was hoping someone, anyone, would be so kind as to provide assistance.
The idea is to list their ERC721 from our collection (or encourage them to mint if they don’t have one)
Underneath split in two columns listing any ERC1155’s they have purchased from our collection Collection 1 in Column 1 and collection 2 in column 2.
I have been coding so much over the weekend my mind has turned to mush!
import React, { useState } from "react";
import { useMoralis, useNFTBalances } from "react-moralis";
import { Card, Image, Tooltip, Modal, Input, Skeleton } from "antd";
import { FileSearchOutlined, SendOutlined, ShoppingCartOutlined } from "@ant-design/icons";
import { getExplorer } from "helpers/networks";
import AddressInput from "./AddressInput";
import { useVerifyMetadata } from "hooks/useVerifyMetadata";
const { Meta } = Card;
const styles = {
NFTs: {
display: "flex",
flexWrap: "wrap",
WebkitBoxPack: "start",
justifyContent: "flex-start",
margin: "0 auto",
maxWidth: "1000px",
width: "100%",
gap: "10px",
},
};
function NFTBalance() {
const { data: NFTBalances } = useNFTBalances();
const { Moralis, chainId } = useMoralis();
const [visible, setVisibility] = useState(false);
const [receiverToSend, setReceiver] = useState(null);
const [amountToSend, setAmount] = useState(null);
const [nftToSend, setNftToSend] = useState(null);
const [isPending, setIsPending] = useState(false);
const { verifyMetadata } = useVerifyMetadata();
async function transfer(nft, amount, receiver) {
const options = {
type: nft.contract_type,
tokenId: nft.token_id,
receiver: receiver,
contractAddress: nft.token_address,
};
if (options.type === "erc1155") {
options.amount = amount;
}
setIsPending(true);
await Moralis.transfer(options)
.then((tx) => {
console.log(tx);
setIsPending(false);
})
.catch((e) => {
alert(e.message);
setIsPending(false);
});
}
const handleTransferClick = (nft) => {
setNftToSend(nft);
setVisibility(true);
};
const handleChange = (e) => {
setAmount(e.target.value);
};
console.log("NFTBalances", NFTBalances);
return (
<div style={{ padding: "15px", maxWidth: "1030px", width: "100%" }}>
<h1>🖼 NFT Balances</h1>
<div style={styles.NFTs}>
<Skeleton loading={!NFTBalances?.result}>
{NFTBalances?.result &&
NFTBalances.result.map((nft, index) => {
//Verify Metadata
nft = verifyMetadata(nft);
return (
<Card
hoverable
actions={[
<Tooltip title="View On Blockexplorer">
<FileSearchOutlined
onClick={() => window.open(`${getExplorer(chainId)}address/${nft.token_address}`, "_blank")}
/>
</Tooltip>,
<Tooltip title="Transfer NFT">
<SendOutlined onClick={() => handleTransferClick(nft)} />
</Tooltip>,
<Tooltip title="Sell On OpenSea">
<ShoppingCartOutlined onClick={() => alert("OPENSEA INTEGRATION COMING!")} />
</Tooltip>,
]}
style={{ width: 240, border: "2px solid #e7eaf3" }}
cover={
<Image
preview={false}
src={nft?.image || "error"}
fallback="data:image/png;base64,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"
alt=""
style={{ height: "240px" }}
/>
}
key={index}
>
<Meta title={nft.name} description={nft.token_address} />
</Card>
);
})}
</Skeleton>
</div>
<Modal
title={`Transfer ${nftToSend?.name || "NFT"}`}
visible={visible}
onCancel={() => setVisibility(false)}
onOk={() => transfer(nftToSend, amountToSend, receiverToSend)}
confirmLoading={isPending}
okText="Send"
>
<AddressInput autoFocus placeholder="Receiver" onChange={setReceiver} />
{nftToSend && nftToSend.contract_type === "erc1155" && (
<Input placeholder="amount to send" onChange={(e) => handleChange(e)} />
)}
</Modal>
</div>
);
}
export default NFTBalance;
Can you be more specific about where you are stuck?
I see in your code that you have code to select files.
Now you need to implement saving files on IPFS with useMoralisFile hook and mint the uploaded file to a smart contract using useweb3executefunction hook.
Sorry John,
Stuck on the design aspect as to trying to get it to display as described.
When I try the whole thing fails to load so have stripped it all back.
Their main NFT (from our collection) up top
Two columns displaying nfts from our related collections.
No matter what I attempt it’s just spitting out a white page.