Create second state

src/pages/PairDevice/PairDevice.tsx

@@ -11,7 +11,7 @@ const PairDevice = () => {
           maxWidth: '100%',
         }}
       >
-        <SyncStatus />
+        <SyncStatus isPairing={true} timer={'00:12'} />
       </YStack>
     </PageWrapperShadow>
   )

src/pages/PairDevice/SyncStatus.tsx

@@ -1,18 +1,33 @@
 import { XStack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 import Icon from '../../components/General/Icon'
-const SyncStatus = () => {
+type SyncStatusProps = {
+  isPairing: boolean
+  timer: string
+}
+const SyncStatus = ({ isPairing, timer }: SyncStatusProps) => {
   return (
     <YStack style={{ width: '584px' }}>
       <XStack space={'$4'} style={{ justifyContent: 'space-between' }}>
         <Text size={11} color="#647084" weight="medium">
           Device Sync Status
         </Text>
+        {isPairing && (
+          <Text size={11} color="#647084">
+            {timer}
+          </Text>
+        )}
         <Icon src="/icons/refresh.svg" />
       </XStack>
-      <Text size={13} color="#A1ABBD" >
+      {isPairing ? (
-        No pairing input provided.
+        <Text size={15} color="#09101C" weight={'semibold'}>
-      </Text>
+          Awaiting pairing connection...
+        </Text>
+      ) : (
+        <Text size={13} color="#A1ABBD">
+          No pairing input provided.
+        </Text>
+      )}
     </YStack>
   )
 }