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
Split 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.specialBlocks = {};
global.specialAddresses = {};
if (global.coinConfig.historicalData) {
global.coinConfig.historicalData.forEach(function(item) {
@ -145,6 +146,16 @@ app.runOnStartup = function() {
Promise.all(promises).then(function(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;
}
.card-body {
padding: 1.1em;
}
.details-table td {
border-top: none;
padding: 0.4em;
@ -77,7 +81,7 @@ strong {
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;
width: 100%;
min-height: 1px;
@ -86,7 +90,7 @@ strong {
margin-bottom: 5px;
}
.summary-table-label, .summary-split-table-label {
.summary-table-label, .summary-split-table-label, .tx-io-label {
font-weight: bold;
}
@ -112,6 +116,11 @@ strong {
max-width: 100%;
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) {
@ -132,6 +141,11 @@ strong {
max-width: 64%;
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) {
@ -152,9 +166,18 @@ strong {
max-width: 70%;
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) {
.container {
max-width: 1160px;
}
.summary-table-label {
max-width: 11%;
text-align: right;
@ -172,12 +195,18 @@ strong {
max-width: 78%;
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) {
.container {
max-width: 1800px;
}
.summary-table-label {
max-width: 8%;
text-align: right;
@ -195,6 +224,11 @@ strong {
max-width: 84%;
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);
div(class="row")
div(class="col-md-6")
div(class="row monospace")
div(class="col-lg-6")
if (txInputs)
table(class="table monospace mb-0")
- var extraInputCount = 0;
each txVin, txVinIndex in tx.vin
if (txVin.coinbase)
tr
th(class="pl-0 pr-1")
a(data-toggle="tooltip", title="Input #1", style="white-space: nowrap;")
i(class=("fas fa-" + fontawesomeInputName + " mr-2"))
span 1
td(class="border-top-0")
span(class="tag") coinbase
span Newly minted coins
td(class="border-top-0 text-right")
- var currencyValue = coinConfig.blockRewardFunction(result.getblock.height);
include ./value-display.pug
else
- var vout = null;
if (txInputs && txInputs[txVinIndex])
- var txInput = txInputs[txVinIndex];
if (txInput.vout && txInput.vout[txVin.vout])
- var vout = txInput.vout[txVin.vout];
if (vout)
tr
th(class="pl-0 pr-1")
a(data-toggle="tooltip", title=("Input #" + (txVinIndex + 1)), style="white-space: nowrap;")
i(class=("fas fa-" + fontawesomeInputName + " mr-2"))
span #{(txVinIndex + 1)}
td(class=(txVinIndex == 0 ? "border-top-0" : false), class="pl-0")
if (vout && vout.scriptPubKey && vout.scriptPubKey.addresses)
div(style="word-break: break-word;")
a(href=("/address/" + vout.scriptPubKey.addresses[0])) #{vout.scriptPubKey.addresses[0]}
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;
- var extraInputCount = 0;
each txVin, txVinIndex in tx.vin
if (!txVin.coinbase)
- var vout = null;
if (txInputs && txInputs[txVinIndex])
- var txInput = txInputs[txVinIndex];
if (txInput.vout && txInput.vout[txVin.vout])
- var vout = txInput.vout[txVin.vout];
if (txVin.coinbase || vout)
div(class="row")
div(class="tx-io-label")
a(data-toggle="tooltip", title=("Input #" + (txVinIndex + 1).toLocaleString()), style="white-space: nowrap;")
i(class=("fas fa-" + fontawesomeInputName + " mr-2"))
span(class="d-inline d-md-none") Input #
span #{(txVinIndex + 1).toLocaleString()}
div(class="tx-io-content")
div(class="row")
div(class="tx-io-desc")
if (txVin.coinbase)
span(class="tag") coinbase
span Newly minted coins
else
if (vout && vout.scriptPubKey && vout.scriptPubKey.addresses)
div(style="word-break: break-word;")
a(href=("/address/" + vout.scriptPubKey.addresses[0])) #{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")
span(class="small") via
a(href=("/tx/" + txInput.txid + "#output-" + txVin.vout)) #{txInput.txid.substring(0, 20)}...[#{txVin.vout}]
div(class="tx-io-value")
if (txVin.coinbase)
- var currencyValue = coinConfig.blockRewardFunction(result.getblock.height);
include ./value-display.pug
else
- extraInputCount = extraInputCount + 1;
if (extraInputCount > 0)
tr
th(class="pl-0 pr-1")
td(class="border-top-0 pl-0")
span #{extraInputCount} Additonal
if (extraInputCount != 1)
span inputs
else
span 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")
else
if (vout && vout.value)
- var currencyValue = vout.value;
include ./value-display.pug
hr
else
- extraInputCount = extraInputCount + 1;
div(class="row mb-5")
div(class="col")
div(class="font-weight-bold text-left text-md-right")
span(class="d-inline d-md-none") Total Input:
- var currencyValue = totalIOValues.input;
include ./value-display.pug
div(class="col-md-6")
table(class="table mb-0")
tbody
each vout, voutIndex in tx.vout
tr
th(class="pl-0 pr-1 monospace")
a(data-toggle="tooltip", title=("Output #" + (voutIndex + 1)), style="white-space: nowrap;")
i(class=("fas fa-" + fontawesomeOutputName + " mr-2"))
span #{(voutIndex + 1)}
td(class=(voutIndex == 0 ? "border-top-0" : false), class="pl-0")
div(class="col-lg-6")
each vout, voutIndex in tx.vout
div(class="row")
div(class="tx-io-label")
a(data-toggle="tooltip", title=("Output #" + (voutIndex + 1).toLocaleString()), style="white-space: nowrap;")
i(class=("fas fa-" + fontawesomeInputName + " mr-2"))
span(class="d-inline d-md-none") Output #
span #{(voutIndex + 1).toLocaleString()}
div(class="tx-io-content")
div(class="row")
div(class="tx-io-desc")
if (vout.scriptPubKey)
if (vout.scriptPubKey.addresses)
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'))
span(class="monospace") Segregated Witness committment
@ -114,15 +106,17 @@ div(class="row")
span(class="font-weight-bold") decodedHex:
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;
include ./value-display.pug
tr
th
td
td(class="text-right font-weight-bold")
- var currencyValue = totalIOValues.output;
include ./value-display.pug
hr
div(class="row mb-5")
div(class="col")
div(class="font-weight-bold text-left text-md-right")
span(class="d-inline d-md-none") Total Output:
- var currencyValue = totalIOValues.output;
include ./value-display.pug

Write Preview
Loading…
Cancel
Save