Spaces:

Really-amin
/

Datasourceforcryptocurrency

Running

App Files Files Community

Datasourceforcryptocurrency / docs /guides /QUICK_INTEGRATION_GUIDE.md

Really-amin

Upload 301 files

e4e4574 verified 11 days ago

preview code

raw

history blame contribute delete

9.98 kB

⚡ Quick Integration Guide

1. Add New CSS Files to HTML

Add these lines to templates/unified_dashboard.html in the <head> section:

<!-- NEW: Enterprise Design System -->
<link rel="stylesheet" href="/static/css/design-tokens.css">
<link rel="stylesheet" href="/static/css/enterprise-components.css">
<link rel="stylesheet" href="/static/css/navigation.css">
<link rel="stylesheet" href="/static/css/toast.css">
<link rel="stylesheet" href="/static/css/accessibility.css">

2. Add New JavaScript Files

Add these before the closing </body> tag:

<!-- NEW: Core Libraries -->
<script src="/static/js/icons.js"></script>
<script src="/static/js/provider-discovery.js"></script>
<script src="/static/js/toast.js"></script>
<script src="/static/js/accessibility.js"></script>

3. Initialize Provider Discovery

Add this script after all JavaScript files are loaded:

<script>
document.addEventListener('DOMContentLoaded', async () => {
    console.log('[App] Initializing...');

    try {
        // Initialize provider discovery engine
        await providerDiscovery.init();

        // Show success message
        toast.success('Provider discovery engine initialized!', {
            title: 'System Ready',
            duration: 3000
        });

        console.log('[App] Providers loaded:', providerDiscovery.getStats());
    } catch (error) {
        console.error('[App] Initialization failed:', error);
        toast.error('Failed to initialize provider discovery', {
            title: 'Error',
            duration: 5000
        });
    }
});
</script>

4. Replace Provider Tab Content

Find the "Providers" tab section and replace with:

<div id="providers-tab" class="tab-content">
    <!-- Provider Stats -->
    <div class="grid grid-cols-4 gap-4 mb-4">
        <div class="stat-card">
            <div class="stat-label">Total Providers</div>
            <div class="stat-value" id="provider-count-total">200</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">Free APIs</div>
            <div class="stat-value" id="provider-count-free">150</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">Categories</div>
            <div class="stat-value" id="provider-count-categories">11</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">Online</div>
            <div class="stat-value stat-change positive" id="provider-count-online">120</div>
        </div>
    </div>

    <!-- Search & Filters -->
    <div class="card mb-4">
        <div class="flex gap-4">
            <input type="search" id="provider-search"
                   placeholder="Search providers..."
                   class="form-input flex-1"
                   role="searchbox"
                   aria-label="Search providers">

            <select id="provider-category-filter" class="form-select" style="width: 200px;">
                <option value="">All Categories</option>
                <option value="market_data">Market Data</option>
                <option value="exchange">Exchanges</option>
                <option value="defi">DeFi</option>
                <option value="blockchain_explorer">Explorers</option>
                <option value="news">News</option>
                <option value="sentiment">Sentiment</option>
                <option value="analytics">Analytics</option>
            </select>

            <button class="btn btn-secondary" onclick="refreshProviders()">
                <span id="refresh-icon"></span>
                Refresh
            </button>
        </div>
    </div>

    <!-- Provider Grid -->
    <div id="providers-grid" class="grid grid-cols-3 gap-4">
        <!-- Auto-generated by provider-discovery.js -->
    </div>
</div>

<script>
// Render providers
async function loadProviders() {
    const search = document.getElementById('provider-search').value;
    const category = document.getElementById('provider-category-filter').value;

    providerDiscovery.renderProviders('providers-grid', {
        search: search || undefined,
        category: category || undefined,
        sortBy: 'priority'
    });

    // Update stats
    const stats = providerDiscovery.getStats();
    document.getElementById('provider-count-total').textContent = stats.total;
    document.getElementById('provider-count-free').textContent = stats.free;
    document.getElementById('provider-count-categories').textContent = stats.categories;
    document.getElementById('provider-count-online').textContent = stats.statuses.online;
}

function refreshProviders() {
    toast.info('Refreshing providers...', { duration: 2000 });
    providerDiscovery.init().then(() => {
        loadProviders();
        toast.success('Providers refreshed!', { duration: 2000 });
    });
}

// Event listeners
document.getElementById('provider-search')?.addEventListener('input',
    debounce(loadProviders, 300));
document.getElementById('provider-category-filter')?.addEventListener('change',
    loadProviders);

// Debounce helper
function debounce(func, wait) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

// Load on tab switch
// Call loadProviders() when Providers tab becomes active
</script>

5. Add Icons to Buttons

Replace button content with icon + text:

<!-- Before -->
<button class="btn btn-primary">Refresh</button>

<!-- After -->
<button class="btn btn-primary">
    ${window.getIcon('refresh', 20)}
    Refresh
</button>

<!-- Or use template literals -->
<button class="btn btn-primary" id="refresh-btn"></button>
<script>
document.getElementById('refresh-btn').innerHTML = `
    ${window.getIcon('refresh', 20)}
    Refresh
`;
</script>

6. Use Toast Notifications

Replace alert() or console.log() with toasts:

// Success messages
toast.success('Data loaded successfully!');

// Errors
toast.error('Failed to connect to API', {
    title: 'Connection Error',
    duration: 5000
});

// Warnings
toast.warning('API rate limit approaching', {
    duration: 4000
});

// Info
toast.info('Fetching latest data...', {
    duration: 2000
});

7. Make Tables Responsive

Wrap existing tables:

<!-- Before -->
<table class="table">...</table>

<!-- After -->
<div class="table-container">
    <table class="table table-striped">...</table>
</div>

8. Add Loading States

<!-- Skeleton loader -->
<div class="skeleton" style="height: 200px; width: 100%;"></div>

<!-- Spinner -->
<div class="spinner"></div>

<!-- On elements -->
<div id="data-container" aria-busy="true">
    <div class="skeleton" style="height: 100px;"></div>
</div>

<script>
async function loadData() {
    const container = document.getElementById('data-container');
    a11y.markAsLoading(container, 'Loading data');

    try {
        const data = await fetchData();
        container.innerHTML = renderData(data);
    } finally {
        a11y.unmarkAsLoading(container);
    }
}
</script>

9. Test Everything

// Check provider discovery
console.log('Providers:', providerDiscovery.getAllProviders().length);
console.log('Categories:', providerDiscovery.getCategories());
console.log('Stats:', providerDiscovery.getStats());

// Test toasts
toast.success('Test success');
toast.error('Test error');
toast.warning('Test warning');
toast.info('Test info');

// Test icons
console.log('Available icons:', window.iconLibrary.getAvailableIcons());

// Test accessibility
announce('Test announcement', 'polite');

10. Optional: Backend Provider Endpoint

Add this to your backend to enable health checks:

@app.get("/api/providers")
async def get_providers():
    """Return all providers from config"""
    import json
    with open('providers_config_ultimate.json', 'r') as f:
        config = json.load(f)
    return config

@app.get("/api/providers/{provider_id}/health")
async def check_provider_health(provider_id: str):
    """Check if provider is reachable"""
    # Implement actual health check
    import httpx
    async with httpx.AsyncClient() as client:
        try:
            # Get provider config and test endpoint
            response = await client.get(provider_url, timeout=5.0)
            return {
                "status": "online" if response.status_code == 200 else "offline",
                "response_time": response.elapsed.total_seconds() * 1000
            }
        except Exception as e:
            return {"status": "offline", "error": str(e)}

✅ Verification

After integration, verify:

Design Tokens Work:
- Open DevTools → Console
- Type: getComputedStyle(document.body).getPropertyValue('--color-accent-blue')
- Should return: #3b82f6
Icons Work:
- Console: window.iconLibrary.getAvailableIcons()
- Should return: Array of 50+ icon names
Provider Discovery Works:
- Console: providerDiscovery.getStats()
- Should return: Object with provider counts
Toasts Work:
- Console: toast.success('Test!')
- Should show green toast in top-right corner
Accessibility Works:
- Press Tab key → Should see blue focus outlines
- Press Ctrl+K → Should focus search box (if configured)

🎉 Done!

Your dashboard now has:

✅ Enterprise design system
✅ Auto-discovery of 200+ providers
✅ Beautiful toast notifications
✅ SVG icon library
✅ Full accessibility
✅ Responsive design

Enjoy! 🚀