From fb94ca76d562c59dbc62951ea47a186552221d8d Mon Sep 17 00:00:00 2001
From: Rickard Andersson <gonz@severnatazvezda.com>
Date: Tue, 26 Sep 2023 13:01:02 +0300
Subject: [PATCH] style: format

---
 .../BeaconAddress.stories.tsx                 |  16 +--
 .../ConnectExistingInstance/BeaconAddress.tsx | 134 ++++++++++-------
 .../ClientAddressRow.stories.tsx              |  16 +--
 .../ClientAddressRow.tsx                      | 135 +++++++++++-------
 .../ConnectExistingInstance.tsx               | 128 ++++++++---------
 src/pages/PairDevice/PairDevice.tsx           |   5 +-
 6 files changed, 246 insertions(+), 188 deletions(-)

diff --git a/src/pages/ConnectExistingInstance/BeaconAddress.stories.tsx b/src/pages/ConnectExistingInstance/BeaconAddress.stories.tsx
index 93242de0..a6dae199 100644
--- a/src/pages/ConnectExistingInstance/BeaconAddress.stories.tsx
+++ b/src/pages/ConnectExistingInstance/BeaconAddress.stories.tsx
@@ -4,18 +4,18 @@ import BeaconAddress from './BeaconAddress'
 import { withRouter } from 'storybook-addon-react-router-v6'
 
 const meta = {
-    title: 'Connect-Device/BeaconAddress',
-    component: BeaconAddress,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    decorators: [withRouter],
+  title: 'Connect-Device/BeaconAddress',
+  component: BeaconAddress,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [withRouter],
 } satisfies Meta<typeof BeaconAddress>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
 export const Page: Story = {
-    args: {},
+  args: {},
 }
diff --git a/src/pages/ConnectExistingInstance/BeaconAddress.tsx b/src/pages/ConnectExistingInstance/BeaconAddress.tsx
index 159c43e7..07b793fe 100644
--- a/src/pages/ConnectExistingInstance/BeaconAddress.tsx
+++ b/src/pages/ConnectExistingInstance/BeaconAddress.tsx
@@ -1,60 +1,88 @@
-import { Checkbox, Input, Text } from "@status-im/components"
-import { useState } from "react"
-import { Stack, Switch, XStack, YStack } from "tamagui"
+import { Checkbox, Input, Text } from '@status-im/components'
+import { useState } from 'react'
+import { Stack, Switch, XStack, YStack } from 'tamagui'
 
 const BeaconAddress = () => {
-    const [isBeaconSwitchOn, setIsBeaconSwitchOn] = useState(false)
-    const [inputAdress, setInputAdress] = useState('')
-    const [vcPort, setVcPort] = useState('')
-    const [isClientAddressChecked, setIsClientAddressChecked] = useState(false)
+  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>
+  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="$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'}>
-                    <Text size={11} color={'#647084'} weight={'regular'}>
-                        Beacon Address
-                    </Text>
-                    <Input
-                        placeholder={''}
-                        value={inputAdress}
-                        onChangeText={(e) => { setInputAdress(e) }}
-                    />
-                </YStack>
-
-                <YStack space={'$2'}>
-                    <Text size={11} color={'#647084'} weight={'regular'}>
-                        VC Port
-                    </Text>
-                    <Input
-                        placeholder={''}
-                        value={vcPort}
-                        onChangeText={(e) => { setVcPort(e) }}
-                    />
-                </YStack>
-                <Stack style={{ alignItems: 'center', justifyContent: 'center' }} height={'100%'} marginTop={'10px'} width={'fit-content'} >
-                    <Checkbox
-                        id='checkforaddress'
-                        variant="outline"
-                        selected={isClientAddressChecked}
-                        onCheckedChange={() => setIsClientAddressChecked(prev => !prev)}
-                        size={20}
-                    />
-                </Stack>
-            </XStack>
-            <XStack></XStack>
+          <Switch
+            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'}>
+          <Text size={11} color={'#647084'} weight={'regular'}>
+            Beacon Address
+          </Text>
+          <Input
+            placeholder={''}
+            value={inputAdress}
+            onChangeText={e => {
+              setInputAdress(e)
+            }}
+          />
+        </YStack>
+
+        <YStack space={'$2'}>
+          <Text size={11} color={'#647084'} weight={'regular'}>
+            VC Port
+          </Text>
+          <Input
+            placeholder={''}
+            value={vcPort}
+            onChangeText={e => {
+              setVcPort(e)
+            }}
+          />
+        </YStack>
+        <Stack
+          style={{ alignItems: 'center', justifyContent: 'center' }}
+          height={'100%'}
+          marginTop={'10px'}
+          width={'fit-content'}
+        >
+          <Checkbox
+            id="checkforaddress"
+            variant="outline"
+            selected={isClientAddressChecked}
+            onCheckedChange={() => setIsClientAddressChecked(prev => !prev)}
+            size={20}
+          />
+        </Stack>
+      </XStack>
+      <XStack></XStack>
+    </YStack>
+  )
 }
 
-export default BeaconAddress
\ No newline at end of file
+export default BeaconAddress
diff --git a/src/pages/ConnectExistingInstance/ClientAddressRow.stories.tsx b/src/pages/ConnectExistingInstance/ClientAddressRow.stories.tsx
index 45fd9f55..c6eff0ff 100644
--- a/src/pages/ConnectExistingInstance/ClientAddressRow.stories.tsx
+++ b/src/pages/ConnectExistingInstance/ClientAddressRow.stories.tsx
@@ -4,18 +4,18 @@ import ClientAddressRow from './ClientAddressRow'
 import { withRouter } from 'storybook-addon-react-router-v6'
 
 const meta = {
-    title: 'Connect-Device/ClientAddressRow',
-    component: ClientAddressRow,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    decorators: [withRouter],
+  title: 'Connect-Device/ClientAddressRow',
+  component: ClientAddressRow,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [withRouter],
 } satisfies Meta<typeof ClientAddressRow>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
 export const Page: Story = {
-    args: {},
+  args: {},
 }
diff --git a/src/pages/ConnectExistingInstance/ClientAddressRow.tsx b/src/pages/ConnectExistingInstance/ClientAddressRow.tsx
index a13e53ae..5fec41d0 100644
--- a/src/pages/ConnectExistingInstance/ClientAddressRow.tsx
+++ b/src/pages/ConnectExistingInstance/ClientAddressRow.tsx
@@ -1,60 +1,87 @@
-import { Checkbox, Input, Text } from "@status-im/components"
-import { useState } from "react"
-import { Stack, Switch, XStack, YStack } from "tamagui"
+import { Checkbox, Input, Text } from '@status-im/components'
+import { useState } from 'react'
+import { 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)
+  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="$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'}>
-                    <Text size={11} color={'#647084'} weight={'regular'}>
-                        Validator Client Address
-                    </Text>
-                    <Input
-                        placeholder={''}
-                        value={inputAdress}
-                        onChangeText={(e) => { setInputAdress(e) }}
-                    />
-                </YStack>
-
-                <YStack space={'$2'}>
-                    <Text size={11} color={'#647084'} weight={'regular'}>
-                        VC Port
-                    </Text>
-                    <Input
-                        placeholder={''}
-                        value={vcPort}
-                        onChangeText={(e) => { setVcPort(e) }}
-                    />
-                </YStack>
-                <Stack style={{ alignItems: 'center', justifyContent: 'center' }} height={'100%'} marginTop={'10px'} width={'fit-content'} >
-                    <Checkbox
-                        id='checkforaddress'
-                        variant="outline"
-                        selected={isClientAddressChecked}
-                        onCheckedChange={() => setIsClientAddressChecked(prev => !prev)}
-                        size={20}
-                        
-                    />
-                </Stack>
-            </XStack>
-            <XStack></XStack>
+  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="$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'}>
+          <Text size={11} color={'#647084'} weight={'regular'}>
+            Validator Client Address
+          </Text>
+          <Input
+            placeholder={''}
+            value={inputAdress}
+            onChangeText={e => {
+              setInputAdress(e)
+            }}
+          />
+        </YStack>
+
+        <YStack space={'$2'}>
+          <Text size={11} color={'#647084'} weight={'regular'}>
+            VC Port
+          </Text>
+          <Input
+            placeholder={''}
+            value={vcPort}
+            onChangeText={e => {
+              setVcPort(e)
+            }}
+          />
+        </YStack>
+        <Stack
+          style={{ alignItems: 'center', justifyContent: 'center' }}
+          height={'100%'}
+          marginTop={'10px'}
+          width={'fit-content'}
+        >
+          <Checkbox
+            id="checkforaddress"
+            variant="outline"
+            selected={isClientAddressChecked}
+            onCheckedChange={() => setIsClientAddressChecked(prev => !prev)}
+            size={20}
+          />
+        </Stack>
+      </XStack>
+      <XStack></XStack>
+    </YStack>
+  )
 }
 
-export default ClientAddressRow
\ No newline at end of file
+export default ClientAddressRow
diff --git a/src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx b/src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx
index 30edf3f3..a1e81385 100644
--- a/src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx
+++ b/src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx
@@ -12,72 +12,72 @@ import ClientAddressRow from './ClientAddressRow'
 import BeaconAddress from './BeaconAddress'
 
 const ConnectExistingInstance = () => {
-    const [encryptedPassword, setEncryptedPassword] = useState('')
+  const [encryptedPassword, setEncryptedPassword] = useState('')
 
-    const changeEncryptedPasswordHandler = (value: string) => {
-        setEncryptedPassword(value)
-    }
+  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>
-    )
+  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/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx
index a27e1ebb..d77ce79a 100644
--- a/src/pages/PairDevice/PairDevice.tsx
+++ b/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'} />