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

Bugfix: Dashboard - Difficulty adjustment component. (#663)

Browse Source 
* Add color to previous retarget.
Add absolute number pipe.
Change plus and minus signs to fa icons.
Change Fee Estimate title to Transactions Fees.
Set min and max difficulty adjustments.

* Add projectID to cypress conf.

* Change icon to fa-caret.

* Remove unecessary icons.
This commit is contained in:
Miguel Medeiros
2021-07-26 16:00:40 -03:00
committed by GitHub
parent bbe1912510
commit cc8bac0a26
8 changed files with 86 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/app/dashboard/dashboard.component.html
View File

@@ -3,7 +3,7 @@
<div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
<ng-template [ngIf]="collapseLevel === 'three'" [ngIfElse]="expanded">
<div class="col card-wrapper">
<div class="main-title" i18n="fees-box.fee-estimates">Fee Estimates</div>
<div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
<div class="card">
<div class="card-body">
<app-fees-box class="d-block"></app-fees-box>
@@ -30,7 +30,7 @@
</ng-template>
<ng-template #expanded>
<div class="col card-wrapper">
<div class="main-title" i18n="fees-box.fee-estimates">Fee Estimates</div>
<div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
<div class="card">
<div class="card-body">
<app-fees-box class="d-block"></app-fees-box>
@@ -215,8 +215,25 @@
</div>
<div class="item">
<h5 class="card-title" i18n="difficulty-box.estimate">Estimate</h5>
<div class="card-text" [ngStyle]="{'color': epochData.colorAdjustments}">{{epochData.change > 0 ? '+' : ''}}{{ epochData.change | number: '1.2-2' }} <span class="symbol">%</span></div>
<div class="symbol" i18n="difficulty-box.previous-retarget">Previous: {{epochData.previousRetarget > 0 ? '+' : ''}}{{ epochData.previousRetarget | number: '1.2-2' }} %</div>
<div class="card-text" [ngStyle]="{'color': epochData.colorAdjustments}">
<span *ngIf="epochData.change > 0; else arrowDownDifficulty" >
<fa-icon class="retarget-sign" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
</span>
<ng-template #arrowDownDifficulty >
<fa-icon class="retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
</ng-template>
{{ epochData.change | absolute | number: '1.2-2' }} <span class="symbol">%</span>
</div>
<div class="symbol">
<span i18n="difficulty-box.previous">Previous</span>:
<span [ngStyle]="{'color': epochData.colorPreviousAdjustments}">
<span *ngIf="epochData.previousRetarget > 0; else arrowDownPreviousDifficulty" >
<fa-icon class="previous-retarget-sign" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
</span>
<ng-template #arrowDownPreviousDifficulty >
<fa-icon class="previous-retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
</ng-template>
{{ epochData.previousRetarget | absolute | number: '1.2-2' }} </span> %</div>
</div>
<div class="item">
<h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>

12
frontend/src/app/dashboard/dashboard.component.scss
View File

@@ -325,4 +325,16 @@
justify-content: space-around;
padding: 22px 20px;
}
}
.retarget-sign {
margin-right: -3px;
font-size: 14px;
top: -2px;
position: relative;
}
.previous-retarget-sign {
margin-right: -2px;
font-size: 10px;
}

34
frontend/src/app/dashboard/dashboard.component.ts
View File

@@ -24,6 +24,7 @@ interface EpochProgress {
remainingBlocks: number;
newDifficultyHeight: number;
colorAdjustments: string;
colorPreviousAdjustments: string;
timeAvg: string;
remainingTime: number;
previousRetarget: number;
@@ -143,19 +144,41 @@ export class DashboardComponent implements OnInit {
colorAdjustments = '#299435';
}
let colorPreviousAdjustments = '#dc3545';
if(previousRetarget){
if (previousRetarget >= 0) {
colorPreviousAdjustments = '#299435';
}
if (previousRetarget === 0) {
colorPreviousAdjustments = '#ffffff66';
}
}else{
colorPreviousAdjustments = '#ffffff66';
}
const timeAvgDiff = difficultyChange * 0.1;
let timeAvgMins = 10;
if (timeAvgDiff > 0 ){
timeAvgMins -= Math.abs(timeAvgDiff);
} else {
timeAvgMins += Math.abs(timeAvgDiff);
if(timeAvgDiff > timeAvgDiff){
if (timeAvgDiff > 0){
timeAvgMins -= Math.abs(timeAvgDiff);
} else {
timeAvgMins += Math.abs(timeAvgDiff);
}
}
const remainingBlocks = 2016 - blocksInEpoch;
const nowMilliseconds = now * 1000;
const timeAvgMilliseconds = timeAvgMins * 60 * 1000;
const remainingBlocsMilliseconds = remainingBlocks * timeAvgMilliseconds;
if(difficultyChange > 300) {
difficultyChange = 300;
}
if(difficultyChange < -75){
difficultyChange = -75;
}
return {
base: base + '%',
change: difficultyChange,
@@ -163,10 +186,11 @@ export class DashboardComponent implements OnInit {
remainingBlocks,
timeAvg: timeAvgMins.toFixed(0),
colorAdjustments,
colorPreviousAdjustments,
blocksInEpoch,
newDifficultyHeight: block.height + remainingBlocks,
remainingTime: remainingBlocsMilliseconds + nowMilliseconds,
previousRetarget
previousRetarget: previousRetarget ? previousRetarget : 0
};
})
);