Merge branch 'master' into fee-visibility
for cla bot
This commit is contained in:
Antoni Spaanderman
@@ -102,7 +102,7 @@
|
||||
<img class="image" src="/resources/profile/ronindojo.png" />
|
||||
<span>RoninDojo</span>
|
||||
</a>
|
||||
<a href="https://github.com/runcitadel/dashboard" target="_blank" title="Citadel">
|
||||
<a href="https://github.com/runcitadel/core" target="_blank" title="Citadel">
|
||||
<img class="image" src="/resources/profile/runcitadel.svg" />
|
||||
<span>Citadel</span>
|
||||
</a>
|
||||
@@ -220,7 +220,7 @@
|
||||
|
||||
<div class="copyright">
|
||||
<div class="title">
|
||||
Copyright © 2019-2021<br>
|
||||
Copyright © 2019-2022<br>
|
||||
The Mempool Open Source Project
|
||||
</div>
|
||||
<p>
|
||||
|
||||
@@ -39,13 +39,22 @@
|
||||
{{ epochData.previousRetarget | absolute | number: '1.2-2' }} </span> %
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item" *ngIf="showProgress">
|
||||
<h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>
|
||||
<div class="card-text">{{ epochData.progress | number: '1.2-2' }} <span class="symbol">%</span></div>
|
||||
<div class="progress small-bar">
|
||||
<div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}"> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" *ngIf="showHalving">
|
||||
<h5 class="card-title" i18n="difficulty-box.next-halving">Next halving</h5>
|
||||
<div class="card-text">
|
||||
<ng-container *ngTemplateOutlet="epochData.blocksUntilHalving === 1 ? blocksSingular : blocksPlural; context: {$implicit: epochData.blocksUntilHalving }"></ng-container>
|
||||
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
|
||||
<ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
|
||||
</div>
|
||||
<div class="symbol"><app-time-until [time]="epochData.timeUntilHalving" [fastRender]="true"></app-time-until></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -14,6 +14,8 @@ interface EpochProgress {
|
||||
timeAvg: string;
|
||||
remainingTime: number;
|
||||
previousRetarget: number;
|
||||
blocksUntilHalving: number;
|
||||
timeUntilHalving: number;
|
||||
}
|
||||
|
||||
@Component({
|
||||
@@ -26,6 +28,9 @@ export class DifficultyComponent implements OnInit {
|
||||
isLoadingWebSocket$: Observable<boolean>;
|
||||
difficultyEpoch$: Observable<EpochProgress>;
|
||||
|
||||
@Input() showProgress: boolean = true;
|
||||
@Input() showHalving: boolean = false;
|
||||
|
||||
constructor(
|
||||
public stateService: StateService,
|
||||
) { }
|
||||
@@ -92,6 +97,9 @@ export class DifficultyComponent implements OnInit {
|
||||
colorPreviousAdjustments = '#ffffff66';
|
||||
}
|
||||
|
||||
const blocksUntilHalving = block.height % 210000;
|
||||
const timeUntilHalving = (blocksUntilHalving * timeAvgMins * 60 * 1000) + (now * 1000);
|
||||
|
||||
return {
|
||||
base: `${progress}%`,
|
||||
change,
|
||||
@@ -104,6 +112,8 @@ export class DifficultyComponent implements OnInit {
|
||||
newDifficultyHeight,
|
||||
remainingTime,
|
||||
previousRetarget,
|
||||
blocksUntilHalving,
|
||||
timeUntilHalving,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
@@ -31,8 +31,8 @@
|
||||
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" id="btn-home">
|
||||
<a class="nav-link" [routerLink]="['/' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tachometer-alt']" [fixedWidth]="true" i18n-title="master-page.dashboard" title="Dashboard"></fa-icon></a>
|
||||
</li>
|
||||
<li class="nav-item" routerLinkActive="active" id="btn-blocks">
|
||||
<a class="nav-link" [routerLink]="['/blocks' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cubes']" [fixedWidth]="true" i18n-title="master-page.blocks" title="Blocks"></fa-icon></a>
|
||||
<li class="nav-item" routerLinkActive="active" id="btn-pools">
|
||||
<a class="nav-link" [routerLink]="['/mining/pools' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'hammer']" [fixedWidth]="true" i18n-title="master-page.mining-pools" title="Mining Pools"></fa-icon></a>
|
||||
</li>
|
||||
<li class="nav-item" routerLinkActive="active" id="btn-graphs">
|
||||
<a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
<div class="container-xl">
|
||||
<!-- <app-difficulty [showProgress]=false [showHalving]=true></app-difficulty> -->
|
||||
|
||||
<div class="hashrate-pie" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
|
||||
<div class="text-center loadingGraphs" *ngIf="isLoading">
|
||||
<div class="spinner-border text-light"></div>
|
||||
</div>
|
||||
|
||||
<div class="card-header mb-0 mb-lg-4">
|
||||
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(miningStatsObservable$ | async) as miningStats">
|
||||
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 1">
|
||||
<input ngbButton type="radio" [value]="'24h'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="24h"> 24h
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 3">
|
||||
<input ngbButton type="radio" [value]="'3d'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="3d"> 3D
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 7">
|
||||
<input ngbButton type="radio" [value]="'1w'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="1w"> 1W
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 30">
|
||||
<input ngbButton type="radio" [value]="'1m'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="1m"> 1M
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 90">
|
||||
<input ngbButton type="radio" [value]="'3m'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="3m"> 3M
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 180">
|
||||
<input ngbButton type="radio" [value]="'6m'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="6m"> 6M
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 365">
|
||||
<input ngbButton type="radio" [value]="'1y'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="1y"> 1Y
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 730">
|
||||
<input ngbButton type="radio" [value]="'2y'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="2y"> 2Y
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 1095">
|
||||
<input ngbButton type="radio" [value]="'3y'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="3y"> 3Y
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm">
|
||||
<input ngbButton type="radio" [value]="'all'" [routerLink]="['/mining/pools' | relativeUrl]" fragment="all"> ALL
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<table class="table table-borderless text-center pools-table" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="d-none d-md-block" i18n="mining.rank">Rank</th>
|
||||
<th class=""></th>
|
||||
<th class="" i18n="mining.pool-name">Pool</th>
|
||||
<th class="" *ngIf="this.poolsWindowPreference === '24h'" i18n="mining.hashrate">Hashrate</th>
|
||||
<th class="" i18n="master-page.blocks">Blocks</th>
|
||||
<th class="d-none d-md-block" i18n="mining.empty-blocks">Empty Blocks</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody *ngIf="(miningStatsObservable$ | async) as miningStats">
|
||||
<tr *ngFor="let pool of miningStats.pools">
|
||||
<td class="d-none d-md-block">{{ pool.rank }}</td>
|
||||
<td class="text-right"><img width="25" height="25" src="{{ pool.logo }}" onError="this.src = './resources/mining-pools/default.svg'"></td>
|
||||
<td class="">{{ pool.name }}</td>
|
||||
<td class="" *ngIf="this.poolsWindowPreference === '24h'">{{ pool.lastEstimatedHashrate }} {{ miningStats.miningUnits.hashrateUnit }}</td>
|
||||
<td class="">{{ pool['blockText'] }}</td>
|
||||
<td class="d-none d-md-block">{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td>
|
||||
</tr>
|
||||
<tr style="border-top: 1px solid #555">
|
||||
<td class="d-none d-md-block">-</td>
|
||||
<td class="text-right"><img width="25" height="25" src="./resources/mining-pools/default.svg"></td>
|
||||
<td class="" i18n="mining.all-miners"><b>All miners</b></td>
|
||||
<td class="" *ngIf="this.poolsWindowPreference === '24h'"><b>{{ miningStats.lastEstimatedHashrate}} {{ miningStats.miningUnits.hashrateUnit }}</b></td>
|
||||
<td class=""><b>{{ miningStats.blockCount }}</b></td>
|
||||
<td class="d-none d-md-block"><b>{{ miningStats.totalEmptyBlock }} ({{ miningStats.totalEmptyBlockRatio }}%)</b></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,32 @@
|
||||
.hashrate-pie {
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
@media (max-width: 767.98px) {
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.formRadioGroup {
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@media (min-width: 830px) {
|
||||
margin-left: 2%;
|
||||
flex-direction: row;
|
||||
float: left;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.btn-sm {
|
||||
font-size: 9px;
|
||||
@media (min-width: 830px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.pools-table th,
|
||||
.pools-table td {
|
||||
padding: .3em !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { EChartsOption } from 'echarts';
|
||||
import { combineLatest, Observable, of } from 'rxjs';
|
||||
import { catchError, map, share, skip, startWith, switchMap, tap } from 'rxjs/operators';
|
||||
import { SinglePoolStats } from 'src/app/interfaces/node-api.interface';
|
||||
import { SeoService } from 'src/app/services/seo.service';
|
||||
import { StorageService } from '../..//services/storage.service';
|
||||
import { MiningService, MiningStats } from '../../services/mining.service';
|
||||
import { StateService } from '../../services/state.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pool-ranking',
|
||||
templateUrl: './pool-ranking.component.html',
|
||||
styleUrls: ['./pool-ranking.component.scss'],
|
||||
styles: [`
|
||||
.loadingGraphs {
|
||||
position: absolute;
|
||||
top: 38%;
|
||||
left: calc(50% - 15px);
|
||||
z-index: 100;
|
||||
}
|
||||
`],
|
||||
})
|
||||
export class PoolRankingComponent implements OnInit, OnDestroy {
|
||||
poolsWindowPreference: string;
|
||||
radioGroupForm: FormGroup;
|
||||
|
||||
isLoading = true;
|
||||
chartOptions: EChartsOption = {};
|
||||
chartInitOptions = {
|
||||
renderer: 'svg'
|
||||
};
|
||||
|
||||
miningStatsObservable$: Observable<MiningStats>;
|
||||
|
||||
constructor(
|
||||
private stateService: StateService,
|
||||
private storageService: StorageService,
|
||||
private formBuilder: FormBuilder,
|
||||
private miningService: MiningService,
|
||||
private seoService: SeoService,
|
||||
) {
|
||||
this.seoService.setTitle($localize`:@@mining.mining-pools:Mining Pools`);
|
||||
this.poolsWindowPreference = this.storageService.getValue('poolsWindowPreference') ? this.storageService.getValue('poolsWindowPreference') : '1w';
|
||||
this.radioGroupForm = this.formBuilder.group({ dateSpan: this.poolsWindowPreference });
|
||||
this.radioGroupForm.controls.dateSpan.setValue(this.poolsWindowPreference);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
// When...
|
||||
this.miningStatsObservable$ = combineLatest([
|
||||
// ...a new block is mined
|
||||
this.stateService.blocks$
|
||||
.pipe(
|
||||
// (we always receives some blocks at start so only trigger for the last one)
|
||||
skip(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT - 1),
|
||||
),
|
||||
// ...or we change the timespan
|
||||
this.radioGroupForm.get('dateSpan').valueChanges
|
||||
.pipe(
|
||||
startWith(this.poolsWindowPreference), // (trigger when the page loads)
|
||||
tap((value) => {
|
||||
this.storageService.setValue('poolsWindowPreference', value);
|
||||
this.poolsWindowPreference = value;
|
||||
})
|
||||
)
|
||||
])
|
||||
// ...then refresh the mining stats
|
||||
.pipe(
|
||||
switchMap(() => {
|
||||
this.isLoading = true;
|
||||
return this.miningService.getMiningStats(this.poolsWindowPreference)
|
||||
.pipe(
|
||||
catchError((e) => of(this.getEmptyMiningStat()))
|
||||
);
|
||||
}),
|
||||
map(data => {
|
||||
data.pools = data.pools.map((pool: SinglePoolStats) => this.formatPoolUI(pool));
|
||||
return data;
|
||||
}),
|
||||
tap(data => {
|
||||
this.isLoading = false;
|
||||
this.prepareChartOptions(data);
|
||||
}),
|
||||
share()
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
}
|
||||
|
||||
formatPoolUI(pool: SinglePoolStats) {
|
||||
pool['blockText'] = pool.blockCount.toString() + ` (${pool.share}%)`;
|
||||
return pool;
|
||||
}
|
||||
|
||||
isMobile() {
|
||||
return (window.innerWidth <= 767.98);
|
||||
}
|
||||
|
||||
generatePoolsChartSerieData(miningStats) {
|
||||
const poolShareThreshold = this.isMobile() ? 1 : 0.5; // Do not draw pools which hashrate share is lower than that
|
||||
const data: object[] = [];
|
||||
|
||||
miningStats.pools.forEach((pool) => {
|
||||
if (parseFloat(pool.share) < poolShareThreshold) {
|
||||
return;
|
||||
}
|
||||
data.push({
|
||||
value: pool.share,
|
||||
name: pool.name + (this.isMobile() ? `` : ` (${pool.share}%)`),
|
||||
label: {
|
||||
color: '#FFFFFF',
|
||||
overflow: 'break',
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: "#282d47",
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
formatter: () => {
|
||||
if (this.poolsWindowPreference === '24h') {
|
||||
return `<u><b>${pool.name} (${pool.share}%)</b></u><br>` +
|
||||
pool.lastEstimatedHashrate.toString() + ' PH/s' +
|
||||
`<br>` + pool.blockCount.toString() + ` blocks`;
|
||||
} else {
|
||||
return `<u><b>${pool.name} (${pool.share}%)</b></u><br>` +
|
||||
pool.blockCount.toString() + ` blocks`;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
prepareChartOptions(miningStats) {
|
||||
let network = this.stateService.network;
|
||||
if (network === '') {
|
||||
network = 'bitcoin';
|
||||
}
|
||||
network = network.charAt(0).toUpperCase() + network.slice(1);
|
||||
|
||||
this.chartOptions = {
|
||||
title: {
|
||||
text: $localize`:@@mining.pool-chart-title:${network}:NETWORK: mining pools share`,
|
||||
subtext: $localize`:@@mining.pool-chart-sub-title:Estimated from the # of blocks mined`,
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#FFF',
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#CCC',
|
||||
fontStyle: 'italic',
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
top: this.isMobile() ? '5%' : '20%',
|
||||
name: 'Mining pool',
|
||||
type: 'pie',
|
||||
radius: this.isMobile() ? ['10%', '50%'] : ['20%', '80%'],
|
||||
data: this.generatePoolsChartSerieData(miningStats),
|
||||
labelLine: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 2,
|
||||
borderWidth: 2,
|
||||
borderColor: '#000',
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
borderColor: '#FFF',
|
||||
borderRadius: 2,
|
||||
shadowBlur: 80,
|
||||
shadowColor: 'rgba(255, 255, 255, 0.75)',
|
||||
},
|
||||
labelLine: {
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Default mining stats if something goes wrong
|
||||
*/
|
||||
getEmptyMiningStat() {
|
||||
return {
|
||||
lastEstimatedHashrate: 'Error',
|
||||
blockCount: 0,
|
||||
totalEmptyBlock: 0,
|
||||
totalEmptyBlockRatio: '',
|
||||
pools: [],
|
||||
availableTimespanDay: 0,
|
||||
miningUnits: {
|
||||
hashrateDivider: 1,
|
||||
hashrateUnit: '',
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -270,7 +270,7 @@
|
||||
</ng-container>
|
||||
|
||||
<ng-template #assetBox let-item>
|
||||
{{ item.value / 100000000 | number: '1.0-' + assetsMinimal[item.asset][3] }} {{ assetsMinimal[item.asset][1] }}
|
||||
{{ item.value / pow(10, assetsMinimal[item.asset][3]) | number: '1.' + assetsMinimal[item.asset][3] + '-' + assetsMinimal[item.asset][3] }} {{ assetsMinimal[item.asset][1] }}
|
||||
<br />
|
||||
{{ assetsMinimal[item.asset][0] }}
|
||||
<br />
|
||||
|
||||
@@ -119,6 +119,10 @@ export class TransactionsListComponent implements OnInit, OnChanges {
|
||||
return '0x' + (str.length % 2 ? '0' : '') + str;
|
||||
}
|
||||
|
||||
pow(base: number, exponent: number): number {
|
||||
return Math.pow(base, exponent);
|
||||
}
|
||||
|
||||
toggleDetails() {
|
||||
this.displayDetails = !this.displayDetails;
|
||||
this.ref.markForCheck();
|
||||
|
||||
Reference in New Issue
Block a user