From b4fd98f565ef976492b6bb53017ea3a86414bb6e Mon Sep 17 00:00:00 2001 From: nymkappa Date: Tue, 31 May 2022 22:31:01 +0200 Subject: [PATCH 1/4] 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 }%, From cefc927b06730a06a9eb52bc9380e6aef5f35f76 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Wed, 1 Jun 2022 09:46:52 +0200 Subject: [PATCH 2/4] Tweaks fee widget --- .../fees-box/fees-box.component.html | 16 ++++++++-------- .../fees-box/fees-box.component.scss | 18 +++++++++--------- .../components/fees-box/fees-box.component.ts | 5 +++-- .../src/app/dashboard/dashboard.component.html | 4 ++-- .../src/app/dashboard/dashboard.component.scss | 3 +++ 5 files changed, 25 insertions(+), 21 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 7a34695bb..675ce64a6 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.html +++ b/frontend/src/app/components/fees-box/fees-box.component.html @@ -1,3 +1,11 @@ +
+ Minimum + Economy + Low + Medium + High +
+
@@ -28,14 +36,6 @@
-
- Minimum - Economy - Low - Medium - 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 271e479e4..870b46427 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.scss +++ b/frontend/src/app/components/fees-box/fees-box.component.scss @@ -55,18 +55,17 @@ border-bottom: 1px solid #ffffff1c; width: fit-content; margin: auto; - line-height: 1.45; - padding: 0px 2px; + font-size: 20px; } .fiat { display: block; - font-size: 14px !important; + font-size: 13px !important; } } } .loading-container{ - min-height: 76px; + height: 50px; } .card-text { @@ -74,8 +73,8 @@ width: 100%; display: block; &:first-child { - max-width: 90px; - margin: 15px auto 3px; + max-width: 70px; + margin: 10px auto 3px; } &:last-child { margin: 10px auto 3px; @@ -86,14 +85,15 @@ .fee-progress-bar { width: 100%; - height: 20px; - margin-top: 15px; + height: 22px; + margin-bottom: 8px; border-radius: 0px 10px 10px 0px; display: flex; flex-direction: row; + transition: background-color 1s; } .fee-label { - font-size: 12px; + font-size: 14px; 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 3b8f02c80..69b3f55ac 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.ts +++ b/frontend/src/app/components/fees-box/fees-box.component.ts @@ -15,8 +15,8 @@ export class FeesBoxComponent implements OnInit { isLoadingWebSocket$: Observable; recommendedFees$: Observable; defaultFee: number; - startColor = '#557d00'; - endColor = '#557d00'; + startColor = '#2e324e'; + endColor = '#2e324e'; constructor( private stateService: StateService, @@ -29,6 +29,7 @@ export class FeesBoxComponent implements OnInit { this.recommendedFees$ = this.stateService.recommendedFees$ .pipe( tap((fees) => { + // For quick testing purpose // fees.fastestFee = 400; // fees.halfHourFee = 75; // fees.hourFee = 50; diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index d26b6660a..99ae4a301 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -5,7 +5,7 @@
Transaction Fees
-
+
@@ -33,7 +33,7 @@
Transaction Fees
-
+
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index e6ddb5f84..81e7a671d 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/frontend/src/app/dashboard/dashboard.component.scss @@ -269,6 +269,9 @@ justify-content: space-around; padding: 22px 20px; } + .less-padding { + padding: 20px 20px; + } } .retarget-sign { From ec24549602459f9c7dcaf9b112fc736482e60257 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Wed, 1 Jun 2022 12:28:36 +0200 Subject: [PATCH 3/4] Hide minimum and economy on mobile --- .../difficulty/difficulty.component.scss | 6 ++- .../fees-box/fees-box.component.scss | 45 +++++++++++-------- .../mining-dashboard.component.scss | 2 +- 3 files changed, 32 insertions(+), 21 deletions(-) diff --git a/frontend/src/app/components/difficulty/difficulty.component.scss b/frontend/src/app/components/difficulty/difficulty.component.scss index f66e2c8e5..c5cd2dc5e 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.scss +++ b/frontend/src/app/components/difficulty/difficulty.component.scss @@ -133,7 +133,7 @@ text-align: center; flex-direction: column; justify-content: space-around; - padding: 22px 20px; + padding: 24px 20px; } } @@ -148,3 +148,7 @@ margin-right: -2px; font-size: 10px; } + +.symbol { + font-size: 13px; +} \ No newline at end of file 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 870b46427..fe4e0161d 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.scss +++ b/frontend/src/app/components/fees-box/fees-box.component.scss @@ -21,28 +21,22 @@ .fee-estimation-container { display: flex; justify-content: space-between; - @media (min-width: 376px) { - flex-direction: row; - } + flex-direction: row; .item { width: 100px; margin: 0; width: -webkit-fill-available; - @media (min-width: 376px) { - margin: 0 auto 0px; - } - &:first-child{ - display: none; - @media (min-width: 485px) { - display: block; - } - @media (min-width: 768px) { - display: none; - } - @media (min-width: 992px) { - display: block; - } + &:first-child { + @media (767px < width < 992px), (width < 576px) { + display: none + } } + &:nth-child(2) { + @media (767px < width < 992px), (width < 576px) { + display: none + } + } + margin: 0 auto 0px; &:last-child { margin-bottom: 0; } @@ -86,7 +80,7 @@ .fee-progress-bar { width: 100%; height: 22px; - margin-bottom: 8px; + margin-bottom: 12px; border-radius: 0px 10px 10px 0px; display: flex; flex-direction: row; @@ -95,5 +89,18 @@ .fee-label { font-size: 14px; - width: 100px; + width: 20%; + @media (767px < width < 992px), (width < 576px) { + width: 33%; + } + &:first-child { + @media (767px < width < 992px), (width < 576px) { + display: none + } + } + &:nth-child(2) { + @media (767px < width < 992px), (width < 576px) { + display: none + } + } } \ No newline at end of file diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss index 72332602b..80b8c1d5d 100644 --- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss +++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss @@ -64,7 +64,7 @@ } .more-padding { - padding: 18px; + padding: 23px 20px !important; } .card-wrapper { From 34576c06095cd73dc6e794a0d24b8916df51220d Mon Sep 17 00:00:00 2001 From: nymkappa Date: Wed, 1 Jun 2022 12:53:36 +0200 Subject: [PATCH 4/4] Update gradient as soon as we receive the fees --- .../fees-box/fees-box.component.html | 26 ++++++++++++------- .../components/fees-box/fees-box.component.ts | 21 +++++---------- .../mining-dashboard.component.scss | 2 +- 3 files changed, 23 insertions(+), 26 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 675ce64a6..dc84ae9b0 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.html +++ b/frontend/src/app/components/fees-box/fees-box.component.html @@ -1,13 +1,12 @@ -
- Minimum - Economy - Low - Medium - High -
- -
-
+
+
+ Minimum + Economy + Low + Medium + High +
+
{{ recommendedFees.minimumFee }} sat/vB
@@ -37,6 +36,13 @@
+
+ Minimum + Economy + Low + Medium + High +
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 69b3f55ac..76cf03a4f 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.ts +++ b/frontend/src/app/components/fees-box/fees-box.component.ts @@ -14,35 +14,26 @@ import { tap } from 'rxjs/operators'; export class FeesBoxComponent implements OnInit { isLoadingWebSocket$: Observable; recommendedFees$: Observable; - defaultFee: number; - startColor = '#2e324e'; - endColor = '#2e324e'; + gradient = 'linear-gradient(to right, #2e324e, #2e324e)'; constructor( - private stateService: StateService, + private stateService: StateService ) { } ngOnInit(): void { - this.defaultFee = this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet' ? 0.1 : 1; - this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$; this.recommendedFees$ = this.stateService.recommendedFees$ .pipe( 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); 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 = 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})`; } ) ); diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss index 80b8c1d5d..3ee108d9d 100644 --- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss +++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss @@ -64,7 +64,7 @@ } .more-padding { - padding: 23px 20px !important; + padding: 24px 20px !important; } .card-wrapper {