Serum
  • Welcome
  • Introduction
    • Overview
    • Serum Ecosystem
    • Solana
    • SRM Token
  • Serum Ecosystem
    • 🛠️Build on Serum
      • Project Ideas
      • EcoSerum Grants
      • Tutorials and Concepts
      • Listing and Adding Markets
      • Host a GUI
      • Node List
    • 📈Trade on Serum
      • Ecosystem
      • Trading GUIs
    • ❓Get Help / FAQ
      • Changes to Staking
  • Guides
    • Wallet Support
      • Wallets
      • Exchanges
      • Using Sollet (sollet.io)
        • Creating SOL Wallet
        • Depositing Funds
        • Managing your Wallet
        • Using Sollet with Ledger Nano S
        • Converting ERC20 to SPL tokens
    • Trade on Serum DEX
      • Connect your Wallet
        • Connect with Sollet
        • Connect Ledger Nano S with Sollet
      • Trade
        • Trade on Bonfida
      • Avoiding Scams
    • Wormhole Token Bridge
    • Using Symmetry Swap
    • Providing Liquidity to Pools
    • Staking
    • Multisig
    • Governance
      • How to Vote
      • How to Create a Proposal
  • Appendix
    • Philosophy
    • Serum Core
    • Fees
    • Media
  • More
    • Github
    • Website
    • Discord
    • Telegram
    • Twitter
    • Youtube
    • Weibo
Powered by GitBook
On this page
  • How do you Host a DEX GUI?
  • Serum GUI
  • Customizing
  • Collecting Fees
  • Hosting

Was this helpful?

  1. Serum Ecosystem
  2. Build on Serum

Host a GUI

This guide offers instructions on how to create and host your own GUI on Serum.

PreviousListing and Adding MarketsNextNode List

Last updated 3 years ago

Was this helpful?

How do you Host a DEX GUI?

Want to help support the Serum ecosystem? Host a GUI and get a fraction of the fees!

  • Open source GUI:

  • More about staking and voting:

Anyone can trade on any of the DEX markets, as they are not permissioned:

    • (Has some interfacing code to make it easier to trade)

In the spirit of DeFi, users are invited to compose with, it, and host their own GUIs.

Serum GUI

You will find the official repository of Serum DEX UI here:

This repository provides everything you need to start your own Serum GUI.

Once you have forked the repository, you can run a local environment by running:

yarn start

Customizing

Collecting Fees

Serum allows you to collect 20% of the fees for the orders made on your GUI. In order to collect the fees, you need to modify the .env file that looks like this:

REACT_APP_USDT_REFERRAL_FEES_ADDRESS=''
REACT_APP_USDC_REFERRAL_FEES_ADDRESS=''

To collect fees enter your USDT SPL and USD SPL addresses, for example:

REACT_APP_USDT_REFERRAL_FEES_ADDRESS=9EscMUvizE1ThHWuWQgs8siDz4r54yVxhZDub3ihWQAX
REACT_APP_USDC_REFERRAL_FEES_ADDRESS=9GiKG99ngtKzhQcNXtHokuhx5gk7ftKfrmKtrybHFNa1

Setting your own Domain Name

The package.json file contains a field called homepage, change it to your name domain.

Hosting

There are different solutions to host your GUI. You can host it for free on Github Pages or host it on your own server.

Github Pages

This is the easiest way of hosting and deploying a GUI, you simply have to use the following command to deploy your GUI

yarn deploy

The GUI will then be hosted on the gh-pages branch of your Github repository.

Hosting on your own Server

Alternatively, you can host your GUI on your own server and use Nginx for instance to serve it. To create the production build run:

yarn build

The build will be created in the build folder of the working directory.

The Serum DEX UI uses and UI library. To learn how to customize it, refer to their .

🛠️
React
Ant Design
official guide
https://github.com/project-serum/serum-dex-ui
https://projectserum.com/#/staking-and-voting
https://github.com/project-serum/serum-dex
https://github.com/project-serum/serum-js
LogoGitHub - project-serum/serum-dex-ui: Example implementation of a UI for the Serum DEXGitHub