diff --git a/index.html b/index.html index fe32257e..16002858 100644 --- a/index.html +++ b/index.html @@ -3,25 +3,27 @@ - - Vite + React + TS + + Nimbus GUI - + rel="preload" + href="./Inter-font/Inter-Regular.ttf" + as="font" + type="font/ttf" + crossorigin="" + /> + - +
diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx index ee9ea537..79710c53 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx @@ -2,16 +2,17 @@ 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' import { BEACON, NODE, VALIDATOR_CLIENT, VC } from '../../../constants' +import styles from './index.module.css' const ConnectViaIP = () => { const [apiToken, setApiToken] = useState('') - const [isAdvanced, setIsAdvanced] = useState(false) const { + isAdvanced, beaconPort, vcPort, nodeAddress, @@ -19,16 +20,15 @@ const ConnectViaIP = () => { vcAddress, isBeaconSwitchOn, isVcSwitchOn, - isBeaconChecked, - isVcChecked, } = 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 ( @@ -47,24 +47,20 @@ const ConnectViaIP = () => { {isAdvanced ? ( - + ) : ( diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx index ce68ec17..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 export default meta @@ -33,27 +23,3 @@ export const Node: Story = { portType: '', }, } - -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 e5aaaa0d..f613c9f1 100644 --- a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx +++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx @@ -1,31 +1,25 @@ -import { Checkbox, Input, Text } from '@status-im/components' +import { 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 { 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 = { addressType: string portType: string - isAdvanced?: boolean address: string port: string isSwitchOn?: boolean isChecked?: boolean } -const InputsRow = ({ - isAdvanced, - addressType, - portType, - address, - port, - isSwitchOn, - isChecked, -}: InputsRowProps) => { - const { beaconPort, vcPort, isNodeChecked, isNodeSwitchOn } = useSelector( +const InputsRow = ({ addressType, portType, address, port, isSwitchOn }: InputsRowProps) => { + const { isAdvanced, beaconPort, vcPort, isNodeSwitchOn } = useSelector( (state: RootState) => state.pairDevice, ) const dispatch = useDispatch() @@ -38,16 +32,20 @@ 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 } }) } + const isValidRow = () => { + if (isAdvanced) { + return isAddressValid(address) && isPortValid(port) + } else { + return isAddressValid(address) && isPortValid(vcPort) && isPortValid(beaconPort) + } + } + return ( - +
@@ -80,26 +78,23 @@ const InputsRow = ({ - {isAdvanced ? ( - - ) : ( - - - - - )} -
- - } + {isAdvanced === false && } + {isAdvanced === false && } +
+ +
- +
) } 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 ( - + {portType} Port diff --git a/src/pages/PairDevice/ConnectViaIP/index.module.css b/src/pages/PairDevice/ConnectViaIP/index.module.css new file mode 100644 index 00000000..468d53ac --- /dev/null +++ b/src/pages/PairDevice/ConnectViaIP/index.module.css @@ -0,0 +1,42 @@ +.row-container { + display: flex; + gap: 8px; +} + +@media (max-width: 1150px) and (min-width: 1000px) { + .row-container { + display: block; + } + + .row-container > * { + margin-bottom: 8px; + } + + .row-container > *:last-child { + margin-bottom: 0; + } + + .rows-container { + display: flex; + gap: 10px; + } +} + +@media (max-width: 500px) { + .row-container { + display: block; + } + + .row-container > * { + margin-bottom: 8px; + } + + .row-container > *:last-child { + margin-bottom: 0; + } + + .rows-container { + display: flex; + gap: 10px; + } +} 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 ( @@ -99,7 +122,7 @@ const PairDevice = () => {