mempool/frontend/src/app/dashboard/dashboard.component.html

<app-fees-box *ngIf="(network$ | async) === ''" class="d-block mr-2 ml-2 mb-5"></app-fees-box>

<div class="container-xl">

  <div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
    <div class="col mb-4">
      <div class="card text-center">
        <div class="card-body">
          <h5 class="card-title mempoolSize">Mempool size</h5>
          <p class="card-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData; else loading">{{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} block<span [hidden]="mempoolBlocksData.blocks <= 1">s</span>)</p>
        </div>
      </div>
    </div>
    <div class="col mb-4">
      <div class="card text-center">
        <div class="card-body">
          <h5 class="card-title unconfirmedTx">Unconfirmed transactions</h5>
          <p class="card-text" *ngIf="mempoolInfoData.value; else loading">{{ mempoolInfoData.value.memPoolInfo.size | number }}</p>
        </div>
      </div>
    </div>
    <div class="col mb-4">
      <div class="card text-center">
        <div class="card-body">
          <h5 class="card-title txWeightPerSecond">Tx weight per second</h5>
            <ng-template [ngIf]="mempoolInfoData.value" [ngIfElse]="loading">
              <span *ngIf="mempoolInfoData.value.vBytesPerSecond === 0; else inSync">
                &nbsp;<span class="badge badge-pill badge-warning">Backend is synchronizing</span>
              </span>
              <ng-template #inSync>
                <div class="progress sub-text" style="width: 250px;">
                  <div class="progress-bar {{ mempoolInfoData.value.progressClass }}" style="padding: 4px;" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth}">{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} vB/s</div>
                </div>
              </ng-template>
            </ng-template>
        </div>
      </div>
    </div>
    <div class="col mb-4" *ngIf="(network$ | async) !== 'liquid'; else emptyBlock">
      <div class="card text-center">
        <div class="card-body">
          <h5 class="card-title txPerSecond">Difficulty adjustment</h5>
          <div class="progress" style="width: 250px;" *ngIf="(difficultyEpoch$ | async) as epochData; else loading">
            <div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}"><ng-template [ngIf]="epochData.change > 0">+</ng-template>{{ epochData.change | number: '1.0-2' }}%</div>
            <div class="progress-bar bg-success" role="progressbar" style="width: 0%" [ngStyle]="{'width': epochData.green}"></div>
            <div class="progress-bar bg-danger" role="progressbar" style="width: 1%; background-color: #f14d80;" [ngStyle]="{'width': epochData.red}"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col mb-4">
      <div class="card text-center">
        <div class="card-body">
          <h5 class="card-title txWeightPerSecond">Latest transactions</h5>
          <table class="table table-borderless text-left">
            <thead>
              <th style="width: 25%;">TXID</th>
              <th style="width: 50%;" class="text-right">Amount (BTC)</th>
              <th style="width: 25%;" class="text-right">Fee</th>
            </thead>
            <tbody>
              <tr *ngFor="let transaction of transactions$ | async; let i = index;">
                <td><a [routerLink]="['/tx' | relativeUrl, transaction.txid]">{{ transaction.txid | shortenString : 12 }}</a></td>
                <td class="text-right"><app-amount [satoshis]="transaction.value" digitsInfo="1.2-2" [noFiat]="true"></app-amount> (<app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat>)</td>
                <td class="text-right">{{ transaction.fee / (transaction.weight / 4) | number : '1.1-1' }} sat/vB</td>
              </tr>
            </tbody>
          </table>
          <div class="text-center">&nbsp;</div>
        </div>
      </div>
    </div>
    <div class="col mb-4">
      <div class="card text-center">
        <div class="card-body">
          <h5 class="card-title txWeightPerSecond">Latest blocks</h5>
          <table class="table table-borderless text-left">
            <thead>
              <th style="width: 15%;">Height</th>
              <th style="width: 30%;">Mined</th>
              <th style="width: 25%;">Txs</th>
              <th style="width: 30%;">Filled</th>
            </thead>
            <tbody>
              <tr *ngFor="let block of blocks$ | async; let i = index; trackBy: trackByBlock">
                <td><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
                <td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since> ago</td>
                <td>{{ block.tx_count | number }}</td>
                <td>
                  <div class="progress position-relative">
                    <div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div>
                    <div class="progress-text">{{ block.size | bytes: 2 }}</div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="text-center"><a href="" [routerLink]="['/blocks' | relativeUrl]">View all &raquo;</a></div>
        </div>
      </div>
    </div>
  </div>

</div>

<ng-template #loading>
  <div class="skeleton-loader"></div>
</ng-template>

<ng-template #emptyBlock>
  <div class="col mb-4">

  </div>
</ng-template>