mempool/frontend/src/app/components/reward-stats/reward-stats.component.html

<div class="fee-estimation-wrapper" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
  <div class="fee-estimation-container">
    <div class="item">
      <h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
      <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip"
        ngbTooltip="Amount being paid to miners in the past 144 blocks" placement="bottom">
        <div class="fee-text">
          <app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
        </div>
        <span class="fiat">
          <app-fiat [value]="rewardStats.totalReward"></app-fiat>
        </span>
      </div>
    </div>
    <div class="item">
      <h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
      <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip"
        ngbTooltip="Average miners' reward per transaction in the past 144 blocks" placement="bottom">
        <div class="fee-text">
          {{ rewardStats.rewardPerTx | amountShortener }}
          <span i18n="shared.sat-vbyte|sat/vB">sats/tx</span>
        </div>
        <span class="fiat">
          <app-fiat [value]="rewardStats.rewardPerTx"></app-fiat>
        </span>
      </div>
    </div>
    <div class="item">
      <h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
      <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip"
        ngbTooltip="Fee paid on average for each transaction in the past 144 blocks" placement="bottom">
        <div class="fee-text">{{ rewardStats.feePerTx | amountShortener }}
          <span i18n="shared.sat-vbyte|sat/vB">sats/tx</span>
        </div>
        <span class="fiat">
          <app-fiat [value]="rewardStats.feePerTx"></app-fiat>
        </span>
      </div>
    </div>
  </div>
</div>

<ng-template #loadingReward>
  <div class="fee-estimation-container loading-container">
    <div class="item">
      <h5 class="card-title" i18n="fees-box.low-priority">Low priority</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="fees-box.medium-priority">Medium priority</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="fees-box.high-priority">High priority</h5>
      <div class="card-text">
        <div class="skeleton-loader"></div>
        <div class="skeleton-loader"></div>
      </div>
    </div>
  </div>
</ng-template>

<!-- <div class="reward-container" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
  <div class="item">
    <h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
    <div class="card-text">
      <app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
      <div class="symbol" i18n="rewardStats.totalReward-desc">were rewarded to miners</div>
    </div>
  </div>
  <div class="item">
    <h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
    <div class="card-text">
      {{ rewardStats.rewardPerTx | amountShortener }}
      <span class="symbol" i18n="mining.sats-per-tx">sats/tx</span>
      <div class="symbol" i18n="mining.rewards-per-tx-desc">miners reward / tx count</div>
    </div>
  </div>
  <div class="item">
    <h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
    <div class="card-text">
      {{ rewardStats.feePerTx | amountShortener}}
      <span class="symbol">sats/tx</span>
      <div class="symbol" i18n="mining.average-fee-desc">were paid per tx</div>
    </div>
  </div>
</div>

<ng-template #loadingReward>
  <div class="reward-container">
    <div class="item">
      <h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
      <div class="card-text skeleton">
        <div class="skeleton-loader"></div>
        <div class="skeleton-loader"></div>
      </div>
    </div>
    <div class="item">
      <h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
      <div class="card-text skeleton">
        <div class="skeleton-loader"></div>
        <div class="skeleton-loader"></div>
      </div>
    </div>
    <div class="item">
      <h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
      <div class="card-text skeleton">
        <div class="skeleton-loader"></div>
        <div class="skeleton-loader"></div>
      </div>
    </div>
  </div>
</ng-template> -->