The concept behind decentralized exchanges is straightforward: enabling users to trade their cryptocurrencies directly on the blockchain through smart contracts while retaining control over their private keys.By the end of this tutorial, you will have a solid understanding of the fundamental principles behind decentralized exchanges and gain hands-on experience in building one.Let’s get started!<h2 style="margin-left:0px;">Prerequisites</h2>Before getting started, please ensure that you have the following prerequisites installed on your system:<ul><li><a href="https://nodejs.org/en/download/">NodeJS</a> (version &gt;= 10)</li><li><a href="https://classic.yarnpkg.com/en/docs/install/">Yarn</a></li><li><a href="https://git-scm.com/downloads">Git</a></li></ul><h2 style="margin-left:0px;">Getting Started</h2>To begin, navigate to the <a href="https://github.com/BuildBearLabs/scaffold-eth">scaffold-eth x BuildBear</a> repository.Here’s why we recommend using scaffold-eth x BuildBear:<ol><li>It allows you to easily fork EVM-compatible chains (such as Ethereum, Polygon, Binance Smart Chain, Fantom, Optimism, and Arbitrum Mainnet) directly from the CLI. Saving you valuable time that would otherwise be spent searching for working RPCs.</li><li>You can mint native and ERC20 tokens effortlessly using the CLI, eliminating the need to waste time searching for functional faucets.</li></ol>To get started, click on the “Fork” button to create a copy of the repository on your own GitHub account. Please wait for the forking process to complete before proceeding.Next, open a terminal and clone the forked repository, which includes all the necessary components for building a decentralized application:<pre><code class="language-javascript">git clone &lt;paste the URL you fork repo&gt;
cd scaffold-eth</code></pre>To install all the required packages, execute the following command:<pre><code class="language-javascript">yarn install</code></pre>To fork the Mainnet, use the following command: Choose your desired blockchain and enter the block number from which you wish to fork. Alternatively, you can leave the default value as is.<pre><code class="language-javascript">yarn fork-bb</code></pre><figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*JKjt4Lut0DSnKcgHaPjL5g.gif" alt="" loading="lazy"></figure>Deploying the contracts<pre><code class="language-javascript">yarn deploy</code></pre><figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*xb9PXVSOm36-qap6KPcJ7w.png" alt="" loading="lazy"></figure>Starting the frontend<pre><code class="language-javascript">yarn start</code></pre>Once the application is running, you can access it at <a href="http://localhost:3000/">http://localhost:3000</a> and you should see the following:<figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*UHtcRzo6cCzgvqyHzkdPGg.png" alt="" loading="lazy"></figure>Before diving deeper into the smart contract, let’s start by exploring the functionalities of the DEX. To begin, navigate to the DEX page.<figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*mxZTgQZu6ERl1l_LTNdDzA.png" alt="" loading="lazy"></figure>To claim free ETH, Connect your wallet and Click on grab funds from the faucet.<figure class="image image_resized" style="width:453.999px;"><img src="https://miro.medium.com/v2/resize:fit:381/1*KeAXhsa58pkr_7PCr8x9eA.png" alt="" loading="lazy"></figure>Token Swap<ol><li>Enter the desired token amount: As you enter the amount, please note that the graph will display the corresponding number of balloon tokens you will receive, along with the associated fee.</li><li>Once you’ve entered the token amount, click on the “💸” to proceed with the swap.</li><li>Approve the transaction on MetaMask: A MetaMask prompt will appear, requesting your approval for the token swap transaction.</li></ol><figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*YplhteQbjgpgVon8eeY58w.png" alt="" loading="lazy"></figure>To Check your Balloon token balance copy and paste your address and click on read.<figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*LZERZVjnCCItDsB-3vu9Yw.png" alt="" loading="lazy"></figure>Providing liquidity.<ol><li>Enter the desired amount you wish to provide as liquidity.</li><li>Once you have entered the desired amount, click on the “📥” .</li><li>Approve the transaction on MetaMask: A MetaMask prompt will appear, requesting your approval for the liquidity provision transaction.</li></ol>In the same way, you can also withdraw the liquidity you have provided.<figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*dwTXE_ezWpm8Ug40lM-3qA.png" alt="" loading="lazy"></figure>Once the transaction is completed, the total liquidity will be updated.<figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*0-YAM9NE0LvOShs7I5Rkdg.png" alt="" loading="lazy"></figure>Let’s dive deep into the Smart contractWe can find <code>DEX.sol</code> contract in <code>packages/hardhat/contracts</code>:<figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*uO-ulGV8UXx_sdNtUBdGVA.png" alt="" loading="lazy"></figure><ol><li>The contract uses the Solidity version pragma <code>&gt;=0.8.0 &lt;0.9.0</code> and is licensed under the MIT license.</li><li>The contract imports two external contracts: <code>IERC20.sol</code> from the OpenZeppelin library and <code>SafeMath.sol</code> from the OpenZeppelin library. These contracts provide standardized ERC20 token functionality and safe mathematical operations.</li><li>Global variables:</li></ol><ul><li><code>totalLiquidity</code>: Represents the total amount of liquidity provider tokens (LPTs) minted in the DEX.</li><li><code>liquidity</code>: Stores the liquidity balance of each depositor.</li><li><code>token</code>: An instance of the imported <code>IERC20</code> contract.</li></ul>4. Main functions in the contract:<figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*ZYlGZVuxYbfaeONpL4V9Ug.png" alt="" loading="lazy"></figure><ul><li><code>init(uint256 tokens)</code>: This function initializes the DEX with an amount of tokens transferred to the contract. It sets the <code>totalLiquidity</code> variable to the current balance of Ether in the contract, sets the liquidity balance of the caller (<code>msg.sender</code>) to the total liquidity, and transfers the specified number of tokens from the caller to the DEX contract.</li></ul><figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*qDgHTCbvx2XJS6y68hV90w.png" alt="" loading="lazy"></figure><ul><li><code>ethToToken()</code>: This function allows users to swap Ether for the token. It calculates the token output based on the current reserves and performs the token transfer to the caller. It emits an <code>EthToTokenSwap</code> event.</li></ul><figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*W-LPOS59Ae_8I4CE7IdUFA.png" alt="" loading="lazy"></figure><ul><li><code>tokenToEth(uint256 tokenInput)</code>: This function allows users to swap the token for Ether. It calculates the Ether output based on the current reserves and performs the token transfer from the caller to the DEX contract. It then transfers the Ether to the caller. It emits a <code>TokenToEthSwap</code> event.</li></ul><figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*m-4zqqhS0lFppb3C4Qr1LA.png" alt="" loading="lazy"></figure><ul><li><code>deposit()</code>: This function allows users to deposit tokens and Ether into the liquidity pool. The amount of tokens deposited is determined based on the amount of Ether sent with the function call and the current reserves. It mints new liquidity provider tokens (LPTs) and updates the liquidity balances and total liquidity. It emits a <code>LiquidityProvided</code> event.</li></ul><figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*Swo_UXDebK3QgeKTfOmX1g.png" alt="" loading="lazy"></figure><ul><li><code>withdraw(uint256 amount)</code>: This function allows users to withdraw tokens and Ether from the liquidity pool based on the amount of liquidity provider tokens (<code>amount</code>) they want to withdraw. It calculates both ETH and tokens at the correct ratio.</li><li><code>price(uint256 xInput, uint256 xReserves, uint256 yReserves)</code>: This function calculates the output amount (<code>yOutput</code>) based on the input amount (<code>xInput</code>) and the reserves of the tokens (<code>xReserves</code> and <code>yReserves</code>). It uses the <code>x * y = k</code> where <code>x</code> and <code>y</code> are the reserves of the pool.</li></ul>The formula <code>(amount of ETH in DEX) * (amount of tokens in DEX) = k</code> represents an invariant that remains constant during trades (except when liquidity is added). Graphing this formula produces a curve as shown in the image below:<figure class="image image_resized" style="width:626.99px;"><img src="https://miro.medium.com/v2/resize:fit:527/0*2q2PD129OCknnTcP.png" alt="" loading="lazy"></figure>This curve determines the “price” in terms of how much output an asset would receive by inputting a specific amount of the asset. As the ratio becomes more unbalanced, the trade yields progressively lesser of the weaker asset. If the smart contract holds excessive ETH and lacks sufficient tokens, the price for swapping tokens for ETH should become more favorable.CongratulationsWe have successfully developed a basic decentralized exchange that enables users to provide liquidity and swap assets. By participating as liquidity providers, users have the opportunity to earn fees for their contributions.Share your project on Twitter and LinkedIn and tag BuildBear.If you appreciate what we are doing, please follow us on <a href="https://twitter.com/_BuildBear">Twitter</a>, and <a href="https://www.linkedin.com/company/build-bear/">LinkedIn</a> and <a href="https://t.me/+6mjOnBFUR9xjN2U1">Join the Telegram</a> group if you haven’t done yet.And please give us a clap 👏 if you like our work.Github Repo : <a href="https://github.com/BuildBearLabs/scaffold-eth">Buildbear Tutorials</a>About BuildBear:<a href="https://buildbear.io/">BuildBear</a> is a platform for testing Dapps at scale, for teams. It provides users with their own private Testnet to test their smart contracts and Dapps, which can be forked from any EVM chain. It also provides a Faucet, Explorer, and RPC for testing purposes.<blockquote>BuildBear aims to build an ecosystem of tools for testing Dapps at scale for the teams.</blockquote>

Build your own Decentralized Exchange

Let’s get started then, Shall we?

Let’s get started then, Shall we?

Test DApps at Scale.