lukechilds
/
btc-rpc-explorer
mirror of https://github.com/lukechilds/btc-rpc-explorer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

- ui/ux improvements for tx io details on small screens 

- include a "fun" tag next to "special addresses" (miner payout addresses)
fix-133-memory-crash
Dan Janosik 6 years ago
parent
eaa753153b
commit
9af2e46e5f
3 changed files with 127 additions and 88 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      app.js
  2. 38
      public/css/styling.css
  3. 166
      views/includes/transaction-io-details.pug

11
app.js
View File

@ -108,6 +108,7 @@ app.runOnStartup = function() {
global.specialTransactions = {}; global.specialTransactions = {};
global.specialBlocks = {}; global.specialBlocks = {};
global.specialAddresses = {};
if (global.coinConfig.historicalData) { if (global.coinConfig.historicalData) {
global.coinConfig.historicalData.forEach(function(item) { global.coinConfig.historicalData.forEach(function(item) {
@ -145,6 +146,16 @@ app.runOnStartup = function() {
Promise.all(promises).then(function(results) { Promise.all(promises).then(function(results) {
global.miningPoolsConfigs = results; global.miningPoolsConfigs = results;
for (var i = 0; i < global.miningPoolsConfigs.length; i++) {
for (var x in global.miningPoolsConfigs[i].payout_addresses) {
if (global.miningPoolsConfigs[i].payout_addresses.hasOwnProperty(x)) {
global.specialAddresses[x] = global.miningPoolsConfigs[i].payout_addresses[x];
}
}
}
console.log("Identified special addresses: " + JSON.stringify(global.specialAddresses));
}); });
} }

38
public/css/styling.css
View File

@ -20,6 +20,10 @@ code, .monospace {
font-family: "Source Code Pro", monospace; font-family: "Source Code Pro", monospace;
} }
.card-body {
padding: 1.1em;
}
.details-table td { .details-table td {
border-top: none; border-top: none;
padding: 0.4em; padding: 0.4em;
@ -77,7 +81,7 @@ strong {
font-weight: 500; font-weight: 500;
} }
.summary-table-label, .summary-table-content, .summary-split-table-label, .summary-split-table-content { .summary-table-label, .summary-table-content, .summary-split-table-label, .summary-split-table-content, .tx-io-label, .tx-io-content, .tx-io-desc, .tx-io-value {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 1px; min-height: 1px;
@ -86,7 +90,7 @@ strong {
margin-bottom: 5px; margin-bottom: 5px;
} }
.summary-table-label, .summary-split-table-label { .summary-table-label, .summary-split-table-label, .tx-io-label {
font-weight: bold; font-weight: bold;
} }
@ -112,6 +116,11 @@ strong {
max-width: 100%; max-width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
} }
.tx-io-label { max-width: 100%; }
.tx-io-content { max-width: 100%; }
.tx-io-desc { max-width: 100%; }
.tx-io-value { max-width: 100%; }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -132,6 +141,11 @@ strong {
max-width: 64%; max-width: 64%;
margin-bottom: 5px; margin-bottom: 5px;
} }
.tx-io-label { max-width: 8%; }
.tx-io-content { max-width: 92%; }
.tx-io-desc { max-width: 60%; }
.tx-io-value { max-width: 40%; text-align: right; padding-right: 25px; }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
@ -152,9 +166,18 @@ strong {
max-width: 70%; max-width: 70%;
margin-bottom: 5px; margin-bottom: 5px;
} }
.tx-io-label { max-width: 10%; }
.tx-io-content { max-width: 90%; }
.tx-io-desc { max-width: 60%; }
.tx-io-value { max-width: 40%; text-align: right; padding-right: 25px; }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.container {
max-width: 1160px;
}
.summary-table-label { .summary-table-label {
max-width: 11%; max-width: 11%;
text-align: right; text-align: right;
@ -172,12 +195,18 @@ strong {
max-width: 78%; max-width: 78%;
margin-bottom: 5px; margin-bottom: 5px;
} }
.tx-io-label { max-width: 8%; }
.tx-io-content { max-width: 92%; }
.tx-io-desc { max-width: 61%; }
.tx-io-value { max-width: 39%; text-align: right; padding-right: 25px; }
} }
@media (min-width: 1920px) { @media (min-width: 1920px) {
.container { .container {
max-width: 1800px; max-width: 1800px;
} }
.summary-table-label { .summary-table-label {
max-width: 8%; max-width: 8%;
text-align: right; text-align: right;
@ -195,6 +224,11 @@ strong {
max-width: 84%; max-width: 84%;
margin-bottom: 5px; margin-bottom: 5px;
} }
.tx-io-label { max-width: 5%; }
.tx-io-content { max-width: 95%; }
.tx-io-desc { max-width: 60%; }
.tx-io-value { max-width: 40%; text-align: right; padding-right: 25px; }
} }

166
views/includes/transaction-io-details.pug
View File

@ -3,94 +3,86 @@
- var totalIOValues = utils.getTxTotalInputOutputValues(tx, txInputs, blockHeight); - var totalIOValues = utils.getTxTotalInputOutputValues(tx, txInputs, blockHeight);
div(class="row") div(class="row monospace")
div(class="col-md-6") div(class="col-lg-6")
if (txInputs) if (txInputs)
table(class="table monospace mb-0") - var extraInputCount = 0;
- var extraInputCount = 0; each txVin, txVinIndex in tx.vin
each txVin, txVinIndex in tx.vin if (!txVin.coinbase)
if (txVin.coinbase) - var vout = null;
tr if (txInputs && txInputs[txVinIndex])
th(class="pl-0 pr-1") - var txInput = txInputs[txVinIndex];
a(data-toggle="tooltip", title="Input #1", style="white-space: nowrap;") if (txInput.vout && txInput.vout[txVin.vout])
i(class=("fas fa-" + fontawesomeInputName + " mr-2")) - var vout = txInput.vout[txVin.vout];
span 1
if (txVin.coinbase || vout)
td(class="border-top-0") div(class="row")
span(class="tag") coinbase div(class="tx-io-label")
span Newly minted coins a(data-toggle="tooltip", title=("Input #" + (txVinIndex + 1).toLocaleString()), style="white-space: nowrap;")
i(class=("fas fa-" + fontawesomeInputName + " mr-2"))
td(class="border-top-0 text-right") span(class="d-inline d-md-none") Input #
- var currencyValue = coinConfig.blockRewardFunction(result.getblock.height); span #{(txVinIndex + 1).toLocaleString()}
include ./value-display.pug
div(class="tx-io-content")
else div(class="row")
- var vout = null; div(class="tx-io-desc")
if (txInputs && txInputs[txVinIndex]) if (txVin.coinbase)
- var txInput = txInputs[txVinIndex]; span(class="tag") coinbase
if (txInput.vout && txInput.vout[txVin.vout]) span Newly minted coins
- var vout = txInput.vout[txVin.vout]; else
if (vout && vout.scriptPubKey && vout.scriptPubKey.addresses)
if (vout) div(style="word-break: break-word;")
tr a(href=("/address/" + vout.scriptPubKey.addresses[0])) #{vout.scriptPubKey.addresses[0]}
th(class="pl-0 pr-1") if (global.specialAddresses[vout.scriptPubKey.addresses[0]])
a(data-toggle="tooltip", title=("Input #" + (txVinIndex + 1)), style="white-space: nowrap;") a(data-toggle="tooltip", title=("Miner payout address: " + global.specialAddresses[vout.scriptPubKey.addresses[0]].name))
i(class=("fas fa-" + fontawesomeInputName + " mr-2")) i(class="fas fa-certificate text-primary")
span #{(txVinIndex + 1)} span(class="small") via
a(href=("/tx/" + txInput.txid + "#output-" + txVin.vout)) #{txInput.txid.substring(0, 20)}...[#{txVin.vout}]
td(class=(txVinIndex == 0 ? "border-top-0" : false), class="pl-0")
if (vout && vout.scriptPubKey && vout.scriptPubKey.addresses) div(class="tx-io-value")
div(style="word-break: break-word;") if (txVin.coinbase)
a(href=("/address/" + vout.scriptPubKey.addresses[0])) #{vout.scriptPubKey.addresses[0]} - var currencyValue = coinConfig.blockRewardFunction(result.getblock.height);
span(class="small") via
a(href=("/tx/" + txInput.txid + "#output-" + txVin.vout)) #{txInput.txid.substring(0, 20)}...[#{txVin.vout}]
td(class=(txVinIndex == 0 ? "border-top-0" : false), class="pl-0 text-right")
if (vout && vout.value)
- var currencyValue = vout.value;
include ./value-display.pug include ./value-display.pug
else else
- extraInputCount = extraInputCount + 1; if (vout && vout.value)
- var currencyValue = vout.value;
if (extraInputCount > 0) include ./value-display.pug
tr
th(class="pl-0 pr-1") hr
td(class="border-top-0 pl-0") else
span #{extraInputCount} Additonal - extraInputCount = extraInputCount + 1;
if (extraInputCount != 1)
span inputs div(class="row mb-5")
else div(class="col")
span input div(class="font-weight-bold text-left text-md-right")
span(class="d-inline d-md-none") Total Input:
a(data-toggle="tooltip", title="Additional inputs withheld for performance. See this transaction's details page for more info.")
i(class="fas fa-info-circle")
td(class="border-top-0")
tr
th
td
td(class="text-right font-weight-bold")
- var currencyValue = totalIOValues.input; - var currencyValue = totalIOValues.input;
include ./value-display.pug include ./value-display.pug
div(class="col-md-6") div(class="col-lg-6")
table(class="table mb-0") each vout, voutIndex in tx.vout
tbody div(class="row")
each vout, voutIndex in tx.vout div(class="tx-io-label")
tr a(data-toggle="tooltip", title=("Output #" + (voutIndex + 1).toLocaleString()), style="white-space: nowrap;")
th(class="pl-0 pr-1 monospace") i(class=("fas fa-" + fontawesomeInputName + " mr-2"))
a(data-toggle="tooltip", title=("Output #" + (voutIndex + 1)), style="white-space: nowrap;") span(class="d-inline d-md-none") Output #
i(class=("fas fa-" + fontawesomeOutputName + " mr-2")) span #{(voutIndex + 1).toLocaleString()}
span #{(voutIndex + 1)}
div(class="tx-io-content")
td(class=(voutIndex == 0 ? "border-top-0" : false), class="pl-0") div(class="row")
div(class="tx-io-desc")
if (vout.scriptPubKey) if (vout.scriptPubKey)
if (vout.scriptPubKey.addresses) if (vout.scriptPubKey.addresses)
a(id=("output-" + voutIndex), href=("/address/" + vout.scriptPubKey.addresses[0])) a(id=("output-" + voutIndex), href=("/address/" + vout.scriptPubKey.addresses[0]))
div(class="monospace", style="word-break: break-word;") #{vout.scriptPubKey.addresses[0]} span(class="monospace", style="word-break: break-word;") #{vout.scriptPubKey.addresses[0]}
if (global.specialAddresses[vout.scriptPubKey.addresses[0]])
a(data-toggle="tooltip", title=("Miner payout address: " + global.specialAddresses[vout.scriptPubKey.addresses[0]].name))
i(class="fas fa-certificate text-primary")
else if (vout.scriptPubKey.hex && vout.scriptPubKey.hex.startsWith('6a24aa21a9ed')) else if (vout.scriptPubKey.hex && vout.scriptPubKey.hex.startsWith('6a24aa21a9ed'))
span(class="monospace") Segregated Witness committment span(class="monospace") Segregated Witness committment
@ -114,15 +106,17 @@ div(class="row")
span(class="font-weight-bold") decodedHex: span(class="font-weight-bold") decodedHex:
span #{utils.hex2ascii(vout.scriptPubKey.hex)} span #{utils.hex2ascii(vout.scriptPubKey.hex)}
td(class=(voutIndex == 0 ? "border-top-0" : false), class="pl-0 text-right") div(class="tx-io-value")
- var currencyValue = vout.value; - var currencyValue = vout.value;
include ./value-display.pug include ./value-display.pug
tr hr
th
td div(class="row mb-5")
td(class="text-right font-weight-bold") div(class="col")
- var currencyValue = totalIOValues.output; div(class="font-weight-bold text-left text-md-right")
include ./value-display.pug span(class="d-inline d-md-none") Total Output:
- var currencyValue = totalIOValues.output;
include ./value-display.pug

Write Preview
Loading…
Cancel
Save