feat: add page for detailed mempool in explorer (#3613)

Description --- Add mempool TX detailed view. I've run prettier on the source that I've edited. How Has This Been Tested? --- Manually. ![image](https://user-images.githubusercontent.com/35243812/143129920-b7882bd1-3058-4c19-8324-ff04ff898879.png)
tari-project · Nov 24, 2021 · 970f811 · 970f811
1 parent a632e5b
commit 970f811
Show file tree

Hide file tree

Showing 4 changed files with 193 additions and 57 deletions.
diff --git a/applications/tari_explorer/app.js b/applications/tari_explorer/app.js
@@ -1,77 +1,94 @@
-const createError = require('http-errors')
-const express = require('express')
-const path = require('path')
-const cookieParser = require('cookie-parser')
-const logger = require('morgan')
-const asciichart = require('asciichart')
+const createError = require("http-errors");
+const express = require("express");
+const path = require("path");
+const cookieParser = require("cookie-parser");
+const logger = require("morgan");
+const asciichart = require("asciichart");
 
-var indexRouter = require('./routes/index')
-var blocksRouter = require('./routes/blocks')
+var indexRouter = require("./routes/index");
+var blocksRouter = require("./routes/blocks");
+var mempoolRouter = require("./routes/mempool");
 
-var hbs = require('hbs')
-hbs.registerHelper('hex', function (buffer) {
+var hbs = require("hbs");
+hbs.registerHelper("hex", function (buffer) {
+  return buffer ? Buffer.from(buffer).toString("hex") : "";
+});
+hbs.registerHelper("json", function (obj) {
+  return Buffer.from(JSON.stringify(obj)).toString("base64");
+});
 
-  return buffer ? buffer.toString('hex') : ''
-})
+hbs.registerHelper("timestamp", function (timestamp) {
+  var dateObj = new Date(timestamp.seconds * 1000);
+  const day = dateObj.getUTCDate();
+  const month = dateObj.getUTCMonth() + 1;
+  const year = dateObj.getUTCFullYear();
+  const hours = dateObj.getUTCHours();
+  const minutes = dateObj.getUTCMinutes();
+  const seconds = dateObj.getSeconds();
 
-hbs.registerHelper('timestamp', function (timestamp) {
-  var dateObj = new Date(timestamp.seconds * 1000)
-  const day = dateObj.getUTCDate()
-  const month = dateObj.getUTCMonth() + 1
-  const year = dateObj.getUTCFullYear()
-  const hours = dateObj.getUTCHours()
-  const minutes = dateObj.getUTCMinutes()
-  const seconds = dateObj.getSeconds()
+  return (
+    year.toString() +
+    "-" +
+    month.toString().padStart(2, "0") +
+    "-" +
+    day.toString().padStart(2, "0") +
+    " " +
+    hours.toString().padStart(2, "0") +
+    ":" +
+    minutes.toString().padStart(2, "0") +
+    ":" +
+    seconds.toString().padStart(2, "0")
+  );
+});
 
-  return year.toString() + '-' +
-    month.toString().padStart(2, '0') + '-' +
-    day.toString().padStart(2, '0') + ' ' +
-    hours.toString().padStart(2, '0') + ':' +
-    minutes.toString().padStart(2, '0') + ':' +
-    seconds.toString().padStart(2, '0')
-})
+hbs.registerHelper("percentbar", function (a, b) {
+  var percent = (a / (a + b)) * 100;
+  var barWidth = percent / 10;
+  var bar = "**********".slice(0, barWidth);
+  var space = "...........".slice(0, 10 - barWidth);
+  return bar + space + " " + parseInt(percent) + "% ";
+});
 
-hbs.registerHelper('percentbar', function (a, b) {
-  var percent = a / (a + b) * 100
-  var barWidth = percent / 10
-  var bar = '**********'.slice(0, barWidth)
-  var space = '...........'.slice(0, 10 - barWidth)
-  return bar + space + ' ' + parseInt(percent) + '% '
-})
+hbs.registerHelper("chart", function (data, height) {
+  return asciichart.plot(data, {
+    height: height,
+  });
+});
 
-hbs.registerHelper('chart', function(data, height) {
-  return asciichart.plot(data, {height: height})
-})
-
-var app = express()
+var app = express();
 
 // view engine setup
-app.set('views', path.join(__dirname, 'views'))
-app.set('view engine', 'hbs')
+app.set("views", path.join(__dirname, "views"));
+app.set("view engine", "hbs");
 
-app.use(logger('dev'))
-app.use(express.json())
-app.use(express.urlencoded({ extended: false }))
-app.use(cookieParser())
-app.use(express.static(path.join(__dirname, 'public')))
+app.use(logger("dev"));
+app.use(express.json());
+app.use(
+  express.urlencoded({
+    extended: false,
+  })
+);
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, "public")));
 
-app.use('/', indexRouter)
-app.use('/blocks', blocksRouter)
+app.use("/", indexRouter);
+app.use("/blocks", blocksRouter);
+app.use("/mempool", mempoolRouter);
 
 // catch 404 and forward to error handler
 app.use(function (req, res, next) {
-  next(createError(404))
-})
+  next(createError(404));
+});
 
 // error handler
 app.use(function (err, req, res, next) {
   // set locals, only providing error in development
-  res.locals.message = err.message
-  res.locals.error = req.app.get('env') === 'development' ? err : {}
+  res.locals.message = err.message;
+  res.locals.error = req.app.get("env") === "development" ? err : {};
 
   // render the error page
-  res.status(err.status || 500)
-  res.render('error')
-})
+  res.status(err.status || 500);
+  res.render("error");
+});
 
-module.exports = app
+module.exports = app;
diff --git a/applications/tari_explorer/routes/mempool.js b/applications/tari_explorer/routes/mempool.js
@@ -0,0 +1,19 @@
+var { createClient } = require("../baseNodeClient");
+
+var express = require("express");
+var router = express.Router();
+
+/* GET mempool page. */
+router.get("/:tx", async function (req, res, next) {
+  let tx = JSON.parse(Buffer.from(req.params.tx, "base64"));
+  console.log("========== stringify 2 ========");
+  console.log(tx.inputs);
+  console.log("===============");
+  res.render("Mempool", {
+    inputs: tx.inputs,
+    outputs: tx.outputs,
+    kernels: tx.kernels,
+  });
+});
+
+module.exports = router;
diff --git a/applications/tari_explorer/views/index.hbs b/applications/tari_explorer/views/index.hbs
@@ -136,7 +136,7 @@
     {{#each mempool}}
         {{#with this.transaction.body}}
             <tr>
-                <td>{{#each this.kernels}}<span>{{hex this.excess_sig.signature}}</span>{{/each}}</td>
+                <td><a href="/mempool/{{json this}}">{{#each this.kernels}}<span>{{hex this.excess_sig.signature}}</span>{{/each}}</a></td>
                 <td>{{this.total_fees}}</td>
                 <td>{{this.outputs.length}}</td>
                 <td>{{this.kernels.length}}</td>

diff --git a/applications/tari_explorer/views/mempool.hbs b/applications/tari_explorer/views/mempool.hbs
@@ -0,0 +1,100 @@
+<a href="/">Back</a>
+<h3>Inputs</h3>
+<table border="1" width="100%" cellpadding="5" bordercolor="#EFEFEF">
+  <thead>
+    <tr>
+      <th>Features</th>
+      <th>Commitment</th>
+      <th>Hash</th>
+      <th>Script</th>
+      <th>Input Data</th>
+      <th>Script Signature</th>
+      <th>Sender Offset Public Key</th>
+    </tr>
+  </thead>
+  <tbody>
+    {{#each this.inputs}}
+      <tr>
+        <td><i>Flags</i><br />
+          {{features.flags}}<hr /><i>Maturity</i><br />
+          {{features.maturity}}</td>
+        <td>{{hex commitment}}</td>
+        <td>{{hex hash}}</td>
+        <td>{{hex script}}</td>
+        <td>{{hex input_data}}</td>
+        <td><i>Public Nonce Commitment</i><br />
+          {{hex script_signature.public_nonce_commitment}}<hr /><i>Signature U</i><br
+          />
+          {{hex script_signature.signature_u}}<hr /><i>Signature V</i><br />
+          {{hex script_signature.signature_v}}</td>
+        <td>{{hex sender_offset_public_key}}</td>
+      </tr>
+    {{/each}}
+  </tbody>
+</table>
+
+<br />
+<h3>Outputs</h3>
+<table border="1" width="100%" cellpadding="5" bordercolor="#EFEFEF">
+  <thead>
+    <tr>
+      <th>Features</th>
+      <th>Commitment</th>
+      <th>Range Proof</th>
+      <th>Hash</th>
+      <th>Script</th>
+      <th>Sender Offset Public Key</th>
+      <th>Metadata Signature</th>
+    </tr>
+  </thead>
+  <tbody>
+    {{#each this.outputs}}
+      <tr>
+        <td><i>Flags</i><br />
+          {{features.flags}}<hr /><i>Maturity</i><br />
+          {{features.maturity}}</td>
+        <td>{{hex commitment}}</td>
+        <td style="width:500px;display:block;word-break:break-all;">{{hex
+            range_proof
+          }}</td>
+        <td>{{hex hash}}</td>
+        <td>{{hex script}}</td>
+        <td>{{hex sender_offset_public_key}}</td>
+        <td><i>Public Nonce Commitment</i><br />
+          {{hex metadata_signature.public_nonce_commitment}}<hr /><i>Signature U</i><br
+          />
+          {{hex metadata_signature.signature_u}}<hr /><i>Signature V</i><br />
+          {{hex metadata_signature.signature_v}}</td>
+      </tr>
+    {{/each}}
+  </tbody>
+</table>
+
+<br />
+<h3>Kernels</h3>
+<table border="1" width="100%" cellpadding="5" bordercolor="#EFEFEF">
+  <thead>
+    <tr>
+      <th>Features</th>
+      <th>Fee</th>
+      <th>Lock Height</th>
+      <th>Excess</th>
+      <th>Excess Signature</th>
+      <th>Hash</th>
+    </tr>
+  </thead>
+  <tbody>
+    {{#each this.kernels}}
+      <tr>
+        <td>{{features}}</td>
+        <td>{{fee}}</td>
+        <td>{{lock_height}}</td>
+        <td>{{hex excess}}</td>
+        <td><i>Nonce</i>
+          {{hex excess_sig.public_nonce}}<hr /><i>Sig</i>
+          {{hex excess_sig.signature}}</td>
+        <td>{{hex hash}}</td>
+      </tr>
+    {{/each}}
+  </tbody>
+</table>