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

<div class="container-xl dashboard-container" *ngIf="(network$ | async) !== 'liquid'; else liquidDashboard">
  <div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
    <ng-container>
      <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-lg-3 pr-lg-3 pl-2 pr-2">
          <a class="title-link mb-0" style="margin-top: -2px" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
            <h5 class="card-title d-inline"><span i18n="dashboard.mempool-goggles">Mempool Goggles</span>: {{ goggleCycle[goggleIndex].name }}</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>
          <div class="quick-filter">
            <div class="btn-group btn-group-toggle">
              <label class="btn btn-primary btn-xs" [class.active]="filter.index === goggleIndex"  *ngFor="let filter of goggleCycle">
                <input type="radio" [value]="'3m'" fragment="3m" (click)="setFilter(filter.index)" [attr.data-cy]="'3m'"> {{ filter.name }}
              </label>
            </div>
          </div>
          <div class="mempool-block-wrapper" *ngIf="webGlEnabled">
            <app-mempool-block-overview
              [index]="0"
              [resolution]="goggleResolution"
              [filterFlags]="goggleFlags"
              [filterMode]="goggleMode"
            ></app-mempool-block-overview>
          </div>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card graph-card">
        <div class="card-body">
          <ng-container *ngTemplateOutlet="mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
            <h5 class="card-title mt-3" i18n="dashboard.incoming-transactions">Incoming Transactions</h5>
            <div class="mempool-graph" *ngIf="(mempoolStats$ | async) as mempoolStats">
              <app-incoming-transactions-graph
                [height]="incomingGraphHeight"
                [left]="50"
                [right]="20"
                [data]="mempoolStats?.weightPerSecond"
                [windowPreferenceOverride]="'2h'"
                ></app-incoming-transactions-graph>
            </div>
        </div>
      </div>
    </div>
    <div class="col" style="max-height: 410px">
      <div class="card" *ngIf="(network$ | async) !== 'liquidtestnet'; else latestBlocks">
        <div class="card-body">
          <a class="title-link" href="" [routerLink]="['/rbf' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="dashboard.recent-rbf-replacements">Recent 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 *ngIf="replacements$ | async as replacements; else replacementsSkeleton">
              <tr *ngFor="let replacement of replacements">
                <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="tx-features.tag.rbf|RBF">RBF</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <ng-template #latestBlocks>
        <div class="card">
          <div class="card-body">
            <a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]">
              <h5 class="card-title d-inline" i18n="dashboard.recent-blocks">Recent Blocks</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-blocks-table">
              <thead>
                <th class="table-cell-height" i18n="dashboard.latest-blocks.height">Height</th>
                <th class="table-cell-mined" i18n="dashboard.latest-blocks.mined">Mined</th>
                <th class="table-cell-transaction-count" i18n="dashboard.latest-blocks.transaction-count">TXs</th>
                <th class="table-cell-size" i18n="dashboard.latest-blocks.size">Size</th>
              </thead>
              <tbody *ngIf="blocks$ | async as blocks; else blocksSkeleton">
                <tr *ngFor="let block of blocks; let i = index; trackBy: trackByBlock">
                  <td class="table-cell-height" ><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
                  <td class="table-cell-mined" ><app-time kind="since" [time]="block.timestamp" [fastRender]="true"></app-time></td>
                  <td class="table-cell-transaction-count">{{ block.tx_count | number }}</td>
                  <td class="table-cell-size">
                    <div class="progress">
                      <div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }">&nbsp;</div>
                      <div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </ng-template>
    </div>
    <div class="col" style="max-height: 410px">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title" i18n="dashboard.recent-transactions">Recent 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 *ngIf="transactions$ | async as transactions else recentTransactionsSkeleton">
              <tr *ngFor="let transaction of transactions; 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) !== '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 #liquidDashboard>
  <div class="container-xl dashboard-container" *ngIf="(auditStatus$ | async)?.isAuditSynced; else auditInProgress">

    <div class="row row-cols-1 row-cols-md-2">

      <div class="col card-wrapper liquid">
        <div class="main-title" i18n="liquid.federation-holdings">Liquid Federation Holdings</div>
        <div class="card">
          <div class="card-body liquid">
            <app-reserves-supply-stats [currentPeg$]="currentPeg$" [currentReserves$]="currentReserves$"></app-reserves-supply-stats>
          </div>
        </div>
      </div>

      <div class="col card-wrapper liquid">
        <div class="main-title" i18n="liquid.federation-expired-utxos">Federation Timelock-Expired UTXOs</div>
        <div class="card">
          <div class="card-body liquid">
            <app-expired-utxos-stats [expiredUtxos$]="expiredUtxos$"></app-expired-utxos-stats>
          </div>
        </div>
      </div>
  
      <div class="col">
        <div class="card-liquid card">
          <h5 class="card-title" style="padding-top: 20px;" i18n="dashboard.lbtc-supply-against-btc-holdings">L-BTC Supply Against BTC Holdings</h5>
          <div class="card-body pl-0" style="padding-top: 10px;">
            <app-lbtc-pegs-graph [data]="fullHistory$ | async" [height]="lbtcPegGraphHeight"></app-lbtc-pegs-graph>
          </div>
        </div>
      </div>
  
      <div class="col" style="margin-bottom: 1.47rem">
        <div class="card-liquid card"> 
          <div class="card-body">
            <app-reserves-ratio-stats [fullHistory$]="fullHistory$" [emergencyUtxosStats$]="emergencySpentUtxosStats$"></app-reserves-ratio-stats>
            <app-reserves-ratio [currentPeg]="currentPeg$ | async" [currentReserves]="currentReserves$ | async"></app-reserves-ratio>
          </div>
        </div>
      </div>

      <div class="col">
        <div class="card card-liquid smaller">
          <div class="card-body">
            <app-recent-pegs-stats [pegsVolume$]="pegsVolume$"></app-recent-pegs-stats>
            <app-recent-pegs-list [recentPegsList$]="recentPegsList$" [widget]="true"></app-recent-pegs-list>
          </div>
        </div>
      </div>

      <div class="col" style="margin-bottom: 1.47rem">
        <div class="card-liquid card smaller">
          <div class="card-body">
            <app-federation-addresses-stats [federationAddressesNumber$]="federationAddressesNumber$" [federationUtxosNumber$]="federationUtxosNumber$"></app-federation-addresses-stats>
            <app-federation-addresses-list [federationAddresses$]="federationAddresses$" [widget]="true"></app-federation-addresses-list>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<ng-template #replacementsSkeleton>
  <tbody>
    <tr *ngFor="let i of [1,2,3,4,5,6]">
      <td class="table-cell-txid"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
      <td class="table-cell-old-fee"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
      <td class="table-cell-new-fee"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
      <td class="table-cell-badges"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
    </tr>
  </tbody>
</ng-template>

<ng-template #recentTransactionsSkeleton>
  <tbody>
    <tr *ngFor="let i of [1,2,3,4,5,6]">
      <td class="table-cell-txid"><div class="skeleton-loader skeleton-loader-transactions"></div> </td>
      <td class="table-cell-satoshis"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
      <td class="table-cell-fiat" *ngIf="(network$ | async) === ''"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
      <td class="table-cell-fees"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
    </tr>
  </tbody>
</ng-template>

<ng-template #blocksSkeleton>
  <tbody>
    <tr *ngFor="let i of [1,2,3,4,5,6]">
      <td class="table-cell-height"><div class="skeleton-loader skeleton-loader-transactions"></div> </td>
      <td class="table-cell-mined"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
      <td class="table-cell-transaction-count"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
      <td class="table-cell-size"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
    </tr>
  </tbody>
</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 === mempoolInfoData.value.memPoolInfo.minrelaytxfee || (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 !== mempoolInfoData.value.memPoolInfo.minrelaytxfee">&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 : 2 : 'B' : null : false : 3"></span> / <span [innerHTML]="mempoolInfoData.value.memPoolInfo.maxmempool | bytes"></span></div>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<ng-template #loadingSkeletonLiquid>
  <div class="container-xl dashboard-container">

    <div class="row row-cols-1 row-cols-md-2">

      <div class="col card-wrapper liquid">
        <div class="main-title" i18n="liquid.federation-holdings">Liquid Federation Holdings</div>
        <div class="card">
          <div class="card-body liquid">
            <app-reserves-supply-stats></app-reserves-supply-stats>
          </div>
        </div>
      </div>

      <div class="col card-wrapper liquid">
        <div class="main-title" i18n="liquid.federation-expired-utxos">Federation Timelock-Expired UTXOs</div>
        <div class="card">
          <div class="card-body liquid">
            <app-expired-utxos-stats></app-expired-utxos-stats>
          </div>
        </div>
      </div>
  
      <div class="col">
        <div class="card-liquid card">
          <h5 class="card-title" style="padding-top: 20px;" i18n="dashboard.lbtc-supply-against-btc-holdings">L-BTC Supply Against BTC Holdings</h5>
          <div class="card-body pl-0" style="padding-top: 25px;">
            <app-lbtc-pegs-graph [height]="lbtcPegGraphHeight"></app-lbtc-pegs-graph>
          </div>
        </div>
      </div>
  
      <div class="col" style="margin-bottom: 1.47rem">
        <div class="card-liquid card"> 
          <div class="card-body">
            <app-reserves-ratio-stats></app-reserves-ratio-stats>
            <app-reserves-ratio></app-reserves-ratio>
          </div>
        </div>
      </div>

      <div class="col">
        <div class="card card-liquid smaller">
          <div class="card-body">
            <app-recent-pegs-stats></app-recent-pegs-stats>
            <app-recent-pegs-list [widget]="true"></app-recent-pegs-list>
          </div>
        </div>
      </div>

      <div class="col" style="margin-bottom: 1.47rem">
        <div class="card-liquid card smaller">
          <div class="card-body">
            <app-federation-addresses-stats></app-federation-addresses-stats>
            <app-federation-addresses-list [widget]="true"></app-federation-addresses-list>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<ng-template #auditInProgress>
  <ng-container *ngIf="(auditStatus$ | async) as auditStatus; else loadingSkeletonLiquid">
    <div class="in-progress-message" *ngIf="auditStatus.lastBlockAudit && auditStatus.bitcoinHeaders; else loadingSkeletonLiquid">
      <span i18n="liquid.audit-in-progress">Audit in progress: Bitcoin block height #{{ auditStatus.lastBlockAudit }} / #{{ auditStatus.bitcoinHeaders }}</span>
    </div>
  </ng-container>
</ng-template>