mempool/frontend/src/app/components/latest-transactions/latest-transactions.component.html
2020-03-05 16:13:46 +07:00

30 lines
1.4 KiB
HTML

<table class="table table-borderless">
<thead>
<th style="width: 58%">Transaction ID</th>
<th class="d-none d-xl-block" style="width: 12%;">Value</th>
<th style="width: 10%;">Size</th>
<th style="width: 15%">Fee</th>
</thead>
<tbody>
<ng-container *ngIf="(transactions$ | async) as transactions">
<ng-template [ngIf]="!isLoading">
<tr *ngFor="let transaction of transactions">
<td class="d-block d-md-none d-xl-none"><a [routerLink]="['/tx/', transaction.txid]">{{ transaction.txid | shortenString }}</a></td>
<td class="d-none d-md-block d-xl-none"><a [routerLink]="['/tx/', transaction.txid]">{{ transaction.txid }}</a></td>
<td class="d-none d-xl-block">{{ transaction.value / 100000000 | number: '1.8-8' }} BTC</td>
<td>{{ transaction.vsize | vbytes: 2 }}</td>
<td>{{ transaction.fee / transaction.vsize | number : '1.2-2'}} sats/vB</td>
</tr>
</ng-template>
</ng-container>
<ng-template [ngIf]="isLoading">
<tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
<td><span class="skeleton-loader"></span></td>
<td class="d-none d-lg-block" style="width: 25%;"><span class="skeleton-loader"></span></td>
<td style="width: 25%;"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</ng-template>
</tbody>
</table>