mempool/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html

<div class="widget-toggler">
  <a href="" (click)="switchMode('avg')" class="toggler-option"
    [ngClass]="{'inactive': mode === 'avg'}"><small i18n="statistics.average-small">avg</small></a>
  <span style="color: #ffffff66; font-size: 8px"> | </span>
  <a href="" (click)="switchMode('med')" class="toggler-option"
    [ngClass]="{'inactive': mode === 'med'}"><small i18n="statistics.median-small">med</small></a>
</div>

<div class="fee-estimation-wrapper" *ngIf="statistics$ | async as statistics; else loadingReward">

  <div class="fee-estimation-container" *ngIf="mode === 'avg'">
    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
      <h5 class="card-title" i18n="ln.average-capacity">Avg Capacity</h5>
      <div class="card-text">
        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
          {{ statistics.latest?.avg_capacity || 0 | number: '1.0-0' }}
          <span i18n="shared.sats">sats</span>
        </div>
        <span class="fiat" *ngIf="statistics.previous">
          <app-fiat [value]="statistics.latest?.avg_capacity" digitsInfo="1.0-0" ></app-fiat>
        </span>
      </div>
    </div>

    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
      <h5 class="card-title" i18n="ln.average-feerate">Avg Fee Rate</h5>
      <div class="card-text" i18n-ngbTooltip="ln.average-feerate-desc"
        ngbTooltip="The average fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm"
        placement="bottom">
        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
          {{ statistics.latest?.avg_fee_rate || 0 | number: '1.0-0' }}
          <span i18n="lightning.ppm">ppm</span>
        </div>
        <span class="fiat" *ngIf="statistics.previous">
          <app-change [current]="statistics.latest?.avg_fee_rate" [previous]="statistics.previous?.avg_fee_rate"></app-change>
        </span>
      </div>
    </div>

    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
      <h5 class="card-title" i18n="ln.average-basefee">Avg Base Fee</h5>
      <div class="card-text" i18n-ngbTooltip="ln.average-basefee-desc"
        ngbTooltip="The average base fee charged by routing nodes, ignoring base fees > 5000ppm" placement="bottom">
        <div class="card-text">
          <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
            {{ statistics.latest?.avg_base_fee_mtokens || 0 | number: '1.0-0' }}
            <span i18n="shared.m-sats">mSats</span>
          </div>
          <span class="fiat" *ngIf="statistics.previous">
            <app-change [current]="statistics.latest?.avg_base_fee_mtokens" [previous]="statistics.previous?.avg_base_fee_mtokens"></app-change>
          </span>
        </div>
      </div>
    </div>
  </div>

  <div class="fee-estimation-container" *ngIf="mode === 'med'">
    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
      <h5 class="card-title" i18n="ln.median-capacity">Med Capacity</h5>
      <div class="card-text">
        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
          {{ statistics.latest?.med_capacity || 0 | number: '1.0-0' }}
          <span i18n="shared.sats">sats</span>
        </div>
        <span class="fiat" *ngIf="statistics.previous">
          <app-fiat [value]="statistics.latest?.med_capacity" digitsInfo="1.0-0" ></app-fiat>
        </span>
      </div>
    </div>

    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
      <h5 class="card-title" i18n="ln.average-feerate">Med Fee Rate</h5>
      <div class="card-text" i18n-ngbTooltip="ln.median-feerate-desc"
        ngbTooltip="The median fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm"
        placement="bottom">
        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
          {{ statistics.latest?.med_fee_rate || 0 | number: '1.0-0' }}
          <span i18n="lightning.ppm">ppm</span>
        </div>
        <span class="fiat" *ngIf="statistics.previous">
          <app-change [current]="statistics.latest?.med_fee_rate" [previous]="statistics.previous?.med_fee_rate"></app-change>
        </span>
      </div>
    </div>

    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
      <h5 class="card-title" i18n="ln.median-basefee">Med Base Fee</h5>
      <div class="card-text" i18n-ngbTooltip="ln.median-basefee-desc"
        ngbTooltip="The median base fee charged by routing nodes, ignoring base fees > 5000ppm" placement="bottom">
        <div class="card-text">
          <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
            {{ statistics.latest?.med_base_fee_mtokens || 0 | number: '1.0-0' }}
            <span i18n="shared.m-sats">mSats</span>
          </div>
        </div>
        <span class="fiat" *ngIf="statistics.previous">
          <app-change [current]="statistics.latest?.med_base_fee_mtokens" [previous]="statistics.previous?.med_base_fee_mtokens"></app-change>
        </span>
      </div>
    </div>
  </div>
</div>

<ng-template #loadingReward>
  <div class="fee-estimation-container loading-container">
    <div class="item">
      <h5 class="card-title" i18n="ln.average-capacity">Avg Capacity</h5>
      <div class="card-text">
        <div class="skeleton-loader"></div>
        <div class="skeleton-loader"></div>
      </div>
    </div>
    <div class="item">
      <h5 class="card-title" i18n="ln.average-feerate">Avg Fee Rate</h5>
      <div class="card-text">
        <div class="skeleton-loader"></div>
        <div class="skeleton-loader"></div>
      </div>
    </div>
    <div class="item">
      <h5 class="card-title" i18n="ln.average-basefee">Avg Base Fee</h5>
      <div class="card-text">
        <div class="skeleton-loader"></div>
        <div class="skeleton-loader"></div>
      </div>
    </div>
  </div>
</ng-template>