From 110efe9d2851a0ff256c19988d745dbe23a0fffd Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 22 Sep 2023 13:52:51 +0300
Subject: [PATCH] Create ConnectExistingInstance

---
 .../ConnectExistingInstance.tsx               | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx b/src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx
index e69de29b..e1aa6883 100644
--- a/src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx
+++ b/src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx
@@ -0,0 +1,62 @@
+import { Separator, XStack, YStack } from 'tamagui'
+import { useState } from 'react'
+import { Button, Checkbox, Text } from '@status-im/components'
+
+import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
+import SyncStatus from './SyncStatus'
+import Titles from '../../components/General/Titles'
+
+import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar'
+import GenerateId from './GenerateId'
+import { NodeIcon } from '@status-im/icons'
+import Header from '../../components/General/Header'
+import Icon from '../../components/General/Icon'
+import PairedSuccessfully from '../PairDevice/PairedSuccessfully'
+
+const ConnectExistingInstance = () => {
+    const [isAwaitingPairing, setIsAwaitingPairing] = useState(false)
+    const isPaired = false
+    const isPairing = false
+
+    const changeSetIsAwaitingPairing = (result: boolean) => {
+        setIsAwaitingPairing(result)
+    }
+
+    return (
+        <PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
+            <YStack
+                space={'$3'}
+                style={{
+                    maxWidth: '100%',
+                }}
+            >
+                <Header selectedTag="pair" />
+                <Titles title="Connect to existing Nimbus Instance" subtitle="Pair your existing device to the Nimbus Node Manager " />
+                {/* {isPaired ? <PairedSuccessfully /> : <GenerateId isAwaitingPairing={isAwaitingPairing} />} */}
+                {/* {!isPaired && (
+          <SyncStatus
+            isPairing={isPairing}
+            isAwaitingPairing={isAwaitingPairing}
+            changeSetIsAwaitingPairing={changeSetIsAwaitingPairing}
+          />
+        )} */}
+                <Separator borderColor={'#e3e3e3'} />
+                <Text size={19} weight={'semibold'} color="#09101C">
+                    Advanced Settings
+                </Text>
+                <XStack space={'$4'}>
+                    <Button icon={<Icon src='/icons/connection-blue.svg' width={20} />} variant='outline'  > Connect via IP </Button>
+                </XStack>
+                {isPaired && <CreateAvatar />}
+                <Separator borderColor={'#e3e3e3'} />
+                <XStack>
+                    <Button icon={<NodeIcon size={20} />} disabled={!isPaired}>
+                        Continue
+                    </Button>
+                </XStack>
+            </YStack>
+        </PageWrapperShadow>
+    )
+}
+
+export default ConnectExistingInstance