From f46a9414705ae935aa90397d68b2f805e3cf9d86 Mon Sep 17 00:00:00 2001 From: Stan Goldin Date: Sun, 22 Dec 2024 14:42:56 +0200 Subject: [PATCH] update index --- src/generate.js | 1 + view/index.html | 55 +++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 50 insertions(+), 6 deletions(-) diff --git a/src/generate.js b/src/generate.js index a2af5dc..a3c3148 100644 --- a/src/generate.js +++ b/src/generate.js @@ -24,6 +24,7 @@ AVAILABLE_CHAINS.forEach((data, chainId) => { // Add to the list fileList.push({ chainId, + name: data.name, fileName, url: fileName, }); diff --git a/view/index.html b/view/index.html index d417d5b..25f16ef 100644 --- a/view/index.html +++ b/view/index.html @@ -1,16 +1,24 @@ - JSON Viewer + Available Chains -

JSON Viewer

-

Enter Chain ID to view data:

+

Available Chains

+

Click a chain name to view its JSON:

+ + +

JSON Viewer

+

Or manually enter a Chain ID:

@@ -19,10 +27,38 @@

JSON Viewer

const container = document.getElementById("jsoneditor"); const editor = new JSONEditor(container); - function fetchJSON() { - const chainId = document.getElementById("chainIdInput").value; - const url = `${chainId}.json`; + // Fetch the list of available chains from list.json + fetch("list.json") + .then(response => { + if (!response.ok) { + throw new Error(`Error loading list.json: ${response.status}`); + } + return response.json(); + }) + .then(data => { + const chainList = document.getElementById("chainList"); + data.forEach(chain => { + const li = document.createElement("li"); + const link = document.createElement("a"); + link.href = chain.url; + link.textContent = chain.name; + link.onclick = (e) => { + e.preventDefault(); // Prevent navigation + fetchJSONByUrl(chain.url); + }; + li.appendChild(link); + chainList.appendChild(li); + }); + }) + .catch(error => { + console.error(error); + const errorMessage = document.createElement("p"); + errorMessage.textContent = "Failed to load chain list."; + document.body.appendChild(errorMessage); + }); + // Fetch JSON by URL and display it in the editor + function fetchJSONByUrl(url) { fetch(url) .then(response => { if (!response.ok) { @@ -37,6 +73,13 @@

JSON Viewer

editor.set({ error: error.message }); }); } + + // Fetch JSON by chain ID entered manually + function fetchJSON() { + const chainId = document.getElementById("chainIdInput").value; + const url = `${chainId}.json`; + fetchJSONByUrl(url); + }