mempool/frontend/src/app/components/pool/pool.component.html

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

<div class="container-xl">

  <!-- Pool overview -->
  <div *ngIf="poolStats$ | async as poolStats; else loadingMain">
    <div style="display:flex" class="mb-3">
      <img width="50" height="50" src="{{ poolStats['logo'] }}" [alt]="poolStats.pool.name + ' mining pool logo'"
        onError="this.src = '/resources/mining-pools/default.svg'" class="mr-3">
      <h1 class="m-0 pt-1 pt-md-0">{{ poolStats.pool.name }}</h1>
    </div>

    <div class="box">
      <div class="row">

        <div class="col-lg-6">
          <table class="table table-borderless table-striped taller" style="table-layout: fixed;">
            <tbody>

              <!-- Regexes desktop -->
              <tr *ngIf="!isMobile()" class="taller-row">
                <td class="label" i18n="mining.tags">Tags</td>
                <td *ngIf="poolStats.pool.regexes.length else nodata" style="vertical-align: middle">
                  <div class="scrollable">{{ poolStats.pool.regexes }}</div>
                </td>
              </tr>
              <!-- Regexes mobile -->
              <tr *ngIf="isMobile()">
                <td colspan=2>
                  <span class="label" i18n="mining.tags">Tags</span>
                  <div *ngIf="poolStats.pool.regexes.length else nodatamobile" class="overflow-auto">
                    {{ poolStats.pool.regexes }}
                  </div>
                </td>
              </tr>

              <!-- Addresses desktop -->
              <tr *ngIf="!isMobile()" class="taller-row">
                <td class="label addresses" i18n="mining.addresses">Addresses</td>
                <td *ngIf="poolStats.pool.addresses.length else nodata" style="padding-top: 25px">
                  <a  class="addresses-data" [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]">
                    {{ poolStats.pool.addresses[0] }}
                  </a>
                  <div>
                    <div #collapse="ngbCollapse" [(ngbCollapse)]="gfg">
                      <a class="addresses-data" *ngFor="let address of poolStats.pool.addresses | slice: 1"
                        [routerLink]="['/address' | relativeUrl, address]">{{
                        address }}<br></a>
                    </div>
                    <button *ngIf="poolStats.pool.addresses.length >= 2" type="button"
                      class="btn btn-sm btn-primary small-button" (click)="collapse.toggle()"
                      [attr.aria-expanded]="!gfg" aria-controls="collapseExample">
                      <div *ngIf="gfg"><span i18n="show-all">Show all</span> ({{ poolStats.pool.addresses.length }})
                      </div>
                      <span *ngIf="!gfg" i18n="hide">Hide</span>
                    </button>
                  </div>
                </td>
              </tr>
              <!-- Addresses mobile -->
              <tr *ngIf="isMobile()">
                <td colspan=2>
                  <span class="label" i18n="mining.addresses">Addresses</span>
                  <div *ngIf="poolStats.pool.addresses.length else nodatamobile">
                    <button *ngIf="poolStats.pool.addresses.length >= 2" type="button"
                      class="btn btn-sm btn-primary float-right small-button mobile" (click)="collapse.toggle()"
                      [attr.aria-expanded]="!gfg" aria-controls="collapseExample">
                      <span i18n="show-all">Show all</span> ({{ poolStats.pool.addresses.length }})
                    </button>
                    <a class="addresses-data" [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]">
                      {{ poolStats.pool.addresses[0] | shortenString: 30 }}
                    </a>
                    <div #collapse="ngbCollapse" [(ngbCollapse)]="gfg" style="width: 100%">
                      <a class="addresses-data" *ngFor="let address of poolStats.pool.addresses | slice: 1"
                        [routerLink]="['/address' | relativeUrl, address]">{{
                        address | shortenString: 30 }}<br></a>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="col-lg-6">
          <table class="table table-borderless table-striped">
            <tbody>

              <!-- Hashrate desktop -->
              <tr *ngIf="!isMobile()" class="taller-row">
                <td class="data">
                  <table class="table table-xs table-data">
                    <thead>
                      <tr>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.reward">Reward</th>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.hashrate">Hashrate (24h)</th>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="latest-blocks.avg_health">Avg Health</th>
                      </tr>
                    </thead>
                    <tbody>
                      <td class="text-center"><app-amount [satoshis]="poolStats.totalReward" digitsInfo="1.0-0" [noFiat]="true"></app-amount></td>
                      <td class="text-center">{{ poolStats.estimatedHashrate | amountShortener : 1 : 'H/s' }}</td>
                      <td class="text-center"><span class="health-badge badge" [class.badge-success]="poolStats.avgBlockHealth >= 99"
                          [class.badge-warning]="poolStats.avgBlockHealth >= 75 && poolStats.avgBlockHealth < 99" [class.badge-danger]="poolStats.avgBlockHealth < 75"
                          *ngIf="poolStats.avgBlockHealth != null; else nullHealth">{{ poolStats.avgBlockHealth }}%</span>
                          <ng-template #nullHealth>
                            <span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
                          </ng-template>
                      </td>
                    </tbody>
                  </table>
                </td>
              </tr>
              <!-- Hashrate mobile -->
              <tr *ngIf="isMobile()">
                <td colspan="2">
                  <table class="table table-xs table-data">
                    <thead>
                      <tr>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.reward">Reward</th>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.hashrate">Hashrate (24h)</th>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="latest-blocks.avg_health">Avg Health</th>
                      </tr>
                    </thead>
                    <tbody>
                      <td class="text-center"><app-amount [satoshis]="poolStats.totalReward" digitsInfo="1.0-0" [noFiat]="true"></app-amount></td>
                      <td class="text-center">{{ poolStats.estimatedHashrate | amountShortener : 1 : 'H/s' }}</td>
                      <td class="text-center"><span class="health-badge badge" [class.badge-success]="poolStats.avgBlockHealth >= 99"
                          [class.badge-warning]="poolStats.avgBlockHealth >= 75 && poolStats.avgBlockHealth < 99" [class.badge-danger]="poolStats.avgBlockHealth < 75"
                          *ngIf="poolStats.avgBlockHealth != null; else nullHealth">{{ poolStats.avgBlockHealth }}%</span>
                          <ng-template #nullHealth>
                            <span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
                          </ng-template>
                      </td>
                    </tbody>
                  </table>
                </td>
              </tr>

              <!-- Mined blocks desktop -->
              <tr *ngIf="!isMobile()" class="taller-row">
                <td class="data">
                  <table class="table table-xs table-data">
                    <thead>
                      <tr>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="1w">1w</th>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="all">All</th>
                      </tr>
                    </thead>
                    <tbody>
                      <td class="text-center">{{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
                        poolStats.blockShare['24h'], this.locale, '1.0-0') }}%)</td>
                      <td class="text-center">{{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
                        poolStats.blockShare['1w'], this.locale, '1.0-0') }}%)</td>
                      <td class="text-center">{{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
                        poolStats.blockShare['all'], this.locale, '1.0-0') }}%)</td>
                    </tbody>
                  </table>
                </td>
              </tr>
              <!-- Mined blocks mobile -->
              <tr *ngIf="isMobile()">
                <td colspan=2>
                  <table class="table table-xs table-data">
                    <thead>
                      <tr>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="1w">1w</th>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="all">All</th>
                      </tr>
                    </thead>
                    <tbody>
                      <td class="text-center">{{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
                        poolStats.blockShare['24h'], this.locale, '1.0-0') }}%)</td>
                      <td class="text-center">{{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
                        poolStats.blockShare['1w'], this.locale, '1.0-0') }}%)</td>
                      <td class="text-center">{{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
                        poolStats.blockShare['all'], this.locale, '1.0-0') }}%)</td>
                    </tbody>
                  </table>
                </td>
              </tr>

            </tbody>
          </table>
        </div>

      </div>
    </div>
  </div>

  <ng-template #nodata>
    <td class="taller-row" style="vertical-align: middle">~</td>
  </ng-template>
  <ng-template #nodatamobile>
    <div>~</div>
  </ng-template>

  <!-- Hashrate chart -->
  <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
  <div class="text-center loadingGraphs" *ngIf="isLoading">
    <div class="spinner-border text-light"></div>
  </div>

  <!-- Blocks list -->
  <table class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5"
    [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
    <ng-container *ngIf="blocks$ | async as blocks; else skeleton">
      <thead *ngIf="blocks.length > 0">
        <th class="height" i18n="latest-blocks.height">Height</th>
        <th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th>
        <th class="mined" i18n="latest-blocks.mined">Mined</th>
        <th class="coinbase text-left" i18n="latest-blocks.coinbasetag">Coinbase tag</th>
        <th *ngIf="auditAvailable" class="health text-right" i18n="latest-blocks.health">Health</th>
        <th class="reward text-right" i18n="latest-blocks.reward">Reward</th>
        <th *ngIf="!auditAvailable" class="fees text-right" i18n="latest-blocks.fees">Fees</th>
        <th class="txs text-right" i18n="dashboard.txs">TXs</th>
        <th class="size" i18n="latest-blocks.size">Size</th>
      </thead>
      <tbody [style]="isLoading ? 'opacity: 0.75' : ''">
        <tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
          <td class="height">
            <a [routerLink]="['/block' | relativeUrl, block.id]">{{ block.height }}</a>
          </td>
          <td class="timestamp">
            &lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
          </td>
          <td class="mined">
            <app-time kind="since" [time]="block.timestamp" [fastRender]="true"></app-time>
          </td>
          <td class="coinbase">
            <span class="badge badge-secondary scriptmessage longer">
              {{ block.extras.coinbaseRaw | hex2ascii }}
            </span>
          </td>
          <td *ngIf="auditAvailable" class="health text-right">
            <a
              class="health-badge badge"
              [class.badge-success]="block.extras.matchRate >= 99"
              [class.badge-warning]="block.extras.matchRate >= 75 && block.extras.matchRate < 99"
              [class.badge-danger]="block.extras.matchRate < 75"
              [routerLink]="block.extras.matchRate != null ? ['/block/' | relativeUrl, block.id] : null"
              [state]="{ data: { block: block } }"
              *ngIf="block.extras.matchRate != null; else nullHealth"
            >{{ block.extras.matchRate }}%</a>
            <ng-template #nullHealth>
              <span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
            </ng-template>
          </td>
          <td class="reward text-right">
            <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
          </td>
          <td *ngIf="!auditAvailable" class="fees text-right">
            <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
          </td>
          <td class="txs text-right">
            {{ block.tx_count | number }}
          </td>
          <td class="size">
            <div class="progress">
              <div class="progress-bar progress-mempool" role="progressbar"
                [ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div>
              <div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
            </div>
          </td>
        </tr>
      </tbody>
    </ng-container>

    <ng-template #skeleton>
      <thead>
        <th class="height" i18n="latest-blocks.height">Height</th>
        <th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th>
        <th class="mined" i18n="latest-blocks.mined">Mined</th>
        <th class="coinbase text-left" i18n="latest-blocks.coinbasetag">Coinbase tag</th>
        <th class="reward text-right" i18n="latest-blocks.reward">Reward</th>
        <th class="fees text-right" i18n="latest-blocks.fees">Fees</th>
        <th class="txs text-right" i18n="dashboard.txs">TXs</th>
        <th class="size" i18n="latest-blocks.size">Size</th>
      </thead>
      <tbody>
        <tr *ngFor="let item of [1,2,3,4,5]">
          <td class="height">
            <span class="skeleton-loader"></span>
          </td>
          <td class="timestamp">
            <span class="skeleton-loader"></span>
          </td>
          <td class="mined">
            <span class="skeleton-loader"></span>
          </td>
          <td class="coinbase">
            <span class="skeleton-loader"></span>
          </td>
          <td class="reward text-right">
            <span class="skeleton-loader"></span>
          </td>
          <td class="fees text-right">
            <span class="skeleton-loader"></span>
          </td>
          <td class="txs text-right">
            <span class="skeleton-loader"></span>
          </td>
          <td class="size text-right">
            <span class="skeleton-loader"></span>
          </td>
        </tr>
      </tbody>
    </ng-template>
  </table>

</div>

<!-- Main table skeleton -->
<ng-template #loadingMain>
  <div>
    <div class="mb-3" style="display:flex; position: relative">
      <div class="skeleton-loader mr-3" style="width: 50px; height: 50px"></div>
      <h1 class="m-0 pt-1 pt-md-0">
        <div class="skeleton-loader" style="position: absolute; top: 32%; width: 150px; height: 20px"></div>
      </h1>
    </div>

    <div class="box">
      <div class="row">

        <div class="col-lg-6">
          <table class="table table-borderless table-striped taller" style="table-layout: fixed;">
            <tbody>

              <!-- Regexes desktop -->
              <tr *ngIf="!isMobile()" class="taller-row">
                <td class="label" i18n="mining.tags">Tags</td>
                <td style="vertical-align: middle">
                  <div class="skeleton-loader"></div>
                </td>
              </tr>
              <!-- Regexes mobile -->
              <tr *ngIf="isMobile()">
                <td colspan=2>
                  <span class="label" i18n="mining.tags">Tags</span>
                  <div class="overflow-auto">
                    <div class="skeleton-loader"></div>
                  </div>
                </td>
              </tr>

              <!-- Addresses desktop -->
              <tr *ngIf="!isMobile()" class="taller-row">
                <td class="label" i18n="mining.addresses">Addresses</td>
                <td style="vertical-align: middle;">
                  <div class="skeleton-loader"></div>
                  <div #collapse="ngbCollapse" [(ngbCollapse)]="gfg">
                    <div class="skeleton-loader"></div>
                  </div>
                </td>
              </tr>
              <!-- Addresses mobile -->
              <tr *ngIf="isMobile()">
                <td colspan=2>
                  <span class="label" i18n="mining.addresses">Addresses</span>
                  <div>
                    <div class="skeleton-loader"></div>
                    <div #collapse="ngbCollapse" [(ngbCollapse)]="gfg" style="width: 100%">
                      <div class="skeleton-loader"></div>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="col-lg-6">
          <table class="table table-borderless table-striped">
            <tbody>

              <!-- Hashrate desktop -->
              <tr *ngIf="!isMobile()" class="taller-row">
                <td class="data">
                  <table class="table table-xs table-data text-center">
                    <thead>
                      <tr>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.total-reward">Reward</th>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.estimated">Hashrate (24h)</th>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.luck">Avg Health</th>
                      </tr>
                    </thead>
                    <tbody>
                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
                    </tbody>
                  </table>
                </td>
              </tr>
              <!-- Hashrate mobile -->
              <tr *ngIf="isMobile()">
                <td colspan="2">
                  <table class="table table-xs table-data text-center">
                    <thead>
                      <tr>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.total-reward">Reward</th>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.estimated">Hashrate (24h)</th>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.luck">Avg Health</th>
                      </tr>
                    </thead>
                    <tbody>
                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
                    </tbody>
                  </table>
                </td>
              </tr>

              <!-- Mined blocks desktop -->
              <tr *ngIf="!isMobile()" class="taller-row">
                <td class="data">
                  <table class="table table-xs table-data text-center">
                    <thead>
                      <tr>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="1w">1w</th>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="all">All</th>
                      </tr>
                    </thead>
                    <tbody>
                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
                    </tbody>
                  </table>
                </td>
              </tr>
              <!-- Mined blocks mobile -->
              <tr *ngIf="isMobile()">
                <td colspan=2>
                  <table class="table table-xs table-data text-center">
                    <thead>
                      <tr>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="1w">1w</th>
                        <th scope="col" class="block-count-title text-center" style="width: 33%" i18n="all">All</th>
                      </tr>
                    </thead>
                    <tbody>
                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
                    </tbody>
                  </table>
                </td>
              </tr>

            </tbody>
          </table>
        </div>

      </div>
    </div>
  </div>
</ng-template>