Refactor/folders (#58)

app/src/Navigation.tsx

@@ -18,6 +18,10 @@ import { Button, ViewStyle } from 'tamagui';
 import { NavBar } from './components/NavBar';
 import ActivityIcon from './images/icons/activity.svg';
 import SettingsIcon from './images/icons/settings.svg';
+import AccountRecoveryScreen from './screens/AccountFlow/AccountRecoveryScreen';
+import AccountVerifiedSuccessScreen from './screens/AccountFlow/AccountVerifiedSuccessScreen';
+import RecoverWithPhraseScreen from './screens/AccountFlow/RecoverWithPhraseScreen';
+import SaveRecoveryPhraseScreen from './screens/AccountFlow/SaveRecoveryPhraseScreen';
 import DisclaimerScreen from './screens/DisclaimerScreen';
 import HomeScreen from './screens/HomeScreen';
 import LaunchScreen from './screens/LaunchScreen';
@@ -31,9 +35,6 @@ import ProveScreen from './screens/ProveFlow/ProveScreen';
 import ValidProofScreen from './screens/ProveFlow/ValidProofScreen';
 import QRCodeViewFinderScreen from './screens/ProveFlow/ViewFinder';
 import WrongProofScreen from './screens/ProveFlow/WrongProofScreen';
-import AccountRecoveryScreen from './screens/Settings/AccountRecoveryScreen';
-import AccountVerifiedSuccessScreen from './screens/Settings/AccountVerifiedSuccessScreen';
-import RecoverWithPhraseScreen from './screens/Settings/RecoverWithPhraseScreen';
 import ShowRecoveryPhraseScreen from './screens/Settings/ShowRecoveryPhraseScreen';
 import SettingsScreen from './screens/SettingsScreen';
 import SplashScreen from './screens/SplashScreen';
@@ -235,8 +236,8 @@ const AppNavigation = createNativeStackNavigator({
         headerShown: false,
       },
     },
-    ShowRecoveryPhrase: {
-      screen: ShowRecoveryPhraseScreen,
+    SaveRecoveryPhrase: {
+      screen: SaveRecoveryPhraseScreen,
       options: {
         headerShown: false,
       },
@@ -261,6 +262,15 @@ const AppNavigation = createNativeStackNavigator({
         headerShown: false,
       },
     },
+    ShowRecoveryPhrase: {
+      screen: ShowRecoveryPhraseScreen,
+      options: {
+        title: 'Recovery Phrase',
+        headerStyle: {
+          backgroundColor: white,
+        },
+      },
+    },
   },
 });
 

app/src/screens/AccountFlow/AccountRecoveryScreen.tsx

@@ -14,8 +14,8 @@ import { slate600, white } from '../../utils/colors';
 interface AccountRecoveryScreenProps {}
 
 const AccountRecoveryScreen: React.FC<AccountRecoveryScreenProps> = ({}) => {
-  const onRestorePress = useHapticNavigation('RecoverWithPhrase');
-  const onShowRecoveryPhrasePress = useHapticNavigation('ShowRecoveryPhrase');
+  const onRestoreAccountPress = useHapticNavigation('RecoverWithPhrase');
+  const onCreateAccountPress = useHapticNavigation('SaveRecoveryPhrase');
 
   return (
     <ExpandableBottomLayout.Layout>
@@ -33,10 +33,10 @@ const AccountRecoveryScreen: React.FC<AccountRecoveryScreenProps> = ({}) => {
           </Description>
 
           <YStack gap="$2.5" width="100%" pt="$6">
-            <PrimaryButton onPress={onRestorePress}>
+            <PrimaryButton onPress={onRestoreAccountPress}>
               Restore my account
             </PrimaryButton>
-            <SecondaryButton onPress={onShowRecoveryPhrasePress}>
+            <SecondaryButton onPress={onCreateAccountPress}>
               Create new account
             </SecondaryButton>
           </YStack>

app/src/screens/AccountFlow/SaveRecoveryPhraseScreen.tsx

@@ -0,0 +1,85 @@
+import React, { useCallback, useContext, useState } from 'react';
+import { findBestLanguageTag } from 'react-native-localize';
+
+import { ethers } from 'ethers';
+import { YStack } from 'tamagui';
+
+import Mnemonic from '../../components/Mnemonic';
+import { PrimaryButton } from '../../components/buttons/PrimaryButton';
+import { SecondaryButton } from '../../components/buttons/SecondaryButton';
+import { Caption } from '../../components/typography/Caption';
+import Description from '../../components/typography/Description';
+import { Title } from '../../components/typography/Title';
+import useHapticNavigation from '../../hooks/useHapticNavigation';
+import { ExpandableBottomLayout } from '../../layouts/ExpandableBottomLayout';
+import { AuthContext } from '../../stores/authProvider';
+import { slate400 } from '../../utils/colors';
+import { loadSecretOrCreateIt } from '../../utils/keychain';
+
+interface SaveRecoveryPhraseScreenProps {}
+
+const SaveRecoveryPhraseScreen: React.FC<
+  SaveRecoveryPhraseScreenProps
+> = ({}) => {
+  const { loginWithBiometrics } = useContext(AuthContext);
+  const [mnemonic, setMnemonic] = useState<string[]>();
+  const [userHasSeenMnemonic, setUserHasSeenMnemonic] = useState(false);
+
+  const onRevealWords = useCallback(async () => {
+    await loadMnemonic();
+    await loginWithBiometrics();
+    setUserHasSeenMnemonic(true);
+  }, []);
+
+  const loadMnemonic = useCallback(async () => {
+    const privKey = await loadSecretOrCreateIt();
+
+    const { languageTag } = findBestLanguageTag(
+      Object.keys(ethers.wordlists),
+    ) || { languageTag: 'en' };
+
+    const words = ethers.Mnemonic.entropyToPhrase(
+      privKey,
+      ethers.wordlists[languageTag],
+    );
+
+    setMnemonic(words.trim().split(' '));
+  }, []);
+
+  const onCloudBackupPress = useHapticNavigation('TODO: cloud backup');
+  const onSkipPress = useHapticNavigation('AccountVerifiedSuccess');
+
+  return (
+    <ExpandableBottomLayout.Layout>
+      <ExpandableBottomLayout.BottomSection>
+        <YStack
+          alignItems="center"
+          gap="$2.5"
+          pb="$2.5"
+          height="100%"
+          justifyContent="flex-end"
+        >
+          <Title>Save your recovery phrase</Title>
+          <Description>
+            This phrase is the only way to recover your account. Keep it secret,
+            keep it safe.
+          </Description>
+          <Mnemonic words={mnemonic} onRevealWords={onRevealWords} />
+          <YStack gap="$2.5" width="100%" pt="$6" alignItems="center">
+            <Caption color={slate400}>
+              You can reveal your recovery phrase in settings.
+            </Caption>
+            <PrimaryButton onPress={onCloudBackupPress}>
+              Enable iCloud Back up
+            </PrimaryButton>
+            <SecondaryButton onPress={onSkipPress}>
+              {userHasSeenMnemonic ? 'Continue' : 'Skip making a back up'}
+            </SecondaryButton>
+          </YStack>
+        </YStack>
+      </ExpandableBottomLayout.BottomSection>
+    </ExpandableBottomLayout.Layout>
+  );
+};
+
+export default SaveRecoveryPhraseScreen;

app/src/screens/Settings/ShowRecoveryPhraseScreen.tsx

@@ -5,15 +5,9 @@ import { ethers } from 'ethers';
 import { YStack } from 'tamagui';
 
 import Mnemonic from '../../components/Mnemonic';
-import { PrimaryButton } from '../../components/buttons/PrimaryButton';
-import { SecondaryButton } from '../../components/buttons/SecondaryButton';
-import { Caption } from '../../components/typography/Caption';
 import Description from '../../components/typography/Description';
-import { Title } from '../../components/typography/Title';
-import useHapticNavigation from '../../hooks/useHapticNavigation';
 import { ExpandableBottomLayout } from '../../layouts/ExpandableBottomLayout';
 import { AuthContext } from '../../stores/authProvider';
-import { slate400 } from '../../utils/colors';
 import { loadSecretOrCreateIt } from '../../utils/keychain';
 
 interface ShowRecoveryPhraseScreenProps {}
@@ -23,12 +17,10 @@ const ShowRecoveryPhraseScreen: React.FC<
 > = ({}) => {
   const { loginWithBiometrics } = useContext(AuthContext);
   const [mnemonic, setMnemonic] = useState<string[]>();
-  const [userHasSeenMnemonic, setUserHasSeenMnemonic] = useState(false);
 
   const onRevealWords = useCallback(async () => {
     await loadMnemonic();
     await loginWithBiometrics();
-    setUserHasSeenMnemonic(true);
   }, []);
 
   const loadMnemonic = useCallback(async () => {
@@ -46,36 +38,21 @@ const ShowRecoveryPhraseScreen: React.FC<
     setMnemonic(words.trim().split(' '));
   }, []);
 
-  const onCloudBackupPress = useHapticNavigation('TODO: cloud backup');
-  const onSkipPress = useHapticNavigation('AccountVerifiedSuccess');
-
   return (
     <ExpandableBottomLayout.Layout>
       <ExpandableBottomLayout.BottomSection>
         <YStack
           alignItems="center"
-          gap="$2.5"
-          pb="$2.5"
           height="100%"
-          justifyContent="flex-end"
+          justifyContent="flex-start"
+          pt="40%"
+          gap="$10"
         >
-          <Title>Save your recovery phrase</Title>
+          <Mnemonic words={mnemonic} onRevealWords={onRevealWords} />
           <Description>
             This phrase is the only way to recover your account. Keep it secret,
             keep it safe.
           </Description>
-          <Mnemonic words={mnemonic} onRevealWords={onRevealWords} />
-          <YStack gap="$2.5" width="100%" pt="$6" alignItems="center">
-            <Caption color={slate400}>
-              You can reveal your recovery phrase in settings.
-            </Caption>
-            <PrimaryButton onPress={onCloudBackupPress}>
-              Enable iCloud Back up
-            </PrimaryButton>
-            <SecondaryButton onPress={onSkipPress}>
-              {userHasSeenMnemonic ? 'Continue' : 'Skip making a back up'}
-            </SecondaryButton>
-          </YStack>
         </YStack>
       </ExpandableBottomLayout.BottomSection>
     </ExpandableBottomLayout.Layout>