From b4fd98f565ef976492b6bb53017ea3a86414bb6e Mon Sep 17 00:00:00 2001 From: nymkappa Date: Tue, 31 May 2022 22:31:01 +0200 Subject: [PATCH] Rewamp the fee widget --- .../fees-box/fees-box.component.html | 36 +++++++++++++++---- .../fees-box/fees-box.component.scss | 18 ++++++++-- .../components/fees-box/fees-box.component.ts | 35 ++++++++++++------ .../mempool-blocks.component.ts | 1 - 4 files changed, 71 insertions(+), 19 deletions(-) diff --git a/frontend/src/app/components/fees-box/fees-box.component.html b/frontend/src/app/components/fees-box/fees-box.component.html index 74380f8ad..7a34695bb 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.html +++ b/frontend/src/app/components/fees-box/fees-box.component.html @@ -1,19 +1,26 @@
-
Low priority
+
+
{{ recommendedFees.minimumFee }} sat/vB
+
+
+
+
+
{{ recommendedFees.economyFee }} sat/vB
+
+
+
{{ recommendedFees.hourFee }} sat/vB
-
Medium priority
{{ recommendedFees.halfHourFee }} sat/vB
-
High priority
{{ recommendedFees.fastestFee }} sat/vB
@@ -21,24 +28,41 @@
+
+ Minimum + Economy + Low + Medium + Priority +
+
-
Low priority
-
Medium priority
-
High priority
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/app/components/fees-box/fees-box.component.scss b/frontend/src/app/components/fees-box/fees-box.component.scss index 460db5e4b..271e479e4 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.scss +++ b/frontend/src/app/components/fees-box/fees-box.component.scss @@ -1,7 +1,7 @@ .card-title { color: #4a68b9; font-size: 10px; - margin-bottom: 4px; + margin-bottom: 4px; font-size: 1rem; } @@ -25,7 +25,7 @@ flex-direction: row; } .item { - max-width: 150px; + width: 100px; margin: 0; width: -webkit-fill-available; @media (min-width: 376px) { @@ -82,4 +82,18 @@ max-width: 55px; } } +} + +.fee-progress-bar { + width: 100%; + height: 20px; + margin-top: 15px; + border-radius: 0px 10px 10px 0px; + display: flex; + flex-direction: row; +} + +.fee-label { + font-size: 12px; + width: 100px; } \ No newline at end of file diff --git a/frontend/src/app/components/fees-box/fees-box.component.ts b/frontend/src/app/components/fees-box/fees-box.component.ts index e93397bec..3b8f02c80 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.ts +++ b/frontend/src/app/components/fees-box/fees-box.component.ts @@ -1,14 +1,9 @@ import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { StateService } from 'src/app/services/state.service'; -import { map, filter, tap } from 'rxjs/operators'; -import { merge, Observable } from 'rxjs'; -import { MempoolBlock, Recommendedfees } from 'src/app/interfaces/websocket.interface'; - -interface FeeEstimations { - fastestFee: number; - halfHourFee: number; - hourFee: number; -} +import { Observable } from 'rxjs'; +import { Recommendedfees } from 'src/app/interfaces/websocket.interface'; +import { feeLevels, mempoolFeeColors } from 'src/app/app.constants'; +import { tap } from 'rxjs/operators'; @Component({ selector: 'app-fees-box', @@ -20,6 +15,8 @@ export class FeesBoxComponent implements OnInit { isLoadingWebSocket$: Observable; recommendedFees$: Observable; defaultFee: number; + startColor = '#557d00'; + endColor = '#557d00'; constructor( private stateService: StateService, @@ -29,6 +26,24 @@ export class FeesBoxComponent implements OnInit { this.defaultFee = this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet' ? 0.1 : 1; this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$; - this.recommendedFees$ = this.stateService.recommendedFees$; + this.recommendedFees$ = this.stateService.recommendedFees$ + .pipe( + tap((fees) => { + // 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); + feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex; + this.startColor = '#' + (mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]); + + feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.fastestFee >= feeLvl); + feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex; + this.endColor = '#' + (mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]); + } + ) + ); } } diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts index a4bd584f3..0019c8a44 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts @@ -238,7 +238,6 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy { gradientColors.push(mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]); }); - gradientColors.forEach((color, i, gc) => { backgroundGradients.push(` #${i === 0 ? color : gc[i - 1]} ${ i === 0 ? emptyBackgroundSpacePercentage : ((i / gradientColors.length) * 100) * usedBlockSpace / 100 + emptyBackgroundSpacePercentage }%,