Implement temporary reward stats for the mining dashboard
This commit is contained in:
nymkappa
parent
84ef424752
commit
bc13393778
@ -47,7 +47,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" *ngIf="showHalving">
|
||||
<h5 class="card-title" i18n="difficulty-box.next-halving">Next halving</h5>
|
||||
<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>
|
||||
|
||||
@ -3,8 +3,35 @@
|
||||
<div class="row row-cols-1 row-cols-md-2">
|
||||
|
||||
<div class="col">
|
||||
<div class="main-title">Placeholder</div>
|
||||
<div class="main-title">Reward stats</div>
|
||||
<div class="card" style="height: 123px">
|
||||
<div class="card-body more-padding">
|
||||
<div class="difficulty-adjustment-container" *ngIf="$rewardStats | async as rewardStats">
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="">Miners Reward</h5>
|
||||
<div class="card-text">
|
||||
<app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
|
||||
<div class="symbol">in the last 8 blocks</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="">Reward Per Tx</h5>
|
||||
<div class="card-text">
|
||||
{{ rewardStats.rewardPerTx }}
|
||||
<span class="symbol">sats/tx</span>
|
||||
<div class="symbol">in the last 8 blocks</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="">Average Fee</h5>
|
||||
<div class="card-text">
|
||||
{{ rewardStats.feePerTx }}
|
||||
<span class="symbol">sats/tx</span>
|
||||
<div class="symbol">in the last 8 blocks</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,7 +48,8 @@
|
||||
<div class="card" style="height: 385px">
|
||||
<div class="card-body">
|
||||
<app-pool-ranking [widget]=true></app-pool-ranking>
|
||||
<div class="mt-1"><a [routerLink]="['/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more »</a></div>
|
||||
<div class="mt-1"><a [routerLink]="['/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more
|
||||
»</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -34,7 +62,8 @@
|
||||
Hashrate (1y)
|
||||
</h5>
|
||||
<app-hashrate-chart [widget]=true></app-hashrate-chart>
|
||||
<div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more »</a></div>
|
||||
<div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
|
||||
»</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -47,7 +76,8 @@
|
||||
Mining Pools Dominance (1y)
|
||||
</h5>
|
||||
<app-hashrate-chart-pools [widget]=true></app-hashrate-chart-pools>
|
||||
<div class="mt-1"><a [routerLink]="['/mining/hashrate/pools' | relativeUrl]" i18n="dashboard.view-more">View more »</a></div>
|
||||
<div class="mt-1"><a [routerLink]="['/mining/hashrate/pools' | relativeUrl]" i18n="dashboard.view-more">View
|
||||
more »</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -59,7 +89,8 @@
|
||||
Adjusments
|
||||
</h5>
|
||||
<app-hashrate-chart [tableOnly]=true [widget]=true></app-hashrate-chart>
|
||||
<div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more »</a></div>
|
||||
<div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
|
||||
»</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -55,3 +55,91 @@
|
||||
text-align: center;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.general-stats {
|
||||
min-height: 56px;
|
||||
display: block;
|
||||
@media (min-width: 485px) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
h5 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item {
|
||||
width: 50%;
|
||||
margin: 0px auto 10px;
|
||||
display: inline-block;
|
||||
@media (min-width: 485px) {
|
||||
margin: 0px auto 10px;
|
||||
}
|
||||
@media (min-width: 785px) {
|
||||
margin: 0px auto 0px;
|
||||
}
|
||||
&:last-child {
|
||||
margin: 0px auto 0px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
order: 2;
|
||||
@media (min-width: 485px) {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
order: 3;
|
||||
@media (min-width: 485px) {
|
||||
order: 2;
|
||||
display: block;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.card-title {
|
||||
font-size: 1rem;
|
||||
color: #4a68b9;
|
||||
}
|
||||
.card-text {
|
||||
font-size: 18px;
|
||||
span {
|
||||
color: #ffffff66;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.difficulty-adjustment-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
height: 76px;
|
||||
.shared-block {
|
||||
color: #ffffff66;
|
||||
font-size: 12px;
|
||||
}
|
||||
.item {
|
||||
padding: 0 5px;
|
||||
width: 100%;
|
||||
&:nth-child(1) {
|
||||
display: none;
|
||||
@media (min-width: 485px) {
|
||||
display: table-cell;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-text {
|
||||
font-size: 22px;
|
||||
margin-top: -9px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
|
||||
import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnDestroy, OnInit } from '@angular/core';
|
||||
import { map } from 'rxjs/operators';
|
||||
import { SeoService } from 'src/app/services/seo.service';
|
||||
import { StateService } from 'src/app/services/state.service';
|
||||
import { formatNumber } from '@angular/common';
|
||||
import { WebsocketService } from 'src/app/services/websocket.service';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-mining-dashboard',
|
||||
@ -8,12 +13,36 @@ import { SeoService } from 'src/app/services/seo.service';
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class MiningDashboardComponent implements OnInit {
|
||||
private blocks = [];
|
||||
|
||||
constructor(private seoService: SeoService) {
|
||||
public $rewardStats: Observable<any>;
|
||||
public totalReward = 0;
|
||||
public rewardPerTx = '~';
|
||||
public feePerTx = '~';
|
||||
|
||||
constructor(private seoService: SeoService,
|
||||
public stateService: StateService,
|
||||
private websocketService: WebsocketService,
|
||||
@Inject(LOCALE_ID) private locale: string,
|
||||
) {
|
||||
this.seoService.setTitle($localize`:@@mining.mining-dashboard:Mining Dashboard`);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
this.$rewardStats = this.stateService.blocks$.pipe(
|
||||
map(([block]) => {
|
||||
this.blocks.push(block);
|
||||
this.blocks = this.blocks.slice(0, 8);
|
||||
const totalTx = this.blocks.reduce((acc, block) => acc + block.tx_count, 0);
|
||||
const totalFee = this.blocks.reduce((acc, block) => acc + block.extras?.totalFees ?? 0, 0);
|
||||
const totalReward = this.blocks.reduce((acc, block) => acc + block.extras?.reward ?? 0, 0);
|
||||
|
||||
return {
|
||||
'totalReward': totalReward,
|
||||
'rewardPerTx': formatNumber(totalReward / totalTx, this.locale, '1.0-0'),
|
||||
'feePerTx': formatNumber(totalFee / totalTx, this.locale, '1.0-0'),
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -116,7 +116,7 @@ export class PoolRankingComponent implements OnInit {
|
||||
if (this.isMobile() && this.widget) {
|
||||
edgeDistance = 0;
|
||||
} else if (this.isMobile() && !this.widget || this.widget) {
|
||||
edgeDistance = 20;
|
||||
edgeDistance = 35;
|
||||
}
|
||||
|
||||
miningStats.pools.forEach((pool) => {
|
||||
@ -131,7 +131,7 @@ export class PoolRankingComponent implements OnInit {
|
||||
color: poolsColor[pool.name.replace(/[^a-zA-Z0-9]/g, '').toLowerCase()],
|
||||
},
|
||||
value: pool.share,
|
||||
name: pool.name + (this.isMobile() ? `` : ` (${pool.share}%)`),
|
||||
name: pool.name + ((this.isMobile() || this.widget) ? `` : ` (${pool.share}%)`),
|
||||
label: {
|
||||
overflow: 'none',
|
||||
color: '#b1b1b1',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user