From 295c25e58244cbad67ba443e4719657b2348bb8d Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 1 Sep 2023 13:52:50 +0300
Subject: [PATCH] feat: create autocomplete with redux and web-bip39

---
 .../KeyGeneration/AutocompleteInput.tsx       | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx
new file mode 100644
index 00000000..04ff64fd
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx
@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import wordlist from 'web-bip39/wordlists/english'
+
+import { RootState } from '../../../redux/store'
+import { setWord } from '../../../redux/ValidatorOnboarding/KeyGeneration/slice'
+
+type AutocompleteInputProps = {
+  index: number
+}
+
+const AutocompleteInput = ({ index }: AutocompleteInputProps) => {
+  const [suggestions, setSuggestions] = useState<string[]>([])
+  const word = useSelector((state: RootState) => state.keyGeneration.words[index])
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    setSuggestions(wordlist.filter(w => w.startsWith(word)))
+  }, [word])
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    dispatch(setWord({ index, word: value }))
+  }
+
+  return (
+    <div>
+      <input type="text" value={word} onChange={handleInputChange} />
+      <div>
+        {suggestions.map(s => (
+          <div key={s}>{s}</div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default AutocompleteInput