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

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

<div class="container-xl" *ngIf="!error; else errorTemplate">

  <!-- 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.onerror=null; 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 pool-details">
      <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 -->
              <tr [class.taller-row]="!isMobile()">
                <td [class.data]="!isMobile()" [attr.colspan]="isMobile() ? 2 : 1">
                  <table class="table table-xs table-data">
                    <thead>
                      <tr>
                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.reward">Reward</th>
                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.hashrate">Hashrate (24h)</th>
                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="latest-blocks.avg_health" *ngIf="auditAvailable">Avg Health</th>
                      </tr>
                    </thead>
                    <tbody>
                      <td class="text-center"><app-amount [satoshis]="poolStats.totalReward" digitsInfo="1.0-0" [noFiat]="true" [ignoreViewMode]="true"></app-amount></td>
                      <td class="text-center">{{ poolStats.estimatedHashrate | amountShortener : 1 : 'H/s' }}</td>
                      <td class="text-center" *ngIf="auditAvailable; else emptyTd"><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 -->
              <tr [class.taller-row]="!isMobile()">
                <td [class.data]="!isMobile()" [attr.colspan]="isMobile() ? 2 : 1">
                  <table class="table table-xs table-data">
                    <thead>
                      <tr>
                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="24h">Blocks (24h)</th>
                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="1w">1w</th>
                        <th scope="col" class="data-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>

              <!-- Bid Boost -->
              <tr [class.taller-row]="!isMobile()" *ngIf="(oobFees$ | async) as oob;">
                <td [class.data]="!isMobile()" [attr.colspan]="isMobile() ? 2 : 1">
                  <table class="table table-xs table-data">
                    <thead>
                      <tr>
                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="1w">Out-of-band Fees (1w)</th>
                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="1m">1m</th>
                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="all">All</th>
                      </tr>
                    </thead>
                    <tbody>
                      <td *ngFor="let total of oob" class="text-center clip"><app-amount [satoshis]="total.cost" [digitsInfo]="isMobile() ? '1.2-4' : '1.8-8'" [ignoreViewMode]="true"></app-amount></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" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
  <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading">
    <div class="spinner-border text-light"></div>
  </div>

  <!-- Stratum Job -->
  <ng-container *ngIf="(job$ | async) as job;">
    <h2 i18n="pool.next_block">Next block</h2>
    <div class="box mb-3">
      <div class="row" >
        <div class="col">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td>
                  <table class="job-table table table-xs table-borderless table-fixed table-data">
                    <thead>
                      <tr>
                        <th class="data-title clip text-center height" i18n="latest-blocks.height">Height</th>
                        <th class="data-title clip text-center expected" i18n="next-block.expected-time">Expected</th>
                        <th class="data-title clip text-center reward" i18n="latest-blocks.reward">Reward</th>
                        <th class="data-title clip text-center timestamp" i18n="next-block.timestamp">Timestamp</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="text-center height">
                          {{ job.height }}
                        </td>
                        <td class="text-center expected">
                          <ng-container *ngIf="(expectedBlockTime$ | async) as expectedBlockTime; else expectedPlaceholder">
                            <app-time kind="until" [time]="expectedBlockTime" [fastRender]="false" [fixedRender]="true" [precision]="1" minUnit="minute"></app-time>
                          </ng-container>
                          <ng-template #expectedPlaceholder>~</ng-template>
                        </td>
                        <td class="text-center reward">
                          <app-amount [satoshis]="job.reward"></app-amount>
                        </td>
                        <td class="text-center timestamp">
                          <app-timestamp [customFormat]="'yyyy-MM-dd HH:mm:ss'" [unixTime]="job.timestamp" [precision]="1" minUnit="minute" [hideTimeSince]="true"></app-timestamp>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
              <tr>
                <td>
                  <table class="job-table table table-xs table-borderless table-fixed table-data">
                    <thead>
                      <tr>
                        <th class="data-title clip text-center coinbase" i18n="latest-blocks.coinbasetag">Coinbase tag</th>
                        <th class="data-title clip text-center clean" i18n="next-block.clean">Clean</th>
                        <th class="data-title clip text-center prevhash" i18n="next-block.prevhash">Prevhash</th>
                        <th class="data-title clip text-center job-received" i18n="next-block.job-received">Job Received</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="text-center coinbase">
                          {{ job.scriptsig | hex2ascii }}
                        </td>
                        <td class="text-center clean">
                          @if (job.cleanJobs) {
                            <fa-icon [icon]="['fas', 'check-circle']" [fixedWidth]="true"></fa-icon>
                          } @else {
                            <fa-icon [icon]="['fas', 'times-circle']" [fixedWidth]="true"></fa-icon>
                          }
                        </td>
                        <td class="text-center prevhash">
                          <a [routerLink]="['/block' | relativeUrl, job.prevHash]">
                            <app-truncate [text]="job.prevHash" [lastChars]="8"></app-truncate>
                          </a>
                        </td>
                        <td class="text-center job-received">
                          <app-timestamp [customFormat]="'yyyy-MM-dd HH:mm:ss'" [unixTime]="job.received / 1000" [precision]="1" minUnit="minute" [hideTimeSince]="true"></app-timestamp>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
              <tr>
                <td>
                  <table class="stratum-table">
                    <thead>
                      <tr>
                        <th class="data-title clip text-center" [attr.colspan]="Math.max(job.merkleBranches.length, 12)">
                          <a class="title-link" href="" [routerLink]="['/stratum' | relativeUrl]">
                            Merkle Branches
                            <span>&nbsp;</span>
                            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
                          </a>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        @for (branch of job.merkleBranches; track $index) {
                          <td class="merkle" [style.background-color]="branch ? '#' + branch.slice(0, 6) : ''"></td>
                        }
                        @for (_ of [].constructor(Math.max(0, 12 - job.merkleBranches.length)); track $index) {
                          <td class="merkle empty-branch"></td>
                        }
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </ng-container>

  <!-- Blocks list -->
  <h2 i18n="master-page.blocks">Blocks</h2>
  <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">
            <app-timestamp [customFormat]="'yyyy-MM-dd HH:mm:ss'" [unixTime]="block.timestamp" [hideTimeSince]="true"></app-timestamp>
          </td>
          <td class="mined">
            <app-time kind="since" [time]="block.timestamp" [fastRender]="true" [showTooltip]="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" [ignoreViewMode]="true"></app-amount>
          </td>
          <td *ngIf="!auditAvailable" class="fees text-right">
            <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-2" [noFiat]="true" [ignoreViewMode]="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="data-title clip text-center" style="width: 33%" i18n="mining.total-reward">Reward</th>
                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.estimated">Hashrate (24h)</th>
                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.luck" *ngIf="auditAvailable">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" *ngIf="auditAvailable">
                        <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="data-title clip text-center" style="width: 33%" i18n="mining.total-reward">Reward</th>
                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.estimated">Hashrate (24h)</th>
                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.luck" *ngIf="auditAvailable">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" *ngIf="auditAvailable">
                        <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="data-title text-center" style="width: 33%" i18n="24h">Blocks (24h)</th>
                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="1w">1w</th>
                        <th scope="col" class="data-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="data-title text-center" style="width: 33%" i18n="24h">Blocks (24h)</th>
                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="1w">1w</th>
                        <th scope="col" class="data-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>

<ng-template #emptyTd>
  <td class="text-center"></td>
</ng-template>

<ng-template #errorTemplate>
  <br>
  <app-http-error [error]="error">
    <span i18n="pool.error.loading-pool-data">Error loading pool data.</span>
  </app-http-error>
</ng-template>