How blockworks-foundation/mango-v4-ui works
Mango v4 UI is a Next.js client for on-chain trading, portfolio management, and related ecosystem features. The main user journey is connecting a wallet, viewing a Mango account, and using trading or account actions; separate branches cover swaps, governance, NFT markets, rewards, and market analytics. The graph reflects routes and component responsibilities visible in the tree, plus the sampled swap-routing calls. Most feature wiring was not sampled, so uncertain internal call links are omitted.
Main entry points: useQuoteRoutes.ts Quote routes · swap.tsx Swap tokens · _app.tsx App shell · index.tsx Account home
Components 24
Application
- App shell
pages/_app.tsx - Account home
pages/index.tsx
Markets and Trading
- Trade markets
pages/trade.tsx - Trade interface
components/trade/TradeAdvancedPage.tsx - Swap tokens
pages/swap.tsx - Quote routes
components/swap/useQuoteRoutes.ts - Route selection
components/swap/RoutesModal.tsx
Account and Margin
- Account overview
components/account/AccountPage.tsx - Borrow markets
pages/borrow.tsx - Market dashboard
pages/dashboard/index.tsx
Ecosystem Features
- Governance
components/governance/Vote/VotePage.tsx - Market listings
components/governance/ListMarket/ListMarket.tsx - NFT marketplace
pages/nft/index.tsx - Rewards
pages/rewards.tsx - Leaderboard
pages/leaderboard.tsx - Market statistics
pages/stats.tsx
Data and Services
- Raydium helpers
utils/swap/raydium.ts - Mango router
- Jupiter services
- Auction data
hooks/market/useAuctionHouse.ts - Notifications
apis/notifications/notifications.ts
Other components
- Wallet user
- Solana network
- Wallet
Connections 24
- Wallet user → App shell: opens app
- App shell → Account home: renders route
- Account home → Account overview: renders
- Wallet user → Trade markets: opens markets
- Trade markets → Trade interface: renders
- Wallet user → Swap tokens: opens swap
- Swap tokens → Quote routes: requests quotes
- Quote routes → Mango router: fetches quotes
- Quote routes → Jupiter services: fetches transaction
- Quote routes → Raydium helpers: gets pool and swap
- Swap tokens → Route selection: selects route
- Wallet user → Borrow markets: opens borrows
- Wallet user → Market dashboard: opens dashboard
- Wallet user → Governance: opens voting
- Wallet user → Market listings: opens listing
- Wallet user → NFT marketplace: opens marketplace
- NFT marketplace → Auction data: loads listings and bids
- Wallet user → Rewards: opens rewards
- Wallet user → Leaderboard: opens standings
- Wallet user → Market statistics: views statistics
- Wallet user → Notifications: views notifications
- Trade interface → Solana network: submits trades
- Account overview → Solana network: reads account state
- Wallet → App shell: connects