Implement first state of sync status

public/icons/refresh.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="20/refresh">
+<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M12.6404 3.62514C11.2371 3.04387 9.68124 2.94189 8.21407 3.33502C6.7469 3.72814 5.45045 4.59441 4.52578 5.79945C3.60112 7.0045 3.09992 8.48098 3.09992 9.99991C3.09992 11.5188 3.60112 12.9953 4.52578 14.2004C5.45045 15.4054 6.7469 16.2717 8.21407 16.6648C9.68124 17.0579 11.2371 16.9559 12.6404 16.3747C14.0437 15.7934 15.216 14.7653 15.9755 13.4499L17.0147 14.0499C16.1232 15.5941 14.747 16.801 13.0997 17.4833C11.4523 18.1657 9.62582 18.2854 7.90349 17.8239C6.18116 17.3624 4.65923 16.3455 3.57376 14.9309C2.48828 13.5163 1.89992 11.783 1.89992 9.99991C1.89992 8.21682 2.48828 6.48356 3.57376 5.06894C4.65923 3.65432 6.18116 2.6374 7.90349 2.17591C9.62582 1.71441 11.4523 1.83412 13.0997 2.51648C14.166 2.95819 15.1188 3.61967 15.9 4.45017L15.9 2.99978L17.1 2.99979L17.1 6.49979L17.0999 7.09979H16.5L13 7.09979V5.89979L15.5496 5.89979C14.8075 4.89526 13.8033 4.1068 12.6404 3.62514Z" fill="#A1ABBD"/>
+</g>
+</svg>

src/pages/PairDevice/PairDevice.tsx

@@ -1,5 +1,6 @@
 import { YStack } from 'tamagui'
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
+import SyncStatus from './SyncStatus'
 
 const PairDevice = () => {
   return (
@@ -9,7 +10,9 @@ const PairDevice = () => {
         style={{
           maxWidth: '100%',
         }}
-      ></YStack>
+      >
+        <SyncStatus />
+      </YStack>
     </PageWrapperShadow>
   )
 }

src/pages/PairDevice/SyncStatus.tsx

@@ -0,0 +1,20 @@
+import { XStack, YStack } from 'tamagui'
+import { Text } from '@status-im/components'
+import Icon from '../../components/General/Icon'
+const SyncStatus = () => {
+  return (
+    <YStack style={{ width: '584px' }}>
+      <XStack space={'$4'} style={{ justifyContent: 'space-between' }}>
+        <Text size={11} color="#647084" weight="medium">
+          Device Sync Status
+        </Text>
+        <Icon src="/icons/refresh.svg" />
+      </XStack>
+      <Text size={13} color="#A1ABBD" >
+        No pairing input provided.
+      </Text>
+    </YStack>
+  )
+}
+
+export default SyncStatus