Stellar DNS Dashboard<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);\r\n color: #7b68ee;\r\n min-height: 100vh;\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n }\r\n\r\n .header {\r\n text-align: center;\r\n margin-bottom: 40px;\r\n padding: 30px;\r\n background: rgba(255, 255, 255, 0.05);\r\n border-radius: 20px;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .header h1 {\r\n font-size: 2.5em;\r\n margin-bottom: 10px;\r\n background: linear-gradient(45deg, #00d4ff, #7b68ee);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .network-switcher {\r\n display: flex;\r\n justify-content: center;\r\n gap: 15px;\r\n margin: 20px 0;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .network-btn {\r\n background: rgba(255, 255, 255, 0.1);\r\n border: 2px solid rgba(255, 255, 255, 0.2);\r\n border-radius: 15px;\r\n padding: 15px 25px;\r\n color: white;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-size: 14px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .network-btn.active {\r\n background: linear-gradient(45deg, #7b68ee, #00d4ff);\r\n border-color: #00d4ff;\r\n transform: scale(1.05);\r\n }\r\n\r\n .network-btn:hover {\r\n transform: scale(1.05);\r\n border-color: #00d4ff;\r\n }\r\n\r\n .status-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 20px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .status-card {\r\n background: rgba(255, 255, 255, 0.08);\r\n border-radius: 15px;\r\n padding: 25px;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(10px);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .status-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 15px 35px rgba(0, 212, 255, 0.2);\r\n }\r\n\r\n .status-card h3 {\r\n color: #00d4ff;\r\n margin-bottom: 15px;\r\n font-size: 1.2em;\r\n }\r\n\r\n .status-value {\r\n font-size: 1.8em;\r\n font-weight: bold;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .api-section {\r\n background: rgba(255, 255, 255, 0.05);\r\n border-radius: 15px;\r\n padding: 30px;\r\n margin-bottom: 30px;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .api-section h2 {\r\n color: #7b68ee;\r\n margin-bottom: 20px;\r\n font-size: 1.5em;\r\n }\r\n\r\n .endpoint-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n gap: 15px;\r\n }\r\n\r\n .endpoint-btn {\r\n background: linear-gradient(45deg, #7b68ee, #00d4ff);\r\n border: none;\r\n border-radius: 10px;\r\n padding: 15px 20px;\r\n color: white;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-size: 14px;\r\n text-align: left;\r\n }\r\n\r\n .endpoint-btn:hover {\r\n transform: scale(1.05);\r\n box-shadow: 0 10px 25px rgba(123, 104, 238, 0.3);\r\n }\r\n\r\n .endpoint-btn:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n transform: none;\r\n }\r\n\r\n .response-area {\r\n margin-top: 30px;\r\n background: rgba(0, 0, 0, 0.3);\r\n border-radius: 10px;\r\n padding: 20px;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .response-area h3 {\r\n color: #00d4ff;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .response-content {\r\n background: #0a0a0a;\r\n border-radius: 8px;\r\n padding: 15px;\r\n white-space: pre-wrap;\r\n overflow-x: auto;\r\n font-family: 'Courier New', monospace;\r\n font-size: 12px;\r\n line-height: 1.4;\r\n color: #b0b0b0;\r\n max-height: 400px;\r\n overflow-y: auto;\r\n }\r\n\r\n .response-toggle {\r\n display: flex;\r\n gap: 10px;\r\n margin-bottom: 15px;\r\n justify-content: flex-end;\r\n }\r\n\r\n .toggle-btn {\r\n background: rgba(255, 255, 255, 0.1);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n border-radius: 5px;\r\n padding: 8px 15px;\r\n color: white;\r\n cursor: pointer;\r\n font-size: 12px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .toggle-btn.active {\r\n background: linear-gradient(45deg, #00d4ff, #7b68ee);\r\n border-color: #00d4ff;\r\n }\r\n\r\n .toggle-btn:hover {\r\n border-color: #00d4ff;\r\n }\r\n\r\n .human-readable {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n color: #e0e0e0;\r\n line-height: 1.6;\r\n }\r\n\r\n .data-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-top: 10px;\r\n }\r\n\r\n .data-table th,\r\n .data-table td {\r\n padding: 8px 12px;\r\n text-align: left;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .data-table th {\r\n background: rgba(255, 255, 255, 0.05);\r\n color: #00d4ff;\r\n font-weight: bold;\r\n }\r\n\r\n .data-section {\r\n margin-bottom: 20px;\r\n padding: 15px;\r\n background: rgba(255, 255, 255, 0.03);\r\n border-radius: 8px;\r\n border-left: 3px solid #7b68ee;\r\n }\r\n\r\n .data-section h4 {\r\n color: #00d4ff;\r\n margin-bottom: 10px;\r\n font-size: 1.1em;\r\n }\r\n\r\n .data-row {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 5px 0;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n\r\n .data-label {\r\n font-weight: bold;\r\n color: #7b68ee;\r\n min-width: 150px;\r\n }\r\n\r\n .data-value {\r\n color: #e0e0e0;\r\n word-break: break-all;\r\n flex: 1;\r\n margin-left: 10px;\r\n }\r\n\r\n .loading {\r\n color: #00d4ff;\r\n text-align: center;\r\n font-style: italic;\r\n }\r\n\r\n .error {\r\n color: #ff6b6b;\r\n }\r\n\r\n .search-section {\r\n background: rgba(255, 255, 255, 0.05);\r\n border-radius: 15px;\r\n padding: 30px;\r\n margin-bottom: 30px;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n display: grid;\r\n grid-template-columns: 1fr auto auto;\r\n gap: 30px;\r\n align-items: start;\r\n }\r\n\t\t.search-section h2 {\r\n color: #7b68ee;\r\n margin-bottom: 20px;\r\n font-size: 1.5em;\r\n\t\t}\r\n .search-left {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .search-right {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n min-width: 200px;\r\n }\r\n\r\n .search-input {\r\n width: 100%;\r\n padding: 15px;\r\n border-radius: 10px;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n background: rgba(255, 255, 255, 0.3);\r\n color: white;\r\n font-size: 16px;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .search-input::placeholder {\r\n color: rgba(255, 255, 255, 0.5);\r\n }\r\n\r\n .search-btn {\r\n background: linear-gradient(45deg, #ff6b6b, #ffa500);\r\n border: none;\r\n border-radius: 10px;\r\n padding: 15px 30px;\r\n color: white;\r\n cursor: pointer;\r\n font-size: 16px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .search-btn:hover {\r\n transform: scale(1.05);\r\n box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);\r\n }\r\n\r\n .register-btn {\r\n background: linear-gradient(45deg, #ff6b6b, #ffa500);\r\n border: none;\r\n border-radius: 10px;\r\n padding: 15px 30px;\r\n color: white;\r\n cursor: pointer;\r\n font-size: 16px;\r\n transition: all 0.3s ease;\r\n margin-top: 10px;\r\n text-decoration: none;\r\n display: inline-block;\r\n }\r\n\r\n .register-btn:hover {\r\n transform: scale(1.05);\r\n box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);\r\n }\r\n\r\n .status-indicator {\r\n display: inline-block;\r\n width: 12px;\r\n height: 12px;\r\n border-radius: 50%;\r\n background: #4CAF50;\r\n margin-right: 10px;\r\n animation: pulse 2s infinite;\r\n }\r\n\r\n .status-indicator.error {\r\n background: #ff6b6b;\r\n }\r\n\r\n @keyframes pulse {\r\n 0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }\r\n 70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }\r\n 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }\r\n }\r\n\r\n .stellar-section {\r\n background: rgba(0, 212, 255, 0.1);\r\n border: 1px solid rgba(0, 212, 255, 0.3);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .search-section {\r\n grid-template-columns: 1fr;\r\n gap: 20px;\r\n }\r\n \r\n .search-right {\r\n min-width: auto;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n <h1>\ud83c\udf10 Stellar DNS Dashboard<\/h1>\r\n <div class=\"network-switcher\">\r\n <button class=\"network-btn\" onclick=\"switchNetwork('stellar-mainnet')\">\r\n \u2b50 Stellar Mainnet\r\n <\/button>\r\n <button class=\"network-btn\" onclick=\"switchNetwork('stellar-testnet')\">\r\n \ud83e\uddea Stellar Testnet\r\n <\/button>\r\n <\/div>\r\n <p><span class=\"status-indicator\" id=\"connection-status\"><\/span><span id=\"network-label\">Connect To A Network<\/span><\/p>\r\n <\/div>\r\n\r\n <div class=\"status-grid\" id=\"status-grid\">\r\n \r\n <\/div>\r\n\r\n <div class=\"search-section\">\r\n <div class=\"search-left\">\r\n <h2>\ud83d\udd0d Search Network<\/h2>\r\n <input type=\"text\" class=\"search-input\" id=\"search-input\" placeholder=\"Enter account ID, transaction hash, or ledger sequence...\">\r\n <button class=\"search-btn\" onclick=\"performSearch()\">Search<\/button>\r\n <\/div>\r\n \r\n <div class=\"search-right\">\r\n \ud83d\udcdd <h2>Register Domain<\/h2>\r\n <a href=\"https:\/\/stellardns.io\/?page_id=284\" class=\"register-btn\">Register<\/a>\r\n <\/div>\r\n\r\n <div class=\"search-right\">\r\n \ud83d\udcb0<h2>Create Account<\/h2>\r\n <a href=\"https:\/\/stellardns.io\/?page_id=137\" class=\"register-btn\">Create New Account<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"api-section stellar-section\" id=\"api-section\">\r\n \ud83d\ude80<h2>API Endpoints<\/h2>\r\n <div class=\"endpoint-grid\" id=\"endpoint-grid\">\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/accounts')\">\ud83d\udcca Accounts<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/ledgers?order=desc&limit=10')\">\ud83d\udcda Recent Ledgers<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/transactions?order=desc&limit=10')\">\ud83d\udcb0 Recent Transactions<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/operations?order=desc&limit=10')\">\u26a1 Recent Operations<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/payments?order=desc&limit=10')\">\ud83d\udcb8 Recent Payments<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/assets')\">\ud83e\ude99 Assets<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/offers')\">\ud83c\udfea Offers<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/effects?order=desc&limit=10')\">\u2728 Effects<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/fee_stats')\">\ud83d\udc8e Fee Stats<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/claimable_balances')\">\ud83c\udf81 Claimable Balances<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/liquidity_pools')\">\ud83c\udf0a Liquidity Pools<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/trade_aggregations?base_asset_type=native&counter_asset_type=native&resolution=300000')\">\ud83d\udcc8 Trade Aggregations<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"response-area\">\r\n <h3>\ud83d\udccb API Response<\/h3>\r\n <div class=\"response-toggle\">\r\n <button class=\"toggle-btn active\" id=\"readable-btn\" onclick=\"toggleResponseView('readable')\">\ud83d\udc41\ufe0f Human Readable<\/button>\r\n <button class=\"toggle-btn\" id=\"json-btn\" onclick=\"toggleResponseView('json')\">\ud83d\udd27 Raw JSON<\/button>\r\n <\/div>\r\n <div class=\"response-content\" id=\"response\">\r\n Welcome to Stellar DNS Dashboard! Select a network above and click any endpoint to explore blockchain data.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n let currentNetwork = null;\r\n let currentResponseData = null;\r\n let currentResponseView = 'readable';\r\n \r\n const NETWORKS = {\r\n 'stellar-mainnet': {\r\n name: 'Stellar Mainnet',\r\n baseUrl: 'https:\/\/horizon.stellar.org',\r\n type: 'stellar',\r\n icon: '\u2b50'\r\n },\r\n 'stellar-testnet': {\r\n name: 'Stellar Testnet',\r\n baseUrl: 'https:\/\/horizon-testnet.stellar.org',\r\n type: 'stellar',\r\n icon: '\ud83e\uddea'\r\n }\r\n };\r\n\r\n function switchNetwork(networkId) {\r\n currentNetwork = networkId;\r\n \r\n document.querySelectorAll('.network-btn').forEach(btn => btn.classList.remove('active'));\r\n event.target.classList.add('active');\r\n \r\n const network = NETWORKS[networkId];\r\n document.getElementById('network-label').textContent = `Connected to ${network.name}`;\r\n document.getElementById('response').textContent = `Switched to ${network.name}. Click an endpoint to start exploring!`;\r\n \r\n updateStatusCards();\r\n loadNetworkInfo();\r\n }\r\n\r\n function updateStatusCards() {\r\n const statusGrid = document.getElementById('status-grid');\r\n statusGrid.innerHTML = `\r\n <div class=\"status-card\">\r\n <h3>Network Status<\/h3>\r\n <div class=\"status-value\" id=\"network-status\">Loading...<\/div>\r\n <p>Current Protocol Version<\/p>\r\n <\/div>\r\n <div class=\"status-card\">\r\n <h3>Latest Ledger<\/h3>\r\n <div class=\"status-value\" id=\"latest-ledger\">Loading...<\/div>\r\n <p id=\"ledger-time\">Last updated...<\/p>\r\n <\/div>\r\n <div class=\"status-card\">\r\n <h3>Core Version<\/h3>\r\n <div class=\"status-value\" id=\"core-version\">Loading...<\/div>\r\n <p>Horizon Version: <span id=\"horizon-version\">Loading...<\/span><\/p>\r\n <\/div>\r\n <div class=\"status-card\">\r\n <h3>Network Passphrase<\/h3>\r\n <div class=\"status-value\" id=\"network-passphrase\">Loading...<\/div>\r\n <p>Network Identifier<\/p>\r\n <\/div>\r\n `;\r\n }\r\n\r\n async function loadNetworkInfo() {\r\n if (!currentNetwork) return;\r\n \r\n const network = NETWORKS[currentNetwork];\r\n const statusIndicator = document.getElementById('connection-status');\r\n \r\n try {\r\n const response = await fetch(`${network.baseUrl}\/`);\r\n const data = await response.json();\r\n \r\n document.getElementById('network-status').textContent = data.current_protocol_version;\r\n document.getElementById('latest-ledger').textContent = data.ingest_latest_ledger?.toLocaleString() || 'N\/A';\r\n document.getElementById('core-version').textContent = data.core_version;\r\n document.getElementById('horizon-version').textContent = data.horizon_version;\r\n document.getElementById('network-passphrase').textContent = data.network_passphrase;\r\n \r\n if (data.history_latest_ledger_closed_at) {\r\n const time = new Date(data.history_latest_ledger_closed_at);\r\n document.getElementById('ledger-time').textContent = `Last updated: ${time.toLocaleString()}`;\r\n }\r\n \r\n statusIndicator.classList.remove('error');\r\n } catch (error) {\r\n console.error('Failed to load network info:', error);\r\n statusIndicator.classList.add('error');\r\n }\r\n }\r\n\r\n async function fetchData(endpoint) {\r\n if (!currentNetwork) {\r\n alert('Please select a network first');\r\n return;\r\n }\r\n \r\n const network = NETWORKS[currentNetwork];\r\n const responseDiv = document.getElementById('response');\r\n responseDiv.innerHTML = '<div class=\"loading\">\ud83d\udd04 Loading...<\/div>';\r\n \r\n try {\r\n const response = await fetch(`${network.baseUrl}${endpoint}`);\r\n const data = await response.json();\r\n currentResponseData = data;\r\n displayResponse(data);\r\n } catch (error) {\r\n responseDiv.innerHTML = `<div class=\"error\">\u274c Error: ${error.message}<\/div>`;\r\n currentResponseData = null;\r\n }\r\n }\r\n\r\n async function performSearch() {\r\n if (!currentNetwork) {\r\n alert('Please select a network first');\r\n return;\r\n }\r\n \r\n const searchTerm = document.getElementById('search-input').value.trim();\r\n if (!searchTerm) return;\r\n\r\n const network = NETWORKS[currentNetwork];\r\n const responseDiv = document.getElementById('response');\r\n responseDiv.innerHTML = '<div class=\"loading\">\ud83d\udd0d Searching...<\/div>';\r\n\r\n try {\r\n let endpoint = '';\r\n \r\n if (searchTerm.length === 56 && searchTerm.startsWith('G')) {\r\n endpoint = `\/accounts\/${searchTerm}`;\r\n } else if (searchTerm.length === 64) {\r\n endpoint = `\/transactions\/${searchTerm}`;\r\n } else if (\/^\\d+$\/.test(searchTerm)) {\r\n endpoint = `\/ledgers\/${searchTerm}`;\r\n } else {\r\n throw new Error('Invalid search term. Please enter a valid account ID (G...), transaction hash (64 chars), or ledger sequence (number).');\r\n }\r\n\r\n const response = await fetch(`${network.baseUrl}${endpoint}`);\r\n if (!response.ok) {\r\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\r\n }\r\n const data = await response.json();\r\n currentResponseData = data;\r\n displayResponse(data);\r\n } catch (error) {\r\n responseDiv.innerHTML = `<div class=\"error\">\u274c Search Error: ${error.message}<\/div>`;\r\n }\r\n }\r\n\r\n document.getElementById('search-input').addEventListener('keypress', function(e) {\r\n if (e.key === 'Enter') {\r\n performSearch();\r\n }\r\n });\r\n\r\n function toggleResponseView(view) {\r\n currentResponseView = view;\r\n \r\n document.querySelectorAll('.toggle-btn').forEach(btn => btn.classList.remove('active'));\r\n document.getElementById(view === 'readable' ? 'readable-btn' : 'json-btn').classList.add('active');\r\n \r\n if (currentResponseData) {\r\n displayResponse(currentResponseData);\r\n }\r\n }\r\n\r\n function displayResponse(data) {\r\n const responseDiv = document.getElementById('response');\r\n \r\n if (currentResponseView === 'readable') {\r\n responseDiv.innerHTML = formatHumanReadable(data);\r\n responseDiv.classList.add('human-readable');\r\n } else {\r\n responseDiv.innerHTML = JSON.stringify(data, null, 2);\r\n responseDiv.classList.remove('human-readable');\r\n }\r\n }\r\n\r\n function formatHumanReadable(data) {\r\n let html = '';\r\n \r\n if (data.account_id) {\r\n html += `<div class=\"data-section\">\r\n <h4>\ud83d\udcb0 Account Information<\/h4>\r\n ${formatDataRow('Account ID', data.account_id)}\r\n ${formatDataRow('Sequence', data.sequence)}\r\n ${formatDataRow('Subentry Count', data.subentry_count)}\r\n ${formatDataRow('Home Domain', data.home_domain || 'None')}\r\n <\/div>`;\r\n \r\n if (data.balances && data.balances.length) {\r\n html += `<div class=\"data-section\">\r\n <h4>\ud83d\udc8e Balances<\/h4>\r\n <table class=\"data-table\">\r\n <tr><th>Asset<\/th><th>Balance<\/th><th>Limit<\/th><\/tr>`;\r\n \r\n data.balances.forEach(balance => {\r\n const asset = balance.asset_type === 'native' ? 'XLM' : \r\n `${balance.asset_code} (${balance.asset_issuer?.substring(0, 8)}...)`;\r\n html += `<tr>\r\n <td>${asset}<\/td>\r\n <td>${parseFloat(balance.balance).toFixed(7)}<\/td>\r\n <td>${balance.limit || 'N\/A'}<\/td>\r\n <\/tr>`;\r\n });\r\n html += '<\/table><\/div>';\r\n }\r\n \r\n } else if (data._embedded && data._embedded.records) {\r\n const records = data._embedded.records;\r\n const type = detectDataType(records[0]);\r\n \r\n html += `<div class=\"data-section\">\r\n <h4>\ud83d\udccb ${type} (${records.length} records)<\/h4>`;\r\n \r\n if (type === 'Transactions') {\r\n html += formatTransactionsList(records);\r\n } else if (type === 'Operations') {\r\n html += formatOperationsList(records);\r\n } else if (type === 'Payments') {\r\n html += formatPaymentsList(records);\r\n } else if (type === 'Ledgers') {\r\n html += formatLedgersList(records);\r\n } else {\r\n html += formatGenericList(records);\r\n }\r\n \r\n html += '<\/div>';\r\n \r\n } else if (data.hash && data.source_account) {\r\n html += formatSingleTransaction(data);\r\n } else if (data.sequence && data.closed_at) {\r\n html += formatSingleLedger(data);\r\n } else {\r\n html += formatGenericData(data);\r\n }\r\n \r\n return html;\r\n }\r\n\r\n function detectDataType(record) {\r\n if (record.source_account && record.fee) return 'Transactions';\r\n if (record.type_i !== undefined) return 'Operations';\r\n if (record.from && record.to) return 'Payments';\r\n if (record.sequence && record.closed_at) return 'Ledgers';\r\n return 'Records';\r\n }\r\n\r\n function formatDataRow(label, value) {\r\n return `<div class=\"data-row\">\r\n <span class=\"data-label\">${label}:<\/span>\r\n <span class=\"data-value\">${value}<\/span>\r\n <\/div>`;\r\n }\r\n\r\n function formatTransactionsList(transactions) {\r\n let html = '<table class=\"data-table\"><tr><th>Hash<\/th><th>Source<\/th><th>Fee<\/th><th>Operations<\/th><th>Created<\/th><\/tr>';\r\n \r\n transactions.slice(0, 10).forEach(tx => {\r\n html += `<tr>\r\n <td>${tx.hash.substring(0, 12)}...<\/td>\r\n <td>${tx.source_account.substring(0, 8)}...<\/td>\r\n <td>${parseFloat(tx.fee_charged).toFixed(7)} XLM<\/td>\r\n <td>${tx.operation_count}<\/td>\r\n <td>${new Date(tx.created_at).toLocaleString()}<\/td>\r\n <\/tr>`;\r\n });\r\n \r\n return html + '<\/table>';\r\n }\r\n\r\n function formatOperationsList(operations) {\r\n let html = '<table class=\"data-table\"><tr><th>Type<\/th><th>Source<\/th><th>Created<\/th><\/tr>';\r\n \r\n operations.slice(0, 10).forEach(op => {\r\n html += `<tr>\r\n <td>${op.type}<\/td>\r\n <td>${op.source_account ? op.source_account.substring(0, 8) + '...' : 'N\/A'}<\/td>\r\n <td>${new Date(op.created_at).toLocaleString()}<\/td>\r\n <\/tr>`;\r\n });\r\n \r\n return html + '<\/table>';\r\n }\r\n\r\n function formatPaymentsList(payments) {\r\n let html = '<table class=\"data-table\"><tr><th>From<\/th><th>To<\/th><th>Amount<\/th><th>Asset<\/th><th>Created<\/th><\/tr>';\r\n \r\n payments.slice(0, 10).forEach(payment => {\r\n const asset = payment.asset_type === 'native' ? 'XLM' : payment.asset_code;\r\n html += `<tr>\r\n <td>${payment.from ? payment.from.substring(0, 8) + '...' : 'N\/A'}<\/td>\r\n <td>${payment.to ? payment.to.substring(0, 8) + '...' : 'N\/A'}<\/td>\r\n <td>${parseFloat(payment.amount).toFixed(7)}<\/td>\r\n <td>${asset}<\/td>\r\n <td>${new Date(payment.created_at).toLocaleString()}<\/td>\r\n <\/tr>`;\r\n });\r\n \r\n return html + '<\/table>';\r\n }\r\n\r\n function formatLedgersList(ledgers) {\r\n let html = '<table class=\"data-table\"><tr><th>Sequence<\/th><th>Transactions<\/th><th>Operations<\/th><th>Closed<\/th><\/tr>';\r\n \r\n ledgers.slice(0, 10).forEach(ledger => {\r\n html += `<tr>\r\n <td>${ledger.sequence}<\/td>\r\n <td>${ledger.successful_transaction_count}<\/td>\r\n <td>${ledger.operation_count}<\/td>\r\n <td>${new Date(ledger.closed_at).toLocaleString()}<\/td>\r\n <\/tr>`;\r\n });\r\n \r\n return html + '<\/table>';\r\n }\r\n\r\n function formatSingleTransaction(tx) {\r\n return `<div class=\"data-section\">\r\n <h4>\ud83d\udcb3 Transaction Details<\/h4>\r\n ${formatDataRow('Hash', tx.hash)}\r\n ${formatDataRow('Source Account', tx.source_account)}\r\n ${formatDataRow('Fee Charged', parseFloat(tx.fee_charged).toFixed(7) + ' XLM')}\r\n ${formatDataRow('Operation Count', tx.operation_count)}\r\n ${formatDataRow('Created', new Date(tx.created_at).toLocaleString())}\r\n ${formatDataRow('Successful', tx.successful ? 'Yes' : 'No')}\r\n <\/div>`;\r\n }\r\n\r\n function formatSingleLedger(ledger) {\r\n return `<div class=\"data-section\">\r\n <h4>\ud83d\udcda Ledger Details<\/h4>\r\n ${formatDataRow('Sequence', ledger.sequence)}\r\n ${formatDataRow('Transaction Count', ledger.successful_transaction_count)}\r\n ${formatDataRow('Operation Count', ledger.operation_count)}\r\n ${formatDataRow('Closed', new Date(ledger.closed_at).toLocaleString())}\r\n ${formatDataRow('Total Coins', parseFloat(ledger.total_coins).toFixed(7) + ' XLM')}\r\n ${formatDataRow('Fee Pool', parseFloat(ledger.fee_pool).toFixed(7) + ' XLM')}\r\n <\/div>`;\r\n }\r\n\r\n function formatGenericList(records) {\r\n let html = '<table class=\"data-table\">';\r\n \r\n if (records.length > 0) {\r\n const keys = Object.keys(records[0]).slice(0, 5);\r\n html += '<tr>' + keys.map(key => `<th>${key}<\/th>`).join('') + '<\/tr>';\r\n \r\n records.slice(0, 10).forEach(record => {\r\n html += '<tr>' + keys.map(key => {\r\n const value = record[key];\r\n const displayValue = typeof value === 'string' && value.length > 20 \r\n ? value.substring(0, 17) + '...' \r\n : value;\r\n return `<td>${displayValue}<\/td>`;\r\n }).join('') + '<\/tr>';\r\n });\r\n }\r\n \r\n return html + '<\/table>';\r\n }\r\n\r\n function formatGenericData(data) {\r\n let html = '<div class=\"data-section\"><h4>\ud83d\udcca Data<\/h4>';\r\n \r\n if (typeof data === 'object' && data !== null) {\r\n Object.entries(data).forEach(([key, value]) => {\r\n if (typeof value !== 'object' || value === null) {\r\n html += formatDataRow(key, value);\r\n }\r\n });\r\n } else {\r\n html += formatDataRow('Value', data);\r\n }\r\n \r\n return html + '<\/div>';\r\n }\r\n\r\n \/\/ Initialize on page load\r\n updateStatusCards();\r\n \r\n \/\/ Auto-refresh network info every 30 seconds when connected\r\n setInterval(() => {\r\n if (currentNetwork) {\r\n loadNetworkInfo();\r\n }\r\n }, 30000);\r\n <\/script>\r\n<\/body>\r\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-184","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages\/184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stellardns.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=184"}],"version-history":[{"count":3,"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages\/184\/revisions"}],"predecessor-version":[{"id":283,"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages\/184\/revisions\/283"}],"wp:attachment":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":184,"date":"2025-11-13T12:23:09","date_gmt":"2025-11-13T06:23:09","guid":{"rendered":"https:\/\/stellardns.io\/?page_id=184"},"modified":"2025-11-23T21:26:52","modified_gmt":"2025-11-23T15:26:52","slug":"all-endpoints-with-eth-gas-monitor","status":"publish","type":"page","link":"https:\/\/stellardns.io\/?page_id=184","title":{"rendered":"All Endpoints"},"content":{"rendered":"

Please connect your Stellar wallet to access this content. Connect Wallet<\/a><\/p>
\n\r\n\r\n\r\n \r\n \r\n Stellar DNS Dashboard<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);\r\n color: #7b68ee;\r\n min-height: 100vh;\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n }\r\n\r\n .header {\r\n text-align: center;\r\n margin-bottom: 40px;\r\n padding: 30px;\r\n background: rgba(255, 255, 255, 0.05);\r\n border-radius: 20px;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .header h1 {\r\n font-size: 2.5em;\r\n margin-bottom: 10px;\r\n background: linear-gradient(45deg, #00d4ff, #7b68ee);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .network-switcher {\r\n display: flex;\r\n justify-content: center;\r\n gap: 15px;\r\n margin: 20px 0;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .network-btn {\r\n background: rgba(255, 255, 255, 0.1);\r\n border: 2px solid rgba(255, 255, 255, 0.2);\r\n border-radius: 15px;\r\n padding: 15px 25px;\r\n color: white;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-size: 14px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .network-btn.active {\r\n background: linear-gradient(45deg, #7b68ee, #00d4ff);\r\n border-color: #00d4ff;\r\n transform: scale(1.05);\r\n }\r\n\r\n .network-btn:hover {\r\n transform: scale(1.05);\r\n border-color: #00d4ff;\r\n }\r\n\r\n .status-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 20px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .status-card {\r\n background: rgba(255, 255, 255, 0.08);\r\n border-radius: 15px;\r\n padding: 25px;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(10px);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .status-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 15px 35px rgba(0, 212, 255, 0.2);\r\n }\r\n\r\n .status-card h3 {\r\n color: #00d4ff;\r\n margin-bottom: 15px;\r\n font-size: 1.2em;\r\n }\r\n\r\n .status-value {\r\n font-size: 1.8em;\r\n font-weight: bold;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .api-section {\r\n background: rgba(255, 255, 255, 0.05);\r\n border-radius: 15px;\r\n padding: 30px;\r\n margin-bottom: 30px;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .api-section h2 {\r\n color: #7b68ee;\r\n margin-bottom: 20px;\r\n font-size: 1.5em;\r\n }\r\n\r\n .endpoint-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n gap: 15px;\r\n }\r\n\r\n .endpoint-btn {\r\n background: linear-gradient(45deg, #7b68ee, #00d4ff);\r\n border: none;\r\n border-radius: 10px;\r\n padding: 15px 20px;\r\n color: white;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-size: 14px;\r\n text-align: left;\r\n }\r\n\r\n .endpoint-btn:hover {\r\n transform: scale(1.05);\r\n box-shadow: 0 10px 25px rgba(123, 104, 238, 0.3);\r\n }\r\n\r\n .endpoint-btn:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n transform: none;\r\n }\r\n\r\n .response-area {\r\n margin-top: 30px;\r\n background: rgba(0, 0, 0, 0.3);\r\n border-radius: 10px;\r\n padding: 20px;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .response-area h3 {\r\n color: #00d4ff;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .response-content {\r\n background: #0a0a0a;\r\n border-radius: 8px;\r\n padding: 15px;\r\n white-space: pre-wrap;\r\n overflow-x: auto;\r\n font-family: 'Courier New', monospace;\r\n font-size: 12px;\r\n line-height: 1.4;\r\n color: #b0b0b0;\r\n max-height: 400px;\r\n overflow-y: auto;\r\n }\r\n\r\n .response-toggle {\r\n display: flex;\r\n gap: 10px;\r\n margin-bottom: 15px;\r\n justify-content: flex-end;\r\n }\r\n\r\n .toggle-btn {\r\n background: rgba(255, 255, 255, 0.1);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n border-radius: 5px;\r\n padding: 8px 15px;\r\n color: white;\r\n cursor: pointer;\r\n font-size: 12px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .toggle-btn.active {\r\n background: linear-gradient(45deg, #00d4ff, #7b68ee);\r\n border-color: #00d4ff;\r\n }\r\n\r\n .toggle-btn:hover {\r\n border-color: #00d4ff;\r\n }\r\n\r\n .human-readable {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n color: #e0e0e0;\r\n line-height: 1.6;\r\n }\r\n\r\n .data-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-top: 10px;\r\n }\r\n\r\n .data-table th,\r\n .data-table td {\r\n padding: 8px 12px;\r\n text-align: left;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .data-table th {\r\n background: rgba(255, 255, 255, 0.05);\r\n color: #00d4ff;\r\n font-weight: bold;\r\n }\r\n\r\n .data-section {\r\n margin-bottom: 20px;\r\n padding: 15px;\r\n background: rgba(255, 255, 255, 0.03);\r\n border-radius: 8px;\r\n border-left: 3px solid #7b68ee;\r\n }\r\n\r\n .data-section h4 {\r\n color: #00d4ff;\r\n margin-bottom: 10px;\r\n font-size: 1.1em;\r\n }\r\n\r\n .data-row {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 5px 0;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n\r\n .data-label {\r\n font-weight: bold;\r\n color: #7b68ee;\r\n min-width: 150px;\r\n }\r\n\r\n .data-value {\r\n color: #e0e0e0;\r\n word-break: break-all;\r\n flex: 1;\r\n margin-left: 10px;\r\n }\r\n\r\n .loading {\r\n color: #00d4ff;\r\n text-align: center;\r\n font-style: italic;\r\n }\r\n\r\n .error {\r\n color: #ff6b6b;\r\n }\r\n\r\n .search-section {\r\n background: rgba(255, 255, 255, 0.05);\r\n border-radius: 15px;\r\n padding: 30px;\r\n margin-bottom: 30px;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n display: grid;\r\n grid-template-columns: 1fr auto auto;\r\n gap: 30px;\r\n align-items: start;\r\n }\r\n\t\t.search-section h2 {\r\n color: #7b68ee;\r\n margin-bottom: 20px;\r\n font-size: 1.5em;\r\n\t\t}\r\n .search-left {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .search-right {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n min-width: 200px;\r\n }\r\n\r\n .search-input {\r\n width: 100%;\r\n padding: 15px;\r\n border-radius: 10px;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n background: rgba(255, 255, 255, 0.3);\r\n color: white;\r\n font-size: 16px;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .search-input::placeholder {\r\n color: rgba(255, 255, 255, 0.5);\r\n }\r\n\r\n .search-btn {\r\n background: linear-gradient(45deg, #ff6b6b, #ffa500);\r\n border: none;\r\n border-radius: 10px;\r\n padding: 15px 30px;\r\n color: white;\r\n cursor: pointer;\r\n font-size: 16px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .search-btn:hover {\r\n transform: scale(1.05);\r\n box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);\r\n }\r\n\r\n .register-btn {\r\n background: linear-gradient(45deg, #ff6b6b, #ffa500);\r\n border: none;\r\n border-radius: 10px;\r\n padding: 15px 30px;\r\n color: white;\r\n cursor: pointer;\r\n font-size: 16px;\r\n transition: all 0.3s ease;\r\n margin-top: 10px;\r\n text-decoration: none;\r\n display: inline-block;\r\n }\r\n\r\n .register-btn:hover {\r\n transform: scale(1.05);\r\n box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);\r\n }\r\n\r\n .status-indicator {\r\n display: inline-block;\r\n width: 12px;\r\n height: 12px;\r\n border-radius: 50%;\r\n background: #4CAF50;\r\n margin-right: 10px;\r\n animation: pulse 2s infinite;\r\n }\r\n\r\n .status-indicator.error {\r\n background: #ff6b6b;\r\n }\r\n\r\n @keyframes pulse {\r\n 0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }\r\n 70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }\r\n 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }\r\n }\r\n\r\n .stellar-section {\r\n background: rgba(0, 212, 255, 0.1);\r\n border: 1px solid rgba(0, 212, 255, 0.3);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .search-section {\r\n grid-template-columns: 1fr;\r\n gap: 20px;\r\n }\r\n \r\n .search-right {\r\n min-width: auto;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n <h1>\ud83c\udf10 Stellar DNS Dashboard<\/h1>\r\n <div class=\"network-switcher\">\r\n <button class=\"network-btn\" onclick=\"switchNetwork('stellar-mainnet')\">\r\n \u2b50 Stellar Mainnet\r\n <\/button>\r\n <button class=\"network-btn\" onclick=\"switchNetwork('stellar-testnet')\">\r\n \ud83e\uddea Stellar Testnet\r\n <\/button>\r\n <\/div>\r\n <p><span class=\"status-indicator\" id=\"connection-status\"><\/span><span id=\"network-label\">Connect To A Network<\/span><\/p>\r\n <\/div>\r\n\r\n <div class=\"status-grid\" id=\"status-grid\">\r\n \r\n <\/div>\r\n\r\n <div class=\"search-section\">\r\n <div class=\"search-left\">\r\n <h2>\ud83d\udd0d Search Network<\/h2>\r\n <input type=\"text\" class=\"search-input\" id=\"search-input\" placeholder=\"Enter account ID, transaction hash, or ledger sequence...\">\r\n <button class=\"search-btn\" onclick=\"performSearch()\">Search<\/button>\r\n <\/div>\r\n \r\n <div class=\"search-right\">\r\n \ud83d\udcdd <h2>Register Domain<\/h2>\r\n <a href=\"https:\/\/stellardns.io\/?page_id=284\" class=\"register-btn\">Register<\/a>\r\n <\/div>\r\n\r\n <div class=\"search-right\">\r\n \ud83d\udcb0<h2>Create Account<\/h2>\r\n <a href=\"https:\/\/stellardns.io\/?page_id=137\" class=\"register-btn\">Create New Account<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"api-section stellar-section\" id=\"api-section\">\r\n \ud83d\ude80<h2>API Endpoints<\/h2>\r\n <div class=\"endpoint-grid\" id=\"endpoint-grid\">\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/accounts')\">\ud83d\udcca Accounts<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/ledgers?order=desc&limit=10')\">\ud83d\udcda Recent Ledgers<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/transactions?order=desc&limit=10')\">\ud83d\udcb0 Recent Transactions<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/operations?order=desc&limit=10')\">\u26a1 Recent Operations<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/payments?order=desc&limit=10')\">\ud83d\udcb8 Recent Payments<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/assets')\">\ud83e\ude99 Assets<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/offers')\">\ud83c\udfea Offers<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/effects?order=desc&limit=10')\">\u2728 Effects<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/fee_stats')\">\ud83d\udc8e Fee Stats<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/claimable_balances')\">\ud83c\udf81 Claimable Balances<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/liquidity_pools')\">\ud83c\udf0a Liquidity Pools<\/button>\r\n <button class=\"endpoint-btn\" onclick=\"fetchData('\/trade_aggregations?base_asset_type=native&counter_asset_type=native&resolution=300000')\">\ud83d\udcc8 Trade Aggregations<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"response-area\">\r\n <h3>\ud83d\udccb API Response<\/h3>\r\n <div class=\"response-toggle\">\r\n <button class=\"toggle-btn active\" id=\"readable-btn\" onclick=\"toggleResponseView('readable')\">\ud83d\udc41\ufe0f Human Readable<\/button>\r\n <button class=\"toggle-btn\" id=\"json-btn\" onclick=\"toggleResponseView('json')\">\ud83d\udd27 Raw JSON<\/button>\r\n <\/div>\r\n <div class=\"response-content\" id=\"response\">\r\n Welcome to Stellar DNS Dashboard! Select a network above and click any endpoint to explore blockchain data.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n let currentNetwork = null;\r\n let currentResponseData = null;\r\n let currentResponseView = 'readable';\r\n \r\n const NETWORKS = {\r\n 'stellar-mainnet': {\r\n name: 'Stellar Mainnet',\r\n baseUrl: 'https:\/\/horizon.stellar.org',\r\n type: 'stellar',\r\n icon: '\u2b50'\r\n },\r\n 'stellar-testnet': {\r\n name: 'Stellar Testnet',\r\n baseUrl: 'https:\/\/horizon-testnet.stellar.org',\r\n type: 'stellar',\r\n icon: '\ud83e\uddea'\r\n }\r\n };\r\n\r\n function switchNetwork(networkId) {\r\n currentNetwork = networkId;\r\n \r\n document.querySelectorAll('.network-btn').forEach(btn => btn.classList.remove('active'));\r\n event.target.classList.add('active');\r\n \r\n const network = NETWORKS[networkId];\r\n document.getElementById('network-label').textContent = `Connected to ${network.name}`;\r\n document.getElementById('response').textContent = `Switched to ${network.name}. Click an endpoint to start exploring!`;\r\n \r\n updateStatusCards();\r\n loadNetworkInfo();\r\n }\r\n\r\n function updateStatusCards() {\r\n const statusGrid = document.getElementById('status-grid');\r\n statusGrid.innerHTML = `\r\n <div class=\"status-card\">\r\n <h3>Network Status<\/h3>\r\n <div class=\"status-value\" id=\"network-status\">Loading...<\/div>\r\n <p>Current Protocol Version<\/p>\r\n <\/div>\r\n <div class=\"status-card\">\r\n <h3>Latest Ledger<\/h3>\r\n <div class=\"status-value\" id=\"latest-ledger\">Loading...<\/div>\r\n <p id=\"ledger-time\">Last updated...<\/p>\r\n <\/div>\r\n <div class=\"status-card\">\r\n <h3>Core Version<\/h3>\r\n <div class=\"status-value\" id=\"core-version\">Loading...<\/div>\r\n <p>Horizon Version: <span id=\"horizon-version\">Loading...<\/span><\/p>\r\n <\/div>\r\n <div class=\"status-card\">\r\n <h3>Network Passphrase<\/h3>\r\n <div class=\"status-value\" id=\"network-passphrase\">Loading...<\/div>\r\n <p>Network Identifier<\/p>\r\n <\/div>\r\n `;\r\n }\r\n\r\n async function loadNetworkInfo() {\r\n if (!currentNetwork) return;\r\n \r\n const network = NETWORKS[currentNetwork];\r\n const statusIndicator = document.getElementById('connection-status');\r\n \r\n try {\r\n const response = await fetch(`${network.baseUrl}\/`);\r\n const data = await response.json();\r\n \r\n document.getElementById('network-status').textContent = data.current_protocol_version;\r\n document.getElementById('latest-ledger').textContent = data.ingest_latest_ledger?.toLocaleString() || 'N\/A';\r\n document.getElementById('core-version').textContent = data.core_version;\r\n document.getElementById('horizon-version').textContent = data.horizon_version;\r\n document.getElementById('network-passphrase').textContent = data.network_passphrase;\r\n \r\n if (data.history_latest_ledger_closed_at) {\r\n const time = new Date(data.history_latest_ledger_closed_at);\r\n document.getElementById('ledger-time').textContent = `Last updated: ${time.toLocaleString()}`;\r\n }\r\n \r\n statusIndicator.classList.remove('error');\r\n } catch (error) {\r\n console.error('Failed to load network info:', error);\r\n statusIndicator.classList.add('error');\r\n }\r\n }\r\n\r\n async function fetchData(endpoint) {\r\n if (!currentNetwork) {\r\n alert('Please select a network first');\r\n return;\r\n }\r\n \r\n const network = NETWORKS[currentNetwork];\r\n const responseDiv = document.getElementById('response');\r\n responseDiv.innerHTML = '<div class=\"loading\">\ud83d\udd04 Loading...<\/div>';\r\n \r\n try {\r\n const response = await fetch(`${network.baseUrl}${endpoint}`);\r\n const data = await response.json();\r\n currentResponseData = data;\r\n displayResponse(data);\r\n } catch (error) {\r\n responseDiv.innerHTML = `<div class=\"error\">\u274c Error: ${error.message}<\/div>`;\r\n currentResponseData = null;\r\n }\r\n }\r\n\r\n async function performSearch() {\r\n if (!currentNetwork) {\r\n alert('Please select a network first');\r\n return;\r\n }\r\n \r\n const searchTerm = document.getElementById('search-input').value.trim();\r\n if (!searchTerm) return;\r\n\r\n const network = NETWORKS[currentNetwork];\r\n const responseDiv = document.getElementById('response');\r\n responseDiv.innerHTML = '<div class=\"loading\">\ud83d\udd0d Searching...<\/div>';\r\n\r\n try {\r\n let endpoint = '';\r\n \r\n if (searchTerm.length === 56 && searchTerm.startsWith('G')) {\r\n endpoint = `\/accounts\/${searchTerm}`;\r\n } else if (searchTerm.length === 64) {\r\n endpoint = `\/transactions\/${searchTerm}`;\r\n } else if (\/^\\d+$\/.test(searchTerm)) {\r\n endpoint = `\/ledgers\/${searchTerm}`;\r\n } else {\r\n throw new Error('Invalid search term. Please enter a valid account ID (G...), transaction hash (64 chars), or ledger sequence (number).');\r\n }\r\n\r\n const response = await fetch(`${network.baseUrl}${endpoint}`);\r\n if (!response.ok) {\r\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\r\n }\r\n const data = await response.json();\r\n currentResponseData = data;\r\n displayResponse(data);\r\n } catch (error) {\r\n responseDiv.innerHTML = `<div class=\"error\">\u274c Search Error: ${error.message}<\/div>`;\r\n }\r\n }\r\n\r\n document.getElementById('search-input').addEventListener('keypress', function(e) {\r\n if (e.key === 'Enter') {\r\n performSearch();\r\n }\r\n });\r\n\r\n function toggleResponseView(view) {\r\n currentResponseView = view;\r\n \r\n document.querySelectorAll('.toggle-btn').forEach(btn => btn.classList.remove('active'));\r\n document.getElementById(view === 'readable' ? 'readable-btn' : 'json-btn').classList.add('active');\r\n \r\n if (currentResponseData) {\r\n displayResponse(currentResponseData);\r\n }\r\n }\r\n\r\n function displayResponse(data) {\r\n const responseDiv = document.getElementById('response');\r\n \r\n if (currentResponseView === 'readable') {\r\n responseDiv.innerHTML = formatHumanReadable(data);\r\n responseDiv.classList.add('human-readable');\r\n } else {\r\n responseDiv.innerHTML = JSON.stringify(data, null, 2);\r\n responseDiv.classList.remove('human-readable');\r\n }\r\n }\r\n\r\n function formatHumanReadable(data) {\r\n let html = '';\r\n \r\n if (data.account_id) {\r\n html += `<div class=\"data-section\">\r\n <h4>\ud83d\udcb0 Account Information<\/h4>\r\n ${formatDataRow('Account ID', data.account_id)}\r\n ${formatDataRow('Sequence', data.sequence)}\r\n ${formatDataRow('Subentry Count', data.subentry_count)}\r\n ${formatDataRow('Home Domain', data.home_domain || 'None')}\r\n <\/div>`;\r\n \r\n if (data.balances && data.balances.length) {\r\n html += `<div class=\"data-section\">\r\n <h4>\ud83d\udc8e Balances<\/h4>\r\n <table class=\"data-table\">\r\n <tr><th>Asset<\/th><th>Balance<\/th><th>Limit<\/th><\/tr>`;\r\n \r\n data.balances.forEach(balance => {\r\n const asset = balance.asset_type === 'native' ? 'XLM' : \r\n `${balance.asset_code} (${balance.asset_issuer?.substring(0, 8)}...)`;\r\n html += `<tr>\r\n <td>${asset}<\/td>\r\n <td>${parseFloat(balance.balance).toFixed(7)}<\/td>\r\n <td>${balance.limit || 'N\/A'}<\/td>\r\n <\/tr>`;\r\n });\r\n html += '<\/table><\/div>';\r\n }\r\n \r\n } else if (data._embedded && data._embedded.records) {\r\n const records = data._embedded.records;\r\n const type = detectDataType(records[0]);\r\n \r\n html += `<div class=\"data-section\">\r\n <h4>\ud83d\udccb ${type} (${records.length} records)<\/h4>`;\r\n \r\n if (type === 'Transactions') {\r\n html += formatTransactionsList(records);\r\n } else if (type === 'Operations') {\r\n html += formatOperationsList(records);\r\n } else if (type === 'Payments') {\r\n html += formatPaymentsList(records);\r\n } else if (type === 'Ledgers') {\r\n html += formatLedgersList(records);\r\n } else {\r\n html += formatGenericList(records);\r\n }\r\n \r\n html += '<\/div>';\r\n \r\n } else if (data.hash && data.source_account) {\r\n html += formatSingleTransaction(data);\r\n } else if (data.sequence && data.closed_at) {\r\n html += formatSingleLedger(data);\r\n } else {\r\n html += formatGenericData(data);\r\n }\r\n \r\n return html;\r\n }\r\n\r\n function detectDataType(record) {\r\n if (record.source_account && record.fee) return 'Transactions';\r\n if (record.type_i !== undefined) return 'Operations';\r\n if (record.from && record.to) return 'Payments';\r\n if (record.sequence && record.closed_at) return 'Ledgers';\r\n return 'Records';\r\n }\r\n\r\n function formatDataRow(label, value) {\r\n return `<div class=\"data-row\">\r\n <span class=\"data-label\">${label}:<\/span>\r\n <span class=\"data-value\">${value}<\/span>\r\n <\/div>`;\r\n }\r\n\r\n function formatTransactionsList(transactions) {\r\n let html = '<table class=\"data-table\"><tr><th>Hash<\/th><th>Source<\/th><th>Fee<\/th><th>Operations<\/th><th>Created<\/th><\/tr>';\r\n \r\n transactions.slice(0, 10).forEach(tx => {\r\n html += `<tr>\r\n <td>${tx.hash.substring(0, 12)}...<\/td>\r\n <td>${tx.source_account.substring(0, 8)}...<\/td>\r\n <td>${parseFloat(tx.fee_charged).toFixed(7)} XLM<\/td>\r\n <td>${tx.operation_count}<\/td>\r\n <td>${new Date(tx.created_at).toLocaleString()}<\/td>\r\n <\/tr>`;\r\n });\r\n \r\n return html + '<\/table>';\r\n }\r\n\r\n function formatOperationsList(operations) {\r\n let html = '<table class=\"data-table\"><tr><th>Type<\/th><th>Source<\/th><th>Created<\/th><\/tr>';\r\n \r\n operations.slice(0, 10).forEach(op => {\r\n html += `<tr>\r\n <td>${op.type}<\/td>\r\n <td>${op.source_account ? op.source_account.substring(0, 8) + '...' : 'N\/A'}<\/td>\r\n <td>${new Date(op.created_at).toLocaleString()}<\/td>\r\n <\/tr>`;\r\n });\r\n \r\n return html + '<\/table>';\r\n }\r\n\r\n function formatPaymentsList(payments) {\r\n let html = '<table class=\"data-table\"><tr><th>From<\/th><th>To<\/th><th>Amount<\/th><th>Asset<\/th><th>Created<\/th><\/tr>';\r\n \r\n payments.slice(0, 10).forEach(payment => {\r\n const asset = payment.asset_type === 'native' ? 'XLM' : payment.asset_code;\r\n html += `<tr>\r\n <td>${payment.from ? payment.from.substring(0, 8) + '...' : 'N\/A'}<\/td>\r\n <td>${payment.to ? payment.to.substring(0, 8) + '...' : 'N\/A'}<\/td>\r\n <td>${parseFloat(payment.amount).toFixed(7)}<\/td>\r\n <td>${asset}<\/td>\r\n <td>${new Date(payment.created_at).toLocaleString()}<\/td>\r\n <\/tr>`;\r\n });\r\n \r\n return html + '<\/table>';\r\n }\r\n\r\n function formatLedgersList(ledgers) {\r\n let html = '<table class=\"data-table\"><tr><th>Sequence<\/th><th>Transactions<\/th><th>Operations<\/th><th>Closed<\/th><\/tr>';\r\n \r\n ledgers.slice(0, 10).forEach(ledger => {\r\n html += `<tr>\r\n <td>${ledger.sequence}<\/td>\r\n <td>${ledger.successful_transaction_count}<\/td>\r\n <td>${ledger.operation_count}<\/td>\r\n <td>${new Date(ledger.closed_at).toLocaleString()}<\/td>\r\n <\/tr>`;\r\n });\r\n \r\n return html + '<\/table>';\r\n }\r\n\r\n function formatSingleTransaction(tx) {\r\n return `<div class=\"data-section\">\r\n <h4>\ud83d\udcb3 Transaction Details<\/h4>\r\n ${formatDataRow('Hash', tx.hash)}\r\n ${formatDataRow('Source Account', tx.source_account)}\r\n ${formatDataRow('Fee Charged', parseFloat(tx.fee_charged).toFixed(7) + ' XLM')}\r\n ${formatDataRow('Operation Count', tx.operation_count)}\r\n ${formatDataRow('Created', new Date(tx.created_at).toLocaleString())}\r\n ${formatDataRow('Successful', tx.successful ? 'Yes' : 'No')}\r\n <\/div>`;\r\n }\r\n\r\n function formatSingleLedger(ledger) {\r\n return `<div class=\"data-section\">\r\n <h4>\ud83d\udcda Ledger Details<\/h4>\r\n ${formatDataRow('Sequence', ledger.sequence)}\r\n ${formatDataRow('Transaction Count', ledger.successful_transaction_count)}\r\n ${formatDataRow('Operation Count', ledger.operation_count)}\r\n ${formatDataRow('Closed', new Date(ledger.closed_at).toLocaleString())}\r\n ${formatDataRow('Total Coins', parseFloat(ledger.total_coins).toFixed(7) + ' XLM')}\r\n ${formatDataRow('Fee Pool', parseFloat(ledger.fee_pool).toFixed(7) + ' XLM')}\r\n <\/div>`;\r\n }\r\n\r\n function formatGenericList(records) {\r\n let html = '<table class=\"data-table\">';\r\n \r\n if (records.length > 0) {\r\n const keys = Object.keys(records[0]).slice(0, 5);\r\n html += '<tr>' + keys.map(key => `<th>${key}<\/th>`).join('') + '<\/tr>';\r\n \r\n records.slice(0, 10).forEach(record => {\r\n html += '<tr>' + keys.map(key => {\r\n const value = record[key];\r\n const displayValue = typeof value === 'string' && value.length > 20 \r\n ? value.substring(0, 17) + '...' \r\n : value;\r\n return `<td>${displayValue}<\/td>`;\r\n }).join('') + '<\/tr>';\r\n });\r\n }\r\n \r\n return html + '<\/table>';\r\n }\r\n\r\n function formatGenericData(data) {\r\n let html = '<div class=\"data-section\"><h4>\ud83d\udcca Data<\/h4>';\r\n \r\n if (typeof data === 'object' && data !== null) {\r\n Object.entries(data).forEach(([key, value]) => {\r\n if (typeof value !== 'object' || value === null) {\r\n html += formatDataRow(key, value);\r\n }\r\n });\r\n } else {\r\n html += formatDataRow('Value', data);\r\n }\r\n \r\n return html + '<\/div>';\r\n }\r\n\r\n \/\/ Initialize on page load\r\n updateStatusCards();\r\n \r\n \/\/ Auto-refresh network info every 30 seconds when connected\r\n setInterval(() => {\r\n if (currentNetwork) {\r\n loadNetworkInfo();\r\n }\r\n }, 30000);\r\n <\/script>\r\n<\/body>\r\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-184","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages\/184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stellardns.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=184"}],"version-history":[{"count":3,"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages\/184\/revisions"}],"predecessor-version":[{"id":283,"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages\/184\/revisions\/283"}],"wp:attachment":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}