Manifold Studio

Storing Data On-Chain

Right click, save on Ethereum

As you may know from our previous tutorials, Manifold Studio stores all metadata and assets related to your NFT on Arweave. This is a cheaper solution than storing all this data on the Ethereum blockchain itself, while still maintaining decentralization -- ensuring your assets can never be taken down.

In any case, you may 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 to be inside your contract on the blockchain itself!

In this tutorial we will learn how to do this by leveraging your Manifold Creator contract, a few open-source tools, and Etherescan!

1. Introduction

For this tutorial we will create an NFT with the title "Seed Phrase" and description "Never share it" from the following SVG:

<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>

Feel free to follow along using any valid SVG of your choosing.

2. Transforming your SVG into a Data URI

Now that we have our SVG we will transform it into a Data URI so that our browser can render it like any other URL.

We must make our SVG more compact and then convert it into a Data URI by using this tool.

  1. Copy your SVG into the editor

  2. Click "Optimize" in the bottom of the editor page.

  3. Go the Data URI tab and copy the Minified Data URI option.

Huzzah you have done it! You should now have a Data URI representing your SVG that looks something like this:

data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20preserveAspectRatio%3D%22xMinYMin%20meet%22%20viewBox%3D%220%200%20350%20350%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20dominant-baseline%3D%22middle%22%20text-anchor%3D%22middle%22%20style%3D%22fill%3A%23fff%3Bfont-family%3Aserif%3Bfont-size%3A14px%22%3EI%20will%20never%20share%20my%20seed%20phrase.%3C%2Ftext%3E%3C%2Fsvg%3E

Save this URL, we'll need it in Step 2.

As a sanity check: Paste it into your browser's URL bar then visit the URL. You should see the SVG render on screen.

3. Transforming your NFT's Metadata into a Data URI

Now that we have our SVG as a Data URI, we next need to create our JSON object representing the NFT's metadata and turn that into a Data URI too.

This metadata object specifies things such as the name, description, and of course, the image of the NFT! You can learn more about what else is allowed inside this JSON object by referencing the OpenSea Metadata Standards Document

We suggest you start by defining your metadata as a JSON object with just three fields like so:

{
    "name": "Seed Phrase",
    "description": "Never share it",
    "image": "<SVG_URI_FROM_STEP_2>"
}

Remember to swap in the string we generated from Step 2 into the image field, like so for our running example:

{
    "name": "Seed Phrase",
    "description": "Never share it",
    "image": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20preserveAspectRatio%3D%22xMinYMin%20meet%22%20viewBox%3D%220%200%20350%20350%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20dominant-baseline%3D%22middle%22%20text-anchor%3D%22middle%22%20style%3D%22fill%3A%23fff%3Bfont-family%3Aserif%3Bfont-size%3A14px%22%3EI%20will%20never%20share%20my%20seed%20phrase.%3C%2Ftext%3E%3C%2Fsvg%3E"
}

Once your metadata looks good, copy and paste the entirety of your JSON into our handy-dandy tool which will compress it, and then turn it into a JSON Data URI for you. If there are any errors in your JSON our little app will throw errors. If that is the case, head to the JSON Validator and fix your issues first, then try again.

Copy it to your clipboard, and save it somewhere, as we'll need it for minting in Step 4.

For our running example, the final output looks like so:

data:application/json;utf8,%7B%22name%22%3A%22Seed%20Phrase%22%2C%22description%22%3A%22An%20NFT%20to%20remind%20me%20to%20never%20share%20my%20seed%20phrase.%22%2C%22image%22%3A%22data%3Aimage%2Fsvg%2Bxml%2C%253Csvg%2520xmlns%253D%2522http%253A%252F%252Fwww.w3.org%252F2000%252Fsvg%2522%2520preserveAspectRatio%253D%2522xMinYMin%2520meet%2522%2520viewBox%253D%25220%25200%2520350%2520350%2522%253E%253Crect%2520width%253D%2522100%2525%2522%2520height%253D%2522100%2525%2522%252F%253E%253Ctext%2520xmlns%253D%2522http%253A%252F%252Fwww.w3.org%252F2000%252Fsvg%2522%2520x%253D%252250%2525%2522%2520y%253D%252250%2525%2522%2520dominant-baseline%253D%2522middle%2522%2520text-anchor%253D%2522middle%2522%2520style%253D%2522fill%253A%2523fff%253Bfont-family%253Aserif%253Bfont-size%253A14px%2522%253EI%2520will%2520never%2520share%2520my%2520seed%2520phrase.%253C%252Ftext%253E%253C%252Fsvg%253E%22%7D

4. Minting your SVG

Now that we have our metadata with our SVG inside of it converted into a single URI, we can go ahead and mint our NFT on Etherscan.

For this example we will mint our NFT on Sepolia, so make sure the contract you are using is a draft contract that has been deployed to the Test Network.

Head over to your draft contract on Manifold Studio and click on its address. This will open Sepolia Etherscan for you.

Open the "Contract" tab and click on "Write as Proxy" bellow.

Click on Connect to Web3 and connect using 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, for our example we'll use some address. Then, fill the uri (string) field with the encoded string we generated at the very end of Step 3.

Once you are ready, you can then mint the NFT by clicking on the Write button and executing the transaction from your wallet.

To double check your token on OpenSea go to the following URL:

https://testnets.opensea.io/assets/<CONTRACT_ADDRESS>/<MINTED_TOKEN>

To find the values of your Sepolia contract address and the token number you minted you can click on View your transaction" buttoninside Etherscan that appears once your transaction is submitted:

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:

5. Success!

And there you go!

You've minted your SVG and all of its metadata entirely on the Ethereum blockchain, no dependencies!

To do this on Mainnet follow the exact same steps but instead of using a Test Network Creator Contract use your Creator Contract that lives on Mainnet!

Last updated