insight-previous-tcr/src/components/latest-blocks/latest-blocks.html

A blockchain explorer for Bitcore

<error [message]="errorMessage" *ngIf="errorMessage"></error>
<div *ngIf="!errorMessage">
  <ion-grid class="grid--table">

    <ion-row>
      <ion-col col-2><b>Height</b></ion-col>
      <ion-col col-4 text-right *ngIf="showTimeAs === 'age'"><b>Age</b></ion-col>
      <ion-col col-4 text-right *ngIf="showTimeAs === 'timestamp'"><b>Timestamp</b></ion-col>
      <ion-col text-right><b>Transactions</b></ion-col>
      <ion-col col-2 hideWhen="portrait"><b>Mined By</b></ion-col>
      <ion-col col-2 text-right><b>Size</b></ion-col>
    </ion-row>

    <loader *ngIf="loading" [type]="'grid'"></loader>

    <div *ngIf="!loading">
      <ion-row *ngFor="let block of blocks">
        <ion-col col-2>
          <a (click)="goToBlock(block.hash)">{{ block.height }}</a>
        </ion-col>
        <ion-col text-right *ngIf="showTimeAs === 'age'" col-4>
          {{ block.time | amFromUnix | amTimeAgo }}
        </ion-col>
        <ion-col text-right *ngIf="showTimeAs === 'timestamp'" col-4>
          {{ block.time * 1000 | date:'long' }}
        </ion-col>
        <ion-col text-right>
          {{ block.txlength }}
        </ion-col>
        <ion-col hideWhen="portrait" col-2>
          <a *ngIf="block.poolInfo && block.poolInfo.poolName" href="{{ block.poolInfo.url }}">
            {{ block.poolInfo.poolName }}
          </a>
        </ion-col>
        <ion-col text-right col-2>
          {{ block.size }}
        </ion-col>
      </ion-row>

      <ion-row *ngIf="showAllBlocksButton">
        <ion-col text-center>
          <button ion-button small (click)="goToBlocks()" [disabled]="blocks.length == 0">See all blocks</button>
        </ion-col>
      </ion-row>

      <ion-row *ngIf="showLoadMoreButton">
        <ion-infinite-scroll (ionInfinite)="loadMoreBlocks($event)">
          <loader [type]="'grid'"></loader>
        </ion-infinite-scroll>
      </ion-row>
    </div>
  </ion-grid>
</div>