diff --git a/src/components/steps/MnemonicScreen.tsx b/src/components/steps/MnemonicScreen.tsx index dc8e4af..9d2a51b 100644 --- a/src/components/steps/MnemonicScreen.tsx +++ b/src/components/steps/MnemonicScreen.tsx @@ -61,7 +61,7 @@ const MnemonicScreen: FC = props => { } const generateMnemonic = () => { - setIsValid(true); + setIsValid(false); const mn = bip39.generateMnemonic(wordlist, 128); shuffledWords.current = mn.split(' '); setMnemonic(mn); @@ -79,6 +79,7 @@ const MnemonicScreen: FC = props => { verifyIndexes.current = [...Array(12).keys()]; setCurrentIndex(0); shuffle(verifyIndexes.current); + verifyIndexes.current = verifyIndexes.current.slice(0, 3) setStep(LoadMnemonicSteps.ConfirmMnemonic); } @@ -106,12 +107,16 @@ const MnemonicScreen: FC = props => { } const verifyWord = (selected: number) => { - if (shuffledWords[selected] == wordAt(currentIndex)) { + if (currentIndex >= 3) { + return; + } + + if (shuffledWords.current[selected] == wordAt(verifyIndexes.current[currentIndex])) { if (currentIndex == 2) { - submitMnemonic(); - } else { - setCurrentIndex(currentIndex + 1); + setIsValid(true); } + + setCurrentIndex(currentIndex + 1); } else { resetConfirm(); } @@ -162,7 +167,7 @@ const MnemonicScreen: FC = props => { - Write Down Your Seed Phrase + Write Down Your Seed Phrase This is your seed phrase. Write it down on a paper and keep it in a safe place. You'll be asked to re-enter this phrase (in order) on the next step. = props => { } { step == LoadMnemonicSteps.ConfirmMnemonic && - {mnemonic} + + + + + Confirm Seed Phrase + + Select each word in the order it was presented to you + { + if (currentIndex <= index) { + return ( + + {item + 1} + ) + } else { + return ( + + {wordAt(verifyIndexes.current[index])} + ) + } + }} /> + + + + verifyWord(index)}> + {item} + + + } + /> - + } - { step == LoadMnemonicSteps.InsertPin && setStep(LoadMnemonicSteps.InsertMnemonic)} onNextFunc={submitPin}>} + { step == LoadMnemonicSteps.InsertPin && setStep(LoadMnemonicSteps.Home)} onNextFunc={submitPin}>} )}; @@ -292,6 +332,39 @@ const styles = StyleSheet.create({ height: 5, borderRadius: 5, marginHorizontal: 2 + }, + mnemonicSelectorList: { + width: '95%', + marginHorizontal: '2.5%', + backgroundColor: '#320430', + paddingHorizontal: '7%', + paddingVertical: 15, + marginTop: 15, + marginBottom: 20 + }, + mnemonicSelectorContainer: { + width: '30%', + textAlign: 'center', + borderWidth: .7, + borderColor: '#F29AE9', + borderStyle: 'dashed', + margin: '1.65%' + }, + mnemonicSelectorText: { + fontSize: 14, + lineHeight: 20, + color: '#F29AE9', + width: '80%', + marginHorizontal: '10%', + textAlign: 'center', + paddingBottom: 15 + }, + mnemonicSelectorWord: { + textAlign: 'center', + fontFamily: 'Inter', + fontSize: 14, + lineHeight: 20, + color: '#F29AE9' } });