Make calculator formatting based on locale settings

This commit is contained in:
Felipe Knorr Kuhn 2026-03-07 12:40:39 -08:00
parent 5d0e4e65d1
commit c756522bcd
No known key found for this signature in database
GPG key ID: 79619B52BB097C1A

View file

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { combineLatest, Observable } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
@ -20,12 +20,14 @@ export class CalculatorComponent implements OnInit {
form: FormGroup;
currentPrice = 0;
isMaxSupply = false;
currentCurrency = 'USD';
currency$ = this.stateService.fiatCurrency$;
price$: Observable<number>;
lastFiatPrice$: Observable<number>;
constructor(
@Inject(LOCALE_ID) private locale: string,
private stateService: StateService,
private formBuilder: FormBuilder,
private websocketService: WebsocketService,
@ -47,6 +49,7 @@ export class CalculatorComponent implements OnInit {
this.price$ = this.currency$.pipe(
switchMap((result) => {
currency = result;
this.currentCurrency = result;
return this.stateService.conversions$.asObservable();
}),
map((conversions) => {
@ -132,8 +135,11 @@ export class CalculatorComponent implements OnInit {
if (name === 'bitcoin' && this.countDecimals(sanitizedValue) > 8) {
sanitizedValue = this.toFixedWithoutRounding(sanitizedValue, 8);
}
if (name === 'fiat' && this.countDecimals(sanitizedValue) > 2) {
sanitizedValue = this.toFixedWithoutRounding(sanitizedValue, 2);
if (name === 'fiat') {
const decimals = this.getCurrencyDecimals();
if (this.countDecimals(sanitizedValue) > decimals) {
sanitizedValue = this.toFixedWithoutRounding(sanitizedValue, decimals);
}
}
if (sanitizedValue === '') {
sanitizedValue = '0';
@ -176,12 +182,20 @@ export class CalculatorComponent implements OnInit {
}
formatFiat(num: number): string | number {
// Get the number of decimal places for the current currency
const decimals = this.getCurrencyDecimals();
if (decimals === 0) {
return Math.round(num);
}
if (Math.abs(num) >= 1000) {
// For values >= 1000: show 2 decimals, or 0 if whole number
// For values >= 1000: show currency-specific decimals, or 0 if whole number
if (num % 1 === 0) {
return Math.round(num);
}
return (Math.round(num * 100) / 100).toFixed(2);
const factor = Math.pow(10, decimals);
return (Math.round(num * factor) / factor).toFixed(decimals);
}
if (num % 1 === 0) {
return Math.round(num);
@ -190,6 +204,21 @@ export class CalculatorComponent implements OnInit {
if (Math.abs(num) < 1 && num !== 0) {
return num.toFixed(8);
}
return (Math.round(num * 100) / 100).toFixed(2);
const factor = Math.pow(10, decimals);
return (Math.round(num * factor) / factor).toFixed(decimals);
}
getCurrencyDecimals(): number {
try {
const formatter = new Intl.NumberFormat(this.locale, {
style: 'currency',
currency: this.currentCurrency
});
const parts = formatter.formatToParts(1.11);
const fractionPart = parts.find(part => part.type === 'fraction');
return fractionPart ? fractionPart.value.length : 0;
} catch {
return 2; // Default to 2 decimal places
}
}
}