Create Beacon Address row

src/pages/ConnectExistingInstance/BeaconAddress.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 BeackonAddress = () => {
+    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'}>
+                    Beacon 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 BeackonAddress

src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx

@@ -1,6 +1,6 @@
-import { Separator, Stack, Switch, XStack, YStack } from 'tamagui'
+import { Separator, XStack, YStack } from 'tamagui'
 import { useState } from 'react'
-import { Button, Checkbox, Input, Text } from '@status-im/components'
+import { Button, Input, Text } from '@status-im/components'
 
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 
@@ -13,6 +13,7 @@ import Header from '../../components/General/Header'
 import Icon from '../../components/General/Icon'
 import PairedSuccessfully from '../PairDevice/PairedSuccessfully'
 import ClientAddressRow from './ClientAddressRow'
+import BeackonAddress from './BeaconAddress'
 
 const ConnectExistingInstance = () => {
     const isPaired = false
@@ -50,6 +51,7 @@ const ConnectExistingInstance = () => {
                 </XStack>
                 {/* two rows  */}
                 <ClientAddressRow />
+                <BeackonAddress/> 
                 <Separator borderColor={'#e3e3e3'} />
                 <YStack space={'$2'}>
                     <Text size={11} color={'#647084'}>