Rewamp the fee widget

2022-05-31 22:31:01 +02:00 · 2022-05-31 22:31:01 +02:00 · b4fd98f565
commit b4fd98f565
parent f20cf266b6
4 changed files with 71 additions and 19 deletions
--- 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 @@
 <div class="fee-estimation-wrapper">
  <div class="fee-estimation-container" *ngIf="(isLoadingWebSocket$ | async) === false && (recommendedFees$ | async) as recommendedFees; else loadingFees">
    <div class="item">
-      <h5 class="card-title" i18n="fees-box.low-priority">Low priority</h5>
+      <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>
+    </div>
+    <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.economyFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="recommendedFees.economyFee * 140" ></app-fiat></span>
+      </div>
+    </div>
+    <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.hourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="recommendedFees.hourFee * 140" ></app-fiat></span>
      </div>
    </div>
    <div class="item">
-      <h5 class="card-title" i18n="fees-box.medium-priority">Medium priority</h5>
      <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.halfHourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="recommendedFees.halfHourFee * 140" ></app-fiat></span>
      </div>
    </div>
    <div class="item">
-      <h5 class="card-title" i18n="fees-box.high-priority">High priority</h5>
      <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.fastestFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="recommendedFees.fastestFee * 140" ></app-fiat></span>
      </div>
@ -21,24 +28,41 @@
  </div>
 </div>

+<div class="fee-progress-bar" [style.background]="'linear-gradient(to right, ' + startColor + ', ' + endColor + ')'">
+  <span class="fee-label">Minimum</span>
+  <span class="fee-label">Economy</span>
+  <span class="fee-label">Low</span>
+  <span class="fee-label">Medium</span>
+  <span class="fee-label">Priority</span>
+</div>
+
 <ng-template #loadingFees>
  <div class="fee-estimation-container loading-container">
    <div class="item">
-      <h5 class="card-title" i18n="fees-box.low-priority">Low priority</h5>
      <div class="card-text">
        <div class="skeleton-loader"></div>
        <div class="skeleton-loader"></div>
      </div>
    </div>
    <div class="item">
-      <h5 class="card-title" i18n="fees-box.medium-priority">Medium priority</h5>
      <div class="card-text">
        <div class="skeleton-loader"></div>
        <div class="skeleton-loader"></div>
      </div>
    </div>
    <div class="item">
-      <h5 class="card-title" i18n="fees-box.high-priority">High priority</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
      <div class="card-text">
        <div class="skeleton-loader"></div>
        <div class="skeleton-loader"></div>
--- 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;
 }
--- 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<boolean>;
  recommendedFees$: Observable<Recommendedfees>;
  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]);
+        }
+      )
+    );
  }
 }
--- 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 }%,