fix: small changes to structure states

src/pages/PairDevice/GenerateId.tsx

@@ -3,7 +3,7 @@ import { CompleteIdIcon, CopyIcon } from '@status-im/icons'
 import { Text } from '@tamagui/web'
 import { useState } from 'react'
 import { Link } from 'react-router-dom'
-import { XStack, YStack } from 'tamagui'
+import { Separator, XStack, YStack } from 'tamagui'
 import { v4 as uuidv4 } from 'uuid'
 
 type GenerateIdProps = {
@@ -58,6 +58,7 @@ const GenerateId = ({ isAwaitingPairing }: GenerateIdProps) => {
         </Link>
         .
       </StatusText>
+      <Separator borderColor={'#e3e3e3'} />
     </YStack>
   )
 }

src/pages/PairDevice/PairDevice.tsx

@@ -11,11 +11,12 @@ import NodeIcon from '../../components/Icons/NodeIcon'
 import Titles from '../../components/General/Titles'
 import PairedSuccessfully from './PairedSuccessfully'
 import { CreateAvatar } from './CreateAvatar'
+import GenerateId from './GenerateId'
 
 const PairDevice = () => {
   const [autoChecked, setAutoChecked] = useState(false)
   const [isAwaitingPairing, setIsAwaitingPairing] = useState(false)
-  const isPaired = true
+  const isPaired = false
   const isPairing = true
 
   const changeSetIsAwaitingPairing = (result: boolean) => {
@@ -25,7 +26,7 @@ const PairDevice = () => {
   return (
     <PageWrapperShadow rightImageSrc="/background-images/day-night-bg.png">
       <YStack
-        space={'$4'}
+        space={'$3'}
         style={{
           maxWidth: '100%',
         }}
@@ -38,8 +39,7 @@ const PairDevice = () => {
           </XStack>
         </XStack>
         <Titles title="Pair Device" subtitle="Pair your device to the Nimbus Node Manager" />
-        {isPaired ? <PairedSuccessfully /> : <></>}
-        <Separator borderColor={'#e3e3e3'} />
+        {isPaired ? <PairedSuccessfully /> : <GenerateId isAwaitingPairing={isAwaitingPairing} />}
         {!isPaired && (
           <SyncStatus
             isPairing={isPairing}