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

UX improvements described in #106 

- bold text for selected address in tx-io-details on address page
- hide large # of outputs by default on address page, only showing default 10 + all outputs for the selected address, with link to show hidden outputs
fix-133-memory-crash
Dan Janosik 6 years ago
parent
f3ad6d5bd0
commit
7b41d09077
No known key found for this signature in database GPG Key ID: C6F8CE9FFDB2CED2
3 changed files with 104 additions and 71 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. 5
      app/config.js
  2. 1
      views/address.pug
  3. 169
      views/includes/transaction-io-details.pug

5
app/config.js
View File

@ -111,7 +111,10 @@ module.exports = {
blockTxPageSize:20, blockTxPageSize:20,
addressTxPageSize:20, addressTxPageSize:20,
txMaxInput:15, txMaxInput:15,
browseBlocksPageSize:20 browseBlocksPageSize:20,
addressPage:{
txOutputMaxDefaultDisplay:10
}
}, },
credentials: credentials, credentials: credentials,

1
views/address.pug
View File

@ -335,6 +335,7 @@ block content
if (true) if (true)
- var txInputs = txInputsByTransaction[tx.txid]; - var txInputs = txInputsByTransaction[tx.txid];
- var blockHeight = blockHeightsByTxid[tx.txid]; - var blockHeight = blockHeightsByTxid[tx.txid];
- var txIOHighlightAddress = address;
include includes/transaction-io-details.pug include includes/transaction-io-details.pug

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

@ -3,6 +3,16 @@
- var totalIOValues = utils.getTxTotalInputOutputValues(tx, txInputs, blockHeight); - var totalIOValues = utils.getTxTotalInputOutputValues(tx, txInputs, blockHeight);
script.
function showAllTxOutputs(link, txid) {
var hiddenRows = document.querySelectorAll("[data-txid='" + txid + "']");
hiddenRows.forEach(function(hiddenRow) {
hiddenRow.classList.remove("d-none");
});
link.classList.add("d-none");
}
div(class="row monospace") div(class="row monospace")
div(class="col-lg-6") div(class="col-lg-6")
if (txInputs) if (txInputs)
@ -32,7 +42,7 @@ div(class="row monospace")
else else
if (vout && vout.scriptPubKey && vout.scriptPubKey.addresses) if (vout && vout.scriptPubKey && vout.scriptPubKey.addresses)
div(class="word-wrap") div(class="word-wrap")
a(href=("/address/" + vout.scriptPubKey.addresses[0])) #{vout.scriptPubKey.addresses[0]} a(href=("/address/" + vout.scriptPubKey.addresses[0]), class=(txIOHighlightAddress == vout.scriptPubKey.addresses[0] ? "font-weight-bold" : null)) #{vout.scriptPubKey.addresses[0]}
if (global.specialAddresses[vout.scriptPubKey.addresses[0]]) if (global.specialAddresses[vout.scriptPubKey.addresses[0]])
- var specialAddressInfo = global.specialAddresses[vout.scriptPubKey.addresses[0]]; - var specialAddressInfo = global.specialAddresses[vout.scriptPubKey.addresses[0]];
if (specialAddressInfo.type == "minerPayout") if (specialAddressInfo.type == "minerPayout")
@ -93,76 +103,95 @@ div(class="row monospace")
div(class="col-lg-6") div(class="col-lg-6")
- var maxRegularRowCount = (txIOHighlightAddress != null ? config.site.addressPage.txOutputMaxDefaultDisplay : 10000000);
- var regularRowCount = 0;
- var hiddenRowCount = 0;
each vout, voutIndex in tx.vout each vout, voutIndex in tx.vout
div(class="row") - var highlightRow = false;
div(class="tx-io-label") if (txIOHighlightAddress != null && vout.scriptPubKey && vout.scriptPubKey.addresses && vout.scriptPubKey.addresses[0] == txIOHighlightAddress)
a(data-toggle="tooltip", title=("Output #" + (voutIndex + 1).toLocaleString()), style="white-space: nowrap;") - highlightRow = true;
i(class=("fas fa-" + fontawesomeOutputName + " mr-2"))
span(class="d-inline d-md-none") Output # if (!highlightRow)
span #{(voutIndex + 1).toLocaleString()} - regularRowCount++;
div(class="tx-io-content") - var hiddenRow = false;
div(class="row pr-3") if (!highlightRow && regularRowCount > maxRegularRowCount)
div(class="tx-io-desc") - hiddenRow = true;
if (vout.scriptPubKey) - hiddenRowCount++;
if (vout.scriptPubKey.addresses)
if (false) div(data-txid=tx.txid, class=("pr-3 " + (hiddenRow ? "d-none" : "")))
if (vout.scriptPubKey.type == "pubkey") div(class="row")
span(class="border border-secondary rounded bg-light px-2 py-1 mr-2") P2PK div(class="tx-io-label")
else if (vout.scriptPubKey.type == "pubkeyhash") a(data-toggle="tooltip", title=("Output #" + (voutIndex + 1).toLocaleString()), style="white-space: nowrap;")
span(class="border border-secondary rounded bg-light px-2 py-1 mr-2") P2PKH i(class=("fas fa-" + fontawesomeOutputName + " mr-2"))
else if (vout.scriptPubKey.type == "scripthash") span(class="d-inline d-md-none") Output #
span(class="border border-secondary rounded bg-light px-2 py-1 mr-2") P2SH span #{(voutIndex + 1).toLocaleString()}
else if (vout.scriptPubKey.type == "witness_v0_keyhash")
span(class="border border-secondary rounded bg-light px-2 py-1 mr-2") V0_P2WPKH div(class="tx-io-content")
div(class=("row pr-3"))
a(id=("output-" + voutIndex), href=("/address/" + vout.scriptPubKey.addresses[0])) div(class="tx-io-desc")
span(class="monospace word-wrap") #{vout.scriptPubKey.addresses[0]} if (vout.scriptPubKey)
if (vout.scriptPubKey.addresses)
if (global.specialAddresses[vout.scriptPubKey.addresses[0]]) if (false)
- var specialAddressInfo = global.specialAddresses[vout.scriptPubKey.addresses[0]]; if (vout.scriptPubKey.type == "pubkey")
if (specialAddressInfo.type == "minerPayout") span(class="border border-secondary rounded bg-light px-2 py-1 mr-2") P2PK
span else if (vout.scriptPubKey.type == "pubkeyhash")
a(data-toggle="tooltip", title=("Miner payout address: " + specialAddressInfo.minerInfo.name)) span(class="border border-secondary rounded bg-light px-2 py-1 mr-2") P2PKH
i(class="fas fa-certificate text-primary") else if (vout.scriptPubKey.type == "scripthash")
else if (specialAddressInfo.type == "donation") span(class="border border-secondary rounded bg-light px-2 py-1 mr-2") P2SH
span else if (vout.scriptPubKey.type == "witness_v0_keyhash")
a(data-toggle="tooltip", title=("Development donation address. All support is appreciated!")) span(class="border border-secondary rounded bg-light px-2 py-1 mr-2") V0_P2WPKH
i(class="fas fa-certificate text-primary")
a(id=("output-" + voutIndex), href=("/address/" + vout.scriptPubKey.addresses[0]))
span(class=("monospace word-wrap " + (highlightRow ? "font-weight-bold" : ""))) #{vout.scriptPubKey.addresses[0]}
else if (vout.scriptPubKey.hex && vout.scriptPubKey.hex.startsWith('6a24aa21a9ed'))
span(class="monospace") if (global.specialAddresses[vout.scriptPubKey.addresses[0]])
span(class="rounded bg-dark text-light px-2 py-1 mr-2") OP_RETURN - var specialAddressInfo = global.specialAddresses[vout.scriptPubKey.addresses[0]];
span(title="Segregated Witness", data-toggle="tooltip") SegWit if (specialAddressInfo.type == "minerPayout")
span committment span
a(data-toggle="tooltip", title=("Miner payout address: " + specialAddressInfo.minerInfo.name))
a(href="https://github.com/bitcoin/bips/blob/master/bip-0141.mediawiki#commitment-structure", data-toggle="tooltip", title="View developer docs", target="_blank") i(class="fas fa-certificate text-primary")
i(class="fas fa-info-circle") else if (specialAddressInfo.type == "donation")
span
else if (vout.scriptPubKey.asm && vout.scriptPubKey.asm.startsWith('OP_RETURN ')) a(data-toggle="tooltip", title=("Development donation address. All support is appreciated!"))
span(class="monospace") i(class="fas fa-certificate text-primary")
span(class="rounded bg-dark text-light px-2 py-1 mr-2") OP_RETURN
span(class="text-muted") #{utils.hex2ascii(vout.scriptPubKey.asm.substring("OP_RETURN ".length))}
else if (vout.scriptPubKey.hex && vout.scriptPubKey.hex.startsWith('6a24aa21a9ed'))
else span(class="monospace")
span(class="monospace") span(class="rounded bg-dark text-light px-2 py-1 mr-2") OP_RETURN
span(class="text-danger font-weight-bold") Unable to decode output: span(title="Segregated Witness", data-toggle="tooltip") SegWit
br span committment
span(class="font-weight-bold") type:
span #{vout.scriptPubKey.type} a(href="https://github.com/bitcoin/bips/blob/master/bip-0141.mediawiki#commitment-structure", data-toggle="tooltip", title="View developer docs", target="_blank")
br i(class="fas fa-info-circle")
span(class="font-weight-bold") asm:
span #{vout.scriptPubKey.asm} else if (vout.scriptPubKey.asm && vout.scriptPubKey.asm.startsWith('OP_RETURN '))
br span(class="monospace")
span(class="font-weight-bold") decodedHex: span(class="rounded bg-dark text-light px-2 py-1 mr-2") OP_RETURN
span #{utils.hex2ascii(vout.scriptPubKey.hex)} span(class="text-muted") #{utils.hex2ascii(vout.scriptPubKey.asm.substring("OP_RETURN ".length))}
div(class="tx-io-value") else
- var currencyValue = vout.value; span(class="monospace")
include ./value-display.pug span(class="text-danger font-weight-bold") Unable to decode output:
br
hr span(class="font-weight-bold") type:
span #{vout.scriptPubKey.type}
br
span(class="font-weight-bold") asm:
span #{vout.scriptPubKey.asm}
br
span(class="font-weight-bold") decodedHex:
span #{utils.hex2ascii(vout.scriptPubKey.hex)}
div(class="tx-io-value")
- var currencyValue = vout.value;
include ./value-display.pug
hr
if (hiddenRowCount > 0)
a(href="javascript:void(0)", onclick=("showAllTxOutputs(this, '" + tx.txid + "');")) Show all #{tx.vout.length.toLocaleString()} outputs
div(class="row mb-5 pr-3") div(class="row mb-5 pr-3")
div(class="col") div(class="col")

Write Preview
Loading…
Cancel
Save