lnlink-server 1.0.0 → 1.0.2

package/dist/public/js/init.js

@@ -1,285 +1,627 @@
 /* global bootstrap */
 
+// Global toggle state
+let isAdvancedConfigVisible = false;
+
+// Function to open external URL in default browser
+function openExternalUrl(url) {
+  if (window.electronAPI && window.electronAPI.openExternal) {
+    window.electronAPI.openExternal(url);
+  } else {
+    // Fallback for non-Electron environments
+    window.open(url, "_blank");
+  }
+}
+
 // Network configuration presets
-const networkConfigs = {
+const defaultNetworkConfigs = {
   regtest: {
-    bitcoindIndex: "regtest.lnfi.network:50001",
-    bitcoindPass: "lnfi_pass12GA",
-    bitcoindRpcHost: "regtest.lnfi.network",
-    bitcoindRpcPort: "18443",
-    bitcoindUser: "lnfi_user",
-    bitcoindZmqBlock: "tcp://regtest.lnfi.network:28334",
-    bitcoindZmqRawTx: "tcp://regtest.lnfi.network:28335",
     network: "regtest",
-    nostrRelays: ["wss://relay01.lnfi.network", "wss://relay02.lnfi.network"],
-    officialLndPeer: "027d2f1be71dc24c60b15070489d4ef274dd6aac236d02c67c76d6935defba56a6",
-    officialLndPeerHost: "regtest.lnfi.network:9735",
-    officialNostrPubKey: "npub1me48869w43j30cfry9ayz9dsdl4gj54xppgk9krrv7g6hsq7psuqp3yusn",
-    officialRgbPeer: "03b7153e278882e48e690acd0743305cbada86b131ab3388ccd782b45b02f064ef",
-    officialRgbPeerHost: "regtest.lnfi.network:9736",
-    officialUniverseServer: "regtest.lnfi.network:10009",
-    priceOracle: "grpc-oracle.lnfi.network",
-    rgbProxy: "rpc://regtest.lnfi.network:5000/json-rpc",
   },
   testnet: {
-    bitcoindIndex: "34.84.252.57:50001",
-    bitcoindPass: "rpcpassword",
-    bitcoindRpcHost: "34.84.252.57",
-    bitcoindRpcPort: "18332",
-    bitcoindUser: "bitcoinrpc",
-    bitcoindZmqBlock: "tcp://34.84.252.57:28332",
-    bitcoindZmqRawTx: "tcp://34.84.252.57:28333",
     network: "testnet",
-    nostrRelays: ["wss://relay01.lnfi.network", "wss://relay02.lnfi.network"],
-    officialLndPeer: "02caa8ef3d3f2864451d90736ab6646d2aafdb664998dda545d5daa0c7d7fb4bad",
-    officialLndPeerHost: "34.84.252.57:9737",
-    officialNostrPubKey: "npub1me48869w43j30cfry9ayz9dsdl4gj54xppgk9krrv7g6hsq7psuqp3yusn",
-    officialRgbPeer: "03739b23a95f19ec03cea2e9dc2b498527f65e45fe4e68184cf845c893abb6ac38",
-    officialRgbPeerHost: "34.84.252.57:9736",
-    officialUniverseServer: "34.84.252.57:10009",
-    priceOracle: "grpc-oracle.lnfi.network",
-    rgbProxy: "rpc://34.84.252.57:3000/json-rpc",
   },
   mainnet: {
-    bitcoindIndex: "mainnet.lnfi.network:50001",
-    bitcoindPass: "lnfi_pass12GA",
-    bitcoindRpcHost: "mainnet.lnfi.network",
-    bitcoindRpcPort: "8332",
-    bitcoindUser: "lnfi_user",
-    bitcoindZmqBlock: "tcp://mainnet.lnfi.network:28334",
-    bitcoindZmqRawTx: "tcp://mainnet.lnfi.network:28335",
     network: "mainnet",
-    nostrRelays: ["wss://relay01.lnfi.network","wss://dev-relay.lnfi.network"],
-    officialLndPeer: "027d2f1be71dc24c60b15070489d4ef274dd6aac236d02c67c76d6935defba56a6",
-    officialLndPeerHost: "mainnet.lnfi.network:9735",
-    officialNostrPubKey: "npub1me48869w43j30cfry9ayz9dsdl4gj54xppgk9krrv7g6hsq7psuqp3yusn",
-    officialRgbPeer: "03b7153e278882e48e690acd0743305cbada86b131ab3388ccd782b45b02f064ef",
-    officialRgbPeerHost: "mainnet.lnfi.network:9736",
-    officialUniverseServer: "mainnet.lnfi.network:10009",
-    priceOracle: "grpc-oracle.lnfi.network",
-    rgbProxy: "rpc://mainnet.lnfi.network:5000/json-rpc",
   },
+};
+
+// Initialize networkConfigs with default values
+let networkConfigs = JSON.parse(JSON.stringify(defaultNetworkConfigs));
+
+// Fetch network configurations from API
+async function fetchNetworkConfigs() {
+  try {
+    const response = await fetch(
+      "https://dev-edge-api.unift.xyz/edge/nodeconfig/getList",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({}),
+      },
+    );
+
+    const result = await response.json();
+
+    if (result.code === "0" && result.data && Array.isArray(result.data)) {
+      const apiConfigs = {};
+
+      result.data.forEach((item) => {
+        if (!item.network) return;
+        const networkKey = item.network.toLowerCase();
+
+        apiConfigs[networkKey] = {
+          bitcoindIndex: item.rgbIndex,
+          bitcoindPass: item.bitcoindRpcPassword,
+          bitcoindRpcHost: item.bitcoindRpcHost,
+          bitcoindRpcPort: String(item.bitcoindRpcPort),
+          bitcoindUser: item.bitcoindRpcUser,
+          bitcoindZmqBlock: item.bitcoindZmqBlock,
+          bitcoindZmqRawTx: item.bitcoindZmqRawTx,
+          network: networkKey,
+          nostrRelays: item.nostrRelays ? [item.nostrRelays] : [],
+          officialLndPeer: item.lndPeerId,
+          officialLndPeerHost: item.lndPeerHost,
+          officialNostrPubKey: item.nostrPubkey,
+          officialRgbPeer: item.rgbPeerId,
+          officialRgbPeerHost: item.rgbPeerHost,
+          officialUniverseServer: item.lndUniverseServer,
+          priceOracle: item.lndPriceOracle,
+          rgbProxy: item.rgbProxy,
+        };
+      });
+
+      // Update global configs, strictly using API response if valid
+      if (Object.keys(apiConfigs).length > 0) {
+        networkConfigs = apiConfigs;
+        console.log("Network configs updated from API");
+      }
+    } else {
+      console.warn(
+        "API returned success but no data or invalid format, using default configs.",
+      );
+    }
+  } catch (error) {
+    console.error(
+      "Error fetching network configs, using default configs:",
+      error,
+    );
+  }
 }
 
 // Field display name mapping
 const fieldLabels = {
-  bitcoindIndex: "Bitcoind Index",
-  bitcoindPass: "Bitcoind Password",
+  // Bitcoin Config
   bitcoindRpcHost: "Bitcoind RPC Host",
-  bitcoindRpcPort: "Bitcoind RPC Port",
-  bitcoindUser: "Bitcoind User",
-  bitcoindZmqBlock: "Bitcoind ZMQ Block",
-  bitcoindZmqRawTx: "Bitcoind ZMQ Raw TX",
-  network: "Network",
-  nostrRelays: "Nostr Relays",
-  officialLndPeer: "Official LND Peer",
-  officialLndPeerHost: "Official LND Peer Host",
-  officialNostrPubKey: "Official Nostr PubKey",
-  officialRgbPeer: "Official RGB Peer",
-  officialRgbPeerHost: "Official RGB Peer Host",
-  officialUniverseServer: "Official Universe Server",
+  bitcoindRpcPort: "Port",
+  bitcoindUser: "User",
+  bitcoindPass: "Password",
+  bitcoindZmqBlock: "ZMQ Block",
+  bitcoindZmqRawTx: "ZMQ Raw TX",
+  // LND Config
+  officialLndPeer: "Peer ID",
+  officialLndPeerHost: "Peer Host",
+  officialUniverseServer: "Universe Server",
   priceOracle: "Price Oracle",
-  rgbProxy: "RGB Proxy",
-}
+  // RGB Config
+  officialRgbPeer: "Peer ID",
+  officialRgbPeerHost: "Peer Host",
+  rgbProxy: "Proxy",
+  bitcoindIndex: "Index",
+  // Nostr Config
+  officialNostrPubKey: "PubKey",
+  nostrRelays: "Relays",
+  network: "Network Type",
+  owner: "Owner Address",
+};
 
 // Show error modal
 function showErrorModal(message) {
-  const errorModalBody = document.getElementById("errorModalBody")
-  errorModalBody.textContent = message
+  const errorModalBody = document.getElementById("errorModalBody");
+  errorModalBody.textContent = message;
   if (typeof bootstrap !== "undefined") {
-    const errorModal = new bootstrap.Modal(document.getElementById("errorModal"))
-    errorModal.show()
-  }
-  else {
-    console.error("Error:", message)
+    const errorModal = new bootstrap.Modal(
+      document.getElementById("errorModal"),
+    );
+    errorModal.show();
+  } else {
+    console.error("Error:", message);
   }
 }
 
 // Show success modal
 function showSuccessModal(message) {
-  const successModalBody = document.getElementById("successModalBody")
-  successModalBody.textContent = message
+  const successModalBody = document.getElementById("successModalBody");
+  successModalBody.textContent = message;
   if (typeof bootstrap !== "undefined") {
-    const successModal = new bootstrap.Modal(document.getElementById("successModal"))
-    successModal.show()
-  }
-  else {
-    console.log("Success:", message)
+    const successModal = new bootstrap.Modal(
+      document.getElementById("successModal"),
+    );
+    successModal.show();
+  } else {
+    console.log("Success:", message);
   }
 }
 
 // Status determination function
 function getStatusClass(value) {
-  const strValue = String(value).toLowerCase()
-  if (strValue === "true" || strValue === "running" || strValue === "active" || strValue === "online") {
-    return { class: "status-success", icon: "fas fa-check-circle" }
+  const strValue = String(value).toLowerCase();
+  if (
+    strValue === "true" ||
+    strValue === "running" ||
+    strValue === "active" ||
+    strValue === "online"
+  ) {
+    return { class: "status-success", icon: "fas fa-check-circle" };
+  } else if (
+    strValue === "false" ||
+    strValue === "stopped" ||
+    strValue === "inactive" ||
+    strValue === "offline"
+  ) {
+    return { class: "status-error", icon: "fas fa-times-circle" };
+  } else if (strValue.includes("pending") || strValue.includes("waiting")) {
+    return { class: "status-warning", icon: "fas fa-clock" };
   }
-  else if (strValue === "false" || strValue === "stopped" || strValue === "inactive" || strValue === "offline") {
-    return { class: "status-error", icon: "fas fa-times-circle" }
-  }
-  else if (strValue.includes("pending") || strValue.includes("waiting")) {
-    return { class: "status-warning", icon: "fas fa-clock" }
-  }
-  return { class: "", icon: "fas fa-info-circle" }
+  return { class: "", icon: "fas fa-info-circle" };
 }
 
 // Get system information
-async function getInfo() {
-  const mainContent = document.getElementById("main-content")
+async function getInfo(showLoading = true) {
+  const mainContent = document.getElementById("main-content");
 
   // Show loading state
-  mainContent.innerHTML = "<div class=\"text-center\"><div class=\"loading\"></div>Loading information...</div>"
+  if (showLoading) {
+    mainContent.innerHTML =
+      '<div class="loading-container"><div class="loading"></div><div>Loading information...</div></div>';
+  }
 
   try {
-    const res = await fetch("/api/lnd/info").then(res => res.json())
+    const res = await fetch("/api/lnd/info").then((res) => res.json());
 
     if (res.code === 200) {
       if (res.data) {
-        const { owner, settings } = res.data
+        const { owner, settings } = res.data;
 
         // If both owner and settings exist, show configured view
         if (owner && settings) {
-          renderConfiguredView(res.data, settings)
+          renderConfiguredView(res.data, settings);
         }
         // If missing owner or settings, show configuration form
         else {
-          renderConfigurationForm(res.data)
+          // Fetch network configs only when needed for configuration
+          await fetchNetworkConfigs();
+
+          fetch("https://api.example.com/login", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: "Bearer your-token-here", // 可选
+            },
+            body: JSON.stringify({
+              username: "test",
+              password: "123456",
+            }),
+          });
+          renderConfigurationForm(res.data);
         }
       }
-    }
-    else if (res.code === 500 && res.message === "Please init the wallet or init owner first") {
+    } else if (
+      res.code === 500 &&
+      res.message === "Please init the wallet or init owner first"
+    ) {
+      // Fetch network configs only when needed for configuration
+      await fetchNetworkConfigs();
+
       // If wallet/owner not initialized, show configuration form
-      renderConfigurationForm({})
-    }
-    else {
-      mainContent.innerHTML = "<div class=\"alert alert-danger\"><i class=\"fas fa-exclamation-triangle\"></i> Failed to load information</div>"
+      renderConfigurationForm({});
+    } else {
+      mainContent.innerHTML =
+        '<div class="alert alert-danger"><i class="fas fa-exclamation-triangle"></i> Failed to load information</div>';
     }
-  }
-  catch (error) {
-    console.error("Failed to get info:", error)
-    mainContent.innerHTML = "<div class=\"alert alert-danger\"><i class=\"fas fa-exclamation-triangle\"></i> Network error occurred</div>"
+  } catch (error) {
+    console.error("Failed to get info:", error);
+    mainContent.innerHTML =
+      '<div class="alert alert-danger"><i class="fas fa-exclamation-triangle"></i> Network error occurred</div>';
   }
 }
 
-// Render configured view (when both owner and settings exist)
+// Render configured view
 function renderConfiguredView(basicData, settings) {
-  const mainContent = document.getElementById("main-content")
-  const networkType = settings.network || "regtest"
+  const mainContent = document.getElementById("main-content");
+
+  // Extract Node ID (Nostr PubKey)
+  const nodeId =
+    settings.officialNostrPubKey || basicData.officialNostrPubKey || "Unknown";
+
+  // Determine Service Status
+  // We check basicData for status indicators or default to design mocks if not present
+  // Assuming keys might exist, otherwise using placeholders for the design requirement
+  const rgbStatus = basicData.rgb || "Stopped"; // Mock/Default based on design
+  const litdStatus = basicData.litd || "Stopped"; // Mock/Default based on design
+
+  const isRgbRunning =
+    rgbStatus.toLowerCase() === "running" || rgbStatus === "true";
+  const isLitdRunning =
+    litdStatus.toLowerCase() === "running" || litdStatus === "true";
+
+  const rgbClass = isRgbRunning ? "running" : "stopped";
+  const litdClass = isLitdRunning ? "running" : "stopped";
+
+  const rgbText = isRgbRunning ? "Running" : "Stopped";
+  const litdText = isLitdRunning ? "Running" : "Stopped";
+
+  // Helper to shorten address in the middle
+  const shortenAddress = (address, chars = 10) => {
+    if (!address || address.length <= chars * 2) return address || "";
+    return `${address.substring(0, chars)}...${address.substring(address.length - chars)}`;
+  };
 
   const html = `
-    <!-- Basic Information Section -->
-    <div class="info-section">
-      <div class="info-title">
-        <i class="fas fa-server"></i>
-        System Information
+    <div class="header-logo text-center mb-5">
+       <img src="./img/logo.svg" alt="NodeFlow Logo" style="height: 110px;">
+    </div>
+    
+    <div class="welcome-container">
+      <h1 class="welcome-title">Welcome!</h1>
+      <p class="welcome-subtitle">Your nodes, managed effortlessly.</p>
+      
+      <div class="status-card">
+        <!-- Owner Address -->
+        <div class="read-only-input-group">
+          <label class="card-label">Owner Address</label>
+          <div class="input-container" style="position: relative;">
+            <div class="read-only-input" id="display-owner">${shortenAddress(basicData.owner || "")}</div>
+            <button class="copy-icon-btn" onclick="copyToClipboard('${basicData.owner || ""}', this)">
+               <i class="far fa-copy"></i>
+            </button>
+          </div>
+        </div>
+        
+        <!-- Node ID -->
+        <div class="read-only-input-group">
+          <label class="card-label">Node ID</label>
+          <div class="input-container" style="position: relative;">
+            <div class="read-only-input" id="display-node-id">${shortenAddress(nodeId)}</div>
+            <button class="copy-icon-btn" onclick="copyToClipboard('${nodeId}', this)">
+               <i class="far fa-copy"></i>
+            </button>
+          </div>
+        </div>
+        
+        <!-- Service Status -->
+        <div class="service-status-section">
+          <label class="card-label">Service Status</label>
+          <div class="status-grid">
+            <div class="status-box">
+               <div class="status-name">
+                 <span class="status-dot ${rgbClass}"></span> RGB
+               </div>
+               <span class="status-value ${rgbClass}">${rgbText}</span>
+            </div>
+            <div class="status-box">
+               <div class="status-name">
+                 <span class="status-dot ${litdClass}"></span> LITD
+               </div>
+               <span class="status-value ${litdClass}">${litdText}</span>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Footer -->
+        <div class="card-footer-row">
+           <div class="regtest-badge">${settings.network || "Regtest"}</div>
+           <button class="settings-icon-btn" onclick="openSettingsModal()">
+             <i class="fas fa-cog"></i>
+           </button>
+        </div>
       </div>
-      <ul class="list-group">
-        ${renderBasicInfoList(basicData)}
-      </ul>
+      
+      <button class="manage-btn" onclick="window.location.href='${basicData.manageUrl || "#"}'">
+        Manage My Node <i class="fas fa-arrow-right"></i>
+      </button>
     </div>
+    
+    <!-- Settings Modal Placeholder -->
+    <div id="settings-modal-container"></div>
+  `;
 
-    <!-- Advanced Configuration Section -->
-    <div class="info-section">
-      <div class="info-title">
-        <i class="fas fa-cogs"></i>
-        Configuration Settings
-        <span class="network-indicator network-${networkType}">${networkType}</span>
+  mainContent.innerHTML = html;
+
+  // Store data globally for modal use
+  window.currentSettings = settings;
+  window.currentBasicData = basicData;
+}
+
+// Open Settings Modal
+function openSettingsModal() {
+  const container = document.getElementById("settings-modal-container");
+  const settings = window.currentSettings || {};
+  const basicData = window.currentBasicData || {};
+
+  // Helper to create read-only field
+  const createField = (label, value, isPassword = false) => {
+    const type = isPassword ? "password" : "text";
+    const toggleHtml = isPassword
+      ? `<i class="far fa-eye password-toggle-icon" onclick="togglePasswordVisibility(this)"></i>`
+      : "";
+
+    return `
+      <div class="settings-field">
+        <label>${label}</label>
+        <div class="settings-input-group">
+          <input type="${type}" class="settings-input" value="${value || ""}" readonly>
+          ${toggleHtml}
+        </div>
+      </div>
+    `;
+  };
+
+  const modalHtml = `
+    <div class="settings-modal-overlay" onclick="closeSettingsModal(event)">
+      <div class="settings-modal" onclick="event.stopPropagation()">
+        <div class="settings-header">
+          <h3>Settings</h3>
+          <button class="close-modal-btn" onclick="closeSettingsModal()"><i class="fas fa-times"></i></button>
+        </div>
+        <div class="settings-content">
+          <!-- Node Information -->
+          <div class="settings-section-title">Node Information</div>
+          <div class="settings-grid">
+            ${createField("Owner Address", basicData.owner)}
+            ${createField("Node ID", settings.officialNostrPubKey || basicData.officialNostrPubKey)}
+            ${createField("Network Type", settings.network)}
+          </div>
+          
+          <!-- Bitcoin Core -->
+          <div class="settings-section-title">Bitcoin Core</div>
+          <div class="settings-grid">
+            ${createField("Bitcoind RPC Host", settings.bitcoindRpcHost)}
+            ${createField("Port", settings.bitcoindRpcPort)}
+            ${createField("User", settings.bitcoindUser)}
+            ${createField("Password", settings.bitcoindPass, true)}
+            ${createField("ZMQ Block", settings.bitcoindZmqBlock)}
+            ${createField("ZMQ Raw TX", settings.bitcoindZmqRawTx)}
+          </div>
+          
+          <!-- LND -->
+          <div class="settings-section-title">LND</div>
+          <div class="settings-grid">
+            ${createField("Peer ID", settings.officialLndPeer)}
+            ${createField("Peer Host", settings.officialLndPeerHost)}
+            ${createField("Universe Server", settings.officialUniverseServer)}
+            ${createField("Price Oracle", settings.priceOracle)}
+          </div>
+          
+           <!-- RGB -->
+          <div class="settings-section-title">RGB</div>
+          <div class="settings-grid">
+            ${createField("Peer ID", settings.officialRgbPeer)}
+            ${createField("Peer Host", settings.officialRgbPeerHost)}
+            ${createField("Proxy", settings.rgbProxy)}
+            ${createField("Index", settings.bitcoindIndex)}
+          </div>
+          
+          <!-- Nostr -->
+          <div class="settings-section-title">Nostr</div>
+          <div class="settings-grid">
+            ${createField("Nostr Relay", settings.nostrRelays)}
+            ${createField("Nostr Private Key", settings.officialNostrPubKey)}
+          </div>
+        </div>
       </div>
-      <ul class="list-group">
-        ${renderSettingsList(settings)}
-      </ul>
     </div>
-  `
+  `;
+
+  container.innerHTML = modalHtml;
+}
+
+// Close Settings Modal
+function closeSettingsModal(event) {
+  const container = document.getElementById("settings-modal-container");
+  container.innerHTML = "";
+}
+
+// Toggle Password Visibility
+function togglePasswordVisibility(icon) {
+  const input = icon.previousElementSibling;
+  if (input.type === "password") {
+    input.type = "text";
+    icon.classList.remove("fa-eye");
+    icon.classList.add("fa-eye-slash");
+  } else {
+    input.type = "password";
+    icon.classList.remove("fa-eye-slash");
+    icon.classList.add("fa-eye");
+  }
+}
 
-  mainContent.innerHTML = html
+// Copy to clipboard function
+function copyToClipboard(text, triggerElement) {
+  const showFeedback = () => {
+    if (triggerElement) {
+      const icon = triggerElement.querySelector("i");
+      if (icon) {
+        const originalClass = icon.className;
+        icon.className = "fas fa-check";
+
+        setTimeout(() => {
+          icon.className = originalClass;
+        }, 2000);
+      }
+    }
+  };
+
+  if (navigator.clipboard && window.isSecureContext) {
+    navigator.clipboard.writeText(text).then(
+      () => {
+        showFeedback();
+      },
+      (err) => {
+        console.error("Could not copy text: ", err);
+      },
+    );
+  } else {
+    const textArea = document.createElement("textarea");
+    textArea.value = text;
+    textArea.style.position = "fixed";
+    textArea.style.left = "-9999px";
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    try {
+      document.execCommand("copy");
+      showFeedback();
+    } catch (err) {
+      console.error("Fallback: Oops, unable to copy", err);
+    }
+    document.body.removeChild(textArea);
+  }
 }
 
 // Render configuration form (when owner or settings missing)
 function renderConfigurationForm(basicData) {
-  const mainContent = document.getElementById("main-content")
+  const mainContent = document.getElementById("main-content");
 
   const html = `
+    <div class="header-logo text-center mb-4">
+        <img src="img/logo.svg" alt="NodeFlow" height="110">
+    </div>
+
+    <h2 class="text-center text-white mb-2">Node Initial Configuration</h2>
+    <p class="text-center text-muted mb-5">You can start the node after viewing and saving the configuration details.</p>
+
     <div class="info-section">
-      <div class="info-title">
-        <i class="fas fa-cog"></i>
-        Initial Configuration
-      </div>
       <form class="needs-validation" novalidate id="configForm" autocomplete="off">
         <!-- Owner Configuration -->
         <div class="config-group">
-          <h6><i class="fas fa-user"></i> Owner Configuration</h6>
-          <div class="mb-3">
-            <label for="owner" class="form-label">Owner Address</label>
-            <input type="text" class="form-control" id="owner" name="owner" required
-                   placeholder="Enter owner address" value="${basicData?.owner || ""}">
-            <div class="valid-feedback">
-              <i class="fas fa-check"></i> Looks good!
-            </div>
-            <div class="invalid-feedback">
-              <i class="fas fa-times"></i> Please provide a valid owner address.
-            </div>
+          <label for="owner" class="form-label text-muted">Owner Address</label>
+          <div class="input-group">
+              <input type="text" class="form-control" id="owner" name="owner" required
+                     placeholder="Enter owner address" value="${basicData?.owner || ""}" readonly>
+              <span class="input-icon copy-btn" onclick="copyToClipboard(document.getElementById('owner').value, this)">
+                  <i class="far fa-copy"></i>
+              </span>
+          </div>
+          <div class="invalid-feedback">
+            Please provide a valid owner address.
           </div>
         </div>
 
         <!-- Network Configuration -->
-        <div class="config-group mt-3">
-          <h6><i class="fas fa-network-wired"></i> Network Configuration</h6>
-          <div class="mb-3">
-            <label for="network" class="form-label">Network Type</label>
-            <select class="form-select" id="network" name="network" required onchange="updateConfigFields()">
-              <option value="regtest">Regtest</option>
-              <option value="testnet">Testnet</option>
-              <option value="mainnet">Mainnet</option>
-            </select>
-            <div class="valid-feedback">
-              <i class="fas fa-check"></i> Network type selected!
-            </div>
-            <div class="invalid-feedback">
-              <i class="fas fa-times"></i> Please select network type.
-            </div>
+        <div class="config-group network-type mt-4">
+          <label class="form-label text-muted">Network Type</label>
+          <div class="network-selector d-flex gap-2">
+            <button type="button" class="btn btn-network active" data-value="regtest" onclick="selectNetwork('regtest')">Regtest</button>
+            <button type="button" class="btn btn-network" data-value="testnet" onclick="selectNetwork('testnet')">Testnet</button>
+            <button type="button" class="btn btn-network" data-value="mainnet" onclick="selectNetwork('mainnet')">Mainnet</button>
           </div>
+          <input type="hidden" id="network" name="network" value="regtest">
+        </div>
+
+        <!-- Advanced Toggle -->
+        <div class="mt-3 mb-3 d-flex align-items-center justify-content-between">
+            <a href="javascript:void(0)" class="advanced-toggle text-decoration-none text-lime" onclick="toggleAdvanced()">
+                Show Advanced Configuration <i class="fas fa-chevron-down" id="advanced-icon"></i>
+            </a>
+            <span id="mainnet-badge" class="customizable-badge" style="display: none;">Customizable parameters available.</span>
         </div>
 
         <!-- Dynamic Configuration Fields -->
-        <div id="config-fields-container"></div>
+        <div id="config-fields-container" style="display: none;"></div>
         
-        <div class="row mb-3 mt-4 d-flex justify-content-center">
-          <button type="submit" id="btn_config_submit" class="btn btn-primary" style="width:250px">
-            <i class="fas fa-save"></i> Save Complete Configuration
+        <div class="row mb-3 mt-4">
+          <button type="submit" id="btn_config_submit" class="btn btn-lime w-100 py-2 fw-bold">
+            Save and Continue
           </button>
         </div>
       </form>
     </div>
-  `
+  `;
 
-  mainContent.innerHTML = html
+  mainContent.innerHTML = html;
 
   // Initialize configuration fields
-  updateConfigFields()
+  updateConfigFields();
 }
 
+// Toggle Advanced Configuration
+window.toggleAdvanced = function () {
+  isAdvancedConfigVisible = !isAdvancedConfigVisible;
+  const container = document.getElementById("config-fields-container");
+  const icon = document.getElementById("advanced-icon");
+
+  if (isAdvancedConfigVisible) {
+    container.style.display = "block";
+    icon.classList.remove("fa-chevron-down");
+    icon.classList.add("fa-chevron-up");
+  } else {
+    container.style.display = "none";
+    icon.classList.remove("fa-chevron-up");
+    icon.classList.add("fa-chevron-down");
+  }
+};
+
+// Select Network
+window.selectNetwork = function (network) {
+  if (networkConfigs && !networkConfigs[network]) {
+    showErrorModal("This network is not supported");
+    return;
+  }
+  document.getElementById("network").value = network;
+
+  // Update active button state
+  document.querySelectorAll(".btn-network").forEach((btn) => {
+    if (btn.dataset.value === network) {
+      btn.classList.add("active");
+    } else {
+      btn.classList.remove("active");
+    }
+  });
+
+  // Toggle mainnet badge
+  const badge = document.getElementById("mainnet-badge");
+  if (badge) {
+    badge.style.display = network === "mainnet" ? "inline-block" : "none";
+  }
+
+  updateConfigFields();
+};
+
+window.copyToClipboard = copyToClipboard;
+
+window.togglePassword = function (id) {
+  const input = document.getElementById(id);
+  if (input.type === "password") {
+    input.type = "text";
+  } else {
+    input.type = "password";
+  }
+};
+
 // Render basic information list
 function renderBasicInfoList(data) {
-  let html = ""
-  const excludeKeys = ["settings"]
+  let html = "";
+  const excludeKeys = ["settings"];
 
   for (const key in data) {
-    if (excludeKeys.includes(key))
-      continue
+    if (excludeKeys.includes(key)) continue;
 
-    const value = data[key]
-    const status = getStatusClass(value)
+    const value = data[key];
+    const status = getStatusClass(value);
 
     let valueHtml = `<span class="info-value ${status.class}">
       <i class="${status.icon} status-icon"></i>${value}
-    </span>`
+    </span>`;
 
     if (key === "manageUrl") {
       valueHtml = `<span class="info-value">
-        <a href="${value}" class="info-link" target="_self">
+        <a href="#" class="info-link" onclick="this.innerHTML='<i class=\\'fas fa-spinner fa-spin status-icon\\'></i>Loading...';setTimeout(()=>{window.location.href='${value}';},100);return false;">
           <i class="fas fa-external-link-alt status-icon"></i>Click to manage
         </a>
-      </span>`
+      </span>`;
     }
 
     html += `
@@ -287,17 +629,19 @@ function renderBasicInfoList(data) {
         <div class="info-key">${key}:</div>
         <div class="info-value-container">${valueHtml}</div>
       </li>
-    `
+    `;
   }
-  return html
+  return html;
 }
 
 // Render settings list
 function renderSettingsList(settings) {
-  let html = ""
+  let html = "";
   for (const key in settings) {
-    const value = Array.isArray(settings[key]) ? settings[key].join(", ") : settings[key]
-    const label = fieldLabels[key] || key
+    const value = Array.isArray(settings[key])
+      ? settings[key].join(", ")
+      : settings[key];
+    const label = fieldLabels[key] || key;
 
     html += `
       <li class="list-group-item">
@@ -306,149 +650,191 @@ function renderSettingsList(settings) {
           <span class="info-value">${value}</span>
         </div>
       </li>
-    `
+    `;
   }
-  return html
+  return html;
 }
 
 // Update configuration fields
 function updateConfigFields() {
-  const networkSelect = document.getElementById("network")
-  const container = document.getElementById("config-fields-container")
+  const networkInput = document.getElementById("network");
+  const container = document.getElementById("config-fields-container");
 
-  if (!networkSelect || !container)
-    return
+  if (!networkInput || !container) return;
 
-  const selectedNetwork = networkSelect.value
-  const config = networkConfigs[selectedNetwork]
+  const selectedNetwork = networkInput.value;
+  const config = networkConfigs[selectedNetwork];
 
-  if (!config)
-    return
+  if (!config) return;
 
-  let fieldsHtml = "<div class=\"config-grid\">"
+  let fieldsHtml = "";
 
   // Group fields by category
   const groups = {
-    "Bitcoin Configuration": ["bitcoindRpcHost", "bitcoindRpcPort", "bitcoindUser", "bitcoindPass", "bitcoindIndex", "bitcoindZmqBlock", "bitcoindZmqRawTx"],
-    "LND Configuration": ["officialLndPeer", "officialLndPeerHost", "officialUniverseServer"],
-    "RGB Configuration": ["officialRgbPeer", "officialRgbPeerHost", "rgbProxy"],
-    "Nostr Configuration": ["officialNostrPubKey", "nostrRelays"],
-    "Other Configuration": ["priceOracle"],
+    "Bitcoin Config": [
+      "bitcoindRpcHost",
+      "bitcoindRpcPort",
+      "bitcoindUser",
+      "bitcoindPass",
+      "bitcoindZmqBlock",
+      "bitcoindZmqRawTx",
+    ],
+    "LND Config": [
+      "officialLndPeer",
+      "officialLndPeerHost",
+      "officialUniverseServer",
+      "priceOracle",
+    ],
+    "RGB Config": [
+      "officialRgbPeer",
+      "officialRgbPeerHost",
+      "rgbProxy",
+      "bitcoindIndex",
+    ],
+    "Nostr Config": ["officialNostrPubKey", "nostrRelays"],
+  };
+
+  // Define editable fields per network
+  let editableFields = [];
+  if (selectedNetwork === "regtest") {
+    editableFields = ["bitcoindPass"];
+  } else if (selectedNetwork === "mainnet") {
+    editableFields = [
+      "bitcoindRpcHost",
+      "bitcoindRpcPort",
+      "bitcoindUser",
+      "bitcoindPass",
+      "bitcoindZmqBlock",
+      "bitcoindZmqRawTx",
+      "rgbProxy",
+      "bitcoindIndex",
+    ];
+  } else if (selectedNetwork === "testnet") {
+    editableFields = ["bitcoindPass"];
   }
 
   for (const groupName in groups) {
-    fieldsHtml += `<div class="config-group">`
-    fieldsHtml += `<h6><i class="fas fa-cog"></i> ${groupName}</h6>`
+    fieldsHtml += `<div class="config-section mb-4">`;
+    fieldsHtml += `<h6 class="text-lime mb-3">${groupName}</h6>`;
+    fieldsHtml += `<div class="row g-3">`;
 
     groups[groupName].forEach((key) => {
       if (config[key] !== undefined) {
-        const label = fieldLabels[key] || key
-        const value = Array.isArray(config[key]) ? config[key].join(",") : config[key]
+        const label = fieldLabels[key] || key;
+        const value = Array.isArray(config[key])
+          ? config[key].join(",")
+          : config[key];
+
+        const isEditable = editableFields.includes(key);
+        const isPassword = key.toLowerCase().includes("pass");
+        const inputType = isPassword ? "password" : "text";
 
         fieldsHtml += `
-                    <div class="mb-3">
-                        <label for="${key}" class="form-label">${label}</label>
-                        <input type="text" class="form-control" id="${key}" name="${key}" 
-                               value="${value}" required>
-                        <div class="valid-feedback">
-                            <i class="fas fa-check"></i> Configuration correct!
-                        </div>
-                        <div class="invalid-feedback">
-                            <i class="fas fa-times"></i> Please enter ${label}.
-                        </div>
-                    </div>
-                `
+            <div class="col-md-4">
+                <label for="${key}" class="form-label text-muted small">${label}</label>
+                <div class="input-group">
+                    <input type="${inputType}" class="form-control" id="${key}" name="${key}" 
+                           value="${value}" ${isEditable ? "" : "readonly"}>
+                    ${
+                      isPassword && isEditable
+                        ? `
+                    <span class="input-icon toggle-password" onclick="togglePassword('${key}')">
+                        <i class="far fa-eye"></i>
+                    </span>
+                    `
+                        : ""
+                    }
+                </div>
+            </div>
+        `;
       }
-    })
+    });
 
-    fieldsHtml += `</div>`
+    fieldsHtml += `</div></div>`;
   }
 
-  fieldsHtml += "</div>"
-  container.innerHTML = fieldsHtml
+  container.innerHTML = fieldsHtml;
 }
 
 // Handle configuration form submission
 async function handleConfigFormSubmit(event) {
-  event.preventDefault()
-  const form = document.getElementById("configForm")
-  const submitBtn = document.getElementById("btn_config_submit")
+  event.preventDefault();
+  const form = document.getElementById("configForm");
+  const submitBtn = document.getElementById("btn_config_submit");
 
   if (!form.checkValidity()) {
-    event.stopPropagation()
-    form.classList.add("was-validated")
-    return
+    event.stopPropagation();
+    form.classList.add("was-validated");
+    return;
   }
 
-  form.classList.add("was-validated")
-  submitBtn.setAttribute("disabled", "disabled")
-  submitBtn.innerHTML = "<div class=\"loading\"></div>Saving..."
-
-  const formData = new FormData(form)
-  const myHeaders = new Headers()
-  myHeaders.append("Content-Type", "application/json")
-
+  form.classList.add("was-validated");
+  submitBtn.setAttribute("disabled", "disabled");
+  // Use the new loading spinner style
+  submitBtn.innerHTML = '<div class="loading"></div>Save and Continue';
+  const formData = new FormData(form);
+  const myHeaders = new Headers();
+  myHeaders.append("Content-Type", "application/json");
   // Extract owner
-  const owner = formData.get("owner")
+  const owner = formData.get("owner");
 
   // Build settings object (exclude owner)
-  const settings = {}
+  const settings = {};
   for (const [key, value] of formData.entries()) {
-    if (key === "owner")
-      continue
+    if (key === "owner") continue;
 
     if (key === "nostrRelays") {
       // Handle comma-separated array
-      settings[key] = value.split(",").map(item => item.trim()).filter(item => item)
-    }
-    else {
       settings[key] = value
+        .split(",")
+        .map((item) => item.trim())
+        .filter((item) => item);
+    } else {
+      settings[key] = value;
     }
   }
 
   const raw = JSON.stringify({
     owner,
     settings,
-  })
+  });
 
   const requestOptions = {
     method: "POST",
     headers: myHeaders,
     body: raw,
     redirect: "follow",
-  }
+  };
 
   try {
-    const response = await fetch("/api/lnd/init", requestOptions)
-    const result = await response.json()
+    const response = await fetch("/api/lnd/init", requestOptions);
+    const result = await response.json();
 
     if (result.code === 200) {
-      await getInfo()
-      showSuccessModal("Complete configuration saved successfully!")
-    }
-    else {
-      showErrorModal(result.message || "Configuration failed")
+      await getInfo(false);
+      showSuccessModal("Complete configuration saved successfully!");
+    } else {
+      showErrorModal(result.message || "Configuration failed");
     }
-  }
-  catch (error) {
-    console.error("Network error:", error)
-    showErrorModal("Network error occurred")
-  }
-  finally {
-    submitBtn.removeAttribute("disabled")
-    submitBtn.innerHTML = "<i class=\"fas fa-save\"></i> Save Complete Configuration"
+  } catch (error) {
+    console.error("Network error:", error);
+    showErrorModal("Network error occurred");
+  } finally {
+    submitBtn.removeAttribute("disabled");
+    submitBtn.innerHTML =
+      '<i class="fas fa-save"></i> Save Complete Configuration';
   }
 }
 
 // Page initialization
 document.addEventListener("DOMContentLoaded", async () => {
   // Get information
-  await getInfo()
+  await getInfo();
 
   // Bind form submission events (using event delegation)
   document.addEventListener("submit", (event) => {
     if (event.target.id === "configForm") {
-      handleConfigFormSubmit(event)
+      handleConfigFormSubmit(event);
     }
-  })
-})
+  });
+});