From 970f8113c495688aee47a3bce1eaebe067547c52 Mon Sep 17 00:00:00 2001 From: Martin Stefcek <35243812+Cifko@users.noreply.github.com> Date: Wed, 24 Nov 2021 09:08:08 +0100 Subject: [PATCH] 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) --- applications/tari_explorer/app.js | 129 +++++++++++-------- applications/tari_explorer/routes/mempool.js | 19 +++ applications/tari_explorer/views/index.hbs | 2 +- applications/tari_explorer/views/mempool.hbs | 100 ++++++++++++++ 4 files changed, 193 insertions(+), 57 deletions(-) create mode 100644 applications/tari_explorer/routes/mempool.js create mode 100644 applications/tari_explorer/views/mempool.hbs diff --git a/applications/tari_explorer/app.js b/applications/tari_explorer/app.js index 9007a468f3..0a71eaebdf 100644 --- 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 new file mode 100644 index 0000000000..e512055840 --- /dev/null +++ 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 index 4ee0a5bef1..0b1e07ec48 100644 --- a/applications/tari_explorer/views/index.hbs +++ b/applications/tari_explorer/views/index.hbs @@ -136,7 +136,7 @@ {{#each mempool}} {{#with this.transaction.body}} - {{#each this.kernels}}{{hex this.excess_sig.signature}}{{/each}} + {{#each this.kernels}}{{hex this.excess_sig.signature}}{{/each}} {{this.total_fees}} {{this.outputs.length}} {{this.kernels.length}} diff --git a/applications/tari_explorer/views/mempool.hbs b/applications/tari_explorer/views/mempool.hbs new file mode 100644 index 0000000000..71bea60c43 --- /dev/null +++ b/applications/tari_explorer/views/mempool.hbs @@ -0,0 +1,100 @@ +Back +

Inputs

+ + + + + + + + + + + + + + {{#each this.inputs}} + + + + + + + + + + {{/each}} + +
FeaturesCommitmentHashScriptInput DataScript SignatureSender Offset Public Key
Flags
+ {{features.flags}}
Maturity
+ {{features.maturity}}		{{hex commitment}}{{hex hash}}{{hex script}}{{hex input_data}}Public Nonce Commitment
+ {{hex script_signature.public_nonce_commitment}}
Signature U
+ {{hex script_signature.signature_u}}
Signature V
+ {{hex script_signature.signature_v}}		{{hex sender_offset_public_key}}
+ +
+

Outputs

+ + + + + + + + + + + + + + {{#each this.outputs}} + + + + + + + + + + {{/each}} + +
FeaturesCommitmentRange ProofHashScriptSender Offset Public KeyMetadata Signature
Flags
+ {{features.flags}}
Maturity
+ {{features.maturity}}		{{hex commitment}}{{hex + range_proof + }}{{hex hash}}{{hex script}}{{hex sender_offset_public_key}}Public Nonce Commitment
+ {{hex metadata_signature.public_nonce_commitment}}
Signature U
+ {{hex metadata_signature.signature_u}}
Signature V
+ {{hex metadata_signature.signature_v}}
+ +
+

Kernels

+ + + + + + + + + + + + + {{#each this.kernels}} + + + + + + + + + {{/each}} + +
FeaturesFeeLock HeightExcessExcess SignatureHash
{{features}}{{fee}}{{lock_height}}{{hex excess}}Nonce + {{hex excess_sig.public_nonce}}
Sig + {{hex excess_sig.signature}}		{{hex hash}}
\ No newline at end of file