Merge pull request #5464 from mempool/natsoni/amount-selector

Add amount mode selector to footer

frontend/src/app/components/amount-selector/amount-selector.component.html

@@ -0,0 +1,7 @@
+<div [formGroup]="amountForm" class="text-small text-center">
+    <select formControlName="mode" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 70px;" (change)="changeMode()">
+        <option value="btc" i18n="shared.btc|BTC">BTC</option>
+        <option value="sats" i18n="shared.sat|sat">sat</option>
+        <option value="fiat" i18n="shared.fiat|Fiat">Fiat</option>
+    </select>
+</div>

frontend/src/app/components/amount-selector/amount-selector.component.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { StorageService } from '../../services/storage.service';
+import { StateService } from '../../services/state.service';
+
+@Component({
+  selector: 'app-amount-selector',
+  templateUrl: './amount-selector.component.html',
+  styleUrls: ['./amount-selector.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AmountSelectorComponent implements OnInit {
+  amountForm: UntypedFormGroup;
+  modes = ['btc', 'sats', 'fiat'];
+
+  constructor(
+    private formBuilder: UntypedFormBuilder,
+    private stateService: StateService,
+    private storageService: StorageService,
+  ) { }
+
+  ngOnInit() {
+    this.amountForm = this.formBuilder.group({
+      mode: ['btc']
+    });
+    this.stateService.viewAmountMode$.subscribe((mode) => {
+      this.amountForm.get('mode')?.setValue(mode);
+    });
+  }
+
+  changeMode() {
+    const newMode = this.amountForm.get('mode')?.value;
+    this.storageService.setValue('view-amount-mode', newMode);
+    this.stateService.viewAmountMode$.next(newMode);
+  }
+}