From 34576c06095cd73dc6e794a0d24b8916df51220d Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Wed, 1 Jun 2022 12:53:36 +0200
Subject: [PATCH] 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 @@
-<div class="fee-progress-bar" [style.background]="'linear-gradient(to right, ' + startColor + ', ' + endColor + ')'">
-  <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-wrapper">
-  <div class="fee-estimation-container" *ngIf="(isLoadingWebSocket$ | async) === false && (recommendedFees$ | async) as recommendedFees; else loadingFees">
+<div class="fee-estimation-wrapper" *ngIf="(isLoadingWebSocket$ | async) === false && (recommendedFees$ | async) as recommendedFees; else 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">
     <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="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>
 
 <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="item">
       <div class="card-text">
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<boolean>;
   recommendedFees$: Observable<Recommendedfees>;
-  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 {