From adbf3b59e23d4db19c9f9df362c7ff1a925189e6 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 18 Dec 2023 22:02:46 +0200 Subject: [PATCH 01/77] feat: add state for is connecting via IP --- src/pages/PairDevice/PairDevice.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index d29d9af1..a6857fc3 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -16,6 +16,7 @@ import Icon from '../../components/General/Icon' const PairDevice = () => { const [isAwaitingPairing, setIsAwaitingPairing] = useState(false) const navigate = useNavigate() + const [isConnectingViaIp, setIsConnectingViaIp] = useState(false) const isPaired = false const isPairing = false From 7ef5e5e68876751bba724aa40863c801197d2594 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 18 Dec 2023 22:03:17 +0200 Subject: [PATCH 02/77] fix: change handler for connect via IP button --- src/pages/PairDevice/PairDevice.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index a6857fc3..6507fe12 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -2,7 +2,6 @@ import { NodeIcon } from '@status-im/icons' import { Separator, XStack, YStack } from 'tamagui' import { useState } from 'react' import { Button, Text } from '@status-im/components' -import { useNavigate } from 'react-router-dom' import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import SyncStatus from './SyncStatus' @@ -15,7 +14,6 @@ import Icon from '../../components/General/Icon' const PairDevice = () => { const [isAwaitingPairing, setIsAwaitingPairing] = useState(false) - const navigate = useNavigate() const [isConnectingViaIp, setIsConnectingViaIp] = useState(false) const isPaired = false const isPairing = false @@ -25,7 +23,7 @@ const PairDevice = () => { } const connectViaIpHandler = () => { - navigate('/connect-device') + setIsConnectingViaIp(true) } return ( From 2199fe28e411b2eb081900a10606e8d7f079381d Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 18 Dec 2023 22:05:46 +0200 Subject: [PATCH 03/77] feat: add button for pair with id --- src/pages/PairDevice/PairDevice.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index 6507fe12..fba9bf76 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -57,6 +57,9 @@ const PairDevice = () => { > Connect via IP + From e181e1a8732ba0bfb348476c2e823525eb4d87f3 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 18 Dec 2023 22:07:02 +0200 Subject: [PATCH 04/77] feat: show different button for state --- src/pages/PairDevice/PairDevice.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index fba9bf76..42fed63a 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -1,4 +1,4 @@ -import { NodeIcon } from '@status-im/icons' +import { NodeIcon, CompleteIdIcon } from '@status-im/icons' import { Separator, XStack, YStack } from 'tamagui' import { useState } from 'react' import { Button, Text } from '@status-im/components' @@ -50,16 +50,19 @@ const PairDevice = () => { Advanced Settings - + {isConnectingViaIp ? ( + ) : ( + + )} From 90e539b4d75e9374259160d28a9573bab65ff4ae Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 18 Dec 2023 22:09:24 +0200 Subject: [PATCH 05/77] feat: update handler to change two way --- src/pages/PairDevice/PairDevice.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index 42fed63a..710ef2a4 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -22,8 +22,8 @@ const PairDevice = () => { setIsAwaitingPairing(result) } - const connectViaIpHandler = () => { - setIsConnectingViaIp(true) + const connectAndPairHandler = () => { + setIsConnectingViaIp(state => !state) } return ( @@ -51,14 +51,18 @@ const PairDevice = () => { {isConnectingViaIp ? ( - ) : ( From 5480990e7a3a095819566f1b1c04af6404792f66 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 18 Dec 2023 22:38:10 +0200 Subject: [PATCH 06/77] fix: add icon from status instead of image --- src/pages/PairDevice/PairDevice.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index 710ef2a4..e366a7ac 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -1,4 +1,4 @@ -import { NodeIcon, CompleteIdIcon } from '@status-im/icons' +import { NodeIcon, CompleteIdIcon, ConnectionIcon } from '@status-im/icons' import { Separator, XStack, YStack } from 'tamagui' import { useState } from 'react' import { Button, Text } from '@status-im/components' @@ -10,7 +10,6 @@ import PairedSuccessfully from './PairedSuccessfully' import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar' import GenerateId from './GenerateId' import Header from '../../components/General/Header' -import Icon from '../../components/General/Icon' const PairDevice = () => { const [isAwaitingPairing, setIsAwaitingPairing] = useState(false) @@ -52,7 +51,7 @@ const PairDevice = () => { {isConnectingViaIp ? ( ) : ( - ) : ( - - )} + From 1175e1f4af424321a3d8429c6e126f9177e5a65b Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 19 Dec 2023 23:03:49 +0200 Subject: [PATCH 09/77] feat: remove url for pair existing instance --- src/App.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 21cbe7af..75fa5b92 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,7 +17,6 @@ import PinnedNotification from './components/General/PinnedNottification' import CreateLocalNodePage from './pages/CreateLocalNodePage/CreateLocalNodePage' import ValidatorOnboarding from './pages/ValidatorOnboarding/ValidatorOnboarding' import Dashboard from './pages/Dashboard/Dashboard' -import ConnectExistingInstance from './pages/ConnectExistingInstance/ConnectExistingInstance' import ValidatorManagement from './pages/ValidatorManagement/ValidatorManagement' import { ethereumRopsten, wcV2InitOptions, apiKey } from './constants' import './App.css' @@ -59,10 +58,6 @@ const router = createBrowserRouter([ path: '/pair-device', element: , }, - { - path: '/pair-existing-instance', - element: , - }, { path: '/create-local-node', element: }, { path: '/validator-onboarding', element: }, { path: '/dashboard', element: }, From 328bc5fce7486b13594d7e0328d70a213b3850c2 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 07:57:15 +0200 Subject: [PATCH 10/77] feat: render existing instance in pair device --- src/pages/PairDevice/PairDevice.tsx | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index 34ecbeb1..d543a4d7 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -10,6 +10,7 @@ import PairedSuccessfully from './PairedSuccessfully' import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar' import GenerateId from './GenerateId' import Header from '../../components/General/Header' +import ConnectExistingInstance from '../ConnectExistingInstance/ConnectExistingInstance' const PairDevice = () => { const [isAwaitingPairing, setIsAwaitingPairing] = useState(false) @@ -33,13 +34,23 @@ const PairDevice = () => { title="Connect to existing Nimbus Instance" subtitle="Pair your existing device to the Nimbus Node Manager" /> - {isPaired ? : } - {isPaired === false && ( - + {isConnectingViaIp ? ( + + ) : ( + <> + {isPaired ? ( + + ) : ( + + )} + {isPaired === false && ( + + )} + )} {isPaired === false && ( From b3c7deb54f105ec87c07c5f7c36b981b90af3354 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 08:00:21 +0200 Subject: [PATCH 11/77] feat: move components to pair device folder --- .../ConnectExistingInstance.tsx | 83 ------------------- .../BeaconAddress.stories.tsx | 0 .../BeaconAddress.tsx | 0 .../ClientAddressRow.stories.tsx | 0 .../ClientAddressRow.tsx | 0 .../ConnectExistingInctance.stories.tsx | 2 +- .../PairDevice/ConnectExistingInstance.tsx | 51 ++++++++++++ src/pages/PairDevice/PairDevice.tsx | 2 +- 8 files changed, 53 insertions(+), 85 deletions(-) delete mode 100644 src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx rename src/pages/{ConnectExistingInstance => PairDevice}/BeaconAddress.stories.tsx (100%) rename src/pages/{ConnectExistingInstance => PairDevice}/BeaconAddress.tsx (100%) rename src/pages/{ConnectExistingInstance => PairDevice}/ClientAddressRow.stories.tsx (100%) rename src/pages/{ConnectExistingInstance => PairDevice}/ClientAddressRow.tsx (100%) rename src/pages/{ConnectExistingInstance => PairDevice}/ConnectExistingInctance.stories.tsx (100%) create mode 100644 src/pages/PairDevice/ConnectExistingInstance.tsx diff --git a/src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx b/src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx deleted file mode 100644 index bb4ff43e..00000000 --- a/src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import { Separator, XStack, YStack } from 'tamagui' -import { useState } from 'react' -import { Button, Input, Text } from '@status-im/components' -import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' - -import Titles from '../../components/General/Titles' - -import { NodeIcon, SettingsIcon, CompleteIdIcon, ClearIcon } from '@status-im/icons' -import Header from '../../components/General/Header' - -import ClientAddressRow from './ClientAddressRow' -import BeaconAddress from './BeaconAddress' - -const ConnectExistingInstance = () => { - const [encryptedPassword, setEncryptedPassword] = useState('') - - const changeEncryptedPasswordHandler = (value: string) => { - setEncryptedPassword(value) - } - - return ( - - -
- - - - Connect via IP - - - - - - - - - API Token - - setEncryptedPassword('')} - style={{ cursor: 'pointer' }} - /> - } - value={encryptedPassword} - onChangeText={changeEncryptedPasswordHandler} - /> - - - - Advanced Settings - - - - - - - - - - - ) -} - -export default ConnectExistingInstance diff --git a/src/pages/ConnectExistingInstance/BeaconAddress.stories.tsx b/src/pages/PairDevice/BeaconAddress.stories.tsx similarity index 100% rename from src/pages/ConnectExistingInstance/BeaconAddress.stories.tsx rename to src/pages/PairDevice/BeaconAddress.stories.tsx diff --git a/src/pages/ConnectExistingInstance/BeaconAddress.tsx b/src/pages/PairDevice/BeaconAddress.tsx similarity index 100% rename from src/pages/ConnectExistingInstance/BeaconAddress.tsx rename to src/pages/PairDevice/BeaconAddress.tsx diff --git a/src/pages/ConnectExistingInstance/ClientAddressRow.stories.tsx b/src/pages/PairDevice/ClientAddressRow.stories.tsx similarity index 100% rename from src/pages/ConnectExistingInstance/ClientAddressRow.stories.tsx rename to src/pages/PairDevice/ClientAddressRow.stories.tsx diff --git a/src/pages/ConnectExistingInstance/ClientAddressRow.tsx b/src/pages/PairDevice/ClientAddressRow.tsx similarity index 100% rename from src/pages/ConnectExistingInstance/ClientAddressRow.tsx rename to src/pages/PairDevice/ClientAddressRow.tsx diff --git a/src/pages/ConnectExistingInstance/ConnectExistingInctance.stories.tsx b/src/pages/PairDevice/ConnectExistingInctance.stories.tsx similarity index 100% rename from src/pages/ConnectExistingInstance/ConnectExistingInctance.stories.tsx rename to src/pages/PairDevice/ConnectExistingInctance.stories.tsx index 2f22b83b..3f8d2b64 100644 --- a/src/pages/ConnectExistingInstance/ConnectExistingInctance.stories.tsx +++ b/src/pages/PairDevice/ConnectExistingInctance.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react' +import { withRouter } from 'storybook-addon-react-router-v6' import ConnectExistingInstance from './ConnectExistingInstance' -import { withRouter } from 'storybook-addon-react-router-v6' const meta = { title: 'Connect-Device/ConnectExistingInstance', diff --git a/src/pages/PairDevice/ConnectExistingInstance.tsx b/src/pages/PairDevice/ConnectExistingInstance.tsx new file mode 100644 index 00000000..58b44246 --- /dev/null +++ b/src/pages/PairDevice/ConnectExistingInstance.tsx @@ -0,0 +1,51 @@ +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 ClientAddressRow from './ClientAddressRow' +import BeaconAddress from './BeaconAddress' + +const ConnectExistingInstance = () => { + const [encryptedPassword, setEncryptedPassword] = useState('') + + const changeEncryptedPasswordHandler = (value: string) => { + setEncryptedPassword(value) + } + + return ( + + + + Connect via IP + + + + + + + + + API Token + + setEncryptedPassword('')} + style={{ cursor: 'pointer' }} + /> + } + value={encryptedPassword} + onChangeText={changeEncryptedPasswordHandler} + /> + + + ) +} + +export default ConnectExistingInstance diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index d543a4d7..6f108c95 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -10,7 +10,7 @@ import PairedSuccessfully from './PairedSuccessfully' import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar' import GenerateId from './GenerateId' import Header from '../../components/General/Header' -import ConnectExistingInstance from '../ConnectExistingInstance/ConnectExistingInstance' +import ConnectExistingInstance from './ConnectExistingInstance' const PairDevice = () => { const [isAwaitingPairing, setIsAwaitingPairing] = useState(false) From 05ba52e3bfe0348c84ad6a5c00dd6a353ad674db Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 08:01:24 +0200 Subject: [PATCH 12/77] fix: imports order for new pair device components --- src/pages/PairDevice/BeaconAddress.stories.tsx | 2 +- src/pages/PairDevice/ClientAddressRow.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/PairDevice/BeaconAddress.stories.tsx b/src/pages/PairDevice/BeaconAddress.stories.tsx index a6dae199..fecb899e 100644 --- a/src/pages/PairDevice/BeaconAddress.stories.tsx +++ b/src/pages/PairDevice/BeaconAddress.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react' +import { withRouter } from 'storybook-addon-react-router-v6' import BeaconAddress from './BeaconAddress' -import { withRouter } from 'storybook-addon-react-router-v6' const meta = { title: 'Connect-Device/BeaconAddress', diff --git a/src/pages/PairDevice/ClientAddressRow.stories.tsx b/src/pages/PairDevice/ClientAddressRow.stories.tsx index c6eff0ff..61e0298f 100644 --- a/src/pages/PairDevice/ClientAddressRow.stories.tsx +++ b/src/pages/PairDevice/ClientAddressRow.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react' +import { withRouter } from 'storybook-addon-react-router-v6' import ClientAddressRow from './ClientAddressRow' -import { withRouter } from 'storybook-addon-react-router-v6' const meta = { title: 'Connect-Device/ClientAddressRow', From 58d5aa449fe35173f23e366eb4757bd38747b514 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 08:04:35 +0200 Subject: [PATCH 13/77] feat: rename connect existing instance to connect via ip --- ...stingInctance.stories.tsx => ConnectViaIP.stories.tsx} | 8 ++++---- .../{ConnectExistingInstance.tsx => ConnectViaIP.tsx} | 4 ++-- src/pages/PairDevice/PairDevice.tsx | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) rename src/pages/PairDevice/{ConnectExistingInctance.stories.tsx => ConnectViaIP.stories.tsx} (61%) rename src/pages/PairDevice/{ConnectExistingInstance.tsx => ConnectViaIP.tsx} (94%) diff --git a/src/pages/PairDevice/ConnectExistingInctance.stories.tsx b/src/pages/PairDevice/ConnectViaIP.stories.tsx similarity index 61% rename from src/pages/PairDevice/ConnectExistingInctance.stories.tsx rename to src/pages/PairDevice/ConnectViaIP.stories.tsx index 3f8d2b64..4a8e306d 100644 --- a/src/pages/PairDevice/ConnectExistingInctance.stories.tsx +++ b/src/pages/PairDevice/ConnectViaIP.stories.tsx @@ -1,17 +1,17 @@ import type { Meta, StoryObj } from '@storybook/react' import { withRouter } from 'storybook-addon-react-router-v6' -import ConnectExistingInstance from './ConnectExistingInstance' +import ConnectViaIP from './ConnectViaIP' const meta = { - title: 'Connect-Device/ConnectExistingInstance', - component: ConnectExistingInstance, + title: 'Connect-Device/ConnectViaIP', + component: ConnectViaIP, parameters: { layout: 'centered', }, tags: ['autodocs'], decorators: [withRouter], -} satisfies Meta +} satisfies Meta export default meta type Story = StoryObj diff --git a/src/pages/PairDevice/ConnectExistingInstance.tsx b/src/pages/PairDevice/ConnectViaIP.tsx similarity index 94% rename from src/pages/PairDevice/ConnectExistingInstance.tsx rename to src/pages/PairDevice/ConnectViaIP.tsx index 58b44246..936f2436 100644 --- a/src/pages/PairDevice/ConnectExistingInstance.tsx +++ b/src/pages/PairDevice/ConnectViaIP.tsx @@ -6,7 +6,7 @@ import { SettingsIcon, ClearIcon } from '@status-im/icons' import ClientAddressRow from './ClientAddressRow' import BeaconAddress from './BeaconAddress' -const ConnectExistingInstance = () => { +const ConnectViaIP = () => { const [encryptedPassword, setEncryptedPassword] = useState('') const changeEncryptedPasswordHandler = (value: string) => { @@ -48,4 +48,4 @@ const ConnectExistingInstance = () => { ) } -export default ConnectExistingInstance +export default ConnectViaIP diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index 6f108c95..947ca24e 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -10,7 +10,7 @@ import PairedSuccessfully from './PairedSuccessfully' import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar' import GenerateId from './GenerateId' import Header from '../../components/General/Header' -import ConnectExistingInstance from './ConnectExistingInstance' +import ConnectViaIP from './ConnectViaIP' const PairDevice = () => { const [isAwaitingPairing, setIsAwaitingPairing] = useState(false) @@ -35,7 +35,7 @@ const PairDevice = () => { subtitle="Pair your existing device to the Nimbus Node Manager" /> {isConnectingViaIp ? ( - + ) : ( <> {isPaired ? ( From 38164213ab5f40cf0803428d966036791d08d57b Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 08:42:03 +0200 Subject: [PATCH 14/77] feat: move components to specific subfolder --- .../PairDevice/{ => ConnectViaIP}/BeaconAddress.stories.tsx | 0 src/pages/PairDevice/{ => ConnectViaIP}/BeaconAddress.tsx | 0 .../PairDevice/{ => ConnectViaIP}/ClientAddressRow.stories.tsx | 0 src/pages/PairDevice/{ => ConnectViaIP}/ClientAddressRow.tsx | 0 .../PairDevice/{ => ConnectViaIP}/ConnectViaIP.stories.tsx | 0 src/pages/PairDevice/{ => ConnectViaIP}/ConnectViaIP.tsx | 0 src/pages/PairDevice/PairDevice.tsx | 2 +- 7 files changed, 1 insertion(+), 1 deletion(-) rename src/pages/PairDevice/{ => ConnectViaIP}/BeaconAddress.stories.tsx (100%) rename src/pages/PairDevice/{ => ConnectViaIP}/BeaconAddress.tsx (100%) rename src/pages/PairDevice/{ => ConnectViaIP}/ClientAddressRow.stories.tsx (100%) rename src/pages/PairDevice/{ => ConnectViaIP}/ClientAddressRow.tsx (100%) rename src/pages/PairDevice/{ => ConnectViaIP}/ConnectViaIP.stories.tsx (100%) rename src/pages/PairDevice/{ => ConnectViaIP}/ConnectViaIP.tsx (100%) diff --git a/src/pages/PairDevice/BeaconAddress.stories.tsx b/src/pages/PairDevice/ConnectViaIP/BeaconAddress.stories.tsx similarity index 100% rename from src/pages/PairDevice/BeaconAddress.stories.tsx rename to src/pages/PairDevice/ConnectViaIP/BeaconAddress.stories.tsx diff --git a/src/pages/PairDevice/BeaconAddress.tsx b/src/pages/PairDevice/ConnectViaIP/BeaconAddress.tsx similarity index 100% rename from src/pages/PairDevice/BeaconAddress.tsx rename to src/pages/PairDevice/ConnectViaIP/BeaconAddress.tsx diff --git a/src/pages/PairDevice/ClientAddressRow.stories.tsx b/src/pages/PairDevice/ConnectViaIP/ClientAddressRow.stories.tsx similarity index 100% rename from src/pages/PairDevice/ClientAddressRow.stories.tsx rename to src/pages/PairDevice/ConnectViaIP/ClientAddressRow.stories.tsx diff --git a/src/pages/PairDevice/ClientAddressRow.tsx b/src/pages/PairDevice/ConnectViaIP/ClientAddressRow.tsx similarity index 100% rename from src/pages/PairDevice/ClientAddressRow.tsx rename to src/pages/PairDevice/ConnectViaIP/ClientAddressRow.tsx diff --git a/src/pages/PairDevice/ConnectViaIP.stories.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.stories.tsx similarity index 100% rename from src/pages/PairDevice/ConnectViaIP.stories.tsx rename to src/pages/PairDevice/ConnectViaIP/ConnectViaIP.stories.tsx diff --git a/src/pages/PairDevice/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx similarity index 100% rename from src/pages/PairDevice/ConnectViaIP.tsx rename to src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index 947ca24e..4f48fe4b 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -10,7 +10,7 @@ import PairedSuccessfully from './PairedSuccessfully' import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar' import GenerateId from './GenerateId' import Header from '../../components/General/Header' -import ConnectViaIP from './ConnectViaIP' +import ConnectViaIP from './ConnectViaIP/ConnectViaIP' const PairDevice = () => { const [isAwaitingPairing, setIsAwaitingPairing] = useState(false) From fbabf9ea9337b41c698cd9f08d341640fd1f118e Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 08:43:06 +0200 Subject: [PATCH 15/77] fix: stories for pair device --- src/pages/PairDevice/ConnectViaIP/BeaconAddress.stories.tsx | 2 +- src/pages/PairDevice/ConnectViaIP/ClientAddressRow.stories.tsx | 2 +- src/pages/PairDevice/ConnectViaIP/ConnectViaIP.stories.tsx | 2 +- src/pages/PairDevice/PairDevice.stories.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/BeaconAddress.stories.tsx b/src/pages/PairDevice/ConnectViaIP/BeaconAddress.stories.tsx index fecb899e..2173c0c8 100644 --- a/src/pages/PairDevice/ConnectViaIP/BeaconAddress.stories.tsx +++ b/src/pages/PairDevice/ConnectViaIP/BeaconAddress.stories.tsx @@ -4,7 +4,7 @@ import { withRouter } from 'storybook-addon-react-router-v6' import BeaconAddress from './BeaconAddress' const meta = { - title: 'Connect-Device/BeaconAddress', + title: 'Pair Device/BeaconAddress', component: BeaconAddress, parameters: { layout: 'centered', diff --git a/src/pages/PairDevice/ConnectViaIP/ClientAddressRow.stories.tsx b/src/pages/PairDevice/ConnectViaIP/ClientAddressRow.stories.tsx index 61e0298f..93ddc432 100644 --- a/src/pages/PairDevice/ConnectViaIP/ClientAddressRow.stories.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ClientAddressRow.stories.tsx @@ -4,7 +4,7 @@ import { withRouter } from 'storybook-addon-react-router-v6' import ClientAddressRow from './ClientAddressRow' const meta = { - title: 'Connect-Device/ClientAddressRow', + title: 'Pair Device/ClientAddressRow', component: ClientAddressRow, parameters: { layout: 'centered', diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.stories.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.stories.tsx index 4a8e306d..0f183bf5 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.stories.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.stories.tsx @@ -4,7 +4,7 @@ import { withRouter } from 'storybook-addon-react-router-v6' import ConnectViaIP from './ConnectViaIP' const meta = { - title: 'Connect-Device/ConnectViaIP', + title: 'Pair Device/ConnectViaIP', component: ConnectViaIP, parameters: { layout: 'centered', diff --git a/src/pages/PairDevice/PairDevice.stories.ts b/src/pages/PairDevice/PairDevice.stories.ts index ad58a98a..1bb8e39a 100644 --- a/src/pages/PairDevice/PairDevice.stories.ts +++ b/src/pages/PairDevice/PairDevice.stories.ts @@ -4,7 +4,7 @@ import { withRouter } from 'storybook-addon-react-router-v6' import PairDevice from './PairDevice' const meta = { - title: 'Connect-Device/PairDevice', + title: 'Pages/PairDevice', component: PairDevice, parameters: { layout: 'centered', From b719f4151a8631d0b0ef7fa3ca82abb9f48578e7 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 08:51:03 +0200 Subject: [PATCH 16/77] feat: make beacon address reusable component --- .../PairDevice/ConnectViaIP/BeaconAddress.tsx | 49 ++++++++----------- 1 file changed, 20 insertions(+), 29 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/BeaconAddress.tsx b/src/pages/PairDevice/ConnectViaIP/BeaconAddress.tsx index 07b793fe..099f388f 100644 --- a/src/pages/PairDevice/ConnectViaIP/BeaconAddress.tsx +++ b/src/pages/PairDevice/ConnectViaIP/BeaconAddress.tsx @@ -2,11 +2,16 @@ import { Checkbox, Input, Text } from '@status-im/components' import { useState } from 'react' import { Stack, Switch, XStack, YStack } from 'tamagui' -const BeaconAddress = () => { - const [isBeaconSwitchOn, setIsBeaconSwitchOn] = useState(false) - const [inputAdress, setInputAdress] = useState('') - const [vcPort, setVcPort] = useState('') - const [isClientAddressChecked, setIsClientAddressChecked] = useState(false) +type BeaconAddressProps = { + addressType: string + portType: string +} + +const BeaconAddress = ({ addressType, portType }: BeaconAddressProps) => { + const [isSwitchOn, setIsSwitchOn] = useState(false) + const [address, setAddress] = useState('') + const [port, setPort] = useState('') + const [isChecked, setIsChecked] = useState(false) return ( @@ -14,20 +19,18 @@ const BeaconAddress = () => { - {' '} - Protocol{' '} + Protocol - {' '} (HTTP/HTTPS) setIsBeaconSwitchOn(prev => !prev)} + style={isSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }} + checked={isSwitchOn} + onCheckedChange={() => setIsSwitchOn(prev => !prev)} > { - Beacon Address + {addressType} Address - { - setInputAdress(e) - }} - /> + setAddress(e)} /> - VC Port + {portType} Port - { - setVcPort(e) - }} - /> + setPort(e)} /> { setIsClientAddressChecked(prev => !prev)} + selected={isChecked} + onCheckedChange={() => setIsChecked(prev => !prev)} size={20} /> From 5e2258c2aa721b753ee6bd3f1af054481b80ec88 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 08:55:06 +0200 Subject: [PATCH 17/77] fix: delete client address row component and story --- .../ConnectViaIP/ClientAddressRow.stories.tsx | 21 ----- .../ConnectViaIP/ClientAddressRow.tsx | 87 ------------------- 2 files changed, 108 deletions(-) delete mode 100644 src/pages/PairDevice/ConnectViaIP/ClientAddressRow.stories.tsx delete mode 100644 src/pages/PairDevice/ConnectViaIP/ClientAddressRow.tsx diff --git a/src/pages/PairDevice/ConnectViaIP/ClientAddressRow.stories.tsx b/src/pages/PairDevice/ConnectViaIP/ClientAddressRow.stories.tsx deleted file mode 100644 index 93ddc432..00000000 --- a/src/pages/PairDevice/ConnectViaIP/ClientAddressRow.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' -import { withRouter } from 'storybook-addon-react-router-v6' - -import ClientAddressRow from './ClientAddressRow' - -const meta = { - title: 'Pair Device/ClientAddressRow', - component: ClientAddressRow, - parameters: { - layout: 'centered', - }, - tags: ['autodocs'], - decorators: [withRouter], -} satisfies Meta - -export default meta -type Story = StoryObj - -export const Page: Story = { - args: {}, -} diff --git a/src/pages/PairDevice/ConnectViaIP/ClientAddressRow.tsx b/src/pages/PairDevice/ConnectViaIP/ClientAddressRow.tsx deleted file mode 100644 index 5fec41d0..00000000 --- a/src/pages/PairDevice/ConnectViaIP/ClientAddressRow.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import { Checkbox, Input, Text } from '@status-im/components' -import { useState } from 'react' -import { Stack, Switch, XStack, YStack } from 'tamagui' - -const ClientAddressRow = () => { - const [isBeaconSwitchOn, setIsBeaconSwitchOn] = useState(false) - const [inputAdress, setInputAdress] = useState('') - const [vcPort, setVcPort] = useState('') - const [isClientAddressChecked, setIsClientAddressChecked] = useState(false) - - return ( - - - - - - {' '} - Protocol{' '} - - - {' '} - (HTTP/HTTPS) - - - setIsBeaconSwitchOn(prev => !prev)} - > - - - - - - Validator Client Address - - { - setInputAdress(e) - }} - /> - - - - - VC Port - - { - setVcPort(e) - }} - /> - - - setIsClientAddressChecked(prev => !prev)} - size={20} - /> - - - - - ) -} - -export default ClientAddressRow From d436adc71291246b4874530d4f9af1f1b4c04e44 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 08:55:24 +0200 Subject: [PATCH 18/77] feat: add valid data for reusable component --- src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx index 936f2436..986c9dd9 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx @@ -3,7 +3,6 @@ import { useState } from 'react' import { Button, Input, Text } from '@status-im/components' import { SettingsIcon, ClearIcon } from '@status-im/icons' -import ClientAddressRow from './ClientAddressRow' import BeaconAddress from './BeaconAddress' const ConnectViaIP = () => { @@ -23,8 +22,8 @@ const ConnectViaIP = () => { Advanced - - + + From aa351bb9dae361dc87b230f6aa0bd317c60a9cb8 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 08:59:14 +0200 Subject: [PATCH 19/77] fix: rename beacon component and story --- ...dress.stories.tsx => AddressAndPortInputs.stories.tsx} | 8 ++++---- .../{BeaconAddress.tsx => AddressAndPortInputs.tsx} | 6 +++--- src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx | 6 +++--- 3 files changed, 10 insertions(+), 10 deletions(-) rename src/pages/PairDevice/ConnectViaIP/{BeaconAddress.stories.tsx => AddressAndPortInputs.stories.tsx} (64%) rename src/pages/PairDevice/ConnectViaIP/{BeaconAddress.tsx => AddressAndPortInputs.tsx} (93%) diff --git a/src/pages/PairDevice/ConnectViaIP/BeaconAddress.stories.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.stories.tsx similarity index 64% rename from src/pages/PairDevice/ConnectViaIP/BeaconAddress.stories.tsx rename to src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.stories.tsx index 2173c0c8..864e0790 100644 --- a/src/pages/PairDevice/ConnectViaIP/BeaconAddress.stories.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.stories.tsx @@ -1,17 +1,17 @@ import type { Meta, StoryObj } from '@storybook/react' import { withRouter } from 'storybook-addon-react-router-v6' -import BeaconAddress from './BeaconAddress' +import AddressAndPortInputs from './AddressAndPortInputs' const meta = { - title: 'Pair Device/BeaconAddress', - component: BeaconAddress, + title: 'Pair Device/AddressAndPortInputs', + component: AddressAndPortInputs, parameters: { layout: 'centered', }, tags: ['autodocs'], decorators: [withRouter], -} satisfies Meta +} satisfies Meta export default meta type Story = StoryObj diff --git a/src/pages/PairDevice/ConnectViaIP/BeaconAddress.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx similarity index 93% rename from src/pages/PairDevice/ConnectViaIP/BeaconAddress.tsx rename to src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx index 099f388f..7ffa1c2e 100644 --- a/src/pages/PairDevice/ConnectViaIP/BeaconAddress.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx @@ -2,12 +2,12 @@ import { Checkbox, Input, Text } from '@status-im/components' import { useState } from 'react' import { Stack, Switch, XStack, YStack } from 'tamagui' -type BeaconAddressProps = { +type AddressAndPortInputsProps = { addressType: string portType: string } -const BeaconAddress = ({ addressType, portType }: BeaconAddressProps) => { +const AddressAndPortInputs = ({ addressType, portType }: AddressAndPortInputsProps) => { const [isSwitchOn, setIsSwitchOn] = useState(false) const [address, setAddress] = useState('') const [port, setPort] = useState('') @@ -76,4 +76,4 @@ const BeaconAddress = ({ addressType, portType }: BeaconAddressProps) => { ) } -export default BeaconAddress +export default AddressAndPortInputs diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx index 986c9dd9..cf38fbca 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx @@ -3,7 +3,7 @@ import { useState } from 'react' import { Button, Input, Text } from '@status-im/components' import { SettingsIcon, ClearIcon } from '@status-im/icons' -import BeaconAddress from './BeaconAddress' +import AddressPortInputs from './AddressAndPortInputs' const ConnectViaIP = () => { const [encryptedPassword, setEncryptedPassword] = useState('') @@ -22,8 +22,8 @@ const ConnectViaIP = () => { Advanced - - + + From 53bdf40344042590806388c901787db7dd6e775b Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 09:15:34 +0200 Subject: [PATCH 20/77] feat: add examples for new story --- .../ConnectViaIP/AddressAndPortInputs.stories.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.stories.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.stories.tsx index 864e0790..566a937f 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.stories.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.stories.tsx @@ -16,6 +16,16 @@ const meta = { export default meta type Story = StoryObj -export const Page: Story = { - args: {}, +export const VC: Story = { + args: { + addressType: 'Validator Client', + portType: 'VC', + }, +} + +export const Beacon: Story = { + args: { + addressType: 'Beacon', + portType: 'Beacon', + }, } From 4db22194bfe12c345a5cee82490781d0f062724c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 09:20:05 +0200 Subject: [PATCH 21/77] feat: change continue button if is connecting via ip --- src/pages/PairDevice/PairDevice.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index 4f48fe4b..1db82bdc 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -77,7 +77,7 @@ const PairDevice = () => {
From 5ba9af25f0158ebc955ce9857afd82980d452367 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 09:22:34 +0200 Subject: [PATCH 22/77] feat: add continue handler --- src/pages/PairDevice/PairDevice.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index 1db82bdc..e2f78878 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -26,6 +26,12 @@ const PairDevice = () => { setIsConnectingViaIp(state => !state) } + const continueHandler = () => { + if (isConnectingViaIp) { + } else { + } + } + return ( @@ -76,7 +82,7 @@ const PairDevice = () => { {isPaired && }
-
From e1686396984c71fe85ee227f673801d3106bc74f Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 09:36:27 +0200 Subject: [PATCH 23/77] feat: add state and handler for advanced --- src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx index cf38fbca..e976556a 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx @@ -7,18 +7,28 @@ import AddressPortInputs from './AddressAndPortInputs' const ConnectViaIP = () => { const [encryptedPassword, setEncryptedPassword] = useState('') + const [isAdvanced, setIsAdvanced] = useState(false) const changeEncryptedPasswordHandler = (value: string) => { setEncryptedPassword(value) } + const onAdvancedClickHandler = () => { + setIsAdvanced(state => !state) + } + return ( Connect via IP - From 0fa87a5e0a7530746b87411b4c31c512c9723101 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 09:36:31 +0200 Subject: [PATCH 24/77] feat: render different inputs for advanced --- src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx index e976556a..84c76ca9 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx @@ -32,8 +32,14 @@ const ConnectViaIP = () => { Advanced - - + {isAdvanced ? ( + <> + + + + ) : ( + + )} From 98a43ce92c981ed2f91e1d4bd1a426491a5f71da Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 09:48:19 +0200 Subject: [PATCH 25/77] feat: prop is advanced and show inputs --- .../ConnectViaIP/AddressAndPortInputs.tsx | 25 +++++++++++-------- .../PairDevice/ConnectViaIP/ConnectViaIP.tsx | 2 +- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx index 7ffa1c2e..61eaaae5 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx @@ -5,9 +5,10 @@ import { Stack, Switch, XStack, YStack } from 'tamagui' type AddressAndPortInputsProps = { addressType: string portType: string + isAdvanced?: boolean } -const AddressAndPortInputs = ({ addressType, portType }: AddressAndPortInputsProps) => { +const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndPortInputsProps) => { const [isSwitchOn, setIsSwitchOn] = useState(false) const [address, setAddress] = useState('') const [port, setPort] = useState('') @@ -25,7 +26,6 @@ const AddressAndPortInputs = ({ addressType, portType }: AddressAndPortInputsPro (HTTP/HTTPS) - - {addressType} Address + {addressType || 'Node'} Address setAddress(e)} /> - - - - {portType} Port - - setPort(e)} /> - + {isAdvanced === false ? ( + <> + ) : ( + + + {portType} Port + + setPort(e)} /> + + )} setIsChecked(prev => !prev)} diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx index 84c76ca9..ea6c1395 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx @@ -38,7 +38,7 @@ const ConnectViaIP = () => { ) : ( - + )} From 10f66214a1d3818ab5d5eed4af74028c0130976c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 10:28:20 +0200 Subject: [PATCH 26/77] fix: remove not used xstack --- src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx index 61eaaae5..83bb8fb5 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx @@ -74,7 +74,6 @@ const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndP /> - ) } From a468f3283ce7027a92a0ab39893eb0843e2df146 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 10:46:11 +0200 Subject: [PATCH 27/77] feat: add function handlers --- .../ConnectViaIP/AddressAndPortInputs.tsx | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx index 83bb8fb5..ee704310 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx @@ -14,6 +14,22 @@ const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndP const [port, setPort] = useState('') const [isChecked, setIsChecked] = useState(false) + const onSwitchChangeHandler = () => { + setIsSwitchOn(state => !state) + } + + const onAddressChangeHandler = (value: string) => { + setAddress(value) + } + + const onPortChangeHandler = (value: string) => { + setPort(value) + } + + const onCheckboxChangeHandler = () => { + setIsChecked(state => !state) + } + return ( @@ -30,7 +46,7 @@ const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndP size="$1" style={isSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }} checked={isSwitchOn} - onCheckedChange={() => setIsSwitchOn(prev => !prev)} + onCheckedChange={onSwitchChangeHandler} > {addressType || 'Node'} Address - setAddress(e)} /> + {isAdvanced === false ? ( <> @@ -56,7 +72,7 @@ const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndP {portType} Port - setPort(e)} /> + )} setIsChecked(prev => !prev)} + onCheckedChange={onCheckboxChangeHandler} size={20} /> From b8ad2b0a3fff581fe77e7f8b24e9ac4f26bea003 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 10:47:17 +0200 Subject: [PATCH 28/77] fix: remove connect device tab --- src/components/General/TagContainer.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/src/components/General/TagContainer.tsx b/src/components/General/TagContainer.tsx index 915f4b04..b6d57cc1 100644 --- a/src/components/General/TagContainer.tsx +++ b/src/components/General/TagContainer.tsx @@ -1,7 +1,7 @@ import { Tag } from '@status-im/components' import { XStack } from 'tamagui' import './TagContainer.css' -import { ConnectionIcon, AddSmallIcon, SwapIcon } from '@status-im/icons' +import { AddSmallIcon, SwapIcon } from '@status-im/icons' import { useNavigate } from 'react-router' type TagContainerProps = { @@ -11,10 +11,6 @@ type TagContainerProps = { const TagContainer = ({ selectedTag }: TagContainerProps) => { const navigate = useNavigate() - const onPressConnect = () => { - navigate('/connect-device') - } - const onPressPair = () => { navigate('/pair-device') } @@ -25,15 +21,6 @@ const TagContainer = ({ selectedTag }: TagContainerProps) => { return ( - {selectedTag === 'connect' ? ( - - ) : null} Date: Wed, 20 Dec 2023 10:47:44 +0200 Subject: [PATCH 29/77] fix: css import order --- src/components/General/TagContainer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/General/TagContainer.tsx b/src/components/General/TagContainer.tsx index b6d57cc1..3c10b412 100644 --- a/src/components/General/TagContainer.tsx +++ b/src/components/General/TagContainer.tsx @@ -1,9 +1,10 @@ import { Tag } from '@status-im/components' import { XStack } from 'tamagui' -import './TagContainer.css' import { AddSmallIcon, SwapIcon } from '@status-im/icons' import { useNavigate } from 'react-router' +import './TagContainer.css' + type TagContainerProps = { selectedTag: 'pair' | 'create' | 'connect' } From 6de07f955028e425ff3feb8b37b679097dd6613b Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 10:53:50 +0200 Subject: [PATCH 30/77] feat: map tags and make reusable function --- src/components/General/TagContainer.tsx | 45 ++++++++++++++----------- 1 file changed, 25 insertions(+), 20 deletions(-) diff --git a/src/components/General/TagContainer.tsx b/src/components/General/TagContainer.tsx index 3c10b412..4a0e1d85 100644 --- a/src/components/General/TagContainer.tsx +++ b/src/components/General/TagContainer.tsx @@ -9,33 +9,38 @@ type TagContainerProps = { selectedTag: 'pair' | 'create' | 'connect' } +const TAGS = [ + { + label: 'Pair', + icon: SwapIcon, + path: '/pair-device', + }, + { + label: 'Create', + icon: AddSmallIcon, + path: '/create-local-node', + }, +] + const TagContainer = ({ selectedTag }: TagContainerProps) => { const navigate = useNavigate() - const onPressPair = () => { - navigate('/pair-device') - } - - const onPressCreate = () => { - navigate('/create-local-node') + const onPressTag = (path: string) => { + navigate(path) } return ( - - + {TAGS.map(tag => ( + onPressTag(tag.path)} + /> + ))} ) } From 4681607107ccc9543bf8b540c57f6fd11bdbcdee Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 10:54:17 +0200 Subject: [PATCH 31/77] fix: delete tag container css file --- src/components/General/TagContainer.css | 3 --- src/components/General/TagContainer.tsx | 2 -- 2 files changed, 5 deletions(-) delete mode 100644 src/components/General/TagContainer.css diff --git a/src/components/General/TagContainer.css b/src/components/General/TagContainer.css deleted file mode 100644 index 0d4a90e0..00000000 --- a/src/components/General/TagContainer.css +++ /dev/null @@ -1,3 +0,0 @@ -/* .tag-container div:nth-child(1) { - background:transparent; - } */ diff --git a/src/components/General/TagContainer.tsx b/src/components/General/TagContainer.tsx index 4a0e1d85..81f282f3 100644 --- a/src/components/General/TagContainer.tsx +++ b/src/components/General/TagContainer.tsx @@ -3,8 +3,6 @@ import { XStack } from 'tamagui' import { AddSmallIcon, SwapIcon } from '@status-im/icons' import { useNavigate } from 'react-router' -import './TagContainer.css' - type TagContainerProps = { selectedTag: 'pair' | 'create' | 'connect' } From fe829236ebaab266e82164a115970261ea580f62 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 11:19:36 +0200 Subject: [PATCH 32/77] feat: create story for tag container --- .../General/TagContainer.stories.ts | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 src/components/General/TagContainer.stories.ts diff --git a/src/components/General/TagContainer.stories.ts b/src/components/General/TagContainer.stories.ts new file mode 100644 index 00000000..24e33e0e --- /dev/null +++ b/src/components/General/TagContainer.stories.ts @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { withRouter } from 'storybook-addon-react-router-v6' + +import TagContainer from './TagContainer' + +const meta = { + title: 'General/TagContainer', + component: TagContainer, + parameters: { + layout: 'centered', + }, + decorators: [withRouter], + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Pair: Story = { + args: { + selectedTag: 'pair', + }, +} + +export const Create: Story = { + args: { + selectedTag: 'create', + }, +} From 06a2c5dc9b8f8108f2ce7288437cddb21a8029ea Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 11:21:49 +0200 Subject: [PATCH 33/77] fix: remove connect from types --- src/components/General/Header.stories.tsx | 6 ------ src/components/General/Header.tsx | 2 +- src/components/General/TagContainer.tsx | 2 +- src/pages/ConnectDevicePage/ConnectDevicePage.tsx | 3 +-- 4 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/components/General/Header.stories.tsx b/src/components/General/Header.stories.tsx index ac8196ea..94931c6f 100644 --- a/src/components/General/Header.stories.tsx +++ b/src/components/General/Header.stories.tsx @@ -25,9 +25,3 @@ export const CreateTag: Story = { selectedTag: 'create', }, } - -export const ConnectTag: Story = { - args: { - selectedTag: 'connect', - }, -} diff --git a/src/components/General/Header.tsx b/src/components/General/Header.tsx index 1fc0f103..0857ffab 100644 --- a/src/components/General/Header.tsx +++ b/src/components/General/Header.tsx @@ -2,7 +2,7 @@ import NimbusLogo from '../Logos/NimbusLogo' import TagContainer from './TagContainer' type HeaderProps = { - selectedTag: 'pair' | 'create' | 'connect' + selectedTag: 'pair' | 'create' } const Header = ({ selectedTag }: HeaderProps) => { diff --git a/src/components/General/TagContainer.tsx b/src/components/General/TagContainer.tsx index 81f282f3..8dceb877 100644 --- a/src/components/General/TagContainer.tsx +++ b/src/components/General/TagContainer.tsx @@ -4,7 +4,7 @@ import { AddSmallIcon, SwapIcon } from '@status-im/icons' import { useNavigate } from 'react-router' type TagContainerProps = { - selectedTag: 'pair' | 'create' | 'connect' + selectedTag: 'pair' | 'create' } const TAGS = [ diff --git a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx index a882aaed..326665fb 100644 --- a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx +++ b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx @@ -43,8 +43,7 @@ const ConnectDevicePage = () => { rightImageLogo={true} > -
- +
Date: Wed, 20 Dec 2023 11:42:22 +0200 Subject: [PATCH 34/77] feat: export type for selected tab and change options --- src/components/General/Header.stories.tsx | 4 ++-- src/components/General/Header.tsx | 4 ++-- src/components/General/TagContainer.stories.ts | 4 ++-- src/components/General/TagContainer.tsx | 6 ++++-- src/pages/ConnectDevicePage/ConnectDevicePage.tsx | 2 +- src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx | 2 +- src/pages/PairDevice/PairDevice.tsx | 2 +- 7 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/General/Header.stories.tsx b/src/components/General/Header.stories.tsx index 94931c6f..418aed9a 100644 --- a/src/components/General/Header.stories.tsx +++ b/src/components/General/Header.stories.tsx @@ -16,12 +16,12 @@ type Story = StoryObj export const Default: Story = { args: { - selectedTag: 'pair', + selectedTag: 'Pair', }, } export const CreateTag: Story = { args: { - selectedTag: 'create', + selectedTag: 'Create', }, } diff --git a/src/components/General/Header.tsx b/src/components/General/Header.tsx index 0857ffab..c1de9dfb 100644 --- a/src/components/General/Header.tsx +++ b/src/components/General/Header.tsx @@ -1,8 +1,8 @@ import NimbusLogo from '../Logos/NimbusLogo' -import TagContainer from './TagContainer' +import TagContainer, { SelectedTag } from './TagContainer' type HeaderProps = { - selectedTag: 'pair' | 'create' + selectedTag: SelectedTag } const Header = ({ selectedTag }: HeaderProps) => { diff --git a/src/components/General/TagContainer.stories.ts b/src/components/General/TagContainer.stories.ts index 24e33e0e..ac0b0d27 100644 --- a/src/components/General/TagContainer.stories.ts +++ b/src/components/General/TagContainer.stories.ts @@ -18,12 +18,12 @@ type Story = StoryObj export const Pair: Story = { args: { - selectedTag: 'pair', + selectedTag: 'Pair', }, } export const Create: Story = { args: { - selectedTag: 'create', + selectedTag: 'Create', }, } diff --git a/src/components/General/TagContainer.tsx b/src/components/General/TagContainer.tsx index 8dceb877..b5ec43f8 100644 --- a/src/components/General/TagContainer.tsx +++ b/src/components/General/TagContainer.tsx @@ -3,8 +3,10 @@ import { XStack } from 'tamagui' import { AddSmallIcon, SwapIcon } from '@status-im/icons' import { useNavigate } from 'react-router' +export type SelectedTag = 'Pair' | 'Create' + type TagContainerProps = { - selectedTag: 'pair' | 'create' + selectedTag: SelectedTag } const TAGS = [ @@ -32,7 +34,7 @@ const TagContainer = ({ selectedTag }: TagContainerProps) => { {TAGS.map(tag => ( { rightImageLogo={true} > -
+
{ return ( -
+
{ return ( -
+
Date: Wed, 20 Dec 2023 11:52:21 +0200 Subject: [PATCH 35/77] fix: text sizes --- src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx | 6 +++--- src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx index ee704310..bff14a00 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx @@ -38,7 +38,7 @@ const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndP Protocol - + (HTTP/HTTPS) @@ -60,7 +60,7 @@ const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndP - + {addressType || 'Node'} Address @@ -69,7 +69,7 @@ const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndP <> ) : ( - + {portType} Port diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx index ea6c1395..ca9ac51f 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx @@ -42,7 +42,7 @@ const ConnectViaIP = () => { )} - + API Token Date: Wed, 20 Dec 2023 11:54:21 +0200 Subject: [PATCH 36/77] feat: add default values --- .../PairDevice/ConnectViaIP/AddressAndPortInputs.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx index bff14a00..216a7036 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx @@ -9,10 +9,10 @@ type AddressAndPortInputsProps = { } const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndPortInputsProps) => { - const [isSwitchOn, setIsSwitchOn] = useState(false) - const [address, setAddress] = useState('') - const [port, setPort] = useState('') - const [isChecked, setIsChecked] = useState(false) + const [isSwitchOn, setIsSwitchOn] = useState(true) + const [address, setAddress] = useState('http://124.0.0.1') + const [port, setPort] = useState('5052') + const [isChecked, setIsChecked] = useState(true) const onSwitchChangeHandler = () => { setIsSwitchOn(state => !state) From 5b6522c6eb5b550cacd92836810b2b8f65d5bcd0 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 11:56:31 +0200 Subject: [PATCH 37/77] fix: repeated node address --- src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx | 2 +- src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx index 216a7036..824b4d2e 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx @@ -61,7 +61,7 @@ const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndP - {addressType || 'Node'} Address + {addressType} Address diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx index ca9ac51f..50601df0 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx @@ -38,7 +38,7 @@ const ConnectViaIP = () => { ) : ( - + )} From 052d0ab6ddcb3026f3aac64b3cb543b74cb33bd2 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 12:06:09 +0200 Subject: [PATCH 38/77] feat: add only numbers for port --- src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx index 824b4d2e..3b3f8329 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx @@ -23,6 +23,10 @@ const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndP } const onPortChangeHandler = (value: string) => { + if (isNaN(Number(value))) { + return + } + setPort(value) } From 28584f439621f59b42e13442b38615d695ae73ae Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 20 Dec 2023 12:09:01 +0200 Subject: [PATCH 39/77] fix: rename is switch on state --- .../ConnectViaIP/AddressAndPortInputs.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx index 3b3f8329..36df5293 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx @@ -9,13 +9,13 @@ type AddressAndPortInputsProps = { } const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndPortInputsProps) => { - const [isSwitchOn, setIsSwitchOn] = useState(true) + const [isProtocolSwitchOn, setIsProtocolSwitchOn] = useState(true) const [address, setAddress] = useState('http://124.0.0.1') const [port, setPort] = useState('5052') const [isChecked, setIsChecked] = useState(true) - const onSwitchChangeHandler = () => { - setIsSwitchOn(state => !state) + const onProtocolSwitchChangeHandler = () => { + setIsProtocolSwitchOn(state => !state) } const onAddressChangeHandler = (value: string) => { @@ -48,9 +48,11 @@ const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndP Date: Wed, 20 Dec 2023 12:33:51 +0200 Subject: [PATCH 40/77] feat: add active for advanced button --- src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx index 50601df0..64efa925 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx @@ -24,7 +24,7 @@ const ConnectViaIP = () => { Connect via IP From 3c2c80e81ef45b4245ca324e5b79196f998c3de1 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 3 Jan 2024 09:19:34 +0200 Subject: [PATCH 47/77] feat: made inputs for not advanced connect via ip --- .../ConnectViaIP/AddressAndPortInputs.tsx | 125 +++++++++--------- 1 file changed, 60 insertions(+), 65 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx index 3a283afc..239ab4c6 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx @@ -3,12 +3,10 @@ import { useState } from 'react' import { Stack, Switch, XStack, YStack } from 'tamagui' type AddressAndPortInputsProps = { - addressType: string - portType: string - isAdvanced?: boolean + isAdvanced: boolean } -const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndPortInputsProps) => { +const AddressAndPortInputs = ({ isAdvanced }: AddressAndPortInputsProps) => { const [isProtocolSwitchOn, setIsProtocolSwitchOn] = useState(true) const [address, setAddress] = useState('http://124.0.0.1') const [port, setPort] = useState('5052') @@ -35,70 +33,67 @@ const AddressAndPortInputs = ({ addressType, portType, isAdvanced }: AddressAndP } return ( - - - - - - Protocol - - - (HTTP/HTTPS) - - - - - + + + + + Protocol + + + (HTTP/HTTPS) + -
- - - {addressType} Address - - - - {isAdvanced === false ? ( - <> - ) : ( - - - {portType} Port - - - - )} -
- - - - - + + + + + Node Address + + + + + + VC Port + + + + + + Beacon Port + + + + + + + ) } From 3ee3a02cbae627fbd4a7accef1952ac69310a581 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 3 Jan 2024 09:19:54 +0200 Subject: [PATCH 48/77] fix: remove props and change default data --- .../PairDevice/ConnectViaIP/ConnectViaIP.tsx | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx index a6783e01..70712c4a 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx @@ -10,9 +10,9 @@ const ConnectViaIP = () => { const [isAdvanced, setIsAdvanced] = useState(false) const [beaconPort, setBeaconPort] = useState('5052') const [vcPort, setVcPort] = useState('9000') - const [nodeAddress, setNodeAddress] = useState('http://') - const [beaconAddress, setBeaconAddress] = useState('http://') - const [vcAddress, setVcAddress] = useState('http://') + const [nodeAddress, setNodeAddress] = useState('http://124.0.0.1') + const [beaconAddress, setBeaconAddress] = useState('http://124.0.0.1') + const [vcAddress, setVcAddress] = useState('http://124.0.0.1') const changeEncryptedPasswordHandler = (value: string) => { setEncryptedPassword(value) @@ -37,14 +37,7 @@ const ConnectViaIP = () => { Advanced - {isAdvanced ? ( - <> - - - - ) : ( - - )} + From 3c9bd4e039d16b2a766b7be83de2400009f5d6d0 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 3 Jan 2024 09:27:17 +0200 Subject: [PATCH 49/77] fix: style switch thumb position --- src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx index 239ab4c6..447aaba0 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx @@ -51,8 +51,8 @@ const AddressAndPortInputs = ({ isAdvanced }: AddressAndPortInputsProps) => { > Date: Wed, 3 Jan 2024 09:42:25 +0200 Subject: [PATCH 50/77] fix: height and position of checkbox --- .../ConnectViaIP/AddressAndPortInputs.tsx | 26 ++++++++----------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx index 447aaba0..1b0bc326 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx @@ -78,21 +78,17 @@ const AddressAndPortInputs = ({ isAdvanced }: AddressAndPortInputsProps) => { - - - +
+ + + +
) } From efb6388a2f51c8f18ba57036769526c3066644cb Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 3 Jan 2024 13:23:56 +0200 Subject: [PATCH 51/77] feat: pass props for inputs --- src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx index 70712c4a..8bd7880d 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx @@ -37,7 +37,18 @@ const ConnectViaIP = () => { Advanced - + {isAdvanced ? ( + + + + + ) : ( + + )} From a0ac3f819a04b0971033292bba55c861ea2b4cc8 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 3 Jan 2024 13:24:36 +0200 Subject: [PATCH 52/77] feat: show different inputs for is advanced --- .../ConnectViaIP/AddressAndPortInputs.tsx | 43 ++++++++++++------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx index 1b0bc326..efeeb9a1 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx @@ -3,10 +3,12 @@ import { useState } from 'react' import { Stack, Switch, XStack, YStack } from 'tamagui' type AddressAndPortInputsProps = { + addressType: string + portType: string isAdvanced: boolean } -const AddressAndPortInputs = ({ isAdvanced }: AddressAndPortInputsProps) => { +const AddressAndPortInputs = ({ isAdvanced, addressType, portType }: AddressAndPortInputsProps) => { const [isProtocolSwitchOn, setIsProtocolSwitchOn] = useState(true) const [address, setAddress] = useState('http://124.0.0.1') const [port, setPort] = useState('5052') @@ -60,24 +62,35 @@ const AddressAndPortInputs = ({ isAdvanced }: AddressAndPortInputsProps) => { /> - + - Node Address + {addressType} Address - - - VC Port - - - - - - Beacon Port - - - + {isAdvanced ? ( + + + {portType} Port + + + + ) : ( + + + + {portType} Port + + + + + + {portType} Port + + + + + )}
Date: Thu, 4 Jan 2024 10:43:33 +0200 Subject: [PATCH 53/77] feat: create slice for pair device --- src/redux/PairDevice/slice.ts | 40 +++++++++++++++++++++++++++++++++++ src/redux/store.ts | 2 ++ 2 files changed, 42 insertions(+) create mode 100644 src/redux/PairDevice/slice.ts diff --git a/src/redux/PairDevice/slice.ts b/src/redux/PairDevice/slice.ts new file mode 100644 index 00000000..eacf915d --- /dev/null +++ b/src/redux/PairDevice/slice.ts @@ -0,0 +1,40 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit' + +type PairDeviceStateType = { + beaconPort: string + vcPort: string + nodeAddress: string + beaconAddress: string + vcAddress: string +} + +const initialState: PairDeviceStateType = { + beaconPort: '5052', + vcPort: '9000', + nodeAddress: 'http://124.0.0.1', + beaconAddress: 'http://124.0.0.1', + vcAddress: 'http://124.0.0.1', +} + +const pairDeviceSlice = createSlice({ + name: 'pairDevice', + initialState, + reducers: { + setAddress: ( + state, + action: PayloadAction<{ nodeAddress: string; beaconAddress: string; vcAddress: string }>, + ) => { + state.nodeAddress = action.payload.nodeAddress + state.beaconAddress = action.payload.beaconAddress + state.vcAddress = action.payload.vcAddress + }, + setPort: (state, action: PayloadAction<{ beaconPort: string; vcPort: string }>) => { + state.beaconPort = action.payload.beaconPort + state.vcPort = action.payload.vcPort + }, + }, +}) + +export const { setAddress, setPort } = pairDeviceSlice.actions + +export default pairDeviceSlice.reducer diff --git a/src/redux/store.ts b/src/redux/store.ts index 7fe253f7..f602e52a 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -11,6 +11,7 @@ import rightSidebarReducer from './RightSidebar/slice' import validatorOnboardingReducer from './ValidatorOnboarding/slice' import advisoriesReducer from './ValidatorOnboarding/Advisories/slice' import validatorSetupReducer from './ValidatorOnboarding/ValidatorSetup/slice' +import pairDeviceReducer from './PairDevice/slice' const store = configureStore({ reducer: { @@ -25,6 +26,7 @@ const store = configureStore({ validatorOnboarding: validatorOnboardingReducer, advisories: advisoriesReducer, validatorSetup: validatorSetupReducer, + pairDevice: pairDeviceReducer, }, }) From 364452590b9c088866b699532243f2d5451f058c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 4 Jan 2024 10:49:35 +0200 Subject: [PATCH 54/77] fix: remove connect device route --- src/App.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 75fa5b92..e8ccefe2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,7 +9,6 @@ import { useSelector } from 'react-redux' import config from '../tamagui.config' import LandingPage from './pages/LandingPage/LandingPage' import DeviceHealthCheck from './pages/DeviceHealthCheck/DeviceHealthCheck' -import ConnectDevicePage from './pages/ConnectDevicePage/ConnectDevicePage' import { RootState } from './redux/store' import DeviceSyncStatus from './pages/DeviceSyncStatus/DeviceSyncStatus' import PairDevice from './pages/PairDevice/PairDevice' @@ -46,10 +45,6 @@ const router = createBrowserRouter([ path: '/device-health-check', element: , }, - { - path: '/connect-device', - element: , - }, { path: '/device-sync-status', element: , From 918ec5c629788f16a2f4a1046b3ec16c12137ec2 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 4 Jan 2024 10:53:36 +0200 Subject: [PATCH 55/77] fix: delete old connect device page and story --- .../ConnectDevicePage.stories.ts | 21 --- .../ConnectDevicePage/ConnectDevicePage.tsx | 120 ------------------ 2 files changed, 141 deletions(-) delete mode 100644 src/pages/ConnectDevicePage/ConnectDevicePage.stories.ts delete mode 100644 src/pages/ConnectDevicePage/ConnectDevicePage.tsx diff --git a/src/pages/ConnectDevicePage/ConnectDevicePage.stories.ts b/src/pages/ConnectDevicePage/ConnectDevicePage.stories.ts deleted file mode 100644 index 7e31953b..00000000 --- a/src/pages/ConnectDevicePage/ConnectDevicePage.stories.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' - -import ConnectDevicePage from './ConnectDevicePage' -import { withRouter } from 'storybook-addon-react-router-v6' - -const meta = { - title: 'Connect-Device/ConnectDevicePage', - component: ConnectDevicePage, - parameters: { - layout: 'centered', - }, - tags: ['autodocs'], - decorators: [withRouter], -} satisfies Meta - -export default meta -type Story = StoryObj - -export const Page: Story = { - args: {}, -} diff --git a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx deleted file mode 100644 index 789e0548..00000000 --- a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { useEffect, useState } from 'react' -import BreadcrumbBar from '../../components/General/BreadcrumbBar/BreadcrumbBar' -import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/components' -import { Article, Label, Separator, Stack, XStack, YStack } from 'tamagui' -import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' -import Titles from '../../components/General/Titles' -import LabelInputField from '../../components/General/LabelInputField' -import Header from '../../components/General/Header' -import { NodeIcon } from '@status-im/icons' - -const ConnectDevicePage = () => { - const [autoConnectChecked, setAutoConnectChecked] = useState(false) - const [portChecked, setPortChecked] = useState(false) - const [windowWidth, setWindowWidth] = useState(window.innerWidth) - - useEffect(() => { - const handleResize = () => { - setWindowWidth(window.innerWidth) - } - window.addEventListener('resize', handleResize) - return () => window.removeEventListener('resize', handleResize) - }, []) - - const breakpoint = 768 - - const responsiveXStackStyle = { - width: '100%', - alignItems: 'center', - justifyContent: 'space-between', - flexDirection: windowWidth <= breakpoint ? 'column' : 'row', - flexWrap: windowWidth <= breakpoint ? 'wrap' : 'nowrap', - } - - const responsiveInputStyle = { - width: windowWidth <= breakpoint ? '100%' : '40%', - marginBottom: windowWidth <= breakpoint ? '1rem' : '0', - } - - return ( - } - rightImageSrc="./background-images/day-night-bg.png" - rightImageLogo={true} - > - -
-
- - - - - - - - - - - - - - - setPortChecked(v)} - /> - - - - - - - - - - Device Avatar - - - - - - - - - - - - - - - Settings - - - - setAutoConnectChecked(v)} - variant="outline" - /> - - - - - }>Connect Device -
- - - ) -} - -export default ConnectDevicePage From a7658bdde43f2114500e19be7551fc775fb006c5 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 4 Jan 2024 10:54:59 +0200 Subject: [PATCH 56/77] fix: rename state and handler for api token --- .../PairDevice/ConnectViaIP/ConnectViaIP.tsx | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx index 8bd7880d..59397442 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx @@ -6,16 +6,11 @@ import { SettingsIcon, ClearIcon } from '@status-im/icons' import AddressPortInputs from './AddressAndPortInputs' const ConnectViaIP = () => { - const [encryptedPassword, setEncryptedPassword] = useState('') + const [apiToken, setApiToken] = useState('') const [isAdvanced, setIsAdvanced] = useState(false) - const [beaconPort, setBeaconPort] = useState('5052') - const [vcPort, setVcPort] = useState('9000') - const [nodeAddress, setNodeAddress] = useState('http://124.0.0.1') - const [beaconAddress, setBeaconAddress] = useState('http://124.0.0.1') - const [vcAddress, setVcAddress] = useState('http://124.0.0.1') - const changeEncryptedPasswordHandler = (value: string) => { - setEncryptedPassword(value) + const changeApiToken = (value: string) => { + setApiToken(value) } const onAdvancedClickHandler = () => { @@ -60,12 +55,12 @@ const ConnectViaIP = () => { setEncryptedPassword('')} + onClick={() => changeApiToken('')} style={{ cursor: 'pointer' }} /> } - value={encryptedPassword} - onChangeText={changeEncryptedPasswordHandler} + value={apiToken} + onChangeText={changeApiToken} /> From e7ca4b66cb766f29dcf0bbbd6cb9aa8635fd6ef6 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 5 Jan 2024 09:46:42 +0200 Subject: [PATCH 57/77] feat: create new reducers for ports and addresses --- src/redux/PairDevice/slice.ts | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/src/redux/PairDevice/slice.ts b/src/redux/PairDevice/slice.ts index eacf915d..967dd1f7 100644 --- a/src/redux/PairDevice/slice.ts +++ b/src/redux/PairDevice/slice.ts @@ -20,21 +20,24 @@ const pairDeviceSlice = createSlice({ name: 'pairDevice', initialState, reducers: { - setAddress: ( - state, - action: PayloadAction<{ nodeAddress: string; beaconAddress: string; vcAddress: string }>, - ) => { - state.nodeAddress = action.payload.nodeAddress - state.beaconAddress = action.payload.beaconAddress - state.vcAddress = action.payload.vcAddress + setBeaconPort: (state, action: PayloadAction) => { + state.beaconPort = action.payload }, - setPort: (state, action: PayloadAction<{ beaconPort: string; vcPort: string }>) => { - state.beaconPort = action.payload.beaconPort - state.vcPort = action.payload.vcPort + setVcPort: (state, action: PayloadAction) => { + state.vcPort = action.payload + }, + setBeaconAddress: (state, action: PayloadAction) => { + state.beaconAddress = action.payload + }, + setVcAddress: (state, action: PayloadAction) => { + state.vcAddress = action.payload + }, + setNodeAddress: (state, action: PayloadAction) => { + state.nodeAddress = action.payload }, }, }) -export const { setAddress, setPort } = pairDeviceSlice.actions +export const {} = pairDeviceSlice.actions export default pairDeviceSlice.reducer From 37469831e1f9d668b0566bf6676451f811fea808 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 5 Jan 2024 09:47:12 +0200 Subject: [PATCH 58/77] feat: pass new props to address ports component --- .../PairDevice/ConnectViaIP/ConnectViaIP.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx index 59397442..2dd57e0a 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx @@ -2,12 +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 AddressPortInputs from './AddressAndPortInputs' +import { RootState } from '../../../redux/store' const ConnectViaIP = () => { const [apiToken, setApiToken] = useState('') const [isAdvanced, setIsAdvanced] = useState(false) + const { beaconPort, vcPort, nodeAddress, beaconAddress, vcAddress } = useSelector( + (state: RootState) => state.pairDevice, + ) const changeApiToken = (value: string) => { setApiToken(value) @@ -37,12 +42,20 @@ const ConnectViaIP = () => { + - ) : ( - + )} From 106c145ef0bb7d5ddc7430305881f3d7f2bfcb19 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 5 Jan 2024 09:55:42 +0200 Subject: [PATCH 59/77] feat: make reusable handlers and use reducers --- .../ConnectViaIP/AddressAndPortInputs.tsx | 58 +++++++++++++------ 1 file changed, 41 insertions(+), 17 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx index efeeb9a1..6f317eeb 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx @@ -1,37 +1,58 @@ import { Checkbox, Input, Text } from '@status-im/components' import { useState } from 'react' +import { useDispatch, useSelector } from 'react-redux' import { Stack, Switch, XStack, YStack } from 'tamagui' +import { RootState } from '../../../redux/store' + type AddressAndPortInputsProps = { addressType: string - portType: string - isAdvanced: boolean + portType?: string + isAdvanced?: boolean + address: string + port?: string } -const AddressAndPortInputs = ({ isAdvanced, addressType, portType }: AddressAndPortInputsProps) => { +const AddressAndPortInputs = ({ + isAdvanced, + addressType, + portType, + address, + port, +}: AddressAndPortInputsProps) => { const [isProtocolSwitchOn, setIsProtocolSwitchOn] = useState(true) - const [address, setAddress] = useState('http://124.0.0.1') - const [port, setPort] = useState('5052') const [isChecked, setIsChecked] = useState(true) + const { beaconPort, vcPort } = useSelector((state: RootState) => state.pairDevice) + const dispatch = useDispatch() const onProtocolSwitchChangeHandler = () => { setIsProtocolSwitchOn(state => !state) } - const onAddressChangeHandler = (value: string) => { - setAddress(value) + const onCheckboxChangeHandler = () => { + setIsChecked(state => !state) } - const onPortChangeHandler = (value: string) => { + const onPortChange = (value: string, portType: string) => { if (isNaN(Number(value))) { return } - setPort(value) + if (portType === 'Beacon') { + dispatch({ type: 'pairDevice/setBeaconPort', payload: value }) + } else { + dispatch({ type: 'pairDevice/setVcPort', payload: value }) + } } - const onCheckboxChangeHandler = () => { - setIsChecked(state => !state) + const onAddressChange = (value: string) => { + if (addressType === 'Beacon') { + dispatch({ type: 'pairDevice/setBeaconAddress', payload: value }) + } else if (addressType === 'Validator Client') { + dispatch({ type: 'pairDevice/setVcAddress', payload: value }) + } else { + dispatch({ type: 'pairDevice/setNodeAddress', payload: value }) + } } return ( @@ -66,28 +87,31 @@ const AddressAndPortInputs = ({ isAdvanced, addressType, portType }: AddressAndP {addressType} Address - + {isAdvanced ? ( {portType} Port - + onPortChange(value, portType ? portType : '')} + /> ) : ( - {portType} Port + VC Port - + onPortChange(value, 'VC')} /> - {portType} Port + Beacon Port - + onPortChange(value, 'Beacon')} /> )} From 3131510d510ea3547c73f5f2372d24049313f176 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 5 Jan 2024 10:08:56 +0200 Subject: [PATCH 60/77] feat: create reusable reducers and remove old dispatches --- .../ConnectViaIP/AddressAndPortInputs.tsx | 14 ++------- src/redux/PairDevice/slice.ts | 29 ++++++++++--------- 2 files changed, 17 insertions(+), 26 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx index 6f317eeb..f849a373 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx @@ -38,21 +38,11 @@ const AddressAndPortInputs = ({ return } - if (portType === 'Beacon') { - dispatch({ type: 'pairDevice/setBeaconPort', payload: value }) - } else { - dispatch({ type: 'pairDevice/setVcPort', payload: value }) - } + dispatch({ type: 'pairDevice/setPort', payload: { value, portType } }) } const onAddressChange = (value: string) => { - if (addressType === 'Beacon') { - dispatch({ type: 'pairDevice/setBeaconAddress', payload: value }) - } else if (addressType === 'Validator Client') { - dispatch({ type: 'pairDevice/setVcAddress', payload: value }) - } else { - dispatch({ type: 'pairDevice/setNodeAddress', payload: value }) - } + dispatch({ type: 'pairDevice/setAddress', payload: { value, addressType } }) } return ( diff --git a/src/redux/PairDevice/slice.ts b/src/redux/PairDevice/slice.ts index 967dd1f7..fbee2281 100644 --- a/src/redux/PairDevice/slice.ts +++ b/src/redux/PairDevice/slice.ts @@ -1,4 +1,4 @@ -import { createSlice, PayloadAction } from '@reduxjs/toolkit' +import { createSlice } from '@reduxjs/toolkit' type PairDeviceStateType = { beaconPort: string @@ -20,20 +20,21 @@ const pairDeviceSlice = createSlice({ name: 'pairDevice', initialState, reducers: { - setBeaconPort: (state, action: PayloadAction) => { - state.beaconPort = action.payload + setPort: (state, action) => { + if (action.payload.portType === 'Beacon') { + state.beaconPort = action.payload.value + } else { + state.vcPort = action.payload.value + } }, - setVcPort: (state, action: PayloadAction) => { - state.vcPort = action.payload - }, - setBeaconAddress: (state, action: PayloadAction) => { - state.beaconAddress = action.payload - }, - setVcAddress: (state, action: PayloadAction) => { - state.vcAddress = action.payload - }, - setNodeAddress: (state, action: PayloadAction) => { - state.nodeAddress = action.payload + setAddress: (state, action) => { + if (action.payload.addressType === 'Beacon') { + state.beaconAddress = action.payload.value + } else if (action.payload.addressType === 'Validator Client') { + state.vcAddress = action.payload.value + } else { + state.nodeAddress = action.payload.value + } }, }, }) From 518dbd524fc62cdeff45625ca4f5542f787ad324 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 5 Jan 2024 10:20:37 +0200 Subject: [PATCH 61/77] feat: add state and reducers for checks and switches --- src/redux/PairDevice/slice.ts | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/redux/PairDevice/slice.ts b/src/redux/PairDevice/slice.ts index fbee2281..fbf8a92a 100644 --- a/src/redux/PairDevice/slice.ts +++ b/src/redux/PairDevice/slice.ts @@ -6,6 +6,12 @@ type PairDeviceStateType = { nodeAddress: string beaconAddress: string vcAddress: string + isNodeSwitchOn: boolean + isBeaconSwitchOn: boolean + isVcSwitchOn: boolean + isNodeChecked: boolean + isBeaconChecked: boolean + isVcChecked: boolean } const initialState: PairDeviceStateType = { @@ -14,6 +20,12 @@ const initialState: PairDeviceStateType = { nodeAddress: 'http://124.0.0.1', beaconAddress: 'http://124.0.0.1', vcAddress: 'http://124.0.0.1', + isNodeSwitchOn: false, + isBeaconSwitchOn: false, + isVcSwitchOn: false, + isNodeChecked: false, + isBeaconChecked: false, + isVcChecked: false, } const pairDeviceSlice = createSlice({ @@ -36,6 +48,24 @@ const pairDeviceSlice = createSlice({ state.nodeAddress = action.payload.value } }, + setIsSwitchOn: (state, action) => { + if (action.payload.switchType === 'Beacon') { + state.isBeaconSwitchOn = action.payload.value + } else if (action.payload.switchType === 'Validator Client') { + state.isVcSwitchOn = action.payload.value + } else { + 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 + } + }, }, }) From 91ebee77daa8c35d6be13d81703ce808b3b133a3 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 5 Jan 2024 10:22:30 +0200 Subject: [PATCH 62/77] feat: pass props for is switch on and is checked --- .../PairDevice/ConnectViaIP/ConnectViaIP.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx index 2dd57e0a..e3e9415c 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx @@ -10,9 +10,17 @@ import { RootState } from '../../../redux/store' const ConnectViaIP = () => { const [apiToken, setApiToken] = useState('') const [isAdvanced, setIsAdvanced] = useState(false) - const { beaconPort, vcPort, nodeAddress, beaconAddress, vcAddress } = useSelector( - (state: RootState) => state.pairDevice, - ) + const { + beaconPort, + vcPort, + nodeAddress, + beaconAddress, + vcAddress, + isBeaconSwitchOn, + isVcSwitchOn, + isBeaconChecked, + isVcChecked, + } = useSelector((state: RootState) => state.pairDevice) const changeApiToken = (value: string) => { setApiToken(value) @@ -45,6 +53,8 @@ const ConnectViaIP = () => { address={vcAddress} port={vcPort} isAdvanced={isAdvanced} + isSwitchOn={isVcSwitchOn} + isChecked={isVcChecked} /> { address={beaconAddress} port={beaconPort} isAdvanced={isAdvanced} + isSwitchOn={isBeaconSwitchOn} + isChecked={isBeaconChecked} /> ) : ( From 1a2c443c8a624db0f3df07b8cde7cffe69f1051c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 5 Jan 2024 10:33:54 +0200 Subject: [PATCH 63/77] feat: use states and create new handlers with reducers --- .../ConnectViaIP/AddressAndPortInputs.tsx | 33 +++++++++++-------- src/redux/PairDevice/slice.ts | 12 +++---- 2 files changed, 26 insertions(+), 19 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx index f849a373..aa75d733 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx +++ b/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx @@ -1,5 +1,4 @@ import { Checkbox, Input, Text } from '@status-im/components' -import { useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { Stack, Switch, XStack, YStack } from 'tamagui' @@ -11,6 +10,8 @@ type AddressAndPortInputsProps = { isAdvanced?: boolean address: string port?: string + isSwitchOn?: boolean + isChecked?: boolean } const AddressAndPortInputs = ({ @@ -19,18 +20,24 @@ const AddressAndPortInputs = ({ portType, address, port, + isSwitchOn, + isChecked, }: AddressAndPortInputsProps) => { - const [isProtocolSwitchOn, setIsProtocolSwitchOn] = useState(true) - const [isChecked, setIsChecked] = useState(true) - const { beaconPort, vcPort } = useSelector((state: RootState) => state.pairDevice) + const { beaconPort, vcPort, isNodeChecked, isNodeSwitchOn } = useSelector( + (state: RootState) => state.pairDevice, + ) const dispatch = useDispatch() + const isSwitchOnResult = isAdvanced ? isSwitchOn : isNodeSwitchOn + const switchStyle = isSwitchOnResult + ? { backgroundColor: '#2A4AF5' } + : { backgroundColor: 'grey' } - const onProtocolSwitchChangeHandler = () => { - setIsProtocolSwitchOn(state => !state) + const onSwitchChange = (value: boolean) => { + dispatch({ type: 'pairDevice/setIsSwitchOn', payload: { value, switchType: addressType } }) } - const onCheckboxChangeHandler = () => { - setIsChecked(state => !state) + const onCheckboxChange = (value: boolean) => { + dispatch({ type: 'pairDevice/setIsChecked', payload: { value, checkType: addressType } }) } const onPortChange = (value: string, portType: string) => { @@ -58,9 +65,9 @@ const AddressAndPortInputs = ({ diff --git a/src/redux/PairDevice/slice.ts b/src/redux/PairDevice/slice.ts index fbf8a92a..41b847ca 100644 --- a/src/redux/PairDevice/slice.ts +++ b/src/redux/PairDevice/slice.ts @@ -20,12 +20,12 @@ const initialState: PairDeviceStateType = { nodeAddress: 'http://124.0.0.1', beaconAddress: 'http://124.0.0.1', vcAddress: 'http://124.0.0.1', - isNodeSwitchOn: false, - isBeaconSwitchOn: false, - isVcSwitchOn: false, - isNodeChecked: false, - isBeaconChecked: false, - isVcChecked: false, + isNodeSwitchOn: true, + isBeaconSwitchOn: true, + isVcSwitchOn: true, + isNodeChecked: true, + isBeaconChecked: true, + isVcChecked: true, } const pairDeviceSlice = createSlice({ From 32c939a30802e02a78e01da0973ee04c7c18b1a8 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 5 Jan 2024 10:39:11 +0200 Subject: [PATCH 64/77] fix: change name of address and port inputs component --- src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx | 8 ++++---- ...essAndPortInputs.stories.tsx => InputsRow.stories.tsx} | 8 ++++---- .../{AddressAndPortInputs.tsx => InputsRow.tsx} | 8 ++++---- 3 files changed, 12 insertions(+), 12 deletions(-) rename src/pages/PairDevice/ConnectViaIP/{AddressAndPortInputs.stories.tsx => InputsRow.stories.tsx} (72%) rename src/pages/PairDevice/ConnectViaIP/{AddressAndPortInputs.tsx => InputsRow.tsx} (96%) diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx index e3e9415c..9890cb40 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx @@ -4,7 +4,7 @@ import { Button, Input, Text } from '@status-im/components' import { SettingsIcon, ClearIcon } from '@status-im/icons' import { useSelector } from 'react-redux' -import AddressPortInputs from './AddressAndPortInputs' +import InputsRow from './InputsRow' import { RootState } from '../../../redux/store' const ConnectViaIP = () => { @@ -47,7 +47,7 @@ const ConnectViaIP = () => { {isAdvanced ? ( - { isSwitchOn={isVcSwitchOn} isChecked={isVcChecked} /> - { /> ) : ( - + )} diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.stories.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx similarity index 72% rename from src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.stories.tsx rename to src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx index 566a937f..6020392f 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.stories.tsx +++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx @@ -1,17 +1,17 @@ import type { Meta, StoryObj } from '@storybook/react' import { withRouter } from 'storybook-addon-react-router-v6' -import AddressAndPortInputs from './AddressAndPortInputs' +import InputsRow from './InputsRow' const meta = { - title: 'Pair Device/AddressAndPortInputs', - component: AddressAndPortInputs, + title: 'Pair Device/InputsRow', + component: InputsRow, parameters: { layout: 'centered', }, tags: ['autodocs'], decorators: [withRouter], -} satisfies Meta +} satisfies Meta export default meta type Story = StoryObj diff --git a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx similarity index 96% rename from src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx rename to src/pages/PairDevice/ConnectViaIP/InputsRow.tsx index aa75d733..b39d8372 100644 --- a/src/pages/PairDevice/ConnectViaIP/AddressAndPortInputs.tsx +++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx @@ -4,7 +4,7 @@ import { Stack, Switch, XStack, YStack } from 'tamagui' import { RootState } from '../../../redux/store' -type AddressAndPortInputsProps = { +type InputsRowProps = { addressType: string portType?: string isAdvanced?: boolean @@ -14,7 +14,7 @@ type AddressAndPortInputsProps = { isChecked?: boolean } -const AddressAndPortInputs = ({ +const InputsRow = ({ isAdvanced, addressType, portType, @@ -22,7 +22,7 @@ const AddressAndPortInputs = ({ port, isSwitchOn, isChecked, -}: AddressAndPortInputsProps) => { +}: InputsRowProps) => { const { beaconPort, vcPort, isNodeChecked, isNodeSwitchOn } = useSelector( (state: RootState) => state.pairDevice, ) @@ -127,4 +127,4 @@ const AddressAndPortInputs = ({ ) } -export default AddressAndPortInputs +export default InputsRow From 398cfde40c12d2d61bcd15b5a9307b87a7fa5908 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 5 Jan 2024 14:27:06 +0200 Subject: [PATCH 65/77] feat: create port input component to reuse --- .../PairDevice/ConnectViaIP/PortInput.tsx | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 src/pages/PairDevice/ConnectViaIP/PortInput.tsx diff --git a/src/pages/PairDevice/ConnectViaIP/PortInput.tsx b/src/pages/PairDevice/ConnectViaIP/PortInput.tsx new file mode 100644 index 00000000..ea901a75 --- /dev/null +++ b/src/pages/PairDevice/ConnectViaIP/PortInput.tsx @@ -0,0 +1,31 @@ +import { Input, Text } from '@status-im/components' +import { useDispatch } from 'react-redux' +import { YStack } from 'tamagui' + +type PortInputProps = { + portType: string + port: string +} + +const PortInput = ({ portType, port }: PortInputProps) => { + const dispatch = useDispatch() + + const onPortChange = (value: string) => { + if (isNaN(Number(value))) { + return + } + + dispatch({ type: 'pairDevice/setPort', payload: { value, portType } }) + } + + return ( + + + {portType} Port + + + + ) +} + +export default PortInput From 48ee8abd478da3806fa14239176550e9542c9853 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 5 Jan 2024 14:27:39 +0200 Subject: [PATCH 66/77] feat: use new port input component --- .../PairDevice/ConnectViaIP/ConnectViaIP.tsx | 2 +- .../PairDevice/ConnectViaIP/InputsRow.tsx | 37 +++---------------- 2 files changed, 7 insertions(+), 32 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx index 9890cb40..3a82e6eb 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx @@ -67,7 +67,7 @@ const ConnectViaIP = () => { /> ) : ( - + )} diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx index b39d8372..8a72cfc5 100644 --- a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx +++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx @@ -3,13 +3,14 @@ import { useDispatch, useSelector } from 'react-redux' import { Stack, Switch, XStack, YStack } from 'tamagui' import { RootState } from '../../../redux/store' +import PortInput from './PortInput' type InputsRowProps = { addressType: string - portType?: string + portType: string isAdvanced?: boolean address: string - port?: string + port: string isSwitchOn?: boolean isChecked?: boolean } @@ -40,14 +41,6 @@ const InputsRow = ({ 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) => { dispatch({ type: 'pairDevice/setAddress', payload: { value, addressType } }) } @@ -87,29 +80,11 @@ const InputsRow = ({ {isAdvanced ? ( - - - {portType} Port - - onPortChange(value, portType ? portType : '')} - /> - + ) : ( - - - VC Port - - onPortChange(value, 'VC')} /> - - - - Beacon Port - - onPortChange(value, 'Beacon')} /> - + + )}
From 218345b10b35db9cee73b5a93b28fed25af297ea Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 5 Jan 2024 14:39:44 +0200 Subject: [PATCH 67/77] fix: create local node story place --- src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts b/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts index f904da0c..d1a58163 100644 --- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts @@ -4,7 +4,7 @@ import CreateLocalNodePage from './CreateLocalNodePage' import { withRouter } from 'storybook-addon-react-router-v6' const meta = { - title: 'Connect-Device/CreateLocalNodePage', + title: 'Pages/CreateLocalNode', component: CreateLocalNodePage, parameters: { layout: 'centered', From bbf62ce59d1ac87555c42f7ed467457cbdaa09e2 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 5 Jan 2024 14:41:32 +0200 Subject: [PATCH 68/77] fix name of create local node --- src/App.tsx | 4 ++-- .../CreateLocalNode.stories.ts} | 6 +++--- .../CreateLocalNode.tsx} | 5 +++-- 3 files changed, 8 insertions(+), 7 deletions(-) rename src/pages/{CreateLocalNodePage/CreateLocalNodePage.stories.ts => CreateLocalNode/CreateLocalNode.stories.ts} (72%) rename src/pages/{CreateLocalNodePage/CreateLocalNodePage.tsx => CreateLocalNode/CreateLocalNode.tsx} (96%) diff --git a/src/App.tsx b/src/App.tsx index e8ccefe2..9c9c3ff3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,7 +13,7 @@ import { RootState } from './redux/store' import DeviceSyncStatus from './pages/DeviceSyncStatus/DeviceSyncStatus' import PairDevice from './pages/PairDevice/PairDevice' import PinnedNotification from './components/General/PinnedNottification' -import CreateLocalNodePage from './pages/CreateLocalNodePage/CreateLocalNodePage' +import CreateLocalNode from './pages/CreateLocalNode/CreateLocalNode' import ValidatorOnboarding from './pages/ValidatorOnboarding/ValidatorOnboarding' import Dashboard from './pages/Dashboard/Dashboard' import ValidatorManagement from './pages/ValidatorManagement/ValidatorManagement' @@ -53,7 +53,7 @@ const router = createBrowserRouter([ path: '/pair-device', element: , }, - { path: '/create-local-node', element: }, + { path: '/create-local-node', element: }, { path: '/validator-onboarding', element: }, { path: '/dashboard', element: }, { path: '/validator-management', element: }, diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts b/src/pages/CreateLocalNode/CreateLocalNode.stories.ts similarity index 72% rename from src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts rename to src/pages/CreateLocalNode/CreateLocalNode.stories.ts index d1a58163..c8a2f58b 100644 --- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts +++ b/src/pages/CreateLocalNode/CreateLocalNode.stories.ts @@ -1,17 +1,17 @@ import type { Meta, StoryObj } from '@storybook/react' -import CreateLocalNodePage from './CreateLocalNodePage' +import CreateLocalNode from './CreateLocalNode' import { withRouter } from 'storybook-addon-react-router-v6' const meta = { title: 'Pages/CreateLocalNode', - component: CreateLocalNodePage, + component: CreateLocalNode, parameters: { layout: 'centered', }, tags: ['autodocs'], decorators: [withRouter], -} satisfies Meta +} satisfies Meta export default meta type Story = StoryObj diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNode/CreateLocalNode.tsx similarity index 96% rename from src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx rename to src/pages/CreateLocalNode/CreateLocalNode.tsx index 88e0901f..439c351c 100644 --- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx +++ b/src/pages/CreateLocalNode/CreateLocalNode.tsx @@ -2,12 +2,13 @@ import { useState } from 'react' import { Button as StatusButton, Text, Checkbox } from '@status-im/components' import { NodeIcon } from '@status-im/icons' import { Label, Separator, XStack, YStack } from 'tamagui' + import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import Header from '../../components/General/Header' import Titles from '../../components/General/Titles' import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar' -const CreateLocalNodePage = () => { +const CreateLocalNode = () => { const [autoConnectChecked, setAutoConnectChecked] = useState(false) return ( @@ -46,4 +47,4 @@ const CreateLocalNodePage = () => { ) } -export default CreateLocalNodePage +export default CreateLocalNode From 0ad30aa09a14495494cafa00afdf1be9199ba8e3 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 5 Jan 2024 14:41:50 +0200 Subject: [PATCH 69/77] feat: create story for port input with examples --- .../ConnectViaIP/PortInput.stories.tsx | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 src/pages/PairDevice/ConnectViaIP/PortInput.stories.tsx diff --git a/src/pages/PairDevice/ConnectViaIP/PortInput.stories.tsx b/src/pages/PairDevice/ConnectViaIP/PortInput.stories.tsx new file mode 100644 index 00000000..1d6dd830 --- /dev/null +++ b/src/pages/PairDevice/ConnectViaIP/PortInput.stories.tsx @@ -0,0 +1,31 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { withRouter } from 'storybook-addon-react-router-v6' + +import PortInput from './PortInput' + +const meta = { + title: 'Pair Device/PortInput', + component: PortInput, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + decorators: [withRouter], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const VC: Story = { + args: { + port: '9000', + portType: 'VC', + }, +} + +export const Beacon: Story = { + args: { + port: '5052', + portType: 'Beacon', + }, +} From 00384f7ccfd37ea5069886597ddb8f12fe46cd09 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 5 Jan 2024 14:51:15 +0200 Subject: [PATCH 70/77] fix: story of inputs row and add examples --- .../ConnectViaIP/ConnectViaIP.stories.tsx | 2 +- .../ConnectViaIP/InputsRow.stories.tsx | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.stories.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.stories.tsx index 0f183bf5..49eb7017 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.stories.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.stories.tsx @@ -16,6 +16,6 @@ const meta = { export default meta type Story = StoryObj -export const Page: Story = { +export const Default: Story = { args: {}, } diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx index 6020392f..446becf9 100644 --- a/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx +++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx @@ -16,10 +16,24 @@ const meta = { export default meta type Story = StoryObj +export const Node: Story = { + args: { + addressType: 'Node', + address: 'http://124.0.0.1', + port: '', + portType: '', + }, +} + export const VC: Story = { args: { addressType: 'Validator Client', portType: 'VC', + address: 'http://124.0.0.1', + port: '9000', + isAdvanced: true, + isSwitchOn: true, + isChecked: true, }, } @@ -27,5 +41,10 @@ export const Beacon: Story = { args: { addressType: 'Beacon', portType: 'Beacon', + address: 'http://124.0.0.1', + port: '5052', + isAdvanced: true, + isSwitchOn: true, + isChecked: true, }, } From 001cfee956e78ec4c9cdbcabca94aab94fab2caf Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 5 Jan 2024 15:01:58 +0200 Subject: [PATCH 71/77] fix: format label input field --- src/components/General/LabelInputField.css | 1 - src/components/General/LabelInputField.tsx | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/General/LabelInputField.css b/src/components/General/LabelInputField.css index 77e4504e..60ce1de9 100644 --- a/src/components/General/LabelInputField.css +++ b/src/components/General/LabelInputField.css @@ -2,5 +2,4 @@ background-color: #fff; border-radius: 12px; margin-top: 8px; - } diff --git a/src/components/General/LabelInputField.tsx b/src/components/General/LabelInputField.tsx index 44e1f76c..9068e9b0 100644 --- a/src/components/General/LabelInputField.tsx +++ b/src/components/General/LabelInputField.tsx @@ -1,5 +1,6 @@ import { Input as StatusInput, Text } from '@status-im/components' import { Label } from 'tamagui' + import './LabelInputField.css' type LabelInputProps = { From f926cd4860245ed029d482963e0188c573b0fa60 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 5 Jan 2024 15:08:23 +0200 Subject: [PATCH 72/77] fix: add with router decorator for header story --- src/components/General/Header.stories.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/General/Header.stories.tsx b/src/components/General/Header.stories.tsx index 418aed9a..5071c28a 100644 --- a/src/components/General/Header.stories.tsx +++ b/src/components/General/Header.stories.tsx @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react' import Header from './Header' +import { withRouter } from 'storybook-addon-react-router-v6' const meta = { title: 'General/Header', @@ -8,6 +9,7 @@ const meta = { parameters: { layout: 'centered', }, + decorators: [withRouter], tags: ['autodocs'], } satisfies Meta From da3016e3c982c498a5f1006d68e77af5ca4dd5fb Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Sat, 6 Jan 2024 21:10:57 +0200 Subject: [PATCH 73/77] feat: create constants for pair device --- src/constants.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/constants.ts b/src/constants.ts index 42ed82d7..8cd30887 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -113,3 +113,9 @@ export const VALIDATORS_DATA = [ status: 'Active', }, ] + +// Pair Device +export const VC = 'VC' +export const VALIDATOR_CLIENT = 'Validator Client' +export const BEACON = 'Beacon' +export const NODE = 'Node' From c315c5743c4147f49dc6a99ff5e315196865db76 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Sat, 6 Jan 2024 21:13:22 +0200 Subject: [PATCH 74/77] feat: add constants for ports --- src/constants.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/constants.ts b/src/constants.ts index 8cd30887..5dad5386 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -119,3 +119,5 @@ export const VC = 'VC' export const VALIDATOR_CLIENT = 'Validator Client' export const BEACON = 'Beacon' export const NODE = 'Node' +export const VC_PORT = '9000' +export const BEACON_PORT = '5052' From 330da5a072f921049a4715ac203afe8b8e2b09fe Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Sat, 6 Jan 2024 21:15:22 +0200 Subject: [PATCH 75/77] feat: use new constants for stories --- src/constants.ts | 1 + .../ConnectViaIP/InputsRow.stories.tsx | 31 ++++++++++++------- .../ConnectViaIP/PortInput.stories.tsx | 11 ++++--- 3 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/constants.ts b/src/constants.ts index 5dad5386..a48783b3 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -121,3 +121,4 @@ export const BEACON = 'Beacon' export const NODE = 'Node' export const VC_PORT = '9000' export const BEACON_PORT = '5052' +export const DEFAULT_ADDRESS = 'http://124.0.0.1' diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx index 446becf9..ce68ec17 100644 --- a/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx +++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx @@ -2,6 +2,15 @@ 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' const meta = { title: 'Pair Device/InputsRow', @@ -18,19 +27,19 @@ type Story = StoryObj export const Node: Story = { args: { - addressType: 'Node', - address: 'http://124.0.0.1', + addressType: NODE, + address: DEFAULT_ADDRESS, port: '', portType: '', }, } -export const VC: Story = { +export const ValidatorClient: Story = { args: { - addressType: 'Validator Client', - portType: 'VC', - address: 'http://124.0.0.1', - port: '9000', + addressType: VALIDATOR_CLIENT, + portType: VC, + address: DEFAULT_ADDRESS, + port: VC_PORT, isAdvanced: true, isSwitchOn: true, isChecked: true, @@ -39,10 +48,10 @@ export const VC: Story = { export const Beacon: Story = { args: { - addressType: 'Beacon', - portType: 'Beacon', - address: 'http://124.0.0.1', - port: '5052', + addressType: BEACON, + portType: BEACON, + address: DEFAULT_ADDRESS, + port: BEACON_PORT, isAdvanced: true, isSwitchOn: true, isChecked: true, diff --git a/src/pages/PairDevice/ConnectViaIP/PortInput.stories.tsx b/src/pages/PairDevice/ConnectViaIP/PortInput.stories.tsx index 1d6dd830..5d0600b5 100644 --- a/src/pages/PairDevice/ConnectViaIP/PortInput.stories.tsx +++ b/src/pages/PairDevice/ConnectViaIP/PortInput.stories.tsx @@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react' import { withRouter } from 'storybook-addon-react-router-v6' import PortInput from './PortInput' +import { BEACON, BEACON_PORT, VC, VC_PORT } from '../../../constants' const meta = { title: 'Pair Device/PortInput', @@ -16,16 +17,16 @@ const meta = { export default meta type Story = StoryObj -export const VC: Story = { +export const ValidatorClient: Story = { args: { - port: '9000', - portType: 'VC', + port: VC_PORT, + portType: VC, }, } export const Beacon: Story = { args: { - port: '5052', - portType: 'Beacon', + port: BEACON_PORT, + portType: BEACON, }, } From 47d7c45ba38e04dba5a6416873a89b8f5159d470 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Sat, 6 Jan 2024 21:16:05 +0200 Subject: [PATCH 76/77] feat: use new constants into components --- src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx | 11 ++++++----- src/pages/PairDevice/ConnectViaIP/InputsRow.tsx | 5 +++-- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx index 3a82e6eb..ee9ea537 100644 --- a/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx +++ b/src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx @@ -6,6 +6,7 @@ import { useSelector } from 'react-redux' import InputsRow from './InputsRow' import { RootState } from '../../../redux/store' +import { BEACON, NODE, VALIDATOR_CLIENT, VC } from '../../../constants' const ConnectViaIP = () => { const [apiToken, setApiToken] = useState('') @@ -48,8 +49,8 @@ const ConnectViaIP = () => { {isAdvanced ? ( { isChecked={isVcChecked} /> { /> ) : ( - + )} diff --git a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx index 8a72cfc5..e5aaaa0d 100644 --- a/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx +++ b/src/pages/PairDevice/ConnectViaIP/InputsRow.tsx @@ -4,6 +4,7 @@ import { Stack, Switch, XStack, YStack } from 'tamagui' import { RootState } from '../../../redux/store' import PortInput from './PortInput' +import { BEACON, VC } from '../../../constants' type InputsRowProps = { addressType: string @@ -83,8 +84,8 @@ const InputsRow = ({ ) : ( - - + + )}
From 577d7af3791baf0d4d2f5377bd9f628649d1f9cf Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Sat, 6 Jan 2024 21:17:24 +0200 Subject: [PATCH 77/77] feat: add default values in slice with constants --- src/redux/PairDevice/slice.ts | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/redux/PairDevice/slice.ts b/src/redux/PairDevice/slice.ts index 41b847ca..f223439e 100644 --- a/src/redux/PairDevice/slice.ts +++ b/src/redux/PairDevice/slice.ts @@ -1,5 +1,7 @@ import { createSlice } from '@reduxjs/toolkit' +import { BEACON, BEACON_PORT, DEFAULT_ADDRESS, VALIDATOR_CLIENT, VC_PORT } from '../../constants' + type PairDeviceStateType = { beaconPort: string vcPort: string @@ -15,11 +17,11 @@ type PairDeviceStateType = { } const initialState: PairDeviceStateType = { - beaconPort: '5052', - vcPort: '9000', - nodeAddress: 'http://124.0.0.1', - beaconAddress: 'http://124.0.0.1', - vcAddress: 'http://124.0.0.1', + beaconPort: BEACON_PORT, + vcPort: VC_PORT, + nodeAddress: DEFAULT_ADDRESS, + beaconAddress: DEFAULT_ADDRESS, + vcAddress: DEFAULT_ADDRESS, isNodeSwitchOn: true, isBeaconSwitchOn: true, isVcSwitchOn: true, @@ -33,34 +35,34 @@ const pairDeviceSlice = createSlice({ initialState, reducers: { setPort: (state, action) => { - if (action.payload.portType === 'Beacon') { + if (action.payload.portType === BEACON) { state.beaconPort = action.payload.value } else { state.vcPort = action.payload.value } }, setAddress: (state, action) => { - if (action.payload.addressType === 'Beacon') { + if (action.payload.addressType === BEACON) { state.beaconAddress = action.payload.value - } else if (action.payload.addressType === 'Validator Client') { + } else if (action.payload.addressType === VALIDATOR_CLIENT) { state.vcAddress = action.payload.value } else { state.nodeAddress = action.payload.value } }, setIsSwitchOn: (state, action) => { - if (action.payload.switchType === 'Beacon') { + if (action.payload.switchType === BEACON) { state.isBeaconSwitchOn = action.payload.value - } else if (action.payload.switchType === 'Validator Client') { + } else if (action.payload.switchType === VALIDATOR_CLIENT) { state.isVcSwitchOn = action.payload.value } else { state.isNodeSwitchOn = action.payload.value } }, setIsChecked: (state, action) => { - if (action.payload.checkType === 'Beacon') { + if (action.payload.checkType === BEACON) { state.isBeaconChecked = action.payload.value - } else if (action.payload.checkType === 'Validator Client') { + } else if (action.payload.checkType === VALIDATOR_CLIENT) { state.isVcChecked = action.payload.value } else { state.isNodeChecked = action.payload.value