mempool/frontend/src/app/components/fees-box/fees-box.component.html
2020-10-28 20:26:48 +07:00

40 lines
1.6 KiB
HTML

<table style="width: 100%;">
<tr *ngIf="(isLoadingWebSocket$ | async) === false && (feeEstimations$ | async) as feeEstimations; else loadingFees">
<td class="d-none d-md-block">
<h5 class="card-title">Low priority</h5>
<p class="card-text">
{{ feeEstimations.hourFee }} sat/vB (<app-fiat [value]="feeEstimations.hourFee * 140" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>)
</p>
</td>
<td>
<h5 class="card-title">Medium priority</h5>
<p class="card-text">
{{ feeEstimations.halfHourFee }} sat/vB (<app-fiat [value]="feeEstimations.halfHourFee * 140" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>)
</p>
</td>
<td>
<h5 class="card-title">High priority</h5>
<p class="card-text">
{{ feeEstimations.fastestFee }} sat/vB (<app-fiat [value]="feeEstimations.fastestFee * 140" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>)
</p>
</td>
</tr>
</table>
<ng-template #loadingFees>
<tr>
<td class="d-none d-md-block">
<h5 class="card-title">Low priority</h5>
<p class="card-text"><span class="skeleton-loader"></span></p>
</td>
<td>
<h5 class="card-title">Medium priority</h5>
<p class="card-text"><span class="skeleton-loader" style="width: 80%;"></span></p>
</td>
<td>
<h5 class="card-title">High priority</h5>
<p class="card-text"><span class="skeleton-loader"></span></p>
</td>
</tr>
</ng-template>