status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: format

This commit is contained in:
Rickard Andersson 2023-09-26 13:01:02 +03:00
parent 481113a8f3
commit fb94ca76d5
6 changed files with 246 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/ConnectExistingInstance/BeaconAddress.stories.tsx
View File

@ -4,18 +4,18 @@ import BeaconAddress from './BeaconAddress'
import { withRouter } from 'storybook-addon-react-router-v6' import { withRouter } from 'storybook-addon-react-router-v6'
const meta = { const meta = {
title: 'Connect-Device/BeaconAddress', title: 'Connect-Device/BeaconAddress',
component: BeaconAddress, component: BeaconAddress,
parameters: { parameters: {
layout: 'centered', layout: 'centered',
}, },
tags: ['autodocs'], tags: ['autodocs'],
decorators: [withRouter], decorators: [withRouter],
} satisfies Meta<typeof BeaconAddress> } satisfies Meta<typeof BeaconAddress>
export default meta export default meta
type Story = StoryObj<typeof meta> type Story = StoryObj<typeof meta>
export const Page: Story = { export const Page: Story = {
args: {}, args: {},
} }

134
src/pages/ConnectExistingInstance/BeaconAddress.tsx
View File

@ -1,60 +1,88 @@
import { Checkbox, Input, Text } from "@status-im/components" import { Checkbox, Input, Text } from '@status-im/components'
import { useState } from "react" import { useState } from 'react'
import { Stack, Switch, XStack, YStack } from "tamagui" import { Stack, Switch, XStack, YStack } from 'tamagui'
const BeaconAddress = () => { const BeaconAddress = () => {
const [isBeaconSwitchOn, setIsBeaconSwitchOn] = useState(false) const [isBeaconSwitchOn, setIsBeaconSwitchOn] = useState(false)
const [inputAdress, setInputAdress] = useState('') const [inputAdress, setInputAdress] = useState('')
const [vcPort, setVcPort] = useState('') const [vcPort, setVcPort] = useState('')
const [isClientAddressChecked, setIsClientAddressChecked] = useState(false) const [isClientAddressChecked, setIsClientAddressChecked] = useState(false)
return ( return (
<YStack> <YStack>
<XStack justifyContent={'space-between'}> <XStack justifyContent={'space-between'}>
<YStack space={'$2'}> <YStack space={'$2'}>
<YStack> <YStack>
<Text size={13} color={'#647084'} weight={'semibold'}> Protocol </Text> <Text size={13} color={'#647084'} weight={'semibold'}>
<Text size={11} color={'#647084'} weight={'regular'}> (HTTP/HTTPS)</Text> {' '}
</YStack> 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
<Switch.Thumb style={{ right: 7, bottom: 3, backgroundColor: '#fff', height: '16px', width: '16px' }} /> size="$1"
</Switch> style={isBeaconSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }}
</YStack> checked={isBeaconSwitchOn}
<YStack space={'$2'}> onCheckedChange={() => setIsBeaconSwitchOn(prev => !prev)}
<Text size={11} color={'#647084'} weight={'regular'}> >
Beacon Address <Switch.Thumb
</Text> style={{
<Input right: 7,
placeholder={''} bottom: 3,
value={inputAdress} backgroundColor: '#fff',
onChangeText={(e) => { setInputAdress(e) }} height: '16px',
/> width: '16px',
</YStack> }}
/>
<YStack space={'$2'}> </Switch>
<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> </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

16
src/pages/ConnectExistingInstance/ClientAddressRow.stories.tsx
View File

@ -4,18 +4,18 @@ import ClientAddressRow from './ClientAddressRow'
import { withRouter } from 'storybook-addon-react-router-v6' import { withRouter } from 'storybook-addon-react-router-v6'
const meta = { const meta = {
title: 'Connect-Device/ClientAddressRow', title: 'Connect-Device/ClientAddressRow',
component: ClientAddressRow, component: ClientAddressRow,
parameters: { parameters: {
layout: 'centered', layout: 'centered',
}, },
tags: ['autodocs'], tags: ['autodocs'],
decorators: [withRouter], decorators: [withRouter],
} satisfies Meta<typeof ClientAddressRow> } satisfies Meta<typeof ClientAddressRow>
export default meta export default meta
type Story = StoryObj<typeof meta> type Story = StoryObj<typeof meta>
export const Page: Story = { export const Page: Story = {
args: {}, args: {},
} }

135
src/pages/ConnectExistingInstance/ClientAddressRow.tsx
View File

@ -1,60 +1,87 @@
import { Checkbox, Input, Text } from "@status-im/components" import { Checkbox, Input, Text } from '@status-im/components'
import { useState } from "react" import { useState } from 'react'
import { Stack, Switch, XStack, YStack } from "tamagui" import { Stack, Switch, XStack, YStack } from 'tamagui'
const ClientAddressRow = () => { const ClientAddressRow = () => {
const [isBeaconSwitchOn, setIsBeaconSwitchOn] = useState(false) const [isBeaconSwitchOn, setIsBeaconSwitchOn] = useState(false)
const [inputAdress, setInputAdress] = useState('') const [inputAdress, setInputAdress] = useState('')
const [vcPort, setVcPort] = useState('') const [vcPort, setVcPort] = useState('')
const [isClientAddressChecked, setIsClientAddressChecked] = useState(false) const [isClientAddressChecked, setIsClientAddressChecked] = useState(false)
return ( return (
<YStack> <YStack>
<XStack justifyContent={'space-between'}> <XStack justifyContent={'space-between'}>
<YStack space={'$2'}> <YStack space={'$2'}>
<YStack> <YStack>
<Text size={13} color={'#647084'} weight={'semibold'}> Protocol </Text> <Text size={13} color={'#647084'} weight={'semibold'}>
<Text size={11} color={'#647084'} weight={'regular'}> (HTTP/HTTPS)</Text> {' '}
</YStack> Protocol{' '}
<Switch size="$1" style={isBeaconSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }} checked={isBeaconSwitchOn} onCheckedChange={() => setIsBeaconSwitchOn(prev => !prev)}> </Text>
<Switch.Thumb style={{ right: 7, bottom: 3, backgroundColor: '#fff', height: '16px', width: '16px' }} /> <Text size={11} color={'#647084'} weight={'regular'}>
</Switch> {' '}
</YStack> (HTTP/HTTPS)
<YStack space={'$2'}> </Text>
<Text size={11} color={'#647084'} weight={'regular'}> </YStack>
Validator Client Address <Switch
</Text> size="$1"
<Input style={isBeaconSwitchOn ? { backgroundColor: '#2A4AF5' } : { backgroundColor: 'grey' }}
placeholder={''} checked={isBeaconSwitchOn}
value={inputAdress} onCheckedChange={() => setIsBeaconSwitchOn(prev => !prev)}
onChangeText={(e) => { setInputAdress(e) }} >
/> <Switch.Thumb
</YStack> style={{
right: 7,
<YStack space={'$2'}> bottom: 3,
<Text size={11} color={'#647084'} weight={'regular'}> backgroundColor: '#fff',
VC Port height: '16px',
</Text> width: '16px',
<Input }}
placeholder={''} />
value={vcPort} </Switch>
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> </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

128
src/pages/ConnectExistingInstance/ConnectExistingInstance.tsx
View File

@ -12,72 +12,72 @@ import ClientAddressRow from './ClientAddressRow'
import BeaconAddress from './BeaconAddress' import BeaconAddress from './BeaconAddress'
const ConnectExistingInstance = () => { const ConnectExistingInstance = () => {
const [encryptedPassword, setEncryptedPassword] = useState('') const [encryptedPassword, setEncryptedPassword] = useState('')
const changeEncryptedPasswordHandler = (value: string) => { const changeEncryptedPasswordHandler = (value: string) => {
setEncryptedPassword(value) setEncryptedPassword(value)
} }
return ( return (
<PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}> <PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
<YStack <YStack
space={'$3'} space={'$3'}
style={{ style={{
maxWidth: '100%', maxWidth: '100%',
}} }}
> >
<Header selectedTag="pair" /> <Header selectedTag="pair" />
<Titles title="Connect to existing Nimbus Instance" subtitle="Pair your existing device to the Nimbus Node Manager " /> <Titles
<XStack style={{ justifyContent: 'space-between' }}> title="Connect to existing Nimbus Instance"
<Text size={19} weight={'semibold'} color="#09101C"> subtitle="Pair your existing device to the Nimbus Node Manager "
Connect via IP />
</Text> <XStack style={{ justifyContent: 'space-between' }}>
<Button <Text size={19} weight={'semibold'} color="#09101C">
variant="grey" Connect via IP
size={24} </Text>
icon={<SettingsIcon size={20} />} <Button variant="grey" size={24} icon={<SettingsIcon size={20} />}>
Advanced
> </Button>
Advanced </XStack>
</Button> <ClientAddressRow />
</XStack> <BeaconAddress />
<ClientAddressRow /> <Separator borderColor={'#e3e3e3'} />
<BeaconAddress /> <YStack space={'$2'}>
<Separator borderColor={'#e3e3e3'} /> <Text size={11} color={'#647084'}>
<YStack space={'$2'}> API Token
<Text size={11} color={'#647084'}> </Text>
API Token <Input
</Text> placeholder={'*****_*******_******'}
<Input icon={
placeholder={'*****_*******_******'} <ClearIcon
icon={ size={16}
<ClearIcon color="#A1ABBD"
size={16} onClick={() => setEncryptedPassword('')}
color="#A1ABBD" style={{ cursor: 'pointer' }}
onClick={() => setEncryptedPassword('')} />
style={{ cursor: 'pointer' }} }
/> value={encryptedPassword}
} onChangeText={changeEncryptedPasswordHandler}
value={encryptedPassword} />
onChangeText={changeEncryptedPasswordHandler} </YStack>
/> <Separator borderColor={'#e3e3e3'} />
</YStack> <Text size={19} weight={'semibold'} color="#09101C">
<Separator borderColor={'#e3e3e3'} /> Advanced Settings
<Text size={19} weight={'semibold'} color="#09101C"> </Text>
Advanced Settings <XStack space={'$4'}>
</Text> <Button icon={<CompleteIdIcon size={20} color="#2A4AF5" />} variant="outline">
<XStack space={'$4'}> Pair with ID{' '}
<Button icon={<CompleteIdIcon size={20} color='#2A4AF5' />} variant='outline' >Pair with ID </Button> </Button>
</XStack> </XStack>
<Separator borderColor={'#e3e3e3'} /> <Separator borderColor={'#e3e3e3'} />
<XStack> <XStack>
<Button icon={<NodeIcon size={20} />} variant='blue' > <Button icon={<NodeIcon size={20} />} variant="blue">
Continue Continue
</Button> </Button>
</XStack> </XStack>
</YStack> </YStack>
</PageWrapperShadow> </PageWrapperShadow>
) )
} }
export default ConnectExistingInstance export default ConnectExistingInstance

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

@ -44,7 +44,10 @@ const PairDevice = () => {
Advanced Settings Advanced Settings
</Text> </Text>
<XStack space={'$4'}> <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> </XStack>
{isPaired && <CreateAvatar />} {isPaired && <CreateAvatar />}
<Separator borderColor={'#e3e3e3'} /> <Separator borderColor={'#e3e3e3'} />