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

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

  <div class="title-block" id="block">
    <h1>
      <span class="next-previous-blocks">
        <span i18n="shared.block-audit-title">Block Audit</span>
        &nbsp;
        <a *ngIf="blockAudit" [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockAudit.height }}</a>
        &nbsp;
      </span>
    </h1>

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

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

  <div *ngIf="!error && !isLoading">
    

    <!-- OVERVIEW -->
    <div class="box mb-3">
      <div class="row">
        <!-- LEFT COLUMN -->
        <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, blockHash]" title="{{ blockHash }}">{{ blockHash | shortenString : 13 }}</a>
                  <app-clipboard class="d-none d-sm-inline-block" [text]="blockHash"></app-clipboard>
                </td>
              </tr>
              <tr>
                <td i18n="blockAudit.timestamp">Timestamp</td>
                <td>
                  &lrm;{{ blockAudit.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
                  <div class="lg-inline">
                    <i class="symbol">(<app-time-since [time]="blockAudit.timestamp" [fastRender]="true">
                      </app-time-since>)</i>
                  </div>
                </td>
              </tr>
              <tr>
                <td i18n="blockAudit.size">Size</td>
                <td [innerHTML]="'&lrm;' + (blockAudit.size | bytes: 2)"></td>
              </tr>
              <tr>
                <td i18n="block.weight">Weight</td>
                <td [innerHTML]="'&lrm;' + (blockAudit.weight | wuBytes: 2)"></td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- RIGHT COLUMN -->
        <div class="col-sm" *ngIf="blockAudit">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td class="td-width" i18n="shared.transaction-count">Transactions</td>
                <td>{{ blockAudit.tx_count }}</td>
              </tr>
              <tr>
                <td i18n="block.health">Block health</td>
                <td>{{ blockAudit.matchRate }}%</td>
              </tr>
              <tr>
                <td i18n="block.missing-txs">Removed txs</td>
                <td>{{ blockAudit.missingTxs.length }}</td>
              </tr>
              <tr>
                <td i18n="block.added-txs">Added txs</td>
                <td>{{ blockAudit.addedTxs.length }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div> <!-- row -->
    </div> <!-- box -->

    <!-- ADDED vs MISSING button -->
    <div class="d-flex justify-content-center menu mt-3 mb-3" *ngIf="isMobile">
      <a class="btn btn-primary w-50 mr-1 ml-1 menu-button" [class.active]="mode === 'projected'" i18n="block.projected"
        fragment="projected" (click)="changeMode('projected')">Projected</a>
      <a class="btn btn-primary w-50 mr-1 ml-1 menu-button" [class.active]="mode === 'actual'" i18n="block.actual"
        fragment="actual" (click)="changeMode('actual')">Actual</a>
    </div>
  </div>

  <ng-template [ngIf]="!error && isLoading">
    <!-- OVERVIEW -->
    <div class="box mb-3">
      <div class="row">
        <!-- LEFT COLUMN -->
        <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 class="td-width" colspan="2"><span class="skeleton-loader"></span></td></tr>
              <tr><td class="td-width" colspan="2"><span class="skeleton-loader"></span></td></tr>
              <tr><td class="td-width" colspan="2"><span class="skeleton-loader"></span></td></tr>
            </tbody>
          </table>
        </div>

        <!-- RIGHT COLUMN -->
        <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 class="td-width" colspan="2"><span class="skeleton-loader"></span></td></tr>
              <tr><td class="td-width" colspan="2"><span class="skeleton-loader"></span></td></tr>
              <tr><td class="td-width" colspan="2"><span class="skeleton-loader"></span></td></tr>
            </tbody>
          </table>
        </div>
      </div> <!-- row -->
    </div> <!-- box -->

    <!-- ADDED vs MISSING button -->
    <div class="d-flex justify-content-center menu mt-3 mb-3" *ngIf="isMobile">
      <a class="btn btn-primary w-50 mr-1 ml-1 menu-button" [class.active]="mode === 'projected'" i18n="block.projected"
        fragment="projected" (click)="changeMode('projected')">Projected</a>
      <a class="btn btn-primary w-50 mr-1 ml-1 menu-button" [class.active]="mode === 'actual'" i18n="block.actual"
        fragment="actual" (click)="changeMode('actual')">Actual</a>
    </div>
  </ng-template>

  <ng-template [ngIf]="error">
    <div *ngIf="error && error.status === 404; else generalError" class="text-center">
      <br>
      <b i18n="error.audit-unavailable">audit unavailable</b>
      <br><br>
      <i>{{ error.error }}</i>
      <br>
      <br>
    </div>
    <ng-template #generalError>
      <div class="text-center">
        <br>
        <span i18n="error.general-loading-data">Error loading data.</span>
        <br><br>
        <i>{{ error }}</i>
        <br>
        <br>
      </div>
    </ng-template>
  </ng-template>

  <!-- VISUALIZATIONS -->
  <div class="box" *ngIf="!error">
    <div class="row">
      <!-- MISSING TX RENDERING -->
      <div class="col-sm" *ngIf="webGlEnabled">
        <h3 class="block-subtitle" *ngIf="!isMobile" i18n="block.projected-block">Projected Block</h3>
        <app-block-overview-graph #blockGraphProjected [isLoading]="isLoading" [resolution]="75"
          [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx"
          (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)"></app-block-overview-graph>
      </div>

      <!-- ADDED TX RENDERING -->
      <div class="col-sm" *ngIf="webGlEnabled && !isMobile">
        <h3 class="block-subtitle" *ngIf="!isMobile" i18n="block.actual-block">Actual Block</h3>
        <app-block-overview-graph #blockGraphActual [isLoading]="isLoading" [resolution]="75"
          [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx"
          (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)"></app-block-overview-graph>
      </div>
    </div> <!-- row -->
  </div> <!-- box -->

</div>