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

<div class="container-xl">

  <div class="title-block">
    <h1><ng-template [ngIf]="blockHeight" i18n="shared.block-title">Block <ng-container *ngTemplateOutlet="blockTemplateContent"></ng-container></ng-template></h1>
  </div>

  <ng-template #blockTemplateContent><a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a></ng-template>

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

  <ng-template [ngIf]="!isLoading && !error">

    <div class="box block-container">
      <div class="row">
        <div class="col">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td class="td-width" i18n="block.hash">Hash</td>
                <td><a [routerLink]="['/block/' | relativeUrl, block.hash]" title="{{ block.hash }}">{{ block.hash | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="block.hash"></app-clipboard></td>
              </tr>
              <tr>
                <td i18n="transaction.timestamp|Transaction Timestamp">Timestamp</td>
                <td>
                  &lrm;{{ block.time | date:'yyyy-MM-dd HH:mm' }}
                  <div class="lg-inline">
                    <i class="symbol">(<app-time-since [time]="block.time / 1000" [fastRender]="true"></app-time-since>)</i>
                  </div>
                </td>
              </tr>
          </table>
        </div>
        <div class="col">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td class="td-width" i18n="block.previous_hash|Transaction Previous Hash">Previous hash</td>
                <td><a [routerLink]="['/block/' | relativeUrl, block.previousBlockHash]" title="{{ block.hash }}">{{ block.previousBlockHash | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="block.previousBlockHash"></app-clipboard></td>
              </tr>
          </table>
        </div>
      </div>
    </div>

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

    <br>

    <h2>
      <ng-container *ngTemplateOutlet="block.txs.length === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.txs.length| number}"></ng-container>
      <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
      <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
    </h2>

    <ng-template ngFor let-tx [ngForOf]="block.txs">

      <div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
        <a [routerLink]="['/tx/' | relativeUrl, tx.id]" [state]="{ data: tx }">
          <span style="float: left;" class="d-block d-md-none">{{ tx.id | shortenString : 16 }}</span>
          <span style="float: left;" class="d-none d-md-block">{{ tx.id }}</span>
        </a>
        <div class="float-right">
          &lrm;{{ tx.time | date:'yyyy-MM-dd HH:mm' }}
        </div>
        <div class="clearfix"></div>
      </div>
  
      <app-bisq-transfers [tx]="tx" [showConfirmations]="true"></app-bisq-transfers>
  
      <br>
    </ng-template>

  </ng-template>

  <ng-template [ngIf]="isLoading && !error">
    <div class="box">
      <div class="row">
        <div class="col">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td class="td-width" i18n="block.hash">Hash</td>
                <td><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td i18n="transaction.timestamp|Transaction Timestamp">Timestamp</td>
                <td><span class="skeleton-loader"></span></td>
              </tr>
          </table>
        </div>
        <div class="col">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td class="td-width" i18n="block.previous_hash|Transaction Previous Hash">Previous hash</td>
                <td><span class="skeleton-loader"></span></td>
              </tr>
          </table>
        </div>
      </div>
    </div>
  </ng-template>

  <ng-template [ngIf]="error">
    <div class="clearfix"></div>

    <div class="text-center">
      Error loading block
      <br>
      <i>{{ error.status }}: {{ error.statusText }}</i>
    </div>
  </ng-template>

</div>