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

  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

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

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

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

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.

4. 0xcert’s Pros and Cons

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

6. Setting up the React.js Application

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

7. Creating the React.js User Interface

8. Using 0xcert for Generating ERC-721 Tokens

  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.
  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.
0xa4cf0407b223849773430feaf0949827373c40feb3258d82dd605ed41c5e9a2c
// 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})
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Merunas Grincalaitis

Merunas Grincalaitis

Blockchain expert. Get my new Ethereum book on Amazon: https://amzn.to/2KBBNyu and my previous one here: https://merunas.org/book