This commit addresses the issue where switching to English still showed Chinese text in many UI elements.
Changes made:
- Added 40+ missing translation keys to translations.ts for both English and Chinese
- Updated App.tsx to use t() function for all hardcoded text (logout button, loading message)
- Updated AITradersPage.tsx extensively:
- Replaced all alert/confirm messages with translation keys
- Updated status labels (inUse, enabled, configured)
- Updated all modal components (SignalSource, ModelConfig, ExchangeConfig)
- Added language prop to all modal components
- Replaced all Chinese UI text with translation function calls
The implementation now properly supports language switching between English and Chinese throughout the entire application.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- add logo
- Replaced emoji placeholders with Lucide icons in AITradersPage, CompetitionPage, EquityChart, Header, LoginPage, and RegisterPage for improved visual consistency.
- Updated button styles to include icons for actions like adding models and exchanges.
- Enhanced error and empty state displays with relevant icons to provide better user feedback.
- Add specific field validation for Aster exchange (asterUser, asterSigner, asterPrivateKey)
- Add specific field validation for Hyperliquid exchange (apiKey, hyperliquidWalletAddr)
- Keep existing validation for Binance (apiKey, secretKey)
- Remove debug console logs
- Fix issue where Aster exchange was not appearing in trader creation dropdown
This ensures all three supported exchanges can be properly selected when creating a new AI trader.
Problem:
- Leaderboard used ai_model-based colors (qwen=purple, other=blue)
- Performance Comparison used index-based colors (10 color pool)
- This caused color mismatch between the two components
- Same trader showed different colors in different sections
Solution:
- Create shared color utility (utils/traderColors.ts)
- Define single color pool with 10 distinct colors
- Implement unified getTraderColor function based on trader index
- Update both ComparisonChart and CompetitionPage to use shared utility
Changes:
- New file: web/src/utils/traderColors.ts (shared color logic)
- Updated: ComparisonChart.tsx (use shared utility)
- Updated: CompetitionPage.tsx (use shared utility in Leaderboard
and Head-to-Head sections)
Now traders consistently display the same color across all UI sections.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Problem:
- Multiple traders using the same AI model had duplicate colors
- Only 2 colors were available (blue for deepseek, purple for qwen)
- Made it difficult to distinguish between traders
Solution:
- Expand color pool from 2 to 10 distinct colors
- Change color assignment from ai_model-based to index-based
- Each trader now gets a unique color based on their position
- Colors cycle if there are more than 10 traders
Color pool includes: blue, purple, emerald, orange, pink, amber,
sky, violet, green, rose
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Frontend changes:
- Update TradeOutcome interface with new fields:
- quantity: Position size
- leverage: Leverage multiplier
- position_value: Total position value
- margin_used: Margin required
- Add position details display in trade cards:
- Quantity (with 4 decimal precision)
- Leverage (shown as "50x")
- Position Value (shown as "$10000.00")
- Margin Used (shown as "$200.00")
Visual design:
- 2x2 grid layout for position details
- Color coding: Leverage in gold, Margin in purple
- Conditional rendering with fallback "-" for missing data
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
