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

<app-indexing-progress></app-indexing-progress>

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

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

    <!-- 24h stats -->
    <div class="col">
      <div class="main-title">
        <span [attr.data-cy]="'pending-accelerations'" i18n="accelerator.pending-accelerations">Pending accelerations</span>
      </div>
      <div class="card-wrapper">
        <div class="card">
          <div class="card-body more-padding">
            <app-acceleration-stats timespan="now"></app-acceleration-stats>
          </div>
        </div>
      </div>
    </div>

    <!-- 1w stats -->
    <div class="col">
      <div class="main-title">
        <span [attr.data-cy]="'acceleration-stats'" i18n="accelerator.acceleration-stats">Acceleration stats</span>&nbsp;
        <span style="font-size: xx-small" i18n="mining.144-blocks">(1008 blocks)</span>
      </div>
      <div class="card-wrapper">
        <div class="card">
          <div class="card-body more-padding">
            <app-acceleration-stats timespan="1w"></app-acceleration-stats>
          </div>
        </div>
      </div>
    </div>

    <!-- acceleration fees graph -->
    <div class="col" style="margin-bottom: 1.47rem">
      <div class="card graph-card">
        <div class="card-body pl-2 pr-2">
          <app-acceleration-fees-graph [attr.data-cy]="'acceleration-fees'" [widget]=true></app-acceleration-fees-graph>
          <div class="mt-1"><a [attr.data-cy]="'acceleration-fees-view-more'" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
        </div>
      </div>
    </div>

    <!-- block fee rates -->
    <div class="col" style="margin-bottom: 1.47rem">
      <div class="card">
        <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
          <app-block-fee-rates-graph [attr.data-cy]="'hashrate-graph'" [widget]="true"></app-block-fee-rates-graph>
          <div class="mt-1"><a [routerLink]="['/graphs/mining/block-fee-rates' | relativeUrl]" fragment="1m" i18n="dashboard.view-more">View more &raquo;</a></div>
        </div>
      </div>
    </div>

    <!-- Latest accelerations -->
    <div class="col">
      <div class="card">
        <div class="card-body">
          <a class="title-link" href="" [routerLink]="['/acceleration-list' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="dashboard.latest-accelerations">Latest accelerations</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>
          <app-accelerations-list [attr.data-cy]="'latest-accelerations'" [widget]=true></app-accelerations-list>
        </div>
      </div>
    </div>

    <!-- Latest blocks -->
    <div class="col">
      <div class="card">
        <div class="card-body">
          <a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="dashboard.latest-blocks">Latest 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-pool" i18n="mining.pool-name">Pool</th>
              <th class="table-cell-fee" i18n="block.median-fee">Median fee</th>
              <th class="table-cell-acceleration-count" i18n="accelerator.transaction-count">Accelerations</th>
            </thead>
            <tbody>
              <tr *ngFor="let block of blocks$ | async; let i = index">
                <td class="table-cell-height" ><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
                <td class="table-cell-pool">
                  <a class="clear-link" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
                    <img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
                      onError="this.src = '/resources/mining-pools/default.svg'">
                    <span class="pool-name">{{ block.extras.pool.name }}</span>
                  </a>
                </td>
                <td class="table-cell-fee" ><app-fee-rate [fee]="block?.extras?.medianFee" rounding="1.0-0"></app-fee-rate></td>
                <td class="table-cell-acceleration-count">{{ block.accelerationCount | number }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>
</div>