142 lines
4.7 KiB
HTML
142 lines
4.7 KiB
HTML
<div class="container">
|
|
|
|
<app-blockchain position="top" [txFeePerVSize]="tx?.fee / (tx?.weight / 4)" [markHeight]="tx?.status?.block_height"></app-blockchain>
|
|
|
|
<div class="title-block">
|
|
<h1 style="float: left;">Transaction</h1>
|
|
<a [routerLink]="['/tx/', txId]" style="line-height: 56px; margin-left: 10px;">{{ txId }}</a>
|
|
<app-clipboard [text]="txId"></app-clipboard>
|
|
|
|
<ng-template [ngIf]="tx?.status?.confirmed" [ngIfElse]="unconfirmedBtn">
|
|
<button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success float-right mr-2" style="margin-top: 0.75rem;">{{ latestBlock.height - tx.status.block_height + 1 }} confirmation<ng-container *ngIf="latestBlock.height - tx.status.block_height + 1 > 1">s</ng-container></button>
|
|
</ng-template>
|
|
<ng-template #unconfirmedBtn>
|
|
<button type="button" class="btn btn-sm btn-danger float-right mr-2" style="margin-top: 0.75rem;">Unconfirmed</button>
|
|
</ng-template>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<ng-template [ngIf]="!isLoadingTx && !error">
|
|
|
|
<ng-template [ngIf]="tx.status.confirmed" [ngIfElse]="unconfirmedTemplate">
|
|
|
|
<div class="box">
|
|
|
|
<table class="table table-borderless table-striped">
|
|
<tbody>
|
|
<tr>
|
|
<td>Included in block</td>
|
|
<td><a [routerLink]="['/block/', tx.status.block_hash]" [state]="{ data: { blockHeight: tx.status.block_height } }">#{{ tx.status.block_height }}</a> at {{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }} <i>(<app-time-since [time]="tx.status.block_time"></app-time-since> ago)</i></td>
|
|
</tr>
|
|
<ng-template [ngIf]="tx.fee">
|
|
<tr>
|
|
<td>Fees</td>
|
|
<td>{{ tx.fee | number }} sats <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * tx.fee / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span>)</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Fees per vByte</td>
|
|
<td>{{ tx.fee / (tx.weight / 4) | number : '1.2-2' }} sat/vB</td>
|
|
</tr>
|
|
</ng-template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
</ng-template>
|
|
|
|
<ng-template #unconfirmedTemplate>
|
|
|
|
<div class="box">
|
|
|
|
<table class="table table-borderless table-striped">
|
|
<tbody>
|
|
<ng-template [ngIf]="transactionTime !== 0">
|
|
<tr *ngIf="transactionTime === -1; else firstSeenTmpl">
|
|
<td><span class="skeleton-loader"></span></td>
|
|
<td><span class="skeleton-loader"></span></td>
|
|
</tr>
|
|
<ng-template #firstSeenTmpl>
|
|
<tr>
|
|
<td>First seen</td>
|
|
<td><i><app-time-since [time]="transactionTime"></app-time-since> ago</i></td>
|
|
</tr>
|
|
</ng-template>
|
|
</ng-template>
|
|
<tr>
|
|
<td>Fees</td>
|
|
<td>{{ tx.fee | number }} sats <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * tx.fee / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span>)</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Fees per vByte</td>
|
|
<td>{{ tx.fee / (tx.weight / 4) | number : '1.2-2' }} sat/vB</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<br>
|
|
|
|
<h2>Inputs & Outputs</h2>
|
|
|
|
<app-transactions-list [transactions]="[tx]" [transactionPage]="true"></app-transactions-list>
|
|
|
|
<h2>Details</h2>
|
|
<div class="box">
|
|
<div class="row">
|
|
<table class="table table-borderless table-striped">
|
|
<tbody>
|
|
<tr>
|
|
<td>Size</td>
|
|
<td>{{ tx.size | bytes: 2 }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Weight</td>
|
|
<td>{{ tx.weight | wuBytes: 2 }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</ng-template>
|
|
|
|
<ng-template [ngIf]="isLoadingTx && !error">
|
|
|
|
<div class="box">
|
|
<table class="table table-borderless table-striped">
|
|
<tbody>
|
|
<tr>
|
|
<td><span class="skeleton-loader"></span></td>
|
|
<td><span class="skeleton-loader"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="skeleton-loader"></span></td>
|
|
<td><span class="skeleton-loader"></span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="text-center">
|
|
<div class="spinner-border"></div>
|
|
<br><br>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-template [ngIf]="error">
|
|
<div class="text-center">
|
|
Error loading transaction data.
|
|
<br>
|
|
<i>{{ error.error }}</i>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
|
|
<br>
|