From 168e100a7a567d3b64941567b9cbb64211e80596 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 16 Aug 2023 12:11:39 +0300
Subject: [PATCH] Add third state of component

---
 public/icons/block.svg              | 10 +++++++++
 src/pages/PairDevice/PairDevice.tsx |  2 +-
 src/pages/PairDevice/SyncStatus.tsx | 35 +++++++++++++++++++++++------
 3 files changed, 39 insertions(+), 8 deletions(-)
 create mode 100644 public/icons/block.svg

diff --git a/public/icons/block.svg b/public/icons/block.svg
new file mode 100644
index 00000000..4a98b7a2
--- /dev/null
+++ b/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>
diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx
index f455a2e8..89813d4e 100644
--- a/src/pages/PairDevice/PairDevice.tsx
+++ b/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>
   )
diff --git a/src/pages/PairDevice/SyncStatus.tsx b/src/pages/PairDevice/SyncStatus.tsx
index d387b6a2..f78821d8 100644
--- a/src/pages/PairDevice/SyncStatus.tsx
+++ b/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 ? (
-        <Text size={15} color="#09101C" weight={'semibold'}>
-          Awaiting pairing connection...
-        </Text>
+        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>
   )
 }