Merge branch 'dev' into feat/docker-deployment

.env.example

@@ -1,3 +1,3 @@
 NEXT_PUBLIC_API_BASE_URL= # Example: https://api.example.com
 NEXT_PUBLIC_PROJECT_ID= # ProjectID from WalletConnect
-TESTNET= # true or false
+NEXT_PUBLIC_TESTNET_MODE= # true or false

README.md

@@ -31,7 +31,7 @@ $ cp .env.example .env
 - Set up `NEXT_PUBLIC_API_BASE_URL` with ZKchainHub Backend API url. It will typically run on `http://localhost:3000`
 - (Optionally) 
     - Set `NEXT_PUBLIC_PROJECT_ID` with your [Wallet Connect](https://walletconnect.com/) ProjectID
-    - Set `TESTNET` with `true` to use testnet mode with testnet backend API URL set up in `NEXT_PUBLIC_API_BASE_URL`
+    - Set `NEXT_PUBLIC_TESTNET_MODE ` with `true` to use testnet mode with testnet backend API URL set up in `NEXT_PUBLIC_API_BASE_URL`
 
 ## 🏃 Running the app
 

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

@@ -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/containers/Header/DesktopHeader.tsx

@@ -27,7 +27,7 @@ export const DesktopHeader = ({
     <StyledHeader>
       <LogoContainer onClick={goToHome} role='button' aria-label='Navigate to home'>
         <Logo src={theme === 'dark' ? LogoDark : LogoLight} alt='ZK Chain Hub' />
-        {TESTNET_MODE === 'true' && <Testnet>testnet</Testnet>}
+        {TESTNET_MODE === 'true' && <Testnet>Testnet</Testnet>}
       </LogoContainer>
       <SBox>
         <Gas />

src/containers/Header/MobileHeader.tsx

@@ -32,7 +32,7 @@ export const MobileHeader = ({ theme, goToHome, handleChangeLanguage, localesMap
     <StyledHeader>
       <LogoContainer onClick={goToHome} role='button' aria-label='Navigate to home'>
         <Logo src={theme === 'dark' ? LogoDark : LogoLight} alt='ZK Chain Hub' />
-        {TESTNET_MODE === 'true' && <Testnet>testnet</Testnet>}
+        {TESTNET_MODE === 'true' && <Testnet>Testnet</Testnet>}
       </LogoContainer>
 
       <IconsContainer>

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 => {