How to Build a Decentralized Exchange (DEX)

Want to build a blockchain app? Why not consider a Dencentralized Exchange (DEX)?

With thirdweb, building any blockchain app is simple. To prove it, this guide will show you everything a developer needs to know about creating a Decentralized exchange (dex) app that allows users to swap between tokens!

Ready to build a DEX? Let’s dive in!

What is a decentralized exchange?

A decentralized exchange is a type of decentralized blockchain app that leverages liquidity pools and swap functionality to offer peer-to-peer crypto swaps. Essentially it allows users to buy blockchain tokens with cryptocurrencies.

Unlike centralized exchanges, decentralized exchanges are not operated by middlemen or centralized providers; instead they support non-custodial wallets, meaning users don’t lose control of their assets when using the app. It also means there is no single point of failure: no single party has access to the app’s funds.

Why Build a decentralized exchange?

Decentralized exchanges are integral to the cryptocurrency trading market, allowing users to swap crypto directly with each other. Building a DEX means supporting the blockhain ecosystem and faciliating crypto to crypto transfers. It also gives you full control over the features you might offer, and removes the responsibility of building secure custodial wallets. Users simply login with their existing wallets and can interact with the platform via decentralized smart contracts.

Before you start building a DEX

Before diving in, make sure you have the following:

• A thirdweb account

• Your thirdweb API key (get it from your account settings)

• Node.js installed on your machine

• Basic knowledge of React, Next.js, TypeScript

How to build a decentralized exchange

Create the DEX Smart Contract

1. Navigate to your terminal and run:

2. Name your project 'dex-contract' and choose Hardhat and TypeScript.

3. Next, change into the new directory. Open the project in your code editor. In the contracts/ folder, rename Contract.sol to DEX.sol.

4. Update the contract code in DEX.sol (you can find it in the Contracts GitHub repo):

5. Deploy the smart contract using:

Select the network you want to deploy to (make sure it matches where your ERC20 token is deployed).

5. Finally copy the contract address. We'll need this when building the app.

Now your DEX smart contract is ready to go!

Build the DEX Application

The next step is building the DEX application; a web app that interacts with our DEX contract. We'll use Next.js and the thirdweb SDK.

1. Navigate to your terminal and run:

2. Name the project 'dex-app' and choose Next.js and TypeScript.

3. Navigate to the newly created directory:

4. Open the project in your code editor and install the dependencies:

Now your web app is ready! Time to connect the pieces!

Configure the thirdweb provider

1. Open pages/_app.tsx and configure the thirdweb provider with your API key and network:

import { ThirdwebProvider } from '@thirdweb-dev/react';

function MyApp({ Component, pageProps }) {
  const API_KEY = process.env.NEXT_PUBLIC_API_KEY || '';
  const activeChain = 'mumbai';

  return (
    <ThirdwebProvider supportedChains={[activeChain]} apiKey={API_KEY}>
      <Component {...pageProps} />
    </ThirdwebProvider>

2. Make sure to add your thirdweb API key to the .env file.

Now thirdweb is configured! Let’s move on to the app’s functionalities.

Build the swap components

Your decentralized app will need to facilitate swaps. With thirdweb, you can easily implement a component that:

• Allows the user to enter an amount to swap

• Displays token balances

• Handles setting max amount

Let’s get started!

1. Create a new component called SwapInput to handle the input fields:

2. Next, update pages/index.tsx with the main swap functionality:

import { useContract } from '@thirdweb-dev/react';
import SwapInput from 'components/SwapInput';

const TOKEN_ADDRESS = '0x123...'; // ERC20 token address
const DEX_ADDRESS = '0x456...';   // DEX contract address

export default function Home() {
  const tokenContract = useContract(TOKEN_ADDRESS);
  const dexContract = useContract(DEX_ADDRESS);

  const [tokenBalance, setTokenBalance] = useState('0');
  const [nativeBalance, setNativeBalance] = useState('0');
  const [tokenSymbol, setTokenSymbol] = useState('');
  const [amountOut, setAmountOut] = useState(0);
  const [isLoading, setIsLoading] = useState(false);

  // useEffect hooks to fetch balances & allowance
  // ...

  async function executeSwap() {
    try {
      setIsLoading(true);

      // Approve DEX to spend token
      await tokenContract.call('approve', [DEX_ADDRESS, tokenAmount]);

      const tx = currentType === 'native'
        ? await dexContract.call('swapEthToToken', {
            value: toWei(nativeAmount),
          })
        : await dexContract.call('swapTokenToEth', [
            toWei(tokenAmount),
          ]);

      await tx.wait();
      alert(`Swap successful!`);
    } catch (err) {
      console.error(err);
      alert('An error occurred');
    } finally {
      setIsLoading(false);
    }
  }

  return (
    <div>
      <SwapInput
        symbol='MATIC'
        type='native'
        balance={nativeBalance}
        amount={nativeAmount}
        onAmountChange={setNativeAmount}
      />

This component handles:

• Fetching token balances and symbol

• Calculating amount of tokens out

• Approving the DEX to spend tokens

• Executing the swap

Test it out

Now you’ve built each part of your decentralized exchange app, let’s test it out!

1. Start the development server:

2. Open http://localhost:3000 in your browser to test out the DEX!

3. Connect your wallet, enter an amount, and click Swap to exchange between the native token and your ERC20 token.

If everything works smoothly, give yourself a pat on the back! You’re ready to deploy your DEX!

Deploy Your DEX App

Once you have tested your DEX locally and everything is working as expected, you can deploy it to share with others.

1. Deploy the Smart Contract

First, deploy your DEX smart contract to a live network using the thirdweb CLI. Make sure you have your wallet set up with the necessary funds for the network you are deploying to.

From the dex-contract directory, run:

Select the network you want to deploy to and confirm the transaction in your wallet. Once deployed, you will see the live contract address printed out. Copy this as you will need it to configure your web app.

2. Configure the Web App

In your web app, open the .env file and add the following:

NEXT_PUBLIC_DEX_ADDRESS=<your-dex-contract-address>
NEXT_PUBLIC_TOKEN_ADDRESS=<your-token-contract-address>

Replace <your-dex-contract-address> with the address of your deployed DEX contract, and <your-token-contract-address> with the address of your ERC20 token contract.

3. Deploy the Web App

To deploy your Next.js app, you can use a service like Vercel.

Install the Vercel CLI:

Then from your dex-app directory, run:

Follow the prompts to log in and deploy your app. Once deployed, you will get a live URL where people can access your DEX.

Congratulations, you just built your own decentralized exchange using thirdweb! Share the URL with others so they can start swapping tokens.

Take your newly built decentralized exchange to the next level

Of course, now your decentralized exchange is live, that’s not the end of the journey. There are many ways you can expand on this DEX implementation, such as:

• Add a liquidity pool to earn fees on swaps

• Implement limit orders

• Support multiple token pairs

• Integrate charting and price data

• Allow users to create new token pairs

Use this guide as a starting point and continue building out your ideal decentralized exchange. Thanks for following this guide and good luck with your DEX! The complete code for this tutorial is available on GitHub — leave a star if you found it helpful.

Thanks for following this guide and good luck building!