Fix #19

- Support for displaying all currency values in your unit of choice
- Header menu for changing user settings (currency unit, and display width currently)

app.js

@@ -78,6 +78,37 @@ app.use(function(req, res, next) {
 	res.locals.genesisBlockHash = rpcApi.getGenesisBlockHash();
 	res.locals.genesisCoinbaseTransactionId = rpcApi.getGenesisCoinbaseTransactionId();
 
+
+	// currency format type
+	if (!req.session.currencyFormatType) {
+		var cookieValue = req.cookies['user-setting-currencyFormatType'];
+
+		if (cookieValue) {
+			req.session.currencyFormatType = cookieValue;
+
+		} else {
+			req.session.currencyFormatType = "";
+		}
+	}
+
+	res.locals.currencyFormatType = req.session.currencyFormatType;
+
+
+	// display width
+	if (!req.session.displayWidth) {
+		var cookieValue = req.cookies['user-setting-displayWidth'];
+
+		if (cookieValue) {
+			req.session.displayWidth = cookieValue;
+			
+		} else {
+			req.session.displayWidth = "container";
+		}
+	}
+
+	res.locals.displayWidth = req.session.displayWidth;
+
+
 	if (!["/", "/connect"].includes(req.originalUrl)) {
 		if (utils.redirectToConnectPageIfNeeded(req, res)) {
 			return;

app/utils.js

@@ -99,6 +99,21 @@ function formatBytes(bytesInt) {
 	return bytesInt + " B";
 }
 
+function formatBtcAmount(amountBtc, formatType) {
+	if (formatType == "btc" || formatType == "") {
+		return amountBtc + " " + formatType;
+
+	} else if (formatType == "mbtc") {
+		return (amountBtc * 1000.0).toLocaleString() + " " + formatType;
+
+	} else if (formatType == "ubtc") {
+		return (amountBtc * 1000000.0).toLocaleString() + " " + formatType;
+
+	} else if (formatType == "bits") {
+		return (amountBtc * 1000000.0).toLocaleString() + " " + formatType;
+	}
+}
+
 
 module.exports = {
 	doSmartRedirect: doSmartRedirect,
@@ -107,5 +122,6 @@ module.exports = {
 	getBlockReward: getBlockReward,
 	splitArrayIntoChunks: splitArrayIntoChunks,
 	getRandomString: getRandomString,
-	formatBytes: formatBytes
+	formatBytes: formatBytes,
+	formatBtcAmount: formatBtcAmount
 };

routes/baseActionsRouter.js

@@ -159,6 +159,16 @@ router.get("/disconnect", function(req, res) {
 	res.redirect("/");
 });
 
+router.get("/changeSetting", function(req, res) {
+	if (req.query.name) {
+		req.session[req.query.name] = req.query.value;
+
+		res.cookie('user-setting-' + req.query.name, req.query.value);
+	}
+
+	res.redirect(req.headers.referer);
+});
+
 router.get("/blocks", function(req, res) {
 	var limit = 20;
 	var offset = 0;

views/includes/block-content.pug

@@ -139,8 +139,8 @@ div(class="tab-content")
 												th 1
 												td
 													span(class="tag monospace") coinbase
-													span(class="monospace")  Newly minted BTC
+													span(class="monospace")  Newly minted coins
-												td(class="monospace") #{utils.getBlockReward(result.getblock.height)}
+												td(class="monospace") #{utils.formatBtcAmount(utils.getBlockReward(result.getblock.height), currencyFormatType)}
 
 										each txInput, txInputIndex in result.txInputsByTransaction[tx.txid]
 											if (txInput)
@@ -159,7 +159,7 @@ div(class="tab-content")
 													td
 														if (vout.value)
 															- totalInputValue = totalInputValue.plus(new Decimal(vout.value));
-															span(class="monospace") #{vout.value}
+															span(class="monospace") #{utils.formatBtcAmount(vout.value, currencyFormatType)}
 
 										- var coinbaseCount = tx.vin[0].coinbase ? 1 : 0;
 										if ((tx.vin.length - coinbaseCount) > result.txInputsByTransaction[tx.txid].length)
@@ -173,7 +173,7 @@ div(class="tab-content")
 												td
 												td
 												td
-													strong(class="monospace") #{totalInputValue}
+													strong(class="monospace") #{utils.formatBtcAmount(totalInputValue, currencyFormatType)}
 									
 
 							div(class="col-md-6")
@@ -204,14 +204,14 @@ div(class="tab-content")
 															span(class="monospace") OP_RETURN: 
 															span(class="monospace text-muted") #{utils.hex2ascii(vout.scriptPubKey.asm.substring("OP_RETURN ".length))}
 												td
-													span(class="monospace") #{vout.value}
+													span(class="monospace") #{utils.formatBtcAmount(vout.value, currencyFormatType)}
 													- totalOutputValue = totalOutputValue.plus(vout.value);
 
 										tr
 											td
 											td
 											td
-												strong(class="monospace") #{totalOutputValue}
+												strong(class="monospace") #{utils.formatBtcAmount(totalOutputValue, currencyFormatType)}
 			//pre
 			//	code #{JSON.stringify(tx, null, 4)}
 

views/layout.pug

@@ -19,7 +19,7 @@ html
 		
 	body
 		nav(class="navbar navbar-expand-lg navbar-dark bg-dark mb-4")
-			div(class="container")
+			div(class=displayWidth)
 				a(class="navbar-brand", href="/")
 					span
 						img(src="/img/logo/logo-64.png", class="header-image")
@@ -31,18 +31,46 @@ html
 				div(class="collapse navbar-collapse", id="navbarNav")
 					if (client)
 						ul(class="navbar-nav mr-auto")
-							if (debug)
 							li(class="nav-item")
-									a(href="/rpc-terminal", class="nav-link") RPC Terminal
+								a(href="/node-details", class="nav-link")
-							li(class="nav-item")
+									i(class="fas fa-info-circle")
-								a(href="/node-details", class="nav-link") Node Details
+									span  Node Details
+							li(class="nav-item dropdown")
+								a(class="nav-link dropdown-toggle", href="javascript:void(0)", id="navbarDropdown", role="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false") 
+									i(class="fas fa-cog")
+									span  Settings
+								div(class="dropdown-menu", aria-labelledby="navbarDropdown")
+									span(class="dropdown-header") Currency Units
+									a(class="dropdown-item", href="/changeSetting?name=currencyFormatType&value=")
+										if (currencyFormatType == "btc" || currencyFormatType == "")
+											i(class="fas fa-check")
+										span  BTC
+									a(class="dropdown-item", href="/changeSetting?name=currencyFormatType&value=mbtc")
+										if (currencyFormatType == "mbtc")
+											i(class="fas fa-check")
+										span  mbtc
+									a(class="dropdown-item", href="/changeSetting?name=currencyFormatType&value=bits")
+										if (currencyFormatType == "bits")
+											i(class="fas fa-check")
+										span  bits
+									div(class="dropdown-divider")
+									span(class="dropdown-header") Display Width
+									a(class="dropdown-item", href="/changeSetting?name=displayWidth&value=container")
+										if (displayWidth == "container")
+											i(class="fas fa-check")
+										span  Centered
+									a(class="dropdown-item", href="/changeSetting?name=displayWidth&value=container-fluid")
+										if (displayWidth == "container-fluid")
+											i(class="fas fa-check")
+										span  Full Width
+
 						form(method="post", action="/search", class="form-inline")
 							div(class="input-group")
 								input(type="text", class="form-control form-control-sm", name="query", placeholder="block height, block hash, txid", value=(query), style="width: 250px;")
 								span(class="input-group-btn")
 									input(type="submit", class="btn btn-primary", value="Search")
 
-		div(class="container mb-4", style="margin-top: -1.0rem;")
+		div(class=(displayWidth + " mb-4"), style="margin-top: -1.0rem;")
 			ul(class="nav")
 				li(class="nav-item")
 					a(href="/rpc-browser", class="nav-link") RPC Browser
@@ -55,7 +83,7 @@ html
 
 			hr
 				
-		div(class="container")
+		div(class=displayWidth)
 			if (userMessage)
 				div(class="alert", class=(userMessageType ? ("alert-"  + userMessageType) : "alert-info"), role="alert")
 					span !{userMessage}

views/mempool-summary.pug

@@ -28,7 +28,7 @@ block content
 				td(class="monospace") #{getmempoolinfo.mempoolminfee.toLocaleString()}
 			tr
 				th(class="table-active properties-header") Total Fees
-				td(class="monospace") #{mempoolstats.totalFee.toLocaleString()}
+				td(class="monospace") #{utils.formatBtcAmount(mempoolstats.totalFee, currencyFormatType)}
 
 
 		h4 Transaction count by fee level
@@ -49,7 +49,7 @@ block content
 		script var feeBucketLabels = [];
 		each feeBucketLabel, index in feeBucketLabels
 			- var percentTx = Math.round(100 * feeBucketTxCounts[index] / getmempoolinfo.size).toLocaleString();
-			script feeBucketLabels.push(["#{feeBucketLabel}","#{feeBucketTxCounts[index]} tx (#{percentTx}%)","#{totalfeeBuckets[index].toLocaleString()} BTC"]);
+			script feeBucketLabels.push(["#{feeBucketLabel}","#{feeBucketTxCounts[index]} tx (#{percentTx}%)","#{utils.formatBtcAmount(totalfeeBuckets[index], currencyFormatType)}"]);
 
 		script var feeBucketTxCounts = [#{feeBucketTxCounts}];
 

views/transaction.pug

@@ -116,13 +116,13 @@ block content
 					if (result.getrawtransaction.vin[0].coinbase)
 						tr
 							th(class="table-active properties-header") Total Network Fees
-							td(class="monospace") #{new Decimal(totalOutputValue).minus(totalInputValue)}
+							td(class="monospace") #{utils.formatBtcAmount(new Decimal(totalOutputValue).minus(totalInputValue), currencyFormatType)}
 					else
 						tr
 							th(class="table-active properties-header") Network Fee Paid
 							td(class="monospace")
-								strong #{new Decimal(totalInputValue).minus(totalOutputValue)}
+								strong #{utils.formatBtcAmount(new Decimal(totalInputValue).minus(totalOutputValue), currencyFormatType)}
-								span(class="text-muted")  (#{totalInputValue} - #{totalOutputValue})
+								span(class="text-muted")  (#{utils.formatBtcAmount(totalInputValue, currencyFormatType)} - #{utils.formatBtcAmount(totalOutputValue, currencyFormatType)})
 								br
 								span ~#{new DecimalRounded(totalInputValue).minus(totalOutputValue).dividedBy(result.getrawtransaction.size).times(100000000)} sat/B
 
@@ -163,8 +163,8 @@ block content
 												th 1
 												td
 													span(class="tag monospace") coinbase
-													span(class="monospace") Newly minted BTC
+													span(class="monospace") Newly minted coins
-												td(class="monospace") #{utils.getBlockReward(result.getblock.height)}
+												td(class="monospace") #{utils.formatBtcAmount(utils.getBlockReward(result.getblock.height), currencyFormatType)}
 
 										each txInput, txInputIndex in result.txInputs
 											if (txInput)
@@ -182,13 +182,13 @@ block content
 															a(href=("/tx/" + txInput.txid + "#output-" + result.getrawtransaction.vin[txInputIndex].vout), class="monospace") #{txInput.txid.substring(0, 14)}..., Output ##{result.getrawtransaction.vin[txInputIndex].vout + 1}
 													td
 														if (vout.value)
-															span(class="monospace") #{vout.value}
+															span(class="monospace") #{utils.formatBtcAmount(vout.value, currencyFormatType)}
 
 										tr
 											td
 											td
 											td
-												strong(class="monospace") #{totalInputValue}
+												strong(class="monospace") #{utils.formatBtcAmount(totalInputValue, currencyFormatType)}
 									
 
 							div(class="col-md-6")
@@ -217,13 +217,13 @@ block content
 															span(class="monospace") OP_RETURN: 
 															span(class="monospace text-muted") #{utils.hex2ascii(vout.scriptPubKey.asm.substring("OP_RETURN ".length))}
 												td
-													span(class="monospace") #{vout.value}
+													span(class="monospace") #{utils.formatBtcAmount(vout.value, currencyFormatType)}
 
 										tr
 											td
 											td
 											td
-												strong(class="monospace") #{totalOutputValue}
+												strong(class="monospace") #{utils.formatBtcAmount(totalOutputValue, currencyFormatType)}
 
 			div(id="tab-scripts", class="tab-pane", role="tabpanel")
 				h3 Input Scripts