fix: show significant digit

src/__tests__/format.test.ts

@@ -1,22 +1,24 @@
 import { expect } from '@jest/globals';
 
-import { truncateAddress, formatTimestampToDate, formatDataNumber, calculateUSDGas } from '~/utils/format';
+import {
+  truncateAddress,
+  formatTimestampToDate,
+  formatDataNumber,
+  calculateUSDGas,
+  formatSmallNumber,
+} from '~/utils/format';
 
 describe('truncateAddress', () => {
   it('should truncate the address correctly', () => {
     const address = '0x1234567890abcdef1234567890abcdef12345678';
     expect(truncateAddress(address)).toBe('0x1234...5678');
   });
-});
 
-describe('formatTimestampToDate', () => {
   it('should format the timestamp to date correctly', () => {
     const timestamp = 1627580800; // July 29, 2021
     expect(formatTimestampToDate(timestamp)).toBe('7/29/2021'); // The format may vary based on locale
   });
-});
 
-describe('formatDataNumber', () => {
   it('should format a number correctly', () => {
     expect(formatDataNumber(1234.567)).toBe('1,234.567');
     expect(formatDataNumber(0.0001234, 6)).toBe('0.000123');
@@ -28,9 +30,12 @@ describe('formatDataNumber', () => {
     expect(formatDataNumber('not a number')).toBe('0');
     expect(formatDataNumber(0, 2, true)).toBe('$0');
   });
-});
 
-describe('calculateUSDGas', () => {
+  it('should return significant digit from small number', () => {
+    expect(formatSmallNumber(0.00002123333, true)).toBe('$0.0000212');
+    expect(formatDataNumber(0, 2, true)).toBe('$0');
+  });
+
   it('should calculate the USD value of gas correctly', () => {
     const txGas = BigInt(21000);
     const gasPriceInWei = BigInt(1000000000); // 1 Gwei

src/components/TVLTable.tsx

@@ -24,7 +24,7 @@ export const TVLTable = () => {
   const { t } = useTranslation();
   const { chainData } = useData();
   const tvl = chainData?.tvl || [];
-
+  console.log(chainData);
   return (
     <article>
       <STitle>{t('CHAIN.TVL.title')}</STitle>
@@ -68,7 +68,7 @@ export const TVLTable = () => {
                   </STableCell>
 
                   <STableCell>
-                    {token.price && <Typography>{formatDataNumber(token.price, 0, true)}</Typography>}
+                    {token.price && <Typography>{formatDataNumber(Number(token.price), 0, true)}</Typography>}
 
                     {!token.price && <NotAvailable>{t('CHAIN.CHAININFORMATION.notAvailable')}</NotAvailable>}
                   </STableCell>

src/utils/format.ts

@@ -11,7 +11,7 @@ export function formatDataNumber(input: string | number, formatDecimal = 3, curr
 
   if (res === 0 || isNaN(res)) return `${currency ? '$0' : '0'}`;
 
-  if (res < 0.01) return formatSmallNumber(res);
+  if (res < 10) return formatSmallNumber(res, currency);
 
   const userNotation = compact ? 'compact' : 'standard';
   const notation = res > 1e12 ? 'scientific' : userNotation;
@@ -24,9 +24,9 @@ export function formatDataNumber(input: string | number, formatDecimal = 3, curr
   }).format(res);
 }
 
-export const formatSmallNumber = (value: number) => {
+export const formatSmallNumber = (value: number, currency?: boolean) => {
   if (value === 0) {
-    return '0';
+    return currency ? '$0' : '0';
   }
 
   const formattedValue = value.toString();
@@ -45,8 +45,9 @@ export const formatSmallNumber = (value: number) => {
   // Return the number with 3 digits after the last leading zero
   const result = formattedValue.slice(0, numLeadingZeros + 3);
 
-  // Trim any trailing zeros from the result
-  return result.replace(/\.?0+$/, '');
+  const trimmedResult = result.replace(/\.?0+$/, '');
+
+  return currency ? `$${trimmedResult}` : trimmedResult;
 };
 
 export const calculateUSDGas = (txGas: bigint, gasPriceInWei: bigint, etherPrice: number): number => {