Frontend Dashboard
Relevant source files
The following files were used as context for generating this wiki page:
The OnChain Sage Frontend Dashboard is the primary user interface for traders to interact with the platform's AI-driven insights. It provides a comprehensive view of real-time social sentiment, on-chain market data, and generated trading signals. Built with Next.js and React, the dashboard is designed to be responsive, intuitive, and visually rich, utilizing data visualization libraries to present complex data in an understandable format.
The dashboard serves as the central hub for user activity, combining navigation, data visualization, and account management into a single, cohesive experience. It is responsible for displaying real-time data updates, which are handled via WebSocket communication, and manages its state using tools like Zustand.
Sources: ARCHITECTURE.md, apps/frontend/README.md, apps/frontend/app/dashboard/page.tsx
Architecture and Layout
The dashboard page is structured as a two-column layout, featuring a persistent sidebar for navigation and a main content area that houses all the data modules and user controls. The entire view is wrapped in a SidebarProvider to manage the state of the responsive sidebar.
Sources: apps/frontend/app/dashboard/page.tsx:43-44
Component Hierarchy
The following diagram illustrates the high-level component structure of the dashboard page.
Main Layout Components
| Component | Description | Source File |
|---|---|---|
Sidebar | A persistent navigation bar on the left side, containing links to different sections of the application and a wallet connection button. | apps/frontend/app/dashboard/page.tsx:45-81 |
Header | The top bar of the main content area. It includes the page title, a trigger for the mobile sidebar, notification and theme toggle buttons, and a user account dropdown. | apps/frontend/app/dashboard/page.tsx:83-137 |
Main | The primary content container which holds all the data visualization cards and tables. It is designed to be scrollable for overflow content. | apps/frontend/app/dashboard/page.tsx:139-229 |
Core Features and Components
The dashboard is composed of several key components, each responsible for displaying a specific piece of information.
State Management
The dashboard component manages local UI state, such as the current theme (light or dark), using the useState hook. A toggleTheme function handles switching between themes and updating the class on the document.documentElement.
// apps/frontend/app/dashboard/page.tsx:40-41
export default function Dashboard() {
const [theme, setTheme] = useState<"light" | "dark">("dark")
const toggleTheme = () => {
const newTheme = theme === "light" ? "dark" : "light"
setTheme(newTheme)
document.documentElement.classList.toggle("dark")
}
// ...
}
The overall application architecture also specifies the use of Zustand for more complex global state management.
Sources: apps/frontend/app/dashboard/page.tsx:40-41, 102-105, ARCHITECTURE.md
Sidebar Navigation
The sidebar provides the main navigation for the application. It includes a list of menu items with icons and labels. The active link is visually distinguished.
| Icon | Label | Active |
|---|---|---|
LineChart | Dashboard | Yes |
Coins | Signals | No |
MessageSquare | Social Sentiment | No |
Wallet | Wallet | No |
Settings | Settings | No |
The sidebar also contains a WalletConnect component in its footer, allowing users to connect their Starknet wallet.
Sources: apps/frontend/app/dashboard/page.tsx:56-70, 75-77
Overview Cards
At the top of the main content area, a grid of four Card components displays high-level summary statistics. Each card shows a title, a value, and the percentage change from the last month.
- Total Signals: 142
- High Confidence: 36
- Emerging Trends: 89
- Risky Signals: 17
The color of the percentage change text is conditional, appearing green for positive changes (+) and red for negative changes (-).
Sources: apps/frontend/app/dashboard/page.tsx:143-162
Market Overview
A large card component titled "Market Overview" contains the DashboardChart component. This chart is responsible for visualizing price and volume trends. The underlying charting library used is recharts, as indicated in the project's dependencies.
Sources: apps/frontend/app/dashboard/page.tsx:167-176, apps/frontend/package.json:19
Trending Tokens
Adjacent to the market overview, the "Trending Tokens" card displays a list of tokens that are currently popular based on social sentiment and on-chain activity. This information is rendered by the TrendingTokens component.
Sources: apps/frontend/app/dashboard/page.tsx:177-186
Trading Signals Table
A major section of the dashboard is dedicated to displaying recent trading signals. This is managed by a Card containing a Tabs component from Radix UI, which allows users to filter signals by category.
The available tabs are:
- All Signals
- High Confidence
- Emerging
- Risky
Each tab's content is a SignalTable component, which is passed a category prop to display the relevant data. The table itself is within an overflow-auto container to handle a large number of signals without breaking the layout.
The flow of filtering signals is shown below.