{“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.
Maybe you can try some CSS references from this tutorial
This is built on top of the Ethereum boilerplate and works to represent the NFT’s from the existing collection.
Hope this helps!!
1 Like
Thank you so much so many tutorials. It’s next on my list.
Hi there,
We are not able to fetch the IPFS file image and metadata which is attached while creating the NFT also the listed NFT is not moving to marketplace and even I could not buy NFT from marketplace. We are using BNB coins for gas and transactions.
Thanks.
Can you provide more details on the NFT collections and which function is throwing “This NFT not available” error.
Are there any more errors in the browser console.
Yes, we are getting some errors, I have attached a snapshot and error log for your reference.
`null useNFTTokenIds.js:25:12
Moralis.enable() is deprecated and will be removed, use Moralis.enableWeb3() instead. MoralisWeb3.js:264:24
You are accessing the MetaMask window.web3.currentProvider shim. This property is deprecated; use window.ethereum instead. For details, see: https://docs.metamask.io/guide/provider-migration.html#replacing-window-web3 inpage.js:1:49749
Uncaught (in promise) Error: You need to call Parse.initialize before using Parse.
generatePath Storage.js:142
currentInstallationId InstallationController.js:31
request RESTController.js:399
find ParseQuery.js:3073
value ParseQuery.js:852
e NFTTokenIds.jsx:91
d runtime.js:63
_invoke runtime.js:294
M runtime.js:119
Babel 4
ue NFTTokenIds.jsx:39
de NFTTokenIds.jsx:39
e NFTTokenIds.jsx:115
d runtime.js:63
_invoke runtime.js:294
M runtime.js:119
Babel 4
Uf React
unstable_runWithPriority scheduler.production.min.js:18
React 4
unstable_runWithPriority scheduler.production.min.js:18
React 6
1648 index.js:37
l NFTMarketPlace:1
t NFTMarketPlace:1
r NFTMarketPlace:1
main.e24cc7c4.chunk.js:1
Storage.js:142:12
MetaMask - RPC Error: Already processing eth_requestAccounts. Please wait.
Object { code: -32002, message: “Already processing eth_requestAccounts. Please wait.” }
inpage.js:1:51866
Uncaught (in promise) TypeError: e.data is undefined
e NFTTokenIds.jsx:490
NFTTokenIds.jsx:490:12
NftComponent.jsx:64:10`
This error happens when the serevrUrl and AppId are not added to the app. Did you set the MoralisProvider with serevrUrl and AppId?
Yes the MoralisProvider is perfectly configured with the serverUrl and AppId, for your reference I have added the codebase.
Parse.initialize error is fixed now. Thanks
return (
<MoralisProvider appId={APP_ID} serverUrl={SERVER_URL}>
<MoralisDappProvider>
<App isServerInfo />
</MoralisDappProvider>
</MoralisProvider>
);
What about the other erros, are they still same?
Console errors are solved now, but still we are not able to create, buy or list NFT. If I create NFT it doesn’t show the NFT image either metadata of the NFT. It is showing null in metadata and default image alone as i shared in the first thread.
If the image metadata is null you can try to resync the nft metadata. Or you can use the token uri to fetch the metadata and use the image data from there.
https://docs.moralis.io/moralis-dapp/web3-api/token#resyncmetadata
We tried resync and token Uri both are not working and unable to fetch NFT details so we are currently trying to change the IPFS path as suggested in forum support.
1 Like