diff --git a/public/icons/connection-blue.svg b/public/icons/connection-blue.svg new file mode 100644 index 00000000..bcab717c --- /dev/null +++ b/public/icons/connection-blue.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/App.tsx b/src/App.tsx index 9d936b7c..2bacaef0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,6 +15,7 @@ import CreateLocalNodePage from './pages/CreateLocalNodePage/CreateLocalNodePage import ValidatorOnboarding from './pages/ValidatorOnboarding/ValidatorOnboarding' import Dashboard from './pages/Dashboard/Dashboard' import './App.css' +import ConnectExistingInstance from './pages/ConnectExistingInstance/ConnectExistingInstance' const router = createBrowserRouter([ { @@ -37,6 +38,10 @@ const router = createBrowserRouter([ path: '/pair-device', element: , }, + { + path: '/pair-existing-instance', + element: , + }, { path: '/create-local-node', element: }, { path: '/validator-onboarding', element: }, { path: '/dashboard', element: }, diff --git a/src/pages/ConnectDevicePage/ConnectDevicePage.stories.ts b/src/pages/ConnectDevicePage/ConnectDevicePage.stories.ts index b9e2b668..7e31953b 100644 --- a/src/pages/ConnectDevicePage/ConnectDevicePage.stories.ts +++ b/src/pages/ConnectDevicePage/ConnectDevicePage.stories.ts @@ -4,7 +4,7 @@ import ConnectDevicePage from './ConnectDevicePage' import { withRouter } from 'storybook-addon-react-router-v6' const meta = { - title: 'Pages/ConnectDevicePage', + title: 'Connect-Device/ConnectDevicePage', component: ConnectDevicePage, parameters: { layout: 'centered', diff --git a/src/pages/ConnectExistingInstance/BeaconAddress.stories.tsx b/src/pages/ConnectExistingInstance/BeaconAddress.stories.tsx new file mode 100644 index 00000000..a6dae199 --- /dev/null +++ b/src/pages/ConnectExistingInstance/BeaconAddress.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import BeaconAddress from './BeaconAddress' +import { withRouter } from 'storybook-addon-react-router-v6' + +const meta = { + title: 'Connect-Device/BeaconAddress', + component: BeaconAddress, + 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/ConnectExistingInstance/BeaconAddress.tsx b/src/pages/ConnectExistingInstance/BeaconAddress.tsx new file mode 100644 index 00000000..07b793fe --- /dev/null +++ b/src/pages/ConnectExistingInstance/BeaconAddress.tsx @@ -0,0 +1,88 @@ +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) + + return ( + + + + + + {' '} + Protocol{' '} + + + {' '} + (HTTP/HTTPS) + + + + setIsBeaconSwitchOn(prev => !prev)} + > + + + + + + Beacon Address + + { + setInputAdress(e) + }} + /> + + + + + VC Port + + { + setVcPort(e) + }} + /> + + + setIsClientAddressChecked(prev => !prev)} + size={20} + /> + + + + + ) +} + +export default BeaconAddress diff --git a/src/pages/ConnectExistingInstance/ClientAddressRow.stories.tsx b/src/pages/ConnectExistingInstance/ClientAddressRow.stories.tsx new file mode 100644 index 00000000..c6eff0ff --- /dev/null +++ b/src/pages/ConnectExistingInstance/ClientAddressRow.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ClientAddressRow from './ClientAddressRow' +import { withRouter } from 'storybook-addon-react-router-v6' + +const meta = { + title: 'Connect-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/ConnectExistingInstance/ClientAddressRow.tsx b/src/pages/ConnectExistingInstance/ClientAddressRow.tsx new file mode 100644 index 00000000..5fec41d0 --- /dev/null +++ b/src/pages/ConnectExistingInstance/ClientAddressRow.tsx @@ -0,0 +1,87 @@ +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 diff --git a/src/pages/ConnectExistingInstance/ConnectExistingInctance.stories.tsx b/src/pages/ConnectExistingInstance/ConnectExistingInctance.stories.tsx new file mode 100644 index 00000000..2f22b83b --- /dev/null +++ b/src/pages/ConnectExistingInstance/ConnectExistingInctance.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ConnectExistingInstance from './ConnectExistingInstance' +import { withRouter } from 'storybook-addon-react-router-v6' + +const meta = { + title: 'Connect-Device/ConnectExistingInstance', + component: ConnectExistingInstance, + 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/ConnectExistingInstance/ConnectExistingInstance.tsx b/src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx new file mode 100644 index 00000000..bb4ff43e --- /dev/null +++ b/src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx @@ -0,0 +1,83 @@ +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/CreateLocalNodePage/CreateLocalNodePage.stories.ts b/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts index 4405c851..f904da0c 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: 'Pages/CreateLocalNodePage', + title: 'Connect-Device/CreateLocalNodePage', component: CreateLocalNodePage, parameters: { layout: 'centered', diff --git a/src/pages/PairDevice/PairDevice.stories.ts b/src/pages/PairDevice/PairDevice.stories.ts index 1bb8e39a..ad58a98a 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: 'Pages/PairDevice', + title: 'Connect-Device/PairDevice', component: PairDevice, parameters: { layout: 'centered', diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index d7915b0f..b8fb90e5 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -1,6 +1,6 @@ import { Separator, XStack, YStack } from 'tamagui' import { useState } from 'react' -import { Button, Checkbox, Text } from '@status-im/components' +import { Button, Text } from '@status-im/components' import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import SyncStatus from './SyncStatus' @@ -10,9 +10,9 @@ import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar' import GenerateId from './GenerateId' import { NodeIcon } from '@status-im/icons' import Header from '../../components/General/Header' +import Icon from '../../components/General/Icon' const PairDevice = () => { - const [autoChecked, setAutoChecked] = useState(false) const [isAwaitingPairing, setIsAwaitingPairing] = useState(false) const isPaired = false const isPairing = false @@ -41,19 +41,12 @@ const PairDevice = () => { )} - Settings + Advanced Settings - { - setAutoChecked(v) - }} - size={20} - /> - Auto Connect Paired Device + {isPaired && }