Update TVL formatting for small values

hemilabs · Mar 5, 2025 · 9178642 · 9178642
1 parent 601e0cd
commit 9178642
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 35 deletions.
diff --git a/webapp/app/[locale]/stake/_components/manageStake/strategyDetails.tsx b/webapp/app/[locale]/stake/_components/manageStake/strategyDetails.tsx
@@ -37,7 +37,6 @@ export const StrategyDetails = function ({ token }: Props) {
       <Container>
         <Subtitle text={t('tvl')} />
         <div className="flex items-center gap-x-1 text-base font-semibold text-neutral-950">
-          <span>$</span>
           <span className="min-w-8">
             <Tvl token={token} />
           </span>

diff --git a/webapp/app/[locale]/stake/_components/manageStake/tvl.tsx b/webapp/app/[locale]/stake/_components/manageStake/tvl.tsx
@@ -2,7 +2,7 @@ import { RenderFiatBalance } from 'components/fiatBalance'
 import { useTotalSupply } from 'hooks/useTotalSupply'
 import { type StakeToken } from 'types/stake'
 import { type EvmToken } from 'types/token'
-import { formatLargeFiatNumber } from 'utils/format'
+import { formatTVL } from 'utils/format'
 import { isNativeAddress } from 'utils/nativeToken'
 import { getWrappedEther } from 'utils/token'
 
@@ -15,7 +15,7 @@ const TokenTvl = function ({ token }: { token: EvmToken }) {
   return (
     <RenderFiatBalance
       balance={supply}
-      customFormatter={formatLargeFiatNumber}
+      customFormatter={formatTVL}
       fetchStatus={fetchStatus}
       queryStatus={status}
       token={token}

diff --git a/webapp/app/[locale]/stake/dashboard/_components/stakePointsCards/index.tsx b/webapp/app/[locale]/stake/dashboard/_components/stakePointsCards/index.tsx
@@ -5,7 +5,7 @@ import { useTokenPrices } from 'hooks/useTokenPrices'
 import Image, { StaticImageData } from 'next/image'
 import { useTranslations } from 'next-intl'
 import { ReactNode } from 'react'
-import { formatFiatNumber, formatLargeFiatNumber } from 'utils/format'
+import { formatFiatNumber, formatTVL } from 'utils/format'
 import { getTokenPrice } from 'utils/token'
 import { formatUnits } from 'viem'
 
@@ -85,7 +85,7 @@ export const TotalStaked = function () {
     if (prices === undefined) {
       return '-'
     }
-    return `$ ${formatLargeFiatNumber(totalStake)}`
+    return formatTVL(totalStake)
   }
 
   return (

diff --git a/webapp/test/utils/format.test.ts b/webapp/test/utils/format.test.ts
@@ -2,7 +2,7 @@ import {
   formatBtcAddress,
   formatEvmAddress,
   formatEvmHash,
-  formatLargeFiatNumber,
+  formatTVL,
 } from 'utils/format'
 import { describe, expect, it } from 'vitest'
 
@@ -33,31 +33,29 @@ describe('utils/format', function () {
     })
   })
 
-  describe('formatLargeFiatNumber', function () {
-    describe('formatLargeFiatNumber', function () {
-      it('should format a number less than one million correctly', function () {
-        expect(formatLargeFiatNumber(999999)).toBe('999,999.00')
-      })
+  describe('formatTVL', function () {
+    it('should format a number less than one hundred thousand correctly', function () {
+      expect(formatTVL(99_999)).toBe('< $100K')
+    })
 
-      it('should format a number equal to one million correctly', function () {
-        expect(formatLargeFiatNumber(1000000)).toBe('1M')
-      })
+    it('should format a number equal to one hundred thousand correctly', function () {
+      expect(formatTVL(100_000)).toBe('$100,000.00')
+    })
 
-      it('should format a number greater than one million correctly', function () {
-        expect(formatLargeFiatNumber(2500000)).toBe('2.5M')
-      })
+    it('should format a number greater than one hundred thousand correctly', function () {
+      expect(formatTVL(2500000)).toBe('$2,500,000.00')
+    })
 
-      it('should format a string number less than one million correctly', function () {
-        expect(formatLargeFiatNumber('999999')).toBe('999,999.00')
-      })
+    it('should format a string number less than one hundred thousand correctly', function () {
+      expect(formatTVL('99999')).toBe('< $100K')
+    })
 
-      it('should format a string number equal to one million correctly', function () {
-        expect(formatLargeFiatNumber('1000000')).toBe('1M')
-      })
+    it('should format a string number equal to one hundred thousand correctly', function () {
+      expect(formatTVL('100000')).toBe('$100,000.00')
+    })
 
-      it('should format a string number greater than one million correctly', function () {
-        expect(formatLargeFiatNumber('2500000')).toBe('2.5M')
-      })
+    it('should format a string number greater than one hundred thousand correctly', function () {
+      expect(formatTVL('2500000')).toBe('$2,500,000.00')
     })
   })
 })
diff --git a/webapp/utils/format.ts b/webapp/utils/format.ts
@@ -22,14 +22,14 @@ export const formatNumber = (value: number | string) =>
 export const formatFiatNumber = (value: number | string) =>
   fiatRounder(value, { shouldFormat: true })
 
-export const formatLargeFiatNumber = function (amount: number | string) {
-  // for less than one million, use the regular format.
-  if (Big(amount).lt(1_000_000)) {
-    return formatFiatNumber(amount)
+export const formatTVL = function (amount: number | string) {
+  if (Big(amount).lt(100_000)) {
+    // for less than 100k, return "< 100k"
+    const formatted = new Intl.NumberFormat('en-US', {
+      notation: 'compact',
+    }).format(100_000)
+    return `< $${formatted}`
   }
-  // for larger than that, use the million format.
-  return new Intl.NumberFormat('en-US', { notation: 'compact' }).format(
-    // @ts-expect-error NumberFormat.format accept strings, typings are wrong. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format#parameters
-    amount,
-  )
+  // For the rest, show the full format
+  return `$${formatFiatNumber(amount)}`
 }