mirror of
https://github.com/status-im/nimbus-gui.git
synced 2025-02-20 15:18:33 +00:00
feat: disable btn for not valid address or port
This commit is contained in:
parent
bc3903b5b0
commit
5ae15e8d7b
@ -1,6 +1,7 @@
|
|||||||
import { NodeIcon, CompleteIdIcon, ConnectionIcon } from '@status-im/icons'
|
import { NodeIcon, CompleteIdIcon, ConnectionIcon } from '@status-im/icons'
|
||||||
import { Label, Separator, XStack, YStack } from 'tamagui'
|
import { Label, Separator, XStack, YStack } from 'tamagui'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
|
import { useSelector } from 'react-redux'
|
||||||
import { Button, Checkbox, Text } from '@status-im/components'
|
import { Button, Checkbox, Text } from '@status-im/components'
|
||||||
|
|
||||||
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
|
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
|
||||||
@ -11,11 +12,16 @@ import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar'
|
|||||||
import GenerateId from './GenerateId'
|
import GenerateId from './GenerateId'
|
||||||
import Header from '../../components/General/Header'
|
import Header from '../../components/General/Header'
|
||||||
import ConnectViaIP from './ConnectViaIP/ConnectViaIP'
|
import ConnectViaIP from './ConnectViaIP/ConnectViaIP'
|
||||||
|
import { RootState } from '../../redux/store'
|
||||||
|
import { isAddressValid, isPortValid } from '../../utilities'
|
||||||
|
|
||||||
const PairDevice = () => {
|
const PairDevice = () => {
|
||||||
const [isAwaitingPairing, setIsAwaitingPairing] = useState(false)
|
const [isAwaitingPairing, setIsAwaitingPairing] = useState(false)
|
||||||
const [isConnectingViaIp, setIsConnectingViaIp] = useState(false)
|
const [isConnectingViaIp, setIsConnectingViaIp] = useState(false)
|
||||||
const [isAutoConnectChecked, setIsAutoConnectChecked] = useState(false)
|
const [isAutoConnectChecked, setIsAutoConnectChecked] = useState(false)
|
||||||
|
const { isAdvanced, nodeAddress, beaconAddress, beaconPort, vcAddress, vcPort } = useSelector(
|
||||||
|
(state: RootState) => state.pairDevice,
|
||||||
|
)
|
||||||
const isPaired = false
|
const isPaired = false
|
||||||
const isPairing = false
|
const isPairing = false
|
||||||
|
|
||||||
@ -29,6 +35,23 @@ const PairDevice = () => {
|
|||||||
|
|
||||||
const continueHandler = () => {}
|
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 (
|
return (
|
||||||
<PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
|
<PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
|
||||||
<YStack space={'$3'}>
|
<YStack space={'$3'}>
|
||||||
@ -99,7 +122,7 @@ const PairDevice = () => {
|
|||||||
<div>
|
<div>
|
||||||
<Button
|
<Button
|
||||||
icon={<NodeIcon size={20} />}
|
icon={<NodeIcon size={20} />}
|
||||||
disabled={isConnectingViaIp ? false : !isPaired}
|
disabled={isDisabledButton()}
|
||||||
onPress={continueHandler}
|
onPress={continueHandler}
|
||||||
>
|
>
|
||||||
{isConnectingViaIp ? 'Connect Device' : 'Continue'}
|
{isConnectingViaIp ? 'Connect Device' : 'Continue'}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user