razi429
commented
1 year ago Adding some details about how the URL format along with examples:
Sample Contract: 0xa0c72e1c6616888cb5a9e6393F96183c1aA4f17d
tokenURI call on the contract returns a string as following:
Format: data:[Content Type];base64,[Base64 Encoded String/JSON]
Example: data:application/json;base64,eyJuYW1lIjogIk9uQ2hhaW4gRHV.....
The above mentioned URL is by default supported by any modern browser. It decodes the encoded string and renders/displays the content. which in this case is JSON.
The marketplace may have to handle the decode part internally in order to get the JSON.
The format of the JSON is as given below:
JSON Format: { "name": "Name of the NFT", "attributes": [{"trait_type": "Trait Name 1","value": "Trait Value 1"},{"trait_type": "Trait Name 2","value": "Trait Value 2"},........], "image": "data:[Content Type];base64,[Base 64 Encoded String/SVG]" }
JSON Example: { "name": "Dude ICard #1", "attributes": [{"trait_type": "Style","value": "Karate"},{"trait_type": "Weight Class","value": "Middleweight"},{"trait_type": "Weight","value": "94"},{"trait_type": "Card Color","value": "Spindle"},{"trait_type": "First Name","value": "Gunther"},{"trait_type": "Last Name","value": "Cutler"},{"trait_type": "Dude","value": "1"}], "image": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3........." }
The JSON is pretty much self explanatory.
- 'name' field which is a string. It is the name of the NFT.
- 'attributes' field is an array of objects containing two fields namely, 'trait type' and 'value'. This gives us the list of attributes associated with this NFT.
- 'image' is a data field which contains an encoded data URI. the decoded string here will be an SVG.
Note that the content type can be kept generic such that it can handle other content types as well and not only SVGs. There are collections on ethereum which are javascript based NFTs. so in that case the content type is text/html for instance. Following contract is one such example from ethereum.
Contract: 0x3e743377417cd7ca70dcc9bf08fac55664ed3181 OpenSea Link: https://opensea.io/assets/ethereum/0x3e743377417cd7ca70dcc9bf08fac55664ed3181/1
yangwao
We would like slowly start showing on-chain NFTs as there is an existing project to demonstrate this on GLMR https://onchaindudes.com/
https://t.me/@Mohd429 is author for future consulting, check issue in package.
Generally, it should be a handler to render SVG in first prototype :)
Ref