Decentralized Exchanges Workflow

Decentralized exchanges, also known as DAXs, are a hot topic for the simple reason that all cryptocurrencies need to be exchanged by others to give them some kind of utility. Could you imagine a world where you couldn't trade Bitcoin for dollars? Or Ethereum for Bitcoin? It would destroy the real-world utility of most cryptocurrencies. That's why we have exchanges, to allow the trading of all kinds of currencies in a free market. We'll start by working on an explanation about DAXs so that you understand the idea behind them. Then you'll understand how the orders are made and how to manage user funds in a secure manner. After that, you'll create a real-world DAX with a complex smart contract and a detailed interface.

In this chapter, we'll cover the following topics:

• Introducing decentralized exchanges
• Understanding...

Introducing decentralized exchanges

What are DAXs, really? Well, normal exchanges, such as the stock market, are built upon a centralized system where a server processes all orders and displays the results to the users. They run very efficient systems that are quite expensive to set up, although it's understandable given the utility they provide. DAXs, on the other hand, don't rely on a centralized system where all orders have to go through a server that makes the necessary computations. Instead, DAXs work on top of Ethereum's infrastructure to provide users with a system that can be executed by anyone and processed by the gigantic net of computers.

The first difference with DAX compared to centralized exchanges is that they are limited by the technology behind them. You can't create a DAX that trades fiat currencies, such as the American dollar or the European...

Understanding the trading and matching engine

A trading and matching engine is a set of functions that use different types of algorithms to create and close orders. An algorithm could focus on completing the orders with the higher price or those that were executed earlier. It depends on the preferences of the developers. Because we'll work with smart contracts and ERC20 tokens, our engine will focus on completing the orders as quickly as they come, since it will be the users that close the orders, given that the frontend is where most of the logic will be.

We can't process large amounts of information on smart contracts since gas is expensive, so we let the React application take control of the trading to save people's funds.

Let's start by planning the functions that we'll need so that we have a solid foundation when we create the contracts and the frontend...

Managing cryptocurrency wallets and cold storage

When it comes to storing people's funds, we must pay extra attention to how we do it since we could risk losing millions of dollars using our DAX. That's why the largest exchanges use cold storage with lots of security systems in place. Essentially, they keep funds offline in a remote location stored in secure hardware devices that are customized to their needs such as Trezor, Ledger, or their own.

In our case, we'll store funds in a series of smart contracts, known as escrows, whose only goal is to store people's money. There will be an escrow contract associated with each user account to independently secure all of their funds. That escrow contract will have a function to receive funds, only ERC20 tokens, and a function to extract funds executable by the owner of that escrow. Go ahead and create a folder...

Building the user interface

The user interface for DAXs is the same as the ones used for traditional exchanges, such as the stock exchange, or centralized crypto-exchanges, such as Binance. The idea is to provide a data-driven design where they can quickly understand the situation of the selected token pairs. A central section will be used for the data, a sidebar will be used for the actions that users may take, and an additional sidebar to the right will be used for secondary data; in our case, it will be used for past trades.

As usual, create a src and dist folder that will include our project. You can just copy the setup from previous projects by taking a look at my own version on github.com/merlox/dapp. Our design will be based on most exchanges since they have a studied formula that feels great. Create the sidebar with a new component inside your index.js file.

First, add...

Building the Ethereum backend

The backend for our project will take care of generating trades that can be filled by anyone as long as they have enough funds to pay the established price. When the user gets registered, they'll deploy an Escrow contract which will be used by our main DAX contract. So let's start by setting up the requirements and the contract structure before starting to fill all the functions to practice the system to improve, developer's efficiency that we studied in Chapter 4, Mastering Smart Contracts.

Start by defining the functions that we'll need in a big comment at the beginning of the file:

// Functions that we need:
/*
    1. Constructor to setup the owner
    2. Fallback non-payable function to reject ETH from direct transfers since we only want people to use the functions designed to trade a specific pair
    3. Function to extract tokens...

Finishing the dApp

Now that we have a working smart contract with our desired logic, we can implement the dApp using Truffle and web3.js in a simple React application. Start by importing the required components inside your index.js file:

import React from 'react'
import ReactDOM from 'react-dom'
import MyWeb3 from 'web3'
import './index.styl'
import ABI from '../build/contracts/DAX.json'
import TokenABI from '../build/contracts/ERC20.json'

const batToken = '0x850Cbb38828adF8a89d7d799CCf1010Dc238F665'
const watToken = '0x029cc401Ef45B2a2B2D6D2D6677b9F94E26cfF9d'
const dax = ABI.networks['3'].address

We'll use only two tokens in this prototype for you to learn how to create the application since a fully-featured DAX is outside the scope of this book. The goal is to show you the path so you can...

Summary

In this chapter, you learned how to build a DAX from scratch, going from the idea of how exchanges work, to the user interface using react and truffle, to creating the required smart contracts so that you saw for yourself how a fully-decentralized system works, to finally combining it all together in a beautiful dApp that communicates with your deployed contracts and tokens. You learned about the differences between traditional, centralized cryptocurrency exchanges and fully-featured DAXs, so that you can choose the best type for your requirements.

After that short introduction, you got into the technical aspects of the DAX by understanding how we implement the trading and matching engine via a set of smart contracts. Finally, you developed a clean interface without graphs to keep it simple, and you integrated all the complex smart contract logic via manageable components...