Skip to content

Frontend Integration

The React‑based frontend (in App.tsx) is the user interface for your SUIQuant DexAlgo. Here are its main features and how they integrate with the backend:

1. Wallet Connection

  • The app uses @mysten/dapp-kit to allow users to connect their Sui wallet.
  • When connected, the wallet’s address is used as the unique userId for API calls.

2. Token Balances

  • The frontend uses the SuiClient (from @mysten/sui/client) to fetch token balances for tokens defined in a built‑in tokenMap.
  • The balances are displayed in a dropdown menu that can be toggled via a “Balances” button.

3. Trading Controls

  • Swap Panel:
    The swap panel allows users to choose a “from” token and a “to” token, specify an amount, and get an estimated swap quote. When the user clicks “Swap Now,” a POST is sent to /api/swap to execute the swap using aggregator routes from aftermath.finance.

  • Forced Bids:
    Users can manually place a bid by entering a trading pair (e.g. “SUI/PUMPKIN”) and a base amount. These commands are processed via the /api/bid-position endpoint.

  • Bid Flood:
    A command-based interface in the live console allows users to trigger multiple forced buys (“bid flood”) via /api/orderflood.

4. Configuration and Strategy

  • Configuration Pane:
    Users can configure trading pairs, min/max trade amounts, profit margins, buy intervals, and enable or disable various strategies (time‑based, RSI‑based, ML‑based, or Stoch‑based) through a configuration pane.
  • Strategy Presets:
    Dropdowns allow users to select presets (for example, “ML 1m FULL” or “Market Maker”) which automatically set indicator parameters (lookback, resolution, and toggles).

5. Live Console and Notifications

  • Console:
    A live console (with a scrollable area) displays system messages, trade notifications, and WebSocket notifications received from the backend.
  • WebSocket Integration:
    The frontend opens a WebSocket connection (to wss://dexalgo2.quantumvoid.org/ws/) to receive real‑time notifications (such as trade fills, bot status updates, and console messages). These messages are appended to the live console and can trigger re‑fetching of positions.
  • PnL Analysis:
    A section displays profit and loss (PnL) statistics and details on recent closed trades fetched from insidex.

6. Theme and UI Components

  • The UI uses Radix UI themes and several custom styles. Buttons, input fields, and React‑Select components are styled based on the current theme (dark or light).
  • Special animations (like a single‑canvas snow animation) and a dynamic “Aurora” background provide a unique look and feel.

All user actions (start, pause, resume, stop bot; swap tokens; force bids; update configuration) call API endpoints on your backend, and the UI updates accordingly based on the responses.

This integration ensures that users can monitor their trading bot, adjust strategies in real time, and see live trade results and token balances.