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

Add isPairedSuccessfully state

This commit is contained in:
Hristo Nedelkov 2023-08-17 10:07:58 +03:00
parent 5b01e37652
commit 539e7377d1
2 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,12 +10,12 @@ import PairIcon from '../../components/Icons/PairIcon'
import CreateIcon from '../../components/Icons/CreateIcon' import CreateIcon from '../../components/Icons/CreateIcon'
import NodeIcon from '../../components/Icons/NodeIcon' import NodeIcon from '../../components/Icons/NodeIcon'
import Titles from '../../components/General/Titles' import Titles from '../../components/General/Titles'
import CompleteId from '../../components/Icons/CompleteId' // import CompleteId from '../../components/Icons/CompleteId'
const PairDevice = () => { const PairDevice = () => {
const [autoChecked, setAutoChecked] = useState(false) const [autoChecked, setAutoChecked] = useState(false)
const isPaired = true const isPaired = true
const isPairing = true const isPairing = false
const isPairedSuccessfully = true
console.log(uuidv4()) console.log(uuidv4())
return ( return (
@ -38,18 +38,22 @@ const PairDevice = () => {
<Text size={19} weight={'semibold'}> <Text size={19} weight={'semibold'}>
Pair with Command line Pair with Command line
</Text> </Text>
<Button variant="outline" size={24} icon={<CompleteId />}> <Button variant="outline" size={24}>
Generate ID Generate ID
</Button> </Button>
</XStack> </XStack>
<YStack space={'$2'}> <YStack space={'$2'}>
<Text size={13} weight={'medium'} color={'#647084'}> {!isPairedSuccessfully && (
Generated Pairing ID <>
</Text> <Text size={13} weight={'medium'} color={'#647084'}>
<Input placeholder={'nimbus pair <random-pairing-id>'} /> Generated Pairing ID
</Text>
<Input placeholder={'nimbus pair <random-pairing-id>'} />
</>
)}
</YStack> </YStack>
<Separator borderColor={'#e3e3e3'} /> <Separator borderColor={'#e3e3e3'} />
<SyncStatus isPairing={isPairing} /> <SyncStatus isPairing={isPairing} isPairedSuccessfully={isPairedSuccessfully} />
<Separator borderColor={'#e3e3e3'} /> <Separator borderColor={'#e3e3e3'} />
<Text size={19} weight={'semibold'} color="#09101C"> <Text size={19} weight={'semibold'} color="#09101C">
Settings Settings

24
src/pages/PairDevice/SyncStatus.tsx
View File

@ -9,8 +9,9 @@ import { convertSecondsToTimerFormat } from '../../utilities'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
type SyncStatusProps = { type SyncStatusProps = {
isPairing: boolean isPairing: boolean
isPairedSuccessfully: boolean
} }
const SyncStatus = ({ isPairing }: SyncStatusProps) => { const SyncStatus = ({ isPairing, isPairedSuccessfully }: SyncStatusProps) => {
const [elapsedTime, setElapsedTime] = useState(0) const [elapsedTime, setElapsedTime] = useState(0)
const [isAwaitingPairing, setIsAwaitingPairing] = useState(false) const [isAwaitingPairing, setIsAwaitingPairing] = useState(false)
@ -58,15 +59,24 @@ const SyncStatus = ({ isPairing }: SyncStatusProps) => {
variant="ghost" variant="ghost"
/> />
</XStack> </XStack>
{isPairing ? ( {!isPairedSuccessfully ? (
<Text size={15} color={isAwaitingPairing ? '#EB5757' : '#09101C'} weight={'semibold'}> <>
Awaiting pairing connection... {isPairing ? (
</Text> <Text size={15} color={isAwaitingPairing ? '#EB5757' : '#09101C'} weight={'semibold'}>
Awaiting pairing connection...
</Text>
) : (
<Text size={13} color="#A1ABBD">
No pairing input provided.
</Text>
)}
</>
) : ( ) : (
<Text size={13} color="#A1ABBD"> <Text size={15} color="#2A4AF5" weight={'semibold'}>
No pairing input provided. Paired Successfully! 🥳
</Text> </Text>
)} )}
{isAwaitingPairing && ( {isAwaitingPairing && (
<InformationBox <InformationBox
message="No connection has been created to a Nimbus service for over 3 minutes. Please ensure that the generated pairing ID was input into the CLI. If you are unable to pair device, consider connect via IP. " message="No connection has been created to a Nimbus service for over 3 minutes. Please ensure that the generated pairing ID was input into the CLI. If you are unable to pair device, consider connect via IP. "