How to create a crypto decentralized exchange in 1 hour (for non technical users)
By reading this article you will learn how to setup and build your own custom DeFi exchange on Solana to trade derivatives. It is aimed at non-technical users, so you will be able to do this even if you are NOT a software engineer, trust me it’s really cool!
Intro
This is a series of articles on how to build a Defi exchange structured as multiple tutorials, each time you will be adding more functionalities to your own custom exchange. At the end of this tutorial you will be able to deploy on your local machine a DeFi marketplace where you can trade derivatives on an asset of your choice. The backend of your exchange is operated completely on-chain using the smart contract infrastructure provided by Vyper Protocol.
For the sake of this article, I will deploy an exchange where users can trade gold contracts.
As mentioned above, this tutorial is aimed at non-technical users (eg. you will be able to deploy this even if you are not a software engineer) thus I will not go too much into the technicalities of what is happening under the hood, but just focus on a high-level description. If you are interested into a more technical explanation we will have more content on that soon, meanwhile feel free to check our Github.
Pre-requisites
In this part we are installing VS Code, Node and Yarn so feel free to skip to next section if you have those already setup.
- I am using Visual Studio Code on my machine, so download that or feel free to use other IDE. VS Code is well integrated with Github and makes my life easier.
- Node (you will need to install node on your machine, how to do this depends on the OS you are running, go on the official Node website and get the correct LTS Long Term Stable release for Windows, macOS or Ubuntu)
- Yarn package manager (to install the other required packages)
# run the following via the command line to install Yarn,
# you need Node and npm installed on your machine. npm comes with Node.
npm install --global yarnGetting the right files from Github
Open VisualStudio and select ‘Clone Git Repository’, we use this command to clone an existing repository from GitHub.
In the bar that opens at the top, click on “Clone from GitHub” and input the following URL
Create a new folder or pick an existing one, the Github repository will be cloned/downloaded in your selected folder. VS Code will ask if you want to load that folder in your workspace, select “Yes/Open”. This is how it looks, on the left-end side you see the files inside the project, don’t get scared by the sheer amount of files, we will only work with one of them.
In the top on the screen, find “Terminal” and click on “Open a new Terminal”. This will launch an instance of the terminal in VS Code and you will be able to execute commands. For example, let’s check which version of node, npm and yarn we are running with the following commands:
node --version
npm --version
yarn --version
Installing the packages and preparing the environment
We have now downloaded the repo from GitHub, however some packages/libraries are still missing. Why? When shipping code, you don’t want to upload to GitHub every single package, this would be extremely inefficient and repetitive. Instead, developers add to their codebase a small file that keep track of all the packages required to run code in the repository. Here, that file is called ‘yarn.lock’ as we are using Yarn package manager (we downloaded it before, remember?).
Open ‘yarn.lock’ by clicking on it and you’ll see it’s a long of list of packages, they will get installed in the next step. In the terminal run
yarn installAll packages in ‘yarn.lock’ are now being downloaded and installed in a folder called ‘node modules’.
Deploying the platform on your local machine
In the terminal run
yarn dev
This is starting a local development server on your machine, you can head to the link in the command line (http://localhost:3000/) and you will get the locally generated page of the exchange.
This is the front-end your exchange, the back-end is Vyper Protocol, an infrastructure to create, trade and settle onchain derivatives.
Derivatives are financial products whose value depends on another asset, for example commodities, crypto, forex, etc. They allow investors to trade and hedge against potential changes in the value of the underlying asset without actually owning it. For example a derivative on gold allows you to reap the benefits of investing in gold without the added costs and risks associated with buying and storing physical gold (going LONG gold). Or it allows you earn if the price goes down (going SHORT gold).
You can already interact with it and try to place a trade. Remember, this is running on the Solana blockchain, so you will need a wallet like Solflare or Phantom, and you will need some devnet SOL, if you do not have any you can get an airdrop from this faucet .
Click on ‘Create Trade’, approve the transactions and voilà, your XAU/USD derivative got deployed on-chain. You will be redirected to a new page looking like ‘http://localhost:3000/contract/summary/PUBLIC_KEY’ where PUBLIC_KEY is the on-chain representation of the derivative contract you just created.
You can choose to go LONG or SHORT this derivative, which has the following characteristics:
- Strike: 1792$
- Size: 1 contract of XAU (gold)
- Expiry: 30 days ahead from today
- Collateral deposited by LONG/SHORT is 100 devUSD (fake USDC)
In 1 month, if:
- XAU/USD goes up by X% | LONG earns X% and SHORT loses X%
- XAU/USD drops by X% | LONG loses X% and SHORT earns X%
Changing the platform to fit your exchange needs
Nice, now you can trade gold, but what if you want to modify the asset and trade other tokens such as bitcoin? We need to get our hands a bit dirty, have a look at some pieces of the code and modify them. Let’s do it!
In the left-end Explorer open ‘/src/pages/index.tsx’, this is the HOME page. The .tsx extension is a file extension for a TypeScript file that contains JSX, which is a type of JavaScript used for building user interfaces. This allows us to write HTML elements and components in the same file, making it easier to write and manage code.
I will now highlight some parts of the code and invite you to edit them with the objective of:
- changing the asset from gold to bitcoin
- changing the duration of the contract from 30 days to 1 week
- changing some graphical component (logo/text)
Changing the asset
As mentioned above, the infrastructure behind your exchange is Vyper Protocol. Vyper is agnostic to which assets can be traded, as anything which is available to on-chain oracles can be traded on Vyper. At the moment Vyper supports two oracle providers — Pyth Network and Switchboard — meaning that any data feed available on those platform can consumed and traded on your exchange. In index.tsx you will find:
// oracle to be used, 'pyth' and 'switchboard' are available
const oracle = 'pyth';
// pubkey of the asset to be used from the above oracle
const PUBKEY_ASSET_ONE = '4GqTjGm686yihQ1m1YdTsSvfm4mNfadv6xskzgCYWNC5';In the fragment of code above, we are specifying which oracle and which data-feed we want to trade in the derivative contract. For the sake of this example, I used Pyth and XAU/USD (gold).
HOMEWORK — Can you try to update those and select a different data feed for example BITCOIN?
- For assets available on Pyth, go HERE
- For assets available on Switchboard, go HERE (and select Solana-devnet)
Once you update ‘PUBKEY_ASSET_ONE’ and ‘oracle’ values, save the file and you will see the following happening in the console. This is your webpage being re-compiled in real time, meaning the edits are already live.
Go to http://localhost:3000/ and you will see LIVE price is now the real-time BTC price, not XAU (gold) anymore. If you click on ‘Create Contract’ and initiate a trade you will see the asset has changed there too.
Changing the duration of the contract
We want now to update the duration of the contract, from 30 days to 1 week. In the same index.tsx you will find:
const settleStart = moment().add(30, 'days').toDate().getTime();Here we are setting the settlement of the contract 30 days from the initialization of the trade. Remember, changes are implemented live as soon as you save the file.
HOMEWORK — Can you try to change the settlement time to 7 days?
Changing graphical components
Ok, you now have updated the terms of the derivative contract (changed asset to BITCOIN and changed settlement to 7 days), but all text and images on the webpage are still about gold. Can you change those to reflect the new updates?
In the same Index.tsx you will find some HTML components, you can modify those to update text and images around the webpage.
Feel free to play around with it, and try to do the following:
- Change the title
- Replace the image in the home page
- Update the FAQ at the end of the page
To understand which part of the code you need to edit, I suggest having VS Code and the browser at http://localhost:3000/ side by side, compare where a certain text shows in the webpage versus the code, and try to edit.
As usual if you edit Index.tsx and save, the webpage is updated in real time.
Conclusion
If you followed everything you should now have a webpage that allows to create derivatives on a asset of your choice, with a settlement some days in the future. You have updated the logo and the text on the webpage too.
If you now click on ‘Create trade’ you will deploy an on-chain derivative contract which reflects all the information you previously updated (asset, expiration, etc). It looks like this:
Trading and sharing the derivative
Each derivative has two parties: a buyer and a seller. Whether you want to buy the derivative you click on LONG, if you want to sell it you click on SHORT. When choosing the side you also need to deposit money, here we are using a currency called devUSD which is a fake stablecoin. You can request an airdrop of devUSD by clicking ‘Airdrop’ in the top bar (you need to be connected with your wallet to see the button).
So now the derivative contract is deployed on-chain from your webpage running on your local machine, but how do you ‘trade’ it? You want to go LONG, and need somebody to go SHORT.
You decide to ping your friend Altcoin Psycho on Twitter to ask him to be your counterparty. How can you share the trade with him given that you are running the webpage only on your local machine? It’s extremely easy, just look at the URL in your broswer.
As mentioned above, the alphanumeric string at the end of the URL is exactly the PUBLIC_KEY of the onchain derivative that you created. You can go to https://solscan.io/tx/PUBLIC_KEY?cluster=devnet and see the exact log of the transaction if you are interested in that.
So the trick is get the URL in your local browser, substitute ‘localhost:3000’ with ‘demo.otc.vyperprotocol.io’ and you are done, you can share the new URL with your friend and they will be able to trade with you the derivative contract (they need devnet SOL and devUSD too).
For example:
LOCAL URL — http://localhost:3000/contract/summary/UBqCaXTXXymkkwwkK7CvXteATCUB3Z8UMMeg79Lz5Gu
SHAREABLE URL — https://demo.otc.vyperprotocol.io/contract/summary/UBqCaXTXXymkkwwkK7CvXteATCUB3Z8UMMeg79Lz5Gu
Conclusion
If you followed all the steps you were able to deploy on your local machine a running version of a Defi exchange to trade derivatives. You were also able to change the underlying asset, the expiration of the contract, and other graphical components on the webpage. Last — but not least — you created a derivative from your webpage and shared that with a friend.
In the next article we will look at how you can go from the webpage running on your local machine, to the webpage being deployed online and accessible by anyone. You will also learn how to implement a button to switch between different assets. We will also start looking more in-detail at the backend of Vyper Protocol (give it a FOLLOW on Twitter)
Share below a screenshot of the exchange running on you local machine and feel free to post any questions that you might have. See you soon!
