Hi all, my team is having this same issue. After deploying a new smart contract and minting two tokens, the connect widget displays them correctly on the page. However, the app displays null values for all custom token metadata on the web app for any tokens minted after our initial release. Do we need to refresh the Manifold app somehow? I am using a similar setup as ofoid.
This is my function to view the nft: (This is all one React function, please disregard the random code blocks)
====================================================
function ViewNFT(addr) {
const [nfts, setNfts] = useState([]);
const [authenticated, setAuthenticated] = useState(false);
const extAddr = addr;
window.addEventListener(‘m-authenticated’, async (event) => {
// Get the data client instance
const client = event.detail.client;
// Get the NFTs owned by the currently connected wallet
// Data client API's can be found here: https://docs.manifold.xyz/v/manifold-for-developers/client-widgets/connect-widget/data-client-apis
setNfts(await client.getNFTsOfOwner({
filters: [
{
contractAddress: _coreAddress
}
]
}));
setAuthenticated(true);
})
window.addEventListener(‘m-unauthenticated’, async (event) => {
setNfts([]);
setAuthenticated(false);
})
return (
<div>
<h1>Your Available NFTs</h1>
{authenticated ? (
<div id="nfts">
{ nfts.map((nft) => {
return (
<div className='nftView'>
<img key={`${nft.tokenId}-${nft.contractAddress}`} src={getHTTP(nft.image, nft)} height={200} width={200}></img>
<p className='nftData'> Token ID: {nft.tokenId} </p>
<p className='nftData'> Owner Of The Token: {getOwner(nft)} </p>
<p className='nftData'> Token Type: {getTokenType(nft)} </p>
{getTokenType(nft) == "Recipient" ? (
<div>
<MyClass tokenID={nft.tokenId} typeToken={false} max={getDollarsTotal(nft)}/>
</div>
) : (
<div>
<MyClass tokenID={nft.tokenId} typeToken={true} max={getDollarsTotal(nft)}/>
</div>
)}
</div>
)
})
}
</div>
) : (
<h2>You have not yet connected with your MetaMask wallet, please do so in the top right</h2>
)}
</div>
);
};
=======================================
In my Main js function, I instantiate the connect app like this:
<div
data-widget="m-connect"
data-app-name={"NewConn"}
data-client-id={"f242dff8d89a1e267e7aa91da21f4e51739ed5abf8763760f70af7fabda5cebd"}
data-network={5}
style={{
marginTop: "-0px",
marginBottom: "-0px",
display: "flex",
flexDirection: "row",
justifyContent: "center"
}}
>
</div>
{authenticated}
<MyClass />
</div>
This is the metadata for a custom NFT. We have several of these which are returning null values for name, description, image, and metadata.
Token metadata: {“name”:“Recipient Token”,“created_by”:“Colton Payne”,“description”:“This is a recipient token. This is the description for test contract 14.”,“attributes”:[{“trait_type”:“Artist”,“value”:“Colton Payne”},{“trait_type”:“token_type”,“value”:“Recipient”},{“display_type”:“number”,“trait_type”:“donation_dollars_recieved”,“value”:1000,“max_value”:“50000”}],“image”:“ipfs://bafybeidejjtmzcrbriy5o2cby4vdugxxfehmdeoh2jmtktl4kjgwfet4z4/blob”}