fix: text explorer show sha-3 correctly + minor fixes (#3779)

Description
---

- change tari_explorer `.prettierrc` to match other packages in the repo, this meant a big formatting change, but it's a separate commit for ease of review 
- fix the display of SHA-3 blocks pow algo
- some styling improvements + basic dark mode 
- adds the block header info to the block view 
- check for valid prev/next blocks to display navigation between blocks

applications/launchpad/gui-vue/.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
-/dist
+dist/*
+!dist/.gitkeep
 
 
 # local env files

applications/tari_explorer/.prettierrc

@@ -1,4 +1,3 @@
 {
-  "endOfLine": "auto",
-  "semi": false
+  "endOfLine": "auto"
 }

applications/tari_explorer/app.js

@@ -1,35 +1,34 @@
-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 mempoolRouter = require("./routes/mempool")
-var searchRouter = require("./routes/search")
-
-var assetsRouter = require('./routes/assets');
-var validatorRouter = require('./routes/validator');
-
-var hbs = require("hbs")
+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 mempoolRouter = require("./routes/mempool");
+var searchRouter = require("./routes/search");
+
+var assetsRouter = require("./routes/assets");
+var validatorRouter = require("./routes/validator");
+
+var hbs = require("hbs");
 hbs.registerHelper("hex", function (buffer) {
-  return buffer ? Buffer.from(buffer).toString("hex") : ""
-})
+  return buffer ? Buffer.from(buffer).toString("hex") : "";
+});
 hbs.registerHelper("json", function (obj) {
-  return Buffer.from(JSON.stringify(obj)).toString("base64")
-})
+  return Buffer.from(JSON.stringify(obj)).toString("base64");
+});
 
 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()
+  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() +
@@ -43,68 +42,68 @@ hbs.registerHelper("timestamp", function (timestamp) {
     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) + "% "
-})
+  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) {
   if (data.length > 0) {
     return asciichart.plot(data, {
       height: height,
-    })
+    });
   } else {
-    return "**No data**"
+    return "**No data**";
   }
-})
+});
 
-hbs.registerHelper('json', function(obj) {
+hbs.registerHelper("json", function (obj) {
   return JSON.stringify(obj);
-})
+});
 
-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(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(cookieParser());
+app.use(express.static(path.join(__dirname, "public")));
 
-app.use('/', indexRouter);
-app.use('/blocks', blocksRouter);
-app.use('/assets', assetsRouter);
-app.use('/validator', validatorRouter);
-app.use("/mempool", mempoolRouter)
-app.use("/search", searchRouter)
+app.use("/", indexRouter);
+app.use("/blocks", blocksRouter);
+app.use("/assets", assetsRouter);
+app.use("/validator", validatorRouter);
+app.use("/mempool", mempoolRouter);
+app.use("/search", searchRouter);
 
 // 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) {
   // 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;

applications/tari_explorer/baseNodeClient.js

@@ -1,9 +1,9 @@
-var { Client } = require("base-node-grpc-client")
+var { Client } = require("base-node-grpc-client");
 
 function createClient() {
-  return Client.connect("localhost:18142")
+  return Client.connect("localhost:18142");
 }
 
 module.exports = {
   createClient,
-}
+};

applications/tari_explorer/bin/www

@@ -4,76 +4,74 @@
  * Module dependencies.
  */
 
-var app = require('../app');
-var debug = require('debug')('tari-explorer:server');
-var http = require('http');
+var app = require("../app")
+var debug = require("debug")("tari-explorer:server")
+var http = require("http")
 
 /**
  * Get port from environment and store in Express.
  */
 
-var port = normalizePort(process.env.PORT || '4000');
-app.set('port', port);
+var port = normalizePort(process.env.PORT || "4000")
+app.set("port", port)
 
 /**
  * Create HTTP server.
  */
 
-var server = http.createServer(app);
+var server = http.createServer(app)
 
 /**
  * Listen on provided port, on all network interfaces.
  */
 
-server.listen(port);
-server.on('error', onError);
-server.on('listening', onListening);
+server.listen(port)
+server.on("error", onError)
+server.on("listening", onListening)
 
 /**
  * Normalize a port into a number, string, or false.
  */
 
 function normalizePort(val) {
-  var port = parseInt(val, 10);
+  var port = parseInt(val, 10)
 
   if (isNaN(port)) {
     // named pipe
-    return val;
+    return val
   }
 
   if (port >= 0) {
     // port number
-    return port;
+    return port
   }
 
-  return false;
+  return false
 }
 
 /**
  * Event listener for HTTP server "error" event.
  */
 
 function onError(error) {
-  if (error.syscall !== 'listen') {
-    throw error;
+  if (error.syscall !== "listen") {
+    throw error
   }
 
-  var bind = typeof port === 'string'
-    ? 'Pipe ' + port
-    : 'Port ' + port;
+  var bind = typeof port === "string" ? "Pipe " + port : "Port " + port
 
   // handle specific listen errors with friendly messages
   switch (error.code) {
-    case 'EACCES':
-      console.error(bind + ' requires elevated privileges');
-      process.exit(1);
-      break;
-    case 'EADDRINUSE':
-      console.error(bind + ' is already in use');
-      process.exit(1);
-      break;
+    case "EACCES":
+      console.error(bind + " requires elevated privileges")
+      process.exit(1)
+      break
+    case "EADDRINUSE":
+      console.error(bind + " is already in use")
+      process.exit(1)
+      break
     default:
-      throw error;
+      throw error
   }
 }
 
@@ -82,9 +80,9 @@ function onError(error) {
  */
 
 function onListening() {
-  var addr = server.address();
-  var bind = typeof addr === 'string'
-    ? 'pipe ' + addr
-    : 'port ' + addr.port;
-  debug('Listening on ' + bind);
+  var addr = server.address()
+  console.log("Address: ", addr)
+  var bind = typeof addr === "string" ? "pipe " + addr : "port " + addr.port
+  debug("Listening on " + bind)
+  console.log("Listening on " + bind)
 }

applications/tari_explorer/routes/assets.js

@@ -20,40 +20,40 @@
 // WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE
 // USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-var { createClient: createBaseNodeClient } = require('../baseNodeClient')
+var { createClient: createBaseNodeClient } = require("../baseNodeClient");
 
-var express = require('express')
-var router = express.Router()
+var express = require("express");
+var router = express.Router();
 
 /* GET home page. */
-router.get('/:asset_public_key', async function (req, res, next) {
-  let baseNodeClient = createBaseNodeClient()
+router.get("/:asset_public_key", async function (req, res) {
+  let baseNodeClient = createBaseNodeClient();
   // let validatorNodeClient = createValidatorNodeClient()
-  let asset_public_key = req.params.asset_public_key
+  let asset_public_key = req.params.asset_public_key;
 
   try {
-    let tokens = await baseNodeClient.getTokens({ asset_public_key:  Buffer.from(asset_public_key, "hex") })
-    console.log(tokens)
+    let tokens = await baseNodeClient.getTokens({
+      asset_public_key: Buffer.from(asset_public_key, "hex"),
+    });
+    console.log(tokens);
 
     if (!tokens || tokens.length === 0) {
       res.status(404);
-      res.render('404', { message: `No tokens for asset found`});
+      res.render("404", { message: `No tokens for asset found` });
       return;
     }
 
     // let headers = validatorNodeClient.listHeaders({ from_height: 0, num_headers: 101 })
 
-    res.render('assets', {
+    res.render("assets", {
       title: `Asset with pub key: ${asset_public_key}`,
       tokens: tokens,
       // headers
-    })
-
-
+    });
   } catch (error) {
-    res.status(500)
-    res.render('error', { error: error })
+    res.status(500);
+    res.render("error", { error: error });
   }
-})
+});
 
-module.exports = router
+module.exports = router;