Solidity Code I'm trying to fetch the NFTs that are currently in my wallet via web3Modal, but the issue is even though the NFTs exist in my wallet, the NFTs aren't fetching under the page on my website. It just shows nothing.
More information on this. Normally if an NFT doesn't exist within a wallet, it should say No NFTs owned, but it doesn't: again it shows nothing. So using two wallets to test- one with an NFT and one without, there are no errors whatsoever, just false code that refuses to load my NFTs that are stored.
JS Code:
export default function MyAssets() {
const [nfts1, setNfts1] = useState([])
const [loadingState, setLoadingState] = useState('not-loaded')
const router = useRouter()
useEffect(() => {
loadNFTs1()
}, [])
async function loadNFTs1() {
const web3Modal = new Web3Modal()
const connection = await web3Modal.connect()
const provider = new ethers.providers.Web3Provider(connection)
const signer = provider.getSigner()
const tokenContract = new ethers.Contract(nftaddress1, NFT1.abi, provider)
const marketContract = new ethers.Contract(nftmarket1, Market1.abi, signer)
const data = await marketContract.fetchMyNFTs()
const items = await Promise.all(data.map(async i => {
const tokenUri = await tokenContract.tokenURI(i.tokenId)
const meta = await axios.get(tokenUri)
let price = ethers.utils.formatUnits(i.price.toString(), 'ether')
let item = {
price,
tokenId: i.tokenId.toNumber(),
seller: i.seller,
owner: i.owner,
image: meta.data.image,
name: meta.data.name,
tag: meta.data.tag,
description: meta.data.description,
tokenUri
}
return item
}))
setNfts1(items)
setLoadingState('loaded')
}
if (loadingState === 'loaded' && !nfts1.length) {
return (
<div align="center" style={{ background: "#988558", height: "100%", minHeight: "72vh"}}>
<center style={{ padding: "240px 0", textAlign: "center"}}>
<h1 className="flex justify-center font-semibold" style={{ height: "100%", textAlign: "center"}}>You don't own any of our assets...</h1>
</center>
</div>
) }
return (
<div align="center" style={{ background: "#988558", height: "100%", minHeight: "72vh"}}>
<div className="flex justify-center">
<div className="p-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
{ nfts1 &&
nfts1.map((nft, i) => (
<div key={i} className="border shadow rounded-xl overflow-hidden">
<img src={nft.image} style={{ height: '320px', width: '320px'}} className="rounded"/>
<div className="p-1" style={{ background: "black"}}>
<p style={{ height: '34px', 'textAlign': 'center', color: "white" }} className="text-2xl font-semibold">{nft.name}</p>
</div>
<div className="p-4 bg-black">
<p className="text-2xl font-bold text-white">Price - {nft.price} Matic</p>
<button className="mt-4 w-full bg-pink-500 text-white font-bold py-2 px-12 rounded" onClick={() => listNFT(nft)}>List</button>
<p className="text-1xl font text-white" style={{ float: "left", fontSize: "10px"}}>ID: {nft.tag}</p>
</div>
</div>
))
}
</div>
</div>
</div>
</div>
)
}