script.js

// Initialize wallet connection
let walletConnected = false;
let solBalance = 0;
let tokens = [];

// Mock data for demo
function fetchWalletData() {
    // Simulate API call
    setTimeout(() => {
        walletConnected = true;
        solBalance = 4.52;
        tokens = [
            { name: "Solana", symbol: "SOL", balance: 4.52, value: 452.00, change: "+2.5%", logo: "http://static.photos/white/200x200/1" },
            { name: "USDC", symbol: "USDC", balance: 150.00, value: 150.00, change: "0.0%", logo: "http://static.photos/blue/200x200/2" },
            { name: "Raydium", symbol: "RAY", balance: 25.00, value: 75.50, change: "+5.2%", logo: "http://static.photos/yellow/200x200/3" },
            { name: "Serum", symbol: "SRM", balance: 10.50, value: 42.00, change: "-1.3%", logo: "http://static.photos/green/200x200/4" }
        ];
        
        // Update UI
        document.querySelector('custom-wallet-card').setAttribute('connected', 'true');
        document.querySelector('custom-wallet-card').setAttribute('balance', solBalance.toString());
        document.querySelector('custom-token-list').setAttribute('tokens', JSON.stringify(tokens));
    }, 1000);
}

// Connect wallet function
function connectWallet() {
    if (!walletConnected) {
        fetchWalletData();
    }
}

// Handle dark/light mode toggle
function toggleDarkMode() {
    const html = document.documentElement;
    if (html.classList.contains('dark')) {
        html.classList.remove('dark');
        localStorage.setItem('theme', 'light');
    } else {
        html.classList.add('dark');
        localStorage.setItem('theme', 'dark');
    }
}

// Initialize theme based on user preference
function initTheme() {
    if (localStorage.getItem('theme') === 'dark' || 
        (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark');
    }
}

// Initialize app
document.addEventListener('DOMContentLoaded', () => {
    initTheme();
    feather.replace();
    
    // Demo: Auto connect for demo purposes
    setTimeout(connectWallet, 500);
});