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
Split 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,
addressTxPageSize:20,
txMaxInput:15,
browseBlocksPageSize:20
browseBlocksPageSize:20,
addressPage:{
txOutputMaxDefaultDisplay:10
}
},
credentials: credentials,

1
views/address.pug
View File

@ -335,6 +335,7 @@ block content
if (true)
- var txInputs = txInputsByTransaction[tx.txid];
- var blockHeight = blockHeightsByTxid[tx.txid];
- var txIOHighlightAddress = address;
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);
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="col-lg-6")
if (txInputs)
@ -32,7 +42,7 @@ div(class="row monospace")
else
if (vout && vout.scriptPubKey && vout.scriptPubKey.addresses)
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]])
- var specialAddressInfo = global.specialAddresses[vout.scriptPubKey.addresses[0]];
if (specialAddressInfo.type == "minerPayout")
@ -93,76 +103,95 @@ div(class="row monospace")
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
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-" + fontawesomeOutputName + " mr-2"))
span(class="d-inline d-md-none") Output #
span #{(voutIndex + 1).toLocaleString()}
div(class="tx-io-content")
div(class="row pr-3")
div(class="tx-io-desc")
if (vout.scriptPubKey)
if (vout.scriptPubKey.addresses)
if (false)
if (vout.scriptPubKey.type == "pubkey")
span(class="border border-secondary rounded bg-light px-2 py-1 mr-2") P2PK
else if (vout.scriptPubKey.type == "pubkeyhash")
span(class="border border-secondary rounded bg-light px-2 py-1 mr-2") P2PKH
else if (vout.scriptPubKey.type == "scripthash")
span(class="border border-secondary rounded bg-light px-2 py-1 mr-2") P2SH
else if (vout.scriptPubKey.type == "witness_v0_keyhash")
span(class="border border-secondary rounded bg-light px-2 py-1 mr-2") V0_P2WPKH
a(id=("output-" + voutIndex), href=("/address/" + vout.scriptPubKey.addresses[0]))
span(class="monospace word-wrap") #{vout.scriptPubKey.addresses[0]}
if (global.specialAddresses[vout.scriptPubKey.addresses[0]])
- var specialAddressInfo = global.specialAddresses[vout.scriptPubKey.addresses[0]];
if (specialAddressInfo.type == "minerPayout")
span
a(data-toggle="tooltip", title=("Miner payout address: " + specialAddressInfo.minerInfo.name))
i(class="fas fa-certificate text-primary")
else if (specialAddressInfo.type == "donation")
span
a(data-toggle="tooltip", title=("Development donation address. All support is appreciated!"))
i(class="fas fa-certificate text-primary")
else if (vout.scriptPubKey.hex && vout.scriptPubKey.hex.startsWith('6a24aa21a9ed'))
span(class="monospace")
span(class="rounded bg-dark text-light px-2 py-1 mr-2") OP_RETURN
span(title="Segregated Witness", data-toggle="tooltip") SegWit
span committment
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-info-circle")
else if (vout.scriptPubKey.asm && vout.scriptPubKey.asm.startsWith('OP_RETURN '))
span(class="monospace")
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
span(class="monospace")
span(class="text-danger font-weight-bold") Unable to decode output:
br
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
- var highlightRow = false;
if (txIOHighlightAddress != null && vout.scriptPubKey && vout.scriptPubKey.addresses && vout.scriptPubKey.addresses[0] == txIOHighlightAddress)
- highlightRow = true;
if (!highlightRow)
- regularRowCount++;
- var hiddenRow = false;
if (!highlightRow && regularRowCount > maxRegularRowCount)
- hiddenRow = true;
- hiddenRowCount++;
div(data-txid=tx.txid, class=("pr-3 " + (hiddenRow ? "d-none" : "")))
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-" + fontawesomeOutputName + " mr-2"))
span(class="d-inline d-md-none") Output #
span #{(voutIndex + 1).toLocaleString()}
div(class="tx-io-content")
div(class=("row pr-3"))
div(class="tx-io-desc")
if (vout.scriptPubKey)
if (vout.scriptPubKey.addresses)
if (false)
if (vout.scriptPubKey.type == "pubkey")
span(class="border border-secondary rounded bg-light px-2 py-1 mr-2") P2PK
else if (vout.scriptPubKey.type == "pubkeyhash")
span(class="border border-secondary rounded bg-light px-2 py-1 mr-2") P2PKH
else if (vout.scriptPubKey.type == "scripthash")
span(class="border border-secondary rounded bg-light px-2 py-1 mr-2") P2SH
else if (vout.scriptPubKey.type == "witness_v0_keyhash")
span(class="border border-secondary rounded bg-light px-2 py-1 mr-2") V0_P2WPKH
a(id=("output-" + voutIndex), href=("/address/" + vout.scriptPubKey.addresses[0]))
span(class=("monospace word-wrap " + (highlightRow ? "font-weight-bold" : ""))) #{vout.scriptPubKey.addresses[0]}
if (global.specialAddresses[vout.scriptPubKey.addresses[0]])
- var specialAddressInfo = global.specialAddresses[vout.scriptPubKey.addresses[0]];
if (specialAddressInfo.type == "minerPayout")
span
a(data-toggle="tooltip", title=("Miner payout address: " + specialAddressInfo.minerInfo.name))
i(class="fas fa-certificate text-primary")
else if (specialAddressInfo.type == "donation")
span
a(data-toggle="tooltip", title=("Development donation address. All support is appreciated!"))
i(class="fas fa-certificate text-primary")
else if (vout.scriptPubKey.hex && vout.scriptPubKey.hex.startsWith('6a24aa21a9ed'))
span(class="monospace")
span(class="rounded bg-dark text-light px-2 py-1 mr-2") OP_RETURN
span(title="Segregated Witness", data-toggle="tooltip") SegWit
span committment
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-info-circle")
else if (vout.scriptPubKey.asm && vout.scriptPubKey.asm.startsWith('OP_RETURN '))
span(class="monospace")
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
span(class="monospace")
span(class="text-danger font-weight-bold") Unable to decode output:
br
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="col")

Write Preview
Loading…
Cancel
Save