const API_BASE = '/api';
        const FETCH_TIMEOUT_MS = 15000;
        const RPC_HEALTH_TIMEOUT_MS = 5000;
        const FETCH_MAX_RETRIES = 3;
        const RETRY_DELAY_MS = 1000;
        window.DEBUG_EXPLORER = false;
        let _apiUnavailableBannerShown = false;
        function showAPIUnavailableBanner(status) {
            if (_apiUnavailableBannerShown) return;
            _apiUnavailableBannerShown = true;
            var main = document.getElementById('mainContent');
            if (!main) return;
            var banner = document.createElement('div');
            banner.id = 'apiUnavailableBanner';
            banner.setAttribute('role', 'alert');
            banner.style.cssText = 'background: rgba(200,80,80,0.95); color: #fff; padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: 8px; font-size: 0.9rem;';
            banner.innerHTML = '<strong>Explorer API temporarily unavailable</strong> (HTTP ' + status + '). Stats, blocks, and transactions cannot load until the backend is running. <a href="https://github.com/d-bis/explorer-monorepo/blob/main/docs/EXPLORER_API_ACCESS.md" target="_blank" rel="noopener" style="color: #fff; text-decoration: underline;">See docs</a>.';
            main.insertBefore(banner, main.firstChild);
        }
        (function() {
            var _log = console.log, _warn = console.warn;
            console.log = function() { if (window.DEBUG_EXPLORER) _log.apply(console, arguments); };
            console.warn = function() { if (window.DEBUG_EXPLORER) _warn.apply(console, arguments); };
        })();
        // RPC/WebSocket: VMID 2201 (public RPC). FQDN when HTTPS (avoids mixed content); IP when HTTP (e.g. http://192.168.11.140)
        const RPC_IP = 'http://192.168.11.221:8545';   // Chain 138 - VMID 2201 besu-rpc-public-1
        const RPC_WS_IP = 'ws://192.168.11.221:8546';
        const RPC_FQDN = 'https://rpc-http-pub.d-bis.org';   // VMID 2201 - HTTPS
        const RPC_WS_FQDN = 'wss://rpc-ws-pub.d-bis.org';
        const RPC_URLS = (typeof window !== 'undefined' && window.location && window.location.protocol === 'https:')
            ? [RPC_FQDN] : [RPC_IP];
        const RPC_URL = (typeof window !== 'undefined' && window.location && window.location.protocol === 'https:') ? RPC_FQDN : RPC_IP;
        const RPC_WS_URL = (typeof window !== 'undefined' && window.location && window.location.protocol === 'https:') ? RPC_WS_FQDN : RPC_WS_IP;
        let _rpcUrlIndex = 0;
        let _blocksScrollAnimationId = null;
        async function getRpcUrl() {
            if (RPC_URLS.length <= 1) return RPC_URLS[0];
            const ac = new AbortController();
            const t = setTimeout(() => ac.abort(), RPC_HEALTH_TIMEOUT_MS);
            for (let i = 0; i < RPC_URLS.length; i++) {
                const url = RPC_URLS[(_rpcUrlIndex + i) % RPC_URLS.length];
                try {
                    const r = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ jsonrpc: '2.0', method: 'eth_blockNumber', params: [], id: 1 }), signal: ac.signal });
                    clearTimeout(t);
                    if (r.ok) { _rpcUrlIndex = (_rpcUrlIndex + i) % RPC_URLS.length; return url; }
                } catch (e) {}
            }
            clearTimeout(t);
            return RPC_URLS[_rpcUrlIndex % RPC_URLS.length];
        }
        const CHAIN_ID = 138; // Hyperledger Besu ChainID 138
        async function rpcCall(method, params) {
            const url = await getRpcUrl();
            const r = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ jsonrpc: '2.0', method, params: params || [], id: 1 }) });
            const j = await r.json();
            if (j.error) throw new Error(j.error.message || 'RPC error');
            return j.result;
        }
        const BLOCKSCOUT_API_ORIGIN = 'https://explorer.d-bis.org/api'; // fallback when not on explorer host
        // Use relative /api when on explorer host so API always hits same host (avoids CORS/origin mismatch with www, port, or proxy)
        const EXPLORER_HOSTS = ['explorer.d-bis.org', '192.168.11.140'];
        const isOnExplorerHost = (typeof window !== 'undefined' && window.location && window.location.hostname && EXPLORER_HOSTS.indexOf(window.location.hostname) !== -1);
        const BLOCKSCOUT_API = isOnExplorerHost ? '/api' : BLOCKSCOUT_API_ORIGIN;
        const EXPLORER_ORIGINS = ['https://explorer.d-bis.org', 'http://explorer.d-bis.org', 'http://192.168.11.140', 'https://192.168.11.140'];
        const EXPLORER_ORIGIN = (typeof window !== 'undefined' && window.location && EXPLORER_ORIGINS.includes(window.location.origin)) ? window.location.origin : 'https://explorer.d-bis.org';
        var I18N = {
            en: { home: 'Home', blocks: 'Blocks', transactions: 'Transactions', bridge: 'Bridge', weth: 'WETH', tokens: 'Tokens', analytics: 'Analytics', operator: 'Operator', watchlist: 'Watchlist', searchPlaceholder: 'Address, tx hash, block number, or token/contract name...', connectWallet: 'Connect Wallet', darkMode: 'Dark mode', lightMode: 'Light mode', back: 'Back', exportCsv: 'Export CSV', tokenBalances: 'Token Balances', internalTxns: 'Internal Txns', readContract: 'Read contract', writeContract: 'Write contract', addToWatchlist: 'Add to watchlist', removeFromWatchlist: 'Remove from watchlist', checkApprovals: 'Check token approvals', copied: 'Copied' },
            de: { home: 'Start', blocks: 'Blöcke', transactions: 'Transaktionen', bridge: 'Brücke', weth: 'WETH', tokens: 'Token', analytics: 'Analysen', operator: 'Operator', watchlist: 'Beobachtungsliste', searchPlaceholder: 'Adresse, Tx-Hash, Blocknummer oder Token/Vertrag…', connectWallet: 'Wallet verbinden', darkMode: 'Dunkelmodus', lightMode: 'Hellmodus', back: 'Zurück', exportCsv: 'CSV exportieren', tokenBalances: 'Token-Bestände', internalTxns: 'Interne Transaktionen', readContract: 'Vertrag lesen', writeContract: 'Vertrag schreiben', addToWatchlist: 'Zur Beobachtungsliste', removeFromWatchlist: 'Aus Beobachtungsliste entfernen', checkApprovals: 'Token-Freigaben prüfen', copied: 'Kopiert' },
            fr: { home: 'Accueil', blocks: 'Blocs', transactions: 'Transactions', bridge: 'Pont', weth: 'WETH', tokens: 'Jetons', analytics: 'Analyses', operator: 'Opérateur', watchlist: 'Liste de suivi', searchPlaceholder: 'Adresse, hash de tx, numéro de bloc ou nom de token/contrat…', connectWallet: 'Connecter le portefeuille', darkMode: 'Mode sombre', lightMode: 'Mode clair', back: 'Retour', exportCsv: 'Exporter CSV', tokenBalances: 'Soldes de jetons', internalTxns: 'Transactions internes', readContract: 'Lire le contrat', writeContract: 'Écrire le contrat', addToWatchlist: 'Ajouter à la liste', removeFromWatchlist: 'Retirer de la liste', checkApprovals: 'Vérifier les approbations', copied: 'Copié' }
        };
        var currentLocale = (function(){ try { return localStorage.getItem('explorerLocale') || 'en'; } catch(e){ return 'en'; } })();
        function t(key) { return (I18N[currentLocale] && I18N[currentLocale][key]) || I18N.en[key] || key; }
        function setLocale(loc) { currentLocale = loc; try { localStorage.setItem('explorerLocale', loc); } catch(e){} if (typeof applyI18n === 'function') applyI18n(); }
        function applyI18n() { document.querySelectorAll('[data-i18n]').forEach(function(el){ var k = el.getAttribute('data-i18n'); if (k) el.textContent = t(k); }); var searchIn = document.getElementById('searchInput'); if (searchIn) searchIn.placeholder = t('searchPlaceholder'); var localeSel = document.getElementById('localeSelect'); if (localeSel) localeSel.value = currentLocale; var wcBtn = document.getElementById('walletConnectBtn'); if (wcBtn) wcBtn.textContent = t('connectWallet'); }
        window._renderWatchlist = function() { var container = document.getElementById('watchlistContent'); if (!container) return; var list = getWatchlist(); if (list.length === 0) { container.innerHTML = '<p style="color: var(--text-light);">No addresses in watchlist. Open an address and click "Add to watchlist".</p>'; return; } var html = '<table class="table"><thead><tr><th>Address</th><th>Label</th><th></th></tr></thead><tbody>'; list.forEach(function(addr){ var label = getAddressLabel(addr) || ''; html += '<tr><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(addr) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(addr)) + '</td><td>' + escapeHtml(label) + '</td><td><button type="button" class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;" onclick="event.stopPropagation(); removeFromWatchlist(\'' + escapeHtml(addr) + '\'); if(window._renderWatchlist) window._renderWatchlist();">Remove</button></td></tr>'; }); html += '</tbody></table>'; container.innerHTML = html; };
        var KNOWN_ADDRESS_LABELS = { '0x89dd12025bfcd38a168455a44b400e913ed33be2': 'CCIP WETH9 Bridge', '0xe0e93247376aa097db308b92e6ba36ba015535d0': 'CCIP WETH10 Bridge', '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2': 'WETH9', '0xf4bb2e28688e89fcce3c0580d37d36a7672e8a9f': 'WETH10', '0x8078a09637e47fa5ed34f626046ea2094a5cde5e': 'CCIP Router', '0x105f8a15b819948a89153505762444ee9f324684': 'CCIP Sender' };
        function getAddressLabel(addr) { if (!addr) return ''; var lower = addr.toLowerCase(); if (KNOWN_ADDRESS_LABELS[lower]) return KNOWN_ADDRESS_LABELS[lower]; try { var j = localStorage.getItem('explorerAddressLabels'); if (!j) return ''; var m = JSON.parse(j); return m[lower] || ''; } catch(e){ return ''; } }
        function formatAddressWithLabel(addr) { if (!addr) return ''; var label = getAddressLabel(addr); return label ? escapeHtml(label) + ' (' + escapeHtml(shortenHash(addr)) + ')' : escapeHtml(shortenHash(addr)); }
        function copyToClipboard(val, msg) { if (!val) return; try { navigator.clipboard.writeText(String(val)); showToast(msg || 'Copied', 'success'); } catch(e) { showToast('Copy failed', 'error'); } }
        function setAddressLabel(addr, label) { try { var j = localStorage.getItem('explorerAddressLabels') || '{}'; var m = JSON.parse(j); m[addr.toLowerCase()] = (label || '').trim(); localStorage.setItem('explorerAddressLabels', JSON.stringify(m)); return true; } catch(e){ return false; } }
        function getWatchlist() { try { var j = localStorage.getItem('explorerWatchlist'); if (!j) return []; var a = JSON.parse(j); return Array.isArray(a) ? a : []; } catch(e){ return []; } }
        function addToWatchlist(addr) { if (!addr || !/^0x[a-fA-F0-9]{40}$/i.test(addr)) return false; var a = getWatchlist(); var lower = addr.toLowerCase(); if (a.indexOf(lower) === -1) { a.push(lower); try { localStorage.setItem('explorerWatchlist', JSON.stringify(a)); return true; } catch(e){} } return false; }
        function removeFromWatchlist(addr) { var a = getWatchlist().filter(function(x){ return x !== addr.toLowerCase(); }); try { localStorage.setItem('explorerWatchlist', JSON.stringify(a)); return true; } catch(e){ return false; } }
        function isInWatchlist(addr) { return getWatchlist().indexOf((addr || '').toLowerCase()) !== -1; }
        let currentView = 'home';
        let currentDetailKey = '';
        var _inNavHandler = false; // re-entrancy guard: prevents hashchange -> applyHashRoute -> stub from recursing
        let provider = null;
        let signer = null;
        let userAddress = null;
        
        // Tiered Architecture: Track and Authentication
        let userTrack = 1; // Default to Track 1 (public)
        let authToken = null;
        
        // View switch helper: works even if rest of script fails. Do NOT set location.hash here (we use path-based URLs).
        function switchToView(viewName) {
            if (viewName !== 'blocks' && _blocksScrollAnimationId != null) {
                cancelAnimationFrame(_blocksScrollAnimationId);
                _blocksScrollAnimationId = null;
            }
            currentView = viewName;
            var detailViews = ['blockDetail','transactionDetail','addressDetail','tokenDetail','nftDetail','watchlist','searchResults','tokens'];
            if (detailViews.indexOf(viewName) === -1) currentDetailKey = '';
            var homeEl = document.getElementById('homeView');
            if (homeEl) homeEl.style.display = viewName === 'home' ? 'block' : 'none';
            document.querySelectorAll('.detail-view').forEach(function(el) { el.classList.remove('active'); });
            var target = document.getElementById(viewName + 'View');
            if (target) target.classList.add('active');
        }
        // Expose nav handlers: re-entrancy guard prevents hashchange from calling stub again while we're inside
        window.showHome = function() { if (_inNavHandler) return; _inNavHandler = true; try { switchToView('home'); if (window._showHome) window._showHome(); } finally { _inNavHandler = false; } };
        window.showBlocks = function() { if (_inNavHandler) return; _inNavHandler = true; try { switchToView('blocks'); if (window._showBlocks) window._showBlocks(); } finally { _inNavHandler = false; } };
        window.showTransactions = function() { if (_inNavHandler) return; _inNavHandler = true; try { switchToView('transactions'); if (window._showTransactions) window._showTransactions(); } finally { _inNavHandler = false; } };
        window.showBridgeMonitoring = function() { if (_inNavHandler) return; _inNavHandler = true; try { switchToView('bridge'); if (window._showBridgeMonitoring) window._showBridgeMonitoring(); } finally { _inNavHandler = false; } };
        window.showWETHUtilities = function() { if (_inNavHandler) return; _inNavHandler = true; try { switchToView('weth'); if (window._showWETHUtilities) window._showWETHUtilities(); } finally { _inNavHandler = false; } };
        window.showWETHTab = function() {};
        window.showWatchlist = function() { if (_inNavHandler) return; _inNavHandler = true; try { switchToView('watchlist'); if (window._renderWatchlist) window._renderWatchlist(); } finally { _inNavHandler = false; } };
        window.showTokensList = function() { if (_inNavHandler) return; _inNavHandler = true; try { switchToView('tokens'); if (window._loadTokensList) window._loadTokensList(); } finally { _inNavHandler = false; } };
        window.showAnalytics = function() { if (_inNavHandler) return; _inNavHandler = true; try { switchToView('analytics'); if (window._showAnalytics) window._showAnalytics(); } finally { _inNavHandler = false; } };
        window.showOperator = function() { if (_inNavHandler) return; _inNavHandler = true; try { switchToView('operator'); if (window._showOperator) window._showOperator(); } finally { _inNavHandler = false; } };
        window.showBlockDetail = function(n) { if (window._showBlockDetail) window._showBlockDetail(n); };
        window.showTransactionDetail = function(h) { if (window._showTransactionDetail) window._showTransactionDetail(h); };
        window.showAddressDetail = function(a) { if (window._showAddressDetail) window._showAddressDetail(a); };
        window.toggleDarkMode = function() { document.body.classList.toggle('dark-theme'); var icon = document.getElementById('themeIcon'); if (icon) icon.className = document.body.classList.contains('dark-theme') ? 'fas fa-sun' : 'fas fa-moon'; try { localStorage.setItem('explorerTheme', document.body.classList.contains('dark-theme') ? 'dark' : 'light'); } catch (e) {} };
        
        // Feature flags
        const FEATURE_FLAGS = {
            ADDRESS_FULL_DETAIL: { track: 2 },
            TOKEN_BALANCES: { track: 2 },
            TX_HISTORY: { track: 2 },
            INTERNAL_TXS: { track: 2 },
            ENHANCED_SEARCH: { track: 2 },
            ANALYTICS_DASHBOARD: { track: 3 },
            FLOW_TRACKING: { track: 3 },
            BRIDGE_ANALYTICS: { track: 3 },
            OPERATOR_PANEL: { track: 4 },
        };
        
        function hasAccess(requiredTrack) {
            return userTrack >= requiredTrack;
        }
        
        function isFeatureEnabled(featureName) {
            const feature = FEATURE_FLAGS[featureName];
            if (!feature) return false;
            return hasAccess(feature.track);
        }
        
        // Load feature flags from API
        async function loadFeatureFlags() {
            try {
                const response = await fetch('/api/v1/features', {
                    headers: authToken ? { 'Authorization': `Bearer ${authToken}` } : {}
                });
                if (response.ok) {
                    const data = await response.json();
                    userTrack = data.track || 1;
                    updateUIForTrack();
                }
            } catch (error) {
                console.error('Failed to load feature flags:', error);
            }
        }
        
        function updateUIForTrack() {
            // Show/hide navigation items based on track
            const analyticsNav = document.getElementById('analyticsNav');
            const operatorNav = document.getElementById('operatorNav');
            const moreWrap = document.getElementById('navDropdownMoreWrap');
            if (analyticsNav) analyticsNav.style.display = hasAccess(3) ? 'block' : 'none';
            if (operatorNav) operatorNav.style.display = hasAccess(4) ? 'block' : 'none';
            if (moreWrap) moreWrap.style.display = (hasAccess(3) || hasAccess(4)) ? '' : 'none';
        }
        
        // Wallet authentication
        async function connectWallet() {
            if (typeof ethers === 'undefined') {
                alert('Ethers.js not loaded. Please refresh the page.');
                return;
            }
            
            try {
                if (!window.ethereum) {
                    alert('MetaMask not detected. Please install MetaMask.');
                    return;
                }
                
                const provider = new ethers.providers.Web3Provider(window.ethereum);
                const accounts = await provider.send("eth_requestAccounts", []);
                const address = accounts[0];
                
                // Request nonce
                const nonceResp = await fetch('/api/v1/auth/nonce', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ address })
                });
                const nonceData = await nonceResp.json();
                
                // Sign message
                const message = `Sign this message to authenticate with SolaceScanScout Explorer.\n\nNonce: ${nonceData.nonce}`;
                const signer = provider.getSigner();
                const signature = await signer.signMessage(message);
                
                // Authenticate
                const authResp = await fetch('/api/v1/auth/wallet', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ address, signature, nonce: nonceData.nonce })
                });
                
                if (authResp.ok) {
                    const authData = await authResp.json();
                    authToken = authData.token;
                    userTrack = authData.track;
                    userAddress = address;
                    localStorage.setItem('authToken', authToken);
                    localStorage.setItem('userAddress', userAddress);
                    updateUIForTrack();
                    const walletBtn = document.getElementById('walletConnectBtn');
                    const walletStatus = document.getElementById('walletStatus');
                    const walletAddress = document.getElementById('walletAddress');
                    if (walletBtn) walletBtn.style.display = 'none';
                    if (walletStatus) walletStatus.style.display = 'flex';
                    if (walletAddress) walletAddress.textContent = shortenHash(address);
                    await loadFeatureFlags();
                    showToast('Wallet connected successfully!', 'success');
                } else {
                    const errorData = await authResp.json();
                    alert('Authentication failed: ' + (errorData.error?.message || 'Unknown error'));
                }
            } catch (error) {
                console.error('Wallet connection error:', error);
                alert('Failed to connect wallet: ' + error.message);
            }
        }
        
        // Check for stored auth token on load
        window.addEventListener('DOMContentLoaded', () => {
            const storedToken = localStorage.getItem('authToken');
            const storedAddress = localStorage.getItem('userAddress');
            if (storedToken && storedAddress) {
                authToken = storedToken;
                userAddress = storedAddress;
                const walletBtn = document.getElementById('walletConnectBtn');
                const walletStatus = document.getElementById('walletStatus');
                const walletAddress = document.getElementById('walletAddress');
                if (walletBtn) walletBtn.style.display = 'none';
                if (walletStatus) walletStatus.style.display = 'flex';
                if (walletAddress) walletAddress.textContent = shortenHash(storedAddress);
                loadFeatureFlags();
            } else {
                const walletBtn = document.getElementById('walletConnectBtn');
                if (walletBtn) walletBtn.style.display = 'block';
            }
        });

        // WETH Contract Addresses
        const WETH9_ADDRESS = '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2';
        // WETH10 address - will be checksummed when ethers is loaded
        const WETH10_ADDRESS_RAW = '0xf4BB2e28688e89fCcE3c0580D37d36A7672E8A9f';
        let WETH10_ADDRESS = WETH10_ADDRESS_RAW; // Will be updated to checksummed version

        // Data adapter functions to normalize Blockscout API responses
        function normalizeBlock(blockscoutBlock) {
            if (!blockscoutBlock) return null;
            
            return {
                number: blockscoutBlock.height || blockscoutBlock.number || parseInt(blockscoutBlock.block_number, 10),
                hash: blockscoutBlock.hash || blockscoutBlock.block_hash,
                parent_hash: blockscoutBlock.parent_hash || blockscoutBlock.parentHash,
                timestamp: blockscoutBlock.timestamp,
                miner: blockscoutBlock.miner?.hash || blockscoutBlock.miner || blockscoutBlock.miner_hash,
                transaction_count: blockscoutBlock.transaction_count || blockscoutBlock.transactions_count || 0,
                gas_used: blockscoutBlock.gas_used || '0',
                gas_limit: blockscoutBlock.gas_limit || blockscoutBlock.gasLimit || '0',
                size: blockscoutBlock.size || 0,
                difficulty: blockscoutBlock.difficulty || '0',
                base_fee_per_gas: blockscoutBlock.base_fee_per_gas,
                burnt_fees: blockscoutBlock.burnt_fees || '0',
                total_difficulty: blockscoutBlock.total_difficulty || '0',
                nonce: blockscoutBlock.nonce || '0x0',
                extra_data: blockscoutBlock.extra_data || '0x'
            };
        }

        function normalizeTransaction(blockscoutTx) {
            if (!blockscoutTx) return null;
            
            // Map status: "ok" -> 1, "error" -> 0, others -> 0
            let status = 0;
            if (blockscoutTx.status === 'ok' || blockscoutTx.status === 'success') {
                status = 1;
            } else if (blockscoutTx.status === 1 || blockscoutTx.status === '1') {
                status = 1;
            }
            
            return {
                hash: blockscoutTx.hash || blockscoutTx.tx_hash,
                from: blockscoutTx.from?.hash || blockscoutTx.from || blockscoutTx.from_address_hash || blockscoutTx.from_address,
                to: blockscoutTx.to?.hash || blockscoutTx.to || blockscoutTx.to_address_hash || blockscoutTx.to_address,
                value: blockscoutTx.value || '0',
                block_number: blockscoutTx.block_number || blockscoutTx.block || null,
                block_hash: blockscoutTx.block_hash || blockscoutTx.blockHash || null,
                transaction_index: blockscoutTx.position || blockscoutTx.transaction_index || blockscoutTx.index || 0,
                gas_price: blockscoutTx.gas_price || blockscoutTx.max_fee_per_gas || '0',
                gas_used: blockscoutTx.gas_used || '0',
                gas_limit: blockscoutTx.gas_limit || blockscoutTx.gas || '0',
                nonce: blockscoutTx.nonce || '0',
                status: status,
                created_at: blockscoutTx.timestamp || blockscoutTx.created_at || blockscoutTx.block_timestamp,
                input: blockscoutTx.input || blockscoutTx.raw_input || '0x',
                max_fee_per_gas: blockscoutTx.max_fee_per_gas,
                max_priority_fee_per_gas: blockscoutTx.max_priority_fee_per_gas,
                priority_fee: blockscoutTx.priority_fee,
                tx_burnt_fee: blockscoutTx.tx_burnt_fee || blockscoutTx.burnt_fees || '0',
                type: blockscoutTx.type || 0,
                confirmations: blockscoutTx.confirmations || 0,
                contract_address: blockscoutTx.created_contract_address_hash || (blockscoutTx.contract_creation && (blockscoutTx.to?.hash || blockscoutTx.to_address_hash)) || null,
                revert_reason: blockscoutTx.revert_reason || blockscoutTx.error || blockscoutTx.result || null,
                decoded_input: blockscoutTx.decoded_input || null,
                method_id: blockscoutTx.method_id || null
            };
        }

        function normalizeAddress(blockscoutAddr) {
            if (!blockscoutAddr || typeof blockscoutAddr !== 'object') return null;
            var hash = blockscoutAddr.hash || blockscoutAddr.address || blockscoutAddr.address_hash;
            if (!hash && blockscoutAddr.creator_address_hash === undefined) return null;
            var creationTx = blockscoutAddr.creation_tx_hash || blockscoutAddr.creator_tx_hash || blockscoutAddr.creation_transaction_hash || null;
            var firstSeen = blockscoutAddr.first_transaction_at || blockscoutAddr.first_seen_at || blockscoutAddr.first_tx_at || null;
            var lastSeen = blockscoutAddr.last_transaction_at || blockscoutAddr.last_seen_at || blockscoutAddr.last_tx_at || null;
            return {
                hash: hash || null,
                balance: blockscoutAddr.balance || blockscoutAddr.coin_balance || blockscoutAddr.coin_balance_value || '0',
                transaction_count: blockscoutAddr.transactions_count != null ? blockscoutAddr.transactions_count : (blockscoutAddr.transaction_count != null ? blockscoutAddr.transaction_count : (blockscoutAddr.tx_count != null ? blockscoutAddr.tx_count : 0)),
                token_count: blockscoutAddr.token_count != null ? blockscoutAddr.token_count : 0,
                is_contract: !!blockscoutAddr.is_contract,
                is_verified: !!blockscoutAddr.is_verified,
                name: blockscoutAddr.name || null,
                ens_domain_name: blockscoutAddr.ens_domain_name || null,
                creation_tx_hash: creationTx,
                first_seen_at: firstSeen,
                last_seen_at: lastSeen
            };
        }

        // Skeleton loader function
        function createSkeletonLoader(type) {
            switch(type) {
                case 'stats':
                    return `
                        <div class="stats-grid">
                            <div class="stat-card">
                                <div class="skeleton skeleton-title"></div>
                                <div class="skeleton skeleton-text" style="width: 80%;"></div>
                            </div>
                            <div class="stat-card">
                                <div class="skeleton skeleton-title"></div>
                                <div class="skeleton skeleton-text" style="width: 80%;"></div>
                            </div>
                            <div class="stat-card">
                                <div class="skeleton skeleton-title"></div>
                                <div class="skeleton skeleton-text" style="width: 80%;"></div>
                            </div>
                            <div class="stat-card">
                                <div class="skeleton skeleton-title"></div>
                                <div class="skeleton skeleton-text" style="width: 80%;"></div>
                            </div>
                        </div>
                    `;
                case 'table':
                    return `
                        <table class="table">
                            <thead>
                                <tr>
                                    <th><div class="skeleton skeleton-text"></div></th>
                                    <th><div class="skeleton skeleton-text"></div></th>
                                    <th><div class="skeleton skeleton-text"></div></th>
                                    <th><div class="skeleton skeleton-text"></div></th>
                                </tr>
                            </thead>
                            <tbody>
                                ${Array(5).fill(0).map(() => `
                                    <tr>
                                        <td><div class="skeleton skeleton-text"></div></td>
                                        <td><div class="skeleton skeleton-text"></div></td>
                                        <td><div class="skeleton skeleton-text"></div></td>
                                        <td><div class="skeleton skeleton-text"></div></td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    `;
                case 'detail':
                    return `
                        <div class="card">
                            <div class="card-header">
                                <div class="skeleton skeleton-title" style="width: 40%;"></div>
                            </div>
                            <div class="card-body">
                                ${Array(8).fill(0).map(() => `
                                    <div class="info-row">
                                        <div class="info-label">
                                            <div class="skeleton skeleton-text" style="width: 120px;"></div>
                                        </div>
                                        <div class="info-value">
                                            <div class="skeleton skeleton-text" style="width: 200px;"></div>
                                        </div>
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                    `;
                default:
                    return '<div class="loading"><i class="fas fa-spinner fa-spin"></i> Loading...</div>';
            }
        }

        // WETH ABI (Standard ERC-20 + WETH functions)
        const WETH_ABI = [
            "function deposit() payable",
            "function withdraw(uint256 wad)",
            "function balanceOf(address account) view returns (uint256)",
            "function transfer(address to, uint256 amount) returns (bool)",
            "function approve(address spender, uint256 amount) returns (bool)",
            "function allowance(address owner, address spender) view returns (uint256)",
            "function totalSupply() view returns (uint256)",
            "function name() view returns (string)",
            "function symbol() view returns (string)",
            "function decimals() view returns (uint8)",
            "event Deposit(address indexed dst, uint256 wad)",
            "event Withdrawal(address indexed src, uint256 wad)"
        ];

        // Helper function to check if ethers is loaded
        function ensureEthers() {
            // Check immediately - ethers might already be loaded
            if (typeof ethers !== 'undefined') {
                window.ethersReady = true;
                return Promise.resolve(true);
            }
            
            // Wait for ethers to load if it's still loading
            return new Promise((resolve, reject) => {
                let resolved = false;
                
                // Check immediately first (double check)
                if (typeof ethers !== 'undefined') {
                    window.ethersReady = true;
                    resolve(true);
                    return;
                }
                
                // Wait for ethersReady event
                const timeout = setTimeout(() => {
                    if (!resolved) {
                        resolved = true;
                        // Final check before rejecting
                        if (typeof ethers !== 'undefined') {
                            window.ethersReady = true;
                            resolve(true);
                        } else {
                            console.error('Ethers library failed to load after 20 seconds');
                            reject(new Error('Ethers library failed to load. Please refresh the page.'));
                        }
                    }
                }, 20000); // 20 second timeout
                
                const checkInterval = setInterval(() => {
                    if (typeof ethers !== 'undefined' && !resolved) {
                        resolved = true;
                        clearInterval(checkInterval);
                        clearTimeout(timeout);
                        window.ethersReady = true;
                        console.log('✅ Ethers detected via polling');
                        resolve(true);
                    }
                }, 100);
                
                // Listen for ethersReady event
                const onReady = function() {
                    if (!resolved) {
                        resolved = true;
                        clearInterval(checkInterval);
                        clearTimeout(timeout);
                        window.removeEventListener('ethersReady', onReady);
                        if (typeof ethers !== 'undefined') {
                            window.ethersReady = true;
                            console.log('✅ Ethers ready via event');
                            resolve(true);
                        } else {
                            console.error('ethersReady event fired but ethers is still undefined');
                            reject(new Error('Ethers library is not loaded. Please refresh the page.'));
                        }
                    }
                };
                
                window.addEventListener('ethersReady', onReady, { once: true });
            });
        }
        
        // Helper function to get API URL based on chain ID
        function getAPIUrl(endpoint) {
            // For ChainID 138, use Blockscout API
            if (CHAIN_ID === 138) {
                return `${BLOCKSCOUT_API}${endpoint}`;
            }
            // For other networks, use v2 Etherscan/Blockscan APIs
            return `${API_BASE}/v2${endpoint}`;
        }

        // Initialize - only run once
        let initialized = false;
        document.addEventListener('DOMContentLoaded', async () => {
            if (initialized) {
                console.warn('Initialization already completed, skipping...');
                return;
            }
            initialized = true;
            
            applyStoredTheme();
            var localeSel = document.getElementById('localeSelect'); if (localeSel) localeSel.value = currentLocale;
            if (typeof applyI18n === 'function') applyI18n();
            applyHashRoute();
            window.addEventListener('popstate', function() { applyHashRoute(); });
            window.addEventListener('hashchange', function() { applyHashRoute(); });
            window.addEventListener('load', function() { applyHashRoute(); });
            console.log('Loading stats, blocks, and transactions...');
            loadStats();
            loadLatestBlocks();
            loadLatestTransactions();
            startTransactionUpdates();
            
            // Ethers is only needed for MetaMask/WETH; don't block feeds on it
            try {
                await ensureEthers();
                console.log('Ethers ready.');
            } catch (error) {
                console.warn('Ethers not ready, continuing without MetaMask features:', error);
            }
            
            setTimeout(() => {
                if (typeof ethers !== 'undefined' && typeof window.ethereum !== 'undefined') {
                    checkMetaMaskConnection();
                }
            }, 500);
        });

        // MetaMask Connection
        let checkingMetaMask = false;
        async function checkMetaMaskConnection() {
            // Prevent multiple simultaneous checks
            if (checkingMetaMask) {
                console.log('checkMetaMaskConnection already in progress, skipping...');
                return;
            }
            checkingMetaMask = true;
            
            try {
                // Ensure ethers is loaded before checking MetaMask
                if (typeof ethers === 'undefined') {
                    try {
                        await ensureEthers();
                        // Wait a bit more to ensure ethers is fully initialized
                        await new Promise(resolve => setTimeout(resolve, 100));
                    } catch (error) {
                        console.warn('Ethers not available, skipping MetaMask check:', error);
                        return;
                    }
                }
                
                // Double-check ethers is available
                if (typeof ethers === 'undefined') {
                    console.warn('Ethers still not available after ensureEthers(), skipping MetaMask check');
                    return;
                }
                
                if (typeof window.ethereum !== 'undefined') {
                    try {
                        const accounts = await window.ethereum.request({ method: 'eth_accounts' });
                        if (accounts.length > 0) {
                            await connectMetaMask();
                        }
                    } catch (error) {
                        console.error('Error checking MetaMask:', error);
                    }
                }
            } finally {
                checkingMetaMask = false;
            }
        }

        async function addTokenToWallet(address, symbol, decimals, name) {
            if (!address || !/^0x[a-fA-F0-9]{40}$/i.test(address)) {
                if (typeof showToast === 'function') showToast('Invalid token address', 'error');
                return;
            }
            if (typeof window.ethereum === 'undefined') {
                if (typeof showToast === 'function') showToast('No wallet detected. Install MetaMask or another Web3 wallet.', 'error');
                return;
            }
            try {
                var added = await window.ethereum.request({
                    method: 'wallet_watchAsset',
                    params: {
                        type: 'ERC20',
                        options: {
                            address: address,
                            symbol: symbol || 'TOKEN',
                            decimals: typeof decimals === 'number' ? decimals : 18,
                            image: undefined
                        }
                    }
                });
                if (typeof showToast === 'function') {
                    showToast(added ? (symbol ? symbol + ' added to wallet' : 'Token added to wallet') : 'Add token was cancelled', added ? 'success' : 'info');
                }
            } catch (e) {
                console.error('addTokenToWallet:', e);
                if (typeof showToast === 'function') showToast(e.message || 'Could not add token to wallet', 'error');
            }
        }
        window.addTokenToWallet = addTokenToWallet;

        let connectingMetaMask = false;
        async function connectMetaMask() {
            // Prevent multiple simultaneous connections
            if (connectingMetaMask) {
                console.log('connectMetaMask already in progress, skipping...');
                return;
            }
            connectingMetaMask = true;
            
            try {
                if (typeof window.ethereum === 'undefined') {
                    alert('MetaMask is not installed! Please install MetaMask to use WETH utilities.');
                    return;
                }

                // Wait for ethers to be loaded
                if (typeof ethers === 'undefined') {
                    try {
                        await ensureEthers();
                        // Wait a bit more to ensure ethers is fully initialized
                        await new Promise(resolve => setTimeout(resolve, 100));
                    } catch (error) {
                        alert('Ethers library is not loaded. Please refresh the page and try again.');
                        console.error('ethers loading error:', error);
                        return;
                    }
                }
                
                // Double-check ethers is available
                if (typeof ethers === 'undefined') {
                    alert('Ethers library is not loaded. Please refresh the page and try again.');
                    console.error('Ethers still not available after ensureEthers()');
                    return;
                }

                try {
                    // Request account access
                    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
                    userAddress = accounts[0];

                    // Connect to Chain 138
                    await switchToChain138();

                    // Setup provider and signer
                    provider = new ethers.providers.Web3Provider(window.ethereum);
                    signer = provider.getSigner();

                    // Update UI
                    const statusEl = document.getElementById('metamaskStatus');
                    statusEl.className = 'metamask-status connected';
                    statusEl.innerHTML = `
                        <i class="fas fa-check-circle"></i>
                        <span>Connected: ${escapeHtml(shortenHash(userAddress))}</span>
                        <button class="btn btn-warning" onclick="disconnectMetaMask()" style="margin-left: auto;" aria-label="Disconnect MetaMask wallet">Disconnect</button>
                    `;

                    // Enable buttons
                    document.getElementById('weth9WrapBtn').disabled = false;
                    document.getElementById('weth9UnwrapBtn').disabled = false;
                    document.getElementById('weth10WrapBtn').disabled = false;
                    document.getElementById('weth10UnwrapBtn').disabled = false;

                    // Load balances
                    await refreshWETHBalances();

                    // Listen for account changes
                    window.ethereum.on('accountsChanged', (accounts) => {
                        if (accounts.length === 0) {
                            disconnectMetaMask();
                        } else {
                            connectMetaMask();
                        }
                    });

                    // Listen for chain changes
                    window.ethereum.on('chainChanged', () => {
                        switchToChain138();
                    });
                } catch (error) {
                    console.error('Error connecting MetaMask:', error);
                    let errorMessage = error.message || 'Unknown error';
                    if (errorMessage.includes('ethers is not defined') || typeof ethers === 'undefined') {
                        errorMessage = 'Ethers library failed to load. Please refresh the page.';
                    }
                    alert('Failed to connect MetaMask: ' + errorMessage);
                }
            } finally {
                connectingMetaMask = false;
            }
        }

        async function switchToChain138() {
            const chainId = '0x8A'; // 138 in hex
            try {
                await window.ethereum.request({
                    method: 'wallet_switchEthereumChain',
                    params: [{ chainId }],
                });
            } catch (switchError) {
                // If chain doesn't exist, add it
                if (switchError.code === 4902) {
                    try {
                        await window.ethereum.request({
                            method: 'wallet_addEthereumChain',
                            params: [{
                                chainId,
                                chainName: 'Chain 138',
                                nativeCurrency: {
                                    name: 'ETH',
                                    symbol: 'ETH',
                                    decimals: 18
                                },
                                rpcUrls: RPC_URLS.length > 0 ? RPC_URLS : [RPC_URL],
                                blockExplorerUrls: [window.location.origin || 'https://explorer.d-bis.org']
                            }],
                        });
                    } catch (addError) {
                        console.error('Error adding chain:', addError);
                        throw addError;
                    }
                } else {
                    throw switchError;
                }
            }
        }

        function disconnectMetaMask() {
            provider = null;
            signer = null;
            userAddress = null;

            const statusEl = document.getElementById('metamaskStatus');
            statusEl.className = 'metamask-status disconnected';
            statusEl.innerHTML = `
                <i class="fas fa-wallet"></i>
                <span>MetaMask not connected</span>
                <button class="btn btn-success" onclick="connectMetaMask()" style="margin-left: auto;" aria-label="Connect MetaMask wallet">Connect MetaMask</button>
            `;

            document.getElementById('weth9WrapBtn').disabled = true;
            document.getElementById('weth9UnwrapBtn').disabled = true;
            document.getElementById('weth10WrapBtn').disabled = true;
            document.getElementById('weth10UnwrapBtn').disabled = true;
        }

        async function refreshWETHBalances() {
            if (!userAddress) return;

            try {
                await ensureEthers();
                
                // Checksum addresses when ethers is available
                if (typeof ethers !== 'undefined' && ethers.utils) {
                    try {
                        // Convert to lowercase first, then checksum
                        const lowerAddress = WETH10_ADDRESS_RAW.toLowerCase();
                        WETH10_ADDRESS = ethers.utils.getAddress(lowerAddress);
                    } catch (e) {
                        console.warn('Could not checksum WETH10 address:', e);
                        // Fallback to lowercase version
                        WETH10_ADDRESS = WETH10_ADDRESS_RAW.toLowerCase();
                    }
                } else {
                    // Fallback to lowercase if ethers not available
                    WETH10_ADDRESS = WETH10_ADDRESS_RAW.toLowerCase();
                }
                
                // Get ETH balance
                const ethBalance = await provider.getBalance(userAddress);
                const ethBalanceFormatted = formatEther(ethBalance);

                // Get WETH9 balance
                const weth9Contract = new ethers.Contract(WETH9_ADDRESS, WETH_ABI, provider);
                const weth9Balance = await weth9Contract.balanceOf(userAddress);
                const weth9BalanceFormatted = formatEther(weth9Balance);

                // Get WETH10 balance - use checksummed address
                const weth10Contract = new ethers.Contract(WETH10_ADDRESS, WETH_ABI, provider);
                const weth10Balance = await weth10Contract.balanceOf(userAddress);
                const weth10BalanceFormatted = formatEther(weth10Balance);

                // Update UI
                document.getElementById('weth9EthBalance').textContent = ethBalanceFormatted + ' ETH';
                document.getElementById('weth9TokenBalance').textContent = weth9BalanceFormatted + ' WETH9';
                document.getElementById('weth10EthBalance').textContent = ethBalanceFormatted + ' ETH';
                document.getElementById('weth10TokenBalance').textContent = weth10BalanceFormatted + ' WETH10';
            } catch (error) {
                console.error('Error refreshing balances:', error);
            }
        }

        function wrapUnwrapErrorMessage(op, error) {
            if (error && (error.code === 4001 || error.code === 'ACTION_REJECTED' || (error.message && /user rejected|user denied/i.test(error.message)))) return 'Transaction cancelled.';
            if (error && error.reason) return error.reason;
            return (error && error.message) ? error.message : 'Unknown error';
        }
        function setMaxWETH9(type) {
            if (type === 'wrap') {
                const ethBalance = document.getElementById('weth9EthBalance').textContent.replace(' ETH', '');
                document.getElementById('weth9WrapAmount').value = parseFloat(ethBalance).toFixed(6);
            } else {
                const wethBalance = document.getElementById('weth9TokenBalance').textContent.replace(' WETH9', '');
                document.getElementById('weth9UnwrapAmount').value = parseFloat(wethBalance).toFixed(6);
            }
        }

        function setMaxWETH10(type) {
            if (type === 'wrap') {
                const ethBalance = document.getElementById('weth10EthBalance').textContent.replace(' ETH', '');
                document.getElementById('weth10WrapAmount').value = parseFloat(ethBalance).toFixed(6);
            } else {
                const wethBalance = document.getElementById('weth10TokenBalance').textContent.replace(' WETH10', '');
                document.getElementById('weth10UnwrapAmount').value = parseFloat(wethBalance).toFixed(6);
            }
        }

        async function wrapWETH9() {
            const amount = document.getElementById('weth9WrapAmount').value;
            if (!amount || parseFloat(amount) <= 0) {
                alert('Please enter a valid amount');
                return;
            }

            if (!signer) {
                alert('Please connect MetaMask first');
                return;
            }

            try {
                await ensureEthers();
                const amountWei = ethers.utils.parseEther(amount);
                const ethBalance = await provider.getBalance(userAddress);
                if (ethBalance.lt(amountWei)) {
                    alert('Insufficient ETH balance. You have ' + formatEther(ethBalance) + ' ETH.');
                    return;
                }
                const weth9Contract = new ethers.Contract(WETH9_ADDRESS, WETH_ABI, signer);
                try {
                    await weth9Contract.callStatic.deposit({ value: amountWei });
                } catch (e) {
                    alert('Simulation failed: ' + (e.reason || e.message || 'Unknown error'));
                    return;
                }
                const btn = document.getElementById('weth9WrapBtn');
                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';

                const tx = await weth9Contract.deposit({ value: amountWei });
                const receipt = await tx.wait();

                btn.innerHTML = '<i class="fas fa-check"></i> Success!';
                document.getElementById('weth9WrapAmount').value = '';
                await refreshWETHBalances();

                setTimeout(() => {
                    btn.innerHTML = '<i class="fas fa-arrow-right"></i> Wrap ETH to WETH9';
                    btn.disabled = false;
                }, 3000);
            } catch (error) {
                console.error('Error wrapping WETH9:', error);
                alert('Wrap WETH9: ' + wrapUnwrapErrorMessage('wrap', error));
                document.getElementById('weth9WrapBtn').innerHTML = '<i class="fas fa-arrow-right"></i> Wrap ETH to WETH9';
                document.getElementById('weth9WrapBtn').disabled = false;
            }
        }

        async function unwrapWETH9() {
            const amount = document.getElementById('weth9UnwrapAmount').value;
            if (!amount || parseFloat(amount) <= 0) {
                alert('Please enter a valid amount');
                return;
            }

            if (!signer) {
                alert('Please connect MetaMask first');
                return;
            }

            try {
                await ensureEthers();
                const weth9Contract = new ethers.Contract(WETH9_ADDRESS, WETH_ABI, signer);
                const amountWei = ethers.utils.parseEther(amount);
                const wethBalance = await weth9Contract.balanceOf(userAddress);
                if (wethBalance.lt(amountWei)) {
                    alert('Insufficient WETH9 balance. You have ' + formatEther(wethBalance) + ' WETH9.');
                    return;
                }
                try {
                    await weth9Contract.callStatic.withdraw(amountWei);
                } catch (e) {
                    alert('Simulation failed: ' + (e.reason || e.message || 'Unknown error'));
                    return;
                }
                const btn = document.getElementById('weth9UnwrapBtn');
                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';

                const tx = await weth9Contract.withdraw(amountWei);
                const receipt = await tx.wait();

                btn.innerHTML = '<i class="fas fa-check"></i> Success!';
                document.getElementById('weth9UnwrapAmount').value = '';
                await refreshWETHBalances();

                setTimeout(() => {
                    btn.innerHTML = '<i class="fas fa-arrow-left"></i> Unwrap WETH9 to ETH';
                    btn.disabled = false;
                }, 3000);
            } catch (error) {
                console.error('Error unwrapping WETH9:', error);
                alert('Unwrap WETH9: ' + wrapUnwrapErrorMessage('unwrap', error));
                document.getElementById('weth9UnwrapBtn').innerHTML = '<i class="fas fa-arrow-left"></i> Unwrap WETH9 to ETH';
                document.getElementById('weth9UnwrapBtn').disabled = false;
            }
        }

        async function wrapWETH10() {
            const amount = document.getElementById('weth10WrapAmount').value;
            if (!amount || parseFloat(amount) <= 0) {
                alert('Please enter a valid amount');
                return;
            }

            if (!signer) {
                alert('Please connect MetaMask first');
                return;
            }

            try {
                await ensureEthers();
                
                // Ensure address is checksummed
                if (typeof ethers !== 'undefined' && ethers.utils) {
                    try {
                        const lowerAddress = WETH10_ADDRESS_RAW.toLowerCase();
                        WETH10_ADDRESS = ethers.utils.getAddress(lowerAddress);
                    } catch (e) {
                        console.warn('Could not checksum WETH10 address:', e);
                        WETH10_ADDRESS = WETH10_ADDRESS_RAW.toLowerCase();
                    }
                } else {
                    WETH10_ADDRESS = WETH10_ADDRESS_RAW.toLowerCase();
                }
                
                const amountWei = ethers.utils.parseEther(amount);
                const ethBalance = await provider.getBalance(userAddress);
                if (ethBalance.lt(amountWei)) {
                    alert('Insufficient ETH balance. You have ' + formatEther(ethBalance) + ' ETH.');
                    return;
                }
                const weth10Contract = new ethers.Contract(WETH10_ADDRESS, WETH_ABI, signer);
                try {
                    await weth10Contract.callStatic.deposit({ value: amountWei });
                } catch (e) {
                    alert('Simulation failed: ' + (e.reason || e.message || 'Unknown error'));
                    return;
                }
                const btn = document.getElementById('weth10WrapBtn');
                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';

                const tx = await weth10Contract.deposit({ value: amountWei });
                const receipt = await tx.wait();

                btn.innerHTML = '<i class="fas fa-check"></i> Success!';
                document.getElementById('weth10WrapAmount').value = '';
                await refreshWETHBalances();

                setTimeout(() => {
                    btn.innerHTML = '<i class="fas fa-arrow-right"></i> Wrap ETH to WETH10';
                    btn.disabled = false;
                }, 3000);
            } catch (error) {
                console.error('Error wrapping WETH10:', error);
                alert('Wrap WETH10: ' + wrapUnwrapErrorMessage('wrap', error));
                document.getElementById('weth10WrapBtn').innerHTML = '<i class="fas fa-arrow-right"></i> Wrap ETH to WETH10';
                document.getElementById('weth10WrapBtn').disabled = false;
            }
        }

        async function unwrapWETH10() {
            const amount = document.getElementById('weth10UnwrapAmount').value;
            if (!amount || parseFloat(amount) <= 0) {
                alert('Please enter a valid amount');
                return;
            }

            if (!signer) {
                alert('Please connect MetaMask first');
                return;
            }

            try {
                await ensureEthers();
                
                // Ensure address is checksummed
                if (typeof ethers !== 'undefined' && ethers.utils) {
                    try {
                        const lowerAddress = WETH10_ADDRESS_RAW.toLowerCase();
                        WETH10_ADDRESS = ethers.utils.getAddress(lowerAddress);
                    } catch (e) {
                        console.warn('Could not checksum WETH10 address:', e);
                        WETH10_ADDRESS = WETH10_ADDRESS_RAW.toLowerCase();
                    }
                } else {
                    WETH10_ADDRESS = WETH10_ADDRESS_RAW.toLowerCase();
                }
                
                const weth10Contract = new ethers.Contract(WETH10_ADDRESS, WETH_ABI, signer);
                const amountWei = ethers.utils.parseEther(amount);
                const wethBalance = await weth10Contract.balanceOf(userAddress);
                if (wethBalance.lt(amountWei)) {
                    alert('Insufficient WETH10 balance. You have ' + formatEther(wethBalance) + ' WETH10.');
                    return;
                }
                try {
                    await weth10Contract.callStatic.withdraw(amountWei);
                } catch (e) {
                    alert('Simulation failed: ' + (e.reason || e.message || 'Unknown error'));
                    return;
                }
                const btn = document.getElementById('weth10UnwrapBtn');
                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';

                const tx = await weth10Contract.withdraw(amountWei);
                const receipt = await tx.wait();

                btn.innerHTML = '<i class="fas fa-check"></i> Success!';
                document.getElementById('weth10UnwrapAmount').value = '';
                await refreshWETHBalances();

                setTimeout(() => {
                    btn.innerHTML = '<i class="fas fa-arrow-left"></i> Unwrap WETH10 to ETH';
                    btn.disabled = false;
                }, 3000);
            } catch (error) {
                console.error('Error unwrapping WETH10:', error);
                alert('Unwrap WETH10: ' + wrapUnwrapErrorMessage('unwrap', error));
                document.getElementById('weth10UnwrapBtn').innerHTML = '<i class="fas fa-arrow-left"></i> Unwrap WETH10 to ETH';
                document.getElementById('weth10UnwrapBtn').disabled = false;
            }
        }

        function showWETHTab(tab, clickedElement) {
            document.querySelectorAll('.weth-tab-content').forEach(el => el.style.display = 'none');
            document.querySelectorAll('.weth-tab').forEach(el => el.classList.remove('active'));
            
            const tabElement = document.getElementById(`${tab}Tab`);
            if (tabElement) {
                tabElement.style.display = 'block';
            }
            
            // Update active tab - use clickedElement if provided, otherwise find by tab name
            if (clickedElement) {
                clickedElement.classList.add('active');
            } else {
                // Find the button that corresponds to this tab
                const tabButtons = document.querySelectorAll('.weth-tab');
                tabButtons.forEach(btn => {
                    if (btn.getAttribute('onclick')?.includes(`'${tab}'`)) {
                        btn.classList.add('active');
                    }
                });
            }
        }
        window.showWETHTab = showWETHTab;

        async function showWETHUtilities() {
            showView('weth');
            if ((window.location.pathname || '').replace(/^\//, '').split('/')[0] !== 'weth') updatePath('/weth');
            if (userAddress) {
                await refreshWETHBalances();
            }
        }
        window._showWETHUtilities = showWETHUtilities;

        async function showBridgeMonitoring() {
            showView('bridge');
            if ((window.location.pathname || '').replace(/^\//, '').split('/')[0] !== 'bridge') updatePath('/bridge');
            await refreshBridgeData();
        }
        window._showBridgeMonitoring = showBridgeMonitoring;

        async function showHome() {
            showView('home');
            if ((window.location.pathname || '').replace(/^\//, '').replace(/\/$/, '') !== 'home') updatePath('/home');
            await loadStats();
            await loadLatestBlocks();
            await loadLatestTransactions();
            // Start real-time transaction updates
            startTransactionUpdates();
        }
        window._showHome = showHome;

        async function showBlocks() {
            showView('blocks');
            if ((window.location.pathname || '').replace(/^\//, '').split('/')[0] !== 'blocks') updatePath('/blocks');
            await loadAllBlocks();
        }
        window._showBlocks = showBlocks;

        async function showTransactions() {
            showView('transactions');
            if ((window.location.pathname || '').replace(/^\//, '').split('/')[0] !== 'transactions') updatePath('/transactions');
            await loadAllTransactions();
        }
        window._showTransactions = showTransactions;

        // Analytics view (Track 3+)
        function showAnalytics() {
            if (!hasAccess(3)) {
                showToast('Analytics features require Track 3 access. Please connect your wallet and ensure you are approved.', 'error');
                return;
            }
            switchToView('analytics');
        }
        window._showAnalytics = showAnalytics;
        
        // Operator view (Track 4)
        function showOperator() {
            if (!hasAccess(4)) {
                showToast('Operator features require Track 4 access. Please connect your wallet and ensure you are approved.', 'error');
                return;
            }
            switchToView('operator');
        }
        window._showOperator = showOperator;
        
        function showView(viewName) {
            currentView = viewName;
            var detailViews = ['blockDetail','transactionDetail','addressDetail','tokenDetail','nftDetail','watchlist','searchResults','tokens'];
            if (detailViews.indexOf(viewName) === -1) currentDetailKey = '';
            document.querySelectorAll('.detail-view').forEach(v => v.classList.remove('active'));
            const homeView = document.getElementById('homeView');
            if (homeView) homeView.style.display = viewName === 'home' ? 'block' : 'none';
            if (viewName !== 'home') {
                const targetView = document.getElementById(`${viewName}View`);
                if (targetView) targetView.classList.add('active');
                stopTransactionUpdates();
            }
        }
        window.showView = showView;

        function toggleDarkMode() {
            document.body.classList.toggle('dark-theme');
            var isDark = document.body.classList.contains('dark-theme');
            try { localStorage.setItem('explorerTheme', isDark ? 'dark' : 'light'); } catch (e) {}
            var icon = document.getElementById('themeIcon');
            if (icon) {
                icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
            }
        }
        function applyStoredTheme() {
            try {
                var theme = localStorage.getItem('explorerTheme');
                if (theme === 'dark') {
                    document.body.classList.add('dark-theme');
                    var icon = document.getElementById('themeIcon');
                    if (icon) icon.className = 'fas fa-sun';
                }
            } catch (e) {}
        }
        function updatePath(path) {
            if (typeof history !== 'undefined' && history.pushState) {
                history.pushState(null, '', path);
            }
        }
        window.updatePath = updatePath;
        function applyHashRoute() {
            var route = '';
            var fromPath = (window.location.pathname || '/').replace(/^\//, '').replace(/\/$/, '').replace(/^index\.html$/i, '');
            var fromHash = (window.location.hash || '').replace(/^#/, '');
            if (fromPath && fromPath !== '') {
                route = fromPath;
            } else if (fromHash) {
                route = fromHash;
            }
            if (!route) { showHome(); updatePath('/home'); return; }
            var parts = route.split('/').filter(Boolean);
            var decode = function(s) { try { return decodeURIComponent(s); } catch (e) { return s; } };
            if (parts[0] === 'block' && parts[1]) { var p1 = decode(parts[1]); if (currentDetailKey === 'block:' + p1) return; showBlockDetail(p1); return; }
            if (parts[0] === 'tx' && parts[1]) { var p1 = decode(parts[1]); if (currentDetailKey === 'tx:' + p1) return; showTransactionDetail(p1); return; }
            if (parts[0] === 'address' && parts[1]) { var p1 = decode(parts[1]); if (currentDetailKey === 'address:' + p1.toLowerCase()) return; showAddressDetail(p1); return; }
            if (parts[0] === 'token' && parts[1]) { var p1 = decode(parts[1]); if (currentDetailKey === 'token:' + p1.toLowerCase()) return; showTokenDetail(p1); return; }
            if (parts[0] === 'nft' && parts[1] && parts[2]) { var p1 = decode(parts[1]), p2 = decode(parts[2]); if (currentDetailKey === 'nft:' + p1.toLowerCase() + ':' + p2) return; showNftDetail(p1, p2); return; }
            if (parts[0] === 'home') { if (currentView !== 'home') showHome(); return; }
            if (parts[0] === 'blocks') { if (currentView !== 'blocks') showBlocks(); return; }
            if (parts[0] === 'transactions') { if (currentView !== 'transactions') showTransactions(); return; }
            if (parts[0] === 'bridge') { if (currentView !== 'bridge') showBridgeMonitoring(); return; }
            if (parts[0] === 'weth') { if (currentView !== 'weth') showWETHUtilities(); return; }
            if (parts[0] === 'watchlist') { if (currentView !== 'watchlist') showWatchlist(); return; }
            if (parts[0] === 'tokens') { if (typeof showTokensList === 'function') showTokensList(); else focusSearchWithHint('token'); return; }
            if (parts[0] === 'analytics') { if (currentView !== 'analytics') showAnalytics(); return; }
            if (parts[0] === 'operator') { if (currentView !== 'operator') showOperator(); return; }
        }
        window.applyHashRoute = applyHashRoute;
        var hasRouteOnReady = window.location.hash || ((window.location.pathname || '').replace(/^\//, '').replace(/\/$/, ''));
        if (document.readyState !== 'loading' && hasRouteOnReady) { applyHashRoute(); }
        window.toggleDarkMode = toggleDarkMode;

        function focusSearchWithHint(kind) {
            showHome();
            var input = document.getElementById('searchInput');
            if (input) {
                input.focus();
                if (kind === 'token') showToast('Enter token contract address (0x...) or search by name/symbol', 'info', 4000);
            }
        }
        window.focusSearchWithHint = focusSearchWithHint;

        function toggleNavMenu() {
            var links = document.getElementById('navLinks');
            var btn = document.getElementById('navToggle');
            var icon = document.getElementById('navToggleIcon');
            if (!links || !btn) return;
            var isOpen = links.classList.toggle('nav-open');
            btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
            if (icon) icon.className = isOpen ? 'fas fa-times' : 'fas fa-bars';
        }
        function closeNavMenu() {
            var links = document.getElementById('navLinks');
            var btn = document.getElementById('navToggle');
            var icon = document.getElementById('navToggleIcon');
            if (links) links.classList.remove('nav-open');
            if (btn) btn.setAttribute('aria-expanded', 'false');
            if (icon) icon.className = 'fas fa-bars';
            closeAllNavDropdowns();
        }
        function closeAllNavDropdowns() {
            document.querySelectorAll('.nav-dropdown.open').forEach(function (el) {
                el.classList.remove('open');
                var trigger = el.querySelector('.nav-dropdown-trigger');
                if (trigger) trigger.setAttribute('aria-expanded', 'false');
            });
        }
        function initNavDropdowns() {
            document.querySelectorAll('.nav-dropdown-trigger').forEach(function (trigger) {
                trigger.addEventListener('click', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    var dropdown = trigger.closest('.nav-dropdown');
                    var wasOpen = dropdown && dropdown.classList.contains('open');
                    closeAllNavDropdowns();
                    if (dropdown && !wasOpen) {
                        dropdown.classList.add('open');
                        trigger.setAttribute('aria-expanded', 'true');
                    }
                });
            });
            document.addEventListener('click', function () {
                closeAllNavDropdowns();
            });
            document.getElementById('navLinks').addEventListener('click', function (e) {
                if (e.target.closest('.nav-dropdown-menu')) e.stopPropagation();
            });
        }
        window.toggleNavMenu = toggleNavMenu;
        window.closeNavMenu = closeNavMenu;
        window.closeAllNavDropdowns = closeAllNavDropdowns;

        // Update breadcrumb navigation
        function updateBreadcrumb(type, identifier, identifierExtra) {
            let breadcrumbContainer;
            let breadcrumbHTML = '<a href="/home">Home</a>';
            switch (type) {
                case 'block':
                    breadcrumbContainer = document.getElementById('blockDetailBreadcrumb');
                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span>';
                    breadcrumbHTML += '<a href="/blocks">Blocks</a>';
                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span>';
                    breadcrumbHTML += '<span class="breadcrumb-current">Block #' + escapeHtml(String(identifier)) + '</span>';
                    break;
                case 'transaction':
                    breadcrumbContainer = document.getElementById('transactionDetailBreadcrumb');
                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span>';
                    breadcrumbHTML += '<a href="/transactions">Transactions</a>';
                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span>';
                    breadcrumbHTML += '<span class="breadcrumb-current">' + escapeHtml(shortenHash(identifier)) + '</span>';
                    break;
                case 'address':
                    breadcrumbContainer = document.getElementById('addressDetailBreadcrumb');
                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span><span>Address</span><span class="breadcrumb-separator">/</span><span class="breadcrumb-current">' + escapeHtml(shortenHash(identifier)) + '</span>';
                    break;
                case 'token':
                    breadcrumbContainer = document.getElementById('tokenDetailBreadcrumb');
                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span>';
                    breadcrumbHTML += '<a href="/tokens">Tokens</a>';
                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span>';
                    breadcrumbHTML += '<span class="breadcrumb-current">Token ' + escapeHtml(shortenHash(identifier)) + '</span>';
                    break;
                case 'nft':
                    breadcrumbContainer = document.getElementById('nftDetailBreadcrumb');
                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span>';
                    breadcrumbHTML += '<a href="/address/' + encodeURIComponent(identifier) + '">' + escapeHtml(shortenHash(identifier)) + '</a>';
                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span>';
                    breadcrumbHTML += '<span class="breadcrumb-current">Token ID ' + (identifierExtra != null ? escapeHtml(String(identifierExtra)) : '') + '</span>';
                    break;
                default:
                    return;
            }
            if (breadcrumbContainer) {
                breadcrumbContainer.innerHTML = breadcrumbHTML;
            }
        }

        // Retry logic with exponential backoff
        async function fetchAPIWithRetry(url, maxRetries = FETCH_MAX_RETRIES, retryDelay = RETRY_DELAY_MS) {
            for (let attempt = 0; attempt < maxRetries; attempt++) {
                try {
                    return await fetchAPI(url);
                } catch (error) {
                    const isLastAttempt = attempt === maxRetries - 1;
                    const isRetryable = error.name === 'AbortError' ||
                                       (error.message && (error.message.includes('timeout') || 
                                       error.message.includes('500') || 
                                       error.message.includes('502') || 
                                       error.message.includes('503') ||
                                       error.message.includes('504') ||
                                       error.message.includes('NetworkError')));
                    
                    if (isLastAttempt || !isRetryable) {
                        throw error;
                    }
                    
                    // Exponential backoff: 1s, 2s, 4s
                    const delay = retryDelay * Math.pow(2, attempt);
                    console.warn(`⚠️ API call failed (attempt ${attempt + 1}/${maxRetries}), retrying in ${delay}ms...`, error.message);
                    await new Promise(resolve => setTimeout(resolve, delay));
                }
            }
        }

        async function fetchAPI(url) {
            const controller = new AbortController();
            const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);

            try {
                const response = await fetch(url, {
                    method: 'GET',
                    headers: { 'Accept': 'application/json' },
                    credentials: 'omit',
                    signal: controller.signal
                });
                
                clearTimeout(timeoutId);
                if (!response.ok) {
                        let errorText = '';
                        try {
                            errorText = await response.text();
                        } catch (e) {
                            errorText = response.statusText;
                        }
                        
                        // Log detailed error for debugging
                        const errorInfo = {
                            status: response.status,
                            statusText: response.statusText,
                            errorText: errorText.substring(0, 500),
                            url: url,
                            headers: Object.fromEntries(response.headers.entries())
                        };
                        console.error(`❌ API Error:`, errorInfo);
                        if (response.status === 502 || response.status === 503) {
                            showAPIUnavailableBanner(response.status);
                        }
                        // For 400 errors, provide more context
                        if (response.status === 400) {
                            console.error('🔍 HTTP 400 Bad Request Details:');
                            console.error('URL:', url);
                            console.error('Response Headers:', errorInfo.headers);
                            console.error('Error Body:', errorText);
                            console.error('Possible causes:');
                            console.error('1. Invalid query parameters');
                            console.error('2. Missing required parameters');
                            console.error('3. API endpoint format incorrect');
                            console.error('4. CORS preflight failed');
                            console.error('5. Request method not allowed');
                            
                            // Try to parse error if it's JSON
                            try {
                                const errorJson = JSON.parse(errorText);
                                console.error('Parsed Error:', errorJson);
                            } catch (e) {
                                // Not JSON, that's fine
                            }
                        }
                        
                        throw new Error(`HTTP ${response.status}: ${errorText || response.statusText}`);
                    }
                    const contentType = response.headers.get('content-type');
                    if (contentType && contentType.includes('application/json')) {
                        return await response.json();
                    }
                    const text = await response.text();
                    try {
                        return JSON.parse(text);
                    } catch (e) {
                        throw new Error(`Invalid JSON response: ${text.substring(0, 100)}`);
                    }
            } catch (error) {
                clearTimeout(timeoutId);
                if (error.name === 'AbortError') {
                    throw new Error('Request timeout. Please try again.');
                }
                throw error;
            }
        }

        async function loadStats() {
            const statsGrid = document.getElementById('statsGrid');
            if (!statsGrid) return;

            // Show skeleton loader
            statsGrid.innerHTML = createSkeletonLoader('stats');
            
            try {
                let stats;
                
                // For ChainID 138, use Blockscout API
                if (CHAIN_ID === 138) {
                    // Blockscout doesn't have a single stats endpoint, so we'll fetch from our API
                    // or use Blockscout's individual endpoints
                    try {
                        // Try our API first
                        stats = await fetchAPIWithRetry(`${API_BASE}/v2/stats`);
                    } catch (e) {
                        // Fallback: fetch from Blockscout and calculate
                        const [blocksRes, txsRes] = await Promise.all([
                            fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/blocks?page=1&page_size=1`).catch(() => null),
                            fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/transactions?page=1&page_size=1`).catch(() => null)
                        ]);
                        
                        stats = {
                            total_blocks: blocksRes?.items?.[0]?.number || 0,
                            total_transactions: txsRes?.items?.length ? 'N/A' : 0,
                            total_addresses: 0
                        };
                    }
                } else {
                    // For other networks, use v2 API
                    stats = await fetchAPIWithRetry(`${API_BASE}/v2/stats`);
                }
                
                statsGrid.innerHTML = `
                    <div class="stat-card">
                        <div class="stat-label">Total Blocks</div>
                        <div class="stat-value">${formatNumber(stats.total_blocks || 0)}</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">Total Transactions</div>
                        <div class="stat-value">${formatNumber(stats.total_transactions || 0)}</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">Total Addresses</div>
                        <div class="stat-value">${formatNumber(stats.total_addresses || 0)}</div>
                    </div>
                    <div class="stat-card bridge-card">
                        <div class="stat-label">Bridge Contracts</div>
                        <div class="stat-value bridge-value">2 Active</div>
                    </div>
                    <div class="stat-card" id="networkStatCard">
                        <div class="stat-label">Network</div>
                        <div class="stat-value" id="networkStatValue" style="font-size: 1rem;">Loading...</div>
                    </div>
                `;
                if (CHAIN_ID === 138) loadGasAndNetworkStats();
            } catch (error) {
                console.error('Failed to load stats:', error);
                statsGrid.innerHTML = `
                    <div class="stat-card">
                        <div class="stat-label">Total Blocks</div>
                        <div class="stat-value">-</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">Total Transactions</div>
                        <div class="stat-value">-</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">Total Addresses</div>
                        <div class="stat-value">-</div>
                    </div>
                    <div class="stat-card bridge-card">
                        <div class="stat-label">Bridge Contracts</div>
                        <div class="stat-value bridge-value">2 Active</div>
                    </div>
                    <div class="stat-card"><div class="stat-label">Network</div><div class="stat-value" style="font-size: 1rem;">-</div></div>
                `;
            }
        }

        async function loadGasAndNetworkStats() {
            var el = document.getElementById('networkStatValue');
            var gasCard = document.getElementById('gasNetworkCard');
            var gasContent = document.getElementById('gasNetworkContent');
            try {
                var blocksResp = await fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/blocks?page=1&page_size=20');
                var blocks = blocksResp.items || blocksResp || [];
                var statsResp = await fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/stats').catch(function() { return {}; });
                var gasGwei = '-';
                var blockTimeSec = '-';
                var tps = '-';
                if (blocks.length > 0) {
                    var b = blocks[0];
                    var baseFee = b.base_fee_per_gas || b.base_fee;
                    if (baseFee != null) gasGwei = (Number(baseFee) / 1e9).toFixed(2) + ' Gwei';
                }
                if (blocks.length >= 2) {
                    var t0 = blocks[0].timestamp;
                    var t1 = blocks[1].timestamp;
                    if (t0 && t1) {
                        var d = (new Date(t0) - new Date(t1)) / 1000;
                        if (d > 0) blockTimeSec = d.toFixed(1) + 's';
                    }
                }
                if (statsResp.average_block_time != null) blockTimeSec = Number(statsResp.average_block_time).toFixed(1) + 's';
                if (statsResp.transactions_per_second != null) tps = Number(statsResp.transactions_per_second).toFixed(2);
                if (el) el.innerHTML = (gasGwei !== '-' ? 'Gas: ' + escapeHtml(gasGwei) + '<br/>' : '') + (blockTimeSec !== '-' ? 'Block: ' + escapeHtml(blockTimeSec) + '<br/>' : '') + (tps !== '-' ? 'TPS: ' + escapeHtml(tps) : '') || 'Gas / TPS';
                if (gasCard && gasContent && CHAIN_ID === 138) {
                    var curEl = document.getElementById('gasCurrentValue');
                    var tpsEl = document.getElementById('gasTpsValue');
                    var btEl = document.getElementById('gasBlockTimeValue');
                    var failedEl = document.getElementById('gasFailedRateValue');
                    var barsEl = document.getElementById('gasHistoryBars');
                    if (curEl) curEl.textContent = gasGwei !== '-' ? gasGwei : '—';
                    if (tpsEl) tpsEl.textContent = tps !== '-' ? tps : '—';
                    if (btEl) btEl.textContent = blockTimeSec !== '-' ? blockTimeSec : '—';
                    if (failedEl) {
                        var txsResp = await fetch(BLOCKSCOUT_API + '/v2/transactions?page=1&page_size=100').then(function(r) { return r.json(); }).catch(function() { return { items: [] }; });
                        var txs = txsResp.items || txsResp || [];
                        var failed = txs.filter(function(t) { var s = t.status; return s === 0 || s === '0' || (t.block && t.block.success === false); }).length;
                        failedEl.textContent = txs.length > 0 ? (100 * failed / txs.length).toFixed(2) + '%' : '—';
                    }
                    if (barsEl) {
                        var recent = blocks.slice(0, 10);
                        var fees = recent.map(function(bl) { var f = bl.base_fee_per_gas || bl.base_fee; return f != null ? Number(f) / 1e9 : 0; });
                        var maxFee = Math.max.apply(null, fees) || 1;
                        barsEl.innerHTML = fees.map(function(g, i) {
                            var pct = maxFee > 0 ? (g / maxFee * 100) : 0;
                            return '<span title="Block ' + (recent[i] && (recent[i].height != null ? recent[i].height : recent[i].number) || '') + ': ' + g.toFixed(2) + ' Gwei" style="flex: 1; min-width: 8px; max-width: 24px; height: ' + (pct + 5) + '%; min-height: 4px; background: var(--primary); border-radius: 4px 4px 0 0;"></span>';
                        }).join('');
                    }
                }
            } catch (e) {
                if (el) el.textContent = '-';
            }
        }

        function normalizeBlockDisplay(block) {
            var blockNum = block.number;
            var hash = block.hash || '';
            var txCount = block.transaction_count || 0;
            var date = null;
            if (block.timestamp) {
                if (typeof block.timestamp === 'string' && block.timestamp.indexOf('0x') === 0) {
                    date = new Date(parseInt(block.timestamp, 16) * 1000);
                } else {
                    date = new Date(block.timestamp);
                }
            }
            var timestampFormatted = date && !isNaN(date.getTime()) ? date.toLocaleString() : 'N/A';
            var timeAgo = date && !isNaN(date.getTime()) ? getTimeAgo(date) : 'N/A';
            return { blockNum: blockNum, hash: hash, txCount: txCount, timestampFormatted: timestampFormatted, timeAgo: timeAgo };
        }

        function createBlockCardHtml(block, options) {
            options = options || {};
            var d = normalizeBlockDisplay(block);
            var animationClass = options.animationClass || '';
            return '<div class="block-card ' + escapeHtml(animationClass) + '" onclick="showBlockDetail(\'' + escapeHtml(String(d.blockNum)) + '\')">' +
                '<div class="block-number">#' + escapeHtml(String(d.blockNum)) + '</div>' +
                '<div class="block-hash">' + escapeHtml(shortenHash(d.hash)) + '</div>' +
                '<div class="block-info">' +
                '<div class="block-info-item"><span class="block-info-label">Transactions</span><span class="block-info-value">' + escapeHtml(String(d.txCount)) + '</span></div>' +
                '<div class="block-info-item"><span class="block-info-label">Time</span><span class="block-info-value">' + escapeHtml(d.timeAgo) + '</span></div>' +
                '</div></div>';
        }

        // Prevent multiple simultaneous calls
        let loadingBlocks = false;
        async function loadLatestBlocks() {
            const container = document.getElementById('latestBlocks');
            if (!container) return;
            
            // Prevent multiple simultaneous calls
            if (loadingBlocks) {
                console.log('loadLatestBlocks already in progress, skipping...');
                return;
            }
            loadingBlocks = true;

            try {
                let blocks = [];
                
                // For ChainID 138, use Blockscout API
                if (CHAIN_ID === 138) {
                    try {
                        const blockscoutUrl = `${BLOCKSCOUT_API}/v2/blocks?page=1&page_size=10`;
                        console.log('Fetching blocks from Blockscout:', blockscoutUrl);
                        const response = await fetchAPIWithRetry(blockscoutUrl);
                        const raw = (response && (response.items || response.data || response.blocks)) || (Array.isArray(response) ? response : null);
                        if (raw && Array.isArray(raw)) {
                            blocks = raw.slice(0, 10).map(normalizeBlock).filter(b => b !== null);
                            console.log(`✅ Loaded ${blocks.length} blocks from Blockscout`);
                        } else if (response && typeof response === 'object') {
                            blocks = [];
                            console.warn('Blockscout blocks response empty or unexpected shape:', Object.keys(response || {}));
                        }
                    } catch (blockscoutError) {
                        console.warn('Blockscout API failed, trying RPC fallback:', blockscoutError.message);
                        try {
                            const blockNumHex = await rpcCall('eth_blockNumber');
                            const latestBlock = parseInt(blockNumHex, 16);
                            if (!isNaN(latestBlock) && latestBlock >= 0) {
                                for (let i = 0; i < Math.min(10, latestBlock + 1); i++) {
                                    const bn = latestBlock - i;
                                    const b = await rpcCall('eth_getBlockByNumber', ['0x' + bn.toString(16), false]);
                                    if (b && b.number) blocks.push({ number: parseInt(b.number, 16), hash: b.hash, timestamp: b.timestamp ? (typeof b.timestamp === 'string' ? parseInt(b.timestamp, 16) * 1000 : b.timestamp) : null, transaction_count: b.transactions ? b.transactions.length : 0 });
                                }
                                if (blocks.length > 0) console.log('Loaded ' + blocks.length + ' blocks via RPC fallback');
                            }
                        } catch (rpcErr) {
                            console.error('RPC fallback also failed:', rpcErr);
                            if (container) {
                                container.innerHTML = '<div class="error">API temporarily unavailable. ' + escapeHtml((blockscoutError.message || 'Unknown error').substring(0, 150)) + ' <button type="button" class="btn btn-primary" onclick="loadLatestBlocks()" style="margin-top: 0.5rem;">Retry</button></div>';
                            }
                            return;
                        }
                        if (blocks.length === 0 && container) {
                            container.innerHTML = '<div class="error">Could not load blocks. <button type="button" class="btn btn-primary" onclick="loadLatestBlocks()" style="margin-top: 0.5rem;">Retry</button></div>';
                            return;
                        }
                    }
                } else {
                    // For other networks, use Etherscan-compatible API
                    const blockData = await fetchAPI(`${API_BASE}?module=block&action=eth_block_number`);
                    if (!blockData || !blockData.result) {
                        throw new Error('Invalid response from API');
                    }
                    
                    const latestBlock = parseInt(blockData.result, 16);
                    if (isNaN(latestBlock) || latestBlock < 0) {
                        throw new Error('Invalid block number');
                    }
                    
                    // Fetch blocks one by one
                    for (let i = 0; i < 10 && latestBlock - i >= 0; i++) {
                        const blockNum = latestBlock - i;
                        try {
                            const block = await fetchAPI(`${API_BASE}?module=block&action=eth_get_block_by_number&tag=0x${blockNum.toString(16)}&boolean=false`);
                            if (block && block.result) {
                                blocks.push({
                                    number: blockNum,
                                    hash: block.result.hash,
                                    timestamp: block.result.timestamp,
                                    transaction_count: block.result.transactions ? block.result.transactions.length : 0
                                });
                            }
                        } catch (e) {
                            console.warn(`Failed to load block ${blockNum}:`, e);
                        }
                    }
                }
                
                const limitedBlocks = blocks.slice(0, 10);
                
                if (limitedBlocks.length === 0) {
                    if (container) container.innerHTML = '<div style="text-align: center; padding: 2rem; color: var(--text-light);">No blocks found. <button type="button" class="btn btn-primary" onclick="loadLatestBlocks()" style="margin-top: 0.5rem;">Retry</button></div>';
                } else {
                    // Create HTML with duplicated blocks for seamless infinite loop
                    let html = '<div class="blocks-scroll-container" id="blocksScrollContainer">';
                    html += '<div class="blocks-scroll-content">';
                    
                    // First set of blocks (with animations for first 3)
                    limitedBlocks.forEach(function(block, index) {
                        var animationClass = index < 3 ? 'new-block' : '';
                        html += createBlockCardHtml(block, { animationClass: animationClass });
                    });
                    
                    // Duplicate blocks for seamless infinite loop
                    limitedBlocks.forEach(function(block) {
                        html += createBlockCardHtml(block, {});
                    });
                    
                    html += '</div></div>';
                    if (container) container.innerHTML = html;
                    
                    // Setup auto-scroll animation
                    const scrollContainer = document.getElementById('blocksScrollContainer');
                    const scrollContent = scrollContainer?.querySelector('.blocks-scroll-content');
                    if (scrollContainer && scrollContent) {
                        const cardWidth = 200 + 16; // card width (200px) + gap (16px = 1rem)
                        const singleSetWidth = limitedBlocks.length * cardWidth;
                        
                        // Use CSS transform for smooth animation
                        let scrollPosition = 0;
                        let isPaused = false;
                        const scrollSpeed = 0.4; // pixels per frame (adjust for speed)
                        
                        scrollContainer.addEventListener('mouseenter', () => {
                            isPaused = true;
                        });
                        
                        scrollContainer.addEventListener('mouseleave', () => {
                            isPaused = false;
                        });
                        
                        if (_blocksScrollAnimationId != null) {
                            cancelAnimationFrame(_blocksScrollAnimationId);
                            _blocksScrollAnimationId = null;
                        }
                        function animateScroll() {
                            if (!isPaused && scrollContent) {
                                scrollPosition += scrollSpeed;
                                if (scrollPosition >= singleSetWidth) scrollPosition = 0;
                                scrollContent.style.transform = 'translateX(-' + scrollPosition + 'px)';
                            }
                            _blocksScrollAnimationId = requestAnimationFrame(animateScroll);
                        }
                        setTimeout(function() {
                            _blocksScrollAnimationId = requestAnimationFrame(animateScroll);
                        }, 500);
                    }
                    
                    // Remove animation classes after animation completes
                    setTimeout(() => {
                        container.querySelectorAll('.new-block').forEach(card => {
                            card.classList.remove('new-block');
                        });
                    }, 1000);
                }
            } catch (error) {
                console.error('Failed to load latest blocks:', error);
                if (container) container.innerHTML = '<div class="error">Failed to load blocks: ' + escapeHtml((error.message || 'Unknown error').substring(0, 200)) + '. <button type="button" class="btn btn-primary" onclick="loadLatestBlocks()" style="margin-top: 0.5rem;">Retry</button></div>';
            } finally {
                loadingBlocks = false;
            }
        }

        // Store previous transaction hashes for real-time updates
        let previousTransactionHashes = new Set();
        let transactionUpdateInterval = null;

        async function loadLatestTransactions() {
            const container = document.getElementById('latestTransactions');
            if (!container) return;

            try {
                let response;
                let rawTransactions = [];
                
                // For ChainID 138, use Blockscout API
                if (CHAIN_ID === 138) {
                    try {
                        response = await fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/transactions?page=1&page_size=10`);
                        rawTransactions = Array.isArray(response?.items) ? response.items : (Array.isArray(response?.data) ? response.data : []);
                    } catch (apiErr) {
                        console.warn('Blockscout transactions API failed, trying RPC fallback:', apiErr.message);
                        try {
                            const blockNumHex = await rpcCall('eth_blockNumber');
                            const latest = parseInt(blockNumHex, 16);
                            for (let i = 0; i < Math.min(5, latest + 1) && rawTransactions.length < 10; i++) {
                                const b = await rpcCall('eth_getBlockByNumber', ['0x' + (latest - i).toString(16), true]);
                                if (b && b.transactions) {
                                    b.transactions.forEach(tx => {
                                        if (typeof tx === 'object' && rawTransactions.length < 10) rawTransactions.push({ hash: tx.hash, from: tx.from, to: tx.to || null, value: tx.value || '0x0', block_number: parseInt(b.number, 16), created_at: b.timestamp ? new Date(parseInt(b.timestamp, 16) * 1000).toISOString() : null });
                                    });
                                }
                            }
                            response = { items: rawTransactions };
                        } catch (rpcErr) {
                            console.error('RPC transactions fallback failed:', rpcErr);
                            if (container) container.innerHTML = '<div class="error">API temporarily unavailable. <button type="button" class="btn btn-primary" onclick="loadLatestTransactions()" style="margin-top: 0.5rem;">Retry</button></div>';
                            return;
                        }
                    }
                } else {
                    response = await fetchAPIWithRetry(`${API_BASE}/v2/transactions?page=1&page_size=10`);
                    rawTransactions = Array.isArray(response?.items) ? response.items : (Array.isArray(response?.data) ? response.data : []);
                }
                
                // Normalize transactions using adapter
                const transactions = rawTransactions.map(normalizeTransaction).filter(tx => tx !== null);
                
                // Limit to 10 transactions
                const limitedTransactions = transactions.slice(0, 10);
                
                // Check for new transactions
                const currentHashes = new Set(limitedTransactions.map(tx => String(tx.hash || '')));
                const newTransactions = limitedTransactions.filter(tx => !previousTransactionHashes.has(String(tx.hash || '')));
                
                // Update previous hashes
                previousTransactionHashes = currentHashes;
                
                // Show skeleton loader only on first load
                if (container.innerHTML.includes('skeleton') || container.innerHTML.includes('Loading')) {
                    container.innerHTML = createSkeletonLoader('table');
                }
                
                let html = '<table class="table"><thead><tr><th>Hash</th><th>From</th><th>To</th><th>Value</th><th>Block</th></tr></thead><tbody>';
                
                if (limitedTransactions.length === 0) {
                    html += '<tr><td colspan="5" style="text-align: center; padding: 1rem;">No transactions found</td></tr>';
                } else {
                    limitedTransactions.forEach((tx, index) => {
                        // Transaction is already normalized by adapter
                        const hash = String(tx.hash || 'N/A');
                        const from = String(tx.from || 'N/A');
                        const to = String(tx.to || 'N/A');
                        const value = tx.value || '0';
                        const blockNumber = tx.block_number || 'N/A';
                        
                        const valueFormatted = formatEther(value);
                        
                        // Add animation class for new transactions
                        const isNew = newTransactions.some(ntx => String(ntx.hash || '') === hash);
                        const animationClass = isNew ? 'new-transaction' : '';
                        
                        html += '<tr class="' + animationClass + '" onclick="showTransactionDetail(\'' + escapeHtml(hash) + '\')" style="cursor: pointer;"><td class="hash">' + escapeHtml(shortenHash(hash)) + '</td><td class="hash" onclick="event.stopPropagation(); showAddressDetail(\'' + escapeHtml(from) + '\')">' + formatAddressWithLabel(from) + '</td><td class="hash" onclick="event.stopPropagation(); showAddressDetail(\'' + escapeHtml(to) + '\')">' + (to ? formatAddressWithLabel(to) : '-') + '</td><td>' + escapeHtml(valueFormatted) + ' ETH</td><td>' + escapeHtml(String(blockNumber)) + '</td></tr>';
                    });
                }
                
                html += '</tbody></table>';
                if (container) container.innerHTML = html;
                
                if (container) {
                    setTimeout(() => {
                        container.querySelectorAll('.new-transaction').forEach(row => {
                            row.classList.remove('new-transaction');
                        });
                    }, 500);
                }
            } catch (error) {
                console.error('Failed to load latest transactions:', error);
                if (container) container.innerHTML = '<div class="error">Failed to load transactions: ' + escapeHtml((error.message || 'Unknown error').substring(0, 200)) + '. <button type="button" class="btn btn-primary" onclick="loadLatestTransactions()" style="margin-top: 0.5rem;">Retry</button></div>';
            }
        }
        
        // Real-time transaction updates
        function startTransactionUpdates() {
            // Clear any existing interval
            if (transactionUpdateInterval) {
                clearInterval(transactionUpdateInterval);
            }
            
            // Update transactions every 5 seconds
            transactionUpdateInterval = setInterval(() => {
                if (currentView === 'home') {
                    loadLatestTransactions();
                }
            }, 5000);
        }
        
        function stopTransactionUpdates() {
            if (transactionUpdateInterval) {
                clearInterval(transactionUpdateInterval);
                transactionUpdateInterval = null;
            }
        }

        var blocksListPage = 1;
        var transactionsListPage = 1;
        const LIST_PAGE_SIZE = 25;

        async function loadAllBlocks(page) {
            if (page != null) blocksListPage = Math.max(1, parseInt(page, 10) || 1);
            const container = document.getElementById('blocksList');
            if (!container) { return; }

            try {
                container.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i> Loading blocks...</div>';
                
                let blocks = [];
                
                // For ChainID 138, use Blockscout API
                if (CHAIN_ID === 138) {
                    try {
                        const response = await fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/blocks?page=${blocksListPage}&page_size=${LIST_PAGE_SIZE}`);
                        if (response && response.items) {
                            blocks = response.items.map(normalizeBlock).filter(b => b !== null);
                        }
                    } catch (error) {
                        console.error('Failed to load blocks from Blockscout:', error);
                        throw error;
                    }
                } else {
                    // For other networks, use Etherscan-compatible API
                    const blockData = await fetchAPI(`${API_BASE}?module=block&action=eth_block_number`);
                    const latestBlock = parseInt(blockData.result, 16);
                    
                    // Load last 50 blocks
                    for (let i = 0; i < 50 && latestBlock - i >= 0; i++) {
                        const blockNum = latestBlock - i;
                        try {
                            const block = await fetchAPI(`${API_BASE}?module=block&action=eth_get_block_by_number&tag=0x${blockNum.toString(16)}&boolean=false`);
                            if (block.result) {
                                blocks.push({
                                    number: blockNum,
                                    hash: block.result.hash,
                                    timestamp: new Date(parseInt(block.result.timestamp, 16) * 1000).toISOString(),
                                    transaction_count: block.result.transactions ? block.result.transactions.length : 0
                                });
                            }
                        } catch (e) {
                            // Skip failed blocks
                        }
                    }
                }
                
                let html = '<table class="table"><thead><tr><th>Block</th><th>Hash</th><th>Transactions</th><th>Timestamp</th></tr></thead><tbody>';
                
                if (blocks.length === 0) {
                    html += '<tr><td colspan="4" style="text-align: center; padding: 2rem;">No blocks found</td></tr>';
                } else {
                    blocks.forEach(function(block) {
                        var d = normalizeBlockDisplay(block);
                        html += '<tr onclick="showBlockDetail(\'' + escapeHtml(String(d.blockNum)) + '\')" style="cursor: pointer;"><td>' + escapeHtml(String(d.blockNum)) + '</td><td class="hash">' + escapeHtml(shortenHash(d.hash)) + '</td><td>' + escapeHtml(String(d.txCount)) + '</td><td>' + escapeHtml(d.timestampFormatted) + '</td></tr>';
                    });
                }
                
                var pagination = '<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; flex-wrap: wrap; gap: 0.5rem;">';
                pagination += '<span style="color: var(--text-light);">Page ' + blocksListPage + '</span>';
                pagination += '<div style="display: flex; gap: 0.5rem;"><button type="button" class="btn btn-secondary" ' + (blocksListPage <= 1 ? 'disabled' : '') + ' onclick="loadAllBlocks(' + (blocksListPage - 1) + ')">Prev</button><button type="button" class="btn btn-secondary" ' + (blocks.length < LIST_PAGE_SIZE ? 'disabled' : '') + ' onclick="loadAllBlocks(' + (blocksListPage + 1) + ')">Next</button></div></div>';
                html += '</tbody></table>' + pagination;
                container.innerHTML = html;
            } catch (error) {
                container.innerHTML = '<div class="error">Failed to load blocks: ' + escapeHtml(error.message || 'Unknown error') + '. <button onclick="showBlocks()" class="btn btn-primary" style="margin-top: 1rem;">Retry</button></div>';
            }
        }

        async function loadAllTransactions(page) {
            if (page != null) transactionsListPage = Math.max(1, parseInt(page, 10) || 1);
            const container = document.getElementById('transactionsList');
            if (!container) { return; }

            try {
                container.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i> Loading transactions...</div>';
                
                let transactions = [];
                
                // For ChainID 138, use Blockscout API
                if (CHAIN_ID === 138) {
                    try {
                        const response = await fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/transactions?page=${transactionsListPage}&page_size=${LIST_PAGE_SIZE}`);
                        if (response && response.items) {
                            transactions = response.items.map(normalizeTransaction).filter(tx => tx !== null);
                        }
                    } catch (error) {
                        console.error('Failed to load transactions from Blockscout:', error);
                        throw error;
                    }
                } else {
                    // For other networks, use Etherscan-compatible API
                    const blockData = await fetchAPI(`${API_BASE}?module=block&action=eth_block_number`);
                    if (!blockData || !blockData.result) {
                        throw new Error('Failed to get latest block number');
                    }
                    const latestBlock = parseInt(blockData.result, 16);
                    if (isNaN(latestBlock) || latestBlock < 0) {
                        throw new Error('Invalid block number');
                    }
                    
                    const maxTxs = 50;
                    
                    // Get transactions from recent blocks
                    for (let blockNum = latestBlock; blockNum >= 0 && transactions.length < maxTxs; blockNum--) {
                        try {
                            const block = await fetchAPI(`${API_BASE}?module=block&action=eth_get_block_by_number&tag=0x${blockNum.toString(16)}&boolean=true`);
                            if (block.result && block.result.transactions) {
                                for (const tx of block.result.transactions) {
                                    if (transactions.length >= maxTxs) break;
                                    if (typeof tx === 'object') {
                                        transactions.push({
                                            hash: tx.hash,
                                            from: tx.from,
                                            to: tx.to,
                                            value: tx.value || '0',
                                            block_number: blockNum
                                        });
                                    }
                                }
                            }
                        } catch (e) {
                            // Skip failed blocks
                        }
                    }
                }
                
                let html = '<table class="table"><thead><tr><th>Hash</th><th>From</th><th>To</th><th>Value</th><th>Block</th></tr></thead><tbody>';
                
                if (transactions.length === 0) {
                    html += '<tr><td colspan="5" style="text-align: center; padding: 2rem;">No transactions found</td></tr>';
                } else {
                    transactions.forEach(tx => {
                        const hash = String(tx.hash || 'N/A');
                        const from = String(tx.from || 'N/A');
                        const to = String(tx.to || 'N/A');
                        const value = tx.value || '0';
                        const blockNumber = tx.block_number || 'N/A';
                        const valueFormatted = formatEther(value);
                        html += '<tr onclick="showTransactionDetail(\'' + escapeHtml(hash) + '\')" style="cursor: pointer;"><td class="hash">' + escapeHtml(shortenHash(hash)) + '</td><td class="hash" onclick="event.stopPropagation(); showAddressDetail(\'' + escapeHtml(from) + '\')">' + formatAddressWithLabel(from) + '</td><td class="hash" onclick="event.stopPropagation(); showAddressDetail(\'' + escapeHtml(to || '') + '\')">' + (to ? formatAddressWithLabel(to) : '-') + '</td><td>' + escapeHtml(valueFormatted) + ' ETH</td><td>' + escapeHtml(String(blockNumber)) + '</td></tr>';
                    });
                }
                
                var pagination = '<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; flex-wrap: wrap; gap: 0.5rem;">';
                pagination += '<span style="color: var(--text-light);">Page ' + transactionsListPage + '</span>';
                pagination += '<div style="display: flex; gap: 0.5rem;"><button type="button" class="btn btn-secondary" ' + (transactionsListPage <= 1 ? 'disabled' : '') + ' onclick="loadAllTransactions(' + (transactionsListPage - 1) + ')">Prev</button><button type="button" class="btn btn-secondary" ' + (transactions.length < LIST_PAGE_SIZE ? 'disabled' : '') + ' onclick="loadAllTransactions(' + (transactionsListPage + 1) + ')">Next</button></div></div>';
                html += '</tbody></table>' + pagination;
                container.innerHTML = html;
            } catch (error) {
                container.innerHTML = '<div class="error">Failed to load transactions: ' + escapeHtml(error.message || 'Unknown error') + '. <button onclick="showTransactions()" class="btn btn-primary" style="margin-top: 1rem;">Retry</button></div>';
            }
        }

        async function loadTokensList() {
            var container = document.getElementById('tokensListContent');
            if (!container) return;
            try {
                container.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i> Loading tokens...</div>';
                if (CHAIN_ID === 138) {
                    try {
                        var resp = await fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/tokens?page=1&page_size=100').catch(function() { return null; });
                        var items = (resp && (resp.items || resp.data)) || (Array.isArray(resp) ? resp : null);
                        if (items && items.length > 0) {
                            var knownTokens = {
                                '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2': { name: 'Wrapped Ether', symbol: 'WETH' },
                                '0xf4bb2e28688e89fcce3c0580d37d36a7672e8a9f': { name: 'Wrapped Ether v10', symbol: 'WETH' }
                            };
                            var html = '<table class="table"><thead><tr><th>Token</th><th>Contract</th><th>Type</th><th aria-label="Add to wallet"></th></tr></thead><tbody>';
                            items.forEach(function(t) {
                                var addr = (t.address && (t.address.hash || t.address)) || t.address_hash || t.token_address || t.contract_address_hash || '';
                                var known = addr ? knownTokens[addr.toLowerCase()] : null;
                                var name = (known && known.name) || t.name || t.symbol || (known && known.symbol) || '-';
                                var symbolDisplay = (known && known.symbol) || t.symbol;
                                var symbol = (symbolDisplay || 'TOKEN').replace(/'/g, "\\'");
                                var decimals = t.decimals != null ? Number(t.decimals) : 18;
                                var type = t.type || 'ERC-20';
                                if (!addr) return;
                                var addrEsc = escapeHtml(addr).replace(/'/g, "\\'");
                                html += '<tr style="cursor: pointer;" onclick="showTokenDetail(\'' + escapeHtml(addr) + '\')"><td>' + escapeHtml(name) + (symbolDisplay ? ' (' + escapeHtml(symbolDisplay) + ')' : '') + '</td><td class="hash">' + escapeHtml(shortenHash(addr)) + '</td><td>' + escapeHtml(type) + '</td><td><button type="button" class="btn-add-token-wallet" onclick="event.stopPropagation(); addTokenToWallet(\'' + addrEsc + '\', \'' + symbol + '\', ' + decimals + ');" aria-label="Add to wallet" title="Add to wallet"><i class="fas fa-wallet" aria-hidden="true"></i></button></td></tr>';
                            });
                            html += '</tbody></table>';
                            container.innerHTML = html;
                            return;
                        }
                    } catch (e) {}
                }
                container.innerHTML = '<p style="color: var(--text-light);">No token index available. Use the search bar to find tokens by name, symbol, or contract address (0x...).</p>';
            } catch (err) {
                container.innerHTML = '<div class="error">Failed to load tokens. Use the search bar to find a token by address or name.</div>';
            }
        }
        window._loadTokensList = loadTokensList;

        async function refreshBridgeData() {
            const container = document.getElementById('bridgeContent');
            if (!container) return;

            try {
                container.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i> Loading bridge data...</div>';
                
                // Chain 138 Bridge Contracts
                const WETH9_BRIDGE_138 = '0x971cD9D156f193df8051E48043C476e53ECd4693';
                const WETH10_BRIDGE_138 = '0xe0E93247376aa097dB308B92e6Ba36bA015535D0';
                
                // Ethereum Mainnet Bridge Contracts
                const WETH9_BRIDGE_MAINNET = '0x2A0840e5117683b11682ac46f5CF5621E67269E3';
                const WETH10_BRIDGE_MAINNET = '0xb7721dD53A8c629d9f1Ba31a5819AFe250002b03';
                
                // Bridge routes configuration
                const routes = {
                    weth9: {
                        'BSC (56)': '0x8078a09637e47fa5ed34f626046ea2094a5cde5e',
                        'Polygon (137)': '0xa780ef19a041745d353c9432f2a7f5a241335ffe',
                        'Avalanche (43114)': '0x8078a09637e47fa5ed34f626046ea2094a5cde5e',
                        'Base (8453)': '0x8078a09637e47fa5ed34f626046ea2094a5cde5e',
                        'Arbitrum (42161)': '0x8078a09637e47fa5ed34f626046ea2094a5cde5e',
                        'Optimism (10)': '0x8078a09637e47fa5ed34f626046ea2094a5cde5e',
                        'Ethereum Mainnet (1)': WETH9_BRIDGE_MAINNET
                    },
                    weth10: {
                        'BSC (56)': '0x105f8a15b819948a89153505762444ee9f324684',
                        'Polygon (137)': '0xdab0591e5e89295ffad75a71dcfc30c5625c4fa2',
                        'Avalanche (43114)': '0x105f8a15b819948a89153505762444ee9f324684',
                        'Base (8453)': '0x105f8a15b819948a89153505762444ee9f324684',
                        'Arbitrum (42161)': '0x105f8a15b819948a89153505762444ee9f324684',
                        'Optimism (10)': '0x105f8a15b819948a89153505762444ee9f324684',
                        'Ethereum Mainnet (1)': WETH10_BRIDGE_MAINNET
                    }
                };
                
                // Build HTML
                let html = `
                    <div class="bridge-chain-card">
                        <div class="chain-name"><i class="fas fa-network-wired"></i> CCIP Bridge Ecosystem</div>
                        <div style="color: var(--text-light); margin-bottom: 1rem;">
                            Cross-chain interoperability powered by Chainlink CCIP
                        </div>
                    </div>
                    
                    <!-- Chain 138 Bridges -->
                    <div class="card" style="margin-bottom: 1.5rem;">
                        <div class="card-header">
                            <h3 class="card-title"><i class="fas fa-home"></i> Chain 138 (Source Chain)</h3>
                        </div>
                        <div class="chain-info" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
                            <div class="chain-stat" style="background: var(--light); padding: 1rem; border-radius: 8px;">
                                <div class="chain-stat-label" style="font-weight: 600; margin-bottom: 0.5rem;">CCIPWETH9Bridge</div>
                                <div class="chain-stat-value">
                                    <span class="hash" onclick="showAddressDetail('${WETH9_BRIDGE_138}')" style="cursor: pointer; font-size: 0.9rem;">${WETH9_BRIDGE_138}</span>
                                </div>
                                <div style="margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-light);">
                                    Token: <span class="hash" onclick="showAddressDetail('0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2')" style="cursor: pointer;">WETH9</span>
                                </div>
                            </div>
                            <div class="chain-stat" style="background: var(--light); padding: 1rem; border-radius: 8px;">
                                <div class="chain-stat-label" style="font-weight: 600; margin-bottom: 0.5rem;">CCIPWETH10Bridge</div>
                                <div class="chain-stat-value">
                                    <span class="hash" onclick="showAddressDetail('${WETH10_BRIDGE_138}')" style="cursor: pointer; font-size: 0.9rem;">${WETH10_BRIDGE_138}</span>
                                </div>
                                <div style="margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-light);">
                                    Token: <span class="hash" onclick="showAddressDetail('0xf4BB2e28688e89fCcE3c0580D37d36A7672E8A9f')" style="cursor: pointer;">WETH10</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- WETH9 Bridge Routes -->
                    <div class="card" style="margin-bottom: 1.5rem;">
                        <div class="card-header">
                            <h3 class="card-title"><i class="fas fa-route"></i> CCIPWETH9Bridge Routes</h3>
                            <span class="badge badge-success">7 Destinations</span>
                        </div>
                        <div style="overflow-x: auto;">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Destination Chain</th>
                                        <th>Chain ID</th>
                                        <th>Bridge Address</th>
                                    </tr>
                                </thead>
                                <tbody>
                `;
                
                // Add WETH9 routes
                for (const [chain, address] of Object.entries(routes.weth9)) {
                    const chainId = chain.match(/\\((\d+)\\)/)?.[1] || '';
                    html += `
                                    <tr>
                                        <td><strong>${chain.replace(/\s*\\(\\d+\\)/, '')}</strong></td>
                                        <td>${chainId}</td>
                                        <td><span class="hash" onclick="showAddressDetail('${escapeHtml(address)}')" style="cursor: pointer;">${escapeHtml(shortenHash(address))}</span></td>
                                    </tr>
                    `;
                }
                
                html += `
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- WETH10 Bridge Routes -->
                    <div class="card" style="margin-bottom: 1.5rem;">
                        <div class="card-header">
                            <h3 class="card-title"><i class="fas fa-route"></i> CCIPWETH10Bridge Routes</h3>
                            <span class="badge badge-success">7 Destinations</span>
                        </div>
                        <div style="overflow-x: auto;">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Destination Chain</th>
                                        <th>Chain ID</th>
                                        <th>Bridge Address</th>
                                    </tr>
                                </thead>
                                <tbody>
                `;
                
                // Add WETH10 routes
                for (const [chain, address] of Object.entries(routes.weth10)) {
                    const chainId = chain.match(/\\((\d+)\\)/)?.[1] || '';
                    html += `
                                    <tr>
                                        <td><strong>${chain.replace(/\s*\\(\\d+\\)/, '')}</strong></td>
                                        <td>${chainId}</td>
                                        <td><span class="hash" onclick="showAddressDetail('${escapeHtml(address)}')" style="cursor: pointer;">${escapeHtml(shortenHash(address))}</span></td>
                                    </tr>
                    `;
                }
                
                html += `
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- Ethereum Mainnet Bridges -->
                    <div class="card" style="margin-bottom: 1.5rem;">
                        <div class="card-header">
                            <h3 class="card-title"><i class="fas fa-ethereum"></i> Ethereum Mainnet Bridges</h3>
                        </div>
                        <div class="chain-info" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
                            <div class="chain-stat" style="background: var(--light); padding: 1rem; border-radius: 8px;">
                                <div class="chain-stat-label" style="font-weight: 600; margin-bottom: 0.5rem;">CCIPWETH9Bridge</div>
                                <div class="chain-stat-value">
                                    <span class="hash" onclick="window.open('https://etherscan.io/address/${WETH9_BRIDGE_MAINNET}', '_blank')" style="cursor: pointer; font-size: 0.9rem;">${WETH9_BRIDGE_MAINNET}</span>
                                </div>
                                <div style="margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-light);">
                                    <a href="https://etherscan.io/address/${WETH9_BRIDGE_MAINNET}" target="_blank" style="color: var(--primary);">View on Etherscan</a>
                                </div>
                            </div>
                            <div class="chain-stat" style="background: var(--light); padding: 1rem; border-radius: 8px;">
                                <div class="chain-stat-label" style="font-weight: 600; margin-bottom: 0.5rem;">CCIPWETH10Bridge</div>
                                <div class="chain-stat-value">
                                    <span class="hash" onclick="window.open('https://etherscan.io/address/${WETH10_BRIDGE_MAINNET}', '_blank')" style="cursor: pointer; font-size: 0.9rem;">${WETH10_BRIDGE_MAINNET}</span>
                                </div>
                                <div style="margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-light);">
                                    <a href="https://etherscan.io/address/${WETH10_BRIDGE_MAINNET}" target="_blank" style="color: var(--primary);">View on Etherscan</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Bridge Information -->
                    <div class="card">
                        <h3><i class="fas fa-info-circle"></i> Bridge Information</h3>
                        <div style="line-height: 1.8;">
                            <p><strong>CCIP Bridge Ecosystem</strong> enables cross-chain transfers of WETH9 and WETH10 tokens using Chainlink CCIP (Cross-Chain Interoperability Protocol).</p>
                            
                            <h4 style="margin-top: 1.5rem; margin-bottom: 0.5rem;">Supported Networks:</h4>
                            <ul style="margin-left: 2rem; margin-top: 0.5rem;">
                                <li><strong>Chain 138</strong> - Source chain with both bridge contracts</li>
                                <li><strong>Ethereum Mainnet</strong> - Destination with dedicated bridge contracts</li>
                                <li><strong>BSC</strong> - Binance Smart Chain</li>
                                <li><strong>Polygon</strong> - Polygon PoS</li>
                                <li><strong>Avalanche</strong> - Avalanche C-Chain</li>
                                <li><strong>Base</strong> - Base L2</li>
                                <li><strong>Arbitrum</strong> - Arbitrum One</li>
                                <li><strong>Optimism</strong> - Optimism Mainnet</li>
                                <li><strong>Cronos</strong> - Cronos (25); see routing table for full list and config-ready chains (Gnosis, Celo, Wemix)</li>
                            </ul>
                            
                            <h4 style="margin-top: 1.5rem; margin-bottom: 0.5rem;">How to Use:</h4>
                            <ol style="margin-left: 2rem; margin-top: 0.5rem;">
                                <li>Click on any bridge address to view detailed information and transaction history</li>
                                <li>Use the bridge contracts to transfer WETH9 or WETH10 tokens between supported chains</li>
                                <li>All transfers are secured by Chainlink CCIP infrastructure</li>
                            </ol>
                            
                            <h4 style="margin-top: 1.5rem; margin-bottom: 0.5rem;">CCIP Infrastructure:</h4>
                            <ul style="margin-left: 2rem; margin-top: 0.5rem;">
                                <li><strong>CCIP Router (Chain 138)</strong>: <span class="hash" onclick="showAddressDetail('0x8078A09637e47Fa5Ed34F626046Ea2094a5CDE5e')" style="cursor: pointer;">0x8078A09637e47Fa5Ed34F626046Ea2094a5CDE5e</span></li>
                                <li><strong>CCIP Sender (Chain 138)</strong>: <span class="hash" onclick="showAddressDetail('0x105F8A15b819948a89153505762444Ee9f324684')" style="cursor: pointer;">0x105F8A15b819948a89153505762444Ee9f324684</span></li>
                            </ul>
                        </div>
                    </div>
                `;
                
                container.innerHTML = html;
            } catch (error) {
                container.innerHTML = '<div class="error">Failed to load bridge data: ' + escapeHtml(error.message) + '</div>';
            }
        }

        function safeBlockNumber(v) { const n = String(v).replace(/[^0-9]/g, ''); return n ? n : null; }
        function safeTxHash(v) { const s = String(v); return /^0x[a-fA-F0-9]{64}$/.test(s) ? s : null; }
        function safeAddress(v) { const s = String(v); return /^0x[a-fA-F0-9]{40}$/i.test(s) ? s : null; }
        async function showBlockDetail(blockNumber) {
            const bn = safeBlockNumber(blockNumber);
            if (!bn) { showToast('Invalid block number', 'error'); return; }
            blockNumber = bn;
            currentDetailKey = 'block:' + blockNumber;
            showView('blockDetail');
            updatePath('/block/' + blockNumber);
            const container = document.getElementById('blockDetail');
            updateBreadcrumb('block', blockNumber);
            container.innerHTML = createSkeletonLoader('detail');

            try {
                let b;
                
                // For ChainID 138, use Blockscout API directly
                var rawBlockResponse = null;
                if (CHAIN_ID === 138) {
                    try {
                        const response = await fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/blocks/${blockNumber}`);
                        rawBlockResponse = response;
                        b = normalizeBlock(response);
                        if (!b) {
                            throw new Error('Block not found');
                        }
                    } catch (error) {
                        container.innerHTML = '<div class="error">Failed to load block: ' + escapeHtml(error.message || 'Unknown error') + '. <button onclick="showBlockDetail(\'' + escapeHtml(String(blockNumber)) + '\')" class="btn btn-primary" style="margin-top: 1rem;">Retry</button></div>';
                        return;
                    }
                } else {
                    const block = await fetchAPIWithRetry(`${API_BASE}/v1/blocks/138/${blockNumber}`);
                    if (block.data) {
                        b = block.data;
                    } else {
                        throw new Error('Block not found');
                    }
                }
                
                if (b) {
                    const timestamp = new Date(b.timestamp).toLocaleString();
                    const gasUsedPercent = b.gas_limit ? ((parseInt(b.gas_used || 0) / parseInt(b.gas_limit)) * 100).toFixed(2) : '0';
                    const baseFeeGwei = b.base_fee_per_gas ? (parseInt(b.base_fee_per_gas) / 1e9).toFixed(2) : 'N/A';
                    const burntFeesEth = b.burnt_fees ? formatEther(b.burnt_fees) : '0';
                    
                    container.innerHTML = `
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                            <h2 style="margin: 0;">Block #${b.number}</h2>
                            <button onclick="exportBlockData(${b.number})" class="btn btn-primary" style="padding: 0.5rem 1rem;">
                                <i class="fas fa-download"></i> Export
                            </button>
                        </div>
                        <div class="info-row">
                            <div class="info-label">Block Number</div>
                            <div class="info-value">${b.number}</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">Hash</div>
                            <div class="info-value hash">${escapeHtml(b.hash || '')} <button type="button" class="btn-copy" onclick="event.stopPropagation(); copyToClipboard(\'' + String(b.hash || '').replace(/\\/g, '\\\\').replace(/'/g, "\\'") + '\', \'Copied\');" aria-label="Copy hash"><i class="fas fa-copy"></i></button></div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">Parent Hash</div>
                            <div class="info-value hash" onclick="showBlockDetail('${escapeHtml(String(parseInt(b.number) - 1))}')" style="cursor: pointer;">${escapeHtml(b.parent_hash || '')}</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">Timestamp</div>
                            <div class="info-value">${escapeHtml(timestamp)}</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">Miner</div>
                            <div class="info-value hash" onclick="showAddressDetail('${escapeHtml(b.miner || '')}')" style="cursor: pointer;">${formatAddressWithLabel(b.miner || '') || 'N/A'}</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">Transaction Count</div>
                            <div class="info-value">${b.transaction_count || 0}</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">Gas Used</div>
                            <div class="info-value">${formatNumber(b.gas_used || 0)} / ${formatNumber(b.gas_limit || 0)} (${gasUsedPercent}%)</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">Gas Limit</div>
                            <div class="info-value">${formatNumber(b.gas_limit || 0)}</div>
                        </div>
                        ${b.base_fee_per_gas ? `
                        <div class="info-row">
                            <div class="info-label">Base Fee</div>
                            <div class="info-value">${baseFeeGwei} Gwei</div>
                        </div>
                        ` : ''}
                        ${b.burnt_fees && parseInt(b.burnt_fees) > 0 ? `
                        <div class="info-row">
                            <div class="info-label">Burnt Fees</div>
                            <div class="info-value">${burntFeesEth} ETH</div>
                        </div>
                        ` : ''}
                        <div class="info-row">
                            <div class="info-label">Size</div>
                            <div class="info-value">${formatNumber(b.size || 0)} bytes</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">Difficulty</div>
                            <div class="info-value">${formatNumber(b.difficulty || 0)}</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">Nonce</div>
                            <div class="info-value">${escapeHtml(String(b.nonce || '0x0'))}</div>
                        </div>
                        ${(rawBlockResponse && (rawBlockResponse.consensus !== undefined || rawBlockResponse.finality !== undefined || rawBlockResponse.validated !== undefined)) ? '<div class="info-row"><div class="info-label">Finality / Consensus</div><div class="info-value">' + escapeHtml(String(rawBlockResponse.consensus != null ? rawBlockResponse.consensus : (rawBlockResponse.finality != null ? rawBlockResponse.finality : rawBlockResponse.validated))) + '</div></div>' : ''}
                    `;
                } else {
                    container.innerHTML = '<div class="error">Block not found</div>';
                }
            } catch (error) {
                container.innerHTML = '<div class="error">Failed to load block: ' + escapeHtml(error.message) + '</div>';
            }
        }
        window._showBlockDetail = showBlockDetail;
        window.showBlockDetail = showBlockDetail;

        async function showTransactionDetail(txHash) {
            const th = safeTxHash(txHash);
            if (!th) { showToast('Invalid transaction hash', 'error'); return; }
            txHash = th;
            currentDetailKey = 'tx:' + txHash;
            showView('transactionDetail');
            updatePath('/tx/' + txHash);
            const container = document.getElementById('transactionDetail');
            updateBreadcrumb('transaction', txHash);
            container.innerHTML = createSkeletonLoader('detail');

            try {
                let t;
                let rawTx = null;

                if (CHAIN_ID === 138) {
                    try {
                        const response = await fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/transactions/${txHash}`);
                        rawTx = response;
                        t = normalizeTransaction(response);
                        if (!t) throw new Error('Transaction not found');
                    } catch (error) {
                        container.innerHTML = '<div class="error">Failed to load transaction: ' + escapeHtml(error.message || 'Unknown error') + '. <button onclick="showTransactionDetail(\'' + escapeHtml(String(txHash)) + '\')" class="btn btn-primary" style="margin-top: 1rem;">Retry</button></div>';
                        return;
                    }
                } else {
                    const tx = await fetchAPIWithRetry(`${API_BASE}/v1/transactions/138/${txHash}`);
                    if (tx.data) t = tx.data;
                    else throw new Error('Transaction not found');
                }

                if (!t) {
                    container.innerHTML = '<div class="error">Transaction not found</div>';
                    return;
                }

                const timestamp = new Date(t.created_at).toLocaleString();
                const valueEth = formatEther(t.value || '0');
                const gasPriceGwei = t.gas_price ? (parseInt(t.gas_price) / 1e9).toFixed(2) : 'N/A';
                const maxFeeGwei = t.max_fee_per_gas ? (parseInt(t.max_fee_per_gas) / 1e9).toFixed(2) : 'N/A';
                const priorityFeeGwei = t.max_priority_fee_per_gas ? (parseInt(t.max_priority_fee_per_gas) / 1e9).toFixed(2) : 'N/A';
                const burntFeeEth = t.tx_burnt_fee ? formatEther(t.tx_burnt_fee) : '0';
                const totalFee = t.gas_used && t.gas_price ? formatEther((BigInt(t.gas_used) * BigInt(t.gas_price)).toString()) : '0';
                const txType = t.type === 2 ? 'EIP-1559' : t.type === 1 ? 'EIP-2930' : 'Legacy';
                const revertReason = t.revert_reason || (rawTx && (rawTx.revert_reason || rawTx.error || rawTx.result));
                const inputHex = (t.input && t.input !== '0x') ? t.input : null;
                const decodedInput = t.decoded_input || (rawTx && rawTx.decoded_input);
                const toCellContent = t.to ? formatAddressWithLabel(t.to) + ' <button type="button" class="btn-copy" onclick="event.stopPropagation(); copyToClipboard(\'' + String(t.to).replace(/\\/g, '\\\\').replace(/'/g, "\\'") + '\', \'Copied\');" aria-label="Copy address"><i class="fas fa-copy"></i></button>' : 'N/A';

                let mainHtml = `
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                        <h2 style="margin: 0;">Transaction</h2>
                        <div style="display: flex; gap: 0.5rem;">
                            <button onclick="exportTransactionData('${t.hash}')" class="btn btn-primary" style="padding: 0.5rem 1rem;">
                                <i class="fas fa-download"></i> JSON
                            </button>
                            <button onclick="exportTransactionCSV('${t.hash}')" class="btn btn-primary" style="padding: 0.5rem 1rem;">
                                <i class="fas fa-file-csv"></i> CSV
                            </button>
                        </div>
                    </div>
<div class="info-row">
                            <div class="info-label">Transaction Hash</div>
                            <div class="info-value hash">${escapeHtml(t.hash)} <button type="button" class="btn-copy" onclick="copyToClipboard('${escapeHtml(t.hash)}', 'Copied');" aria-label="Copy hash"><i class="fas fa-copy"></i></button></div>
                        </div>
                    <div class="info-row">
                        <div class="info-label">Type</div>
                        <div class="info-value"><span class="badge badge-primary">${txType}</span></div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Status</div>
                        <div class="info-value">
                            <span class="badge ${t.status === 1 ? 'badge-success' : 'badge-danger'}">
                                ${t.status === 1 ? 'Success' : t.status === 0 ? 'Failed' : 'Pending'}
                            </span>
                        </div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Block Number</div>
                        <div class="info-value hash" onclick="showBlockDetail('${escapeHtml(String(t.block_number || ''))}')" style="cursor: pointer;">${escapeHtml(String(t.block_number || 'N/A'))}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Block Hash</div>
                        <div class="info-value hash">${escapeHtml(t.block_hash || 'N/A')}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">From</div>
                        <div class="info-value hash" onclick="showAddressDetail('${escapeHtml(t.from || '')}')" style="cursor: pointer;">${formatAddressWithLabel(t.from || '')} <button type="button" class="btn-copy" onclick="event.stopPropagation(); copyToClipboard('${escapeHtml(t.from || '')}', 'Copied');" aria-label="Copy address"><i class="fas fa-copy"></i></button></div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">To</div>
                        <div class="info-value hash" onclick="showAddressDetail('${escapeHtml(t.to || '')}')" style="cursor: pointer;">${toCellContent}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Value</div>
                        <div class="info-value">${valueEth} ETH</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Gas Used</div>
                        <div class="info-value">${t.gas_used ? formatNumber(t.gas_used) : 'N/A'}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Gas Limit</div>
                        <div class="info-value">${t.gas_limit ? formatNumber(t.gas_limit) : 'N/A'}</div>
                    </div>
                    ${t.max_fee_per_gas ? `<div class="info-row"><div class="info-label">Max Fee Per Gas</div><div class="info-value">${maxFeeGwei} Gwei</div></div>` : ''}
                    ${t.max_priority_fee_per_gas ? `<div class="info-row"><div class="info-label">Max Priority Fee</div><div class="info-value">${priorityFeeGwei} Gwei</div></div>` : ''}
                    ${!t.max_fee_per_gas && t.gas_price ? `<div class="info-row"><div class="info-label">Gas Price</div><div class="info-value">${gasPriceGwei} Gwei</div></div>` : ''}
                    <div class="info-row">
                        <div class="info-label">Total Fee</div>
                        <div class="info-value">${totalFee} ETH</div>
                    </div>
                    ${t.tx_burnt_fee && parseInt(t.tx_burnt_fee) > 0 ? `<div class="info-row"><div class="info-label">Burnt Fee</div><div class="info-value">${burntFeeEth} ETH</div></div>` : ''}
                    <div class="info-row"><div class="info-label">Nonce</div><div class="info-value">${t.nonce || 'N/A'}</div></div>
                    <div class="info-row"><div class="info-label">Timestamp</div><div class="info-value">${timestamp}</div></div>
                    ${t.contract_address ? `<div class="info-row"><div class="info-label">Contract Address</div><div class="info-value hash" onclick="showAddressDetail('${escapeHtml(t.contract_address)}')" style="cursor: pointer;">${escapeHtml(t.contract_address)}</div></div>` : ''}
                `;

                if (revertReason && t.status !== 1) {
                    const reasonStr = typeof revertReason === 'string' ? revertReason : (revertReason.message || JSON.stringify(revertReason));
                    mainHtml += `
                        <div class="card" style="margin-top: 1rem; border-left: 4px solid var(--danger);">
                            <h3 style="color: var(--danger); margin-bottom: 0.5rem;"><i class="fas fa-exclamation-triangle"></i> Revert Reason</h3>
                            <pre style="background: var(--light); padding: 1rem; border-radius: 8px; overflow-x: auto; font-size: 0.875rem;">${escapeHtml(reasonStr)}</pre>
                        </div>
                    `;
                }

                if (inputHex || decodedInput) {
                    mainHtml += `<div class="card" style="margin-top: 1rem;"><h3>Input Data</h3>`;
                    if (decodedInput && (decodedInput.method || decodedInput.params)) {
                        const method = decodedInput.method || decodedInput.name || 'Unknown';
                        mainHtml += `<p style="margin-bottom: 0.5rem;"><strong>Method:</strong> ${escapeHtml(method)}</p>`;
                        if (decodedInput.params && Array.isArray(decodedInput.params)) {
                            mainHtml += '<table class="table"><thead><tr><th>Param</th><th>Value</th></tr></thead><tbody>';
                            decodedInput.params.forEach(function(p) {
                                const name = (p.name || p.type || '');
                                const val = typeof p.value !== 'undefined' ? String(p.value) : (p.type || '');
                                mainHtml += '<tr><td>' + escapeHtml(name) + '</td><td class="hash" style="word-break: break-all;">' + escapeHtml(val) + '</td></tr>';
                            });
                            mainHtml += '</tbody></table>';
                        }
                    }
                    if (inputHex) {
                        mainHtml += `<p style="margin-top: 0.5rem;"><strong>Hex:</strong> <code id="txInputHex" style="word-break: break-all; font-size: 0.8rem;">${escapeHtml(inputHex)}</code> <button type="button" class="btn btn-primary" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;" onclick="navigator.clipboard.writeText(document.getElementById(\'txInputHex\').textContent); showToast(\'Copied\', \'success\');">Copy</button></p>`;
                    }
                    mainHtml += '</div>';
                }

                container.innerHTML = mainHtml;

                if (CHAIN_ID === 138) {
                    const internalCard = document.createElement('div');
                    internalCard.className = 'card';
                    internalCard.style.marginTop = '1rem';
                    internalCard.innerHTML = '<h3><i class="fas fa-sitemap"></i> Internal Transactions</h3><div id="txInternalTxs" class="loading">Loading...</div>';
                    container.appendChild(internalCard);

                    const logsCard = document.createElement('div');
                    logsCard.className = 'card';
                    logsCard.style.marginTop = '1rem';
                    logsCard.innerHTML = '<h3><i class="fas fa-list"></i> Event Logs</h3><div id="txLogs" class="loading">Loading...</div>';
                    container.appendChild(logsCard);

                    Promise.all([
                        fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/transactions/${txHash}/internal-transactions`).catch(function() { return { items: [] }; }),
                        fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/transactions/${txHash}/internal_transactions`).catch(function() { return { items: [] }; }),
                        fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/transactions/${txHash}/logs`).catch(function() { return { items: [] }; }),
                        fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/transactions/${txHash}/log_entries`).catch(function() { return { items: [] }; })
                    ]).then(function(results) {
                        const internalResp = results[0].items ? results[0] : results[1];
                        const logsResp = results[2].items ? results[2] : results[3];
                        const internals = internalResp.items || [];
                        const logs = logsResp.items || logsResp.log_entries || [];

                        const internalEl = document.getElementById('txInternalTxs');
                        if (internalEl) {
                            if (internals.length === 0) {
                                internalEl.innerHTML = '<p style="color: var(--text-light);">No internal transactions</p>';
                            } else {
                                let tbl = '<table class="table"><thead><tr><th>Type</th><th>From</th><th>To</th><th>Value</th></tr></thead><tbody>';
                                internals.forEach(function(it) {
                                    const from = it.from?.hash || it.from || 'N/A';
                                    const to = it.to?.hash || it.to || 'N/A';
                                    const val = it.value ? formatEther(it.value) : '0';
                                    const type = it.type || it.call_type || 'call';
                                    tbl += '<tr><td>' + escapeHtml(type) + '</td><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(from) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(from)) + '</td><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(to) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(to)) + '</td><td>' + escapeHtml(val) + ' ETH</td></tr>';
                                });
                                tbl += '</tbody></table>';
                                internalEl.innerHTML = tbl;
                            }
                        }

                        const logsEl = document.getElementById('txLogs');
                        if (logsEl) {
                            if (logs.length === 0) {
                                logsEl.innerHTML = '<p style="color: var(--text-light);">No event logs</p>';
                            } else {
                                let tbl = '<table class="table"><thead><tr><th>Address</th><th>Topics</th><th>Data</th><th>Decoded</th></tr></thead><tbody>';
                                logs.forEach(function(log, idx) {
                                    const addr = log.address?.hash || log.address || 'N/A';
                                    const topics = (log.topics && Array.isArray(log.topics)) ? log.topics : (log.topic0 ? [log.topic0] : []);
                                    const topicsStr = topics.join(', ');
                                    const data = log.data || log.raw_data || '0x';
                                    tbl += '<tr id="txLogRow' + idx + '"><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(addr) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(addr)) + '</td><td style="word-break: break-all; font-size: 0.75rem;">' + escapeHtml(String(topicsStr).substring(0, 80)) + (String(topicsStr).length > 80 ? '...' : '') + '</td><td style="word-break: break-all; font-size: 0.75rem;">' + escapeHtml(String(data).substring(0, 66)) + (String(data).length > 66 ? '...' : '') + '</td><td id="txLogDecoded' + idx + '" style="font-size: 0.8rem;">—</td></tr>';
                                });
                                tbl += '</tbody></table>';
                                logsEl.innerHTML = tbl;
                                if (typeof ethers !== 'undefined' && ethers.utils) {
                                    (function(logsList, txHash) {
                                        var addrs = [];
                                        logsList.forEach(function(l) { var a = l.address && (l.address.hash || l.address) || l.address; if (a && addrs.indexOf(a) === -1) addrs.push(a); });
                                        var abiCache = {};
                                        Promise.all(addrs.map(function(addr) {
                                            if (!/^0x[a-f0-9]{40}$/i.test(addr)) return Promise.resolve();
                                            return fetch(BLOCKSCOUT_API + '/v2/smart-contracts/' + addr).then(function(r) { return r.json(); }).catch(function() { return null; }).then(function(res) {
                                                var abi = res && (res.abi || res.abi_json);
                                                if (abi) abiCache[addr.toLowerCase()] = Array.isArray(abi) ? abi : (typeof abi === 'string' ? JSON.parse(abi) : abi);
                                            });
                                        })).then(function() {
                                            logsList.forEach(function(log, idx) {
                                                var addr = (log.address && (log.address.hash || log.address)) || log.address;
                                                var topics = log.topics && Array.isArray(log.topics) ? log.topics : (log.topic0 ? [log.topic0] : []);
                                                var data = log.data || log.raw_data || '0x';
                                                var abi = addr ? abiCache[(addr + '').toLowerCase()] : null;
                                                var decodedEl = document.getElementById('txLogDecoded' + idx);
                                                if (!decodedEl || !abi) return;
                                                try {
                                                    var iface = new ethers.utils.Interface(abi);
                                                    var parsed = iface.parseLog({ topics: topics, data: data });
                                                    if (parsed && parsed.name) {
                                                        var args = parsed.args && parsed.args.length ? parsed.args.map(function(a) { return String(a); }).join(', ') : '';
                                                        decodedEl.textContent = parsed.name + '(' + args + ')';
                                                        decodedEl.title = parsed.signature || '';
                                                    }
                                                } catch (e) {}
                                            });
                                        });
                                    })(logs, txHash);
                                }
                            }
                        }
                    });
                }
            } catch (error) {
                container.innerHTML = '<div class="error">Failed to load transaction: ' + escapeHtml(error.message) + '</div>';
            }
        }
        function escapeHtml(str) {
            if (str == null) return '';
            const s = String(str);
            const div = document.createElement('div');
            div.textContent = s;
            return div.innerHTML;
        }
        function exportTransactionCSV(txHash) {
            fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/transactions/' + txHash).then(function(r) {
                var t = normalizeTransaction(r);
                if (!t) return;
                var rows = [['Field', 'Value'], ['hash', t.hash], ['from', t.from], ['to', t.to || ''], ['value', t.value || '0'], ['block_number', t.block_number || ''], ['status', t.status], ['gas_used', t.gas_used || ''], ['gas_limit', t.gas_limit || '']];
                var csv = rows.map(function(row) { return row.map(function(cell) { return '"' + String(cell).replace(/"/g, '""') + '"'; }).join(','); }).join('\n');
                var blob = new Blob([csv], { type: 'text/csv' });
                var url = URL.createObjectURL(blob);
                var a = document.createElement('a'); a.href = url; a.download = 'transaction-' + txHash.substring(0, 10) + '.csv'; a.click();
                URL.revokeObjectURL(url);
            }).catch(function(e) { showToast('Export failed: ' + (e.message || 'Unknown'), 'error'); });
        }
        function exportBlocksCSV() {
            fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/blocks?page=1&page_size=50').then(function(r) {
                var items = r.items || r || [];
                var rows = [['Block', 'Hash', 'Transactions', 'Timestamp']];
                items.forEach(function(b) {
                    var bn = b.height || b.number || b.block_number;
                    var h = b.hash || b.block_hash || '';
                    var tc = b.transaction_count || b.transactions_count || 0;
                    var ts = b.timestamp || '';
                    rows.push([String(bn), h, String(tc), String(ts)]);
                });
                var csv = rows.map(function(row) { return row.map(function(cell) { return '"' + String(cell).replace(/"/g, '""') + '"'; }).join(','); }).join('\n');
                var blob = new Blob([csv], { type: 'text/csv' });
                var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'blocks.csv'; a.click();
                URL.revokeObjectURL(a.href);
            }).catch(function(e) { showToast('Export failed: ' + (e.message || 'Unknown'), 'error'); });
        }
        function exportTransactionsListCSV() {
            fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/transactions?page=1&page_size=50').then(function(r) {
                var items = r.items || r || [];
                var rows = [['Hash', 'From', 'To', 'Value', 'Block']];
                items.forEach(function(tx) {
                    var t = normalizeTransaction(tx);
                    if (t) rows.push([t.hash || '', t.from || '', t.to || '', t.value || '0', String(t.block_number || '')]);
                });
                var csv = rows.map(function(row) { return row.map(function(cell) { return '"' + String(cell).replace(/"/g, '""') + '"'; }).join(','); }).join('\n');
                var blob = new Blob([csv], { type: 'text/csv' });
                var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'transactions.csv'; a.click();
                URL.revokeObjectURL(a.href);
            }).catch(function(e) { showToast('Export failed: ' + (e.message || 'Unknown'), 'error'); });
        }
        function exportAddressTransactionsCSV(addr) {
            if (!addr || !/^0x[a-fA-F0-9]{40}$/i.test(addr)) { showToast('Invalid address', 'error'); return; }
            fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/transactions?address=' + encodeURIComponent(addr) + '&page=1&page_size=100').then(function(r) {
                var items = r.items || r || [];
                var rows = [['Hash', 'From', 'To', 'Value', 'Block', 'Status']];
                items.forEach(function(tx) {
                    var t = normalizeTransaction(tx);
                    if (t) rows.push([t.hash || '', t.from || '', t.to || '', t.value || '0', String(t.block_number || ''), t.status === 1 ? 'Success' : 'Failed']);
                });
                var csv = rows.map(function(row) { return row.map(function(cell) { return '"' + String(cell).replace(/"/g, '""') + '"'; }).join(','); }).join('\n');
                var blob = new Blob([csv], { type: 'text/csv' });
                var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'address-' + addr.substring(0, 10) + '-transactions.csv'; a.click();
                URL.revokeObjectURL(a.href);
                showToast('CSV downloaded', 'success');
            }).catch(function(e) { showToast('Export failed: ' + (e.message || 'Unknown'), 'error'); });
        }
        window.exportAddressTransactionsCSV = exportAddressTransactionsCSV;
        function exportAddressTokenBalancesCSV(addr) {
            if (!addr || !/^0x[a-fA-F0-9]{40}$/i.test(addr)) { showToast('Invalid address', 'error'); return; }
            fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/addresses/' + addr + '/token-balances').catch(function() { return { items: [] }; }).then(function(r) {
                var items = Array.isArray(r) ? r : (r.items || r || []);
                var rows = [['Token', 'Contract', 'Balance', 'Type']];
                (items || []).forEach(function(b) {
                    var token = b.token || b;
                    var contract = token.address?.hash || token.address || b.token_contract_address_hash || 'N/A';
                    var symbol = token.symbol || token.name || '-';
                    var balance = b.value || b.balance || '0';
                    var decimals = token.decimals != null ? token.decimals : 18;
                    var divisor = Math.pow(10, parseInt(decimals, 10));
                    var displayBalance = (Number(balance) / divisor).toLocaleString(undefined, { maximumFractionDigits: 6 });
                    var type = token.type || b.token_type || 'ERC-20';
                    rows.push([symbol, contract, displayBalance, type]);
                });
                var csv = rows.map(function(row) { return row.map(function(cell) { return '"' + String(cell).replace(/"/g, '""') + '"'; }).join(','); }).join('\n');
                var blob = new Blob([csv], { type: 'text/csv' });
                var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'address-' + addr.substring(0, 10) + '-token-balances.csv'; a.click();
                URL.revokeObjectURL(a.href);
                showToast('CSV downloaded', 'success');
            }).catch(function(e) { showToast('Export failed: ' + (e.message || 'Unknown'), 'error'); });
        }
        window.exportAddressTokenBalancesCSV = exportAddressTokenBalancesCSV;
        window._showTransactionDetail = showTransactionDetail;
        window.showTransactionDetail = showTransactionDetail;

        async function showAddressDetail(address) {
            const addr = safeAddress(address);
            if (!addr) { showToast('Invalid address', 'error'); return; }
            address = addr;
            currentDetailKey = 'address:' + address.toLowerCase();
            showView('addressDetail');
            updatePath('/address/' + address);
            const container = document.getElementById('addressDetail');
            updateBreadcrumb('address', address);
            container.innerHTML = createSkeletonLoader('detail');

            try {
                // Validate address format
                if (!/^0x[a-fA-F0-9]{40}$/.test(address)) {
                    container.innerHTML = '<div class="error">Invalid address format</div>';
                    return;
                }

                let a;
                
                // For ChainID 138, use Blockscout API directly
                if (CHAIN_ID === 138) {
                    try {
                        const response = await fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/addresses/${address}`);
                        var raw = response && (response.data !== undefined ? response.data : response.address !== undefined ? response.address : response.items && response.items[0] !== undefined ? response.items[0] : response);
                        a = normalizeAddress(raw);
                        if (!a || !a.hash) {
                            throw new Error('Address not found');
                        }
                    } catch (error) {
                        container.innerHTML = '<div class="error">Failed to load address: ' + escapeHtml(error.message || 'Unknown error') + '. <button onclick="showAddressDetail(\'' + address + '\')" class="btn btn-primary" style="margin-top: 1rem;">Retry</button></div>';
                        return;
                    }
                } else {
                    const addr = await fetchAPIWithRetry(`${API_BASE}/v1/addresses/138/${address}`);
                    if (addr.data) {
                        a = addr.data;
                    } else {
                        throw new Error('Address not found');
                    }
                }
                
                if (a) {
                    const balanceEth = formatEther(a.balance || '0');
                    const isContract = !!a.is_contract;
                    const verifiedBadge = a.is_verified ? '<span class="badge badge-success" style="margin-left: 0.5rem;">Verified</span>' : '';
                    const contractLink = isContract ? `<a href="${EXPLORER_ORIGIN}/address/${address}/contract" target="_blank" rel="noopener" style="color: var(--primary); font-size: 0.875rem;">View contract on Blockscout</a>` : '';
                    const savedLabel = getAddressLabel(address);
                    const inWatchlist = isInWatchlist(address);

                    container.innerHTML = `
                        <div class="info-row">
                            <div class="info-label">Address</div>
                            <div class="info-value hash">${address} <button type="button" class="btn-copy" onclick="copyToClipboard('${address.replace(/'/g, "\\'")}', 'Copied');" aria-label="Copy address"><i class="fas fa-copy"></i></button></div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">Label</div>
                            <div class="info-value"><input type="text" id="addressLabelInput" value="${escapeHtml(savedLabel)}" placeholder="Optional label" style="padding: 0.35rem; border-radius: 6px; width: 200px; max-width: 100%;"> <button type="button" class="btn btn-primary" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;" onclick="var v=document.getElementById(\'addressLabelInput\').value; setAddressLabel(\'${address.replace(/'/g, "\\'")}\', v); showToast(\'Label saved\', \'success\');">Save</button></div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">Watchlist</div>
                            <div class="info-value"><button type="button" id="addressWatchlistBtn" class="btn btn-primary" style="padding: 0.35rem 0.75rem;" onclick="(function(addr){ if(isInWatchlist(addr)){ removeFromWatchlist(addr); showToast(\'Removed from watchlist\', \'success\'); } else { addToWatchlist(addr); showToast(\'Added to watchlist\', \'success\'); } var b=document.getElementById(\'addressWatchlistBtn\'); if(b) b.innerHTML=isInWatchlist(addr)?\'<i class=\'fas fa-star\'></i> Remove from watchlist\':\'<i class=\'fas fa-star-o\'></i> Add to watchlist\'; })(\'${address.replace(/'/g, "\\'")}\')"><i class="fas fa-star${inWatchlist ? '' : '-o'}"></i> ${inWatchlist ? 'Remove from watchlist' : 'Add to watchlist'}</button></div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">Token approvals</div>
                            <div class="info-value"><a href="https://revoke.cash/address/${encodeURIComponent(address)}${CHAIN_ID === 138 ? '?chainId=138' : ''}" target="_blank" rel="noopener" style="color: var(--primary);">Check token approvals</a></div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">Balance</div>
                            <div class="info-value">${balanceEth} ETH</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">Transaction Count</div>
                            <div class="info-value">${a.transaction_count || 0}</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">Token Count</div>
                            <div class="info-value">${a.token_count || 0}</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">Type</div>
                            <div class="info-value">${a.is_contract ? '<span class="badge badge-success">Contract</span>' + verifiedBadge + (contractLink ? '<br/>' + contractLink : '') : '<span class="badge badge-primary">EOA</span>'}</div>
                        </div>
                        ${a.creation_tx_hash ? `<div class="info-row"><div class="info-label">Contract created in</div><div class="info-value hash" onclick="showTransactionDetail('${escapeHtml(a.creation_tx_hash)}')" style="cursor: pointer;">${escapeHtml(shortenHash(a.creation_tx_hash))} <button type="button" class="btn-copy" onclick="event.stopPropagation(); copyToClipboard('${escapeHtml(a.creation_tx_hash).replace(/'/g, "\\'")}', 'Copied');" aria-label="Copy"><i class="fas fa-copy"></i></button></div></div>` : ''}
                        ${a.first_seen_at ? `<div class="info-row"><div class="info-label">First seen</div><div class="info-value">${escapeHtml(typeof a.first_seen_at === 'string' ? a.first_seen_at : new Date(a.first_seen_at).toISOString())}</div></div>` : ''}
                        ${a.last_seen_at ? `<div class="info-row"><div class="info-label">Last seen</div><div class="info-value">${escapeHtml(typeof a.last_seen_at === 'string' ? a.last_seen_at : new Date(a.last_seen_at).toISOString())}</div></div>` : ''}
                        <div class="tabs" style="margin-top: 1.5rem;">
                            <button class="tab active" onclick="switchAddressTab('transactions', '${address}')" id="addrTabTxs" aria-selected="true">Transactions</button>
                            <button class="tab" onclick="switchAddressTab('tokens', '${address}')" id="addrTabTokens">Token Balances</button>
                            <button class="tab" onclick="switchAddressTab('internal', '${address}')" id="addrTabInternal">Internal Txns</button>
                            <button class="tab" onclick="switchAddressTab('nfts', '${address}')" id="addrTabNfts">NFTs</button>
                            ${isContract ? '<button class="tab" onclick="switchAddressTab(\'contract\', \'' + address + '\')" id="addrTabContract">Contract (ABI / Bytecode)</button>' : ''}
                        </div>
                        <div id="addressTabTransactions" class="address-tab-content card" style="margin-top: 1rem;">
                            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
                                <h3 style="margin: 0;">Recent Transactions</h3>
                                <button type="button" class="btn btn-primary" onclick="exportAddressTransactionsCSV('${address}')" style="padding: 0.5rem 1rem;"><i class="fas fa-file-csv"></i> Export CSV</button>
                            </div>
                            <div id="addressTransactions" class="loading">Loading transactions...</div>
                        </div>
                        <div id="addressTabTokens" class="address-tab-content card" style="margin-top: 1rem; display: none;">
                            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
                                <h3 style="margin: 0;">Token Balances</h3>
                                <button type="button" class="btn btn-primary" onclick="exportAddressTokenBalancesCSV('${address}')" style="padding: 0.5rem 1rem;"><i class="fas fa-file-csv"></i> Export CSV</button>
                            </div>
                            <div id="addressTokenBalances" class="loading">Loading...</div>
                        </div>
                        <div id="addressTabInternal" class="address-tab-content card" style="margin-top: 1rem; display: none;">
                            <h3>Internal Transactions</h3>
                            <div id="addressInternalTxns" class="loading">Loading...</div>
                        </div>
                        <div id="addressTabNfts" class="address-tab-content card" style="margin-top: 1rem; display: none;">
                            <h3>NFT Inventory</h3>
                            <div id="addressNftInventory" class="loading">Loading...</div>
                        </div>
                        ${isContract ? '<div id="addressTabContract" class="address-tab-content card" style="margin-top: 1rem; display: none;"><h3>Contract ABI & Bytecode</h3><div id="addressContractInfo" class="loading">Loading...</div></div>' : ''}
                    `;

                    function switchAddressTab(tabName, addr) {
                        document.querySelectorAll('.address-tab-content').forEach(function(el) { el.style.display = 'none'; });
                        document.querySelectorAll('.tabs .tab').forEach(function(t) { t.classList.remove('active'); });
                        if (tabName === 'transactions') {
                            document.getElementById('addressTabTransactions').style.display = 'block';
                            document.getElementById('addrTabTxs').classList.add('active');
                        } else if (tabName === 'tokens') {
                            document.getElementById('addressTabTokens').style.display = 'block';
                            document.getElementById('addrTabTokens').classList.add('active');
                            loadAddressTokenBalances(addr);
                        } else if (tabName === 'internal') {
                            document.getElementById('addressTabInternal').style.display = 'block';
                            document.getElementById('addrTabInternal').classList.add('active');
                            loadAddressInternalTxns(addr);
                        } else if (tabName === 'nfts') {
                            document.getElementById('addressTabNfts').style.display = 'block';
                            document.getElementById('addrTabNfts').classList.add('active');
                            loadAddressNftInventory(addr);
                        } else if (tabName === 'contract') {
                            var contractPanel = document.getElementById('addressTabContract');
                            var contractTab = document.getElementById('addrTabContract');
                            if (contractPanel && contractTab) {
                                contractPanel.style.display = 'block';
                                contractTab.classList.add('active');
                                loadAddressContractInfo(addr);
                            }
                        }
                    }
                    window.switchAddressTab = switchAddressTab;

                    async function loadAddressTokenBalances(addr) {
                        const el = document.getElementById('addressTokenBalances');
                        if (!el || el.dataset.loaded === '1') return;
                        try {
                            const r = await fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/addresses/' + addr + '/token-balances').catch(function() { return { items: [] }; });
                            const r2 = await fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/addresses/' + addr + '/token_balances').catch(function() { return { items: [] }; });
                            const items = (r.items || r).length ? (r.items || r) : (r2.items || r2);
                            el.dataset.loaded = '1';
                            if (!items || items.length === 0) {
                                el.innerHTML = '<p style="color: var(--text-light);">No token balances</p>';
                                return;
                            }
                            let tbl = '<table class="table"><thead><tr><th>Token</th><th>Contract</th><th>Balance</th><th>Type</th></tr></thead><tbody>';
                            items.forEach(function(b) {
                                const token = b.token || b;
                                const contract = token.address?.hash || token.address || b.token_contract_address_hash || 'N/A';
                                const symbol = token.symbol || token.name || '-';
                                const balance = b.value || b.balance || '0';
                                const decimals = token.decimals != null ? token.decimals : 18;
                                const divisor = Math.pow(10, parseInt(decimals, 10));
                                const displayBalance = (Number(balance) / divisor).toLocaleString(undefined, { maximumFractionDigits: 6 });
                                const type = token.type || b.token_type || 'ERC-20';
                                tbl += '<tr><td><a href="/token/' + encodeURIComponent(contract) + '">' + escapeHtml(symbol) + '</a></td><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(contract) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(contract)) + '</td><td>' + escapeHtml(displayBalance) + '</td><td>' + escapeHtml(type) + '</td></tr>';
                            });
                            tbl += '</tbody></table>';
                            el.innerHTML = tbl;
                        } catch (e) {
                            el.innerHTML = '<p class="error">Failed to load token balances</p>';
                        }
                    }

                    async function loadAddressNftInventory(addr) {
                        const el = document.getElementById('addressNftInventory');
                        if (!el || el.dataset.loaded === '1') return;
                        try {
                            const r = await fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/addresses/' + addr + '/token-balances').catch(function() { return { items: [] }; });
                            const r2 = await fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/addresses/' + addr + '/nft-inventory').catch(function() { return { items: [] }; });
                            const r3 = await fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/addresses/' + addr + '/nft_tokens').catch(function() { return { items: [] }; });
                            var items = (r2.items || r2).length ? (r2.items || r2) : (r3.items || r3);
                            if (!items || items.length === 0) {
                                var allBalances = (r.items || r) || [];
                                items = Array.isArray(allBalances) ? allBalances.filter(function(b) {
                                    var t = (b.token || b).type || (b.token_type || '');
                                    return t === 'ERC-721' || t === 'ERC-1155' || String(t).toLowerCase().indexOf('nft') !== -1;
                                }) : [];
                            }
                            el.dataset.loaded = '1';
                            if (!items || items.length === 0) {
                                el.innerHTML = '<p style="color: var(--text-light);">No NFT tokens</p>';
                                return;
                            }
                            var tbl = '<table class="table"><thead><tr><th>Contract</th><th>Token ID</th><th>Name / Symbol</th><th>Balance</th></tr></thead><tbody>';
                            items.forEach(function(b) {
                                var token = b.token || b;
                                var contract = token.address?.hash || token.address || b.token_contract_address_hash || b.contract_address_hash || 'N/A';
                                var tokenId = b.token_id != null ? b.token_id : (b.tokenId != null ? b.tokenId : (b.id != null ? b.id : '-'));
                                var name = token.name || token.symbol || '-';
                                var balance = b.value != null ? b.value : (b.balance != null ? b.balance : '1');
                                tbl += '<tr><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(contract) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(contract)) + '</td>';
                                tbl += '<td>' + (tokenId !== '-' ? '<a href="/nft/' + encodeURIComponent(contract) + '/' + encodeURIComponent(String(tokenId)) + '" onclick="event.preventDefault(); showNftDetail(\'' + escapeHtml(contract) + '\', \'' + escapeHtml(String(tokenId)) + '\'); updatePath(\'/nft/' + encodeURIComponent(contract) + '/' + encodeURIComponent(String(tokenId)) + '\');">' + escapeHtml(String(tokenId)) + '</a>' : '-') + '</td>';
                                tbl += '<td>' + escapeHtml(name) + '</td><td>' + escapeHtml(String(balance)) + '</td></tr>';
                            });
                            tbl += '</tbody></table>';
                            el.innerHTML = tbl;
                        } catch (e) {
                            el.innerHTML = '<p class="error">Failed to load NFT inventory</p>';
                        }
                    }

                    async function loadAddressInternalTxns(addr) {
                        const el = document.getElementById('addressInternalTxns');
                        if (!el || el.dataset.loaded === '1') return;
                        try {
                            const r = await fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/addresses/' + addr + '/internal-transactions').catch(function() { return { items: [] }; });
                            const r2 = await fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/addresses/' + addr + '/internal_transactions').catch(function() { return { items: [] }; });
                            const items = (r.items || r).length ? (r.items || r) : (r2.items || r2);
                            el.dataset.loaded = '1';
                            if (!items || items.length === 0) {
                                el.innerHTML = '<p style="color: var(--text-light);">No internal transactions</p>';
                                return;
                            }
                            let tbl = '<table class="table"><thead><tr><th>Block</th><th>From</th><th>To</th><th>Value</th><th>Tx Hash</th></tr></thead><tbody>';
                            items.slice(0, 25).forEach(function(it) {
                                const from = it.from?.hash || it.from || 'N/A';
                                const to = it.to?.hash || it.to || 'N/A';
                                const val = it.value ? formatEther(it.value) : '0';
                                const block = it.block_number || it.block || '-';
                                const txHash = it.transaction_hash || it.tx_hash || '-';
                                tbl += '<tr><td onclick="showBlockDetail(\'' + escapeHtml(block) + '\')" style="cursor: pointer;">' + escapeHtml(block) + '</td><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(from) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(from)) + '</td><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(to) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(to)) + '</td><td>' + escapeHtml(val) + ' ETH</td><td class="hash" onclick="showTransactionDetail(\'' + escapeHtml(txHash) + '\')" style="cursor: pointer;">' + (txHash !== '-' ? escapeHtml(shortenHash(txHash)) : '-') + '</td></tr>';
                            });
                            tbl += '</tbody></table>';
                            el.innerHTML = tbl;
                        } catch (e) {
                            el.innerHTML = '<p class="error">Failed to load internal transactions</p>';
                        }
                    }

                    async function loadAddressContractInfo(addr) {
                        const el = document.getElementById('addressContractInfo');
                        if (!el || el.dataset.loaded === '1') return;
                        try {
                            const urls = [
                                BLOCKSCOUT_API + '/v2/smart-contracts/' + addr,
                                BLOCKSCOUT_API + '/v2/contracts/' + addr
                            ];
                            let data = null;
                            for (var i = 0; i < urls.length; i++) {
                                try {
                                    const r = await fetchAPIWithRetry(urls[i]);
                                    if (r && (r.abi || r.bytecode || r.deployed_bytecode)) { data = r; break; }
                                } catch (e) {}
                            }
                            el.dataset.loaded = '1';
                            if (!data) {
                                el.innerHTML = '<p style="color: var(--text-light);">Contract source not indexed. <a href="' + EXPLORER_ORIGIN + '/address/' + encodeURIComponent(addr) + '/contract" target="_blank" rel="noopener">Verify on Blockscout</a></p>';
                                return;
                            }
                            const abi = data.abi || data.abi_interface || [];
                            const abiStr = typeof abi === 'string' ? abi : JSON.stringify(abi, null, 2);
                            const bytecode = data.bytecode || data.deployed_bytecode || data.creation_bytecode || '-';
                            let html = '<p><strong>Verification:</strong> ' + (data.is_verified ? '<span class="badge badge-success">Verified</span>' : '<span class="badge badge-warning">Unverified</span>') + '</p>';
                            html += '<div style="margin-top: 1rem;"><h4>ABI <button type="button" class="btn btn-primary" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;" onclick="navigator.clipboard.writeText(document.getElementById(\'contractAbiText\').textContent); showToast(\'Copied\', \'success\');">Copy</button> <a href="javascript:void(0)" onclick="var blob=new Blob([document.getElementById(\'contractAbiText\').textContent],{type:\'application/json\'}); var a=document.createElement(\'a\'); a.href=URL.createObjectURL(blob); a.download=\'abi-' + addr.substring(0,10) + '.json\'; a.click(); URL.revokeObjectURL(a.href); return false;">Download</a></h4>';
                            html += '<pre id="contractAbiText" style="background: var(--light); padding: 1rem; border-radius: 8px; overflow: auto; max-height: 300px; font-size: 0.75rem;">' + escapeHtml(abiStr) + '</pre></div>';
                            html += '<div style="margin-top: 1rem;"><h4>Bytecode <button type="button" class="btn btn-primary" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;" onclick="navigator.clipboard.writeText(document.getElementById(\'contractBytecodeText\').textContent); showToast(\'Copied\', \'success\');">Copy</button></h4>';
                            html += '<pre id="contractBytecodeText" style="background: var(--light); padding: 1rem; border-radius: 8px; overflow: auto; max-height: 150px; font-size: 0.7rem; word-break: break-all;">' + escapeHtml(String(bytecode).substring(0, 500)) + (String(bytecode).length > 500 ? '...' : '') + '</pre></div>';
                            var viewFns = (Array.isArray(abi) ? abi : []).filter(function(x) { return x.type === 'function' && (x.stateMutability === 'view' || x.stateMutability === 'pure' || (x.constant === true)); });
                            if (viewFns.length > 0) {
                                html += '<div style="margin-top: 1.5rem;"><h4><i class="fas fa-readme"></i> Read contract</h4><p style="color: var(--text-light); font-size: 0.875rem;">Call view/pure functions (requires ethers.js).</p>';
                                html += '<div style="margin-top: 0.5rem;"><label for="readContractSelect">Function:</label><select id="readContractSelect" style="margin-left: 0.5rem; padding: 0.35rem; border-radius: 6px; min-width: 200px;">';
                                viewFns.forEach(function(fn) { html += '<option value="' + escapeHtml(fn.name) + '">' + escapeHtml(fn.name) + '(' + (fn.inputs || []).map(function(i) { return i.type; }).join(',') + ')</option>'; });
                                html += '</select></div><div id="readContractInputs" style="margin-top: 0.5rem;"></div>';
                                html += '<button type="button" class="btn btn-primary" style="margin-top: 0.5rem;" id="readContractBtn">Query</button><pre id="readContractResult" style="background: var(--light); padding: 1rem; border-radius: 8px; margin-top: 0.5rem; min-height: 2rem; font-size: 0.8rem; display: none;"></pre></div>';
                            }
                            var writeFns = (Array.isArray(abi) ? abi : []).filter(function(x) { return x.type === 'function' && x.stateMutability !== 'view' && x.stateMutability !== 'pure' && !x.constant; });
                            if (writeFns.length > 0) {
                                html += '<div style="margin-top: 1.5rem;"><h4><i class="fas fa-pen"></i> Write contract</h4><p style="color: var(--text-light); font-size: 0.875rem;">Connect wallet to send transactions.</p>';
                                html += '<div style="margin-top: 0.5rem;"><label>Function:</label><select id="writeContractSelect" style="margin-left: 0.5rem; padding: 0.35rem; border-radius: 6px; min-width: 200px;">';
                                writeFns.forEach(function(fn) { var pay = (fn.stateMutability === 'payable'); html += '<option value="' + escapeHtml(fn.name) + '" data-payable="' + pay + '">' + escapeHtml(fn.name) + '(' + (fn.inputs || []).map(function(i) { return i.type; }).join(',') + ')' + (pay ? ' payable' : '') + '</option>'; });
                                html += '</select></div><div id="writeContractInputs" style="margin-top: 0.5rem;"></div>';
                                html += '<div id="writeContractValueRow" style="margin-top: 0.5rem; display: none;"><label>Value (ETH):</label><input type="text" id="writeContractValue" placeholder="0" style="margin-left: 0.5rem; padding: 0.35rem; border-radius: 6px; width: 120px;"></div>';
                                html += '<button type="button" class="btn btn-primary" style="margin-top: 0.5rem;" id="writeContractBtn">Write</button><pre id="writeContractResult" style="background: var(--light); padding: 1rem; border-radius: 8px; margin-top: 0.5rem; min-height: 2rem; font-size: 0.8rem; display: none;"></pre></div>';
                            }
                            html += '<p style="margin-top: 0.5rem;"><a href="' + EXPLORER_ORIGIN + '/address/' + encodeURIComponent(addr) + '/contract" target="_blank" rel="noopener" style="color: var(--primary);">Read / Write contract on Blockscout</a></p>';
                            el.innerHTML = html;
                            if (viewFns.length > 0) {
                                (function setupReadContract(contractAddr, abiJson, viewFunctions) {
                                    var selectEl = document.getElementById('readContractSelect');
                                    var inputsEl = document.getElementById('readContractInputs');
                                    var resultEl = document.getElementById('readContractResult');
                                    var btnEl = document.getElementById('readContractBtn');
                                    function renderInputs() {
                                        var name = selectEl && selectEl.value;
                                        var fn = viewFunctions.find(function(f) { return f.name === name; });
                                        if (!inputsEl || !fn) return;
                                        var inputs = fn.inputs || [];
                                        if (inputs.length === 0) { inputsEl.innerHTML = ''; return; }
                                        var h = '<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">';
                                        inputs.forEach(function(inp, i) {
                                            h += '<label>' + escapeHtml(inp.name || 'arg' + i) + ' (' + escapeHtml(inp.type) + '):</label><input type="text" id="readArg' + i + '" placeholder="' + escapeHtml(inp.type) + '" style="padding: 0.35rem; border-radius: 6px; min-width: 120px;">';
                                        });
                                        h += '</div>';
                                        inputsEl.innerHTML = h;
                                    }
                                    if (selectEl) selectEl.addEventListener('change', renderInputs);
                                    renderInputs();
                                    if (btnEl) btnEl.addEventListener('click', function() {
                                        if (typeof ethers === 'undefined') { showToast('Ethers.js not loaded. Refresh the page.', 'error'); return; }
                                        var name = selectEl && selectEl.value;
                                        var fn = viewFunctions.find(function(f) { return f.name === name; });
                                        if (!fn || !resultEl) return;
                                        var inputs = fn.inputs || [];
                                        var args = [];
                                        for (var i = 0; i < inputs.length; i++) {
                                            var inp = inputs[i];
                                            var val = document.getElementById('readArg' + i) && document.getElementById('readArg' + i).value;
                                            if (val === undefined || val === '') val = '';
                                            var t = (inp.type || '').toLowerCase();
                                            if (t.indexOf('uint') === 0 || t === 'int256') args.push(val ? (val.trim() ? BigInt(val) : 0) : 0);
                                            else if (t === 'bool') args.push(val === 'true' || val === '1');
                                            else if (t.indexOf('address') === 0) args.push(val && val.trim() ? val.trim() : '0x0000000000000000000000000000000000000000');
                                            else args.push(val);
                                        }
                                        resultEl.style.display = 'block';
                                        resultEl.textContent = 'Calling...';
                                        var provider = new ethers.providers.JsonRpcProvider(RPC_URL);
                                        var contract = new ethers.Contract(contractAddr, abiJson, provider);
                                        contract[name].apply(contract, args).then(function(res) {
                                            if (Array.isArray(res)) resultEl.textContent = JSON.stringify(res, null, 2);
                                            else if (res != null && typeof res.toString === 'function') resultEl.textContent = res.toString();
                                            else resultEl.textContent = JSON.stringify(res, null, 2);
                                        }).catch(function(err) {
                                            resultEl.textContent = 'Error: ' + (err.message || String(err));
                                        });
                                    });
                                })(addr, abi, viewFns);
                            }
                            if (writeFns.length > 0) {
                                (function setupWriteContract(contractAddr, abiJson, writeFunctions) {
                                    var selectEl = document.getElementById('writeContractSelect');
                                    var inputsEl = document.getElementById('writeContractInputs');
                                    var valueRow = document.getElementById('writeContractValueRow');
                                    var valueEl = document.getElementById('writeContractValue');
                                    var resultEl = document.getElementById('writeContractResult');
                                    var btnEl = document.getElementById('writeContractBtn');
                                    function renderWriteInputs() {
                                        var name = selectEl && selectEl.value;
                                        var opt = selectEl && selectEl.options[selectEl.selectedIndex];
                                        var payable = opt && opt.getAttribute('data-payable') === 'true';
                                        if (valueRow) valueRow.style.display = payable ? 'block' : 'none';
                                        var fn = writeFunctions.find(function(f) { return f.name === name; });
                                        if (!inputsEl || !fn) return;
                                        var inputs = fn.inputs || [];
                                        var h = '<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">';
                                        inputs.forEach(function(inp, i) {
                                            h += '<label>' + escapeHtml(inp.name || 'arg' + i) + ' (' + escapeHtml(inp.type) + '):</label><input type="text" id="writeArg' + i + '" placeholder="' + escapeHtml(inp.type) + '" style="padding: 0.35rem; border-radius: 6px; min-width: 120px;">';
                                        });
                                        h += '</div>';
                                        inputsEl.innerHTML = h;
                                    }
                                    if (selectEl) selectEl.addEventListener('change', renderWriteInputs);
                                    renderWriteInputs();
                                    if (btnEl) btnEl.addEventListener('click', function() {
                                        if (typeof ethers === 'undefined') { showToast('Ethers.js not loaded. Refresh the page.', 'error'); return; }
                                        if (!window.ethereum) { showToast('Connect MetaMask to write.', 'error'); return; }
                                        var name = selectEl && selectEl.value;
                                        var fn = writeFunctions.find(function(f) { return f.name === name; });
                                        if (!fn || !resultEl) return;
                                        var inputs = fn.inputs || [];
                                        var args = [];
                                        for (var i = 0; i < inputs.length; i++) {
                                            var inp = inputs[i];
                                            var val = document.getElementById('writeArg' + i) && document.getElementById('writeArg' + i).value;
                                            if (val === undefined || val === '') val = '';
                                            var t = (inp.type || '').toLowerCase();
                                            if (t.indexOf('uint') === 0 || t === 'int256') args.push(val ? (val.trim() ? BigInt(val) : 0) : 0);
                                            else if (t === 'bool') args.push(val === 'true' || val === '1');
                                            else if (t.indexOf('address') === 0) args.push(val && val.trim() ? val.trim() : '0x0000000000000000000000000000000000000000');
                                            else args.push(val);
                                        }
                                        var valueWei = '0';
                                        if (fn.stateMutability === 'payable' && valueEl && valueEl.value) {
                                            try { valueWei = ethers.utils.parseEther(valueEl.value.trim() || '0').toString(); } catch (e) { showToast('Invalid ETH value', 'error'); return; }
                                        }
                                        resultEl.style.display = 'block';
                                        resultEl.textContent = 'Confirm in wallet...';
                                        var provider = new ethers.providers.Web3Provider(window.ethereum);
                                        provider.send('eth_requestAccounts', []).then(function() {
                                            var signer = provider.getSigner();
                                            var contract = new ethers.Contract(contractAddr, abiJson, signer);
                                            var overrides = valueWei !== '0' ? { value: valueWei } : {};
                                            return contract[name].apply(contract, args.concat([overrides]));
                                        }).then(function(tx) {
                                            resultEl.textContent = 'Tx hash: ' + tx.hash + '\nWaiting for confirmation...';
                                            return tx.wait();
                                        }).then(function(receipt) {
                                            resultEl.textContent = 'Success. Block: ' + receipt.blockNumber + ', Tx: ' + receipt.transactionHash;
                                            showToast('Transaction confirmed', 'success');
                                        }).catch(function(err) {
                                            resultEl.textContent = 'Error: ' + (err.message || String(err));
                                            showToast(err.message || 'Transaction failed', 'error');
                                        });
                                    });
                                })(addr, abi, writeFns);
                            }
                        } catch (e) {
                            el.innerHTML = '<p class="error">Failed to load contract info</p>';
                        }
                    }

                    try {
                        let txs;
                        if (CHAIN_ID === 138) {
                            const response = await fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/transactions?address=${address}&page=1&page_size=10`);
                            const rawTxs = response.items || [];
                            txs = { data: rawTxs.map(normalizeTransaction).filter(tx => tx !== null) };
                        } else {
                            txs = await fetchAPIWithRetry(`${API_BASE}/v1/transactions?from_address=${address}&page_size=10`);
                        }
                        const txContainer = document.getElementById('addressTransactions');
                        if (txContainer) {
                            if (txs.data && txs.data.length > 0) {
                                let txHtml = '<table class="table"><thead><tr><th>Hash</th><th>Block</th><th>From</th><th>To</th><th>Value</th></tr></thead><tbody>';
                                txs.data.forEach(function(tx) {
                                    txHtml += '<tr onclick="showTransactionDetail(\'' + escapeHtml(tx.hash) + '\')" style="cursor: pointer;"><td class="hash">' + escapeHtml(shortenHash(tx.hash)) + '</td><td>' + escapeHtml(String(tx.block_number)) + '</td><td class="hash" onclick="event.stopPropagation(); showAddressDetail(\'' + escapeHtml(tx.from) + '\')" style="cursor: pointer;">' + formatAddressWithLabel(tx.from) + '</td><td class="hash" onclick="event.stopPropagation(); showAddressDetail(\'' + escapeHtml(tx.to || '') + '\')" style="cursor: pointer;">' + (tx.to ? formatAddressWithLabel(tx.to) : 'N/A') + '</td><td>' + escapeHtml(formatEther(tx.value || '0')) + ' ETH</td></tr>';
                                });
                                txHtml += '</tbody></table>';
                                txContainer.innerHTML = txHtml;
                            } else {
                                txContainer.innerHTML = '<p>No transactions found</p>';
                            }
                        }
                    } catch (e) {
                        const txContainer = document.getElementById('addressTransactions');
                        if (txContainer) txContainer.innerHTML = '<p>Failed to load transactions</p>';
                    }
                } else {
                    container.innerHTML = '<div class="error">Address not found</div>';
                }
            } catch (error) {
                container.innerHTML = '<div class="error">Failed to load address: ' + escapeHtml(error.message) + '</div>';
            }
        }
        window._showAddressDetail = showAddressDetail;
        window.showAddressDetail = showAddressDetail;

        async function showTokenDetail(tokenAddress) {
            if (!/^0x[a-fA-F0-9]{40}$/.test(tokenAddress)) return;
            currentDetailKey = 'token:' + tokenAddress.toLowerCase();
            showView('tokenDetail');
            updatePath('/token/' + tokenAddress);
            var container = document.getElementById('tokenDetail');
            updateBreadcrumb('token', tokenAddress);
            container.innerHTML = createSkeletonLoader('detail');

            try {
                var urls = [BLOCKSCOUT_API + '/v2/tokens/' + tokenAddress, BLOCKSCOUT_API + '/v2/token/' + tokenAddress];
                var data = null;
                for (var i = 0; i < urls.length; i++) {
                    try {
                        var r = await fetchAPIWithRetry(urls[i]);
                        if (r && (r.symbol || r.name || r.total_supply != null)) { data = r; break; }
                    } catch (e) {}
                }
                if (!data) {
                    container.innerHTML = '<p class="error">Token not found or not indexed.</p><p><a href="/address/' + encodeURIComponent(tokenAddress) + '">View as address</a></p>';
                    return;
                }
                var knownTokenDetail = {
                    '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2': { name: 'Wrapped Ether', symbol: 'WETH', decimals: 18 },
                    '0xf4bb2e28688e89fcce3c0580d37d36a7672e8a9f': { name: 'Wrapped Ether v10', symbol: 'WETH', decimals: 18 }
                };
                var known = knownTokenDetail[tokenAddress.toLowerCase()];
                var name = (known && known.name) || data.name || '-';
                var symbol = (known && known.symbol) || data.symbol || '-';
                var decimals = (known && known.decimals != null) ? known.decimals : (data.decimals != null ? data.decimals : 18);
                decimals = parseInt(decimals, 10);
                if (isNaN(decimals) || decimals < 0 || decimals > 255) decimals = 18;
                var supply = data.total_supply != null ? data.total_supply : (data.total_supply_raw || '0');
                var supplyNum = Number(supply) / Math.pow(10, decimals);
                var holders = data.holders_count != null ? data.holders_count : (data.holder_count || '-');
                var transfersResp = null;
                try {
                    transfersResp = await fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/tokens/' + tokenAddress + '/transfers?page=1&page_size=10').catch(function() { return { items: [] }; });
                } catch (e) {}
                var transfers = (transfersResp && transfersResp.items) ? transfersResp.items : [];
                var addrEsc = tokenAddress.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
                var symbolEsc = String(symbol).replace(/\\/g, '\\\\').replace(/'/g, "\\'");
                var html = '<div class="info-row"><div class="info-label">Contract</div><div class="info-value"><span class="hash" onclick="showAddressDetail(\'' + escapeHtml(tokenAddress) + '\')" style="cursor: pointer;">' + escapeHtml(tokenAddress) + '</span> <button type="button" class="btn-add-token-wallet" onclick="addTokenToWallet(\'' + addrEsc + '\', \'' + symbolEsc + '\', ' + decimals + ');" aria-label="Add to wallet" title="Add to wallet"><i class="fas fa-wallet" aria-hidden="true"></i></button></div></div>';
                html += '<div class="info-row"><div class="info-label">Name</div><div class="info-value">' + escapeHtml(name) + '</div></div>';
                html += '<div class="info-row"><div class="info-label">Symbol</div><div class="info-value">' + escapeHtml(symbol) + '</div></div>';
                html += '<div class="info-row"><div class="info-label">Decimals</div><div class="info-value">' + decimals + '</div></div>';
                html += '<div class="info-row"><div class="info-label">Total Supply</div><div class="info-value">' + supplyNum.toLocaleString(undefined, { maximumFractionDigits: 6 }) + '</div></div>';
                html += '<div class="info-row"><div class="info-label">Holders</div><div class="info-value">' + (holders !== '-' ? formatNumber(holders) : '-') + '</div></div>';
                html += '<div class="card" style="margin-top: 1rem;"><h3>Recent Transfers</h3>';
                if (transfers.length === 0) {
                    html += '<p style="color: var(--text-light);">No transfers</p>';
                } else {
                    html += '<table class="table"><thead><tr><th>From</th><th>To</th><th>Value</th><th>Tx</th></tr></thead><tbody>';
                    transfers.forEach(function(tr) {
                        var from = tr.from?.hash || tr.from || '-';
                        var to = tr.to?.hash || tr.to || '-';
                        var val = tr.total?.value != null ? tr.total.value : (tr.value || '0');
                        var dec = tr.token?.decimals != null ? tr.token.decimals : decimals;
                        var v = Number(val) / Math.pow(10, parseInt(dec, 10));
                        var txHash = tr.transaction_hash || tr.tx_hash || '';
                        html += '<tr><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(from) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(from)) + '</td><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(to) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(to)) + '</td><td>' + escapeHtml(v.toLocaleString(undefined, { maximumFractionDigits: 6 })) + '</td><td class="hash" onclick="showTransactionDetail(\'' + escapeHtml(txHash) + '\')" style="cursor: pointer;">' + (txHash ? escapeHtml(shortenHash(txHash)) : '-') + '</td></tr>';
                    });
                    html += '</tbody></table>';
                }
                html += '</div>';
                container.innerHTML = html;
            } catch (err) {
                container.innerHTML = '<div class="error">Failed to load token: ' + escapeHtml(err.message || 'Unknown') + '</div>';
            }
        }
        window.showTokenDetail = showTokenDetail;

        async function showNftDetail(contractAddress, tokenId) {
            if (!/^0x[a-fA-F0-9]{40}$/.test(contractAddress)) return;
            currentDetailKey = 'nft:' + contractAddress.toLowerCase() + ':' + tokenId;
            showView('nftDetail');
            updatePath('/nft/' + contractAddress + '/' + tokenId);
            var container = document.getElementById('nftDetail');
            updateBreadcrumb('nft', contractAddress, tokenId);
            container.innerHTML = createSkeletonLoader('detail');

            try {
                var urls = [BLOCKSCOUT_API + '/v2/tokens/' + contractAddress + '/nft/' + tokenId, BLOCKSCOUT_API + '/v2/nft/' + contractAddress + '/' + tokenId];
                var data = null;
                for (var i = 0; i < urls.length; i++) {
                    try {
                        var r = await fetchAPIWithRetry(urls[i]);
                        if (r) { data = r; break; }
                    } catch (e) {}
                }
                var html = '<div class="info-row"><div class="info-label">Contract</div><div class="info-value hash" onclick="showAddressDetail(\'' + escapeHtml(contractAddress) + '\')" style="cursor: pointer;">' + escapeHtml(contractAddress) + '</div></div>';
                html += '<div class="info-row"><div class="info-label">Token ID</div><div class="info-value">' + escapeHtml(String(tokenId)) + '</div></div>';
                if (data) {
                    if (data.metadata && data.metadata.image) {
                        html += '<div class="info-row"><div class="info-label">Image</div><div class="info-value"><img src="' + escapeHtml(data.metadata.image) + '" alt="NFT" style="max-width: 200px; border-radius: 8px;" onerror="this.style.display=\'none\'"></div></div>';
                    }
                    if (data.name) html += '<div class="info-row"><div class="info-label">Name</div><div class="info-value">' + escapeHtml(data.name) + '</div></div>';
                    if (data.description) html += '<div class="info-row"><div class="info-label">Description</div><div class="info-value">' + escapeHtml(data.description) + '</div></div>';
                    if (data.owner) { var ownerAddr = (data.owner.hash || data.owner); html += '<div class="info-row"><div class="info-label">Owner</div><div class="info-value hash" onclick="showAddressDetail(\'' + escapeHtml(ownerAddr) + '\')" style="cursor: pointer;">' + escapeHtml(ownerAddr) + '</div></div>'; }
                    if (data.metadata && data.metadata.attributes && Array.isArray(data.metadata.attributes)) {
                        html += '<div class="info-row"><div class="info-label">Traits</div><div class="info-value"><div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">';
                        data.metadata.attributes.forEach(function(attr) {
                            var traitType = (attr.trait_type || attr.traitType || ''); var val = (attr.value != null ? attr.value : '');
                            if (traitType || val) html += '<span style="background: var(--light); padding: 0.25rem 0.5rem; border-radius: 6px; font-size: 0.85rem;">' + escapeHtml(traitType) + ': ' + escapeHtml(String(val)) + '</span>';
                        });
                        html += '</div></div></div>';
                    }
                }
                html += '<p style="margin-top: 1rem;"><a href="' + EXPLORER_ORIGIN + '/token/' + encodeURIComponent(contractAddress) + '/instance/' + encodeURIComponent(tokenId) + '" target="_blank" rel="noopener" style="color: var(--primary);">View on Blockscout</a></p>';
                container.innerHTML = html;
            } catch (err) {
                container.innerHTML = '<div class="error">Failed to load NFT: ' + escapeHtml(err.message || 'Unknown') + '</div>';
            }
        }
        window.showNftDetail = showNftDetail;

        function showSearchResultsList(items, query) {
            showView('searchResults');
            var container = document.getElementById('searchResultsContent');
            if (!container) return;
            var html = '<p style="color: var(--text-light); margin-bottom: 1rem;">Found ' + items.length + ' result(s) for "' + escapeHtml(query) + '". Click a row to open.</p>';
            html += '<table class="table"><thead><tr><th>Type</th><th>Value</th></tr></thead><tbody>';
            items.forEach(function(item) {
                var type = (item.type || item.address_type || '').toLowerCase();
                var label = item.name || item.symbol || item.address_hash || item.hash || item.tx_hash || (item.block_number != null ? 'Block #' + item.block_number : '') || '-';
                var addr, txHash, blockNum, tokenAddr;
                if (item.token_address || item.token_contract_address_hash) {
                    tokenAddr = item.token_address || item.token_contract_address_hash;
                    if (/^0x[a-f0-9]{40}$/i.test(tokenAddr)) {
                        html += '<tr style="cursor: pointer;" onclick="showTokenDetail(\'' + escapeHtml(tokenAddr) + '\')"><td>Token</td><td class="hash">' + escapeHtml(shortenHash(tokenAddr)) + ' ' + (item.name || item.symbol ? ' (' + escapeHtml(item.name || item.symbol) + ')' : '') + '</td></tr>';
                        return;
                    }
                }
                if (item.address_hash || item.hash) {
                    addr = item.address_hash || item.hash;
                    if (/^0x[a-f0-9]{40}$/i.test(addr)) {
                        html += '<tr style="cursor: pointer;" onclick="showAddressDetail(\'' + escapeHtml(addr) + '\')"><td>Address</td><td class="hash">' + escapeHtml(shortenHash(addr)) + '</td></tr>';
                        return;
                    }
                }
                if (item.tx_hash || (item.hash && item.hash.length === 66)) {
                    txHash = item.tx_hash || item.hash;
                    if (/^0x[a-f0-9]{64}$/i.test(txHash)) {
                        html += '<tr style="cursor: pointer;" onclick="showTransactionDetail(\'' + escapeHtml(txHash) + '\')"><td>Transaction</td><td class="hash">' + escapeHtml(shortenHash(txHash)) + '</td></tr>';
                        return;
                    }
                }
                if (item.block_number != null) {
                    blockNum = String(item.block_number);
                    html += '<tr style="cursor: pointer;" onclick="showBlockDetail(\'' + escapeHtml(blockNum) + '\')"><td>Block</td><td>#' + escapeHtml(blockNum) + '</td></tr>';
                    return;
                }
                html += '<tr><td>' + escapeHtml(type || 'Unknown') + '</td><td>' + escapeHtml(String(label).substring(0, 80)) + '</td></tr>';
            });
            html += '</tbody></table>';
            container.innerHTML = html;
        }
        window.showSearchResultsList = showSearchResultsList;

        async function handleSearch(query) {
            query = query.trim();
            if (!query) {
                showToast('Please enter a search query', 'info');
                return;
            }

            const normalizedQuery = query.toLowerCase().replace(/\s/g, '');

            try {
                if (/^0x[a-f0-9]{40}$/i.test(normalizedQuery)) {
                    await showAddressDetail(normalizedQuery);
                    return;
                }
                if (/^0x[a-f0-9]{64}$/i.test(normalizedQuery)) {
                    await showTransactionDetail(normalizedQuery);
                    return;
                }
                if (/^\d+$/.test(query)) {
                    await showBlockDetail(query);
                    return;
                }
                if (/^0x[a-f0-9]+$/i.test(normalizedQuery)) {
                    const blockNum = parseInt(normalizedQuery, 16);
                    if (!isNaN(blockNum)) {
                        await showBlockDetail(blockNum.toString());
                        return;
                    }
                }

                if (CHAIN_ID === 138) {
                    var searchResults = null;
                    try {
                        searchResults = await fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/search?q=' + encodeURIComponent(query));
                    } catch (e) {}
                    if (searchResults && searchResults.items && searchResults.items.length > 0) {
                        showSearchResultsList(searchResults.items, query);
                        return;
                    }
                    if (/^0x[a-f0-9]{8,64}$/i.test(normalizedQuery)) {
                        try {
                            var txResp = await fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/transactions/' + normalizedQuery);
                            if (txResp && (txResp.hash || txResp.tx_hash)) {
                                var fullHash = txResp.hash || txResp.tx_hash;
                                await showTransactionDetail(fullHash);
                                return;
                            }
                        } catch (e) {}
                        showToast('No unique result for partial hash. Use at least 0x + 8 hex characters, or full tx hash (0x + 64 hex).', 'info');
                        return;
                    }
                }

                showToast('Invalid search. Try address (0x...40 hex), tx hash (0x...64 hex or 0x+8 hex), block number, or token/contract name.', 'error');
            } catch (error) {
                console.error('Search error:', error);
                showToast('Failed to load search results: ' + (error.message || 'Unknown error'), 'error');
            }
        }
        window.handleSearch = handleSearch;

        function getTimeAgo(date) {
            if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
                return 'N/A';
            }
            
            const now = new Date();
            const diffMs = now - date;
            const diffSecs = Math.floor(diffMs / 1000);
            const diffMins = Math.floor(diffSecs / 60);
            const diffHours = Math.floor(diffMins / 60);
            const diffDays = Math.floor(diffHours / 24);
            
            if (diffSecs < 60) {
                return `${diffSecs}s ago`;
            } else if (diffMins < 60) {
                return `${diffMins}m ago`;
            } else if (diffHours < 24) {
                return `${diffHours}h ago`;
            } else if (diffDays < 7) {
                return `${diffDays}d ago`;
            } else {
                return date.toLocaleDateString();
            }
        }
        
        function formatNumber(num) {
            return parseInt(num || 0).toLocaleString();
        }

        function shortenHash(hash, length = 10) {
            if (!hash) return 'N/A';
            // Convert to string if it's not already
            const hashStr = String(hash);
            if (hashStr.length <= length * 2 + 2) return hashStr;
            return hashStr.substring(0, length + 2) + '...' + hashStr.substring(hashStr.length - length);
        }

        function formatEther(wei, unit = 'ether') {
            if (typeof wei === 'string' && wei.startsWith('0x')) {
                wei = BigInt(wei);
            }
            const weiNum = typeof wei === 'bigint' ? Number(wei) : parseFloat(wei);
            const ether = weiNum / Math.pow(10, unit === 'gwei' ? 9 : 18);
            return ether.toFixed(6).replace(/\.?0+$/, '');
        }

        // Export functions
        function exportBlockData(blockNumber) {
            // Fetch block data and export as JSON
            fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/blocks/${blockNumber}`)
                .then(response => {
                    const block = normalizeBlock(response);
                    const dataStr = JSON.stringify(block, null, 2);
                    const dataBlob = new Blob([dataStr], { type: 'application/json' });
                    const url = URL.createObjectURL(dataBlob);
                    const link = document.createElement('a');
                    link.href = url;
                    link.download = `block-${blockNumber}.json`;
                    link.click();
                    URL.revokeObjectURL(url);
                })
                .catch(error => {
                    alert('Failed to export block data: ' + error.message);
                });
        }

        function exportTransactionData(txHash) {
            // Fetch transaction data and export as JSON
            fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/transactions/${txHash}`)
                .then(response => {
                    const tx = normalizeTransaction(response);
                    const dataStr = JSON.stringify(tx, null, 2);
                    const dataBlob = new Blob([dataStr], { type: 'application/json' });
                    const url = URL.createObjectURL(dataBlob);
                    const link = document.createElement('a');
                    link.href = url;
                    link.download = `transaction-${txHash.substring(0, 10)}.json`;
                    link.click();
                    URL.revokeObjectURL(url);
                })
                .catch(error => {
                    alert('Failed to export transaction data: ' + error.message);
                });
        }

        // Global error handler
        window.addEventListener('error', (event) => {
            console.error('Global error:', event.error);
            if (typeof showToast === 'function') {
                showToast('An error occurred. Please refresh the page.', 'error');
            }
        });

        window.addEventListener('unhandledrejection', (event) => {
            console.error('Unhandled promise rejection:', event.reason);
            if (typeof showToast === 'function') {
                showToast('A network error occurred. Please try again.', 'error');
            }
        });

        function setLiveRegion(text) {
            var el = document.getElementById('explorerLiveRegion');
            if (el) el.textContent = text || '';
        }
        // Toast notification function
        function showToast(message, type = 'info', duration = 3000) {
            if (type === 'error') setLiveRegion(message);
            const toast = document.createElement('div');
            toast.className = `toast toast-${type}`;
            toast.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 1rem 1.5rem;
                background: ${type === 'error' ? '#fee2e2' : type === 'success' ? '#d1fae5' : '#dbeafe'};
                color: ${type === 'error' ? '#ef4444' : type === 'success' ? '#10b981' : '#3b82f6'};
                border-radius: 8px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                z-index: 10000;
                animation: slideIn 0.3s ease-out;
            `;
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.style.animation = 'slideOut 0.3s ease-out';
                setTimeout(() => toast.remove(), 300);
            }, duration);
        }

        // Add CSS for toast animations
        const style = document.createElement('style');
        style.textContent = `
            @keyframes slideIn {
                from { transform: translateX(100%); opacity: 0; }
                to { transform: translateX(0); opacity: 1; }
            }
            @keyframes slideOut {
                from { transform: translateX(0); opacity: 1; }
                to { transform: translateX(100%); opacity: 0; }
            }
        `;
        document.head.appendChild(style);

        // Search input and button handlers; mobile nav close on link click
        document.addEventListener('DOMContentLoaded', () => {
            const searchInput = document.getElementById('searchInput');
            const searchBtn = document.getElementById('searchBtn');
            if (searchInput) {
                searchInput.addEventListener('keypress', (e) => {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        handleSearch(e.target.value);
                    }
                });
            }
            if (searchBtn) {
                searchBtn.addEventListener('click', (e) => {
                    e.preventDefault();
                    if (searchInput) handleSearch(searchInput.value);
                });
            }
            var navLinks = document.getElementById('navLinks');
            if (navLinks) {
                navLinks.addEventListener('click', function(e) {
                    if (e.target.closest('a')) closeNavMenu();
                });
                initNavDropdowns();
            }
        });