From b14a519f38a503f48340ba549df3e181840caa33 Mon Sep 17 00:00:00 2001
From: TITI <162849030+0xtiti@users.noreply.github.com>
Date: Tue, 3 Sep 2024 12:29:40 -0300
Subject: [PATCH] fix: show significant digit (#50)

---
 src/__tests__/format.test.ts | 19 ++++++++++++-------
 src/components/TVLTable.tsx  |  2 +-
 src/utils/format.ts          | 11 ++++++-----
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/__tests__/format.test.ts b/src/__tests__/format.test.ts
index d2fab43..91909ba 100644
--- a/src/__tests__/format.test.ts
+++ b/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
diff --git a/src/components/TVLTable.tsx b/src/components/TVLTable.tsx
index b8de325..774242c 100644
--- a/src/components/TVLTable.tsx
+++ b/src/components/TVLTable.tsx
@@ -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>
diff --git a/src/utils/format.ts b/src/utils/format.ts
index 44c013e..96f957e 100644
--- a/src/utils/format.ts
+++ b/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 => {