Support 24 word seed phrase game (#1954)

MetaMask · Nov 4, 2020 · fefbbd7 · fefbbd7
1 parent 8068314
commit fefbbd7
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 42 deletions.
diff --git a/app/components/Views/AccountBackupStep5/index.js b/app/components/Views/AccountBackupStep5/index.js
@@ -174,15 +174,22 @@ class AccountBackupStep5 extends PureComponent {
 	}
 
 	state = {
-		confirmedWords: Array(12).fill({ word: undefined, originalPosition: undefined }),
+		confirmedWords: [],
 		showSuccessModal: false,
 		wordsDict: {},
 		currentIndex: 0,
 		seedPhraseReady: false
 	};
 
 	componentDidMount = () => {
-		this.createWordsDictionary();
+		const { navigation } = this.props;
+		const words = navigation.getParam('words', []);
+		this.setState(
+			{
+				confirmedWords: Array(words.length).fill({ word: undefined, originalPosition: undefined })
+			},
+			this.createWordsDictionary
+		);
 	};
 
 	createWordsDictionary = () => {
@@ -297,6 +304,8 @@ class AccountBackupStep5 extends PureComponent {
 
 	render = () => {
 		const { confirmedWords, wordsDict, seedPhraseReady } = this.state;
+		const wordLength = confirmedWords.length;
+		const half = wordLength / 2;
 		return (
 			<SafeAreaView style={styles.mainWrapper}>
 				<ScrollView style={styles.mainWrapper} testID={'account-backup-step-5-screen'}>
@@ -313,10 +322,12 @@ class AccountBackupStep5 extends PureComponent {
 
 							<View style={styles.seedPhraseWrapper}>
 								<View style={styles.colLeft}>
-									{confirmedWords.slice(0, 6).map(({ word }, i) => this.renderWordBox(word, i))}
+									{confirmedWords.slice(0, half).map(({ word }, i) => this.renderWordBox(word, i))}
 								</View>
 								<View style={styles.colRight}>
-									{confirmedWords.slice(-6).map(({ word }, i) => this.renderWordBox(word, i + 6))}
+									{confirmedWords
+										.slice(-half)
+										.map(({ word }, i) => this.renderWordBox(word, i + half))}
 								</View>
 							</View>
 

diff --git a/app/components/Views/ManualBackupStep1/__snapshots__/index.test.js.snap b/app/components/Views/ManualBackupStep1/__snapshots__/index.test.js.snap
@@ -94,8 +94,8 @@ exports[`ManualBackupStep1 should render correctly 1`] = `
             "borderRadius": 8,
             "borderWidth": 1,
             "flexDirection": "row",
-            "height": 275,
             "marginBottom": 64,
+            "minHeight": 275,
           }
         }
       >

diff --git a/app/components/Views/ManualBackupStep1/index.js b/app/components/Views/ManualBackupStep1/index.js
@@ -127,7 +127,7 @@ const styles = StyleSheet.create({
 		borderColor: colors.grey100,
 		borderWidth: 1,
 		marginBottom: 64,
-		height: 275
+		minHeight: 275
 	},
 	wordColumn: {
 		flex: 1,
@@ -363,40 +363,45 @@ export default class ManualBackupStep1 extends PureComponent {
 		);
 	}
 
-	renderSeedphraseView = () => (
-		<ActionView
-			confirmTestID={'manual-backup-step-1-continue-button'}
-			confirmText={strings('manual_backup_step_1.continue')}
-			onConfirmPress={this.goNext}
-			confirmDisabled={this.state.seedPhraseHidden}
-			showCancelButton={false}
-			confirmButtonMode={'confirm'}
-		>
-			<View style={styles.wrapper} testID={'manual_backup_step_1-screen'}>
-				<Text style={styles.action}>{strings('manual_backup_step_1.action')}</Text>
-				<View style={styles.infoWrapper}>
-					<Text style={styles.info}>{strings('manual_backup_step_1.info')}</Text>
-				</View>
-				<View style={styles.seedPhraseWrapper}>
-					<View style={styles.wordColumn}>
-						{this.words.slice(0, 6).map((word, i) => (
-							<View key={`word_${i}`} style={styles.wordWrapper}>
-								<Text style={styles.word}>{`${i + 1}. ${word}`}</Text>
-							</View>
-						))}
+	renderSeedphraseView = () => {
+		const words = this.words || [];
+		const wordLength = words.length;
+		const half = wordLength / 2 || 6;
+		return (
+			<ActionView
+				confirmTestID={'manual-backup-step-1-continue-button'}
+				confirmText={strings('manual_backup_step_1.continue')}
+				onConfirmPress={this.goNext}
+				confirmDisabled={this.state.seedPhraseHidden}
+				showCancelButton={false}
+				confirmButtonMode={'confirm'}
+			>
+				<View style={styles.wrapper} testID={'manual_backup_step_1-screen'}>
+					<Text style={styles.action}>{strings('manual_backup_step_1.action')}</Text>
+					<View style={styles.infoWrapper}>
+						<Text style={styles.info}>{strings('manual_backup_step_1.info')}</Text>
 					</View>
-					<View style={styles.wordColumn}>
-						{this.words.slice(-6).map((word, i) => (
-							<View key={`word_${i}`} style={styles.wordWrapper}>
-								<Text style={styles.word}>{`${i + 7}. ${word}`}</Text>
-							</View>
-						))}
+					<View style={styles.seedPhraseWrapper}>
+						<View style={styles.wordColumn}>
+							{this.words.slice(0, half).map((word, i) => (
+								<View key={`word_${i}`} style={styles.wordWrapper}>
+									<Text style={styles.word}>{`${i + 1}. ${word}`}</Text>
+								</View>
+							))}
+						</View>
+						<View style={styles.wordColumn}>
+							{this.words.slice(-half).map((word, i) => (
+								<View key={`word_${i}`} style={styles.wordWrapper}>
+									<Text style={styles.word}>{`${i + (half + 1)}. ${word}`}</Text>
+								</View>
+							))}
+						</View>
+						{this.state.seedPhraseHidden && this.renderSeedPhraseConcealer()}
 					</View>
-					{this.state.seedPhraseHidden && this.renderSeedPhraseConcealer()}
 				</View>
-			</View>
-		</ActionView>
-	);
+			</ActionView>
+		);
+	};
 
 	render() {
 		const { ready, currentStep, view } = this.state;

diff --git a/app/components/Views/ManualBackupStep2/index.js b/app/components/Views/ManualBackupStep2/index.js
@@ -174,15 +174,22 @@ class ManualBackupStep2 extends PureComponent {
 	}
 
 	state = {
-		confirmedWords: Array(12).fill({ word: undefined, originalPosition: undefined }),
+		confirmedWords: [],
 		wordsDict: {},
 		currentIndex: 0,
 		seedPhraseReady: false,
 		currentStep: 2
 	};
 
 	componentDidMount = () => {
-		this.createWordsDictionary();
+		const { navigation } = this.props;
+		const words = navigation.getParam('words', []);
+		this.setState(
+			{
+				confirmedWords: Array(words.length).fill({ word: undefined, originalPosition: undefined })
+			},
+			this.createWordsDictionary
+		);
 	};
 
 	createWordsDictionary = () => {
@@ -253,7 +260,8 @@ class ManualBackupStep2 extends PureComponent {
 
 	validateWords = () => {
 		const words = this.props.navigation.getParam('words', []);
-		const confirmedWords = this.state.confirmedWords.map(confirmedWord => confirmedWord.word);
+		const { confirmedWords: wordMap } = this.state;
+		const confirmedWords = wordMap.map(confirmedWord => confirmedWord.word);
 		if (words.join('') === confirmedWords.join('')) {
 			return true;
 		}
@@ -316,6 +324,8 @@ class ManualBackupStep2 extends PureComponent {
 
 	render = () => {
 		const { confirmedWords, seedPhraseReady } = this.state;
+		const wordLength = confirmedWords.length;
+		const half = wordLength / 2;
 		return (
 			<SafeAreaView style={styles.mainWrapper}>
 				<View style={styles.onBoardingWrapper}>
@@ -343,10 +353,10 @@ class ManualBackupStep2 extends PureComponent {
 							]}
 						>
 							<View style={styles.colLeft}>
-								{confirmedWords.slice(0, 6).map(({ word }, i) => this.renderWordBox(word, i))}
+								{confirmedWords.slice(0, half).map(({ word }, i) => this.renderWordBox(word, i))}
 							</View>
 							<View style={styles.colRight}>
-								{confirmedWords.slice(-6).map(({ word }, i) => this.renderWordBox(word, i + 6))}
+								{confirmedWords.slice(-half).map(({ word }, i) => this.renderWordBox(word, i + half))}
 							</View>
 						</View>
 						{this.validateWords() ? this.renderSuccess() : this.renderWords()}