From 7cd68fac9391308958d338bd6b252ac585fe582e Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 16 Aug 2023 11:41:37 +0300
Subject: [PATCH] Create second state

---
 src/pages/PairDevice/PairDevice.tsx |  2 +-
 src/pages/PairDevice/SyncStatus.tsx | 23 +++++++++++++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx
index 1b3b06df..f455a2e8 100644
--- a/src/pages/PairDevice/PairDevice.tsx
+++ b/src/pages/PairDevice/PairDevice.tsx
@@ -11,7 +11,7 @@ const PairDevice = () => {
           maxWidth: '100%',
         }}
       >
-        <SyncStatus />
+        <SyncStatus isPairing={true} timer={'00:12'} />
       </YStack>
     </PageWrapperShadow>
   )
diff --git a/src/pages/PairDevice/SyncStatus.tsx b/src/pages/PairDevice/SyncStatus.tsx
index f1de75dd..12f2b82a 100644
--- a/src/pages/PairDevice/SyncStatus.tsx
+++ b/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" >
-        No pairing input provided.
-      </Text>
+      {isPairing ? (
+        <Text size={15} color="#09101C" weight={'semibold'}>
+          Awaiting pairing connection...
+        </Text>
+      ) : (
+        <Text size={13} color="#A1ABBD">
+          No pairing input provided.
+        </Text>
+      )}
     </YStack>
   )
 }