mempool/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html

<div class="container-xl" (window:resize)="onResize($event)">
  <h1 style="float: left;" i18n="Bisq blocks header">BSQ Blocks</h1>
  <br>

  <div class="clearfix"></div>

  <ng-container *ngIf="{ value: (blocks$ | async) } as blocks">

  <div class="table-responsive-sm">
    <table class="table table-borderless table-striped">
      <thead>
        <th style="width: 25%;" i18n="Bisq block height header">Height</th>
        <th style="width: 25%;" i18n="Bisq block confirmed time header">Confirmed</th>
        <th style="width: 25%;" i18n="Bisq block total BSQ tokens sent header">Total sent</th>
        <th class="d-none d-md-block" style="width: 25%;" i18n="Bisq block transactions title">Transactions</th>
      </thead>
      <tbody *ngIf="blocks.value; else loadingTmpl">
        <tr *ngFor="let block of blocks.value[0]; trackBy: trackByFn">
          <td><a [routerLink]="['/block/' | relativeUrl, block.hash]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
          <td><app-time-since [time]="block.time / 1000" [fastRender]="true"></app-time-since></td>
          <td>{{ calculateTotalOutput(block) / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
          <td class="d-none d-md-block">{{ block.txs.length }}</td>
        </tr> 
      </tbody>
    </table>
  </div>

  <br>
  <ngb-pagination *ngIf="blocks.value" class="pagination-container" [size]="paginationSize" [collectionSize]="blocks.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>

  <div class="clearfix"></div>
  <br>
  </ng-container>
</div>

<ng-template #loadingTmpl>
  <tr *ngFor="let i of loadingItems">
    <td *ngFor="let j of [1, 2, 3, 4]"><span class="skeleton-loader"></span></td>
  </tr>
</ng-template>