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

Merge pull request #37 from nimbus-gui/rd.connect-via-ip-responsive 

Connect via ip responsive
This commit is contained in:
Radoslav Dimchev 2024-01-24 20:44:14 +02:00 committed by GitHub
parent a1287ce577 285cbb89f4
commit 5078db3a59
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 139 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
index.html
View File

@ -3,25 +3,27 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Nimbus GUI</title>
<link
rel="preload"
href="./Inter-font/Inter-Regular.ttf"
as="font"
type="font/ttf"
crossOrigin=""
/>
<link
rel="preload"
href="./Inter-font/Inter-Bold.ttf"
as="font"
type="font/ttf"
crossOrigin=""
/>
rel="preload"
href="./Inter-font/Inter-Regular.ttf"
as="font"
type="font/ttf"
crossorigin=""
/>
<link
rel="preload"
href="./Inter-font/Inter-Bold.ttf"
as="font"
type="font/ttf"
crossorigin=""
/>
</head>
<body>
<script>window.global = window;</script>
<script>
window.global = window
</script>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>

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

@ -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 = () => {
</Button>
</XStack>
{isAdvanced ? (
<YStack space={'$3'}>
<YStack space={'$3'} className={styles['rows-container']}>
<InputsRow
addressType={VALIDATOR_CLIENT}
portType={VC}
address={vcAddress}
port={vcPort}
isAdvanced={isAdvanced}
isSwitchOn={isVcSwitchOn}
isChecked={isVcChecked}
/>
<InputsRow
addressType={BEACON}
portType={BEACON}
address={beaconAddress}
port={beaconPort}
isAdvanced={isAdvanced}
isSwitchOn={isBeaconSwitchOn}
isChecked={isBeaconChecked}
/>
</YStack>
) : (

36
src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx
View File

@ -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<typeof InputsRow>
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,
},
}

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

@ -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 (
<XStack space={'$3'}>
<div className={styles['row-container']}>
<YStack space={'$2'} flexBasis={0} flexGrow={2}>
<YStack>
<Text size={13} color={'#647084'} weight={'semibold'}>
@ -80,26 +78,23 @@ const InputsRow = ({
</Text>
<Input value={address} onChangeText={onAddressChange} />
</YStack>
{isAdvanced ? (
<PortInput port={port} portType={portType} />
) : (
<XStack space={'$3'} flexGrow={4} flexBasis={0}>
<PortInput port={vcPort} portType={VC} />
<PortInput port={beaconPort} portType={BEACON} />
</XStack>
)}
<div style={{ display: 'flex', alignItems: 'end', height: '100%' }}>
<Stack height={'46%'} flexBasis={0} flexGrow={0.5}>
<Checkbox
id="AddressAndPortInputs"
variant="outline"
selected={isAdvanced ? isChecked : isNodeChecked}
onCheckedChange={onCheckboxChange}
size={20}
{isAdvanced === true && <PortInput port={port} portType={portType} />}
{isAdvanced === false && <PortInput port={vcPort} portType={VC} />}
{isAdvanced === false && <PortInput port={beaconPort} portType={BEACON} />}
<div style={{ display: 'flex', alignItems: 'end', marginBottom: '11px' }}>
<Stack flexBasis={0} flexGrow={0.5}>
<CheckIcon
size={16}
style={{
borderRadius: '50%',
backgroundColor: isValidRow() ? '#2A4AF5' : '#1B273D1A',
padding: '1px',
}}
color={'white'}
/>
</Stack>
</div>
</XStack>
</div>
)
}

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

@ -19,7 +19,7 @@ const PortInput = ({ portType, port }: PortInputProps) => {
}
return (
<YStack space={'$2'} flexBasis={0} flexGrow={3}>
<YStack space={'$2'} flexBasis={0} flexGrow={2}>
<Text size={13} color={'#647084'} weight={'semibold'}>
{portType} Port
</Text>

42
src/pages/PairDevice/ConnectViaIP/index.module.css Normal file
View File

@ -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;
}
}

25
src/pages/PairDevice/PairDevice.tsx
View File

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

20
src/redux/PairDevice/slice.ts
View File

@ -3,6 +3,7 @@ import { createSlice } from '@reduxjs/toolkit'
import { BEACON, BEACON_PORT, DEFAULT_ADDRESS, VALIDATOR_CLIENT, VC_PORT } from '../../constants'
type PairDeviceStateType = {
isAdvanced: boolean
beaconPort: string
vcPort: string
nodeAddress: string
@ -11,12 +12,10 @@ type PairDeviceStateType = {
isNodeSwitchOn: boolean
isBeaconSwitchOn: boolean
isVcSwitchOn: boolean
isNodeChecked: boolean
isBeaconChecked: boolean
isVcChecked: boolean
}
const initialState: PairDeviceStateType = {
isAdvanced: false,
beaconPort: BEACON_PORT,
vcPort: VC_PORT,
nodeAddress: DEFAULT_ADDRESS,
@ -25,15 +24,15 @@ const initialState: PairDeviceStateType = {
isNodeSwitchOn: true,
isBeaconSwitchOn: true,
isVcSwitchOn: true,
isNodeChecked: true,
isBeaconChecked: true,
isVcChecked: true,
}
const pairDeviceSlice = createSlice({
name: 'pairDevice',
initialState,
reducers: {
setIsAdvanced: (state, action) => {
state.isAdvanced = action.payload
},
setPort: (state, action) => {
if (action.payload.portType === BEACON) {
state.beaconPort = action.payload.value
@ -59,15 +58,6 @@ const pairDeviceSlice = createSlice({
state.isNodeSwitchOn = action.payload.value
}
},
setIsChecked: (state, action) => {
if (action.payload.checkType === BEACON) {
state.isBeaconChecked = action.payload.value
} else if (action.payload.checkType === VALIDATOR_CLIENT) {
state.isVcChecked = action.payload.value
} else {
state.isNodeChecked = action.payload.value
}
},
},
})

12
src/utilities.ts
View File

@ -69,6 +69,18 @@ export const getHeightPercentages = (amountOfElements: number) => {
return `${percentages}%`
}
export const isAddressValid = (address: string) => {
return address.length > 0
}
export const isPortValid = (port: string) => {
if (port.length === 0) {
return false
}
return !isNaN(Number(port))
}
export const copyFunction = (text: string) => {
navigator.clipboard.writeText(text)
}