From ac033ba62a30302b051387e990b44c0c2a73a061 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sun, 7 Jan 2024 19:55:59 +0200
Subject: [PATCH 01/19] feat: change checks for port inputs

---
 src/pages/PairDevice/ConnectViaIP/InputsRow.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
index e5aaaa0d..9c9639ee 100644
--- a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
@@ -80,14 +80,9 @@ const InputsRow = ({
         </Text>
         <Input value={address} onChangeText={onAddressChange} />
       </YStack>
-      {isAdvanced ? (
-        <PortInput port={port} portType={portType} />
-      ) : (
-        <XStack space={'$3'} flexGrow={4} flexBasis={0}>
-          <PortInput port={vcPort} portType={VC} />
-          <PortInput port={beaconPort} portType={BEACON} />
-        </XStack>
-      )}
+      {isAdvanced === true && <PortInput port={port} portType={portType} />}
+      {isAdvanced === false && <PortInput port={vcPort} portType={VC} />}
+      {isAdvanced === false && <PortInput port={beaconPort} portType={BEACON} />}
       <div style={{ display: 'flex', alignItems: 'end', height: '100%' }}>
         <Stack height={'46%'} flexBasis={0} flexGrow={0.5}>
           <Checkbox

From ca3ef3401ed6a9eea842eaf89f32944b232fcaf4 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sun, 7 Jan 2024 19:56:24 +0200
Subject: [PATCH 02/19] feat: replace xstack with custom div

---
 src/pages/PairDevice/ConnectViaIP/InputsRow.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
index 9c9639ee..8db67ad7 100644
--- a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
@@ -1,6 +1,6 @@
 import { Checkbox, Input, Text } from '@status-im/components'
 import { useDispatch, useSelector } from 'react-redux'
-import { Stack, Switch, XStack, YStack } from 'tamagui'
+import { Stack, Switch, YStack } from 'tamagui'
 
 import { RootState } from '../../../redux/store'
 import PortInput from './PortInput'
@@ -47,7 +47,7 @@ const InputsRow = ({
   }
 
   return (
-    <XStack space={'$3'}>
+    <div style={{ display: 'flex', gap: '8px' }}>
       <YStack space={'$2'} flexBasis={0} flexGrow={2}>
         <YStack>
           <Text size={13} color={'#647084'} weight={'semibold'}>
@@ -94,7 +94,7 @@ const InputsRow = ({
           />
         </Stack>
       </div>
-    </XStack>
+    </div>
   )
 }
 

From a15a616833b30f51dbac3e144435c605bb78c15c Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sun, 7 Jan 2024 19:56:41 +0200
Subject: [PATCH 03/19] fix: pass is advanced prop event it is false

---
 src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx
index ee9ea537..c594bda2 100644
--- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx
@@ -68,7 +68,13 @@ const ConnectViaIP = () => {
           />
         </YStack>
       ) : (
-        <InputsRow addressType={NODE} address={nodeAddress} port={''} portType={''} />
+        <InputsRow
+          addressType={NODE}
+          address={nodeAddress}
+          port={''}
+          portType={''}
+          isAdvanced={isAdvanced}
+        />
       )}
       <Separator borderColor={'#e3e3e3'} />
       <YStack space={'$2'}>

From 7fadf4876d4b87d480e8f5bdfa1828bdfd499f63 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sun, 7 Jan 2024 19:58:08 +0200
Subject: [PATCH 04/19] fix: change flex grow of porn input

---
 src/pages/PairDevice/ConnectViaIP/PortInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/PairDevice/ConnectViaIP/PortInput.tsx b/src/pages/PairDevice/ConnectViaIP/PortInput.tsx
index ea901a75..d9d9d256 100644
--- a/src/pages/PairDevice/ConnectViaIP/PortInput.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/PortInput.tsx
@@ -19,7 +19,7 @@ const PortInput = ({ portType, port }: PortInputProps) => {
   }
 
   return (
-    <YStack space={'$2'} flexBasis={0} flexGrow={3}>
+    <YStack space={'$2'} flexBasis={0} flexGrow={2}>
       <Text size={13} color={'#647084'} weight={'semibold'}>
         {portType} Port
       </Text>

From 601378588c623506f268c886261184c5580f2f5c Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sun, 7 Jan 2024 19:58:56 +0200
Subject: [PATCH 05/19] fix: remove option for is advanced

---
 src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx | 1 +
 src/pages/PairDevice/ConnectViaIP/InputsRow.tsx         | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx
index ce68ec17..ce0533bb 100644
--- a/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx
@@ -31,6 +31,7 @@ export const Node: Story = {
     address: DEFAULT_ADDRESS,
     port: '',
     portType: '',
+    isAdvanced: false,
   },
 }
 
diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
index 8db67ad7..e161a605 100644
--- a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
@@ -9,7 +9,7 @@ import { BEACON, VC } from '../../../constants'
 type InputsRowProps = {
   addressType: string
   portType: string
-  isAdvanced?: boolean
+  isAdvanced: boolean
   address: string
   port: string
   isSwitchOn?: boolean

From 535c939582b4944fc1941517b0d552b9b7b6f290 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sun, 7 Jan 2024 20:20:58 +0200
Subject: [PATCH 06/19] feat: add class name and remove style

---
 src/pages/PairDevice/ConnectViaIP/InputsRow.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
index e161a605..0517ca6b 100644
--- a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
@@ -5,6 +5,7 @@ import { Stack, Switch, YStack } from 'tamagui'
 import { RootState } from '../../../redux/store'
 import PortInput from './PortInput'
 import { BEACON, VC } from '../../../constants'
+import styles from './InputsRow.module.css'
 
 type InputsRowProps = {
   addressType: string
@@ -47,7 +48,7 @@ const InputsRow = ({
   }
 
   return (
-    <div style={{ display: 'flex', gap: '8px' }}>
+    <div className={styles['main-container']}>
       <YStack space={'$2'} flexBasis={0} flexGrow={2}>
         <YStack>
           <Text size={13} color={'#647084'} weight={'semibold'}>
@@ -83,7 +84,7 @@ const InputsRow = ({
       {isAdvanced === true && <PortInput port={port} portType={portType} />}
       {isAdvanced === false && <PortInput port={vcPort} portType={VC} />}
       {isAdvanced === false && <PortInput port={beaconPort} portType={BEACON} />}
-      <div style={{ display: 'flex', alignItems: 'end', height: '100%' }}>
+      <div style={{ display: 'flex', alignItems: 'end' }}>
         <Stack height={'46%'} flexBasis={0} flexGrow={0.5}>
           <Checkbox
             id="AddressAndPortInputs"

From c5d0c150457fd6e698c80b601ae87cd8bf4b9040 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sun, 7 Jan 2024 20:21:23 +0200
Subject: [PATCH 07/19] feat: create media queries for columns order

---
 .../ConnectViaIP/InputsRow.module.css         | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/pages/PairDevice/ConnectViaIP/InputsRow.module.css

diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.module.css b/src/pages/PairDevice/ConnectViaIP/InputsRow.module.css
new file mode 100644
index 00000000..eb084090
--- /dev/null
+++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.module.css
@@ -0,0 +1,32 @@
+.main-container {
+  display: flex;
+  gap: 8px;
+}
+
+@media (max-width: 1150px) and (min-width: 1000px) {
+  .main-container {
+    display: block;
+  }
+
+  .main-container > * {
+    margin-bottom: 8px;
+  }
+
+  .main-container > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+@media (max-width: 500px) {
+  .main-container {
+    display: block;
+  }
+
+  .main-container > * {
+    margin-bottom: 8px;
+  }
+
+  .main-container > *:last-child {
+    margin-bottom: 0;
+  }
+}

From 1627ec856376434243f881cc36a96e5405f62a59 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sun, 7 Jan 2024 20:34:19 +0200
Subject: [PATCH 08/19] fix: change css file name and class name

---
 src/pages/PairDevice/ConnectViaIP/InputsRow.tsx    |  4 ++--
 .../{InputsRow.module.css => index.module.css}     | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)
 rename src/pages/PairDevice/ConnectViaIP/{InputsRow.module.css => index.module.css} (61%)

diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
index 0517ca6b..c7167965 100644
--- a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
@@ -5,7 +5,7 @@ import { Stack, Switch, YStack } from 'tamagui'
 import { RootState } from '../../../redux/store'
 import PortInput from './PortInput'
 import { BEACON, VC } from '../../../constants'
-import styles from './InputsRow.module.css'
+import styles from './index.module.css'
 
 type InputsRowProps = {
   addressType: string
@@ -48,7 +48,7 @@ const InputsRow = ({
   }
 
   return (
-    <div className={styles['main-container']}>
+    <div className={styles['row-container']}>
       <YStack space={'$2'} flexBasis={0} flexGrow={2}>
         <YStack>
           <Text size={13} color={'#647084'} weight={'semibold'}>
diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.module.css b/src/pages/PairDevice/ConnectViaIP/index.module.css
similarity index 61%
rename from src/pages/PairDevice/ConnectViaIP/InputsRow.module.css
rename to src/pages/PairDevice/ConnectViaIP/index.module.css
index eb084090..52ee27c8 100644
--- a/src/pages/PairDevice/ConnectViaIP/InputsRow.module.css
+++ b/src/pages/PairDevice/ConnectViaIP/index.module.css
@@ -1,32 +1,32 @@
-.main-container {
+.row-container {
   display: flex;
   gap: 8px;
 }
 
 @media (max-width: 1150px) and (min-width: 1000px) {
-  .main-container {
+  .row-container {
     display: block;
   }
 
-  .main-container > * {
+  .row-container > * {
     margin-bottom: 8px;
   }
 
-  .main-container > *:last-child {
+  .row-container > *:last-child {
     margin-bottom: 0;
   }
 }
 
 @media (max-width: 500px) {
-  .main-container {
+  .row-container {
     display: block;
   }
 
-  .main-container > * {
+  .row-container > * {
     margin-bottom: 8px;
   }
 
-  .main-container > *:last-child {
+  .row-container > *:last-child {
     margin-bottom: 0;
   }
 }

From 064d68752ffc88009fd15a5365d6f18755d9d69f Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sun, 7 Jan 2024 20:35:36 +0200
Subject: [PATCH 09/19] feat: add style for rows container

---
 src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx |  3 ++-
 src/pages/PairDevice/ConnectViaIP/index.module.css | 10 ++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx
index c594bda2..e706001b 100644
--- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx
@@ -7,6 +7,7 @@ import { useSelector } from 'react-redux'
 import InputsRow from './InputsRow'
 import { RootState } from '../../../redux/store'
 import { BEACON, NODE, VALIDATOR_CLIENT, VC } from '../../../constants'
+import styles from './index.module.css'
 
 const ConnectViaIP = () => {
   const [apiToken, setApiToken] = useState('')
@@ -47,7 +48,7 @@ const ConnectViaIP = () => {
         </Button>
       </XStack>
       {isAdvanced ? (
-        <YStack space={'$3'}>
+        <YStack space={'$3'} className={styles['rows-container']}>
           <InputsRow
             addressType={VALIDATOR_CLIENT}
             portType={VC}
diff --git a/src/pages/PairDevice/ConnectViaIP/index.module.css b/src/pages/PairDevice/ConnectViaIP/index.module.css
index 52ee27c8..468d53ac 100644
--- a/src/pages/PairDevice/ConnectViaIP/index.module.css
+++ b/src/pages/PairDevice/ConnectViaIP/index.module.css
@@ -15,6 +15,11 @@
   .row-container > *:last-child {
     margin-bottom: 0;
   }
+
+  .rows-container {
+    display: flex;
+    gap: 10px;
+  }
 }
 
 @media (max-width: 500px) {
@@ -29,4 +34,9 @@
   .row-container > *:last-child {
     margin-bottom: 0;
   }
+
+  .rows-container {
+    display: flex;
+    gap: 10px;
+  }
 }

From efd4e26cf26b3e8bb1dd5e95a3bab2bb8d594254 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 23 Jan 2024 21:31:57 +0200
Subject: [PATCH 10/19] feat: add custom styled check icon

---
 .../PairDevice/ConnectViaIP/InputsRow.tsx     | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
index c7167965..71f8ad47 100644
--- a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
@@ -1,6 +1,7 @@
-import { Checkbox, Input, Text } from '@status-im/components'
+import { Input, Text } from '@status-im/components'
 import { useDispatch, useSelector } from 'react-redux'
 import { Stack, Switch, YStack } from 'tamagui'
+import { CheckIcon } from '@status-im/icons'
 
 import { RootState } from '../../../redux/store'
 import PortInput from './PortInput'
@@ -84,14 +85,16 @@ const InputsRow = ({
       {isAdvanced === true && <PortInput port={port} portType={portType} />}
       {isAdvanced === false && <PortInput port={vcPort} portType={VC} />}
       {isAdvanced === false && <PortInput port={beaconPort} portType={BEACON} />}
-      <div style={{ display: 'flex', alignItems: 'end' }}>
-        <Stack height={'46%'} flexBasis={0} flexGrow={0.5}>
-          <Checkbox
-            id="AddressAndPortInputs"
-            variant="outline"
-            selected={isAdvanced ? isChecked : isNodeChecked}
-            onCheckedChange={onCheckboxChange}
-            size={20}
+      <div style={{ display: 'flex', alignItems: 'end', marginBottom: '11px' }}>
+        <Stack flexBasis={0} flexGrow={0.5}>
+          <CheckIcon
+            size={16}
+            style={{
+              borderRadius: '50%',
+              backgroundColor: isChecked ? '#1B273D1A' : '#2A4AF5',
+              padding: '1px',
+            }}
+            color={'white'}
           />
         </Stack>
       </div>

From 00ff0138ac2a05fd92c5a2bf89a6ee144c7e1351 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 23 Jan 2024 22:09:43 +0200
Subject: [PATCH 11/19] feat: delete state and reducer for checked addresses

---
 .../PairDevice/ConnectViaIP/ConnectViaIP.tsx      |  4 ----
 src/pages/PairDevice/ConnectViaIP/InputsRow.tsx   |  7 +------
 src/redux/PairDevice/slice.ts                     | 15 ---------------
 3 files changed, 1 insertion(+), 25 deletions(-)

diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx
index e706001b..9c8dfcc3 100644
--- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx
@@ -20,8 +20,6 @@ const ConnectViaIP = () => {
     vcAddress,
     isBeaconSwitchOn,
     isVcSwitchOn,
-    isBeaconChecked,
-    isVcChecked,
   } = useSelector((state: RootState) => state.pairDevice)
 
   const changeApiToken = (value: string) => {
@@ -56,7 +54,6 @@ const ConnectViaIP = () => {
             port={vcPort}
             isAdvanced={isAdvanced}
             isSwitchOn={isVcSwitchOn}
-            isChecked={isVcChecked}
           />
           <InputsRow
             addressType={BEACON}
@@ -65,7 +62,6 @@ const ConnectViaIP = () => {
             port={beaconPort}
             isAdvanced={isAdvanced}
             isSwitchOn={isBeaconSwitchOn}
-            isChecked={isBeaconChecked}
           />
         </YStack>
       ) : (
diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
index 71f8ad47..f12b363d 100644
--- a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
@@ -25,9 +25,8 @@ const InputsRow = ({
   address,
   port,
   isSwitchOn,
-  isChecked,
 }: InputsRowProps) => {
-  const { beaconPort, vcPort, isNodeChecked, isNodeSwitchOn } = useSelector(
+  const { beaconPort, vcPort, isNodeSwitchOn } = useSelector(
     (state: RootState) => state.pairDevice,
   )
   const dispatch = useDispatch()
@@ -40,10 +39,6 @@ const InputsRow = ({
     dispatch({ type: 'pairDevice/setIsSwitchOn', payload: { value, switchType: addressType } })
   }
 
-  const onCheckboxChange = (value: boolean) => {
-    dispatch({ type: 'pairDevice/setIsChecked', payload: { value, checkType: addressType } })
-  }
-
   const onAddressChange = (value: string) => {
     dispatch({ type: 'pairDevice/setAddress', payload: { value, addressType } })
   }
diff --git a/src/redux/PairDevice/slice.ts b/src/redux/PairDevice/slice.ts
index f223439e..995e1238 100644
--- a/src/redux/PairDevice/slice.ts
+++ b/src/redux/PairDevice/slice.ts
@@ -11,9 +11,6 @@ type PairDeviceStateType = {
   isNodeSwitchOn: boolean
   isBeaconSwitchOn: boolean
   isVcSwitchOn: boolean
-  isNodeChecked: boolean
-  isBeaconChecked: boolean
-  isVcChecked: boolean
 }
 
 const initialState: PairDeviceStateType = {
@@ -25,9 +22,6 @@ const initialState: PairDeviceStateType = {
   isNodeSwitchOn: true,
   isBeaconSwitchOn: true,
   isVcSwitchOn: true,
-  isNodeChecked: true,
-  isBeaconChecked: true,
-  isVcChecked: true,
 }
 
 const pairDeviceSlice = createSlice({
@@ -59,15 +53,6 @@ const pairDeviceSlice = createSlice({
         state.isNodeSwitchOn = action.payload.value
       }
     },
-    setIsChecked: (state, action) => {
-      if (action.payload.checkType === BEACON) {
-        state.isBeaconChecked = action.payload.value
-      } else if (action.payload.checkType === VALIDATOR_CLIENT) {
-        state.isVcChecked = action.payload.value
-      } else {
-        state.isNodeChecked = action.payload.value
-      }
-    },
   },
 })
 

From 78e1ac65bdfa70f509a0d12f5db98f5a0dfa29df Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 24 Jan 2024 07:59:24 +0200
Subject: [PATCH 12/19] feat: add meta tag to not zoom clicking on input

---
 index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/index.html b/index.html
index fe32257e..7663f2d2 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <title>Vite + React + TS</title>
     <link
         rel="preload"

From 40be4fb8bcb4972e7c716e98dacac9e90432189b Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 24 Jan 2024 08:00:56 +0200
Subject: [PATCH 13/19] fix: remove old meta tag

---
 index.html | 33 +++++++++++++++++----------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 7663f2d2..ce30f0a1 100644
--- a/index.html
+++ b/index.html
@@ -3,26 +3,27 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
     <title>Vite + React + TS</title>
     <link
-        rel="preload"
-        href="./Inter-font/Inter-Regular.ttf"
-        as="font"
-        type="font/ttf"
-        crossOrigin=""
-      />
-      <link
-        rel="preload"
-        href="./Inter-font/Inter-Bold.ttf"
-        as="font"
-        type="font/ttf"
-        crossOrigin=""
-      />
+      rel="preload"
+      href="./Inter-font/Inter-Regular.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin=""
+    />
+    <link
+      rel="preload"
+      href="./Inter-font/Inter-Bold.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin=""
+    />
   </head>
   <body>
-    <script>window.global = window;</script>
+    <script>
+      window.global = window
+    </script>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

From 5c2c065c0022543c6e38b23a10281e307f23a6ac Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 24 Jan 2024 08:02:11 +0200
Subject: [PATCH 14/19] feat: add Nimbus GUI title to document

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index ce30f0a1..16002858 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
-    <title>Vite + React + TS</title>
+    <title>Nimbus GUI</title>
     <link
       rel="preload"
       href="./Inter-font/Inter-Regular.ttf"

From b832ee70b012cc89997c5ded8186ed2f559885ed Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 24 Jan 2024 08:29:40 +0200
Subject: [PATCH 15/19] feat: add live checking on the addresses and ports

---
 .../PairDevice/ConnectViaIP/InputsRow.tsx     | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
index f12b363d..da949692 100644
--- a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
@@ -26,9 +26,7 @@ const InputsRow = ({
   port,
   isSwitchOn,
 }: InputsRowProps) => {
-  const { beaconPort, vcPort, isNodeSwitchOn } = useSelector(
-    (state: RootState) => state.pairDevice,
-  )
+  const { beaconPort, vcPort, isNodeSwitchOn } = useSelector((state: RootState) => state.pairDevice)
   const dispatch = useDispatch()
   const isSwitchOnResult = isAdvanced ? isSwitchOn : isNodeSwitchOn
   const switchStyle = isSwitchOnResult
@@ -43,6 +41,26 @@ const InputsRow = ({
     dispatch({ type: 'pairDevice/setAddress', payload: { value, addressType } })
   }
 
+  const isAddressValid = (address: string) => {
+    return address.length > 0
+  }
+
+  const isPortValid = (port: string) => {
+    if (port.length === 0) {
+      return false
+    }
+
+    return !isNaN(Number(port))
+  }
+
+  const isValidRow = () => {
+    if (isAdvanced) {
+      return isAddressValid(address) && isPortValid(port)
+    } else {
+      return isAddressValid(address) && isPortValid(vcPort) && isPortValid(beaconPort)
+    }
+  }
+
   return (
     <div className={styles['row-container']}>
       <YStack space={'$2'} flexBasis={0} flexGrow={2}>
@@ -86,7 +104,7 @@ const InputsRow = ({
             size={16}
             style={{
               borderRadius: '50%',
-              backgroundColor: isChecked ? '#1B273D1A' : '#2A4AF5',
+              backgroundColor: isValidRow() ? '#2A4AF5' : '#1B273D1A',
               padding: '1px',
             }}
             color={'white'}

From 81fef166644c8318d0a231fb4dc2cd3aeb31e412 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 24 Jan 2024 09:42:25 +0200
Subject: [PATCH 16/19] feat: add is advanced into slice

---
 src/redux/PairDevice/slice.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/redux/PairDevice/slice.ts b/src/redux/PairDevice/slice.ts
index 995e1238..fb9c6d24 100644
--- a/src/redux/PairDevice/slice.ts
+++ b/src/redux/PairDevice/slice.ts
@@ -3,6 +3,7 @@ import { createSlice } from '@reduxjs/toolkit'
 import { BEACON, BEACON_PORT, DEFAULT_ADDRESS, VALIDATOR_CLIENT, VC_PORT } from '../../constants'
 
 type PairDeviceStateType = {
+  isAdvanced: boolean
   beaconPort: string
   vcPort: string
   nodeAddress: string
@@ -14,6 +15,7 @@ type PairDeviceStateType = {
 }
 
 const initialState: PairDeviceStateType = {
+  isAdvanced: false,
   beaconPort: BEACON_PORT,
   vcPort: VC_PORT,
   nodeAddress: DEFAULT_ADDRESS,
@@ -28,6 +30,9 @@ const pairDeviceSlice = createSlice({
   name: 'pairDevice',
   initialState,
   reducers: {
+    setIsAdvanced: (state, action) => {
+      state.isAdvanced = action.payload
+    },
     setPort: (state, action) => {
       if (action.payload.portType === BEACON) {
         state.beaconPort = action.payload.value

From 965f59aac04aeed65e31c134b21fa95d6a6d66bf Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 24 Jan 2024 09:42:53 +0200
Subject: [PATCH 17/19] feat: use new is advanced state and reducer

---
 .../PairDevice/ConnectViaIP/ConnectViaIP.tsx  | 17 +++------
 .../ConnectViaIP/InputsRow.stories.tsx        | 37 +------------------
 .../PairDevice/ConnectViaIP/InputsRow.tsx     | 14 ++-----
 3 files changed, 10 insertions(+), 58 deletions(-)

diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx
index 9c8dfcc3..79710c53 100644
--- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx
@@ -2,7 +2,7 @@ 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 { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import InputsRow from './InputsRow'
 import { RootState } from '../../../redux/store'
@@ -11,8 +11,8 @@ import styles from './index.module.css'
 
 const ConnectViaIP = () => {
   const [apiToken, setApiToken] = useState('')
-  const [isAdvanced, setIsAdvanced] = useState(false)
   const {
+    isAdvanced,
     beaconPort,
     vcPort,
     nodeAddress,
@@ -21,13 +21,14 @@ const ConnectViaIP = () => {
     isBeaconSwitchOn,
     isVcSwitchOn,
   } = useSelector((state: RootState) => state.pairDevice)
+  const dispatch = useDispatch()
 
   const changeApiToken = (value: string) => {
     setApiToken(value)
   }
 
   const onAdvancedClickHandler = () => {
-    setIsAdvanced(state => !state)
+    dispatch({ type: 'pairDevice/setIsAdvanced', payload: !isAdvanced })
   }
 
   return (
@@ -52,7 +53,6 @@ const ConnectViaIP = () => {
             portType={VC}
             address={vcAddress}
             port={vcPort}
-            isAdvanced={isAdvanced}
             isSwitchOn={isVcSwitchOn}
           />
           <InputsRow
@@ -60,18 +60,11 @@ const ConnectViaIP = () => {
             portType={BEACON}
             address={beaconAddress}
             port={beaconPort}
-            isAdvanced={isAdvanced}
             isSwitchOn={isBeaconSwitchOn}
           />
         </YStack>
       ) : (
-        <InputsRow
-          addressType={NODE}
-          address={nodeAddress}
-          port={''}
-          portType={''}
-          isAdvanced={isAdvanced}
-        />
+        <InputsRow addressType={NODE} address={nodeAddress} port={''} portType={''} />
       )}
       <Separator borderColor={'#e3e3e3'} />
       <YStack space={'$2'}>
diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx
index ce0533bb..99818fc9 100644
--- a/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx
@@ -1,16 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { withRouter } from 'storybook-addon-react-router-v6'
 
 import InputsRow from './InputsRow'
-import {
-  BEACON,
-  BEACON_PORT,
-  DEFAULT_ADDRESS,
-  NODE,
-  VALIDATOR_CLIENT,
-  VC,
-  VC_PORT,
-} from '../../../constants'
+import { DEFAULT_ADDRESS, NODE } from '../../../constants'
 
 const meta = {
   title: 'Pair Device/InputsRow',
@@ -19,7 +10,6 @@ const meta = {
     layout: 'centered',
   },
   tags: ['autodocs'],
-  decorators: [withRouter],
 } satisfies Meta<typeof InputsRow>
 
 export default meta
@@ -31,30 +21,5 @@ export const Node: Story = {
     address: DEFAULT_ADDRESS,
     port: '',
     portType: '',
-    isAdvanced: false,
-  },
-}
-
-export const ValidatorClient: Story = {
-  args: {
-    addressType: VALIDATOR_CLIENT,
-    portType: VC,
-    address: DEFAULT_ADDRESS,
-    port: VC_PORT,
-    isAdvanced: true,
-    isSwitchOn: true,
-    isChecked: true,
-  },
-}
-
-export const Beacon: Story = {
-  args: {
-    addressType: BEACON,
-    portType: BEACON,
-    address: DEFAULT_ADDRESS,
-    port: BEACON_PORT,
-    isAdvanced: true,
-    isSwitchOn: true,
-    isChecked: true,
   },
 }
diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
index da949692..dc3bdb82 100644
--- a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
@@ -11,22 +11,16 @@ import styles from './index.module.css'
 type InputsRowProps = {
   addressType: string
   portType: string
-  isAdvanced: boolean
   address: string
   port: string
   isSwitchOn?: boolean
   isChecked?: boolean
 }
 
-const InputsRow = ({
-  isAdvanced,
-  addressType,
-  portType,
-  address,
-  port,
-  isSwitchOn,
-}: InputsRowProps) => {
-  const { beaconPort, vcPort, isNodeSwitchOn } = useSelector((state: RootState) => state.pairDevice)
+const InputsRow = ({ addressType, portType, address, port, isSwitchOn }: InputsRowProps) => {
+  const { isAdvanced, beaconPort, vcPort, isNodeSwitchOn } = useSelector(
+    (state: RootState) => state.pairDevice,
+  )
   const dispatch = useDispatch()
   const isSwitchOnResult = isAdvanced ? isSwitchOn : isNodeSwitchOn
   const switchStyle = isSwitchOnResult

From bc3903b5b00a7a52776cc8b8bb78878dfd1cfc98 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 24 Jan 2024 09:46:40 +0200
Subject: [PATCH 18/19] feat: move is valid funcs to utilities

---
 src/pages/PairDevice/ConnectViaIP/InputsRow.tsx | 13 +------------
 src/utilities.ts                                | 12 ++++++++++++
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
index dc3bdb82..f613c9f1 100644
--- a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
+++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
@@ -6,6 +6,7 @@ import { CheckIcon } from '@status-im/icons'
 import { RootState } from '../../../redux/store'
 import PortInput from './PortInput'
 import { BEACON, VC } from '../../../constants'
+import { isAddressValid, isPortValid } from '../../../utilities'
 import styles from './index.module.css'
 
 type InputsRowProps = {
@@ -35,18 +36,6 @@ const InputsRow = ({ addressType, portType, address, port, isSwitchOn }: InputsR
     dispatch({ type: 'pairDevice/setAddress', payload: { value, addressType } })
   }
 
-  const isAddressValid = (address: string) => {
-    return address.length > 0
-  }
-
-  const isPortValid = (port: string) => {
-    if (port.length === 0) {
-      return false
-    }
-
-    return !isNaN(Number(port))
-  }
-
   const isValidRow = () => {
     if (isAdvanced) {
       return isAddressValid(address) && isPortValid(port)
diff --git a/src/utilities.ts b/src/utilities.ts
index 2db499a0..66edbf43 100644
--- a/src/utilities.ts
+++ b/src/utilities.ts
@@ -68,3 +68,15 @@ export const getHeightPercentages = (amountOfElements: number) => {
 
   return `${percentages}%`
 }
+
+export const isAddressValid = (address: string) => {
+  return address.length > 0
+}
+
+export const isPortValid = (port: string) => {
+  if (port.length === 0) {
+    return false
+  }
+
+  return !isNaN(Number(port))
+}

From 5ae15e8d7bc24f5b840a25eabe2043a8ca2d4ab3 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 24 Jan 2024 14:37:47 +0200
Subject: [PATCH 19/19] feat: disable btn for not valid address or port

---
 src/pages/PairDevice/PairDevice.tsx | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx
index 1ba7d52b..250dd369 100644
--- a/src/pages/PairDevice/PairDevice.tsx
+++ b/src/pages/PairDevice/PairDevice.tsx
@@ -1,6 +1,7 @@
 import { NodeIcon, CompleteIdIcon, ConnectionIcon } from '@status-im/icons'
 import { Label, Separator, XStack, YStack } from 'tamagui'
 import { useState } from 'react'
+import { useSelector } from 'react-redux'
 import { Button, Checkbox, Text } from '@status-im/components'
 
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
@@ -11,11 +12,16 @@ import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar'
 import GenerateId from './GenerateId'
 import Header from '../../components/General/Header'
 import ConnectViaIP from './ConnectViaIP/ConnectViaIP'
+import { RootState } from '../../redux/store'
+import { isAddressValid, isPortValid } from '../../utilities'
 
 const PairDevice = () => {
   const [isAwaitingPairing, setIsAwaitingPairing] = useState(false)
   const [isConnectingViaIp, setIsConnectingViaIp] = useState(false)
   const [isAutoConnectChecked, setIsAutoConnectChecked] = useState(false)
+  const { isAdvanced, nodeAddress, beaconAddress, beaconPort, vcAddress, vcPort } = useSelector(
+    (state: RootState) => state.pairDevice,
+  )
   const isPaired = false
   const isPairing = false
 
@@ -29,6 +35,23 @@ const PairDevice = () => {
 
   const continueHandler = () => {}
 
+  const isDisabledButton = () => {
+    if (isConnectingViaIp) {
+      if (isAdvanced) {
+        return (
+          !isAddressValid(beaconAddress) ||
+          !isPortValid(beaconPort) ||
+          !isAddressValid(vcAddress) ||
+          !isPortValid(vcPort)
+        )
+      } else {
+        return !isAddressValid(nodeAddress) || !isPortValid(beaconPort) || !isPortValid(vcPort)
+      }
+    } else {
+      return !isPaired
+    }
+  }
+
   return (
     <PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
       <YStack space={'$3'}>
@@ -99,7 +122,7 @@ const PairDevice = () => {
         <div>
           <Button
             icon={<NodeIcon size={20} />}
-            disabled={isConnectingViaIp ? false : !isPaired}
+            disabled={isDisabledButton()}
             onPress={continueHandler}
           >
             {isConnectingViaIp ? 'Connect Device' : 'Continue'}