mempool/frontend/src/app/components/pool/pool.component.html
2025-01-19 06:02:58 +00:00

581 lines
27 KiB
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>