From 9178642461376ad2cbb30aba33d20fe35c3feb75 Mon Sep 17 00:00:00 2001
From: Gonzalo D'elia <gonzalo@hemi.xyz>
Date: Wed, 5 Mar 2025 15:53:12 -0300
Subject: [PATCH] Update TVL formatting for small values

---
 .../manageStake/strategyDetails.tsx           |  1 -
 .../stake/_components/manageStake/tvl.tsx     |  4 +-
 .../_components/stakePointsCards/index.tsx    |  4 +-
 webapp/test/utils/format.test.ts              | 40 +++++++++----------
 webapp/utils/format.ts                        | 18 ++++-----
 5 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/webapp/app/[locale]/stake/_components/manageStake/strategyDetails.tsx b/webapp/app/[locale]/stake/_components/manageStake/strategyDetails.tsx
index f9f5a7bf..93360e86 100644
--- 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
index eaa1a483..6eaeb7d9 100644
--- 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
index cf251ecf..8835e973 100644
--- 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
index 40310433..3cdac427 100644
--- 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
index 98dcdb2c..14bd0b12 100644
--- 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)}`
 }