chore: formatted tvl data (#165)

* chore: formatted tvl data * fix: added dollar sign before tvl data * fix: removed dollar sign : ) * fix: undefined tvl formatting issue --------- Co-authored-by: Akira <[email protected]>
strkfarm · Oct 5, 2024 · 8710aa9 · 8710aa9
1 parent 09bca8c
commit 8710aa9
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/src/components/TVL.tsx b/src/components/TVL.tsx
@@ -28,6 +28,15 @@ const TVL: React.FC = () => {
   const address = useAtomValue(addressAtom);
   const referralCode = useAtomValue(referralCodeAtom);
 
+  const formattedTvlData = (tvlData: number) => {
+    if (tvlData >= 1000000) {
+      return `${(tvlData / 1000000).toFixed(2)}m`;
+    } else if (tvlData >= 1000) {
+      return `${(tvlData / 1000).toFixed(2)}k`;
+    }
+    return `${tvlData.toString()}`;
+  };
+
   return (
     <Grid
       templateColumns={{ base: 'repeat(1, 1, 1fr)', md: 'repeat(3, 1fr)' }}
@@ -43,7 +52,7 @@ const TVL: React.FC = () => {
               {isPending ? (
                 <Spinner size="sm" color="white" marginLeft={'5px'} />
               ) : (
-                Number(data?.tvl.toFixed(2)).toLocaleString()
+                {data ? formattedTvlData(Number(data.tvl)) : '0'}
               )}
             </StatNumber>
           </Stat>