Add currency preference to dashboard

frontend/src/app/app.constants.ts

@@ -157,3 +157,97 @@ export const specialBlocks = {
     labelEventCompleted: 'Block Subsidy has halved to 3.125 BTC per block',
   }
 };
+
+export const fiatCurrencies = {
+  AED: {
+    name: 'UAE Dirham',
+    code: 'AED'
+  },
+  AUD: {
+    name: 'Australian Dollar',
+    code: 'AUD',
+    indexed: true,
+  },
+  BRL: {
+    name: 'Brazilian Real',
+    code: 'BRL'
+  },
+  CAD: {
+    name: 'Canadian Dollar',
+    code: 'CAD',
+    indexed: true,
+  },
+  CHF: {
+    name: 'Swiss Franc',
+    code: 'CHF',
+    indexed: true,
+  },
+  EUR: {
+    name: 'Euro',
+    code: 'EUR',
+    indexed: true,
+  },
+  GBP: {
+    name: 'Pound Sterling',
+    code: 'GBP',
+    indexed: true,
+  },
+  HKD: {
+    name: 'Hong Kong Dollar',
+    code: 'HKD'
+  },
+  IDR: {
+    name: 'Indonesian Rupiah',
+    code: 'IDR'
+  },
+  JPY: {
+    name: 'Japanese Yen',
+    code: 'JPY',
+    indexed: true,
+  },
+  KRW: {
+    name: 'Korean Won',
+    code: 'KRW'
+  },
+  MYR: {
+    name: 'Malaysian Ringgit',
+    code: 'MYR'
+  },
+  NGN: {
+    name: 'Nigerian Naira',
+    code: 'NGN'
+  },
+  NZD: {
+    name: 'New Zealand Dollar',
+    code: 'NZD'
+  },
+  PLN: {
+    name: 'Polish Złoty',
+    code: 'PLN'
+  },
+  RUB: {
+    name: 'Russian Ruble',
+    code: 'RUB'
+  },
+  SGD: {
+    name: 'Singapore Dollar',
+    code: 'SGD'
+  },
+  TRY: {
+    name: 'Turkish Lira',
+    code: 'TRY'
+  },
+  UAH: {
+    name: 'Ukrainian Hryvnia',
+    code: 'UAH'
+  },
+  USD: {
+    name: 'US Dollar',
+    code: 'USD',
+    indexed: true,
+  },
+  ZAR: {
+    name: 'South African Rand',
+    code: 'ZAR'
+  },
+};

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

@@ -0,0 +1,5 @@
+<div [formGroup]="fiatForm" class="text-small text-center">
+    <select formControlName="fiat" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 180px;" (change)="changeFiat()">
+        <option *ngFor="let currency of currencyList" [value]="currency">{{ currencies[currency].name }}</option>
+    </select>
+</div>

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

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { StorageService } from '../../services/storage.service';
+import { fiatCurrencies } from '../../app.constants';
+import { StateService } from '../../services/state.service';
+
+@Component({
+  selector: 'app-fiat-selector',
+  templateUrl: './fiat-selector.component.html',
+  styleUrls: ['./fiat-selector.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FiatSelectorComponent implements OnInit {
+  fiatForm: UntypedFormGroup;
+  currencies = fiatCurrencies;
+  currencyList = Object.keys(fiatCurrencies).sort();
+
+  constructor(
+    private formBuilder: UntypedFormBuilder,
+    private stateService: StateService,
+    private storageService: StorageService,
+  ) { }
+
+  ngOnInit() {
+    this.fiatForm = this.formBuilder.group({
+      fiat: ['USD']
+    });
+    this.stateService.fiatCurrency$.subscribe((fiat) => {
+      this.fiatForm.get('fiat')?.setValue(fiat);
+    });
+  }
+
+  changeFiat() {
+    const newFiat = this.fiatForm.get('fiat')?.value;
+    this.storageService.setValue('fiat-preference', newFiat);
+    this.stateService.fiatCurrency$.next(newFiat);
+  }
+}

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

@@ -1,5 +1,5 @@
 <div [formGroup]="languageForm" class="text-small text-center">
-    <select formControlName="language" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 130px;" (change)="changeLanguage()">
+    <select formControlName="language" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 180px;" (change)="changeLanguage()">
         <option *ngFor="let lang of languages" [value]="lang.code">{{ lang.name }}</option>
     </select>
 </div>

frontend/src/app/dashboard/dashboard.component.html

@@ -144,7 +144,14 @@
     </div>
   </div>
 
+  <div class="pref-selectors">
+    <div class="selector">
       <app-language-selector></app-language-selector>
+    </div>
+    <div class="selector">
+      <app-fiat-selector></app-fiat-selector>
+    </div>
+  </div>
 
   <div class="terms-of-service">
     <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>

frontend/src/app/dashboard/dashboard.component.scss

@@ -324,3 +324,18 @@
   text-decoration: none;
   color: inherit;
 }
+
+.pref-selectors {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  .selector {
+    margin-left: .5em;
+    margin-bottom: .5em;
+    &:first {
+      margin-left: 0;
+    }
+  }
+}

frontend/src/app/services/state.service.ts

@@ -119,6 +119,7 @@ export class StateService {
   timeLtr: BehaviorSubject<boolean>;
   hideFlow: BehaviorSubject<boolean>;
   hideAudit: BehaviorSubject<boolean>;
+  fiatCurrency$: BehaviorSubject<string>;
 
   constructor(
     @Inject(PLATFORM_ID) private platformId: any,
@@ -184,6 +185,9 @@ export class StateService {
     this.hideAudit.subscribe((hide) => {
       this.storageService.setValue('audit-preference', hide ? 'hide' : 'show');
     });
+    
+    const fiatPreference = this.storageService.getValue('fiat-preference');
+    this.fiatCurrency$ = new BehaviorSubject<string>(fiatPreference || 'USD');
   }
 
   setNetworkBasedonUrl(url: string) {

frontend/src/app/shared/shared.module.ts

@@ -34,6 +34,7 @@ import { TxFeaturesComponent } from '../components/tx-features/tx-features.compo
 import { TxFeeRatingComponent } from '../components/tx-fee-rating/tx-fee-rating.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component';
+import { FiatSelectorComponent } from '../components/fiat-selector/fiat-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';
@@ -93,6 +94,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
     TxFeaturesComponent,
     TxFeeRatingComponent,
     LanguageSelectorComponent,
+    FiatSelectorComponent,
     ScriptpubkeyTypePipe,
     RelativeUrlPipe,
     NoSanitizePipe,
@@ -199,6 +201,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
     TxFeaturesComponent,
     TxFeeRatingComponent,
     LanguageSelectorComponent,
+    FiatSelectorComponent,
     ScriptpubkeyTypePipe,
     RelativeUrlPipe,
     Hex2asciiPipe,