NFT without IPFs and completely on the chain?

No, IPFS And completely on the chain NFT？ Yes , There's a way ！

Encryption and NFT A big problem that the encryption field tries to solve is centralization . Blockchain is an important part . Without blockchain , We wouldn't have millions of dollars DAO Or like CryptoPunks Such a project . however , Most projects still have a problem :“ If IPFS What about the descent ?”

IPFS It has been very decentralized , So don't worry . But some collectors may prefer the pure chain data of their tokens . Metadata and Art . thankfully , We can do it in Solidity To do this . It is with OpenSea compatible .

How to store images on the chain ?

We can store anything on the chain , The problem is how to store it . We are likely to want to base64 code , And prefix it / Add more information to the suffix , So that the computer knows what it is looking at . This is it. OpenSea How it works , I've tested .

Intelligent contract （ Or library ） It can be used to encode data as on chain base64. I used this library . This is a Loopring What the team did .

Now? , Aimed at NFT In our smart contract , We hope to be able to SVG The data is encoded as base64, And add the correct information prefix .

function svgToImageURI(string memory _source) public pure returns (string memory) {
    string memory baseURL = "data:image/svg+xml;base64,";
    string memory svgBase64Encoded = Base64.encode(bytes(string(abi.encodePacked(_source))));
    return string(abi.encodePacked(baseURL, svgBase64Encoded));
}

This function will be later safeMint Function is used in another function of , But in essence, it will SVG ’ string ' Encoded as base64, And encode it and return it to Solidity For further processing .

SVG It's not a string , They are images , Right ?

No , They can be regarded as images , But they are just written in code , Very similar to HTML.

How does the image look ?

Because I have tested a potential client before , So I also found a simple SVG File to test . It's in ordinary SVG It looks like this in :

base64 Code it to look like this :

data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNTAwJyBoZWlnaHQ9JzUwMCcgdmlld0JveD0nMCAwIDI4NSAzNTAnIGZpbGw9J25vbmUnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZmlsbD0nYmxhY2snIGQ9J00xNTAsMCxMNzUsMjAwLEwyMjUsMjAwLFonPjwvcGF0aD48L3N2Zz4=

We can copy the encoded string and paste it into the address bar of the browser , To see the actual parsed SVG( At least in the Chrome It's like this ). That's what we're doing , We make it readable for browsers , In addition, we need to make it accessible to browsers , Blockchain is why we use abi.encodePacked() The reason for further coding it .

Notice the first of the strings ( bold ). That is to say data It's a imagefromsvg+xml Type of coding base64.

​ There is no problem for the browser to read it

Yes TokenURI Encoding

TokenURI( Usually ) It refers to JSON Link to file . however , Like a picture , We can also JSON Document carried out base64 code , And use the correct prefix to make it readable in the browser . We didn't use SVG Prefix , But use data:application/json;base64 To let the browser know that it is a base64 Coded json file .

We can also do that Solidity Create the entire file . We code it , Recode , Recode . Although this code looks interesting , But it's neat , But it applies to OpenSea.

function formatTokenURI(string memory _imageURI, string memory _name, string memory _description, string memory _properties) public pure returns (string memory) {
        return string(
            abi.encodePacked(
                "data:application/json;base64,",
                Base64.encode(
                    bytes(
                        abi.encodePacked(
                            '{"name":"', _name,
                            '", "description": "', _description, '"',
                            ', "attributes": ', _properties,
                            ', "image":"', _imageURI, '"}'
                        )
                    )
                )
            )
        );
    }

As a parameter , I use tokenURI Have different properties , And use encodepack As a way to paste all strings together ( because JSON Can be used as a string ).

Be careful :_properties Value is a string that can be an array , such as “[1,2,3]”.

We use the imported library to finally JSON Encoded as base64, And use... Again encodepack Prefix it , Make it available to browsers , Like it's a routine URL equally .

ContractURI?

In addition to giving each token information TokenURI outside , We also have ContractURI. It provides overall information about the collection ,OpenSea also ( Up to a point ) Support this . Except for the contract address , We don't need to be in OpenSea Add anything manually in .

I code it with the following code . It is similar to TokenURI, But there are fewer options . I just put the whole ContractURI JSON Pass as a string .

function setContractURI(string memory contractURI_) public onlyOwner() {
        _contractURI = string(abi.encodePacked(
                "data:application/json;base64,",
                Base64.encode(
                    bytes(
                        contractURI_
                    )
                )
            ));
    }

Be careful :OpenSea Information will not be collected from blockchain updates , So add it to OpenSea It needs to be set once before ！

Forge new tokens

Because everything is on the chain , So more information is really needed to forge new tokens . We also need to set all the information ( Or later setTokenURI() Function to set ), Instead of simply checking the price or creating a new token .

function safeMint(string memory _source, string memory _name, string memory _description, string memory _properties) public onlyOwner() {
    _safeMint(msg.sender, _tokenIdCounter.current());
    string memory imageURI = svgToImageURI(_source);
    _setTokenURI(_tokenIdCounter.current(), formatTokenURI(imageURI, _name, _description, _properties));
    emit tokenChanged(_tokenIdCounter.current());
    _tokenIdCounter.increment();
}

therefore , We sent more information and safeMint function , Such as _description、_name、_source (SVG) and _properties, Then we all use the functions described above to code them .

Conclusion

Although creating an online collection looks cool , But be careful , For those who will make tokens , It's very cheap . We must submit more data to the blockchain , This will consume a lot of gas.

Source：https://medium.com/quick-programming/how-to-implement-fully-on-chain-nft-contracts-8c409acc98b7

About

ChinaDeFi - ChinaDeFi.com It's a research driven DeFi Innovation organizations , We are also a blockchain development team . From all over the world every day 500 Close to a good source of information 900 In the content , Looking for deeper thinking 、 Sort out more systematic content , Provide decision-making assistant materials to the Chinese market at the fastest speed .

Layer 2 friends sharing same hobby - Welcome to Layer 2 Interested blockchain technology enthusiasts 、 Study and analyze people and Gavin（ WeChat : chinadefi） contact , Discuss together Layer 2 Landing opportunities . Please pay attention to our official account of WeChat “ Decentralized financial community ”.