Explorer HTML v0.8.3: Add Atomic Swap list

explorer/htm/BeamExplorer.htm

@@ -827,14 +827,17 @@
     vertical-align: bottom;
     margin: 5px 10px 0px 0px;
   }
-  .nodeURL { /* General style for URLs */
+  .nodeURL { /* General style for node URLs */
     font-family: "Lucida Console", ui-monospace, monospace;
     font-size: 1.2rem;
     color: var(--color_node_url);
     text-align: left;
     white-space: nowrap;
     cursor: text;
   }
+  .dataTable .nodeURL { /* Special case of node URLs in tables */
+    color: unset;
+  }
   label.nodeURL { /* To show it's clickable */
     cursor: pointer;
   }
@@ -1896,6 +1899,8 @@ <h1 id="BeamTitle">Beam Smart Explorer <span id="Version">v0.8.3</span></h1>
             <span class="menuSeparator"> | </span>
             <span class="menuItem"><a href="?network=$network&type=contracts" title="List of currently deployed Smart Contracts">Smart Contracts</a></span>
             <span class="menuSeparator"> | </span>
+            <span class="menuItem"><a href="?network=$network&type=swap_offers" title="List of current Atomic Swap offers">Atomic Swaps</a></span>
+            <span class="menuSeparator"> | </span>
             <span class="menuItem"><a href="?network=$network&type=historical" title="List of special historical blocks">Historical blocks</a></span>
           </div>
           <div id="SearchArea">
@@ -2089,7 +2094,7 @@ <h2 id="Loading">Loading<span style="--t:1">.</span><span style="--t:2">.</span>
     let d = new Date(); // Get current local date and time
     const diff = (zone == 'local') ? d.getTimezoneOffset() : 0 ; // If needed, get difference between local time and UTC
     d = new Date((time - diff * 60) * 1000); // Get date object from miliseconds
-    const iso = d.toISOString(); // Convert to ISO format YYYY-MM-DDTHH:MM:SS.OOOZ 
+    const iso = d.toISOString(); // Convert to ISO format YYYY-MM-DDTHH:MM:SS.OOOZ
     const txt = g_IsPos ?
         iso.replace(/(.*)T(.*)\.([0-9]+)Z/, '$1 $2.$3') : // Convert to simple format YYYY-MM-DD HH:MM:SS.ZZZ
         iso.replace(/(.*)T(.*)\..*/,'$1 $2'); // Convert to simple format YYYY-MM-DD HH:MM:SS
@@ -2790,7 +2795,7 @@ <h2 class="title">About</h2>
         const peer = peers[i];
         text += '<tr>';
         text += MakeCellRA(i + 1);
-        text += MakeCell(peer.ip || (typeof peer === 'string' ? peer : String(peer)));
+        text += MakeCell(AddClass(peer.ip || (typeof peer === 'string' ? peer : String(peer)), "nodeURL"));
         text += '</tr>';
       }
     }
@@ -2799,6 +2804,38 @@ <h2 class="title">About</h2>
     SetContent(text);
   }
 
+  function DisplayAtomicSwaps() {
+    const jData = JSON.parse(this.responseText);
+
+    let text = '<h2 class="title">Atomic Swaps</h2>';
+    if (jData.length === 0) {
+      text += '<p class="aboutDisclaimer">There are currently no offers for Atomic Swaps.</p>';
+    } else {
+      text += MakeCollapsibleBegin('Offers (' + jData.length + ')');
+      text += '<div class="divSwapOffers">' + Obj2Html(jData) + '</div>';
+      text += MakeCollapsibleEnd();
+      text += MakeCollapsibleBegin('Totals');
+      text += '<div id="divSwapTotals"><p>Loading...</p></div>';
+      text += MakeCollapsibleEnd();
+    }
+
+    SetContent(text);
+
+    // Get Atomic Swap totals (new node request)
+    if (jData.length !== 0) {
+      const xmlhttp = new XMLHttpRequest();
+      xmlhttp.onload = DisplayAtomicSwapTotals;
+      xmlhttp.open('GET', urlPrefix + 'swap_totals' + '?exp_am=1');
+      xmlhttp.send();
+    }
+  }
+
+  function DisplayAtomicSwapTotals() { // Query node for Atomic Swap totals and display them in existing 'div'
+    const jData = JSON.parse(this.responseText);
+    let text = Obj2Html(jData);
+    document.getElementById('divSwapTotals').innerHTML = text;
+  }
+
   function DisplayHistoricalBlocks() {
     let text = `<h2 class="title">Special historical blocks in Beam's mainnet</h2>`;
     text += `<table class="dataTable tableHistoricalBlocks" border="1" cellspacing="0">
@@ -3206,15 +3243,14 @@ <h2 class="title">About</h2>
       g_height = 0;
       urlSuffix += '&height=' + g_height;
       xmlhttp.onload = DisplayBlock;
-    }
+
     // Option to query and display the details of multiple blocks (NOT USED HERE)
-    // else if (g_type == 'blocks') // Arguments for 'blocks': height, n
-    // {
-    //   if (!g_n) { g_n = 5 }
-    //   urlSuffix += '&height=' + g_height + '&n=' + g_n;
-    //   xmlhttp.onload = DisplayBlocks; // Display function to be done...
-    // }
-    else if (g_type == 'contract') { // Arguments for 'contract': id, hMin, hMax, nMaxTxs
+    //} else if (g_type == 'blocks') { // Arguments for 'blocks': height, n
+    //  if (!g_n) { g_n = 5 }
+    //  urlSuffix += '&height=' + g_height + '&n=' + g_n;
+    //  xmlhttp.onload = DisplayBlocks; // Display function to be done...
+
+    } else if (g_type == 'contract') { // Arguments for 'contract': id, hMin, hMax, nMaxTxs
       urlSuffix += '&id=' + g_id + '&nMaxTxs=' + g_nMaxTxs;
       if (g_hMin) { urlSuffix += '&hMin=' + g_hMin }
       if (g_hMax) { urlSuffix += '&hMax=' + g_hMax }
@@ -3237,6 +3273,10 @@ <h2 class="title">About</h2>
     } else if (g_type == 'peers') { // Arguments for 'peers': (none)
       xmlhttp.onload = DisplayPeers;
 
+    } else if (g_type == 'swap_offers') { // Arguments for 'swap_offers': (none)
+      xmlhttp.onload = DisplayAtomicSwaps;
+    // Remark: The query for 'swap_totals' is made from within the 'DisplayAtomicSwaps' function.
+
     } else {
       g_type = 'status'; // Arguments for 'status': (none)
       xmlhttp.onload = DisplayStatus;