Create an Art Marketplace in Ethereum with ERC-721 Tokens in 10 Minutes Using 0xcert

In this guide you’ll learn step-by-step how to create a decentralized art marketplace for the Ethereum blockchain using the powerful 0xcert framework so that you can learn to create unique ERC-721 assets identified by tokens.

In this 10 minute guide we’ll explorer the following topics:

1. A quick summary about ERC-721 tokens
2. What is 0xcert? What can I do with it?
3. Why should I care, how can it help me?
4. 0xcert’s Pros and Cons
5. Creating an Art Marketplace on the Ethereum Blockchain
6. Setting up the React.js Application
7. Creating the React.js User Interface
8. Using 0xcert for Generating ERC-721 Tokens

1. A quick summary about ERC-721 tokens

I believe it’s important for you to understand what we mean by ERC-721 token to get the idea behind what 0xcert is providing for you as the developer so that you can benefit from their protocol. Technically speaking, an ERC-721 Smart Contract must implement the following functions:

• balanceOf(address _owner): Counts the number of tokens the address has in its possession.
• ownerOf(uint256 _tokenId): Returns the owner of a specific token ID.
• safeTransferFrom(address _from, address _to, uint256 _tokenId, bytes _data): To transfer a token to another user given the addresses, the token ID and an optional data parameter. It fails if you send to a contract that hasn’t implemented ERC-721 receiving functions.
• transferFrom(address _from, address _to, uint256 _tokenId): to transfer tokens to another address without checking if it’s a contract that implemented ERC-721 or not.
• approve(address _approved, uint256 _tokenId): allows another address to manage a specific token.
• setApprovalForAll(address _operator, bool _approved): enables or disables an external address to manage all of your tokens.
• getApproved(uint256 _tokenId): returns the approved address for a single token.
• isApprovedForAll(address _owner, address _operator): returns if an address is able to manage another address’s tokens.
• supportsInterface(bytes4 interfaceId): returns true if a contract implements a specific interface.

The ERC-721 is essentially the same as ERC20 but for individual assets with transfer and approval functions.

For more information refer to the official ERC-721 docs: https://github.com/ethereum/EIPs/blob/master/EIPS/eip-721.md

2. What is 0xcert? What can I do with it?

0xcert (0xcert.org) is a set of javascript libraries and smart contracts that provides tools for building dapps that deal with digital assets like certificates, art, collectibles and skins for games and for values such as ERC20 tokens. Assets meaning non-fungible tokens (NFTs) that adhere to the ERC-721 standard.

Non-fungible tokens are those that represent some kind of digital element with its properties and values instead of the classic ERC20 token that only represents a type of cryptocurrency.

Each ERC-721 token is unique and distinguishable so you can prove ownership of a specific thing in the network, which is great for all kind of real-world and digital assets like houses, cards and even loans. So 1 ERC-721 token represents 1 unique asset.

3. Why should I care, how can it help me?

First of all, the 0xcert framework is free and open-source which is quite a positive way of providing value for developers that want to create ERC-721 applications since you can be sure that you won’t have to pay for their high-quality code.

Their premise is simple:

To increase adoption of non-fungible tokens because they are hard to implement given their complexity and because we’re lacking standards that allow applications to interact with each other, so that developers can work faster while creating dApps that communicate with each other like a decentralized exchange but with assets.

Not only that, they are creating tools that improve the digital asset protocol further to fix some of its issues such as limited parallel transfers of tokens because right now you can only send 1 asset to another person simultaneously, you can’t easily process many transfers quickly.

That’s why they are building Javascript and smart contract libraries with their API, to help developers create these new types of tokens which will result in increased adoption of useful blockchain technology for real-world problems.

You can learn more about it in the official docs: docs.0xcert.org

4. 0xcert’s Pros and Cons

What’s great about this project?

• The documentation is fantastic, they walk you through all the steps explaining concepts from the very basics so that everybody can understand them. Although it’s limited in content.
• They are improving the technology behind ERC-721 with their own systems so that they work on large scale dApps.
• The size of their npm packages is greatly optimized for front-end development since they paid special attention to compressing and minimising their code as much as possible for optimal efficiency.

What can be improved about 0xcert?

• The tutorials should be more complete with more examples teaching the reasoning behind every action and real-world implementations of the entire system.
• Their smart contracts should be explained to help users understand how they work together and where they fit in the system.

5. Creating an Art Marketplace on the Ethereum Blockchain

An art marketplace is one of the best use cases of non-fungible tokens given that we can identify each unique piece with a provable secure number that also helps to track changes about who owned it in the past. Great for making sure that the piece has been in the right hands.

That’s why you’re going to learn how to create a digital art marketplace for selling digital artistic creations such as those that you find on DeviantArt and dribble. We’ll start by setting up the project in react.js, then the user interface and finally implement the framework for making our entire ERC-721 application.

6. Setting up the React.js Application

In this project we’ll use react because it’s a powerful technology for managing applications once setup. Let’s start by setting up all the essentials for using react properly.

First, create a new project called art-marketplace. Inside, run the command npm init -y to setup node.js so that you can install node packages. Install the following packages like so:

npm i -S @0xcert/cert @0xcert/conventions @0xcert/ethereum-asset-ledger @0xcert/ethereum-metamask-provider @babel/core @babel/preset-env @babel/preset-react babel-polyfill babel-loader css-loader html-loader html-webpack-plugin react react-dom style-loader webpack webpack-cli

That huge line of code will install the require 0xcert dependencies, babel, webpack and react.

Then create 2 folders: dist/ and src/. The source folder will contain the uncompressed react code while the distribution folder will contain the files that will be sent to your users.

Now create a webpack.config.js file to setup the compiler that will generate our distribution code. Here’s how it looks like:

We’re essentially setting up the entry, output, the loaders for css, html and javascript.

Inside the src/ folder create an index.ejs file containing this basic html structure:

HtmlWebpackPlugin is the plugin we installed at the beginning. You now will see the changes every time you compile webpack without having to clear the cache because a new html file will be generated.

Then create 2 empty index.js and index.css files which we’ll use in the next section with our entire application’s code.

7. Creating the React.js User Interface

In this section we’ll write the entire code for designing our 0xcert react application that will generate an art marketplace where you can create unique art pieces. First setup the structure commonly used in many react applications inside index.js:

Then create the babel configuration file which is required to let webpack know how to process these types of files. Create a file called .babelrc and put this content inside:

That will compile your files properly. To see your application, bundle your code by running webpack -d on your root project folder and setup a static web server with http-server dist/. If you don’t have it, you can install it easily with npm i -g http-server

Which will generate a static server for you that you can open at localhost:8080. You’ll see a message on the website saying, “The project is setup.” which is exactly what we coded in the react file.

We now need to add a few buttons and information to help people understand what’s going on. Change your render function to the following:

As you can see, I’ve added an h1 tag with a paragraph to describe the project clearly, then we’ve added a container that will hold all of our art pieces and a couple buttons to deploy and update your collection. Take a look at the changes by compiling with webpack -d and running the server again.

If you get tired of constantly having to re-bundling the code, you can run webpack as a service with the command webpack -w -d where the -w flag means watch so that it updates the bundle every time you save some changes in your files. The flag -d means development which doesn’t minimize your code for better error messages.

After your application is complete, use the flag -p instead of -d which means production for improved speed and reduced bundle size. Improve the appearance of the project with some css:

So that it looks like so:

Now that you have the design done, let’s move on onto adding the 0xcert functionality to create assets and interacting with them.

8. Using 0xcert for Generating ERC-721 Tokens

The way 0xcert generates ERC-721 is very interesting. Each token is sorted in Assets, Asset Ledgers and Blueprints. The process goes as follow:

1. Define a schema which contains information describing the asset. Think of an asset ledger as a box of toys, each asset as a toy and the schema as a text describing what’s inside that box. The schema will determine the name of each asset, the description and any other feature you’d like to add. Each schema has different mandatory properties. For instance, if you use the schema 88 to define your assets, you must setup a name, description and image for each token. Then you can add more optional properties up to you such as age or color. In that schema 88 you also have to use the $schema property to let others understand that you’re following that specification.
2. Deploy an asset ledger that will contain 1 type of asset. A ledger contains 1 type of asset with its unique properties, for instance: the hotel asset ledger contains 30 hotels with the same properties such as number of rooms. The apartments asset ledger contains 100 different apartments and the penthouses asset ledger contains 20 different penthouses. We are creating different versions of houses in each ledger while each ledger contains identical copies.
3. Create a new asset inside the deployed ledger with a unique id. If you try to deploy that asset again, you’ll receive an error. The asset is associated with the account of your choice, generally yourself.

You can then transfer, delete or create new assets. Usually ledgers are managed by various accounts so they can create or delete assets as needed. Note that assets are identified by numbers. Each number id must be unique. You can make approval like with ERC20.

First we need to import the required 0xcert libraries, do so with these imports at the top of your file:

You can omit the comments if you want, they are for clarification purposes. We need the MetamaskProvider for using metamask in our application. Then schema88 which is our blueprint describing the type of ERC-721 tokens we want to create, it’s where we define the characteristics of our asset.

Then we imported the Cert library which is used for certification of your assets. The AssetLedger class will be used for creating and using ledgers while the AssetLedgerCapability will be used to indicate the permissions that our ledger has when it comes to using the tokens inside it.

Remember, the process that we’ll follow is:

1. Create the schema with the properties of our Art Pieces.
2. Deploy an asset ledger with the schemaId that you wish to use.
3. Create as many new assets as we want inside this ledger. Note that you must generate a new imprint for each asset.

Now we can start to create our blueprint. To do so, create a function inside your react project like so:

The asset object provides the name, description and an image of the art piece we’ll use. You can define as many properties as you want like color, size, age and so on, the idea is to provide as much information as possible about the asset for your decentralized applications. The schema88 that we’re using in this example,

Then we are generating the imprint. The imprint is a unique hash containing those asset inputs. It’s a cryptographic proof for verifying the token. Then the expose function is just used to read properties of the imprint which in this case is the [‘name'] and the [‘image'] url. Setup your asset properties or use the same as me and console.log the imprint and expose functions, you can see the result on the console of the developer tools.

Update your code like so and run the project again:

You can see that the blueprint has been created successfully from the expose function:

Now you can create a function to deploy asset ledgers like so:

The schemaId required for deploying the asset ledger is one of the conventions used by 0xcert to allow your dApp to communicate with other dApps using the same standard. The goal is to have multiple schemas approved by the community defining different asset classes. In our case the schemaId used is the schema88 identified by the id:

0xa4cf0407b223849773430feaf0949827373c40feb3258d82dd605ed41c5e9a2c

Which I got from the official schema definition here https://github.com/0xcert/framework/blob/master/conventions/88-crypto-collectible-schema.md:

This schema88 defines information about crypto-collectibles so that you can use ERC721 collectibles from other application as well as them from you if you wish to do so.

You’ll receive the address of the deployed ledger in your developer tools’ console. So be sure to run this function whenever you need a new ledger and store the address somewhere safe:

Notice how I’ve executed the deployNewLedger() function directly from the componentDidMount() method. Now run webpack again and be sure to have a running static server with http-server dist/, then open your dApp and you’ll be able to deploy your asset ledger after loading to ropsten:

After the transaction is confirmed, you’ll see the deployed asset ledger address on the console:

Copy that address for the following new function:

// To set the ledger as a state object
async setExistingLedger() {
    const ledgerAddress = '0x0c2eD196797b2e5a45079BB7bfe8f568Ba2C4d5e'
    const ledger = AssetLedger.getInstance(this.state.provider, ledgerAddress)
    await this.setState({ledger})
}

Now that you’re familiar with the process, let’s take a look at the completed code that integrates 0xcert with blueprints, assets and ledgers. Remember that we want to create an art marketplace to deploy and examine tokens:

I’ve added a function to setup the metamask provider in our component’s state with new MetamaskProvider(). A function to instantiate an existing ledger with AssetLedger.getInstance(). A function to deploy an art asset, using the ledger.createAsset() function. A function to get user’s balance which is just the counter of how many assets you own with ledger.getBalance(). And finally I’ve created a new component called ArtPiece which contains a single asset with its properties.

As you can see it’s a pretty complex application. Take your time and remember that once you have setup your blueprint with an imprint and disclose inside evidence.json and created your uriBase.json, you can start deploying ledgers and assets. Here’s how the application will look like at the end, be sure to use it on ropsten for saving ether:

Additionally, you’d have to setup a server that creates a URI link to each token. For instance, if your token is in art-martketplace.com/tokens (fake website for demonstration purposes), then you’d have to create a server that generates URIs like art-marketplace.com/tokens/10 where 10 is the identifier number 10 of your token. It’s a fundamental way to show users the existence of a particular token while displaying the properties of the token.

Hope you learned something useful. If you did, be sure to learn more advanced techniques by getting my book “Ethereum Developer — Learn Solidity From Scratch” available on my website merunas.io.

Join our Ethereum Developer community by following this publication and joining our awesome facebook group here: https://www.facebook.com/groups/ethereumdevelopers/

If you want more personalised guides and my own advice, join my email list where you’ll get weekly and monthly tutorials for advancing to the next level here: http://eepurl.com/dDQ2yX