I am doing some testing and uploaded a 1.10 KB SVG file on-chain.
Following instructions on this website:
The token was minted on the Goerli network 6 hours ago, but the metadata is not showing.
Have I done something wrong, or does the Goerli network not work with on-chain tokens?
Goerli address: [0xfb307606400edf4223bc0e5f4a36d71dc509ae69]
(https://goerli.etherscan.io/address/0xfb307606400edf4223bc0e5f4a36d71dc509ae69)
Looks like you have some encoding issues with the SVG you are adding. i looked at what was set and it came back with
data:image/svg+xml;utf8,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 500 500'%3e%3cpath d='M0 0h500v500H0z'/%3e%3cg fill='%23fff' transform='translate(50 50)'%3e%3ccircle r='38.6'/%3e%3ccircle cx='100' r='39.4'/%3e%3ccircle cx='200' r='37.1'/%3e%3ccircle cx='300' r='35.7'/%3e%3ccircle cx='400' r='38.6'/%3e%3ccircle cy='100' r='40.4'/%3e%3ccircle cx='100' cy='100' r='22.9'/%3e%3ccircle cx='200' cy='100' r='26.5'/%3e%3ccircle cx='300' cy='100' r='8.4'/%3e%3ccircle cx='400' cy='100' r='38.8'/%3e%3ccircle cy='200' r='40.4'/%3e%3ccircle cx='100' cy='200' r='11.2'/%3e%3ccircle cx='200' cy='200' r='19.6'/%3e%3ccircle cx='300' cy='200' r='10.2'/%3e%3ccircle cx='400' cy='200' r='34.7'/%3e%3ccircle cy='300' r='39.8'/%3e%3ccircle cx='100' cy='300' r='41.4' transform='matrix(.03328 -.9994 .9994 .03328 -203.162 389.961)'/%3e%3ccircle cx='200' cy='300' r='7.8'/%3e%3ccircle cx='300' cy='300' r='5.9'/%3e%3ccircle cx='400' cy='300' r='7.5'/%3e%3ccircle cy='400' r='26.3'/%3e%3ccircle cx='100' cy='400' r='38.4'/%3e%3ccircle cx='200' cy='400' r='36.7'/%3e%3ccircle cx='300' cy='400' r='3.9'/%3e%3ccircle cx='400' cy='400' r='26.5'/%3e%3c/g%3e%3c/svg%3e
while this is the image data, its not a valid metadata format. if you look at the guide you didn’t complete step 4 which is “Transforming your NFT metadata into a URI” it should take the format of
{
"name": "NFT Name",
"description": "An NFT Description.",
"image": "<YOUR_SVG_URI> this comes from the url above data:image...."
}
Thank you for the response.
This time, I took the screenshot before minting, yet it is still not revealing.
Could someone please have a look? I believe I have adhered to the given instructions well.
I took a look at what you put on chain, according to this https://goerli.etherscan.io/tx/0x1a40227a8e89dc56a0239ea37cfdf7145000f376df969b99224b47b7a01082bc
you did not format the metadata correctly, (this does not match the screenshot that you posted above). The thing I noticed is that the name property does not have “”'s around it. Your screenshot shows it has the quotes but the data written to chain does not.
So why is it happening? I am including the “”'s around the name property.
This is the exact screenshot before clicking ‘Write’.
Another token, I made sure “”'s are included once again.
I took a deeper look at this more closely, it looks like Etherscan is writing different data chain than what is being provided in the text box.
I looked at what the input was and what the raw hex value being written on chain was and there was a discrepancy between the data. I’m following up with the team at etherscan to see what the issue is.
Will report back once i have some more information
Thank you, richerd!
I am looking forward to hearing back.
Are there any news? Is it worth trying again?
I’m waiting for this solution too
Apologies for the delay here. Checking in with richerd and then will have some more information for you hopefully @orb
For your token I get the following which is invalid
data:application/json;utf8,{name:"Test","OOOOO":"An NFT to remind me to never share my seed phrase.","image":"data:image/svg+xml;utf8,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 500 500'%3e%3cpath d='M0 0h500v500H0z'/%3e%3cg fill='%23fff' transform='translate(50 50)'%3e%3ccircle r='38.6'/%3e%3ccircle cx='100' r='39.4'/%3e%3ccircle cx='200' r='37.1'/%3e%3ccircle cx='300' r='35.7'/%3e%3ccircle cx='400' r='38.6'/%3e%3ccircle cy='100' r='40.4'/%3e%3ccircle cx='100' cy='100' r='22.9'/%3e%3ccircle cx='200' cy='100' r='26.5'/%3e%3ccircle cx='300' cy='100' r='8.4'/%3e%3ccircle cx='400' cy='100' r='38.8'/%3e%3ccircle cy='200' r='40.4'/%3e%3ccircle cx='100' cy='200' r='11.2'/%3e%3ccircle cx='200' cy='200' r='19.6'/%3e%3ccircle cx='300' cy='200' r='10.2'/%3e%3ccircle cx='400' cy='200' r='34.7'/%3e%3ccircle cy='300' r='39.8'/%3e%3ccircle cx='100' cy='300' r='41.4' transform='matrix(.03328 -.9994 .9994 .03328 -203.162 389.961)'/%3e%3ccircle cx='200' cy='300' r='7.8'/%3e%3ccircle cx='300' cy='300' r='5.9'/%3e%3ccircle cx='400' cy='300' r='7.5'/%3e%3ccircle cy='400' r='26.3'/%3e%3ccircle cx='100' cy='400' r='38.4'/%3e%3ccircle cx='200' cy='400' r='36.7'/%3e%3ccircle cx='300' cy='400' r='3.9'/%3e%3ccircle cx='400' cy='400' r='26.5'/%3e%3c/g%3e%3c/svg%3e"}
I believe one of your the issues is your SVG Data URI, it’s not encoded correctly as spaces are showing up in your URL.
What you want is a single URL encoded outside, and then you want a double URL encoded inside for things that are internal Data URIs such as on chain image/animation_url info.
Here is an example of correct encoding with double encoding on the image.
data:application/json;utf8,{"name":"The%20Dude","image":"data%3Aimage%2Fsvg%2Bxml%2C%253Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20height%3D%27100%27%20width%3D%27100%27%253E%253Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%2740%27%20stroke%3D%27black%27%20stroke-width%3D%273%27%20fill%3D%27red%27%20%2F%253E%253C%2Fsvg%253E"}
In addition, your name property is not wrapped in quotes correctly.
Note how my example, The%20Dude turns into The Dude once rendered. URLs have to be fully URL encoded so no spaces etc. And note how my image url ends up single encoded in the output still, which is correct as it should be copy-pastable as a URL in-and-of-itself.
Your rendered output of the tokenURI from the browser should always be copy pastable into a json validator and be valid: https://jsonformatter.curiousconcept.com/#
If you want to make things a little simpler, you can write your own extension and return a Base64 encoded JSON response and use a Base64 library to encode it inline (that way you dont need to store base64 encoded anything). Negates a lot of these weird issues with spaces and whatnot.
data:application/json;base64,
Check out: Utilities - OpenZeppelin Docs
See above cinch! Hope it helps. Your issue is probably similar.
Hey gang! I’ve audited and updated our guide for minting on-chain data.
Give it a whirl and let me know if you run into issues, everything is much simpler now and should be bug-free. We were missing some extra encoding steps originally.
Apologies that we misled you in the old instructions. Cheers!
hello sir, I have a question, how stored onchain data
batch minting? i tried to insert 2 encode json data,
data:application/json;base64,abcd,
data:application/json;base64,abcd
it generates 4 tokens on 8.mintBaseBatch function