Add third state of component

public/icons/block.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="16/placeholder" clip-path="url(#clip0_1311_16617)">
+<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M0.900146 7.9999C0.900146 4.07868 4.07892 0.899902 8.00015 0.899902C11.9214 0.899902 15.1001 4.07868 15.1001 7.9999C15.1001 11.9211 11.9214 15.0999 8.00015 15.0999C4.07893 15.0999 0.900146 11.9211 0.900146 7.9999ZM8.00015 2.0999C6.58695 2.0999 5.2898 2.59676 4.27385 3.42531L7.99995 7.15142L11.7262 3.42514C10.7103 2.59669 9.41325 2.0999 8.00015 2.0999ZM12.5748 4.27366L8.84848 7.99995L12.5747 11.7262C13.4033 10.7103 13.9001 9.4131 13.9001 7.9999C13.9001 6.58673 13.4033 5.2896 12.5748 4.27366ZM7.15143 7.99995L3.42534 4.27387C2.59692 5.28978 2.10015 6.58683 2.10015 7.9999C2.10015 9.413 2.59693 10.7101 3.42539 11.726L7.15143 7.99995ZM4.2739 12.5745L7.99995 8.84848L11.7262 12.5747C10.7103 13.4031 9.41322 13.8999 8.00015 13.8999C6.58697 13.8999 5.28984 13.4031 4.2739 12.5745Z" fill="#E95460"/>
+</g>
+<defs>
+<clipPath id="clip0_1311_16617">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/pages/PairDevice/PairDevice.tsx

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

src/pages/PairDevice/SyncStatus.tsx

@@ -1,11 +1,15 @@
 import { XStack, YStack } from 'tamagui'
-import { Text } from '@status-im/components'
+import { InformationBox, Text } from '@status-im/components'
 import Icon from '../../components/General/Icon'
+import RefreshBlackIcon from '/icons/refresh-black.svg'
+import RefreshIcon from '/icons/refresh.svg'
+import BlockIcon from '/icons/block.svg'
 type SyncStatusProps = {
   isPairing: boolean
   timer: string
+  isAwaitingPairing?: boolean
 }
-const SyncStatus = ({ isPairing, timer }: SyncStatusProps) => {
+const SyncStatus = ({ isPairing, timer, isAwaitingPairing }: SyncStatusProps) => {
   return (
     <YStack style={{ width: '584px' }}>
       <XStack space={'$4'} style={{ justifyContent: 'space-between' }}>
@@ -13,21 +17,38 @@ const SyncStatus = ({ isPairing, timer }: SyncStatusProps) => {
           Device Sync Status
         </Text>
         {isPairing && (
-          <Text size={11} color="#647084">
+          <Text
+            size={isAwaitingPairing ? 15 : 11}
+            color={isAwaitingPairing ? '#EB5757' : '#647084'}
+            weight={isAwaitingPairing && 'semibold'}
+          >
             {timer}
           </Text>
         )}
-        <Icon src={isPairing ? '/icons/refresh-black.svg' : '/icons/refresh.svg'} height={20} />
+        <Icon src={isPairing ? RefreshBlackIcon : RefreshIcon} height={20} />
       </XStack>
       {isPairing ? (
+        isAwaitingPairing ? (
+          <Text size={15} color="#EB5757" weight={'semibold'}>
+            Awaiting Pairing{' '}
+          </Text>
+        ) : (
           <Text size={15} color="#09101C" weight={'semibold'}>
             Awaiting pairing connection...
           </Text>
+        )
       ) : (
         <Text size={13} color="#A1ABBD">
           No pairing input provided.
         </Text>
       )}
+      {isAwaitingPairing && (
+        <InformationBox
+          message="No connection has been created to a Nimbus service for over 3 minutes. Please ensure that the generated pairing ID was input into the CLI. If you are unable to pair device, consider connect via IP.   "
+          variant="error"
+          icon={<Icon src={BlockIcon} />}
+        />
+      )}
     </YStack>
   )
 }