FIX: Backup screen visibility

screen/settings/lightningSettings.js

@@ -92,7 +92,6 @@ const LightningSettings = () => {
     });
   };
 
-
   return (
     <SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.root}>
       <BlueCard>

screen/wallets/add.js

@@ -138,7 +138,7 @@ const WalletsAdd = () => {
         ReactNativeHapticFeedback.trigger('notificationSuccess', { ignoreAndroidSystemSettings: false });
         if (w.type === HDSegwitP2SHWallet.type || w.type === HDSegwitBech32Wallet.type) {
           navigate('PleaseBackup', {
-            secret: w.getSecret(),
+            walletID: w.getID(),
           });
         } else {
           goBack();

screen/wallets/details.js

@@ -85,13 +85,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
   },
-  center: {
-    alignItems: 'center',
-  },
   delete: {
     color: '#d0021b',
     fontSize: 15,
     fontWeight: '500',
+    textAlign: 'center',
   },
 });
 
@@ -464,7 +462,7 @@ const WalletDetails = () => {
               )}
               <BlueSpacing20 />
               <BlueSpacing20 />
-              <TouchableOpacity style={styles.center} onPress={handleDeleteButtonTapped}>
+              <TouchableOpacity onPress={handleDeleteButtonTapped}>
                 <Text style={styles.delete}>{loc.wallets.details_delete}</Text>
               </TouchableOpacity>
             </View>

screen/wallets/pleaseBackup.js

@@ -1,65 +1,35 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useContext } from 'react';
 import { ActivityIndicator, View, BackHandler, Text, ScrollView, StyleSheet, StatusBar } from 'react-native';
 import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
 import { BlueSpacing20, SafeBlueArea, BlueNavigationStyle, BlueText, BlueButton } from '../../BlueComponents';
 import Privacy from '../../Privacy';
 import loc from '../../loc';
+import { BlueStorageContext } from '../../blue_modules/storage-context';
 
 const PleaseBackup = () => {
+  const { wallets } = useContext(BlueStorageContext);
   const [isLoading, setIsLoading] = useState(true);
-  const route = useRoute();
-  const words = route.params.secret.split(' ');
+  const { walletID } = useRoute().params;
+  const wallet = wallets.find(w => w.getID() === walletID);
   const navigation = useNavigation();
   const { colors } = useTheme();
-  const styles = StyleSheet.create({
+  const stylesHook = StyleSheet.create({
     flex: {
-      flex: 1,
       backgroundColor: colors.elevated,
     },
-    loading: {
-      flex: 1,
-      paddingTop: 20,
-    },
     word: {
-      width: 'auto',
-      marginRight: 8,
-      marginBottom: 8,
       backgroundColor: colors.inputBackgroundColor,
-      paddingTop: 6,
-      paddingBottom: 6,
-      paddingLeft: 8,
-      paddingRight: 8,
-      borderRadius: 4,
     },
     wortText: {
       color: colors.labelText,
-      fontWeight: 'bold',
-    },
-    scrollViewContent: {
-      justifyContent: 'space-between',
-    },
-    please: {
-      alignItems: 'center',
-      paddingHorizontal: 16,
     },
+
     successText: {
-      textAlign: 'center',
-      fontWeight: 'bold',
       color: colors.foregroundColor,
     },
     pleaseText: {
-      paddingBottom: 10,
-      paddingRight: 0,
-      paddingLeft: 0,
       color: colors.foregroundColor,
     },
-    secret: {
-      flex: 1,
-      flexDirection: 'row',
-      justifyContent: 'center',
-      flexWrap: 'wrap',
-      marginTop: 14,
-    },
   });
 
   const handleBackButton = useCallback(() => {
@@ -75,15 +45,17 @@ const PleaseBackup = () => {
       Privacy.disableBlur();
       BackHandler.removeEventListener('hardwareBackPress', handleBackButton);
     };
-  }, [handleBackButton, words]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const renderSecret = () => {
     const component = [];
-    for (const [index, secret] of words.entries()) {
+    for (const [index, secret] of wallet.getSecret().split(/\s/).entries()) {
+      const text = `${index + 1}. ${secret}  `;
       component.push(
-        <View style={styles.word} key={`${secret}${index}`}>
-          <Text style={styles.wortText}>
-            {`${index + 1}`}. {secret}
+        <View style={[styles.word, stylesHook.word]} key={`${index}`}>
+          <Text style={[styles.wortText, stylesHook.wortText]} textBreakStrategy="simple">
+            {text}
           </Text>
         </View>,
       );
@@ -96,12 +68,12 @@ const PleaseBackup = () => {
       <ActivityIndicator />
     </View>
   ) : (
-    <SafeBlueArea style={styles.flex}>
+    <SafeBlueArea style={[styles.flex, stylesHook.flex]}>
       <StatusBar barStyle="default" />
-      <ScrollView contentContainerStyle={styles.scrollViewContent} testID="PleaseBackupScrollView">
+      <ScrollView testID="PleaseBackupScrollView">
         <View style={styles.please}>
-          <BlueText style={styles.successText}>{loc.pleasebackup.success}</BlueText>
-          <BlueText style={styles.pleaseText}>{loc.pleasebackup.text}</BlueText>
+          <BlueText style={[styles.successText, stylesHook.successText]}>{loc.pleasebackup.success}</BlueText>
+          <BlueText style={[styles.pleaseText, stylesHook.pleaseText]}>{loc.pleasebackup.text}</BlueText>
 
           <View style={styles.secret}>{renderSecret()}</View>
 
@@ -121,5 +93,46 @@ PleaseBackup.navigationOptions = ({ navigation }) => ({
   gestureEnabled: false,
   swipeEnabled: false,
 });
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  loading: {
+    flex: 1,
+    paddingTop: 20,
+  },
+  word: {
+    marginRight: 8,
+    marginBottom: 8,
+    paddingTop: 6,
+    paddingBottom: 6,
+    paddingLeft: 8,
+    paddingRight: 8,
+    borderRadius: 4,
+  },
+  wortText: {
+    fontWeight: 'bold',
+    textAlign: 'left',
+  },
+  please: {
+    alignItems: 'center',
+    paddingHorizontal: 16,
+  },
+  successText: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  pleaseText: {
+    paddingBottom: 10,
+    paddingRight: 0,
+    paddingLeft: 0,
+  },
+  secret: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+    marginTop: 14,
+  },
+});
 
 export default PleaseBackup;