Multi-currency fiat formatting pipes & components

frontend/src/app/app.module.ts

@@ -17,6 +17,7 @@ import { StorageService } from './services/storage.service';
 import { HttpCacheInterceptor } from './services/http-cache.interceptor';
 import { LanguageService } from './services/language.service';
 import { FiatShortenerPipe } from './shared/pipes/fiat-shortener.pipe';
+import { FiatCurrencyPipe } from './shared/pipes/fiat-currency.pipe';
 import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
 import { CapAddressPipe } from './shared/pipes/cap-address-pipe/cap-address-pipe';
 import { AppPreloadingStrategy } from './app.preloading-strategy';
@@ -34,6 +35,7 @@ const providers = [
   LanguageService,
   ShortenStringPipe,
   FiatShortenerPipe,
+  FiatCurrencyPipe,
   CapAddressPipe,
   AppPreloadingStrategy,
   { provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true }

frontend/src/app/fiat/fiat.component.html

@@ -1 +1 @@
-<span class="green-color">{{ (conversions$ | async)?.USD * value / 100000000 | currency:'USD':'symbol':digitsInfo }}</span>
+<span class="green-color">{{ (conversions$ | async)[currency] * value / 100000000 | fiatCurrency : digitsInfo : currency }}</span>

frontend/src/app/fiat/fiat.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
 import { StateService } from '../services/state.service';
 
 @Component({
@@ -8,18 +8,30 @@ import { StateService } from '../services/state.service';
   styleUrls: ['./fiat.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FiatComponent implements OnInit {
+export class FiatComponent implements OnInit, OnDestroy {
   conversions$: Observable<any>;
+  currencySubscription: Subscription;
+  currency: string;
 
   @Input() value: number;
   @Input() digitsInfo = '1.2-2';
 
   constructor(
     private stateService: StateService,
-  ) { }
+    private cd: ChangeDetectorRef,
+  ) {
+    this.currencySubscription = this.stateService.fiatCurrency$.subscribe((fiat) => {
+      this.currency = fiat;
+      this.cd.markForCheck();
+    });
+  }
 
   ngOnInit(): void {
     this.conversions$ = this.stateService.conversions$.asObservable();
   }
 
+  ngOnDestroy(): void {
+    this.currencySubscription.unsubscribe();
+  }
+
 }

frontend/src/app/shared/pipes/fiat-currency.pipe.ts

@@ -0,0 +1,28 @@
+import { formatCurrency, getCurrencySymbol } from '@angular/common';
+import { Inject, LOCALE_ID, Pipe, PipeTransform } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { StateService } from '../../services/state.service';
+
+@Pipe({
+  name: 'fiatCurrency'
+})
+export class FiatCurrencyPipe implements PipeTransform {
+  fiatSubscription: Subscription;
+  currency: string;
+
+  constructor(
+    @Inject(LOCALE_ID) public locale: string,
+    private stateService: StateService,
+  ) {
+    this.fiatSubscription = this.stateService.fiatCurrency$.subscribe((fiat) => {
+      this.currency = fiat;
+    });
+  }
+
+  transform(num: number, ...args: any[]): unknown {
+    const digits = args[0] || 1;
+    const currency = args[1] || this.currency || 'USD';
+
+    return new Intl.NumberFormat(this.locale, { style: 'currency', currency }).format(num);
+  }
+}

frontend/src/app/shared/pipes/fiat-shortener.pipe.ts

@@ -1,20 +1,30 @@
 import { formatCurrency, getCurrencySymbol } from '@angular/common';
 import { Inject, LOCALE_ID, Pipe, PipeTransform } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { StateService } from '../../services/state.service';
 
 @Pipe({
   name: 'fiatShortener'
 })
 export class FiatShortenerPipe implements PipeTransform {
+  fiatSubscription: Subscription;
+  currency: string;
+
   constructor(
-    @Inject(LOCALE_ID) public locale: string
-  ) {}
+    @Inject(LOCALE_ID) public locale: string,
+    private stateService: StateService,
+  ) {
+    this.fiatSubscription = this.stateService.fiatCurrency$.subscribe((fiat) => {
+      this.currency = fiat;
+    });
+  }
 
   transform(num: number, ...args: any[]): unknown {
     const digits = args[0] || 1;
-    const unit = args[1] || undefined;
+    const currency = args[1] || this.currency || 'USD';
 
     if (num < 1000) {
-      return num.toFixed(digits);
+      return new Intl.NumberFormat(this.locale, { style: 'currency', currency, maximumFractionDigits: 1 }).format(num);
     }
 
     const lookup = [
@@ -30,8 +40,8 @@ export class FiatShortenerPipe implements PipeTransform {
     const item = lookup.slice().reverse().find((item) => num >= item.value);
 
     let result = item ? (num / item.value).toFixed(digits).replace(rx, '$1') : '0';
-    result = formatCurrency(parseInt(result, 10), this.locale, getCurrencySymbol('USD', 'narrow'), 'USD', '1.0-0');
-
+    result = new Intl.NumberFormat(this.locale, { style: 'currency', currency, maximumFractionDigits: 0 }).format(item ? num / item.value : 0);
+    
     return result + item.symbol;
   }
 }

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

@@ -23,6 +23,7 @@ import { RelativeUrlPipe } from './pipes/relative-url/relative-url.pipe';
 import { ScriptpubkeyTypePipe } from './pipes/scriptpubkey-type-pipe/scriptpubkey-type.pipe';
 import { BytesPipe } from './pipes/bytes-pipe/bytes.pipe';
 import { WuBytesPipe } from './pipes/bytes-pipe/wubytes.pipe';
+import { FiatCurrencyPipe } from './pipes/fiat-currency.pipe';
 import { BlockchainComponent } from '../components/blockchain/blockchain.component';
 import { TimeSinceComponent } from '../components/time-since/time-since.component';
 import { TimeUntilComponent } from '../components/time-until/time-until.component';
@@ -109,6 +110,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
     CapAddressPipe,
     Decimal2HexPipe,
     FeeRoundingPipe,
+    FiatCurrencyPipe,
     ColoredPriceDirective,
     BlockchainComponent,
     MempoolBlocksComponent,
@@ -210,6 +212,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
     BytesPipe,
     VbytesPipe,
     WuBytesPipe,
+    FiatCurrencyPipe,
     CeilPipe,
     ShortenStringPipe,
     CapAddressPipe,