From b3c7deb54f105ec87c07c5f7c36b981b90af3354 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 20 Dec 2023 08:00:21 +0200
Subject: [PATCH] feat: move components to pair device folder

---
 .../ConnectExistingInstance.tsx               | 83 -------------------
 .../BeaconAddress.stories.tsx                 |  0
 .../BeaconAddress.tsx                         |  0
 .../ClientAddressRow.stories.tsx              |  0
 .../ClientAddressRow.tsx                      |  0
 .../ConnectExistingInctance.stories.tsx       |  2 +-
 .../PairDevice/ConnectExistingInstance.tsx    | 51 ++++++++++++
 src/pages/PairDevice/PairDevice.tsx           |  2 +-
 8 files changed, 53 insertions(+), 85 deletions(-)
 delete mode 100644 src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx
 rename src/pages/{ConnectExistingInstance => PairDevice}/BeaconAddress.stories.tsx (100%)
 rename src/pages/{ConnectExistingInstance => PairDevice}/BeaconAddress.tsx (100%)
 rename src/pages/{ConnectExistingInstance => PairDevice}/ClientAddressRow.stories.tsx (100%)
 rename src/pages/{ConnectExistingInstance => PairDevice}/ClientAddressRow.tsx (100%)
 rename src/pages/{ConnectExistingInstance => PairDevice}/ConnectExistingInctance.stories.tsx (100%)
 create mode 100644 src/pages/PairDevice/ConnectExistingInstance.tsx

diff --git a/src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx b/src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx
deleted file mode 100644
index bb4ff43e..00000000
--- a/src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Separator, XStack, YStack } from 'tamagui'
-import { useState } from 'react'
-import { Button, Input, Text } from '@status-im/components'
-import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
-
-import Titles from '../../components/General/Titles'
-
-import { NodeIcon, SettingsIcon, CompleteIdIcon, ClearIcon } from '@status-im/icons'
-import Header from '../../components/General/Header'
-
-import ClientAddressRow from './ClientAddressRow'
-import BeaconAddress from './BeaconAddress'
-
-const ConnectExistingInstance = () => {
-  const [encryptedPassword, setEncryptedPassword] = useState('')
-
-  const changeEncryptedPasswordHandler = (value: string) => {
-    setEncryptedPassword(value)
-  }
-
-  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 "
-        />
-        <XStack style={{ justifyContent: 'space-between' }}>
-          <Text size={19} weight={'semibold'} color="#09101C">
-            Connect via IP
-          </Text>
-          <Button variant="grey" size={24} icon={<SettingsIcon size={20} />}>
-            Advanced
-          </Button>
-        </XStack>
-        <ClientAddressRow />
-        <BeaconAddress />
-        <Separator borderColor={'#e3e3e3'} />
-        <YStack space={'$2'}>
-          <Text size={11} color={'#647084'}>
-            API Token
-          </Text>
-          <Input
-            placeholder={'*****_*******_******'}
-            icon={
-              <ClearIcon
-                size={16}
-                color="#A1ABBD"
-                onClick={() => setEncryptedPassword('')}
-                style={{ cursor: 'pointer' }}
-              />
-            }
-            value={encryptedPassword}
-            onChangeText={changeEncryptedPasswordHandler}
-          />
-        </YStack>
-        <Separator borderColor={'#e3e3e3'} />
-        <Text size={19} weight={'semibold'} color="#09101C">
-          Advanced Settings
-        </Text>
-        <XStack space={'$4'}>
-          <Button icon={<CompleteIdIcon size={20} color="#2A4AF5" />} variant="outline">
-            Pair with ID
-          </Button>
-        </XStack>
-        <Separator borderColor={'#e3e3e3'} />
-        <XStack>
-          <Button icon={<NodeIcon size={20} />} variant="blue">
-            Continue
-          </Button>
-        </XStack>
-      </YStack>
-    </PageWrapperShadow>
-  )
-}
-
-export default ConnectExistingInstance
diff --git a/src/pages/ConnectExistingInstance/BeaconAddress.stories.tsx b/src/pages/PairDevice/BeaconAddress.stories.tsx
similarity index 100%
rename from src/pages/ConnectExistingInstance/BeaconAddress.stories.tsx
rename to src/pages/PairDevice/BeaconAddress.stories.tsx
diff --git a/src/pages/ConnectExistingInstance/BeaconAddress.tsx b/src/pages/PairDevice/BeaconAddress.tsx
similarity index 100%
rename from src/pages/ConnectExistingInstance/BeaconAddress.tsx
rename to src/pages/PairDevice/BeaconAddress.tsx
diff --git a/src/pages/ConnectExistingInstance/ClientAddressRow.stories.tsx b/src/pages/PairDevice/ClientAddressRow.stories.tsx
similarity index 100%
rename from src/pages/ConnectExistingInstance/ClientAddressRow.stories.tsx
rename to src/pages/PairDevice/ClientAddressRow.stories.tsx
diff --git a/src/pages/ConnectExistingInstance/ClientAddressRow.tsx b/src/pages/PairDevice/ClientAddressRow.tsx
similarity index 100%
rename from src/pages/ConnectExistingInstance/ClientAddressRow.tsx
rename to src/pages/PairDevice/ClientAddressRow.tsx
diff --git a/src/pages/ConnectExistingInstance/ConnectExistingInctance.stories.tsx b/src/pages/PairDevice/ConnectExistingInctance.stories.tsx
similarity index 100%
rename from src/pages/ConnectExistingInstance/ConnectExistingInctance.stories.tsx
rename to src/pages/PairDevice/ConnectExistingInctance.stories.tsx
index 2f22b83b..3f8d2b64 100644
--- a/src/pages/ConnectExistingInstance/ConnectExistingInctance.stories.tsx
+++ b/src/pages/PairDevice/ConnectExistingInctance.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { withRouter } from 'storybook-addon-react-router-v6'
 
 import ConnectExistingInstance from './ConnectExistingInstance'
-import { withRouter } from 'storybook-addon-react-router-v6'
 
 const meta = {
   title: 'Connect-Device/ConnectExistingInstance',
diff --git a/src/pages/PairDevice/ConnectExistingInstance.tsx b/src/pages/PairDevice/ConnectExistingInstance.tsx
new file mode 100644
index 00000000..58b44246
--- /dev/null
+++ b/src/pages/PairDevice/ConnectExistingInstance.tsx
@@ -0,0 +1,51 @@
+import { Separator, XStack, YStack } from 'tamagui'
+import { useState } from 'react'
+import { Button, Input, Text } from '@status-im/components'
+import { SettingsIcon, ClearIcon } from '@status-im/icons'
+
+import ClientAddressRow from './ClientAddressRow'
+import BeaconAddress from './BeaconAddress'
+
+const ConnectExistingInstance = () => {
+  const [encryptedPassword, setEncryptedPassword] = useState('')
+
+  const changeEncryptedPasswordHandler = (value: string) => {
+    setEncryptedPassword(value)
+  }
+
+  return (
+    <YStack space={'$3'} maxWidth={'100%'}>
+      <XStack style={{ justifyContent: 'space-between' }}>
+        <Text size={19} weight={'semibold'} color="#09101C">
+          Connect via IP
+        </Text>
+        <Button variant="grey" size={24} icon={<SettingsIcon size={20} />}>
+          Advanced
+        </Button>
+      </XStack>
+      <ClientAddressRow />
+      <BeaconAddress />
+      <Separator borderColor={'#e3e3e3'} />
+      <YStack space={'$2'}>
+        <Text size={11} color={'#647084'}>
+          API Token
+        </Text>
+        <Input
+          placeholder={'*****_*******_******'}
+          icon={
+            <ClearIcon
+              size={16}
+              color="#A1ABBD"
+              onClick={() => setEncryptedPassword('')}
+              style={{ cursor: 'pointer' }}
+            />
+          }
+          value={encryptedPassword}
+          onChangeText={changeEncryptedPasswordHandler}
+        />
+      </YStack>
+    </YStack>
+  )
+}
+
+export default ConnectExistingInstance
diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx
index d543a4d7..6f108c95 100644
--- a/src/pages/PairDevice/PairDevice.tsx
+++ b/src/pages/PairDevice/PairDevice.tsx
@@ -10,7 +10,7 @@ import PairedSuccessfully from './PairedSuccessfully'
 import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar'
 import GenerateId from './GenerateId'
 import Header from '../../components/General/Header'
-import ConnectExistingInstance from '../ConnectExistingInstance/ConnectExistingInstance'
+import ConnectExistingInstance from './ConnectExistingInstance'
 
 const PairDevice = () => {
   const [isAwaitingPairing, setIsAwaitingPairing] = useState(false)