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 5c629dfe98
commit 2644f2fb07
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/reward-stats/reward-stats.component.html Normal file
View File

@@ -0,0 +1,51 @@
<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 past 144 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 past 144 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 past 144 blocks</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>

57
frontend/src/app/components/reward-stats/reward-stats.component.scss Normal file
View File

@@ -0,0 +1,57 @@
.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;
}
}
.card-text {
font-size: 22px;
}
.card-title {
font-size: 1rem;
color: #4a68b9;
}
.skeleton-loader {
width: 100%;
display: block;
&:first-child {
max-width: 90px;
margin: 15px auto 3px;
}
&:last-child {
margin: 10px auto 3px;
max-width: 55px;
}
}

29
frontend/src/app/components/reward-stats/reward-stats.component.ts Normal file
View File

@@ -0,0 +1,29 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { ApiService } from 'src/app/services/api.service';
@Component({
selector: 'app-reward-stats',
templateUrl: './reward-stats.component.html',
styleUrls: ['./reward-stats.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RewardStatsComponent implements OnInit {
public $rewardStats: Observable<any>;
constructor(private apiService: ApiService) { }
ngOnInit(): void {
this.$rewardStats = this.apiService.getRewardStats$()
.pipe(
map((res) => {
return {
totalReward: res.totalReward,
rewardPerTx: res.totalReward / res.totalTx,
feePerTx: res.totalFee / res.totalTx,
};
})
);
}
}