API Configuration Helper - Visual Guide
Button Location
The API Configuration Helper button appears in two places:
1. Dashboard Header (Top Right)
┌─────────────────────────────────────────────────────────┐
│ Enhanced Dashboard [💲] [🔄] [🌙] │
│ Real-time Market Data │
└─────────────────────────────────────────────────────────┘
↑
Config Helper Button
2. Global Header (All Pages)
┌─────────────────────────────────────────────────────────┐
│ ☰ Home [💲] [🌙] [🔔] [⚙️] │
└─────────────────────────────────────────────────────────┘
↑
Config Helper Button
Button Design
The button is a small, circular icon button with:
- Icon: Dollar sign (💲) representing API/services
- Color: Teal gradient matching your design system
- Size: 20x20px icon, 40x40px clickable area
- Hover: Slight scale animation
- Tooltip: "API Configuration Guide"
Modal Layout
When you click the button, a modal opens:
┌─────────────────────────────────────────────────────────┐
│ 💲 API Configuration Guide ✕ │
├─────────────────────────────────────────────────────────┤
│ │
│ Copy and paste these configurations to use our │
│ services in your application. │
│ │
│ Base URL: http://localhost:7860 [Copy] │
│ │
│ ┌─ Core Services ────────────────────────────────┐ │
│ │ │ │
│ │ ▼ Market Data API │ │
│ │ Real-time cryptocurrency market data │ │
│ │ │ │
│ │ Endpoints: │ │
│ │ [GET] /api/market/top [Copy] │ │
│ │ [GET] /api/market/trending [Copy] │ │
│ │ │ │
│ │ Example Usage: [Copy] │ │
│ │ ┌──────────────────────────────────────┐ │ │
│ │ │ fetch('http://localhost:7860/api/... │ │ │
│ │ │ .then(res => res.json()) │ │ │
│ │ │ .then(data => console.log(data)); │ │ │
│ │ └──────────────────────────────────────┘ │ │
│ │ │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ ┌─ AI Services ──────────────────────────────────┐ │
│ │ ▶ Sentiment Analysis API │ │
│ │ ▶ AI Models API │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ ┌─ Trading Services ─────────────────────────────┐ │
│ │ ▶ OHLCV Data API │ │
│ │ ▶ Trading & Backtesting API │ │
│ └──────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘
Interaction Flow
Step 1: Click Button
User clicks [💲] button
↓
Modal slides in with animation
Step 2: Browse Services
User sees 10 services organized by category
↓
Click on any service to expand
↓
See endpoints and examples
Step 3: Copy Configuration
User clicks [Copy] button
↓
Text copied to clipboard
↓
Button shows checkmark ✓
↓
Visual feedback (green color)
Step 4: Use in Code
User pastes into their application
↓
Configuration works immediately
Color Scheme
The modal uses your existing design system:
Primary Color: #14b8a6 (Teal)
Secondary: #2dd4bf (Teal Light)
Background: #ffffff (White)
Text: #0f2926 (Dark)
Border: #e5e7eb (Light Gray)
Success: #10b981 (Green)
Responsive Design
Desktop (>768px)
┌─────────────────────────────────────┐
│ Full modal with all features │
│ 900px max width │
│ 85vh max height │
└─────────────────────────────────────┘
Mobile (<768px)
┌───────────────────┐
│ Compact layout │
│ Full width │
│ 95vh height │
│ Stacked items │
└───────────────────┘
Service Categories
The modal organizes services into these categories:
Core Services (2 services)
- Market Data API
- News Aggregator API
AI Services (2 services)
- Sentiment Analysis API
- AI Models API
Trading Services (2 services)
- OHLCV Data API
- Trading & Backtesting API
Advanced Services (2 services)
- Multi-Source Fallback API
- Technical Analysis API
System Services (2 services)
- Resources API
- Real-Time Monitoring API
Copy Button States
Normal State
┌─────────┐
│ Copy │ ← Teal background
└─────────┘
Hover State
┌─────────┐
│ Copy │ ← Darker teal, slight lift
└─────────┘
Copied State
┌─────────┐
│ ✓ │ ← Green background, checkmark
└─────────┘
Example Service Card
┌────────────────────────────────────────────────────┐
│ ▼ Market Data API │
│ Real-time cryptocurrency market data │
│ │
│ Endpoints: │
│ ┌──────────────────────────────────────────────┐ │
│ │ [GET] /api/market/top [Copy] │ │
│ │ Top cryptocurrencies │ │
│ ├──────────────────────────────────────────────┤ │
│ │ [GET] /api/market/trending [Copy] │ │
│ │ Trending coins │ │
│ └──────────────────────────────────────────────┘ │
│ │
│ Example Usage: [Copy] │
│ ┌──────────────────────────────────────────────┐ │
│ │ fetch('http://localhost:7860/api/market/top')│ │
│ │ .then(res => res.json()) │ │
│ │ .then(data => console.log(data)); │ │
│ └──────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────┘
HTTP Method Badges
The modal uses color-coded badges for HTTP methods:
[GET] ← Green badge
[POST] ← Blue badge
[PUT] ← Orange badge
[DELETE]← Red badge
Animations
Modal Open
- Fade in overlay (0.3s)
- Slide down + scale up (0.3s)
- Smooth easing
Service Expand
- Smooth height transition (0.3s)
- Rotate arrow icon (0.2s)
Copy Feedback
- Button color change (instant)
- Icon swap (instant)
- Reset after 2 seconds
Accessibility
The modal is fully accessible:
✅ Keyboard Navigation
- Tab through all interactive elements
- ESC to close modal
- Enter to activate buttons
✅ Screen Readers
- Proper ARIA labels
- Semantic HTML
- Descriptive button text
✅ Focus Management
- Focus trapped in modal
- Focus returns to button on close
Mobile Experience
On mobile devices:
- Button: Same size, easy to tap
- Modal: Full-screen overlay
- Scrolling: Smooth vertical scroll
- Copy: Native clipboard integration
- Close: Large X button or tap overlay
Performance
The modal is optimized for performance:
- Lazy Loading: Only loads when button is clicked
- Singleton Pattern: One instance reused
- Minimal DOM: Efficient rendering
- CSS Animations: Hardware accelerated
Browser Support
Tested and working on:
✅ Chrome 90+ ✅ Firefox 88+ ✅ Safari 14+ ✅ Edge 90+ ✅ Mobile browsers
Tips for Users
- Quick Access: Button is always visible in header
- Copy Everything: Every URL and code snippet is copyable
- Expand as Needed: Only expand services you need
- Mobile Friendly: Works great on phones and tablets
- Always Updated: Shows current server URL automatically
Visual Design: Clean, modern, professional User Experience: Intuitive, fast, helpful Implementation: Solid, maintainable, extensible