100 lines
5.1 KiB
HTML
100 lines
5.1 KiB
HTML
<app-indexing-progress *ngIf="!widget"></app-indexing-progress>
|
|
|
|
<div class="container-xl" [class]="widget ? 'widget' : 'full-height'">
|
|
<h1 *ngIf="!widget" class="float-left" i18n="master-page.blocks">Blocks</h1>
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
<div style="min-height: 295px">
|
|
<table class="table table-borderless">
|
|
<thead>
|
|
<th class="height text-left" [class]="widget ? 'widget' : ''" i18n="latest-blocks.height">Height</th>
|
|
<th class="pool text-left" [class]="widget ? 'widget' : ''" i18n="mining.pool-name">Pool</th>
|
|
<th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget">Timestamp</th>
|
|
<th class="mined" i18n="latest-blocks.mined" *ngIf="!widget">Mined</th>
|
|
<th class="reward text-right" i18n="latest-blocks.reward" [class]="widget ? 'widget' : ''">Reward</th>
|
|
<th class="fees text-right" i18n="latest-blocks.fees" *ngIf="!widget">Fees</th>
|
|
<th class="txs text-right" i18n="dashboard.txs" [class]="widget ? 'widget' : ''">TXs</th>
|
|
<th class="size" i18n="latest-blocks.size" *ngIf="!widget">Size</th>
|
|
</thead>
|
|
<tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
|
|
<tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
|
|
<td class="text-left" [class]="widget ? 'widget' : ''">
|
|
<a [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height
|
|
}}</a>
|
|
</td>
|
|
<td class="pool text-left" [class]="widget ? 'widget' : ''">
|
|
<div class="tooltip-custom">
|
|
<a class="clear-link" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]">
|
|
<img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
|
|
onError="this.src = './resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
|
|
<span class="pool-name">{{ block.extras.pool.name }}</span>
|
|
</a>
|
|
<span *ngIf="!widget" class="tooltiptext badge badge-secondary scriptmessage">{{ block.extras.coinbaseRaw | hex2ascii }}</span>
|
|
</div>
|
|
</td>
|
|
<td class="timestamp" *ngIf="!widget">
|
|
‎{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
|
|
</td>
|
|
<td class="mined" *ngIf="!widget">
|
|
<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
|
|
</td>
|
|
<td class="reward text-right" [class]="widget ? 'widget' : ''">
|
|
<app-amount [satoshis]="block.extras.reward" [noFiat]="true" digitsInfo="1.2-2"></app-amount>
|
|
</td>
|
|
<td class="fees text-right" *ngIf="!widget">
|
|
<app-amount [satoshis]="block.extras.totalFees" [noFiat]="true" digitsInfo="1.2-2"></app-amount>
|
|
</td>
|
|
<td class="txs text-right" [class]="widget ? 'widget' : ''">
|
|
{{ block.tx_count | number }}
|
|
</td>
|
|
<td class="size" *ngIf="!widget">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-mempool" role="progressbar"
|
|
[ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div>
|
|
<div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<ng-template #skeleton>
|
|
<tbody>
|
|
<tr *ngFor="let item of skeletonLines">
|
|
<td class="height text-left" [class]="widget ? 'widget' : ''">
|
|
<span class="skeleton-loader" style="max-width: 75px"></span>
|
|
</td>
|
|
<td class="pool text-left" [class]="widget ? 'widget' : ''">
|
|
<img width="1" height="25" style="opacity: 0">
|
|
<span class="skeleton-loader" style="max-width: 125px"></span>
|
|
</td>
|
|
<td class="timestamp" *ngIf="!widget">
|
|
<span class="skeleton-loader" style="max-width: 150px"></span>
|
|
</td>
|
|
<td class="mined" *ngIf="!widget">
|
|
<span class="skeleton-loader" style="max-width: 125px"></span>
|
|
</td>
|
|
<td class="reward text-right" [class]="widget ? 'widget' : ''">
|
|
<span class="skeleton-loader" style="max-width: 75px"></span>
|
|
</td>
|
|
<td class="fees text-right" *ngIf="!widget">
|
|
<span class="skeleton-loader" style="max-width: 75px"></span>
|
|
</td>
|
|
<td class="txs text-right" [class]="widget ? 'widget' : ''">
|
|
<span class="skeleton-loader" style="max-width: 75px"></span>
|
|
</td>
|
|
<td class="size" *ngIf="!widget">
|
|
<span class="skeleton-loader"></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</ng-template>
|
|
</table>
|
|
|
|
<ngb-pagination *ngIf="!widget" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
|
|
[collectionSize]="blocksCount" [rotate]="true" [maxSize]="maxSize" [pageSize]="15" [(page)]="page"
|
|
(pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
|
|
</ngb-pagination>
|
|
</div>
|
|
|
|
</div>
|