fix: BigNumber Rounding modes

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)}`;
+};

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 = ({
                 >
                   <div className="truncate max-w-[170px] group text-r-neutral-body">
                     <span className="text-[16px] font-medium text-r-blue-default">
-                      {formatGasHeaderUsdValue(
+                      {formatGasAccountUSDValue(
                         (gasAccountCost?.gas_account_cost.estimate_tx_cost ||
                           0) + (gasAccountCost?.gas_account_cost.gas_cost || 0)
                       )}
@@ -831,7 +832,7 @@ const GasSelectorHeader = ({
                     </span>
                   </div>
                   <Tooltip
-                    overlayClassName="rectangle"
+                    overlayClassName="rectangle max-w-max"
                     visible={isGasAccountHovering}
                     title={
                       <>

src/ui/views/GasAccount/components/History.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import { ReactComponent as RcIconEmptyCC } from '@/ui/assets/empty-cc.svg';
 import { useTranslation } from 'react-i18next';
-import { formatGasHeaderUsdValue, sinceTime } from '@/ui/utils';
+import { formatGasAccountUSDValue, sinceTime } from '@/ui/utils';
 import clsx from 'clsx';
 import { useGasAccountHistory } from '../hooks';
 import { Skeleton } from 'antd';
 import { ReactComponent as RcIconPendingCC } from '@/ui/assets/pending-cc.svg';
 import { ReactComponent as RcIconOpenExternalCC } from '@/ui/assets/open-external-cc.svg';
 import { findChainByServerID } from '@/utils/chain';
-import BigNumber from 'bignumber.js';
 
 const HistoryItem = ({
   time,
@@ -74,7 +73,7 @@ const HistoryItem = ({
       )}
       <div className="text-14 font-medium text-r-neutral-title-1">
         {sign}
-        {formatGasHeaderUsdValue(value, BigNumber.ROUND_DOWN)}{' '}
+        {formatGasAccountUSDValue(value)}{' '}
       </div>
     </div>
   );