From 66213d7f6f636068739ad8c7b7408b7d007437ff Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 30 Aug 2023 11:02:47 +0300
Subject: [PATCH] feat: use only function from utilities for format

---
 .../SyncStatusCardConsensus.tsx               | 40 +++++++++----------
 .../SyncStatusCardExecution.tsx               |  7 +---
 .../Activation/ActivationSyncCard.tsx         |  4 +-
 .../KeyGeneration/KeyGenerationSyncCard.tsx   |  3 +-
 4 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx b/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx
index 57987f10..ab4594ee 100644
--- a/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx
+++ b/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 = () => {
-    return [
-      {
-        id: 'storage',
-        label: 'Used',
-        value: synced,
-        color: '#ff6161',
-      },
-      {
-        id: 'storage',
-        label: 'Free',
-        value: total - synced || 1,
-        color: '#E7EAEE',
-      },
-    ]
-  }
-  const formatNumber = (n: number): string => {
-    return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-  }
+  const data = [
+    {
+      id: 'storage',
+      label: 'Used',
+      value: synced,
+      color: '#ff6161',
+    },
+    {
+      id: 'storage',
+      label: 'Free',
+      value: total - synced || 1,
+      color: '#E7EAEE',
+    },
+  ]
+
   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>
diff --git a/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx b/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx
index 8604a122..9a514964 100644
--- a/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx
+++ b/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}>
-            {' '}
-            {formatNumber(synced)} / {formatNumber(total)}
+            {formatNumberForGauge(synced)} / {formatNumberForGauge(total)}
           </Text>
         </XStack>
       </YStack>
diff --git a/src/pages/ValidatorOnboarding/Activation/ActivationSyncCard.tsx b/src/pages/ValidatorOnboarding/Activation/ActivationSyncCard.tsx
index 90219d90..5f98a406 100644
--- a/src/pages/ValidatorOnboarding/Activation/ActivationSyncCard.tsx
+++ b/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>
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx
index 508e7e8e..161559c3 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx
+++ b/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" />