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

Use fee estimation box layout for reward stats and show USD amounts

Browse Source
This commit is contained in:
nymkappa
2022-03-23 12:15:58 +09:00
parent fb7e81af57
commit dcd50802e4
2 changed files with 148 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
frontend/src/app/components/reward-stats/reward-stats.component.html
View File

@@ -1,4 +1,72 @@
<div class="reward-container" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
<div class="fee-estimation-wrapper" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
<div class="fee-estimation-container">
<div class="item">
<h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
<div class="card-text" i18n-ngbTooltip="Transaction fee tooltip"
ngbTooltip="Amount being paid to miners in the past 144 blocks" placement="bottom">
<div class="fee-text">
<app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
</div>
<span class="fiat">
<app-fiat [value]="rewardStats.totalReward"></app-fiat>
</span>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
<div class="card-text" i18n-ngbTooltip="Transaction fee tooltip"
ngbTooltip="Average miners' reward per transaction in the past 144 blocks" placement="bottom">
<div class="fee-text">
{{ rewardStats.rewardPerTx | amountShortener }}
<span i18n="shared.sat-vbyte|sat/vB">sats/tx</span>
</div>
<span class="fiat">
<app-fiat [value]="rewardStats.rewardPerTx"></app-fiat>
</span>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
<div class="card-text" i18n-ngbTooltip="Transaction fee tooltip"
ngbTooltip="Fee paid on average for each transaction in the past 144 blocks" placement="bottom">
<div class="fee-text">{{ rewardStats.feePerTx | amountShortener }}
<span i18n="shared.sat-vbyte|sat/vB">sats/tx</span>
</div>
<span class="fiat">
<app-fiat [value]="rewardStats.feePerTx"></app-fiat>
</span>
</div>
</div>
</div>
</div>
<ng-template #loadingReward>
<div class="fee-estimation-container loading-container">
<div class="item">
<h5 class="card-title" i18n="fees-box.low-priority">Low priority</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="fees-box.medium-priority">Medium priority</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="fees-box.high-priority">High priority</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
</div>
</ng-template>
<!-- <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">
@@ -48,4 +116,4 @@
</div>
</div>
</div>
</ng-template>
</ng-template> -->