DeepBook Margin UI
Trading platform for DeepBookV3 and DeepBook Margin Sui protocols implemented in SolidJS
Project Description
The UI integrates DeepBook V3 and the DeepBook Margin SDK, enabling traders to interact with the platform through an intuitive interface.
Users can connect their wallet and switch between two trading modes: Spot and Margin.
In Spot mode, traders can create and manage multiple balance managers. Funds can be deposited into a selected balance manager and used for trading via limit or market orders. Users can also withdraw funds from their balance managers at any time.
In Margin mode, traders first create a margin manager for a specific liquidity pool. Deposited funds serve as collateral, allowing users to borrow additional assets from the pool. Borrowed funds can be used for trading, and traders can later repay their positions or withdraw remaining funds as needed.
In both trading modes, the UI displays candle data along with the pool’s order book and trade history.
At the bottom of the interface, traders can monitor their activity, including open orders, order history, trade history, and settled balances for the currently selected balance or margin manager.
How it's Made
DeepBook Margin UI is a MVP margin trading interface for DeepBook, the CLOB DEX on Sui, built with SolidJS/SolidStart for performance required by real-time order book updates and live margin monitoring. The UI uses Tailwind CSS v4, Kobalte primitives and lightweight TradingView charts for UI components.
On-chain interaction is powered by Mysten Labs SDKs: @mysten/sui, dapp-kit for wallet connectivity, and deepbook-v3 for trading and margin operations. Market and account data come from DeepBook and margin indexers. To access complex on-chain account data, the app simulates transactions and BCS decodes results, then refetches after mutations with a short delay to account for indexer lag.
State management uses layered context providers with localStorage persistence and cross-tab sync, while TanStack Query handles reactive server state. The system supports per-pool margin managers, health factor tracking, collateral operations, and precision-safe order placement. The app runs fully client-side, built with Vinxi and Bun.
