fix: show loading while reading the seed

Author: limpbrains

e2e/backup.e2e.js

@@ -111,6 +111,9 @@ d('Backup', () => {
 		await element(by.id('TapToReveal')).tap();
 
 		// get the seed from SeedContaider
+		await waitFor(element(by.id('SeedContaider')))
+			.toBeVisible()
+			.withTimeout(30000);
 		const { label: seed } = await element(
 			by.id('SeedContaider'),
 		).getAttributes();

e2e/lightning.e2e.js

@@ -319,6 +319,9 @@ d('Lightning', () => {
 			await element(by.id('TapToReveal')).tap();
 
 			// get the seed from SeedContaider
+			await waitFor(element(by.id('SeedContaider')))
+				.toBeVisible()
+				.withTimeout(30000);
 			const { label: seed } = await element(
 				by.id('SeedContaider'),
 			).getAttributes();

e2e/onboarding.e2e.js

@@ -60,6 +60,9 @@ d('Onboarding', () => {
 		await element(by.id('BackupWallet')).tap();
 		await element(by.id('TapToReveal')).tap();
 		// get the seed from SeedContaider
+		await waitFor(element(by.id('SeedContaider')))
+			.toBeVisible()
+			.withTimeout(30000);
 		const { label: seed } = await element(
 			by.id('SeedContaider'),
 		).getAttributes();

e2e/settings.e2e.js

@@ -284,6 +284,9 @@ d('Settings', () => {
 			await element(by.id('TapToReveal')).tap();
 
 			// get the seed from SeedContaider
+			await waitFor(element(by.id('SeedContaider')))
+				.toBeVisible()
+				.withTimeout(30000);
 			const { label: seed } = await element(
 				by.id('SeedContaider'),
 			).getAttributes();

e2e/slashtags.e2e.js

@@ -237,6 +237,9 @@ d('Profile and Contacts', () => {
 			await element(by.id('BackupSettings')).tap();
 			await element(by.id('BackupWallet')).tap();
 			await element(by.id('TapToReveal')).tap();
+			await waitFor(element(by.id('SeedContaider')))
+				.toBeVisible()
+				.withTimeout(30000);
 			const { label: seed } = await element(
 				by.id('SeedContaider'),
 			).getAttributes();

src/screens/Recovery/Mnemonic.tsx

@@ -25,7 +25,7 @@ const Mnemonic = ({
 			const bip39Passphrase = await getBip39Passphrase();
 
 			if (mnemoncicResult.isErr()) {
-				console.log(mnemoncicResult.error.message);
+				console.log('getMnemonicPhrase error:', mnemoncicResult.error.message);
 				showToast({
 					type: 'warning',
 					title: t('mnemonic_error'),
@@ -54,6 +54,7 @@ const Mnemonic = ({
 
 				<ThemedView style={styles.seed} color="white10">
 					<View style={styles.col}>
+						{seed.length === 0 && <BodyM>{t('mnemonic_loading')}</BodyM>}
 						{seed.slice(0, seed.length / 2).map((w, i) => (
 							<Word key={i} word={w} number={i + 1} />
 						))}

src/screens/Settings/Backup/ShowMnemonic.tsx

@@ -1,4 +1,4 @@
-import React, { memo, ReactElement, useMemo, useState, useEffect } from 'react';
+import React, { memo, ReactElement, useState, useEffect } from 'react';
 import { StyleSheet, View, Platform, TouchableOpacity } from 'react-native';
 import { Trans, useTranslation } from 'react-i18next';
 import Clipboard from '@react-native-clipboard/clipboard';
@@ -46,7 +46,7 @@ const ShowMnemonic = ({
 	useEffect(() => {
 		getMnemonicPhrase().then((res) => {
 			if (res.isErr()) {
-				console.log(res.error.message);
+				console.log('getMnemonicPhrase error:', res.error.message);
 				showToast({
 					type: 'warning',
 					title: t('mnemonic_error'),
@@ -59,10 +59,21 @@ const ShowMnemonic = ({
 		getBip39Passphrase().then(setPassphrase);
 	}, [t]);
 
-	const seedToShow = useMemo(
-		() => (Platform.OS === 'android' && !show ? dummySeed : seed),
-		[seed, show],
-	);
+	const revealMnemonic = (): void => {
+		setShow(true);
+	};
+
+	const copyMnemonic = (): void => {
+		Clipboard.setString(seed.join(' '));
+		vibrate();
+	};
+
+	const ready = show && seed.length !== 0;
+
+	const seedToShow =
+		seed.length === 0 || (Platform.OS === 'android' && !show)
+			? dummySeed
+			: seed;
 
 	return (
 		<View style={styles.container}>
@@ -72,23 +83,20 @@ const ShowMnemonic = ({
 			/>
 
 			<BodyM color="secondary">
-				{show
+				{ready
 					? t('mnemonic_write', { length: seedToShow.length })
 					: t('mnemonic_use')}
 			</BodyM>
 
 			<View
 				style={styles.seedContainer}
-				testID="SeedContaider"
+				testID={ready ? 'SeedContaider' : undefined}
 				accessibilityLabel={seed.join(' ')}>
 				<ThemedView color="white10" style={styles.seed}>
 					<TouchableOpacity
 						style={styles.seed2}
 						activeOpacity={1}
-						onLongPress={(): void => {
-							Clipboard.setString(seed.join(' '));
-							vibrate();
-						}}>
+						onLongPress={copyMnemonic}>
 						<View style={styles.col}>
 							{seedToShow.slice(0, seedToShow.length / 2).map((w, i) => (
 								<Word key={i} word={w} number={i + 1} />
@@ -102,14 +110,15 @@ const ShowMnemonic = ({
 					</TouchableOpacity>
 				</ThemedView>
 
-				{!show && (
+				{!ready && (
 					<BlurView style={styles.blur}>
 						<Button
 							size="large"
-							text={t('mnemonic_reveal')}
+							text={show ? t('mnemonic_loading') : t('mnemonic_reveal')}
 							color="black50"
-							onPress={(): void => setShow(true)}
+							onPress={revealMnemonic}
 							testID="TapToReveal"
+							disabled={show}
 						/>
 					</BlurView>
 				)}
@@ -127,7 +136,7 @@ const ShowMnemonic = ({
 				<Button
 					size="large"
 					text={t('continue')}
-					disabled={!show}
+					disabled={!ready}
 					testID="ContinueShowMnemonic"
 					onPress={(): void => {
 						navigation.navigate(

src/utils/i18n/locales/en/security.json

@@ -56,6 +56,9 @@
   "mnemonic_reveal": {
     "string": "Tap To Reveal"
   },
+  "mnemonic_loading": {
+    "string": "Loading..."
+  },
   "mnemonic_never_share": {
     "string": "<accent>Never share</accent> your recovery phrase with anyone as this may result in the loss of funds."
   },