Deploy your own decentralized exchange on Kadena [8: create our own decentralized exchange based on the cloned Kaddex swap project]

In the previous article, we created our liquidity pool on Kaddex Devnet via Kaddex swap. In this article, we will build our decentralized exchange based on the cloned Kaddex swap project. Before we start, you will need to install a code editor with npm, such as Visual Studio Code and Atom.

Step 1: Clone the Kaddex swap project on Kaddex-org GitHub. I am using the one with commit f4ecc26938a26ecc84b60d6ac2a4f6a9bee4e339. The latest version may differ from the commit I am using. Open the cloned project with your code editor.

Step 2: If you use visual studio code, ensure your npm version is higher than 8.15.0. You may enter ctrl + ` to start a terminal on Windows. Then, enter the commands below to install the required node modules.

npm install -g [email protected]
npm install -g yarn
npm install --force

Step 3: Copy the env.example and rename it to .env. Update the .env file with the value below.

REACT_APP_KDA_NETWORK_TYPE = development
REACT_APP_KDA_CHAIN_ID = 0
REACT_APP_KDA_GAS_PRICE = 0.0000001
REACT_APP_KDA_GAS_LIMIT = 100000
REACT_APP_KDA_PRECISION = 12
REACT_APP_KDA_NETWORK_ID = development
REACT_APP_KDA_FEE = 0.003
REACT_APP_KDA_NETWORK = https://devnet.kaddex.com
REACT_APP_KADDEX_STATS_API_URL=https://devnet.analytics-api.kaddex.com
REACT_APP_KADDEX_NAMESPACE=kaddex
REACT_APP_KADDEX_API_URL=https://kaddex-api.azurewebsites.net
REACT_APP_SIMPLEX_NEW_PAYMENT_URL=https://sandbox.test-simplexcc.com/payments/new

Step 4: Under src/constants/cryptoCurrencies.js, there is a typo. Add .json after ‘./token’ ; and ‘./pairs’.

Step 5: Add your token under “development“, you may follow the pattern of my script below.

    "development": {
      "KDA": {
        "name": "KDA",
        "coingeckoId": "kadena",
        "tokenNameKaddexStats": "coin",
        "code": "coin",
        "icon": "/images/crypto/kda-crypto.svg",
        "main": true,
        "color": "#5dcbe5",
        "statsID": "coin",
        "precision": 12
      },
      "KDX": {
        "name": "KDX",
        "coingeckoId": "",
        "tokenNameKaddexStats": "runonflux.flux",
        "code": "kaddex.kdx",
        "icon": "/images/crypto/kaddex-crypto.svg",
        "main": true,
        "color": "#ed1cb5",
        "statsID": "runonflux.flux",
        "precision": 12
      },
      "ABC": {
        "name": "ABC",
        "coingeckoId": "",
        "tokenNameKaddexStats": "runonflux.flux",
        "code": "kaddex.abc",
        "icon": "/images/crypto/abc.svg",
        "statsID": "kaddex.abc",
        "precision": 14
      },
      "XYZ": {
        "name": "XYZ",
        "coingeckoId": "",
        "tokenNameKaddexStats": "xyz",
        "code": "kaddex.xyz",
        "icon": "/images/crypto/xyz.svg",
        "statsID": "hypercent.prod-hype-coin",
        "precision": 14
      },
      "BTC": {
        "name": "BTC",
        "coingeckoId": "",
        "tokenNameKaddexStats": "free.btc",
        "code": "free.btc",
        "icon": "https://raw.githubusercontent.com/solana-labs/token-list/main/assets/mainnet/9n4nbM75f5Ui33ZbPYXn59EwSgE8CGsHtAeTH5YFeJ9E/logo.png",
        "statsID": "free.btc",
        "precision": 12
      },
      "ETH": {
        "name": "ETH",
        "coingeckoId": "",
        "tokenNameKaddexStats": "free.eth",
        "code": "free.eth",
        "icon": "https://raw.githubusercontent.com/solana-labs/token-list/main/assets/mainnet/2FPyTwcZLUg1MDrwsyoP4D6s1tM7hAkHYRjkNb5w6Pxk/logo.png",
        "statsID": "free.eth",
        "precision": 12
      },
      "SHIB": {
        "name": "SHIB",
        "coingeckoId": "",
        "tokenNameKaddexStats": "free.shib",
        "code": "free.shib",
        "icon": "https://raw.githubusercontent.com/shiba2-0/crypto/main/logo.png",
        "precision": 12
      }
    },

Step 6: Modify the “development” part of src/constants/pairs.json also. Since our token is not registered on the Mainnet, you  should set the “isBoosted” attribute to false. Otherwise, it may cause some errors later.

    "development": {
      "coin:kaddex.kdx": {
        "name": "coin:kaddex.kdx",
        "token0": "KDA",
        "token1": "KDX",
        "isBoosted": true
      },
      "coin:kaddex.abc": {
        "name": "coin:kaddex.abc",
        "token0": "KDA",
        "token1": "ABC",
        "isBoosted": true
      },
      "coin:kaddex.xyz": {
        "name": "coin:kaddex.xyz",
        "token0": "KDA",
        "token1": "XYZ",
        "isBoosted": false
      },
      "coin:free.btc": {
        "name": "coin:free.btc",
        "token0": "KDA",
        "token1": "BTC",
        "isBoosted": false
      },
      "coin:free.eth": {
        "name": "coin:free.eth",
        "token0": "KDA",
        "token1": "ETH",
        "isBoosted": false
      },
      "coin:free.shib": {
        "name": "coin:free.shib",
        "token0": "KDA",
        "token1": "SHIB",
        "isBoosted": false
      }
    },

Step 7: We will only use the Kaddex project’s swap and liquidity part. Modify the src/components/menuItems.js as in the picture shown below.

Step 8: Modify src/utils/token-utils.js line 126:127 as in the picture below. Since we do not have any statistical data on the mainnet, we will encounter some errors during deployment. You may confirm it by checking the kaddex api’s get-pool-stats and get-token-stats.

Step 9: Modify src/components/liquidity/LiquidityTokensTable.js as the picture shown below. The reason is the same as in step 8.

Step 10: Everything is ready! Go to the terminal and enter yarn start.

You may enter yarn build to build the project and deploy it using Netlify or Cloudflare page. The following article will teach you how to deploy your exchange into the Cloudflare page.

If you think this article is helpful, leave a comment below. 🙂

You may also sponsor this website by sending some KDA to this address: k:e95a044488f4b6ced42ab9be0268ffe530e47401b24b8c29bfeba5942e5da275.