Multi-currency fiat formatting pipes & components

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,