mempool/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html

<div class="container-xl dashboard-container">

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

    <!-- Temporary stuff here - Will be moved to a component once we have more useful data to show -->
    <div class="col">
      <div class="main-title">Reward stats</div>
      <div class="card-wrapper">
        <div class="card" style="height: 123px">
          <div class="card-body more-padding">
            <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">in the last 8 blocks</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">sats/tx</span>
                  <div class="symbol">in the last 8 blocks</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">in the last 8 blocks</div>
                </div>
              </div>
            </div>
          </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>

    <!-- difficulty adjustment -->
    <div class="col">
      <div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
      <div class="card" style="height: 123px">
        <app-difficulty [showTitle]="false" [showProgress]="false" [showHalving]="true"></app-difficulty>
      </div>
    </div>

    <!-- pool distribution -->
    <div class="col">
      <div class="card" style="height: 385px">
        <div class="card-body">
          <app-pool-ranking [widget]=true></app-pool-ranking>
          <div class="mt-1"><a [routerLink]="['/graphs/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more
              &raquo;</a></div>
        </div>
      </div>
    </div>

    <!-- hashrate -->
    <div class="col">
      <div class="card" style="height: 385px">
        <div class="card-body">
          <app-hashrate-chart [widget]=true></app-hashrate-chart>
          <div class="mt-1"><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="dashboard.view-more">View more
              &raquo;</a></div>
        </div>
      </div>
    </div>

    <!-- Latest blocks -->
    <div class="col">
      <div class="card" style="height: 385px">
        <div class="card-body">
          <h5 class="card-title">
            Latest blocks
          </h5>
          <app-blocks-list [widget]=true></app-blocks-list>
          <div><a [routerLink]="['/mining/blocks' | relativeUrl]" i18n="dashboard.view-more">View
              more &raquo;</a></div>
        </div>
      </div>
    </div>

    <!-- Difficult adjustments -->
    <div class="col">
      <div class="card" style="height: 385px">
        <div class="card-body">
          <h5 class="card-title">
            Adjustments
          </h5>
          <app-difficulty-adjustments-table></app-difficulty-adjustments-table>
          <div class="mt-1"><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="dashboard.view-more">View more
              &raquo;</a></div>
        </div>
      </div>
    </div>

  </div>
</div>