From db8c4b3ae1d9d9608c6d4859119f3f7a84f3e11b Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 18 Aug 2023 18:22:11 +0300
Subject: [PATCH] feat: add input with all functionalities for id

---
 src/pages/PairDevice/GenerateId.tsx | 65 +++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 src/pages/PairDevice/GenerateId.tsx

diff --git a/src/pages/PairDevice/GenerateId.tsx b/src/pages/PairDevice/GenerateId.tsx
new file mode 100644
index 00000000..283ca949
--- /dev/null
+++ b/src/pages/PairDevice/GenerateId.tsx
@@ -0,0 +1,65 @@
+import { Button, Input, Text as StatusText } from '@status-im/components'
+import { CompleteIdIcon, CopyIcon } from '@status-im/icons'
+import { Text } from '@tamagui/web'
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { XStack, YStack } from 'tamagui'
+import { v4 as uuidv4 } from 'uuid'
+
+type GenerateIdProps = {
+  isAwaitingPairing: boolean
+}
+
+const GenerateId = ({ isAwaitingPairing }: GenerateIdProps) => {
+  const [generatedId, setGeneratedId] = useState('')
+
+  const generateIdHandler = () => {
+    setGeneratedId(uuidv4())
+  }
+
+  const copyGeneratedIdHandler = () => {
+    navigator.clipboard.writeText(generatedId)
+  }
+
+  return (
+    <YStack space={'$2'}>
+      <XStack style={{ justifyContent: 'space-between' }}>
+        <StatusText size={19} weight={'semibold'}>
+          Pair with Command line
+        </StatusText>
+        <Button
+          variant="outline"
+          size={24}
+          icon={<CompleteIdIcon size={20} />}
+          onPress={generateIdHandler}
+        >
+          Generate ID
+        </Button>
+      </XStack>
+      <YStack space={'$2'}>
+        <StatusText size={15} color={'#647084'}>
+          Generated Pairing ID Input
+        </StatusText>
+        <Input
+          placeholder={'nimbus pair <random-pairing-id>'}
+          icon={
+            <CopyIcon size={20} onClick={copyGeneratedIdHandler} style={{ cursor: 'pointer' }} />
+          }
+          value={generatedId}
+          error={isAwaitingPairing}
+        />
+      </YStack>
+      <StatusText size={13} weight={'medium'} color={'#647084'}>
+        Please execute the following command with your randomly generated pairing id on the machine
+        where the Nimbus Service is running.{' '}
+        <Text style={{ fontStyle: 'italic', fontWeight: 'normal' }}>Learn how with our </Text>
+        <Link style={{ textDecoration: 'underline', color: 'inherit' }} to="/">
+          Documentation
+        </Link>
+        .
+      </StatusText>
+    </YStack>
+  )
+}
+
+export default GenerateId