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

<div class="container-xl dashboard-container">
  <div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
    <ng-container *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'">
      <div class="col card-wrapper">
        <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
        <div class="card">
          <div class="card-body less-padding">
            <app-fees-box class="d-block"></app-fees-box>
          </div>
        </div>
      </div>
      <div class="col">
        <app-difficulty></app-difficulty>
      </div>
    </ng-container>
    <div class="col">
      <div class="card graph-card">
        <div class="card-body pl-0">
          <div style="padding-left: 1.25rem;">
            <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? lbtcPegs : mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
            <hr>
          </div>
          <ng-template [ngIf]="(network$ | async) !== 'liquid'" [ngIfElse]="liquidPegs">
            <ng-container *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
              <div class="mempool-graph">
                <app-mempool-graph
                [template]="'widget'"
                [data]="mempoolStats.value?.mempool"
                [windowPreferenceOverride]="'2h'"
                ></app-mempool-graph>
              </div>
            </ng-container>
          </ng-template>
          <ng-template #liquidPegs>
            <app-lbtc-pegs-graph [data]="liquidPegsMonth$ | async"></app-lbtc-pegs-graph>
          </ng-template>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card graph-card">
        <div class="card-body">
          <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? mempoolTable : txPerSecond; context: { $implicit: mempoolInfoData }"></ng-container>
          <hr>
          <div class="mempool-graph" *ngIf="stateService.network === 'liquid'; else mempoolGraph">
            <table class="table table-borderless table-striped" *ngIf="(featuredAssets$ | async) as featuredAssets else loadingAssetsTable">
              <tbody>
                <tr *ngFor="let group of featuredAssets">
                  <td class="asset-icon">
                    <a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">
                      <img class="assetIcon" [src]="'/api/v1/asset/' + group.asset + '/icon'">
                    </a>
                  </td>
                  <td class="asset-title">
                    <a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">{{ group.name }}</a>
                  </td>
                  <td class="circulating-amount"><app-asset-circulation [assetId]="group.asset"></app-asset-circulation></td>
                </tr>
              </tbody>
            </table>
          </div>
          <ng-template #mempoolGraph>
            <div class="mempool-graph" *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
              <app-incoming-transactions-graph
                [left]="50"
                [data]="mempoolStats.value?.weightPerSecond"
                [windowPreferenceOverride]="'2h'"
                ></app-incoming-transactions-graph>
            </div>
          </ng-template>
        </div>
      </div>
    </div>
    <div class="col" style="max-height: 410px">
      <div class="card">
        <div class="card-body">
          <a class="title-link" href="" [routerLink]="['/rbf' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="dashboard.latest-rbf-replacements">Latest replacements</h5>
            <span>&nbsp;</span>
            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: '#4a68b9'"></fa-icon>
          </a>
          <table class="table lastest-replacements-table">
            <thead>
              <th class="table-cell-txid" i18n="dashboard.latest-transactions.txid">TXID</th>
              <th class="table-cell-old-fee" i18n="dashboard.previous-transaction-fee">Previous fee</th>
              <th class="table-cell-new-fee" i18n="dashboard.new-transaction-fee">New fee</th>
              <th class="table-cell-badges" i18n="transaction.status|Transaction Status">Status</th>
            </thead>
            <tbody>
              <tr *ngFor="let replacement of replacements$ | async;">
                <td class="table-cell-txid">
                  <a [routerLink]="['/tx' | relativeUrl, replacement.txid]">
                    <app-truncate [text]="replacement.txid" [lastChars]="5"></app-truncate>
                  </a>
                </td>
                <td class="table-cell-old-fee"><app-fee-rate [fee]="replacement.oldFee" [weight]="replacement.oldVsize * 4"></app-fee-rate></td>
                <td class="table-cell-new-fee"><app-fee-rate [fee]="replacement.newFee" [weight]="replacement.newVsize * 4"></app-fee-rate></td>
                <td class="table-cell-badges">
                  <span *ngIf="replacement.mined" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
                  <span *ngIf="replacement.fullRbf" class="badge badge-info" i18n="transaction.full-rbf">Full RBF</span>
                  <span *ngIf="!replacement.fullRbf" class="badge badge-success" i18n="transaction.rbf">RBF</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col" style="max-height: 410px">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title" i18n="dashboard.latest-transactions">Latest transactions</h5>
          <table class="table latest-transactions">
            <thead>
              <th class="table-cell-txid" i18n="dashboard.latest-transactions.txid">TXID</th>
              <th class="table-cell-satoshis" i18n="dashboard.latest-transactions.amount">Amount</th>
              <th class="table-cell-fiat" *ngIf="(network$ | async) === ''">{{ currency }}</th>
              <th class="table-cell-fees" i18n="transaction.fee|Transaction fee">Fee</th>
            </thead>
            <tbody>
              <tr *ngFor="let transaction of transactions$ | async; let i = index;">
                <td class="table-cell-txid">
                  <a [routerLink]="['/tx' | relativeUrl, transaction.txid]">
                    <app-truncate [text]="transaction.txid" [lastChars]="5"></app-truncate>
                  </a>
                </td>
                <td class="table-cell-satoshis"><app-amount *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'; else liquidAmount" [satoshis]="transaction.value" digitsInfo="1.2-4" [noFiat]="true"></app-amount><ng-template #liquidAmount i18n="shared.confidential">Confidential</ng-template></td>
                <td class="table-cell-fiat" *ngIf="(network$ | async) === ''" ><app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat></td>
                <td class="table-cell-fees"><app-fee-rate [fee]="transaction.fee" [weight]="transaction.vsize * 4"></app-fee-rate></td>
              </tr>
            </tbody>
          </table>
          <div class="">&nbsp;</div>
        </div>
      </div>
    </div>
  </div>
</div>

<ng-template #loadingAssetsTable>
  <table class="table table-borderless table-striped asset-table">
    <tbody>
      <tr *ngFor="let i of [1,2,3,4]">
        <td class="asset-icon">
          <div class="skeleton-loader skeleton-loader-transactions"></div>
        </td>
        <td class="asset-title">
          <div class="skeleton-loader skeleton-loader-transactions"></div>
        </td>
        <td class="asset-title d-none d-md-table-cell">
          <div class="skeleton-loader skeleton-loader-transactions"></div>
        </td>
        <td class="asset-title">
          <div class="skeleton-loader skeleton-loader-transactions"></div>
        </td>
      </tr>
    </tbody>
  </table>
</ng-template>

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

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

<ng-template #loadingbig>
  <span class="skeleton-loader skeleton-loader-big" ></span>
</ng-template>

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

  </div>
</ng-template>

<ng-template #mempoolTable let-mempoolInfoData>
  <div class="mempool-info-data">
    <div class="item">
      <h5 *ngIf="!mempoolInfoData.value || mempoolInfoData.value.memPoolInfo.mempoolminfee === 0.00001 || (stateService.env.BASE_MODULE === 'liquid' && mempoolInfoData.value.memPoolInfo.mempoolminfee === 0.000001) else purgingText" class="card-title" i18n="dashboard.minimum-fee|Minimum mempool fee">Minimum fee</h5>
      <ng-template #purgingText><h5 class="card-title" i18n="dashboard.purging|Purgin below fee">Purging</h5></ng-template>
      <p class="card-text" *ngIf="(isLoadingWebSocket$ | async) === false && mempoolInfoData.value; else loading">
        <ng-template [ngIf]="mempoolInfoData.value.memPoolInfo.mempoolminfee > 0.00001">&lt; </ng-template><app-fee-rate [fee]="mempoolInfoData.value.memPoolInfo.mempoolminfee * 100000"></app-fee-rate>
      </p>
    </div>
    <div class="item">
      <h5 class="card-title" i18n="dashboard.unconfirmed|Unconfirmed count">Unconfirmed</h5>
      <p class="card-text" *ngIf="(isLoadingWebSocket$ | async) === false && mempoolInfoData.value; else loading">
        {{ mempoolInfoData.value.memPoolInfo.size | number }} <span i18n="dashboard.txs">TXs</span>
      </p>
    </div>
    <div class="item bar">
      <h5 class="card-title" i18n="dashboard.memory-usage|Memory usage">Memory usage</h5>
      <div class="card-text" *ngIf="(isLoadingWebSocket$ | async) === false && mempoolInfoData.value; else loadingbig">
        <div class="progress">
          <div class="progress-bar {{ mempoolInfoData.value.mempoolSizeProgress }}" role="progressbar" [ngStyle]="{'width': (mempoolInfoData.value.memPoolInfo.usage / mempoolInfoData.value.memPoolInfo.maxmempool * 100) + '%' }">&nbsp;</div>
          <div class="progress-text">&lrm;<span [innerHTML]="mempoolInfoData.value.memPoolInfo.usage | bytes"></span> / <span [innerHTML]="mempoolInfoData.value.memPoolInfo.maxmempool | bytes"></span></div>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<ng-template #lbtcPegs let-mempoolInfoData>
  <div class="mempool-info-data">
    <div class="item">
      <h5 class="card-title" i18n="dashboard.lbtc-pegs-in-circulation">L-BTC in circulation</h5>
      <ng-container *ngIf="(liquidPegsMonth$ | async) as liquidPegsMonth; else loadingTransactions">
        <p class="card-text">{{ liquidPegsMonth.series.slice(-1)[0] | number: '1.2-2' }} <span>L-BTC</span></p>
      </ng-container>
    </div>
  </div>
</ng-template>

<ng-template #txPerSecond let-mempoolInfoData>
  <h5 class="card-title" i18n="dashboard.incoming-transactions">Incoming transactions</h5>
  <ng-template [ngIf]="(isLoadingWebSocket$ | async) === false && mempoolInfoData.value" [ngIfElse]="loadingTransactions">
    <span *ngIf="(mempoolLoadingStatus$ | async) !== 100; else inSync">
      &nbsp;<span class="badge badge-pill badge-warning"><ng-container i18n="dashboard.backend-is-synchronizing">Backend is synchronizing</ng-container> ({{ mempoolLoadingStatus$ | async }}%)</span>
    </span>
    <ng-template #inSync>
      <div class="progress inc-tx-progress-bar">
        <div class="progress-bar {{ mempoolInfoData.value.progressColor }}" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth}">&nbsp;</div>
        <div *only-vsize class="progress-text">&lrm;{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
        <div *only-weight class="progress-text">&lrm;{{ mempoolInfoData.value.vBytesPerSecond * 4 | ceil | number }} <ng-container i18n="shared.weight-per-second|WU/s">WU/s</ng-container></div>
      </div>
    </ng-template>
  </ng-template>
</ng-template>