status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: use new port input component

This commit is contained in:
RadoslavDimchev 2024-01-05 14:27:39 +02:00
parent 398cfde40c
commit 48ee8abd47
2 changed files with 7 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx
View File

@ -67,7 +67,7 @@ const ConnectViaIP = () => {
/> />
</YStack> </YStack>
) : ( ) : (
<InputsRow addressType={'Node'} address={nodeAddress} /> <InputsRow addressType={'Node'} address={nodeAddress} port={''} portType={''} />
)} )}
<Separator borderColor={'#e3e3e3'} /> <Separator borderColor={'#e3e3e3'} />
<YStack space={'$2'}> <YStack space={'$2'}>

37
src/pages/PairDevice/ConnectViaIP/InputsRow.tsx
View File

@ -3,13 +3,14 @@ import { useDispatch, useSelector } from 'react-redux'
import { Stack, Switch, XStack, YStack } from 'tamagui' import { Stack, Switch, XStack, YStack } from 'tamagui'
import { RootState } from '../../../redux/store' import { RootState } from '../../../redux/store'
import PortInput from './PortInput'
type InputsRowProps = { type InputsRowProps = {
addressType: string addressType: string
portType?: string portType: string
isAdvanced?: boolean isAdvanced?: boolean
address: string address: string
port?: string port: string
isSwitchOn?: boolean isSwitchOn?: boolean
isChecked?: boolean isChecked?: boolean
} }
@ -40,14 +41,6 @@ const InputsRow = ({
dispatch({ type: 'pairDevice/setIsChecked', payload: { value, checkType: addressType } }) dispatch({ type: 'pairDevice/setIsChecked', payload: { value, checkType: addressType } })
} }
const onPortChange = (value: string, portType: string) => {
if (isNaN(Number(value))) {
return
}
dispatch({ type: 'pairDevice/setPort', payload: { value, portType } })
}
const onAddressChange = (value: string) => { const onAddressChange = (value: string) => {
dispatch({ type: 'pairDevice/setAddress', payload: { value, addressType } }) dispatch({ type: 'pairDevice/setAddress', payload: { value, addressType } })
} }
@ -87,29 +80,11 @@ const InputsRow = ({
<Input value={address} onChangeText={onAddressChange} /> <Input value={address} onChangeText={onAddressChange} />
</YStack> </YStack>
{isAdvanced ? ( {isAdvanced ? (
<YStack space={'$2'} flexBasis={0} flexGrow={3}> <PortInput port={port} portType={portType} />
<Text size={13} color={'#647084'} weight={'semibold'}>
{portType} Port
</Text>
<Input
value={port}
onChangeText={value => onPortChange(value, portType ? portType : '')}
/>
</YStack>
) : ( ) : (
<XStack space={'$3'} flexGrow={4} flexBasis={0}> <XStack space={'$3'} flexGrow={4} flexBasis={0}>
<YStack space={'$2'} flexBasis={0} flexGrow={2}> <PortInput port={vcPort} portType={'VC'} />
<Text size={13} color={'#647084'} weight={'semibold'}> <PortInput port={beaconPort} portType={'Beacon'} />
VC Port
</Text>
<Input value={vcPort} onChangeText={value => onPortChange(value, 'VC')} />
</YStack>
<YStack space={'$2'} flexBasis={0} flexGrow={2}>
<Text size={13} color={'#647084'} weight={'semibold'}>
Beacon Port
</Text>
<Input value={beaconPort} onChangeText={value => onPortChange(value, 'Beacon')} />
</YStack>
</XStack> </XStack>
)} )}
<div style={{ display: 'flex', alignItems: 'end', height: '100%' }}> <div style={{ display: 'flex', alignItems: 'end', height: '100%' }}>