Add Pinned notification and format received numbers

src/components/SyncStatusCardConsensus.tsx

@@ -16,7 +16,7 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
         id: 'storage',
         label: 'Used',
         value: synced,
-        color: '#E95460',
+        color: '#ff6161',
       },
       {
         id: 'storage',
@@ -26,7 +26,9 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
       },
     ]
   }
-
+  function formatNumber(n: number): string {
+    return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  }
   return (
     <Shadow
       variant="$2"
@@ -41,12 +43,12 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
           style={{
             padding: '8px 16px',
             position: 'relative',
-            height: '155px',
+            height: '160px',
           }}
         >
           <YStack space={'$3'} style={{ width: '100%' }}>
             <Text size={15} color="#84888e" weight={'semibold'}>
-              Execution Client
+              Consensus Client
             </Text>
             <XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
               <Icon src="/icons/vector.svg" height={46} width={93} />
@@ -67,7 +69,9 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
         <XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
           <IconText icon="/icons/token.svg">{message}</IconText>
 
-          <Text size={13}>123,424 / 170,000</Text>
+          <Text size={13}>
+            {formatNumber(synced)} / {formatNumber(total)}
+          </Text>
         </XStack>
       </YStack>
     </Shadow>

src/components/SyncStatusCardExecution.tsx

@@ -15,7 +15,7 @@ const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, t
         id: 'storage',
         label: 'Used',
         value: synced,
-        color: '#E95460',
+        color: '#2a4af5',
       },
       {
         id: 'storage',
@@ -25,6 +25,9 @@ const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, t
       },
     ]
   }
+  function formatNumber(n: number): string {
+    return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  }
 
   return (
     <Shadow
@@ -40,7 +43,7 @@ const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, t
           style={{
             padding: '8px 16px',
             position: 'relative',
-            height: '155px',
+            height: '160px',
           }}
         >
           <YStack space={'$3'} style={{ width: '100%' }}>
@@ -68,7 +71,10 @@ const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, t
         <XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
           <IconText icon="/icons/token.svg">{message}</IconText>
 
-          <Text size={13}>123,424 / 170,000</Text>
+          <Text size={13}>
+            {' '}
+            {formatNumber(synced)} / {formatNumber(total)}
+          </Text>
         </XStack>
       </YStack>
     </Shadow>

src/pages/DeviceHealthCheck/DeviceSyncStatus.tsx

@@ -2,7 +2,7 @@ import { Stack, YStack } from 'tamagui'
 import LayoutComponent from '../../components/LayoutComponent'
 import NimbusLogo from '../../components/NimbusLogo'
 import Titles from '../../components/Titles'
-import { Button } from '@status-im/components'
+import { Button, PinnedMessage } from '@status-im/components'
 import SyncStatusCardExecution from '../../components/SyncStatusCardExecution'
 import SyncStatusCardConsensus from '../../components/SyncStatusCardConsensus'
 
@@ -19,6 +19,23 @@ export default DeviceSyncStatus
 
 const DeviceSyncStatusContent = () => {
   return (
+    <>
+      <Stack>
+        <PinnedMessage
+          messages={[
+            {
+              id: '123',
+              text: 'You are currently syncing to the Nimbus Validator Client and Beacon node. This may take a while... Please stay put until you can access the Node Manager.',
+              reactions: 'love',
+            },
+            {
+              id: '123',
+              text: 'You are currently syncing to the Nimbus Validator Client and Beacon node. This may take a while... Please stay put until you can access the Node Manager.',
+              reactions: 'love',
+            },
+          ]}
+        />
+      </Stack>
       <div className="container-inner landing-page">
         <YStack
           space={'$4'}
@@ -35,13 +52,15 @@ const DeviceSyncStatusContent = () => {
             subtitle="Configure your device to start Staking on Nimbus"
             isAdvancedSettings={true}
           />
-
+          <YStack>
-        <SyncStatusCardExecution synced={30} total={50} />
+            <SyncStatusCardExecution synced={132432} total={200000} />
-        <SyncStatusCardConsensus synced={30} total={50} />
+            <SyncStatusCardConsensus synced={149500} total={160000} />
+          </YStack>
           <Stack style={{ marginTop: '1rem' }}>
             <Button>Continue</Button>
           </Stack>
         </YStack>
       </div>
+    </>
   )
 }