From c29558db20fcc6eee7db99a48322bc8b79bb8764 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Thu, 15 Jun 2023 15:16:49 -0400
Subject: [PATCH] Add fee rate display component

---
 .../fee-rate/fee-rate.component.html          |  4 +++
 .../fee-rate/fee-rate.component.scss          |  0
 .../components/fee-rate/fee-rate.component.ts | 26 +++++++++++++++++++
 .../pipes/fee-rounding/fee-rounding.pipe.ts   |  6 ++++-
 frontend/src/app/shared/shared.module.ts      |  3 +++
 frontend/src/styles.scss                      |  2 +-
 6 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/app/shared/components/fee-rate/fee-rate.component.html
 create mode 100644 frontend/src/app/shared/components/fee-rate/fee-rate.component.scss
 create mode 100644 frontend/src/app/shared/components/fee-rate/fee-rate.component.ts

diff --git a/frontend/src/app/shared/components/fee-rate/fee-rate.component.html b/frontend/src/app/shared/components/fee-rate/fee-rate.component.html
new file mode 100644
index 000000000..3b6ecc75e
--- /dev/null
+++ b/frontend/src/app/shared/components/fee-rate/fee-rate.component.html
@@ -0,0 +1,4 @@
+<ng-container *ngIf="rateUnits$ | async as units">
+  <ng-container *ngIf="units !== 'wu'">{{ fee / (weight / 4) | feeRounding:rounding }} <span *ngIf="showUnit" [class]="unitClass">sat/vB</span></ng-container>
+  <ng-container *ngIf="units === 'wu'">{{ fee / weight | feeRounding:rounding }} <span *ngIf="showUnit" [class]="unitClass">sat/WU</span></ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/fee-rate/fee-rate.component.scss b/frontend/src/app/shared/components/fee-rate/fee-rate.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/shared/components/fee-rate/fee-rate.component.ts b/frontend/src/app/shared/components/fee-rate/fee-rate.component.ts
new file mode 100644
index 000000000..f48686ad5
--- /dev/null
+++ b/frontend/src/app/shared/components/fee-rate/fee-rate.component.ts
@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { StateService } from '../../../services/state.service';
+
+@Component({
+  selector: 'app-fee-rate',
+  templateUrl: './fee-rate.component.html',
+  styleUrls: ['./fee-rate.component.scss']
+})
+export class FeeRateComponent implements OnInit {
+  @Input() fee: number;
+  @Input() weight: number = 4;
+  @Input() rounding: string = null;
+  @Input() showUnit: boolean = true;
+  @Input() unitClass: string = 'symbol';
+
+  rateUnits$: Observable<string>;
+
+  constructor(
+    private stateService: StateService,
+  ) { }
+
+  ngOnInit() {
+    this.rateUnits$ = this.stateService.rateUnits$;
+  }
+}
diff --git a/frontend/src/app/shared/pipes/fee-rounding/fee-rounding.pipe.ts b/frontend/src/app/shared/pipes/fee-rounding/fee-rounding.pipe.ts
index 319698b23..554b0774b 100644
--- a/frontend/src/app/shared/pipes/fee-rounding/fee-rounding.pipe.ts
+++ b/frontend/src/app/shared/pipes/fee-rounding/fee-rounding.pipe.ts
@@ -9,7 +9,11 @@ export class FeeRoundingPipe implements PipeTransform {
     @Inject(LOCALE_ID) private locale: string,
   ) {}
 
-  transform(fee: number): string {
+  transform(fee: number, rounding = null): string {
+    if (rounding) {
+      return formatNumber(fee, this.locale, rounding);
+    }
+
     if (fee >= 100) {
       return formatNumber(fee, this.locale, '1.0-0')
     } else if (fee < 10) {
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index 9d9606084..d68f1e4e0 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -83,6 +83,7 @@ import { IndexingProgressComponent } from '../components/indexing-progress/index
 import { SvgImagesComponent } from '../components/svg-images/svg-images.component';
 import { ChangeComponent } from '../components/change/change.component';
 import { SatsComponent } from './components/sats/sats.component';
+import { FeeRateComponent } from './components/fee-rate/fee-rate.component';
 import { TruncateComponent } from './components/truncate/truncate.component';
 import { SearchResultsComponent } from '../components/search-form/search-results/search-results.component';
 import { TimestampComponent } from './components/timestamp/timestamp.component';
@@ -173,6 +174,7 @@ import { ClockComponent } from '../components/clock/clock.component';
     SvgImagesComponent,
     ChangeComponent,
     SatsComponent,
+    FeeRateComponent,
     TruncateComponent,
     SearchResultsComponent,
     TimestampComponent,
@@ -287,6 +289,7 @@ import { ClockComponent } from '../components/clock/clock.component';
     SvgImagesComponent,
     ChangeComponent,
     SatsComponent,
+    FeeRateComponent,
     TruncateComponent,
     SearchResultsComponent,
     TimestampComponent,
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index aea8e8d6e..e5eb2272b 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -221,7 +221,7 @@ main {
 }
 
 .block-size, .blocks-container {
-  span {
+  .symbol {
     font-size: 16px;
     color: #fff !important;
   }