style: format

src/pages/ConnectExistingInstance/BeaconAddress.tsx

@@ -1,6 +1,6 @@
-import { Checkbox, Input, Text } from "@status-im/components"
+import { Checkbox, Input, Text } from '@status-im/components'
-import { useState } from "react"
+import { useState } from 'react'
-import { Stack, Switch, XStack, YStack } from "tamagui"
+import { Stack, Switch, XStack, YStack } from 'tamagui'
 
 const BeaconAddress = () => {
   const [isBeaconSwitchOn, setIsBeaconSwitchOn] = useState(false)
@@ -13,12 +13,31 @@ const BeaconAddress = () => {
       <XStack justifyContent={'space-between'}>
         <YStack space={'$2'}>
           <YStack>
-                        <Text size={13} color={'#647084'} weight={'semibold'}> Protocol </Text>
+            <Text size={13} color={'#647084'} weight={'semibold'}>
-                        <Text size={11} color={'#647084'} weight={'regular'}> (HTTP/HTTPS)</Text>
+              {' '}
+              Protocol{' '}
+            </Text>
+            <Text size={11} color={'#647084'} weight={'regular'}>
+              {' '}
+              (HTTP/HTTPS)
+            </Text>
           </YStack>
 
-                    <Switch size="$1" style={isBeaconSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }} checked={isBeaconSwitchOn} onCheckedChange={() => setIsBeaconSwitchOn(prev => !prev)}>
+          <Switch
-                        <Switch.Thumb style={{ right: 7, bottom: 3, backgroundColor: '#fff', height: '16px', width: '16px' }} />
+            size="$1"
+            style={isBeaconSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }}
+            checked={isBeaconSwitchOn}
+            onCheckedChange={() => setIsBeaconSwitchOn(prev => !prev)}
+          >
+            <Switch.Thumb
+              style={{
+                right: 7,
+                bottom: 3,
+                backgroundColor: '#fff',
+                height: '16px',
+                width: '16px',
+              }}
+            />
           </Switch>
         </YStack>
         <YStack space={'$2'}>
@@ -28,7 +47,9 @@ const BeaconAddress = () => {
           <Input
             placeholder={''}
             value={inputAdress}
-                        onChangeText={(e) => { setInputAdress(e) }}
+            onChangeText={e => {
+              setInputAdress(e)
+            }}
           />
         </YStack>
 
@@ -39,12 +60,19 @@ const BeaconAddress = () => {
           <Input
             placeholder={''}
             value={vcPort}
-                        onChangeText={(e) => { setVcPort(e) }}
+            onChangeText={e => {
+              setVcPort(e)
+            }}
           />
         </YStack>
-                <Stack style={{ alignItems: 'center', justifyContent: 'center' }} height={'100%'} marginTop={'10px'} width={'fit-content'} >
+        <Stack
+          style={{ alignItems: 'center', justifyContent: 'center' }}
+          height={'100%'}
+          marginTop={'10px'}
+          width={'fit-content'}
+        >
           <Checkbox
-                        id='checkforaddress'
+            id="checkforaddress"
             variant="outline"
             selected={isClientAddressChecked}
             onCheckedChange={() => setIsClientAddressChecked(prev => !prev)}

src/pages/ConnectExistingInstance/ClientAddressRow.tsx

@@ -1,6 +1,6 @@
-import { Checkbox, Input, Text } from "@status-im/components"
+import { Checkbox, Input, Text } from '@status-im/components'
-import { useState } from "react"
+import { useState } from 'react'
-import { Stack, Switch, XStack, YStack } from "tamagui"
+import { Stack, Switch, XStack, YStack } from 'tamagui'
 
 const ClientAddressRow = () => {
   const [isBeaconSwitchOn, setIsBeaconSwitchOn] = useState(false)
@@ -13,11 +13,30 @@ const ClientAddressRow = () => {
       <XStack justifyContent={'space-between'}>
         <YStack space={'$2'}>
           <YStack>
-                        <Text size={13} color={'#647084'} weight={'semibold'}> Protocol </Text>
+            <Text size={13} color={'#647084'} weight={'semibold'}>
-                        <Text size={11} color={'#647084'} weight={'regular'}> (HTTP/HTTPS)</Text>
+              {' '}
+              Protocol{' '}
+            </Text>
+            <Text size={11} color={'#647084'} weight={'regular'}>
+              {' '}
+              (HTTP/HTTPS)
+            </Text>
           </YStack>
-                    <Switch size="$1" style={isBeaconSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }} checked={isBeaconSwitchOn} onCheckedChange={() => setIsBeaconSwitchOn(prev => !prev)}>
+          <Switch
-                        <Switch.Thumb style={{ right: 7, bottom: 3, backgroundColor: '#fff', height: '16px', width: '16px' }} />
+            size="$1"
+            style={isBeaconSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }}
+            checked={isBeaconSwitchOn}
+            onCheckedChange={() => setIsBeaconSwitchOn(prev => !prev)}
+          >
+            <Switch.Thumb
+              style={{
+                right: 7,
+                bottom: 3,
+                backgroundColor: '#fff',
+                height: '16px',
+                width: '16px',
+              }}
+            />
           </Switch>
         </YStack>
         <YStack space={'$2'}>
@@ -27,7 +46,9 @@ const ClientAddressRow = () => {
           <Input
             placeholder={''}
             value={inputAdress}
-                        onChangeText={(e) => { setInputAdress(e) }}
+            onChangeText={e => {
+              setInputAdress(e)
+            }}
           />
         </YStack>
 
@@ -38,17 +59,23 @@ const ClientAddressRow = () => {
           <Input
             placeholder={''}
             value={vcPort}
-                        onChangeText={(e) => { setVcPort(e) }}
+            onChangeText={e => {
+              setVcPort(e)
+            }}
           />
         </YStack>
-                <Stack style={{ alignItems: 'center', justifyContent: 'center' }} height={'100%'} marginTop={'10px'} width={'fit-content'} >
+        <Stack
+          style={{ alignItems: 'center', justifyContent: 'center' }}
+          height={'100%'}
+          marginTop={'10px'}
+          width={'fit-content'}
+        >
           <Checkbox
-                        id='checkforaddress'
+            id="checkforaddress"
             variant="outline"
             selected={isClientAddressChecked}
             onCheckedChange={() => setIsClientAddressChecked(prev => !prev)}
             size={20}
-                        
           />
         </Stack>
       </XStack>

src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx

@@ -27,17 +27,15 @@ const ConnectExistingInstance = () => {
         }}
       >
         <Header selectedTag="pair" />
-                <Titles title="Connect to existing Nimbus Instance" subtitle="Pair your existing device to the Nimbus Node Manager " />
+        <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
+          <Button variant="grey" size={24} icon={<SettingsIcon size={20} />}>
-                        variant="grey"
-                        size={24}
-                        icon={<SettingsIcon size={20} />}
-
-                    >
             Advanced
           </Button>
         </XStack>
@@ -67,11 +65,13 @@ const ConnectExistingInstance = () => {
           Advanced Settings
         </Text>
         <XStack space={'$4'}>
-                    <Button icon={<CompleteIdIcon size={20} color='#2A4AF5' />} variant='outline'  >Pair with ID </Button>
+          <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' >
+          <Button icon={<NodeIcon size={20} />} variant="blue">
             Continue
           </Button>
         </XStack>

src/pages/PairDevice/PairDevice.tsx

@@ -44,7 +44,10 @@ const PairDevice = () => {
           Advanced Settings
         </Text>
         <XStack space={'$4'}>
-          <Button icon={<Icon src='/icons/connection-blue.svg' width={20} />} variant='outline'  > Connect via IP </Button>
+          <Button icon={<Icon src="/icons/connection-blue.svg" width={20} />} variant="outline">
+            {' '}
+            Connect via IP{' '}
+          </Button>
         </XStack>
         {isPaired && <CreateAvatar />}
         <Separator borderColor={'#e3e3e3'} />