Instant Crypto Exchange Dapp (Ethereum, Smart contracts)

6 min readJul 18, 2021

Introduction:

Crypto Exchange Dapp serves as an instant exchange for swapping a ERC-20 crypto Token with ETH at a fixed rate.

The Decentralised application or D-APP is built on robust Smart contracts, tested on Mocha framework and deployed on Rinkeby Ethereum test network.

Features:

Built on robust smart contracts using Solidity programming
Instant crypto Exchange with no time wait needed to fill orders.
Deployed to Rinkeby network and available on GitHub pages here
Users/Investors can buy and sell tokens (swap) with ETH instantly.
Test driven development (JS) for handling exceptions and smart contract logic.
Async / await to handle JS promises & asynchronous function calls.
App Frontend built using React JS reusable components and JS/HTML.
Displays account details, ETH & Token Balance in app UI along with custom avatar.
Easy toggle between buy and sell interfaces using react state handler.
Window alerts to check Metamask integration in browser and dapp deployment.

Tools:

Ethereum, Solidity, Ganache CLI, Truffle framework, Metamask, web3.JS, React.JS, HTML

Working:

Smart contracts — in a nutshell:

Generally, small pieces of code which live on the blockchain network.
Contain the main business logic of the application (dapp).
Immutable and execute on the (Ethereum) blockchain.
Reads and writes data (uses gas fee) on the blockchain.

Note:

Since they are immutable, any changes will not replace the existing smart contract. However, they will be deployed to blockchain as a new copy of the smart contract.

The instant crypto exchange Dapp requires 2 smart contracts:

1. SASI Token (ERC-20 token)

2. ETH Swap Exchange

Client-side web app talks to (Ethereum) Blockchain which then hooks up to the token swap (ETHSwap) smart contract and SASI token smart contracts.

Following should be configured correctly for the application to work as intended.

Dapp needs to be connect to blockchain (where smart contracts are deployed). To achieve this, web3 js library was used along with methods inside it.
Browser needs to be connected to the blockchain (refer Metamask section below)

Feature: Custom avatar (identicons) based on user account.

To generate custom-style identicons in JS, I made use of Identicon.js package. (Github repo)

This package generates avatars based on a hash created from web3 accounts.

React JS:

Reusable components created for buying and selling tokens using React JS.
Keep track of token purchase and sale using events in the smart contract.

React JS Components:-

App.js
BuyForm.js (token < > ETH swap)
SellForm.js (token < > ETH swap)
Navbar.js

React JS state objects maintain state data (for the app) and are somewhat like tiny, un persistent Databases. More information here (https://reactjs.org/)

Crypto Exchange dapp uses react JS state object heavily to store data coming from the blockchain. (e.g. account balance, address, ether balance)

this.setState({variable: value}) : set a value to the state object

this.state.variable : access the value stored in the state object

The dapp UI shows account and balance based on above values from web3.

Essentially two identical forms created with HTML buttons (Buy/Sell) set as a toggle.

Note: The Buy form loads up in the Dapp UI as default.

buyTokens:

To actually buy tokens, we need to use send function (instead of call) which would write data to the blockchain.
This generates a blockchain transaction receipt along with a hash.

NOTE:

Every send function call ( send()) requires gas fee to be paid and hence should be used only when absolutely necessary.

sellTokens:

For selling tokens in the Dapp, two processes should occur.

Essentially, the exchange smart contract (ETHSwap) actually sells the tokens on behalf of the user.
Hence, this sale should be approved by the user through an approve function, which is called on the token smart contract (and not the exchange contract) and only then the selltokens function gets executed on the blockchain.

On the UI, this is shown as a Metamask pop-up confirming the user’s approval for sale for tokens and then another pop-up to actually execute the token sale.

Events:

Solidity allows for events to be emitted when something happens, for example when tokens are purchased and/or tokens are sold. ( TokensPurchased , TokensSold events )

These events can be subscribed or watched to create dynamic code.

Tests:

Tests built with Truffle test framework using Mocha Framework & Chai assertion.

Basic tests for token & token sale smart contracts deployment.
Users can’t sell to the exchange, more tokens that they have.
Exchange should have sufficient tokens for the exchange.

Metamask:

Metamask is a special browser extension which makes it talk to a blockchain.

It’s also an Ethereum wallet which has information about accounts, balances on different blockchains (for example Ethereum main net, Rinkeby test net)

Note:

Essentially, Metamask connects to a blockchain node (for example Ganache on a local blockchain setup) and then exposes this information as a provider to web3 JS.

Dapp Backend to Frontend Integration:

Web3 to Metamask connection config code:

Defining Token smart contract and get balance using React JS state object

Loading token swap (ethswap) contract:

Window alert popup if smart contract is not deployed to selected network:

Form updates dynamically on user input, based on Eth to Token rate

( 1 ETH = 100 SASI)

Note:

For the sell functionality, code is added in Sellform.js , with the rate being reversed ( 1 SASI = 0.01 ETH) and for tokenAmount instead of etherAmount.

Deployment:

Crypto exchange Dapp is currently deployed to Rinkeby Ethereum test network.

Instead of starting afresh, I followed steps listed out in the article here and deployed the dapp using Infura.

Rinkeby is a “Proof-of-Authority” network, which means that blocks are signed by well-known trusted community members. This prevents attackers from taking over the mining power on the network.

Infura offers Infrastructure-as-a-service for Ethereum, which offers developers a suite of tools to connect their apps to the Ethereum network and other decentralised platforms. It is a hosted Ethereum node cluster that let your users run your application without requiring them to set up their own Ethereum node or wallet.

Smart contract deployment details: