# blockworks-foundation/mango-v4-ui architecture

> Architecture diagram of the GitHub repository blockworks-foundation/mango-v4-ui, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/blockworks-foundation/mango-v4-ui
- Repository: https://github.com/blockworks-foundation/mango-v4-ui

## Overview

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: [`components/swap/useQuoteRoutes.ts`](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/components/swap/useQuoteRoutes.ts) (Quote routes), [`pages/swap.tsx`](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/swap.tsx) (Swap tokens), [`pages/_app.tsx`](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/_app.tsx) (App shell), [`pages/index.tsx`](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/index.tsx) (Account home)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_shell["App shell<br/>[_app.tsx]"]
  node_home["Account home<br/>[index.tsx]"]
end

subgraph group_markets["Markets and Trading"]
  node_trade["Trade markets<br/>[trade.tsx]"]
  node_tradeui["Trade interface"]
  node_swap["Swap tokens<br/>[swap.tsx]"]
  node_routes["Quote routes<br/>[useQuoteRoutes.ts]"]
  node_routepicker["Route selection<br/>[RoutesModal.tsx]"]
end

subgraph group_portfolio["Account and Margin"]
  node_account["Account overview<br/>[AccountPage.tsx]"]
  node_borrow["Borrow markets<br/>[borrow.tsx]"]
  node_dashboard["Market dashboard<br/>[index.tsx]"]
end

subgraph group_ecosystem["Ecosystem Features"]
  node_governance["Governance<br/>[VotePage.tsx]"]
  node_listing["Market listings<br/>[ListMarket.tsx]"]
  node_nft["NFT marketplace<br/>[index.tsx]"]
  node_rewards["Rewards<br/>[rewards.tsx]"]
  node_leaderboard["Leaderboard<br/>[leaderboard.tsx]"]
  node_stats["Market statistics<br/>[stats.tsx]"]
end

subgraph group_services["Data and Services"]
  node_raydium["Raydium helpers<br/>[raydium.ts]"]
  node_router{{"Mango router"}}
  node_jupiter{{"Jupiter services"}}
  node_auction["Auction data<br/>[useAuctionHouse.ts]"]
  node_notifications["Notifications<br/>[notifications.ts]"]
end

node_user(("Wallet user"))
node_chain{{"Solana network"}}
node_wallet{{"Wallet"}}

node_user -->|"opens app"| node_shell
node_shell -->|"renders route"| node_home
node_home -->|"renders"| node_account
node_user -->|"opens markets"| node_trade
node_trade -->|"renders"| node_tradeui
node_user -->|"opens swap"| node_swap
node_swap -->|"requests quotes"| node_routes
node_routes -->|"fetches quotes"| node_router
node_routes -->|"fetches transaction"| node_jupiter
node_routes -->|"gets pool and swap"| node_raydium
node_swap -->|"selects route"| node_routepicker
node_user -->|"opens borrows"| node_borrow
node_user -->|"opens dashboard"| node_dashboard
node_user -->|"opens voting"| node_governance
node_user -->|"opens listing"| node_listing
node_user -->|"opens marketplace"| node_nft
node_nft -->|"loads listings and bids"| node_auction
node_user -->|"opens rewards"| node_rewards
node_user -->|"opens standings"| node_leaderboard
node_user -->|"views statistics"| node_stats
node_user -->|"views notifications"| node_notifications
node_tradeui -->|"submits trades"| node_chain
node_account -->|"reads account state"| node_chain
node_wallet -->|"connects"| node_shell

click node_shell "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/_app.tsx"
click node_home "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/index.tsx"
click node_account "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/components/account/AccountPage.tsx"
click node_trade "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/trade.tsx"
click node_tradeui "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/components/trade/TradeAdvancedPage.tsx"
click node_swap "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/swap.tsx"
click node_routes "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/components/swap/useQuoteRoutes.ts"
click node_routepicker "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/components/swap/RoutesModal.tsx"
click node_raydium "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/utils/swap/raydium.ts"
click node_borrow "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/borrow.tsx"
click node_dashboard "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/dashboard/index.tsx"
click node_governance "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/components/governance/Vote/VotePage.tsx"
click node_listing "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/components/governance/ListMarket/ListMarket.tsx"
click node_nft "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/nft/index.tsx"
click node_auction "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/hooks/market/useAuctionHouse.ts"
click node_rewards "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/rewards.tsx"
click node_leaderboard "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/leaderboard.tsx"
click node_stats "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/stats.tsx"
click node_notifications "https://github.com/blockworks-foundation/mango-v4-ui/blob/main/apis/notifications/notifications.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_shell,node_home,node_user toneBlue
class node_trade,node_tradeui,node_swap,node_routes,node_routepicker toneAmber
class node_account,node_borrow,node_dashboard toneMint
class node_governance,node_listing,node_nft,node_rewards,node_leaderboard,node_stats toneRose
class node_raydium,node_router,node_jupiter,node_auction,node_notifications,node_chain,node_wallet toneIndigo
```

## Components

### Application

- [App shell](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/_app.tsx): `pages/_app.tsx`
- [Account home](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/index.tsx): `pages/index.tsx`

### Markets and Trading

- [Trade markets](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/trade.tsx): `pages/trade.tsx`
- [Trade interface](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/components/trade/TradeAdvancedPage.tsx): `components/trade/TradeAdvancedPage.tsx`
- [Swap tokens](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/swap.tsx): `pages/swap.tsx`
- [Quote routes](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/components/swap/useQuoteRoutes.ts): `components/swap/useQuoteRoutes.ts`
- [Route selection](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/components/swap/RoutesModal.tsx): `components/swap/RoutesModal.tsx`

### Account and Margin

- [Account overview](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/components/account/AccountPage.tsx): `components/account/AccountPage.tsx`
- [Borrow markets](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/borrow.tsx): `pages/borrow.tsx`
- [Market dashboard](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/dashboard/index.tsx): `pages/dashboard/index.tsx`

### Ecosystem Features

- [Governance](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/components/governance/Vote/VotePage.tsx): `components/governance/Vote/VotePage.tsx`
- [Market listings](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/components/governance/ListMarket/ListMarket.tsx): `components/governance/ListMarket/ListMarket.tsx`
- [NFT marketplace](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/nft/index.tsx): `pages/nft/index.tsx`
- [Rewards](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/rewards.tsx): `pages/rewards.tsx`
- [Leaderboard](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/leaderboard.tsx): `pages/leaderboard.tsx`
- [Market statistics](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/pages/stats.tsx): `pages/stats.tsx`

### Data and Services

- [Raydium helpers](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/utils/swap/raydium.ts): `utils/swap/raydium.ts`
- **Mango router**
- **Jupiter services**
- [Auction data](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/hooks/market/useAuctionHouse.ts): `hooks/market/useAuctionHouse.ts`
- [Notifications](https://github.com/blockworks-foundation/mango-v4-ui/blob/main/apis/notifications/notifications.ts): `apis/notifications/notifications.ts`

### Other components

- **Wallet user**
- **Solana network**
- **Wallet**

## Connections

- 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