From a45f1fde1cfd23fcb94302c11e60e798b124eed0 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Thu, 15 Jun 2023 15:15:20 -0400
Subject: [PATCH] Add fee rate unit preference & dropdown

---
 .../rate-unit-selector.component.html         |  5 +++
 .../rate-unit-selector.component.scss         |  0
 .../rate-unit-selector.component.ts           | 45 +++++++++++++++++++
 frontend/src/app/services/state.service.ts    |  4 ++
 .../global-footer.component.html              |  3 ++
 frontend/src/app/shared/shared.module.ts      |  3 ++
 6 files changed, 60 insertions(+)
 create mode 100644 frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.html
 create mode 100644 frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.scss
 create mode 100644 frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.ts

diff --git a/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.html b/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.html
new file mode 100644
index 000000000..016d1b555
--- /dev/null
+++ b/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.html
@@ -0,0 +1,5 @@
+<div [formGroup]="rateUnitForm" class="text-small text-center">
+    <select formControlName="rateUnits" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 200px;" (change)="changeUnits()">
+        <option *ngFor="let unit of units" [value]="unit.name">{{ unit.label }}</option>
+    </select>
+</div>
diff --git a/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.scss b/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.ts b/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.ts
new file mode 100644
index 000000000..a7d94cec2
--- /dev/null
+++ b/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.ts
@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { StorageService } from '../../services/storage.service';
+import { StateService } from '../../services/state.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'app-rate-unit-selector',
+  templateUrl: './rate-unit-selector.component.html',
+  styleUrls: ['./rate-unit-selector.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class RateUnitSelectorComponent implements OnInit, OnDestroy {
+  rateUnitForm: UntypedFormGroup;
+  rateUnitSub: Subscription;
+  units = [
+    { name: 'vb', label: 'sat/vB' },
+    { name: 'wu', label: 'sat/WU' },
+  ];
+
+  constructor(
+    private formBuilder: UntypedFormBuilder,
+    private stateService: StateService,
+    private storageService: StorageService,
+  ) { }
+
+  ngOnInit() {
+    this.rateUnitForm = this.formBuilder.group({
+      rateUnits: ['vb']
+    });
+    this.rateUnitSub = this.stateService.rateUnits$.subscribe((units) => {
+      this.rateUnitForm.get('rateUnits')?.setValue(units);
+    });
+  }
+
+  changeUnits() {
+    const newUnits = this.rateUnitForm.get('rateUnits')?.value;
+    this.storageService.setValue('rate-unit-preference', newUnits);
+    this.stateService.rateUnits$.next(newUnits);
+  }
+
+  ngOnDestroy(): void {
+    this.rateUnitSub.unsubscribe();
+  }
+}
diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts
index 738893bbc..0c5f5a5d9 100644
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@@ -133,6 +133,7 @@ export class StateService {
   hideFlow: BehaviorSubject<boolean>;
   hideAudit: BehaviorSubject<boolean>;
   fiatCurrency$: BehaviorSubject<string>;
+  rateUnits$: BehaviorSubject<string>;
 
   constructor(
     @Inject(PLATFORM_ID) private platformId: any,
@@ -225,6 +226,9 @@ export class StateService {
     
     const fiatPreference = this.storageService.getValue('fiat-preference');
     this.fiatCurrency$ = new BehaviorSubject<string>(fiatPreference || 'USD');
+
+    const rateUnitPreference = this.storageService.getValue('rate-unit-preference');
+    this.rateUnits$ = new BehaviorSubject<string>(rateUnitPreference || 'vb');
   }
 
   setNetworkBasedonUrl(url: string) {
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html
index 0bac1f9ff..8e5279a94 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@@ -10,6 +10,9 @@
         <div class="selector">
           <app-fiat-selector></app-fiat-selector>
         </div>
+        <div class="selector">
+          <app-rate-unit-selector></app-rate-unit-selector>
+        </div>
         <ng-template #temporaryHidden>
           <a *ngIf="officialMempoolSpace" class="cta btn btn-purple sponsor" [routerLink]="['/signup' | relativeUrl]">Support the Project</a>
           <p *ngIf="officialMempoolSpace && env.BASE_MODULE === 'mempool'" class="cta-secondary"><a [routerLink]="['/signin' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Sign In</a></p>
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index 542d2f745..9d9606084 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -35,6 +35,7 @@ import { TxFeeRatingComponent } from '../components/tx-fee-rating/tx-fee-rating.
 import { ReactiveFormsModule } from '@angular/forms';
 import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component';
 import { FiatSelectorComponent } from '../components/fiat-selector/fiat-selector.component';
+import { RateUnitSelectorComponent } from '../components/rate-unit-selector/rate-unit-selector.component';
 import { ColoredPriceDirective } from './directives/colored-price.directive';
 import { NoSanitizePipe } from './pipes/no-sanitize.pipe';
 import { MempoolBlocksComponent } from '../components/mempool-blocks/mempool-blocks.component';
@@ -106,6 +107,7 @@ import { ClockComponent } from '../components/clock/clock.component';
     TxFeeRatingComponent,
     LanguageSelectorComponent,
     FiatSelectorComponent,
+    RateUnitSelectorComponent,
     ScriptpubkeyTypePipe,
     RelativeUrlPipe,
     NoSanitizePipe,
@@ -225,6 +227,7 @@ import { ClockComponent } from '../components/clock/clock.component';
     TxFeeRatingComponent,
     LanguageSelectorComponent,
     FiatSelectorComponent,
+    RateUnitSelectorComponent,
     ScriptpubkeyTypePipe,
     RelativeUrlPipe,
     Hex2asciiPipe,