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

Update gradient as soon as we receive the fees

Browse Source
This commit is contained in:
nymkappa 2022-06-01 12:53:36 +02:00
parent ec24549602
commit 34576c0609
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
3 changed files with 23 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/app/components/fees-box/fees-box.component.html
View File

@ -1,13 +1,12 @@
<div class="fee-progress-bar" [style.background]="'linear-gradient(to right, ' + startColor + ', ' + endColor + ')'"> <div class="fee-estimation-wrapper" *ngIf="(isLoadingWebSocket$ | async) === false && (recommendedFees$ | async) as recommendedFees; else loadingFees">
<span class="fee-label" i18n="fees-box.minimum">Minimum</span> <div class="fee-progress-bar" [style.background]="gradient">
<span class="fee-label" i18n="fees-box.economy">Economy</span> <span class="fee-label" i18n="fees-box.minimum">Minimum</span>
<span class="fee-label" i18n="fees-box.low">Low</span> <span class="fee-label" i18n="fees-box.economy">Economy</span>
<span class="fee-label" i18n="fees-box.medium">Medium</span> <span class="fee-label" i18n="fees-box.low">Low</span>
<span class="fee-label" i18n="fees-box.high">High</span> <span class="fee-label" i18n="fees-box.medium">Medium</span>
</div> <span class="fee-label" i18n="fees-box.high">High</span>
</div>
<div class="fee-estimation-wrapper"> <div class="fee-estimation-container">
<div class="fee-estimation-container" *ngIf="(isLoadingWebSocket$ | async) === false && (recommendedFees$ | async) as recommendedFees; else loadingFees">
<div class="item"> <div class="item">
<div class="card-text" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"> <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom">
<div class="fee-text">{{ recommendedFees.minimumFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="recommendedFees.minimumFee * 140" ></app-fiat></span> <div class="fee-text">{{ recommendedFees.minimumFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="recommendedFees.minimumFee * 140" ></app-fiat></span>
@ -37,6 +36,13 @@
</div> </div>
<ng-template #loadingFees> <ng-template #loadingFees>
<div class="fee-progress-bar" [style.background]="gradient">
<span class="fee-label" i18n="fees-box.minimum">Minimum</span>
<span class="fee-label" i18n="fees-box.economy">Economy</span>
<span class="fee-label" i18n="fees-box.low">Low</span>
<span class="fee-label" i18n="fees-box.medium">Medium</span>
<span class="fee-label" i18n="fees-box.high">High</span>
</div>
<div class="fee-estimation-container loading-container"> <div class="fee-estimation-container loading-container">
<div class="item"> <div class="item">
<div class="card-text"> <div class="card-text">

21
frontend/src/app/components/fees-box/fees-box.component.ts
View File

@ -14,35 +14,26 @@ import { tap } from 'rxjs/operators';
export class FeesBoxComponent implements OnInit { export class FeesBoxComponent implements OnInit {
isLoadingWebSocket$: Observable<boolean>; isLoadingWebSocket$: Observable<boolean>;
recommendedFees$: Observable<Recommendedfees>; recommendedFees$: Observable<Recommendedfees>;
defaultFee: number; gradient = 'linear-gradient(to right, #2e324e, #2e324e)';
startColor = '#2e324e';
endColor = '#2e324e';
constructor( constructor(
private stateService: StateService, private stateService: StateService
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.defaultFee = this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet' ? 0.1 : 1;
this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$; this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$;
this.recommendedFees$ = this.stateService.recommendedFees$ this.recommendedFees$ = this.stateService.recommendedFees$
.pipe( .pipe(
tap((fees) => { tap((fees) => {
// For quick testing purpose
// fees.fastestFee = 400;
// fees.halfHourFee = 75;
// fees.hourFee = 50;
// fees.economyFee = 40;
// fees.minimumFee = 5;
let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.minimumFee >= feeLvl); let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.minimumFee >= feeLvl);
feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex; feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
this.startColor = '#' + (mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]); const startColor = '#' + (mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]);
feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.fastestFee >= feeLvl); feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.fastestFee >= feeLvl);
feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex; feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
this.endColor = '#' + (mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]); const endColor = '#' + (mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]);
this.gradient = `linear-gradient(to right, ${startColor}, ${endColor})`;
} }
) )
); );

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

@ -64,7 +64,7 @@
} }
.more-padding { .more-padding {
padding: 23px 20px !important; padding: 24px 20px !important;
} }
.card-wrapper { .card-wrapper {