style: format
This commit is contained in:
Rickard Andersson
parent
481113a8f3
commit
fb94ca76d5
|
|
@ -4,18 +4,18 @@ 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],
|
||||
title: 'Connect-Device/BeaconAddress',
|
||||
component: BeaconAddress,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
decorators: [withRouter],
|
||||
} satisfies Meta<typeof BeaconAddress>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Page: Story = {
|
||||
args: {},
|
||||
args: {},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,60 +1,88 @@
|
|||
import { Checkbox, Input, Text } from "@status-im/components"
|
||||
import { useState } from "react"
|
||||
import { Stack, Switch, XStack, YStack } from "tamagui"
|
||||
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)
|
||||
const [isBeaconSwitchOn, setIsBeaconSwitchOn] = useState(false)
|
||||
const [inputAdress, setInputAdress] = useState('')
|
||||
const [vcPort, setVcPort] = useState('')
|
||||
const [isClientAddressChecked, setIsClientAddressChecked] = useState(false)
|
||||
|
||||
return (
|
||||
<YStack>
|
||||
<XStack justifyContent={'space-between'}>
|
||||
<YStack space={'$2'}>
|
||||
<YStack>
|
||||
<Text size={13} color={'#647084'} weight={'semibold'}> Protocol </Text>
|
||||
<Text size={11} color={'#647084'} weight={'regular'}> (HTTP/HTTPS)</Text>
|
||||
</YStack>
|
||||
return (
|
||||
<YStack>
|
||||
<XStack justifyContent={'space-between'}>
|
||||
<YStack space={'$2'}>
|
||||
<YStack>
|
||||
<Text size={13} color={'#647084'} weight={'semibold'}>
|
||||
{' '}
|
||||
Protocol{' '}
|
||||
</Text>
|
||||
<Text size={11} color={'#647084'} weight={'regular'}>
|
||||
{' '}
|
||||
(HTTP/HTTPS)
|
||||
</Text>
|
||||
</YStack>
|
||||
|
||||
<Switch size="$1" style={isBeaconSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }} checked={isBeaconSwitchOn} onCheckedChange={() => setIsBeaconSwitchOn(prev => !prev)}>
|
||||
<Switch.Thumb style={{ right: 7, bottom: 3, backgroundColor: '#fff', height: '16px', width: '16px' }} />
|
||||
</Switch>
|
||||
</YStack>
|
||||
<YStack space={'$2'}>
|
||||
<Text size={11} color={'#647084'} weight={'regular'}>
|
||||
Beacon Address
|
||||
</Text>
|
||||
<Input
|
||||
placeholder={''}
|
||||
value={inputAdress}
|
||||
onChangeText={(e) => { setInputAdress(e) }}
|
||||
/>
|
||||
</YStack>
|
||||
|
||||
<YStack space={'$2'}>
|
||||
<Text size={11} color={'#647084'} weight={'regular'}>
|
||||
VC Port
|
||||
</Text>
|
||||
<Input
|
||||
placeholder={''}
|
||||
value={vcPort}
|
||||
onChangeText={(e) => { setVcPort(e) }}
|
||||
/>
|
||||
</YStack>
|
||||
<Stack style={{ alignItems: 'center', justifyContent: 'center' }} height={'100%'} marginTop={'10px'} width={'fit-content'} >
|
||||
<Checkbox
|
||||
id='checkforaddress'
|
||||
variant="outline"
|
||||
selected={isClientAddressChecked}
|
||||
onCheckedChange={() => setIsClientAddressChecked(prev => !prev)}
|
||||
size={20}
|
||||
/>
|
||||
</Stack>
|
||||
</XStack>
|
||||
<XStack></XStack>
|
||||
<Switch
|
||||
size="$1"
|
||||
style={isBeaconSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }}
|
||||
checked={isBeaconSwitchOn}
|
||||
onCheckedChange={() => setIsBeaconSwitchOn(prev => !prev)}
|
||||
>
|
||||
<Switch.Thumb
|
||||
style={{
|
||||
right: 7,
|
||||
bottom: 3,
|
||||
backgroundColor: '#fff',
|
||||
height: '16px',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
</Switch>
|
||||
</YStack>
|
||||
)
|
||||
<YStack space={'$2'}>
|
||||
<Text size={11} color={'#647084'} weight={'regular'}>
|
||||
Beacon Address
|
||||
</Text>
|
||||
<Input
|
||||
placeholder={''}
|
||||
value={inputAdress}
|
||||
onChangeText={e => {
|
||||
setInputAdress(e)
|
||||
}}
|
||||
/>
|
||||
</YStack>
|
||||
|
||||
<YStack space={'$2'}>
|
||||
<Text size={11} color={'#647084'} weight={'regular'}>
|
||||
VC Port
|
||||
</Text>
|
||||
<Input
|
||||
placeholder={''}
|
||||
value={vcPort}
|
||||
onChangeText={e => {
|
||||
setVcPort(e)
|
||||
}}
|
||||
/>
|
||||
</YStack>
|
||||
<Stack
|
||||
style={{ alignItems: 'center', justifyContent: 'center' }}
|
||||
height={'100%'}
|
||||
marginTop={'10px'}
|
||||
width={'fit-content'}
|
||||
>
|
||||
<Checkbox
|
||||
id="checkforaddress"
|
||||
variant="outline"
|
||||
selected={isClientAddressChecked}
|
||||
onCheckedChange={() => setIsClientAddressChecked(prev => !prev)}
|
||||
size={20}
|
||||
/>
|
||||
</Stack>
|
||||
</XStack>
|
||||
<XStack></XStack>
|
||||
</YStack>
|
||||
)
|
||||
}
|
||||
|
||||
export default BeaconAddress
|
||||
export default BeaconAddress
|
||||
|
|
|
|||
|
|
@ -4,18 +4,18 @@ 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],
|
||||
title: 'Connect-Device/ClientAddressRow',
|
||||
component: ClientAddressRow,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
decorators: [withRouter],
|
||||
} satisfies Meta<typeof ClientAddressRow>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Page: Story = {
|
||||
args: {},
|
||||
args: {},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,60 +1,87 @@
|
|||
import { Checkbox, Input, Text } from "@status-im/components"
|
||||
import { useState } from "react"
|
||||
import { Stack, Switch, XStack, YStack } from "tamagui"
|
||||
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)
|
||||
const [isBeaconSwitchOn, setIsBeaconSwitchOn] = useState(false)
|
||||
const [inputAdress, setInputAdress] = useState('')
|
||||
const [vcPort, setVcPort] = useState('')
|
||||
const [isClientAddressChecked, setIsClientAddressChecked] = useState(false)
|
||||
|
||||
return (
|
||||
<YStack>
|
||||
<XStack justifyContent={'space-between'}>
|
||||
<YStack space={'$2'}>
|
||||
<YStack>
|
||||
<Text size={13} color={'#647084'} weight={'semibold'}> Protocol </Text>
|
||||
<Text size={11} color={'#647084'} weight={'regular'}> (HTTP/HTTPS)</Text>
|
||||
</YStack>
|
||||
<Switch size="$1" style={isBeaconSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }} checked={isBeaconSwitchOn} onCheckedChange={() => setIsBeaconSwitchOn(prev => !prev)}>
|
||||
<Switch.Thumb style={{ right: 7, bottom: 3, backgroundColor: '#fff', height: '16px', width: '16px' }} />
|
||||
</Switch>
|
||||
</YStack>
|
||||
<YStack space={'$2'}>
|
||||
<Text size={11} color={'#647084'} weight={'regular'}>
|
||||
Validator Client Address
|
||||
</Text>
|
||||
<Input
|
||||
placeholder={''}
|
||||
value={inputAdress}
|
||||
onChangeText={(e) => { setInputAdress(e) }}
|
||||
/>
|
||||
</YStack>
|
||||
|
||||
<YStack space={'$2'}>
|
||||
<Text size={11} color={'#647084'} weight={'regular'}>
|
||||
VC Port
|
||||
</Text>
|
||||
<Input
|
||||
placeholder={''}
|
||||
value={vcPort}
|
||||
onChangeText={(e) => { setVcPort(e) }}
|
||||
/>
|
||||
</YStack>
|
||||
<Stack style={{ alignItems: 'center', justifyContent: 'center' }} height={'100%'} marginTop={'10px'} width={'fit-content'} >
|
||||
<Checkbox
|
||||
id='checkforaddress'
|
||||
variant="outline"
|
||||
selected={isClientAddressChecked}
|
||||
onCheckedChange={() => setIsClientAddressChecked(prev => !prev)}
|
||||
size={20}
|
||||
|
||||
/>
|
||||
</Stack>
|
||||
</XStack>
|
||||
<XStack></XStack>
|
||||
return (
|
||||
<YStack>
|
||||
<XStack justifyContent={'space-between'}>
|
||||
<YStack space={'$2'}>
|
||||
<YStack>
|
||||
<Text size={13} color={'#647084'} weight={'semibold'}>
|
||||
{' '}
|
||||
Protocol{' '}
|
||||
</Text>
|
||||
<Text size={11} color={'#647084'} weight={'regular'}>
|
||||
{' '}
|
||||
(HTTP/HTTPS)
|
||||
</Text>
|
||||
</YStack>
|
||||
<Switch
|
||||
size="$1"
|
||||
style={isBeaconSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }}
|
||||
checked={isBeaconSwitchOn}
|
||||
onCheckedChange={() => setIsBeaconSwitchOn(prev => !prev)}
|
||||
>
|
||||
<Switch.Thumb
|
||||
style={{
|
||||
right: 7,
|
||||
bottom: 3,
|
||||
backgroundColor: '#fff',
|
||||
height: '16px',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
</Switch>
|
||||
</YStack>
|
||||
)
|
||||
<YStack space={'$2'}>
|
||||
<Text size={11} color={'#647084'} weight={'regular'}>
|
||||
Validator Client Address
|
||||
</Text>
|
||||
<Input
|
||||
placeholder={''}
|
||||
value={inputAdress}
|
||||
onChangeText={e => {
|
||||
setInputAdress(e)
|
||||
}}
|
||||
/>
|
||||
</YStack>
|
||||
|
||||
<YStack space={'$2'}>
|
||||
<Text size={11} color={'#647084'} weight={'regular'}>
|
||||
VC Port
|
||||
</Text>
|
||||
<Input
|
||||
placeholder={''}
|
||||
value={vcPort}
|
||||
onChangeText={e => {
|
||||
setVcPort(e)
|
||||
}}
|
||||
/>
|
||||
</YStack>
|
||||
<Stack
|
||||
style={{ alignItems: 'center', justifyContent: 'center' }}
|
||||
height={'100%'}
|
||||
marginTop={'10px'}
|
||||
width={'fit-content'}
|
||||
>
|
||||
<Checkbox
|
||||
id="checkforaddress"
|
||||
variant="outline"
|
||||
selected={isClientAddressChecked}
|
||||
onCheckedChange={() => setIsClientAddressChecked(prev => !prev)}
|
||||
size={20}
|
||||
/>
|
||||
</Stack>
|
||||
</XStack>
|
||||
<XStack></XStack>
|
||||
</YStack>
|
||||
)
|
||||
}
|
||||
|
||||
export default ClientAddressRow
|
||||
export default ClientAddressRow
|
||||
|
|
|
|||
|
|
@ -12,72 +12,72 @@ import ClientAddressRow from './ClientAddressRow'
|
|||
import BeaconAddress from './BeaconAddress'
|
||||
|
||||
const ConnectExistingInstance = () => {
|
||||
const [encryptedPassword, setEncryptedPassword] = useState('')
|
||||
const [encryptedPassword, setEncryptedPassword] = useState('')
|
||||
|
||||
const changeEncryptedPasswordHandler = (value: string) => {
|
||||
setEncryptedPassword(value)
|
||||
}
|
||||
const changeEncryptedPasswordHandler = (value: string) => {
|
||||
setEncryptedPassword(value)
|
||||
}
|
||||
|
||||
return (
|
||||
<PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
|
||||
<YStack
|
||||
space={'$3'}
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
}}
|
||||
>
|
||||
<Header selectedTag="pair" />
|
||||
<Titles title="Connect to existing Nimbus Instance" subtitle="Pair your existing device to the Nimbus Node Manager " />
|
||||
<XStack style={{ justifyContent: 'space-between' }}>
|
||||
<Text size={19} weight={'semibold'} color="#09101C">
|
||||
Connect via IP
|
||||
</Text>
|
||||
<Button
|
||||
variant="grey"
|
||||
size={24}
|
||||
icon={<SettingsIcon size={20} />}
|
||||
|
||||
>
|
||||
Advanced
|
||||
</Button>
|
||||
</XStack>
|
||||
<ClientAddressRow />
|
||||
<BeaconAddress />
|
||||
<Separator borderColor={'#e3e3e3'} />
|
||||
<YStack space={'$2'}>
|
||||
<Text size={11} color={'#647084'}>
|
||||
API Token
|
||||
</Text>
|
||||
<Input
|
||||
placeholder={'*****_*******_******'}
|
||||
icon={
|
||||
<ClearIcon
|
||||
size={16}
|
||||
color="#A1ABBD"
|
||||
onClick={() => setEncryptedPassword('')}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
}
|
||||
value={encryptedPassword}
|
||||
onChangeText={changeEncryptedPasswordHandler}
|
||||
/>
|
||||
</YStack>
|
||||
<Separator borderColor={'#e3e3e3'} />
|
||||
<Text size={19} weight={'semibold'} color="#09101C">
|
||||
Advanced Settings
|
||||
</Text>
|
||||
<XStack space={'$4'}>
|
||||
<Button icon={<CompleteIdIcon size={20} color='#2A4AF5' />} variant='outline' >Pair with ID </Button>
|
||||
</XStack>
|
||||
<Separator borderColor={'#e3e3e3'} />
|
||||
<XStack>
|
||||
<Button icon={<NodeIcon size={20} />} variant='blue' >
|
||||
Continue
|
||||
</Button>
|
||||
</XStack>
|
||||
</YStack>
|
||||
</PageWrapperShadow>
|
||||
)
|
||||
return (
|
||||
<PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
|
||||
<YStack
|
||||
space={'$3'}
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
}}
|
||||
>
|
||||
<Header selectedTag="pair" />
|
||||
<Titles
|
||||
title="Connect to existing Nimbus Instance"
|
||||
subtitle="Pair your existing device to the Nimbus Node Manager "
|
||||
/>
|
||||
<XStack style={{ justifyContent: 'space-between' }}>
|
||||
<Text size={19} weight={'semibold'} color="#09101C">
|
||||
Connect via IP
|
||||
</Text>
|
||||
<Button variant="grey" size={24} icon={<SettingsIcon size={20} />}>
|
||||
Advanced
|
||||
</Button>
|
||||
</XStack>
|
||||
<ClientAddressRow />
|
||||
<BeaconAddress />
|
||||
<Separator borderColor={'#e3e3e3'} />
|
||||
<YStack space={'$2'}>
|
||||
<Text size={11} color={'#647084'}>
|
||||
API Token
|
||||
</Text>
|
||||
<Input
|
||||
placeholder={'*****_*******_******'}
|
||||
icon={
|
||||
<ClearIcon
|
||||
size={16}
|
||||
color="#A1ABBD"
|
||||
onClick={() => setEncryptedPassword('')}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
}
|
||||
value={encryptedPassword}
|
||||
onChangeText={changeEncryptedPasswordHandler}
|
||||
/>
|
||||
</YStack>
|
||||
<Separator borderColor={'#e3e3e3'} />
|
||||
<Text size={19} weight={'semibold'} color="#09101C">
|
||||
Advanced Settings
|
||||
</Text>
|
||||
<XStack space={'$4'}>
|
||||
<Button icon={<CompleteIdIcon size={20} color="#2A4AF5" />} variant="outline">
|
||||
Pair with ID{' '}
|
||||
</Button>
|
||||
</XStack>
|
||||
<Separator borderColor={'#e3e3e3'} />
|
||||
<XStack>
|
||||
<Button icon={<NodeIcon size={20} />} variant="blue">
|
||||
Continue
|
||||
</Button>
|
||||
</XStack>
|
||||
</YStack>
|
||||
</PageWrapperShadow>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConnectExistingInstance
|
||||
|
|
|
|||
|
|
@ -44,7 +44,10 @@ const PairDevice = () => {
|
|||
Advanced Settings
|
||||
</Text>
|
||||
<XStack space={'$4'}>
|
||||
<Button icon={<Icon src='/icons/connection-blue.svg' width={20} />} variant='outline' > Connect via IP </Button>
|
||||
<Button icon={<Icon src="/icons/connection-blue.svg" width={20} />} variant="outline">
|
||||
{' '}
|
||||
Connect via IP{' '}
|
||||
</Button>
|
||||
</XStack>
|
||||
{isPaired && <CreateAvatar />}
|
||||
<Separator borderColor={'#e3e3e3'} />
|
||||
|
|
|
|||
Loading…
Reference in New Issue