[Wallet] Always prevent taking screenshots to Account Key on Android (#…

…6288) ### Description On Android, we prevent users from taking screenshots of the Account Key. This was not working for the Account Key screen after doing the backup. It should be now. ### Other changes Did some minor UI changes to better follow the [design in Figma](https://www.figma.com/file/zt7aTQ5wuXycIwxq5oAmF9/Wallet-Refresh?node-id=2995%3A34550) <img width="346" alt="Screen Shot 2020-12-17 at 23 28 21" src="https://user-images.githubusercontent.com/6062888/102567210-cbf9a980-40bf-11eb-8014-b62450966d3a.png"> ### Tested Manually ### Related issues - Fixes #5707 ### Backwards compatibility Yes
celo-org · Dec 19, 2020 · 9f952d5 · 9f952d5
1 parent 641b64c
commit 9f952d5
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 47 deletions.
diff --git a/packages/mobile/src/backup/BackupIntroduction.tsx b/packages/mobile/src/backup/BackupIntroduction.tsx
@@ -11,6 +11,10 @@ import { SafeAreaView } from 'react-native-safe-area-context'
 import { connect } from 'react-redux'
 import { OnboardingEvents } from 'src/analytics/Events'
 import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
+import BackupPhraseContainer, {
+  BackupPhraseContainerMode,
+  BackupPhraseType,
+} from 'src/backup/BackupPhraseContainer'
 import { useAccountKey } from 'src/backup/utils'
 import { Namespaces } from 'src/i18n'
 import Logo from 'src/icons/Logo'
@@ -78,12 +82,15 @@ function AccountKeyPostSetup() {
   const { t } = useTranslation(Namespaces.backupKeyFlow6)
 
   return (
-    <ScrollView contentContainerStyle={styles.postSetupContainer}>
-      <View>
-        <Text style={fontStyles.h2}>{t('postSetupTitle')}</Text>
-        <View style={styles.keyArea}>
-          <Text style={fontStyles.large}>{accountKey}</Text>
-        </View>
+    <ScrollView contentContainerStyle={styles.postSetupContentContainer}>
+      <View style={styles.postSetupContainer}>
+        <Text style={styles.postSetupTitle}>{t('postSetupTitle')}</Text>
+        <BackupPhraseContainer
+          value={accountKey}
+          mode={BackupPhraseContainerMode.READONLY}
+          type={BackupPhraseType.BACKUP_KEY}
+          includeHeader={false}
+        />
         <Text style={styles.postSetupBody}>{t('postSetupBody')}</Text>
       </View>
       <View style={styles.postSetupCTA}>
@@ -107,10 +114,18 @@ const styles = StyleSheet.create({
     paddingHorizontal: Spacing.Thick24,
     justifyContent: 'center',
   },
+  postSetupContentContainer: {
+    flex: 1,
+  },
   postSetupContainer: {
+    flex: 1,
     paddingTop: Spacing.Thick24,
     paddingHorizontal: Spacing.Regular16,
   },
+  postSetupTitle: {
+    ...fontStyles.h2,
+    marginBottom: Spacing.Smallest8,
+  },
   h1: {
     ...fontStyles.h1,
     paddingBottom: Spacing.Regular16,
@@ -120,18 +135,15 @@ const styles = StyleSheet.create({
     ...fontStyles.large,
     paddingBottom: Spacing.Regular16,
   },
-  keyArea: {
-    padding: Spacing.Regular16,
-    backgroundColor: colors.beige,
-    marginTop: Spacing.Regular16,
-  },
   postSetupBody: {
     ...fontStyles.regular,
     marginVertical: Spacing.Regular16,
+    flexGrow: 1,
   },
   postSetupCTA: {
     alignSelf: 'center',
     paddingVertical: Spacing.Regular16,
+    marginBottom: Spacing.Regular16,
   },
 })
 

diff --git a/packages/mobile/src/backup/BackupPhraseContainer.tsx b/packages/mobile/src/backup/BackupPhraseContainer.tsx
@@ -30,6 +30,7 @@ type Props = {
   showCopy?: boolean
   style?: ViewStyle
   onChangeText?: (value: string) => void
+  includeHeader?: boolean
   testID?: string
 } & WithTranslation
 
@@ -66,20 +67,17 @@ export class BackupPhraseContainer extends React.Component<Props> {
   }
 
   render() {
-    const { t, value: words, showCopy, style, mode, type, testID } = this.props
+    const { t, value: words, showCopy, style, mode, type, includeHeader, testID } = this.props
 
     return (
       <View style={style}>
         <View style={styles.headerContainer}>
-          {type === BackupPhraseType.BACKUP_KEY &&
-            (BackupPhraseContainerMode.INPUT ? (
-              <View style={styles.writeDownKeyContainer}>
-                <Text style={styles.writeDownKey}>{t('writeDownKey')}</Text>
-                <Text style={fontStyles.label}>{t('yourAccountKey')}</Text>
-              </View>
-            ) : (
-              <Text style={styles.headerText}>{t('yourAccountKey')}</Text>
-            ))}
+          {type === BackupPhraseType.BACKUP_KEY && includeHeader !== false && (
+            <View style={styles.writeDownKeyContainer}>
+              <Text style={styles.writeDownKey}>{t('writeDownKey')}</Text>
+              <Text style={fontStyles.label}>{t('yourAccountKey')}</Text>
+            </View>
+          )}
           {showCopy && (
             <Touchable borderless={true} onPress={this.onPressCopy}>
               <Text style={styles.headerButton}>{this.props.t('global:copy')}</Text>
@@ -141,22 +139,23 @@ const styles = StyleSheet.create({
   phraseContainer: {
     marginTop: 8,
     backgroundColor: colors.beige,
+    borderWidth: 1,
+    borderColor: colors.dark,
     borderRadius: 4,
     alignContent: 'center',
     justifyContent: 'center',
     padding: 16,
   },
   phraseText: {
     ...fontStyles.regular,
+    fontSize: 22,
+    lineHeight: 32,
   },
   phraseInputContainer: {
     marginTop: 10,
   },
   phraseInputText: {
     ...fontStyles.regular,
-    borderWidth: 1,
-    borderColor: colors.gray2,
-    borderRadius: 4,
     minHeight: 125,
     padding: 14,
     paddingTop: 16,

diff --git a/packages/mobile/src/backup/__snapshots__/BackupIntroduction.test.tsx.snap b/packages/mobile/src/backup/__snapshots__/BackupIntroduction.test.tsx.snap
@@ -91,41 +91,54 @@ exports[`BackupIntroduction renders correctly when backup completed 1`] = `
   <RCTScrollView
     contentContainerStyle={
       Object {
-        "paddingHorizontal": 16,
-        "paddingTop": 24,
+        "flex": 1,
       }
     }
   >
     <View>
-      <View>
+      <View
+        style={
+          Object {
+            "flex": 1,
+            "paddingHorizontal": 16,
+            "paddingTop": 24,
+          }
+        }
+      >
         <Text
           style={
             Object {
               "color": "#2E3338",
               "fontFamily": "Jost-Medium",
               "fontSize": 22,
               "lineHeight": 28,
+              "marginBottom": 8,
             }
           }
         >
           postSetupTitle
         </Text>
-        <View
-          style={
-            Object {
-              "backgroundColor": "#F1F0EB",
-              "marginTop": 16,
-              "padding": 16,
+        <View>
+          <View
+            style={
+              Object {
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "paddingHorizontal": 2,
+              }
             }
-          }
-        >
-          <Text
+          />
+          <View
             style={
               Object {
-                "color": "#2E3338",
-                "fontFamily": "Inter-Regular",
-                "fontSize": 18,
-                "lineHeight": 24,
+                "alignContent": "center",
+                "backgroundColor": "#F1F0EB",
+                "borderColor": "#2E3338",
+                "borderRadius": 4,
+                "borderWidth": 1,
+                "justifyContent": "center",
+                "marginTop": 8,
+                "padding": 16,
               }
             }
           />
@@ -134,6 +147,7 @@ exports[`BackupIntroduction renders correctly when backup completed 1`] = `
           style={
             Object {
               "color": "#2E3338",
+              "flexGrow": 1,
               "fontFamily": "Inter-Regular",
               "fontSize": 16,
               "lineHeight": 22,
@@ -148,6 +162,7 @@ exports[`BackupIntroduction renders correctly when backup completed 1`] = `
         style={
           Object {
             "alignSelf": "center",
+            "marginBottom": 16,
             "paddingVertical": 16,
           }
         }

diff --git a/packages/mobile/src/backup/__snapshots__/BackupPhrase.test.tsx.snap b/packages/mobile/src/backup/__snapshots__/BackupPhrase.test.tsx.snap
@@ -68,7 +68,9 @@ exports[`renders correctly with backup completed 1`] = `
             Object {
               "alignContent": "center",
               "backgroundColor": "#F1F0EB",
+              "borderColor": "#2E3338",
               "borderRadius": 4,
+              "borderWidth": 1,
               "justifyContent": "center",
               "marginTop": 8,
               "padding": 16,
@@ -162,7 +164,9 @@ exports[`renders correctly with backup not completed 1`] = `
             Object {
               "alignContent": "center",
               "backgroundColor": "#F1F0EB",
+              "borderColor": "#2E3338",
               "borderRadius": 4,
+              "borderWidth": 1,
               "justifyContent": "center",
               "marginTop": 8,
               "padding": 16,
@@ -362,7 +366,9 @@ exports[`still renders when mnemonic doesnt show up 1`] = `
             Object {
               "alignContent": "center",
               "backgroundColor": "#F1F0EB",
+              "borderColor": "#2E3338",
               "borderRadius": 4,
+              "borderWidth": 1,
               "justifyContent": "center",
               "marginTop": 8,
               "padding": 16,

diff --git a/packages/mobile/src/backup/__snapshots__/BackupPhraseContainer.test.tsx.snap b/packages/mobile/src/backup/__snapshots__/BackupPhraseContainer.test.tsx.snap
@@ -66,9 +66,6 @@ exports[` renders correctly for input backup phrase 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#EDEEEF",
-            "borderRadius": 4,
-            "borderWidth": 1,
             "color": "#2E3338",
             "fontFamily": "Inter-Regular",
             "fontSize": 16,
@@ -137,7 +134,9 @@ exports[` renders correctly for readonly backup phrase 1`] = `
       Object {
         "alignContent": "center",
         "backgroundColor": "#F1F0EB",
+        "borderColor": "#2E3338",
         "borderRadius": 4,
+        "borderWidth": 1,
         "justifyContent": "center",
         "marginTop": 8,
         "padding": 16,
@@ -149,8 +148,8 @@ exports[` renders correctly for readonly backup phrase 1`] = `
         Object {
           "color": "#2E3338",
           "fontFamily": "Inter-Regular",
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 22,
+          "lineHeight": 32,
         }
       }
       testID="AccountKeyWords"

diff --git a/packages/mobile/src/backup/utils.ts b/packages/mobile/src/backup/utils.ts
@@ -139,7 +139,7 @@ export function onGetMnemonicFail(viewError: (error: ErrorMessages) => void, con
   })
 }
 
-export function useAccountKey() {
+export function useAccountKey(): string | null {
   const dispatch = useDispatch()
   const account = useSelector(currentAccountSelector)
   const asyncAccountKey = useAsync(getStoredMnemonic, [account])
@@ -148,7 +148,7 @@ export function useAccountKey() {
     onGetMnemonicFail((error) => dispatch(showError(error)), 'useAccountKey')
   }
 
-  return asyncAccountKey.result
+  return asyncAccountKey.result || null
 }
 
 // Because of a RN bug, we can't fully clean the text as the user types