machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move reward stats to component - Add /api/v1/mining/reward-stats/{blockCount}

Browse Source
This commit is contained in:
nymkappa
2022-03-22 12:34:29 +09:00
parent 6106945a45
commit 87df750f16
15 changed files with 202 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
View File

@@ -8,60 +8,11 @@
<div class="card-wrapper">
<div class="card" style="height: 123px">
<div class="card-body more-padding">
<div class="reward-container" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
<div class="item">
<h5 class="card-title" i18n="mining.rewards">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="mining.rewards-per-tx">Reward Per Tx</h5>
<div class="card-text">
{{ rewardStats.rewardPerTx | amountShortener }}
<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="mining.average-fee">Average Fee</h5>
<div class="card-text">
{{ rewardStats.feePerTx | amountShortener}}
<span class="symbol">sats/tx</span>
<div class="symbol">in the last 8 blocks</div>
</div>
</div>
</div>
<app-reward-stats></app-reward-stats>
</div>
</div>
</div>
</div>
<ng-template #loadingReward>
<div class="reward-container">
<div class="item">
<h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
<div class="card-text skeleton">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
<div class="card-text skeleton">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
<div class="card-text skeleton">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
</div>
</ng-template>
<!-- difficulty adjustment -->
<div class="col">

36
frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
View File

@@ -59,42 +59,6 @@
padding-bottom: 3px;
}
.reward-container {
display: flex;
flex-direction: row;
justify-content: space-around;
height: 76px;
.shared-block {
color: #ffffff66;
font-size: 12px;
}
.item {
display: table-cell;
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;
}
.card-text.skeleton {
margin-top: 0px;
}
}
.more-padding {
padding: 18px;
}

22
frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
View File

@@ -14,14 +14,8 @@ import { WebsocketService } from 'src/app/services/websocket.service';
export class MiningDashboardComponent implements OnInit {
private blocks = [];
public $rewardStats: Observable<any>;
public totalReward = 0;
public rewardPerTx = '~';
public feePerTx = '~';
constructor(
private seoService: SeoService,
public stateService: StateService,
private websocketService: WebsocketService,
) {
this.seoService.setTitle($localize`:@@mining.mining-dashboard:Mining Dashboard`);
@@ -29,21 +23,5 @@ export class MiningDashboardComponent implements OnInit {
ngOnInit(): void {
this.websocketService.want(['blocks', 'mempool-blocks']);
this.$rewardStats = this.stateService.blocks$.pipe(
map(([block]) => {
this.blocks.unshift(block);
this.blocks = this.blocks.slice(0, 8);
const totalTx = this.blocks.reduce((acc, b) => acc + b.tx_count, 0);
const totalFee = this.blocks.reduce((acc, b) => acc + b.extras?.totalFees ?? 0, 0);
const totalReward = this.blocks.reduce((acc, b) => acc + b.extras?.reward ?? 0, 0);
return {
'totalReward': totalReward,
'rewardPerTx': Math.round(totalReward / totalTx),
'feePerTx': Math.round(totalFee / totalTx),
};
})
);
}
}