diff --git a/src/ui/utils/number.ts b/src/ui/utils/number.ts index 4b23ccc50c4..8f7aed096d4 100644 --- a/src/ui/utils/number.ts +++ b/src/ui/utils/number.ts @@ -68,7 +68,7 @@ export const formatNumber = ( num: string | number, decimal = 2, opt = {} as BigNumber.Format, - roundingMode = BigNumber.ROUND_UP as BigNumber.RoundingMode + roundingMode = BigNumber.ROUND_HALF_UP as BigNumber.RoundingMode ) => { const n = new BigNumber(num); const format = { @@ -119,7 +119,7 @@ export const intToHex = (n: number) => { export const formatUsdValue = ( value: string | number, - roundingMode = BigNumber.ROUND_UP as BigNumber.RoundingMode + roundingMode = BigNumber.ROUND_HALF_UP as BigNumber.RoundingMode ) => { const bnValue = new BigNumber(value); if (bnValue.lt(0)) { @@ -212,7 +212,7 @@ export const formatGasCostUsd = (gasCostUsd: BigNumber) => { export const formatGasHeaderUsdValue = ( value: string | number, - roundingMode = BigNumber.ROUND_UP as BigNumber.RoundingMode + roundingMode = BigNumber.ROUND_HALF_UP as BigNumber.RoundingMode ) => { const bnValue = new BigNumber(value); if (bnValue.lt(0)) { @@ -225,3 +225,9 @@ export const formatGasHeaderUsdValue = ( return `$${formatNumber(value, 4, undefined, roundingMode)}`; }; + +export const formatGasAccountUSDValue = (value: string | number) => { + const bnValue = new BigNumber(value); + if (bnValue.lt(0.0001)) return '<$0.0001'; + return `$${formatNumber(value, 4)}`; +}; diff --git a/src/ui/views/Approval/components/TxComponents/GasSelectorHeader.tsx b/src/ui/views/Approval/components/TxComponents/GasSelectorHeader.tsx index e3d5ec7af43..6c679cd4309 100644 --- a/src/ui/views/Approval/components/TxComponents/GasSelectorHeader.tsx +++ b/src/ui/views/Approval/components/TxComponents/GasSelectorHeader.tsx @@ -25,6 +25,7 @@ import { formatGasCostUsd, formatTokenAmount, formatGasHeaderUsdValue, + formatGasAccountUSDValue, } from '@/ui/utils/number'; import { calcMaxPriorityFee } from '@/utils/transaction'; import styled, { css } from 'styled-components'; @@ -729,7 +730,7 @@ const GasSelectorHeader = ({ if (!Number.isNaN(v) && v < 0.0001) { return `$${n}`; } - return formatGasHeaderUsdValue(n || '0'); + return formatGasAccountUSDValue(n || '0'); }, []); const [isGasHovering, gasHoverProps] = useHover(); @@ -816,7 +817,7 @@ const GasSelectorHeader = ({ >