From 6cc33d598ed72655145b08acb031d983c5f539bc Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 22 Sep 2023 17:34:04 +0300
Subject: [PATCH] Create ClientAddressRow.tsx

---
 .../ClientAddressRow.tsx                      | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 src/pages/ConnectExistingInstance/ClientAddressRow.tsx

diff --git a/src/pages/ConnectExistingInstance/ClientAddressRow.tsx b/src/pages/ConnectExistingInstance/ClientAddressRow.tsx
new file mode 100644
index 00000000..593852f8
--- /dev/null
+++ b/src/pages/ConnectExistingInstance/ClientAddressRow.tsx
@@ -0,0 +1,61 @@
+import { Input, Text } from "@status-im/components"
+import { useState } from "react"
+import { Checkbox, Stack, Switch, XStack, YStack } from "tamagui"
+
+const ClientAddressRow = () => {
+    const [isBeaconSwitchOn, setIsBeaconSwitchOn] = useState(false)
+    const [inputAdress, setInputAdress] = useState('')
+    const [vcPort, setVcPort] = useState('')
+    const [isClientAddressChecked, setIsClientAddressChecked] = useState(false)
+    
+    return (
+        <YStack>
+            <XStack justifyContent={'space-between'}>
+                <YStack space={'$2'}>
+                    <YStack>
+                        <Text size={13} color={'#647084'} weight={'semibold'}> Protocol </Text>
+                        <Text size={11} color={'#647084'} weight={'regular'}> (HTTP/HTTPS)</Text>
+                    </YStack>
+
+                    <Switch size="$2" style={isBeaconSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }} checked={isBeaconSwitchOn} onCheckedChange={() => setIsBeaconSwitchOn(prev => !prev)}>
+                        <Switch.Thumb style={{ backgroundColor: '#fff', border: '1px solid #2A4AF5' }} />
+                    </Switch>
+                </YStack>
+                <YStack space={'$2'}>
+                    <Text size={11} color={'#647084'} weight={'regular'}>
+                        Validator Client Address
+                    </Text>
+                    <Input
+                        placeholder={''}
+                        value={inputAdress}
+                        onChangeText={() => { }}
+                    />
+                </YStack>
+
+                <YStack space={'$2'}>
+                    <Text size={11} color={'#647084'} weight={'regular'}>
+                        VC Port
+                    </Text>
+                    <Input
+                        placeholder={''}
+                        value={vcPort}
+                        onChangeText={() => { }}
+                    />
+                </YStack>
+                <Stack style={{ alignItems: 'center', justifyContent: 'center' }} height={'100%'} width={'10%'}>
+
+                    <Checkbox
+                        id='checkforaddress'
+                        variant="outline"
+                        selected={isClientAddressChecked}
+                        onCheckedChange={() => setIsClientAddressChecked(prev => !prev)}
+                        size={32}
+                    />
+                </Stack>
+            </XStack>
+            <XStack></XStack>
+        </YStack>
+    )
+}
+
+export default ClientAddressRow
\ No newline at end of file