Merge pull request #6890 from KeeperCommunity/feat/recoveryKeyBackup

Forgot Passcode | Force Recovery Key Backup

Author: cakesoft-vaibhav

android/app/build.gradle

@@ -98,7 +98,7 @@ android {
         applicationId "io.hexawallet.keeper"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 583
+        versionCode 584
         versionName "2.5.8"
         missingDimensionStrategy 'react-native-camera', 'general'
         missingDimensionStrategy 'store', 'play'

ios/hexa_keeper.xcodeproj/project.pbxproj

@@ -748,7 +748,7 @@
 				CODE_SIGN_ENTITLEMENTS = hexa_keeper/hexa_keeper.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 583;
+				CURRENT_PROJECT_VERSION = 584;
 				DEVELOPMENT_TEAM = Y5TCB759QL;
 				ENABLE_BITCODE = NO;
 				HEADER_SEARCH_PATHS = (
@@ -875,7 +875,7 @@
 				CODE_SIGN_ENTITLEMENTS = hexa_keeper/hexa_keeper.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 583;
+				CURRENT_PROJECT_VERSION = 584;
 				DEVELOPMENT_TEAM = Y5TCB759QL;
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
@@ -1144,7 +1144,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 583;
+				CURRENT_PROJECT_VERSION = 584;
 				DEVELOPMENT_TEAM = Y5TCB759QL;
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = Y5TCB759QL;
 				ENABLE_BITCODE = NO;
@@ -1275,7 +1275,7 @@
 				CODE_SIGN_ENTITLEMENTS = hexa_keeper_dev.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Distribution";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
-				CURRENT_PROJECT_VERSION = 583;
+				CURRENT_PROJECT_VERSION = 584;
 				DEVELOPMENT_TEAM = Y5TCB759QL;
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = Y5TCB759QL;
 				HEADER_SEARCH_PATHS = (

ios/hexa_keeper/Info.plist

@@ -36,7 +36,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>583</string>
+	<string>584</string>
 	<key>LSApplicationQueriesSchemes</key>
 	<array>
 		<string>itms-apps</string>

ios/hexa_keeperTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>583</string>
+	<string>584</string>
 </dict>
 </plist>

ios/hexa_keeper_dev-Info.plist

@@ -36,7 +36,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>583</string>
+	<string>584</string>
 	<key>LSApplicationQueriesSchemes</key>
 	<array>
 		<string>itms-apps</string>

src/components/Backup/BackupHealthCheckList.tsx

@@ -12,7 +12,12 @@ import {
   seedBackedConfirmed,
   validateServerBackup,
 } from 'src/store/sagaActions/bhr';
-import { setBackupAllFailure, setBackupAllSuccess, setSeedConfirmed } from 'src/store/reducers/bhr';
+import {
+  setAutomaticCloudBackup,
+  setBackupAllFailure,
+  setBackupAllSuccess,
+  setSeedConfirmed,
+} from 'src/store/reducers/bhr';
 import { CommonActions, useIsFocused, useNavigation } from '@react-navigation/native';
 import { useQuery } from '@realm/react';
 import HealthCheck from 'src/assets/images/healthcheck_light.svg';
@@ -28,14 +33,15 @@ import Text from '../KeeperText';
 import { hp } from 'src/constants/responsive';
 import ThemedSvg from '../ThemedSvg.tsx/ThemedSvg';
 import ConfirmSeedWord from '../SeedWordBackup/ConfirmSeedWord';
+import { setRecoveryKeyBackedUp } from 'src/store/reducers/account';
 
 const ContentType = {
   verifying: 'verifying',
   verificationFailed: 'verificationFailed',
   mismatch: 'mismatch',
   healthCheckSuccessful: 'healthCheckSuccessful',
 };
-function Content({ contentType }: { contentType: string }) {
+function Content({ contentType, asbEnabled }: { contentType: string; asbEnabled: boolean }) {
   const { BackupWallet } = useContext(LocalizationContext).translations;
   const illustrations = {
     [ContentType.verifying]: (
@@ -57,6 +63,7 @@ function Content({ contentType }: { contentType: string }) {
     <Box>
       <Box alignItems="center">{illustrations[contentType]}</Box>
       {descriptions[contentType] && <Text>{descriptions[contentType]}</Text>}
+      {asbEnabled && <Text>{BackupWallet.assistedServerBackupEnabled}</Text>}
     </Box>
   );
 }
@@ -67,7 +74,7 @@ function BackupHealthCheckList({ isUaiFlow }) {
   const { translations } = useContext(LocalizationContext);
   const { BackupWallet, vault: vaultText, common } = translations;
   const dispatch = useAppDispatch();
-  const { primaryMnemonic, backup } = useQuery(RealmSchema.KeeperApp).map(
+  const { primaryMnemonic, backup, id } = useQuery(RealmSchema.KeeperApp).map(
     getJSONFromRealmObject
   )[0];
   const {
@@ -87,17 +94,33 @@ function BackupHealthCheckList({ isUaiFlow }) {
   const history: BackupHistoryItem[] = useMemo(() => data.sorted('date', true), [data]);
   const { isOnL2Above } = usePlan();
   const isFocused = useIsFocused();
+  const [asbEnabled, setAsbEnabled] = useState(false);
 
   const onPressConfirm = () => {
     setShowConfirmSeedModal(true);
   };
 
+
+  useEffect(() => {
+    if (backupAllSuccess || backupAllFailure) {
+      if (!automaticCloudBackup) setAsbEnabled(true);
+      dispatch(setBackupAllSuccess(false));
+      dispatch(setBackupAllFailure(false));
+      dispatch(setAutomaticCloudBackup(true));
+      setHealthCheckModal(true);
+    }
+  }, [backupAllSuccess, backupAllFailure]);
+
   useEffect(() => {
     if (seedConfirmed) {
       setShowConfirmSeedModal(false);
-      setTimeout(() => {
-        setHealthCheckModal(true);
-      }, 100);
+      dispatch(setRecoveryKeyBackedUp({ appId: id as string, status: true }));
+      if (!automaticCloudBackup) dispatch(backupAllSignersAndVaults());
+      else {
+        setTimeout(() => {
+          setHealthCheckModal(true);
+        }, 100);
+      }
     }
     return () => {
       dispatch(setSeedConfirmed(false));
@@ -284,7 +307,9 @@ function BackupHealthCheckList({ isUaiFlow }) {
         buttonCallback={() => {
           navigtaion.navigate('Home');
         }}
-        Content={() => <Content contentType={ContentType.healthCheckSuccessful} />}
+        Content={() => (
+          <Content contentType={ContentType.healthCheckSuccessful} asbEnabled={asbEnabled} />
+        )}
         closeOnOverlayClick={true}
       />
       <ActivityIndicatorView visible={backupAllLoading} />

src/context/Localization/language/en.json

@@ -198,6 +198,7 @@
     "Createpasscode": "Create a passcode",
     "Confirmyourpasscode": "Confirm your passcode",
     "CreateApp": "Create a fresh app or recover an exisiting one",
+    "CreateAppOnly": "Create a fresh app",
     "passcode": "passcode",
     "Incorrect": "Incorrect Passcode, Try Again!",
     "newKeeperAppDesc": "Create a new Keeper app",
@@ -222,7 +223,11 @@
     "checkConnection": "Please check your internet connection and try again. If you continue offline, some features may not be available.",
     "incorrectPassword": "Incorrect Password",
     "youEnteredIncorrectPasscode": "You have entered an incorrect passcode. Please, try again. If you don’t remember your passcode, you will have to recover your wallet through the recovery flow",
-    "checkinternetConnection": "Please check your internet connection and try again."
+    "checkinternetConnection": "Please check your internet connection and try again.",
+    "forgotPasscode": "Forgot passcode?",
+    "resetPasscodeTitle": "Reset Passcode",
+    "resetPasscodeDec1": "For your security, passcode resets are verified with your recovery key.",
+    "resetPasscodeDec2": "Please have your recovery key ready before continuing."
   },
   "home": {
     "wallet": "Wallet",
@@ -243,7 +248,10 @@
     "incommingAndOutgoing": "All incoming and outgoing transactions",
     "viewAll": " View All",
     "securityTip": "Security Tip",
-    "securityTipDesc": "Recreate the multisig on more coordinators. Receive a small amount and send a part of it. Check the balances are appropriately reflected across all the coordinators after each step."
+    "securityTipDesc": "Recreate the multisig on more coordinators. Receive a small amount and send a part of it. Check the balances are appropriately reflected across all the coordinators after each step.",
+    "backupModalTitle": "Set Up Wallet Recovery",
+    "backupModalSubTitle": "To ensure you can always recover your wallet, please secure your Recovery Key and enable Assisted Server Backup.",
+    "backupModalDesc": "This ensure that your encrypted data is backed up and can be decrypted by your Recovery key"
   },
   "transactions": {
     "Fees": "Fees",
@@ -1138,7 +1146,8 @@
     "backupFailedModalDesc": "There might be a temporary issue with the server or your connection. Please try again later.",
     "mismatchModalTitle": "Data Mismatch Detected",
     "mismatchModalSubTitle": "Your local data doesn’t match the server backup.",
-    "mismatchModalDesc": "Some recent changes may not be backed up yet. To avoid data loss, we recommend initiating a backup now."
+    "mismatchModalDesc": "Some recent changes may not be backed up yet. To avoid data loss, we recommend initiating a backup now.",
+    "assistedServerBackupEnabled": "Assisted server backup is now enabled.\nThis will backup your encrypted data on a community-run Keeper server"
   },
   "importWallet": {
     "addDetails": "Add details",

src/context/Localization/language/es.json

@@ -198,6 +198,7 @@
     "Createpasscode": "Create a passcode",
     "Confirmyourpasscode": "Confirm your passcode",
     "CreateApp": "Create a fresh app or recover an exisiting one",
+    "CreateAppOnly": "Create a fresh app",
     "passcode": "passcode",
     "Incorrect": "Incorrect Passcode, Try Again!",
     "newKeeperAppDesc": "Create a new Keeper app",
@@ -222,7 +223,11 @@
     "checkConnection": "Please check your internet connection and try again. If you continue offline, some features may not be available.",
     "incorrectPassword": "Incorrect Password",
     "youEnteredIncorrectPasscode": "You have entered an incorrect passcode. Please, try again. If you don’t remember your passcode, you will have to recover your wallet through the recovery flow",
-    "checkinternetConnection": "Please check your internet connection and try again."
+    "checkinternetConnection": "Please check your internet connection and try again.",
+    "forgotPasscode": "Forgot passcode?",
+    "resetPasscodeTitle": "Reset Passcode",
+    "resetPasscodeDec1": "For your security, passcode resets are verified with your recovery key.",
+    "resetPasscodeDec2": "Please have your recovery key ready before continuing."
   },
   "home": {
     "wallet": "Wallet",
@@ -243,7 +248,10 @@
     "incommingAndOutgoing": "All incoming and outgoing transactions",
     "viewAll": " View All",
     "securityTip": "Security Tip",
-    "securityTipDesc": "Recreate the multisig on more coordinators. Receive a small amount and send a part of it. Check the balances are appropriately reflected across all the coordinators after each step."
+    "securityTipDesc": "Recreate the multisig on more coordinators. Receive a small amount and send a part of it. Check the balances are appropriately reflected across all the coordinators after each step.",
+    "backupModalTitle": "Set Up Wallet Recovery",
+    "backupModalSubTitle": "To ensure you can always recover your wallet, please secure your Recovery Key and enable Assisted Server Backup.",
+    "backupModalDesc": "This ensure that your encrypted data is backed up and can be decrypted by your Recovery key"
   },
   "transactions": {
     "Fees": "Fees",
@@ -1138,7 +1146,8 @@
     "backupFailedModalDesc": "There might be a temporary issue with the server or your connection. Please try again later.",
     "mismatchModalTitle": "Data Mismatch Detected",
     "mismatchModalSubTitle": "Your local data doesn’t match the server backup.",
-    "mismatchModalDesc": "Some recent changes may not be backed up yet. To avoid data loss, we recommend initiating a backup now."
+    "mismatchModalDesc": "Some recent changes may not be backed up yet. To avoid data loss, we recommend initiating a backup now.",
+    "assistedServerBackupEnabled": "Assisted server backup is now enabled.\nThis will backup your encrypted data on a community-run Keeper server"
   },
   "importWallet": {
     "addDetails": "Add details",

src/screens/Home/HomeScreen.tsx

@@ -17,12 +17,17 @@ import MenuFooter from 'src/components/MenuFooter';
 import HomeWallet from './components/Wallet/HomeWallet';
 import ManageKeys from './components/Keys/ManageKeys';
 import KeeperSettings from './components/Settings/keeperSettings';
-import { useNavigation } from '@react-navigation/native';
+import { CommonActions, useFocusEffect, useNavigation } from '@react-navigation/native';
 import TickIcon from 'src/assets/images/icon_tick.svg';
 import ThemedSvg from 'src/components/ThemedSvg.tsx/ThemedSvg';
 import ThemedColor from 'src/components/ThemedColor/ThemedColor';
 import BuyBtc from './components/buyBtc/BuyBtc';
 import ConciergeComponent from './components/ConciergeComponent';
+import KeeperModal from 'src/components/KeeperModal';
+import Text from 'src/components/KeeperText';
+import { useQuery } from '@realm/react';
+import { RealmSchema } from 'src/storage/realm/enum';
+import dbManager from 'src/storage/realm/dbManager';
 
 function NewHomeScreen({ route }) {
   const { colorMode } = useColorMode();
@@ -31,6 +36,7 @@ function NewHomeScreen({ route }) {
   const { addedSigner, selectedOption: selectedOptionFromRoute } = route.params || {};
   const { wallets } = useWallets({ getAll: true });
   const [electrumErrorVisible, setElectrumErrorVisible] = useState(false);
+  const [backupModalVisible, setBackupModalVisible] = useState(true);
   const home_header_circle_background = ThemedColor({ name: 'home_header_circle_background' });
 
   const { relayWalletUpdate, relayWalletError, realyWalletErrorMessage, homeToastMessage } =
@@ -41,13 +47,34 @@ function NewHomeScreen({ route }) {
   const [selectedOption, setSelectedOption] = useState(
     selectedOptionFromRoute || walletText.homeWallets
   );
+  const backupHistory = useQuery(RealmSchema.BackupHistory);
+  const { recoveryKeyBackedUpByAppId } = useAppSelector((state) => state.account);
+  const { id } = dbManager.getObjectByIndex(RealmSchema.KeeperApp) as any;
+  const shouldShowBackupModal = !(recoveryKeyBackedUpByAppId?.[id] ?? false);
 
   useEffect(() => {
     if (selectedOptionFromRoute && selectedOptionFromRoute !== selectedOption) {
       setSelectedOption(selectedOptionFromRoute);
     }
   }, [selectedOptionFromRoute]);
 
+  useEffect(() => {
+    if (shouldShowBackupModal) {
+      setBackupModalVisible(true);
+    }
+  }, [shouldShowBackupModal]);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      if (shouldShowBackupModal && selectedOption !== walletText.more) {
+        const timer = setTimeout(() => {
+          setBackupModalVisible(true);
+        }, 100);
+        return () => clearTimeout(timer);
+      }
+    }, [shouldShowBackupModal, selectedOption, walletText.more])
+  );
+
   const getContent = () => {
     switch (selectedOption) {
       case walletText.homeWallets:
@@ -159,6 +186,16 @@ function NewHomeScreen({ route }) {
     }
   }, [homeToastMessage]);
 
+  const BackupModalContent = () => {
+    return (
+      <Box style={{ gap: hp(10) }}>
+        <Text color={`${colorMode}.primaryText`} style={{ fontSize: 14, letterSpacing: 0.13 }}>
+          {homeTranslation.backupModalDesc}
+        </Text>
+      </Box>
+    );
+  };
+
   return (
     <Box backgroundColor={`${colorMode}.primaryBackground`} style={styles.container}>
       <InititalAppController
@@ -175,6 +212,39 @@ function NewHomeScreen({ route }) {
           navigation.navigate('Home', { selectedOption: option });
         }}
       />
+      <KeeperModal
+        visible={shouldShowBackupModal && backupModalVisible}
+        close={() => {}}
+        title={homeTranslation.backupModalTitle}
+        subTitle={homeTranslation.backupModalSubTitle}
+        modalBackground={`${colorMode}.modalWhiteBackground`}
+        textColor={`${colorMode}.textGreen`}
+        subTitleColor={`${colorMode}.modalSubtitleBlack`}
+        buttonBackground={`${colorMode}.pantoneGreen`}
+        showCloseIcon={false}
+        buttonText={'Backup Recovery Key'}
+        buttonCallback={() => {
+          setBackupModalVisible(false);
+          setTimeout(() => {
+            if (backupHistory.length === 0) {
+              navigation.dispatch(
+                CommonActions.navigate('Home', {
+                  selectedOption: 'More',
+                  isUaiFlow: true,
+                })
+              );
+            } else {
+              navigation.dispatch(
+                CommonActions.navigate('WalletBackHistory', {
+                  isUaiFlow: true,
+                })
+              );
+            }
+          }, 300);
+        }}
+        buttonTextColor={`${colorMode}.buttonText`}
+        Content={BackupModalContent}
+      />
     </Box>
   );
 }

src/screens/Home/components/Settings/Component/SettingModal.tsx

@@ -2,6 +2,7 @@ import { CommonActions, useNavigation } from '@react-navigation/native';
 import { useQuery } from '@realm/react';
 import { Box, useColorMode } from 'native-base';
 import React, { useContext, useEffect, useState } from 'react';
+import { Platform } from 'react-native';
 import KeeperModal from 'src/components/KeeperModal';
 import PasscodeVerifyModal from 'src/components/Modal/PasscodeVerify';
 import { wp } from 'src/constants/responsive';
@@ -26,7 +27,10 @@ const SettingModal = ({ isUaiFlow, confirmPass, setConfirmPass }) => {
   useEffect(() => {
     if (confirmPass || isUaiFlow) {
       navigation.setParams({ isUaiFlow: false });
-      setConfirmPassVisible(true);
+      const delay = Platform.OS === 'ios' ? 400 : 0;
+      setTimeout(() => {
+        setConfirmPassVisible(true);
+      }, delay);
     }
   }, [confirmPass, isUaiFlow]);