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] 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'}