diff --git a/src/components/modals/RewardsUserHistory/UserAction.tsx b/src/components/modals/RewardsUserHistory/UserAction.tsx index a493853b..f7a41dc7 100644 --- a/src/components/modals/RewardsUserHistory/UserAction.tsx +++ b/src/components/modals/RewardsUserHistory/UserAction.tsx @@ -7,7 +7,7 @@ import { type UserActionQuestData, type UserActionTxData, } from '../../../api/concero/userActions/userActionType' -import { formatDateTime, toLocaleNumber } from '../../../utils/formatting' +import { formatDateTime, formatNumber, toLocaleNumber } from '../../../utils/formatting' interface UserActionProps { action: IUserAction @@ -20,8 +20,9 @@ export const UserAction = ({ action }: UserActionProps) => { const { from, to, type } = action.data as UserActionTxData const txAction = type === TransactionType.ConceroBridgeTx ? 'Bridge' : 'Swap' - - const txValue = `${txAction} from ${toLocaleNumber(from.amount, 2)} ${from.tokenSymbol} on ${from.chainName} to ${toLocaleNumber(to.amount, 2)} ${to.tokenSymbol} on ${to.chainName}` + const formattedFrom = formatNumber(from.amount) + const formattedTo = formatNumber(to.amount) + const txValue = `${txAction} from ${formattedFrom} ${from.tokenSymbol} on ${from.chainName} to ${formattedTo} ${to.tokenSymbol} on ${to.chainName}` setValue(txValue) } diff --git a/src/utils/formatting.ts b/src/utils/formatting.ts index 095e1933..a8fcbafc 100644 --- a/src/utils/formatting.ts +++ b/src/utils/formatting.ts @@ -218,10 +218,15 @@ export const roundToPrecision = (num: number, precision: number) => { } export const toLocaleNumber = (num: number | string, fixed = 0) => { - if (!num) return 0 + if (num == null) return 0 const number = Number(num) - const formattedNumber = number % 1 === 0 ? number.toString() : roundToPrecision(number, fixed).toString() - - return formattedNumber.replace(/\B(?=(\d{3})+(?!\d))/g, ',') + if (isNaN(number)) return 0 + + const roundedNumber = number % 1 === 0 ? number : roundToPrecision(number, fixed) + // To separate the display to the user of thousandths to decimal places + return roundedNumber.toLocaleString('en-US', { + minimumFractionDigits: fixed, + maximumFractionDigits: fixed, + }) // better use undefined instead 'en-US' }