feat: add live checking on the addresses and ports

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