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,29 +19,48 @@ export default DeviceSyncStatus
 
 const DeviceSyncStatusContent = () => {
   return (
-    <div className="container-inner landing-page">
+    <>
-      <YStack
+      <Stack>
-        space={'$4'}
+        <PinnedMessage
-        style={{
+          messages={[
-          justifyContent: 'end',
+            {
-          alignItems: 'start',
+              id: '123',
-          marginBottom: '2rem',
+              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.',
-          maxWidth: '100%',
+              reactions: 'love',
-        }}
+            },
-      >
+            {
-        <NimbusLogo />
+              id: '123',
-        <Titles
+              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.',
-          title="Device Health Check"
+              reactions: 'love',
-          subtitle="Configure your device to start Staking on Nimbus"
+            },
-          isAdvancedSettings={true}
+          ]}
         />
-
+      </Stack>
-        <SyncStatusCardExecution synced={30} total={50} />
+      <div className="container-inner landing-page">
-        <SyncStatusCardConsensus synced={30} total={50} />
+        <YStack
-        <Stack style={{ marginTop: '1rem' }}>
+          space={'$4'}
-          <Button>Continue</Button>
+          style={{
-        </Stack>
+            justifyContent: 'end',
-      </YStack>
+            alignItems: 'start',
-    </div>
+            marginBottom: '2rem',
+            maxWidth: '100%',
+          }}
+        >
+          <NimbusLogo />
+          <Titles
+            title="Device Health Check"
+            subtitle="Configure your device to start Staking on Nimbus"
+            isAdvancedSettings={true}
+          />
+          <YStack>
+            <SyncStatusCardExecution synced={132432} total={200000} />
+            <SyncStatusCardConsensus synced={149500} total={160000} />
+          </YStack>
+          <Stack style={{ marginTop: '1rem' }}>
+            <Button>Continue</Button>
+          </Stack>
+        </YStack>
+      </div>
+    </>
   )
 }