feat: use only function from utilities for format

src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx

@@ -5,33 +5,31 @@ import Icon from '../../components/General/Icon'
 import StandardGauge from '../../components/Charts/StandardGauge'
 import IconText from '../../components/General/IconText'
 import { TokenIcon } from '@status-im/icons'
+import { formatNumberForGauge } from '../../utilities'
 
 interface DeviceStorageHealthProps {
   synced: number
   total: number
 }
+
 const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, total }) => {
   const message = synced === total ? 'Synced all data' : 'Syncing'
 
-  const data = () => {
+  const data = [
-    return [
+    {
-      {
+      id: 'storage',
-        id: 'storage',
+      label: 'Used',
-        label: 'Used',
+      value: synced,
-        value: synced,
+      color: '#ff6161',
-        color: '#ff6161',
+    },
-      },
+    {
-      {
+      id: 'storage',
-        id: 'storage',
+      label: 'Free',
-        label: 'Free',
+      value: total - synced || 1,
-        value: total - synced || 1,
+      color: '#E7EAEE',
-        color: '#E7EAEE',
+    },
-      },
+  ]
-    ]
+
-  }
-  const formatNumber = (n: number): string => {
-    return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-  }
   return (
     <Shadow
       variant="$2"
@@ -63,7 +61,7 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
                   width: '115px',
                 }}
               >
-                <StandardGauge data={data()} />
+                <StandardGauge data={data} />
               </Stack>
             </XStack>
           </YStack>
@@ -74,7 +72,7 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
         <XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
           <IconText icon={<TokenIcon size={16} />}>{message}</IconText>
           <Text size={13}>
-            {formatNumber(synced)} / {formatNumber(total)}
+            {formatNumberForGauge(synced)} / {formatNumberForGauge(total)}
           </Text>
         </XStack>
       </YStack>

src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx

@@ -3,6 +3,7 @@ import { Shadow, Text } from '@status-im/components'
 import StandardGauge from '../../components/Charts/StandardGauge'
 import IconText from '../../components/General/IconText'
 import { TokenIcon } from '@status-im/icons'
+import { formatNumberForGauge } from '../../utilities'
 
 interface DeviceStorageHealthProps {
   synced: number
@@ -27,9 +28,6 @@ const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, t
       },
     ]
   }
-  const formatNumber = (n: number): string => {
-    return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-  }
 
   return (
     <Shadow
@@ -75,8 +73,7 @@ const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, t
         <XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
           <IconText icon={<TokenIcon size={16} />}>{message}</IconText>
           <Text size={13}>
-            {' '}
+            {formatNumberForGauge(synced)} / {formatNumberForGauge(total)}
-            {formatNumber(synced)} / {formatNumber(total)}
           </Text>
         </XStack>
       </YStack>

src/pages/ValidatorOnboarding/Activation/ActivationSyncCard.tsx

@@ -1,11 +1,11 @@
 import { Stack, XStack, YStack } from 'tamagui'
 import StandardGauge from '../../../components/Charts/StandardGauge'
 import { Text } from '@status-im/components'
+import { formatNumberForGauge } from '../../../utilities'
 
 type ActivationSyncCardProps = {
   synced: number
   total: number
-
   color: string
 }
 
@@ -37,7 +37,7 @@ const ActivationSyncCard = ({ synced, total, color }: ActivationSyncCardProps) =
       </Stack>
       <YStack>
         <Text size={15} weight={'semibold'}>
-          {synced} / {total}
+          {formatNumberForGauge(synced)} / {formatNumberForGauge(total)}
         </Text>
       </YStack>
     </XStack>

src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx

@@ -3,6 +3,7 @@ import StandardGauge from '../../../components/Charts/StandardGauge'
 import { ClearIcon } from '@status-im/icons'
 import { Text } from '@status-im/components'
 import BorderBox from '../../../components/General/BorderBox'
+import { formatNumberForGauge } from '../../../utilities'
 
 type KeyGenerationSyncCardProps = {
   synced: number
@@ -43,7 +44,7 @@ const KeyGenerationSyncCard = ({ synced, total, title, color }: KeyGenerationSyn
             {title}
           </Text>
           <Text size={15} weight={'semibold'}>
-            {synced} / {total}
+            {formatNumberForGauge(synced)} / {formatNumberForGauge(total)}
           </Text>
         </YStack>
         <ClearIcon size={20} color="#A1ABBD" />