Dashboard Features

The Dashboard provides a comprehensive overview of your portfolio, price performance, and quick access to platform features.

Portfolio Overview

Displays your total DGKO portfolio value in USD, calculated using real-time DGKO/KLV pool price × KLV/USD rate. Shows 24h price change with directional arrow, your DGKO balance, and current price per token.

Price source: DGKO/KLV swap pool reserves × KLV market price

Price Chart

Visual SVG line chart showing DGKO price movement over the last 24 hours. Each data point represents an actual swap transaction you executed. The chart features gradient area fill and displays the high and low prices.

Data source: Your swap transaction history stored in browser localStorage

Token Balances

Lists all tokens in your connected Klever wallet with real-time balance updates. Includes token logos, asset IDs, and formatted balances with proper decimal precision.

Send Form

Secure token transfer interface. Enter recipient Klever address and amount to send KLV or other tokens. Validates addresses and shows transaction fees before execution.

Resources Section

Unified section with clickable cards linking to key platform features and documentation:

  • Swap Tokens: Trade DGKO for KLV
  • Stake Tokens: Earn rewards on DGKO and BABYDGKO
  • Explore Tokens: View detailed token information
  • Documentation: Complete platform guide
  • Updates: Latest features and changes
  • Help & Support: Common questions and troubleshooting

Modular Architecture

The dashboard follows modular architecture patterns with focused components:

hooks/useSwapMetrics.ts - Swap data calculations
components/PriceChart.tsx - SVG chart visualization
components/PerformanceChart.tsx - Chart orchestrator
components/ResourcesSection.tsx - Feature links