From 3b1b108b9f0915fb550cbc0b6357cdbb170be841 Mon Sep 17 00:00:00 2001
From: ARREY-ETTA BESSONG EKEP OBASI <arreyettaekep@gmail.com>
Date: Wed, 30 Oct 2024 00:11:14 +0100
Subject: [PATCH] chore: format numerical stats with commas

---
 src/components/Stats/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Stats/index.tsx b/src/components/Stats/index.tsx
index 2d06344e2..e0a19b04a 100644
--- a/src/components/Stats/index.tsx
+++ b/src/components/Stats/index.tsx
@@ -1,6 +1,7 @@
 import { noop } from 'lodash'
 import { useEffect, useState } from 'react'
 import styled from 'styled-components'
+import { Icons } from '~/components/Icons'
 import BudgetIcon from '~/components/Icons/BudgetIcon'
 import NodesIcon from '~/components/Icons/NodesIcon'
 import { Tooltip } from '~/components/common/ToolTip'
@@ -8,14 +9,13 @@ import { getStats, getTotalProcessing } from '~/network/fetchSourcesData'
 import { useDataStore } from '~/stores/useDataStore'
 import { useUpdateSelectedNode } from '~/stores/useGraphStore'
 import { useModal } from '~/stores/useModalStore'
+import { useSchemaStore } from '~/stores/useSchemaStore'
 import { useUserStore } from '~/stores/useUserStore'
 import { TStats } from '~/types'
-import { formatBudget, formatStatsResponse } from '~/utils'
+import { formatBudget, formatNumberWithCommas, formatStatsResponse } from '~/utils'
 import { colors } from '~/utils/colors'
 import { Flex } from '../common/Flex'
 import { Animation } from './Animation'
-import { Icons } from '~/components/Icons'
-import { useSchemaStore } from '~/stores/useSchemaStore'
 
 export const Stats = () => {
   const [isTotalProcessing, setIsTotalProcessing] = useState(false)
@@ -119,7 +119,7 @@ export const Stats = () => {
                 <div className="icon">
                   <Icon />
                 </div>
-                <div className="text">{stats[key as keyof TStats]}</div>
+                <div className="text">{formatNumberWithCommas(stats[key as keyof TStats] ?? 0)}</div>
               </Tooltip>
             </Stat>
           ) : (