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

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

@ -9,8 +9,9 @@ import { convertSecondsToTimerFormat } from '../../utilities'
import { useEffect, useState } from 'react'
type SyncStatusProps = {
isPairing: boolean
isPairedSuccessfully: boolean
}
const SyncStatus = ({ isPairing }: SyncStatusProps) => {
const SyncStatus = ({ isPairing, isPairedSuccessfully }: SyncStatusProps) => {
const [elapsedTime, setElapsedTime] = useState(0)
const [isAwaitingPairing, setIsAwaitingPairing] = useState(false)
@ -58,15 +59,24 @@ const SyncStatus = ({ isPairing }: SyncStatusProps) => {
variant="ghost"
/>
</XStack>
{isPairing ? (
<Text size={15} color={isAwaitingPairing ? '#EB5757' : '#09101C'} weight={'semibold'}>
Awaiting pairing connection...
</Text>
{!isPairedSuccessfully ? (
<>
{isPairing ? (
<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">
No pairing input provided.
<Text size={15} color="#2A4AF5" weight={'semibold'}>
Paired Successfully! 🥳
</Text>
)}
{isAwaitingPairing && (
<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. "