Comment on page
Storing Data On-Chain
Right click, save on Ethereum
As you might already know from our previous tutorials, Manifold Studio stores all metadata and assets related to your NFT on Arweave. This is a much cheaper solution to storing all this data on the Ethereum blockchain while still being decentralized and ensuring your assets can never be taken down.
In any case, you might still want to store all data related to your NFT on-chain if for instance you are dealing with a small SVG or a piece of text and really want that metadata to be inside your contract!
In this tutorial we will learn how to do it by leveraging your Manifold Creator contract and Etherscan!
For this tutorial we will create an NFT from an SVG file. Here's the SVG file we will use:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 350 350">
<style>.base { fill: white; font-family: serif; font-size: 14px; }</style>
<rect width="100%" height="100%" fill="black"/>
<text xmlns="http://www.w3.org/2000/svg" x="50%" y="50%" class="base" dominant-baseline="middle" text-anchor="middle">I will never share my seed phrase.</text>
</svg>
Which renders to just some text with a black background:
Now that we have our SVG we will transform it into a URI so that our browser can render it easily.
Let's first make our SVG more compact by using this tool. Copy your SVG into the editor and click on "Optimize" on the top left of the editor.
This is how mine looks like now:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 350 350"><rect width="100%" height="100%"/><text xmlns="http://www.w3.org/2000/svg" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" style="fill:#fff;font-family:serif;font-size:14px">I will never share my seed phrase.</text></svg>
Now let's convert this SVG into a URI by using this other tool (click on "Run Pen" to turn on the tool):
This is what my resulting URI looks like:
data:image/svg+xml;utf8,%3csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMin meet' viewBox='0 0 350 350'%3e%3crect width='100%25' height='100%25'/%3e%3ctext xmlns='http://www.w3.org/2000/svg' x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' style='fill:%23fff;font-family:serif;font-size:14px'%3eI will never share my seed phrase.%3c/text%3e%3c/svg%3e
Now go ahead and paste that string into your browser, you'll see your SVG rendered!
Now that we have our encoded SVG, we need to create and transform into a URI our JSON metadata specifying things such as the name, description and, of course, image of the NFT.
First define your JSON metadata, mine looks something like this:
{
"name": "Seed Phrase",
"description": "An NFT to remind me to never share my seed phrase.",
"image": "<YOUR_SVG_URI>"
}
Remember to add the string we generated before to the "image" field of your JSON metadata.
Once we are ready, we can then copy the minified JSON and attach it to this string:
data:application/json;utf8,<YOUR_JSON>
Here's the example of my URI:
data:application/json;utf8,{"name":"Seed Phrase","description":"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' preserveAspectRatio='xMinYMin meet' viewBox='0 0 350 350'%3e%3crect width='100%25' height='100%25'/%3e%3ctext xmlns='http://www.w3.org/2000/svg' x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' style='fill:%23fff;font-family:serif;font-size:14px'%3eI will never share my seed phrase.%3c/text%3e%3c/svg%3e"}
Now that we have our metadata and SVG converted into a URI, we can go ahead and mint our NFT on Etherescan.
For this example we will mint our NFT on Rinkeby so make sure the contract you are using is a draft contract that has been deployed to the testnet.
Head over to your draft contract on Manifold Studio and click on its address. This will open Rinkeby Etherscan for you.
Open the "Contract" tab and click on "Write as Proxy" bellow.
Click on "Connect to web3" and connect with the wallet that is owner of your contract.
Head over to the "mintBase" function. There will be two, open the one with two fields "to (address)" and "uri (string)"
Fill the "to (address)" field with the address where you want the NFT to be on, in this case I'll use my address. Fill the "uri (string)" field with the encoded string we generated from the JSON metadata before.
Once you are ready, you can then mint the NFT by clicking on "Write" and executing the transaction.
To check your token on OpenSea you'll have to go to the following URL:
https://testnets.opensea.io/assets/<YOUR_RINKEBY_CONTRACT_ADDRESS>/<MINTED_TOKEN>
To find the values of your Rinkeby contract address and the token number you minted you can click on "View your transaction" inside Etherscan:
Inside that page you'll see your contract with a green check mark and the token number bellow where it says "ERC-721 TokenID[<MINTED_TOKEN>]", in my case it's token number 5. This might take a few seconds to appear.
So for me, I'll find my token by going to this URL:
https://testnets.opensea.io/assets/0xc1d87f2c5fa21ce0cec0cd711f2cfd65e0d0eb6e/5
Where
0xc1d87f2c5fa21ce0cec0cd711f2cfd65e0d0eb6e is my contract address and 5 is my token number.OpenSea might take some time to process the NFT metadata so if you are seeing just a placeholder image, wait a few minutes and refresh the metadata by clicking on the circular arrow on the top right:
And there you go!
You've minted your SVG storing all info on the Ethereum blockhain!
To do this on mainnet you would follow the exact same steps but instead of using a Rinkeby contract you'd use your Manifold Creator deployed contract.
Last modified 1yr ago