Skip to main content

Trade

Overview​

The Trade page provides a streamlined interface for swapping tokens. Users can specify the token and amount they want to trade, and see in real-time what they will receive in return based on current exchange rates.

The Trade page now features a token price carousel at the top, displaying real-time price information for various tokens in a horizontally scrollable format.

Trade Token Price Image

Features​

  • Real-time Prices: Live token prices updated automatically
  • Multiple Tokens: Display of various tokens with their current values
  • Percentage Changes: Color-coded price change indicators showing gains (green) and losses (red)
  • Asset IDs: Clear identification of each token with their respective asset IDs
  • Horizontal Scroll: Easy navigation through different tokens using swipe or scroll gestures
  • Visual Design: Clean, card-based layout for easy reading and comparison

Token Information Display​

Each token card in the carousel shows:

  • Token icon and symbol
  • Asset ID for reference
  • Current price in USD
  • Percentage change with directional indicator
  • Color coding for quick visual reference of performance

Token Input and Output​

From Token (Input)​

  • Input field for entering amount to trade (e.g., "1")
  • Token selector with icon and symbol (e.g., "KFI")
  • USD equivalent value display (e.g., "≈ $42.77")
  • Balance information with MAX button to quickly use maximum available amount
  • Dropdown to select different input tokens

To Token (Output)​

  • Display field showing amount to be received (e.g., "15,441.387641")
  • Token selector with icon and symbol (e.g., "KLV")
  • USD equivalent value display (e.g., "≈ $42.77")
  • Balance information
  • Dropdown to select different output tokens

Swap Direction​

  • Arrow button between input and output fields to reverse the swap direction

Trade Details​

Basic Trade Information​

  • Received value: Total value of the trade in USD (e.g., "$42.77")
  • Exchange rate: Conversion rate between tokens (e.g., "1 KFI = 15441.387641 KLV")
  • Slippage: Tolerance for price changes during transaction execution (e.g., "1%")
    • Settings gear icon to adjust slippage tolerance

Detailed Breakdown (Expandable)​

  • Minimum received: Minimum token amount to be received after slippage (e.g., "15286.973765 KLV")
  • Fee: Transaction fee amount (e.g., "$0.12830841")
  • Route: Trading path visualization showing token icons

Action Button​

  • Trade: Button to execute the swap transaction

Trade Image

Technical Implementation Notes​

Token Price and Liquidity​

  • Real-time price data pulled from liquidity pools
  • Automatic routing to find the best exchange rates
  • Price impact calculations based on trade size

Slippage Protection​

  • Configurable slippage tolerance to protect trades from price movements (1%, 2% and 5%)
  • Minimum received amount calculated based on slippage setting
  • Transaction reverts if minimum amount cannot be received

Fee Calculation​

  • Transparent fee display showing exact costs
  • Fee breakdown between protocol fee, liquidity provider fee, etc.

User Experience Considerations​

  • Responsive design for all screen sizes (minimum width 375px)
  • Real-time token price updates
  • Input validation to prevent invalid trade amounts
  • Balance checking to prevent insufficient funds errors
  • Gas estimation for transaction planning

Mobile Experience​

  • Touch-friendly input controls
  • Simplified UI for smaller screens
  • Accessible token selectors optimized for touch

Error Handling​

  • Clear error messages for common issues:
    • Insufficient liquidity
    • Price impact too high
    • Insufficient balance
    • Network errors