EN

Wtfswap overall design

Author of this section: @Fish

in the above few lectures we have roughly introduced DEX, analyzed what we are likely to do, and referenced the contract code of Uniswap. In this talk, we will start to design the overall function of Wtfswap. We will design a function similar to Uniswap but partially different from it. We will make some simplified adjustments for curriculum development exercises.

We are in the last talk Uniswap Code Analysis the code of Uniswap V3 is analyzed in. Wtfswap will refer to Uniswap V3 to simplify its functions and design a new DEX.

First of all, let's review the difference between Uniswap V2 and Uniswap V3. In V2 and V3, a token pair and rate uniquely determine a trading pool. In V2, LP injects liquidity into such a pool, and the price can fluctuate from positive infinity to negative infinity. The biggest difference between V3 and V2 is that a price range can be defined when LP injects liquidity, allowing LP to improve its own capital utilization. But this will lead to more complex logic for V3 trading, as a pool may contain liquidity in different price ranges, and the logic of trading will be more complex.

In the design of Wtfswap, we will also introduce price ranges as a new feature compared to V2, but we will put the liquidity of different price ranges into different pools to reduce complexity. This will make our trading logic simpler, but it should be noted that this will also make liquidity more dispersed, which is why V3 does not do this.

In addition, in order to get the course started better, for Wtfswap, compared with Uniswap V2 and V3, we will do the following design:

  • simplified functionality, does not support partial addition and withdrawal of liquidity, does not support trading with Native tokens, and does not support cross-trading pairs.
  • A token pair + rate + price range uniquely identifies a trading pool, and we have added information about the price range for the trading pool compared to Uniswap.
  • There may be multiple trading pools under a token pair. The rate and price range of the trading pool can be flexibly set. The DApp front end selects which trading pools to trade in according to the liquidity situation.
  • Directly call the contract to obtain the current trading pool available for trading, so that DApp does not depend on the server (Uniswap's own DApp implementation will involve some server interfaces).

In addition, we base Ant Design and Ant Design Web3 A set of UI is designed. In addition to contract development, we will also introduce how to develop the front-end interface.

Based on the function of Wtfswap, we designed the UI interface with the following three parts.

Swap page for trading tokens:

the Pool page is used to view existing trading pools and create trading pools. As shown below, click Add Pool pop-up window to create a trading pool, click My Positions View Jump to the Positions page to view your own Positions:

Positions page for viewing and removing liquidity (Positions):

the Positions page creates a liquidity pop-up window to create a new liquidity:

in the latter part, we will divide the course into two parts, the first is the contract part course starting with P1, and the other is the front part course starting with P2. You can choose to study according to your needs.