How does this NFT contract insert SVG text into the TokenURI?

Smart Contracts
1

Happy new year guys,

A brief background of what I'm trying to do:

I'm trying to create an on-chain, RPG, SVG-based NFT collection, which comprises of many unique heroes and items (base layers) with many different unique traits (additional layers).

I tried following projects like Anonymice and Onchain Monkeys, by storing the SVG data on contract, but it is virtually impossible because my NFT consists of multiple layers, taking up massive amounts of contract storage to the point the compiler fails to compile.

So I thought that the best way to tackle this challenge would be to generate the randomized traits/attributes on-chain and then off load the assembly of the SVG layers to the browser. Once the SVG image has been formed, insert it back into tokenURI for the NFT to be fully minted.

A project that I think is using such a method is Ether Orcs.

Here are snippets of their code:

interface MetadataHandlerLike {
    function getTokenURI(uint16 id, uint8 body, uint8 helm, uint8 mainhand, uint8 offhand, uint16 level, uint16 zugModifier) external view returns (string memory);
}

function tokenURI(uint256 id) external view returns(string memory) {
        Orc memory orc = orcs[id];
        return metadaHandler.getTokenURI(uint16(id), orc.body, orc.helm, orc.mainhand, orc.offhand, 
        orc.level, orc.zugModifier);
    }

So, are they actually getting the image attributes/traits via getTokenURI on the front-end browser, assemble the SVG image, and then insert it back into function for the NFT to be minted?

If I'm wrong, how are they actually doing it?

Thank you.

Cheers,
Ashton

2

Upon further looking, I actually found that they actually did everything on-chain.

They stored their SVG layers in another contract, which can be found in their Github repo. An example of this would be:

If I want to follow something similar, by storing the SVG layers in another contract, how can I then link my main contract to multiple storage contracts and read from them?

Thank you

2 Likes