Introduction

Decentralized exchanges (DEXs) are a fundamental component of the blockchain ecosystem, providing users with a secure and trustless way to swap tokens. In this tutorial, we'll walk you through building a cross-chain DEX using QuickNode, the leading end-to-end developer platform, which simplifies dApp development and offers high-performance access to 20+ blockchains. We'll create a basic cross-chain DEX that allows users to swap ERC20 tokens on the Ethereum network with BEP20 tokens on the Binance Smart Chain (BSC). This tutorial assumes basic knowledge of Solidity, JavaScript, and web3.

Prerequisites

1. Basic understanding of Solidity, JavaScript, and web3.js

2. Node.js and npm installed on your local machine

3. Ethereum and BSC wallets with testnet tokens for testing

Step 1: Setting up the Project

Let's start by setting up our project directory and installing the necessary dependencies.

1. Create a new directory and initialize Node.js project

    mkdir cross-chain-dex
    cd cross-chain-dex
    npm init -y
   

2. Install required packages

    npm install web3 truffle-hdwallet-provider express
   

Step 2: Smart Contract Development

Now, we'll create the smart contracts for our cross-chain DEX using Solidity. For simplicity, we'll use two pre-deployed tokens: an ERC20 token for Ethereum and a BEP20 token for BSC.

1. Create a new file named CrossChainDEX.sol in the contracts directory

    // CrossChainDEX.sol
    pragma solidity ^0.8.0;
   
    import "./ERC20Token.sol";
    import "./BEP20Token.sol";
   
    contract CrossChainDEX {
        ERC20Token public erc20Token;
        BEP20Token public bep20Token;
        address public owner;
   
        // Liquidity pool details
        mapping(address => uint256) public liquidityPools;
        uint256 public totalLiquidity;
   
        // Transaction fee details
        uint256 public transactionFeePercentage;
        address public feeCollector;
   
        constructor(
            address erc20Address,
            address bep20Address,
            uint256 _transactionFeePercentage,
            address _feeCollector
        ) {
            erc20Token = ERC20Token(erc20Address);
            bep20Token = BEP20Token(bep20Address);
            owner = msg.sender;
   
            transactionFeePercentage = _transactionFeePercentage;
            feeCollector = _feeCollector;
        }
   
        modifier onlyOwner() {
            require(msg.sender == owner, "Only the contract owner can perform this operation");
            _;
        }
   
        function addLiquidity(uint256 amount) public {
            require(amount > 0, "Amount must be greater than 0");
            require(erc20Token.balanceOf(msg.sender) >= amount, "Insufficient ERC20 token balance");
   
            // Transfer ERC20 tokens from the sender to this contract
            erc20Token.transferFrom(msg.sender, address(this), amount);
   
            // Add liquidity to the pool
            liquidityPools[msg.sender] += amount;
            totalLiquidity += amount;
        }
   
        function swapTokens(uint256 amount) public {
            require(amount > 0, "Amount must be greater than 0");
            require(liquidityPools[msg.sender] >= amount, "Insufficient liquidity");
   
            // Calculate the transaction fee
            uint256 transactionFee = (amount * transactionFeePercentage) / 100;
            uint256 tokensAfterFee = amount - transactionFee;
   
            // Transfer ERC20 tokens from the sender to this contract
            erc20Token.transferFrom(msg.sender, address(this), amount);
   
            // Emit an event to signal the token swap
            emit TokenSwapped(msg.sender, amount);
   
            // Execute the token transfer on BSC (implementation not provided for simplicity)
            // ...
   
            // Transfer the equivalent amount of BEP20 tokens to the sender on BSC (implementation not provided for simplicity)
            // ...
   
            // Emit an event to confirm the token transfer on BSC
            emit TokenTransferredOnBSC(msg.sender, amount);
        }
   
        // Withdraw liquidity from the pool
        function withdrawLiquidity(uint256 amount) public {
            require(amount > 0, "Amount must be greater than 0");
            require(liquidityPools[msg.sender] >= amount, "Insufficient liquidity");
   
            // Transfer ERC20 tokens from the contract to the sender
            erc20Token.transfer(msg.sender, amount);
   
            // Update the liquidity pool
            liquidityPools[msg.sender] -= amount;
            totalLiquidity -= amount;
        }
   
        // Update transaction fee percentage (onlyOwner)
        function setTransactionFeePercentage(uint256 percentage) public onlyOwner {
            require(percentage <= 5, "Transaction fee percentage cannot exceed 5%");
            transactionFeePercentage = percentage;
        }
   
        // Update fee collector address (onlyOwner)
        function setFeeCollector(address collector) public onlyOwner {
            require(collector != address(0), "Invalid fee collector address");
            feeCollector = collector;
        }
   
        event TokenSwapped(address indexed sender, uint256 amount);
        event TokenTransferredOnBSC(address indexed sender, uint256 amount);
    }
   

2. Create two separate files, ERC20Token.sol and BEP20Token.sol, in the contracts directory with the respective ERC20 and BEP20 token implementations.

   ERC20Token.sol

    // SPDX-License-Identifier: MIT
    pragma solidity ^0.8.0;
   
    import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
   
    contract ERC20Token is ERC20 {
        constructor() ERC20("Sample ERC20 Token", "ERC20") {
            _mint(msg.sender, 1000000 * (10**uint256(decimals())));
        }
    }
   

   BEP20Token.sol

    // SPDX-License-Identifier: MIT
    pragma solidity ^0.8.0;
   
    import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
   
    contract BEP20Token is ERC20 {
        constructor() ERC20("Sample BEP20 Token", "BEP20") {
            _mint(msg.sender, 1000000 * (10**uint256(decimals())));
        }
    }
   

In these contracts, we are using the OpenZeppelin library to create ERC20 and BEP20 token contracts. The ERC20Token contract creates an ERC20 token with a total supply of 1,000,000 tokens, while the BEP20Token contract creates a BEP20 token with the same total supply.

Step 3: Deploying Smart Contracts

To deploy the smart contracts to the Ethereum and BSC networks, we'll use Truffle and the Truffle HDWallet Provider.

1. Create a new file named truffle-config.js in the root directory

    // truffle-config.js
    const HDWalletProvider = require('truffle-hdwallet-provider');
    const mnemonic = 'your-mnemonic-here';
    const infuraApiKey = 'your-infura-api-key-here';
   
    module.exports = {
      networks: {
        development: {
          host: '127.0.0.1',
          port: 8545,
          network_id: '*',
        },
        ropsten: {
          provider: () => new HDWalletProvider(mnemonic, `https://ropsten.infura.io/v3/${infuraApiKey}`),
          network_id: 3,
          gas: 5500000,
          gasPrice: 20000000000, // 20 gwei
          skipDryRun: true,
        },
        // Add configuration for BSC testnet (similar to Ethereum)
      },
    };
   

2. Deploy the contracts to the testnet

    npx truffle migrate --network ropsten
    # Add command to deploy on BSC testnet (use 'npx truffle migrate --network bscTestnet')
   

Why Businesses Choose QuickNode for Web3 Infrastructure

Step 4: Building the Web Application

Next, let's build a simple web application that interacts with our cross-chain DEX using web3.js.

1. Create a new file named index.html in the root directory

    <!-- index.html -->
    <!DOCTYPE html>
    <html>
    <head>
      <title>Cross-Chain DEX</title>
    </head>
    <body>
      <h1>Welcome to the Cross-Chain DEX</h1>
      <div>
        <label for="erc20Address">Enter ERC20 Token Address:</label>
        <input type="text" id="erc20Address">
      </div>
      <div>
        <label for="bep20Address">Enter BEP20 Token Address:</label>
        <input type="text" id="bep20Address">
      </div>
      <div>
        <button onclick="addLiquidity()">Add Liquidity</button>
        <button onclick="swapTokens()">Swap Tokens</button>
      </div>
      <script src="./app.js"></script>
    </body>
    </html>
   

2. Create a new file named app.js in the root directory

    // app.js
    const web3 = new Web3("https://eth-mainnet-node.quicknode.com");
    const contractAddress = "CONTRACT_ADDRESS"; // Replace with the deployed CrossChainDEX contract address
    const contractAbi = [/* Insert the ABI here */];
    const dexContract = new web3.eth.Contract(contractAbi, contractAddress);
   
    async function swapTokens() {
        const amount = document.getElementById("amount").value;
        if (amount <= 0) {
            alert("Amount must be greater than 0");
            return;
        }
   
        try {
            // Unlock the user's wallet
            await ethereum.request({ method: 'eth_requestAccounts' });
   
            // Perform the token swap
            const accounts = await web3.eth.getAccounts();
            await dexContract.methods.swapTokens(amount).send({ from: accounts[0] });
   
            alert("Token swap successful!");
        } catch (error) {
            console.error("Error swapping tokens:", error.message);
            alert("Error swapping tokens. Please try again.");
        }
    }
   

Step 5: Implementing Additional Features

We have enhanced our cross-chain DEX by adding additional features such as liquidity pools, transaction fee management, and handling potential errors securely. We'll also implement a basic authentication system and handle possible exceptions to ensure a robust and secure application.

1. Liquidity Pools

   To provide liquidity for token swaps, we'll create liquidity pools where users can deposit their tokens. These pools will enable efficient trading and ensure that users can easily swap tokens at any time.

2. Transaction Fee Management

   To incentivize liquidity providers and cover transaction costs, we'll introduce a transaction fee mechanism. A portion of each token swap will be collected as a fee and distributed to liquidity providers

3. Authentication System

   To protect user accounts and prevent unauthorized access, we'll implement a basic authentication system using Ethereum wallet addresses. Only authenticated users will be able to access the DEX functionalities.

4. Input Validation

   We'll carefully validate all user inputs to prevent potential errors and exploits. For example, we'll check if the user has a sufficient token balance before executing a swap.

5. Exception Handling

   We'll use appropriate exception handling to gracefully handle unexpected errors and provide meaningful feedback to users in case of failures.

6. Revert on Failure

   In critical operations, we'll use the revert statement to revert the entire transaction in case of an error, ensuring that the contract state remains consistent.

Conclusion

Congratulations! You have successfully built a cross-chain DEX using QuickNode, allowing users to swap ERC20 tokens on the Ethereum network with BEP20 tokens on the Binance Smart Chain. The application is equipped with additional features such as liquidity pools and transaction fee management while ensuring security and handling potential errors gracefully. Remember to thoroughly test your application on testnets before deploying it to the mainnet or production environment.

Happy coding!

Require assistance with your project or have inquiries? Feel free to reach out to us through this form, connect with us on Twitter @QuickNode, or ping us on Discord! We're here to help and support you every step of the way.

I'd love to connect with you on Twitter | LinkedIn | Portfolio.

Resources

Create A Free Account

QuickNode Developers Documentation

QuickNode Developers Guides