This repository contains the interface for Upsilon DEX, a cloned version of celo Uniswap V3. It is built using React to interact with the Uniswap V3 smart contracts.
Uniswap V3 is a binary smart contract system composed of many libraries, acting together to create a flexible and efficient Automated Market Maker (AMM). It introduces the concept of Concentrated Liquidity, allowing liquidity providers (LPs) to allocate capital within specific price ranges.
The Core contracts are responsible for the fundamental logic of the protocol: pools, factory, and mathematics.
UniswapV3Factory: Deploys unique pools for each token pair. There is only one factory. It handles the creation of pools and protocol fee control.UniswapV3Pool: The heart of the system. Each pool manages swapping, liquidity positions, and oracle data for a specific pair of tokens (e.g., ETH/USDC) at a specific fee tier (0.05%, 0.3%, 1%).- Ticks: Price space is discrete, divided into "ticks". Liquidity is placed between these ticks.
- Positions: Users mint positions representing liquidity in a specific tick range.
The Periphery contracts interact with the Core to provide user-friendly methods for trading and liquidity management. The interface primarily talks to these contracts.
SwapRouter: Handles complex path swaps (e.g., Token A -> B -> C) and ensures safety checks (slippage, deadlines).NonfungiblePositionManager(NFT Manager): Wraps Uniswap V3 positions as ERC-721 non-fungible tokens. Since positions are unique (different ranges), they are tracked as NFTs. Use this contract to Mint, Increase Liquidity, Decrease Liquidity, and Collect Fees.Quoter: Allows fetching the expected output amount for a swap without executing it, useful for the UI to display prices.
- Concentrated Liquidity: LPs can provide liquidity in a custom price range, improving capital efficiency up to 4000x compared to V2.
- Active Liquidity: Liquidity is only "active" and earning fees when the current price is within the LP's selected range.
- Range Orders: By providing liquidity in a narrow range outside the current price, users can effectively place limit orders that get filled as the price crosses that range.
This project is a React application ("The Interface") that connects users to the Uniswap Protocol.
- Framework: React (Create React App), Redux (Toolkit)
- Languages: TypeScript, Solidity (ABIs)
- Web3: Ethers.js, Web3-React
- Styling: Styled Components, Rebass
- Internationalization: LinguiJS
src/components: Reusable UI elements (Buttons, Modals, CurrencyInputPanel).src/pages: Main views of the application.Swap: The trading interface.Pool: Liquidity management dashboard.
src/state: Redux slices for managing global application state (transactions, user preferences, token lists).src/hooks: Custom React hooks for interacting with contracts and fetching data (e.g.,useContract,useSwapCallback).src/abis: JSON ABIs for the V3 Core and Periphery contracts.src/constants: Configuration constants (addresses, chain IDs, tokens).
Follow these steps to run the interface locally.
- Node.js: v14 or higher (v16 recommended)
- Yarn: Package manager
-
Clone the repository
git clone <repository-url> cd uniswap-interface
-
Install dependencies
yarn install
Create a .env file in the root directory if you need to override default settings (e.g., RPC URLs). See .env.production for examples.
Start the development server:
yarn startThe app will update automatically as you edit files. Open http://localhost:3000 to view it in the browser.
-
Build for Production:
yarn build
Builds the app to the
buildfolder. It bundles React in production mode and optimizes the build for the best performance. -
Run Tests:
yarn testLaunches the test runner in interactive watch mode.
-
Compile ABIs:
yarn contracts:compile
Generates TypeScript types from contract ABIs.