fix: remove components

src/pages/PairDevice/PairDevice.tsx

@@ -1,7 +1,6 @@
 import { Separator, XStack, YStack } from 'tamagui'
 import { useState } from 'react'
-import { v4 as uuidv4 } from 'uuid'
-import { Button, Checkbox, Input, Tag, Text } from '@status-im/components'
+import { Button, Checkbox, Tag, Text } from '@status-im/components'
 
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import SyncStatus from './SyncStatus'
@@ -10,13 +9,17 @@ import PairIcon from '../../components/Icons/PairIcon'
 import CreateIcon from '../../components/Icons/CreateIcon'
 import NodeIcon from '../../components/Icons/NodeIcon'
 import Titles from '../../components/General/Titles'
-// import CompleteId from '../../components/Icons/CompleteId'
+import PairedSuccessfully from './PairedSuccessfully'
+
 const PairDevice = () => {
   const [autoChecked, setAutoChecked] = useState(false)
-  const isPaired = true
-  const isPairing = false
-  const isPairedSuccessfully = true
-  console.log(uuidv4())
+  const [isAwaitingPairing, setIsAwaitingPairing] = useState(false)
+  const isPaired = false
+  const isPairing = true
+
+  const changeSetIsAwaitingPairing = (result: boolean) => {
+    setIsAwaitingPairing(result)
+  }
 
   return (
     <PageWrapperShadow rightImageSrc="/background-images/day-night-bg.png">
@@ -34,26 +37,15 @@ const PairDevice = () => {
           </XStack>
         </XStack>
         <Titles title="Pair Device" subtitle="Pair your device to the Nimbus Node Manager" />
-        <XStack style={{ justifyContent: 'space-between' }}>
-          <Text size={19} weight={'semibold'}>
-            Pair with Command line
-          </Text>
-          <Button variant="outline" size={24}>
-            Generate ID
-          </Button>
-        </XStack>
-        <YStack space={'$2'}>
-          {!isPairedSuccessfully && (
-            <>
-              <Text size={13} weight={'medium'} color={'#647084'}>
-                Generated Pairing ID
-              </Text>
-              <Input placeholder={'nimbus pair <random-pairing-id>'} />
-            </>
-          )}
-        </YStack>
+        {isPaired ? <PairedSuccessfully /> : <></>}
         <Separator borderColor={'#e3e3e3'} />
-        <SyncStatus isPairing={isPairing} isPairedSuccessfully={isPairedSuccessfully} />
+        {!isPaired && (
+          <SyncStatus
+            isPairing={isPairing}
+            isAwaitingPairing={isAwaitingPairing}
+            changeSetIsAwaitingPairing={changeSetIsAwaitingPairing}
+          />
+        )}
         <Separator borderColor={'#e3e3e3'} />
         <Text size={19} weight={'semibold'} color="#09101C">
           Settings