mirror of
https://github.com/mempool/mempool.git
synced 2026-08-13 12:33:11 +02:00
615 lines
No EOL
30 KiB
HTML
615 lines
No EOL
30 KiB
HTML
<app-indexing-progress [showNetworkHashrate]="false"></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">
|
|
<app-mining-pool [slug]="poolStats.pool.slug" [name]="poolStats.pool.name" [showName]="false" [logoStyle]="'width:50px;height:50px;'" [logoClass]="'me-3'"></app-mining-pool>
|
|
<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">
|
|
<app-truncate
|
|
class="addresses-data"
|
|
[text]="poolStats.pool.addresses[0]"
|
|
[lastChars]="8"
|
|
[link]="['/address' | relativeUrl, poolStats.pool.addresses[0]]"
|
|
[external]="true">
|
|
</app-truncate>
|
|
<div>
|
|
<div #collapse="ngbCollapse" [(ngbCollapse)]="gfg">
|
|
<app-truncate class="addresses-data" *ngFor="let address of poolStats.pool.addresses | slice: 1"
|
|
[link]="['/address' | relativeUrl, address]"
|
|
[text]="address" [lastChars]="8">
|
|
</app-truncate>
|
|
</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-end small-button mobile" (click)="collapse.toggle()"
|
|
[attr.aria-expanded]="!gfg" aria-controls="collapseExample">
|
|
<span *ngIf="gfg"><span i18n="show-all">Show all</span> ({{ poolStats.pool.addresses.length }})</span>
|
|
<span *ngIf="!gfg" i18n="hide">Hide</span>
|
|
</button>
|
|
<app-truncate
|
|
class="addresses-data"
|
|
[text]="poolStats.pool.addresses[0]"
|
|
[lastChars]="8"
|
|
[link]="['/address' | relativeUrl, poolStats.pool.addresses[0]]"
|
|
[external]="true">
|
|
</app-truncate>
|
|
<div #collapse="ngbCollapse" [(ngbCollapse)]="gfg" style="width: 100%">
|
|
<app-truncate class="addresses-data" *ngFor="let address of poolStats.pool.addresses | slice: 1"
|
|
[link]="['/address' | relativeUrl, address]"
|
|
[text]="address" [lastChars]="8">
|
|
</app-truncate>
|
|
</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%; padding: 0.1rem;" i18n="mining.reward">Reward</th>
|
|
<th scope="col" class="data-title clip text-center" style="width: 33%; padding: 0.1rem;" i18n="mining.hashrate">Hashrate (24h)</th>
|
|
<th scope="col" class="data-title clip text-center" style="width: 33%; padding: 0.1rem;" i18n="latest-blocks.avg_health" *ngIf="auditAvailable">Avg Health</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-center" style="padding: 0.1rem;"><app-amount [satoshis]="poolStats.totalReward" digitsInfo="1.0-0" [noFiat]="true" [ignoreViewMode]="true"></app-amount></td>
|
|
<td class="text-center" style="padding: 0.1rem;">{{ poolStats.estimatedHashrate | amountShortener : 3 : 'H/s' : false : true }}</td>
|
|
<td class="text-center" style="padding: 0.1rem;" *ngIf="auditAvailable; else emptyTd"><span class="health-badge badge" [class.bg-success]="poolStats.avgBlockHealth >= 99"
|
|
[class.bg-warning]="poolStats.avgBlockHealth >= 75 && poolStats.avgBlockHealth < 99" [class.bg-danger]="poolStats.avgBlockHealth < 75"
|
|
*ngIf="poolStats.avgBlockHealth != null; else nullHealth">{{ poolStats.avgBlockHealth }}%</span>
|
|
<ng-template #nullHealth>
|
|
<span class="health-badge badge bg-secondary" i18n="unknown">Unknown</span>
|
|
</ng-template>
|
|
</td>
|
|
</tr>
|
|
</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%; padding: 0.1rem;" i18n="24h">Blocks (24h)</th>
|
|
<th scope="col" class="data-title text-center" style="width: 33%; padding: 0.1rem;" i18n="1w">1w</th>
|
|
<th scope="col" class="data-title text-center" style="width: 33%; padding: 0.1rem;" i18n="all">All</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-center" style="padding: 0.1rem;">{{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
|
|
poolStats.blockShare['24h'], this.locale, '1.0-0') }}%)</td>
|
|
<td class="text-center" style="padding: 0.1rem;">{{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
|
|
poolStats.blockShare['1w'], this.locale, '1.0-0') }}%)</td>
|
|
<td class="text-center" style="padding: 0.1rem;">{{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
|
|
poolStats.blockShare['all'], this.locale, '1.0-0') }}%)</td>
|
|
</tr>
|
|
</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%; padding: 0.1rem;" i18n="1w">Out-of-band Fees (1w)</th>
|
|
<th scope="col" class="data-title clip text-center" style="width: 33%; padding: 0.1rem;" i18n="1m">1m</th>
|
|
<th scope="col" class="data-title clip text-center" style="width: 33%; padding: 0.1rem;" i18n="all">All</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td *ngFor="let total of oob" class="text-center clip" style="padding: 0.1rem;"><app-amount [satoshis]="total.cost" [digitsInfo]="isMobile() ? '1.2-4' : '1.8-8'" [ignoreViewMode]="true"></app-amount></td>
|
|
</tr>
|
|
</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="@@bdf0e930eb22431140a2eaeacd809cc5f8ebd38c">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">
|
|
<a class="title-link" [routerLink]="['/tx/preview' | relativeUrl]" [fragment]="'offline=true&tx=' + job.coinbase"><ng-template i18n="latest-blocks.coinbasetag">Coinbase tag</ng-template><span> </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>
|
|
<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> </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) : ''">
|
|
@if ($index === 0 && branch) {
|
|
<a [routerLink]="['/tx' | relativeUrl, reverseHash(branch)]" class="cell-link">
|
|
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 14px; color: white"></fa-icon>
|
|
</a>
|
|
}
|
|
</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-start" i18n="latest-blocks.coinbasetag">Coinbase tag</th>
|
|
<th *ngIf="auditAvailable" class="health text-end" i18n="latest-blocks.health">Health</th>
|
|
<th class="reward text-end" i18n="latest-blocks.reward">Reward</th>
|
|
<th *ngIf="!auditAvailable" class="fees text-end" i18n="latest-blocks.fees">Fees</th>
|
|
<th class="txs text-end" 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 bg-secondary scriptmessage longer">
|
|
{{ block.extras.coinbaseRaw | hex2ascii }}
|
|
</span>
|
|
</td>
|
|
<td *ngIf="auditAvailable" class="health text-end">
|
|
<a
|
|
class="health-badge badge"
|
|
[class.bg-success]="block.extras.matchRate >= 99"
|
|
[class.bg-warning]="block.extras.matchRate >= 75 && block.extras.matchRate < 99"
|
|
[class.bg-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 bg-secondary" i18n="unknown">Unknown</span>
|
|
</ng-template>
|
|
</td>
|
|
<td class="reward text-end">
|
|
<app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-2" [noFiat]="true" [ignoreViewMode]="true"></app-amount>
|
|
</td>
|
|
<td *ngIf="!auditAvailable" class="fees text-end">
|
|
<app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-2" [noFiat]="true" [ignoreViewMode]="true"></app-amount>
|
|
</td>
|
|
<td class="txs text-end">
|
|
{{ 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-start" i18n="latest-blocks.coinbasetag">Coinbase tag</th>
|
|
<th class="reward text-end" i18n="latest-blocks.reward">Reward</th>
|
|
<th class="fees text-end" i18n="latest-blocks.fees">Fees</th>
|
|
<th class="txs text-end" 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-end">
|
|
<span class="skeleton-loader"></span>
|
|
</td>
|
|
<td class="fees text-end">
|
|
<span class="skeleton-loader"></span>
|
|
</td>
|
|
<td class="txs text-end">
|
|
<span class="skeleton-loader"></span>
|
|
</td>
|
|
<td class="size text-end">
|
|
<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 me-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 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 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 addresses" i18n="mining.addresses">Addresses</td>
|
|
<td style="padding-top: 25px;">
|
|
<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%; padding: 0.1rem;" i18n="mining.total-reward">Reward</th>
|
|
<th scope="col" class="data-title clip text-center" style="width: 33%; padding: 0.1rem;" i18n="mining.estimated">Hashrate (24h)</th>
|
|
<th scope="col" class="data-title clip text-center" style="width: 33%; padding: 0.1rem;" i18n="mining.luck" *ngIf="auditAvailable">Avg Health</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-center" style="padding: 0.1rem;">
|
|
<div class="skeleton-loader data"></div>
|
|
</td>
|
|
<td class="text-center" style="padding: 0.1rem;">
|
|
<div class="skeleton-loader data"></div>
|
|
</td>
|
|
<td class="text-center" style="padding: 0.1rem;" *ngIf="auditAvailable; else emptyTd">
|
|
<div class="skeleton-loader data"></div>
|
|
</td>
|
|
</tr>
|
|
</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%; padding: 0.1rem;" i18n="mining.total-reward">Reward</th>
|
|
<th scope="col" class="data-title clip text-center" style="width: 33%; padding: 0.1rem;" i18n="mining.estimated">Hashrate (24h)</th>
|
|
<th scope="col" class="data-title clip text-center" style="width: 33%; padding: 0.1rem;" i18n="mining.luck" *ngIf="auditAvailable">Avg Health</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-center" style="padding: 0.1rem;">
|
|
<div class="skeleton-loader data"></div>
|
|
</td>
|
|
<td class="text-center" style="padding: 0.1rem;">
|
|
<div class="skeleton-loader data"></div>
|
|
</td>
|
|
<td class="text-center" style="padding: 0.1rem;" *ngIf="auditAvailable; else emptyTd">
|
|
<div class="skeleton-loader data"></div>
|
|
</td>
|
|
</tr>
|
|
</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%; padding: 0.1rem;" i18n="24h">Blocks (24h)</th>
|
|
<th scope="col" class="data-title text-center" style="width: 33%; padding: 0.1rem;" i18n="1w">1w</th>
|
|
<th scope="col" class="data-title text-center" style="width: 33%; padding: 0.1rem;" i18n="all">All</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-center" style="padding: 0.1rem;">
|
|
<div class="skeleton-loader data"></div>
|
|
</td>
|
|
<td class="text-center" style="padding: 0.1rem;">
|
|
<div class="skeleton-loader data"></div>
|
|
</td>
|
|
<td class="text-center" style="padding: 0.1rem;">
|
|
<div class="skeleton-loader data"></div>
|
|
</td>
|
|
</tr>
|
|
</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%; padding: 0.1rem;" i18n="24h">Blocks (24h)</th>
|
|
<th scope="col" class="data-title text-center" style="width: 33%; padding: 0.1rem;" i18n="1w">1w</th>
|
|
<th scope="col" class="data-title text-center" style="width: 33%; padding: 0.1rem;" i18n="all">All</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-center" style="padding: 0.1rem;">
|
|
<div class="skeleton-loader data"></div>
|
|
</td>
|
|
<td class="text-center" style="padding: 0.1rem;">
|
|
<div class="skeleton-loader data"></div>
|
|
</td>
|
|
<td class="text-center" style="padding: 0.1rem;">
|
|
<div class="skeleton-loader data"></div>
|
|
</td>
|
|
</tr>
|
|
</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> |