From ac6a8785f551665c1b225efdf2dbfe965773a2e1 Mon Sep 17 00:00:00 2001
From: Michele Balistreri <michele@bitgamma.com>
Date: Wed, 9 Oct 2024 16:21:19 +0200
Subject: [PATCH] added mnemonic select style

---
 src/components/steps/MnemonicScreen.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/steps/MnemonicScreen.tsx b/src/components/steps/MnemonicScreen.tsx
index 9d2a51b..d396e09 100644
--- a/src/components/steps/MnemonicScreen.tsx
+++ b/src/components/steps/MnemonicScreen.tsx
@@ -29,6 +29,7 @@ const  MnemonicScreen: FC<MnemonicScreenProps> = props => {
   const [isValid, setIsValid] = useState(false);
   const [step, setStep] = useState(LoadMnemonicSteps.Home);
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [selectedWords, setSelectedWords] = useState(Array(12).fill(false) as boolean[])
   const shuffledWords = useRef([] as string[]);
   const verifyIndexes = useRef([] as number[]);
 
@@ -75,6 +76,7 @@ const  MnemonicScreen: FC<MnemonicScreenProps> = props => {
   }
 
   const confirmMnemonic = () => {
+    setSelectedWords(Array(12).fill(false));
     shuffle(shuffledWords.current);
     verifyIndexes.current = [...Array(12).keys()];
     setCurrentIndex(0);
@@ -112,6 +114,10 @@ const  MnemonicScreen: FC<MnemonicScreenProps> = props => {
     }
 
     if (shuffledWords.current[selected] == wordAt(verifyIndexes.current[currentIndex])) {
+      var tmp = [...selectedWords];
+      tmp[selected] = true;
+      setSelectedWords(tmp);
+
       if (currentIndex == 2) {
         setIsValid(true);
       }
@@ -219,9 +225,9 @@ const  MnemonicScreen: FC<MnemonicScreenProps> = props => {
         numColumns={3} 
         style={[styles.mnemonicList, {marginTop: 10}]} 
         renderItem={({ item, index }) => 
-          <View style={[styles.mnemonicWordContainer, {paddingVertical: 20}]}>
+          <View style={[styles.mnemonicWordContainer, selectedWords[index] ? {backgroundColor: 'white'} : {}, {paddingVertical: 20}]}>
             <TouchableOpacity onPress={() => verifyWord(index)}>
-              <Text style={styles.mnemonicWord}> {item}</Text>
+              <Text style={[styles.mnemonicWord, selectedWords[index] ? {color: 'black'} : {}]}> {item}</Text>
             </TouchableOpacity>
           </View>
       }