blockbook/static/templates/tx.html
Jiří Musil a4f1730364
Show raw tx hex in UI (#1162)
* Fix Network configuration parameter

* feat: allow for showing raw transaction hex for ETH transactions

* chore: remove comments from JS code to avoid parsing issues in tests

* temp: comment out failing tx template tests

* chore: trim text from copyable before writing it to clipboard

* chore: improve the design of Transaction hex

* chore: add wrap to element showing raw hex data

* fixup! chore: add wrap to element showing raw hex data

* chore: remove redundant style, make HTML prettier

* Revert "temp: comment out failing tx template tests"

This reverts commit f104ebbf5111583b46996d7527a26c08cd9e29b6.

* chore: put rawTx javascript functionality into main.js

* chore: modify the expected HTML for changed tx template

* feat: support the raw transaction hex also for BTC-like coins

* chore: add on-hover effect for active button - make the background white

* Minify javascript and styles

---------

Co-authored-by: Martin Boehm <martin.boehm@1mbsoftware.net>
2024-12-09 11:30:02 +01:00

201 lines
7.8 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{{define "specific"}}{{$tx := .Tx}}{{$data := .}}
<div class="row">
<h1 class="col-12">Transaction</h1>
</div>
<div class="row pt-3">
<h5 class="col-12 d-flex h-data"><span class="ellipsis copyable">{{$tx.Txid}}</span></h5>
</div>
<table class="table data-table info-table">
<tbody>
{{if $tx.Confirmations}}
<tr>
<td>Mined Time</td>
<td>{{unixTimeSpan $tx.Blocktime}}</td>
</tr>
{{end}}
<tr>
<td>In Block</td>
<td class="ellipsis" style="max-width: 280px">{{if $tx.Confirmations}}{{$tx.Blockhash}}{{else}}<span class="badge bg-danger">Unconfirmed</span>{{end}}</td>
</tr>
{{if $tx.Confirmations}}
<tr>
<td>In Block Height</td>
<td><a href="/block/{{$tx.Blockheight}}">{{formatInt $tx.Blockheight}}</a></td>
</tr>{{end}}
{{if $tx.EthereumSpecific}}
<tr>
<td>Status</td>
{{if $tx.EthereumSpecific.Status}}
{{if eq $tx.EthereumSpecific.Status 1}}
<td><span class="badge bg-success">Success</span></td>
{{else}}
{{if eq $tx.EthereumSpecific.Status -1}}
<td>Pending</td>
{{else}}
<td>Unknown</td>
{{end}}
{{end}}
{{else}}
<td><span class="badge bg-danger">Failed</span>{{if $tx.EthereumSpecific.Error}}<span class="text-danger small fw-normal ms-1"> {{$tx.EthereumSpecific.Error}}{{end}}</td>
{{end}}
</tr>
<tr>
<td>Value</td>
<td>{{amountSpan $tx.ValueOutSat $data "copyable"}}</td>
</tr>
<tr>
<td>Gas Used / Limit</td>
<td>{{if $tx.EthereumSpecific.GasUsed}}{{formatBigInt $tx.EthereumSpecific.GasUsed}}{{else}}pending{{end}} / {{formatBigInt $tx.EthereumSpecific.GasLimit}}</td>
</tr>
<tr>
<td>Gas Price</td>
<td>{{amountSpan $tx.EthereumSpecific.GasPrice $data "copyable"}} <span class="fw-normal ps-3">({{amountSatsSpan $tx.EthereumSpecific.GasPrice $data "copyable"}} Gwei)</span></td>
</tr>
{{if $tx.EthereumSpecific.L1GasUsed}}
<tr>
<td>L1 Gas Used</td>
<td>{{formatBigInt $tx.EthereumSpecific.L1GasUsed}}</td>
</tr>
{{end}}
{{if $tx.EthereumSpecific.L1GasPrice}}
<tr>
<td>L1 Gas Price</td>
<td>{{amountSpan $tx.EthereumSpecific.L1GasPrice $data "copyable"}} <span class="fw-normal ps-3">({{amountSatsSpan $tx.EthereumSpecific.L1GasPrice $data "copyable"}} Gwei)</span></td>
</tr>
{{end}}
{{if $tx.EthereumSpecific.L1FeeScalar}}
<tr>
<td>L1 Fee Scalar</td>
<td>{{$tx.EthereumSpecific.L1FeeScalar}}</td>
</tr>
{{end}}
{{else}}
<tr>
<td>Total Input</td>
<td>{{amountSpan $tx.ValueInSat $data "copyable"}}</td>
</tr>
<tr>
<td>Total Output</td>
<td>{{amountSpan $tx.ValueOutSat $data "copyable"}}</td>
</tr>
{{if $tx.VSize}}
<tr>
<td>Size / vSize</td>
<td>{{formatInt $tx.Size}} / {{formatInt $tx.VSize}}</td>
</tr>
{{else}}
{{if $tx.Size}}
<tr>
<td>Size</td>
<td>{{formatInt $tx.Size}}</td>
</tr>
{{end}}
{{end}}
{{end}}
{{if $tx.FeesSat}}
<tr>
<td>Fees</td>
<td>{{amountSpan $tx.FeesSat $data "copyable"}}{{if $tx.Size}} ({{feePerByte $tx}}){{end}}</td>
</tr>{{end}}
{{if not $tx.Confirmations}}
{{if $tx.ConfirmationETABlocks}}
<tr>
<td>Confirmation ETA</td>
<td>
<span tt="Estimated first potential confirmation of this transaction.">in approx. {{relativeTime $tx.ConfirmationETASeconds}} <span class="fw-normal ps-1">({{$tx.ConfirmationETABlocks}} blocks)</span></span>
</td>
</tr>
{{end}}
<tr>
<td><span tt="Replace by fee">RBF</span></td>
<td>
{{if $tx.Rbf}}
<span tt="Replace-by-Fee transaction, could be overridden by a new transaction">ON</span>
{{else}}
<span tt="Final transaction that can not be replaced unless it is dropped from the mempool.">OFF</span>
{{end}}
</td>
</tr>
{{end}}
{{if $tx.EthereumSpecific}}
<tr>
<td>Nonce</td>
<td>{{$tx.EthereumSpecific.Nonce}}</td>
</tr>
{{end}}
</tbody>
</table>
<div class="pt-1">
{{template "txdetail" .}}
</div>
{{if eq .ChainType 1}}
{{if $tx.EthereumSpecific.ParsedData}}
{{if $tx.EthereumSpecific.ParsedData.Function }}
<div class="pt-2">
<h5>Input Data</h5>
<div class="accordion" id="inputData">
<div class="accordion-item">
<h2 class="accordion-header" id="inputDataHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#inputDataBody" aria-expanded="false" aria-controls="inputDataBody">
<h5 class="mb-0">{{if $tx.EthereumSpecific.ParsedData.Name}}{{$tx.EthereumSpecific.ParsedData.Name}} {{end}}{{if $tx.EthereumSpecific.ParsedData.MethodId}} <span class="fw-normal small" tt="4-byte signature">{{$tx.EthereumSpecific.ParsedData.MethodId}}</span>{{end}}</h5>
</button>
</h2>
<div id="inputDataBody" class="accordion-collapse collapse" aria-labelledby="inputDataHeading" data-bs-parent="#inputData">
<div class="accordion-body">
<div class="row">
<div class="col-12 mx-1 mx-md-0"><span class="copyable" style="overflow-wrap: break-word;">{{$tx.EthereumSpecific.Data}}</span></div>
<div class="col-12 mx-1 mx-md-0 pt-2"><span class="copyable">{{$tx.EthereumSpecific.ParsedData.Function}}</span></div>
{{if $tx.EthereumSpecific.ParsedData.Params}}
<div class="col-12">
<table class="table data-table mt-2 mb-0">
<thead>
<tr>
<th style="width: 5%;">#</th>
<th style="width: 20%;">Type</th>
<th>Data</th>
</tr>
</thead>
<tbody>
{{range $i,$p := $tx.EthereumSpecific.ParsedData.Params}}
<tr>
<td>{{$i}}</td>
<td>{{$p.Type}}</td>
<td>
{{range $j,$v := $p.Values}}
{{if $j}}<br>{{end}}
{{if hasPrefix $p.Type "address"}}<a href="/address/{{$v}}">{{addressAliasSpan $v $data}}</a>{{else}}<span class="copyable">{{$v}}</span>{{end}}
{{end}}
</td>
</tr>
{{end}}
</tbody>
</table>
</div>
{{end}}
</div>
</div>
</div>
</div>
</div>
</div>
{{end}}
{{end}}
{{end}}
<div class="pt-4">
<button style="color: black" class="btn btn-paging" id="raw-button">
Raw Transaction
</button>
<button style="color: black" class="btn btn-paging" id="raw-hex-button">
Raw Transaction Hex
</button>
<div class="json copyable">
<pre id="raw" style="text-wrap: auto;"></pre>
</div>
<script>
const rawData = {{ $tx.CoinSpecificData }};
const txId = {{ jsStr $tx.Txid }};
handleTxPage(rawData, txId);
</script>
</div>
{{end}}