From bc133937784dec2828d77e10dc7121803d062f33 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Mon, 7 Mar 2022 11:22:54 +0100 Subject: [PATCH] Implement temporary reward stats for the mining dashboard --- .../difficulty/difficulty.component.html | 2 +- .../mining-dashboard.component.html | 41 +++++++-- .../mining-dashboard.component.scss | 88 +++++++++++++++++++ .../mining-dashboard.component.ts | 35 +++++++- .../pool-ranking/pool-ranking.component.ts | 4 +- 5 files changed, 159 insertions(+), 11 deletions(-) diff --git a/frontend/src/app/components/difficulty/difficulty.component.html b/frontend/src/app/components/difficulty/difficulty.component.html index bda189eab..3684b8de4 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.html +++ b/frontend/src/app/components/difficulty/difficulty.component.html @@ -47,7 +47,7 @@
-
Next halving
+
Next Halving
{{ i }} blocks diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html index cd8330321..6dbb541c3 100644 --- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html +++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html @@ -3,8 +3,35 @@
-
Placeholder
+
Reward stats
+
+
+
+
Miners Reward
+
+ +
in the last 8 blocks
+
+
+
+
Reward Per Tx
+
+ {{ rewardStats.rewardPerTx }} + sats/tx +
in the last 8 blocks
+
+
+
+
Average Fee
+
+ {{ rewardStats.feePerTx }} + sats/tx +
in the last 8 blocks
+
+
+
+
@@ -21,7 +48,8 @@
-
View more »
+
View more + »
@@ -34,7 +62,8 @@ Hashrate (1y) -
View more »
+
View more + »
@@ -47,7 +76,8 @@ Mining Pools Dominance (1y) -
View more »
+
View + more »
@@ -59,7 +89,8 @@ Adjusments -
View more »
+
View more + »
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss index dea5e673f..828ee7ed0 100644 --- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss +++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss @@ -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; + } +} diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts index aac546ca1..b4cc95a1e 100644 --- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts +++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts @@ -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; + 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'), + } + }) + ); + } } diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts index eacf4683f..646cae06b 100644 --- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts +++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts @@ -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',