feat: add restore wallet instructions (#207)

credebl · Aug 1, 2024 · ac07928 · ac07928
1 parent fc67c27
commit ac07928
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 3 deletions.
diff --git a/app/localization/en/index.ts b/app/localization/en/index.ts
@@ -726,6 +726,11 @@ const translation = {
     "BackupFailed": "Backup failed to upload to Google Drive. Please try again later.",
     "BackupSuccess": "Backup successfully uploaded to Google Drive.",
   },
+  "Restore": {
+    "RestoreWallet": "Restore Wallet",
+    "RestoreInstructions": "Note: To restore your wallet, you can use a backup from your cloud storage or local device. Please ensure that the Google Drive app is installed on your device and you are signed in.",
+    "RestoreInstructionsIOS": "If you can't see Google Drive in the file picker, open the Files app --> tap on the three dots at the top --> select 'Edit' --> enable Google Drive.",
+  },
 }
 
 export default translation
diff --git a/app/screens/CreateWallet.tsx b/app/screens/CreateWallet.tsx
@@ -1,6 +1,8 @@
 import { useNavigation } from '@react-navigation/core'
-import React from 'react'
-import { View, StyleSheet, Text } from 'react-native'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { View, StyleSheet, Text, Platform, Modal, TouchableOpacity } from 'react-native'
+import Icon from 'react-native-vector-icons/FontAwesome'
 
 import Button, { ButtonType } from '../components/buttons/Button'
 import { useTheme } from '../contexts/theme'
@@ -9,6 +11,18 @@ import { Screens } from '../types/navigators'
 const CreateWallet: React.FC = () => {
   const { TextTheme, ColorPallet } = useTheme()
   const navigation = useNavigation()
+  const { t } = useTranslation()
+  const [isModalVisible, setModalVisible] = useState(false)
+
+  const toggleModal = () => {
+    setModalVisible(!isModalVisible)
+  }
+
+  const proceedWithRestore = () => {
+    toggleModal()
+    navigation.navigate(Screens.ImportWalletVerify as never)
+  }
+
   const styles = StyleSheet.create({
     container: {
       flex: 1,
@@ -21,13 +35,41 @@ const CreateWallet: React.FC = () => {
       color: ColorPallet.brand.primary,
       marginTop: 20,
     },
+    instructionsText: {
+      fontSize: 16,
+      color: ColorPallet.brand.primary,
+      marginVertical: 10,
+    },
     walletButtonView: {
       marginTop: 'auto',
       margin: 20,
     },
     restoreWalletView: {
       marginTop: 20,
     },
+    modalOverlay: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: 20,
+    },
+    modalHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: 15,
+    },
+    modalContent: {
+      backgroundColor: ColorPallet.brand.modalSecondary,
+      padding: 22,
+      borderRadius: 4,
+    },
+    modalTitle: {
+      fontSize: 24,
+      color: ColorPallet.brand.primary,
+      fontWeight: 'bold',
+    },
   })
   return (
     <View style={styles.container}>
@@ -43,11 +85,37 @@ const CreateWallet: React.FC = () => {
           <Button
             title={'RESTORE WALLET'}
             buttonType={ButtonType.Primary}
-            onPress={() => navigation.navigate(Screens.ImportWalletVerify as never)}
+            onPress={toggleModal}
             accessibilityLabel={'okay'}
           />
         </View>
       </View>
+      <Modal animationType="slide" transparent={true} visible={isModalVisible} onRequestClose={toggleModal}>
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContent}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalTitle}>{t('Restore.RestoreWallet')}</Text>
+              <TouchableOpacity onPress={toggleModal}>
+                <Icon name="close" size={28} color={ColorPallet.brand.primary} />
+              </TouchableOpacity>
+            </View>
+            <Text style={styles.instructionsText}>{t('Restore.RestoreInstructions')}</Text>
+            {Platform.OS === 'ios' && (
+              <Text style={styles.instructionsText}>
+                <Text style={{ fontWeight: 'bold' }}>For iOS users:</Text> {t('Restore.RestoreInstructionsIOS')}
+              </Text>
+            )}
+            <View style={styles.restoreWalletView}>
+              <Button
+                title={'PROCEED'}
+                buttonType={ButtonType.Primary}
+                onPress={proceedWithRestore}
+                accessibilityLabel={'Proceed with restore'}
+              />
+            </View>
+          </View>
+        </View>
+      </Modal>
     </View>
   )
 }