mempool/frontend/src/app/components/block/block.component.html

<div class="container-xl" (window:resize)="onResize($event)">

  <div class="title-block" id="block">
    <h1>
      <ng-template [ngIf]="blockHeight === 0"><ng-container i18n="@@2303359202781425764">Genesis</ng-container>
        <span class="next-previous-blocks">
          <a *ngIf="showNextBlocklink" [routerLink]="['/block/' | relativeUrl, nextBlockHeight]" (click)="navigateToNextBlock()" i18n-ngbTooltip="Next Block" ngbTooltip="Next Block" placement="bottom">
            <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true"></fa-icon>
          </a>
          <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
          <span placement="bottom" class="disable">
            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true"></fa-icon>
          </span>
        </span>
      </ng-template>
      <ng-template [ngIf]="blockHeight" i18n="shared.block-title">Block <ng-container *ngTemplateOutlet="blockTemplateContent"></ng-container></ng-template>
      <ng-template #blockTemplateContent>
        <span class="next-previous-blocks">
          <a *ngIf="showNextBlocklink" [routerLink]="['/block/' | relativeUrl, nextBlockHeight]" (click)="navigateToNextBlock()" i18n-ngbTooltip="Next Block" ngbTooltip="Next Block" placement="bottom">
            <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true"></fa-icon>
          </a>
          <span *ngIf="!showNextBlocklink" placement="bottom" class="disable">
            <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true"></fa-icon>
          </span>
          <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
          <a *ngIf="showPreviousBlocklink && block" [routerLink]="['/block/' | relativeUrl, block.previousblockhash]" (click)="navigateToPreviousBlock()" i18n-ngbTooltip="Previous Block" ngbTooltip="Previous Block" placement="bottom">
            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true"></fa-icon>
          </a>
          <span *ngIf="!showPreviousBlocklink" placement="bottom" class="disable">
            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true"></fa-icon>
          </span>
        </span>
      </ng-template>
    </h1>

    <div class="grow"></div>

    <button [routerLink]="['/' | relativeUrl]" class="btn btn-sm">&#10005;</button>
  </div>

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

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

    <div class="box">
      <div class="row">
        <div class="col-sm">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td class="td-width" i18n="block.hash">Hash</td>
                <td><a [routerLink]="['/block/' | relativeUrl, block.id]" title="{{ block.id }}">{{ block.id | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="block.id"></app-clipboard></td>
              </tr>
              <tr>
                <td i18n="block.timestamp">Timestamp</td>
                <td>
                  &lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
                  <div class="lg-inline">
                    <i class="symbol">(<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>)</i>
                  </div>
                </td>
              </tr>
              <tr>
                <td i18n="block.size">Size</td>
                <td [innerHTML]="'&lrm;' + (block.size | bytes: 2)"></td>
              </tr>
              <tr>
                <td i18n="block.weight">Weight</td>
                <td [innerHTML]="'&lrm;' + (block.weight | wuBytes: 2)"></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-sm">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr *ngIf="block?.extras?.medianFee != undefined">
                <td class="td-width" i18n="block.median-fee">Median fee</td>
                <td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="fiat"><app-fiat [value]="block?.extras?.medianFee * 140" digitsInfo="1.2-2" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span></td>
              </tr>
              <ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees">
                <tr>
                  <td i18n="block.total-fees|Total fees in a block">Total fees</td>
                  <td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
                    <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
                    <span class="fiat">
                      <app-fiat [value]="block.extras.totalFees" digitsInfo="1.0-0"></app-fiat>
                    </span>
                  </td>
                  <ng-template #liquidTotalFees>
                    <td>
                      <app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>&nbsp; <app-fiat
                        [value]="fees * 100000000" digitsInfo="1.2-2"></app-fiat>
                    </td>
                  </ng-template>
                </tr>
                <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
                  <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
                  <td>
                    <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
                    <span class="fiat">
                      <app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>
                    </span>
                  </td>
                </tr>
              </ng-template>
              <ng-template #loadingFees>
                <tr>
                  <td i18n="block.total-fees|Total fees in a block">Total fees</td>
                  <td style="width: 75%;"><span class="skeleton-loader"></span></td>
                </tr>
                <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
                  <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
                  <td><span class="skeleton-loader"></span></td>
                </tr>
              </ng-template>
              <tr>
                <td i18n="block.miner">Miner</td>
                <td *ngIf="stateService.env.MINING_DASHBOARD">
                  <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge"
                    [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
                    {{ block.extras.pool.name }}
                  </a>
                </td>
                <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
                  <span placement="bottom" class="badge"
                    [class]="block.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
                    {{ block.extras.pool.name }}
                </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div [hidden]="!showDetails" id="details">
      <br>

      <div class="box">
        <div class="row">
          <div class="col-sm">
            <table class="table table-borderless table-striped">
              <tbody>
                <tr>
                  <td class="td-width" i18n="transaction.version">Version</td>
                  <td>{{ block.version | decimal2hex }} <span *ngIf="displayTaprootStatus() && hasTaproot(block.version)" class="badge badge-success ml-1" >Taproot</span></td>
                </tr>
                <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
                  <td i18n="block.bits">Bits</td>
                  <td>{{ block.bits | decimal2hex }}</td>
                </tr>
                <tr>
                  <td i18n="block.merkle-root">Merkle root</td>
                  <td><p class="break-all">{{ block.merkle_root }}</p></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="col-sm" *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
            <table class="table table-borderless table-striped">
              <tbody>
                <tr>
                  <td class="td-width" i18n="block.difficulty">Difficulty</td>
                  <td>{{ block.difficulty }}</td>
                </tr>
                <tr>
                  <td i18n="block.nonce">Nonce</td>
                  <td>{{ block.nonce | decimal2hex }}</td>
                </tr>
                <tr>
                  <td i18n="block.header">Block Header Hex</td>
                  <td><a target="_blank" href="{{ network === '' ? '' : '/' + network }}/api/block/{{block.id}}/header"><fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"></fa-icon></a></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div class="text-right mt-3">
      <button type="button" class="btn btn-outline-info btn-sm btn-details" (click)="toggleShowDetails()" i18n="transaction.details|Transaction Details">Details</button>
    </div>

    <div #blockTxTitle id="block-tx-title" class="block-tx-title">
      <h2 class="text-left">
        <ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | 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>

      <ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>
    </div>
    <div class="clearfix"></div>

    <app-transactions-list [transactions]="transactions"></app-transactions-list>

    <ng-template [ngIf]="isLoadingTransactions">
      <div class="text-center mb-4" class="tx-skeleton">

        <ng-container *ngIf="(txsLoadingStatus$ | async) as txsLoadingStatus; else headerLoader">
          <div class="header-bg box">
            <div class="progress progress-dark" style="margin: 4px; height: 14px;">
              <div class="progress-bar progress-light" role="progressbar" [ngStyle]="{'width': txsLoadingStatus + '%' }"></div>
            </div>
          </div>
        </ng-container>

        <div class="header-bg box">
          <div class="row">
            <div class="col-sm">
              <span class="skeleton-loader"></span>
            </div>
            <div class="col-sm">
              <span class="skeleton-loader"></span>
              <span class="skeleton-loader"></span>
            </div>
          </div>
        </div>
      </div>
    </ng-template>
    <ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination>

  </ng-template>

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

    <div class="box">
      <div class="row">
        <div class="col-sm">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td class="td-width" colspan="2"><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td colspan="2"><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td colspan="2"><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td colspan="2"><span class="skeleton-loader"></span></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-sm">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td class="td-width" colspan="2"><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td colspan="2"><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td colspan="2"><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td colspan="2"><span class="skeleton-loader"></span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </ng-template>

  <ng-template [ngIf]="error">
    <div class="text-center">
      <span i18n="block.error.loading-block-data">Error loading block data.</span>
      <br><br>
      <i>{{ error.error }}</i>
    </div>
  </ng-template>

  <ng-template #headerLoader>
    <div class="header-bg box">
      <span class="skeleton-loader"></span>
    </div>
  </ng-template>

</div>

<br>
<br>