Fix: Wallets being marked as backed up by walletLoadState()

src/components/backup/RestoreCloudStep.tsx

@@ -5,7 +5,14 @@ import { useDispatch } from 'react-redux';
 import WalletAndBackup from '@/assets/WalletsAndBackup.png';
 import { KeyboardArea } from 'react-native-keyboard-area';
 
-import { Backup, fetchBackupPassword, restoreCloudBackup, RestoreCloudBackupResultStates, saveBackupPassword } from '@/model/backup';
+import {
+  Backup,
+  fetchBackupPassword,
+  getLocalBackupPassword,
+  restoreCloudBackup,
+  RestoreCloudBackupResultStates,
+  saveLocalBackupPassword,
+} from '@/model/backup';
 import { cloudPlatform } from '@/utils/platform';
 import { PasswordField } from '../fields';
 import { Text } from '../text';
@@ -14,7 +21,13 @@ import { cloudBackupPasswordMinLength, isCloudBackupPasswordValid, normalizeAndr
 import walletBackupTypes from '@/helpers/walletBackupTypes';
 import { useDimensions, useInitializeWallet } from '@/hooks';
 import { useNavigation } from '@/navigation';
-import { addressSetSelected, setAllWalletsWithIdsAsBackedUp, walletsLoadState, walletsSetSelected } from '@/redux/wallets';
+import {
+  addressSetSelected,
+  setAllWalletsWithIdsAsBackedUp,
+  setWalletBackedUp,
+  walletsLoadState,
+  walletsSetSelected,
+} from '@/redux/wallets';
 import Routes from '@/navigation/routesNames';
 import styled from '@/styled-thing';
 import { padding } from '@/styles';
@@ -122,6 +135,8 @@ export default function RestoreCloudStep() {
         throw new Error('No backup file selected');
       }
 
+      const prevWalletsState = await dispatch(walletsLoadState());
+
       const status = await restoreCloudBackup({
         password,
         userData,
@@ -130,34 +145,49 @@ export default function RestoreCloudStep() {
 
       if (status === RestoreCloudBackupResultStates.success) {
         // Store it in the keychain in case it was missing
-        await saveBackupPassword(password);
+        const hasSavedPassword = await getLocalBackupPassword();
+        if (!hasSavedPassword) {
+          await saveLocalBackupPassword(password);
+        }
 
         InteractionManager.runAfterInteractions(async () => {
-          const wallets = await dispatch(walletsLoadState());
+          const newWalletsState = await dispatch(walletsLoadState());
           let filename = selectedBackup.name;
           if (IS_ANDROID && filename) {
-            /**
-             * We need to normalize the filename on Android, because sometimes
-             * the filename is returned with the path used for Google Drive storage.
-             * That is with REMOTE_BACKUP_WALLET_DIR included.
-             */
             filename = normalizeAndroidBackupFilename(filename);
           }
 
           logger.info('Done updating backup state');
-          const walletIdsToUpdate = Object.keys(wallets);
+          // NOTE: Marking the restored wallets as backed up
+          // @ts-expect-error TypeScript doesn't play nicely with Redux types here
+          const walletIdsToUpdate = Object.keys(newWalletsState || {}).filter(walletId => !(prevWalletsState || {})[walletId]);
           logger.log('updating backup state of wallets with ids', {
             walletIds: JSON.stringify(walletIdsToUpdate),
           });
           logger.log('backupSelected.name', {
             fileName: selectedBackup.name,
           });
+
           await dispatch(setAllWalletsWithIdsAsBackedUp(walletIdsToUpdate, walletBackupTypes.cloud, filename));
 
-          const walletKeys = Object.keys(wallets || {});
-          const firstWallet =
-            // @ts-expect-error TypeScript doesn't play nicely with Redux types here
-            walletKeys.length > 0 ? (wallets || {})[walletKeys[0]] : undefined;
+          const oldCloudIds: string[] = [];
+          const oldManualIds: string[] = [];
+          // NOTE: Looping over previous wallets and restoring backup state of that wallet
+          Object.values(prevWalletsState || {}).forEach(wallet => {
+            // NOTE: This handles cloud and manual backups
+            if (wallet.backedUp && wallet.backupType === walletBackupTypes.cloud) {
+              oldCloudIds.push(wallet.id);
+            } else if (wallet.backedUp && wallet.backupType === walletBackupTypes.manual) {
+              oldManualIds.push(wallet.id);
+            }
+          });
+
+          await dispatch(setAllWalletsWithIdsAsBackedUp(oldCloudIds, walletBackupTypes.cloud, filename));
+          await dispatch(setAllWalletsWithIdsAsBackedUp(oldManualIds, walletBackupTypes.manual, filename));
+
+          const walletKeys = Object.keys(newWalletsState || {});
+          // @ts-expect-error TypeScript doesn't play nicely with Redux types here
+          const firstWallet = walletKeys.length > 0 ? (newWalletsState || {})[walletKeys[0]] : undefined;
           const firstAddress = firstWallet ? firstWallet.addresses[0].address : undefined;
           const p1 = dispatch(walletsSetSelected(firstWallet));
           const p2 = dispatch(addressSetSelected(firstAddress));

src/components/backup/useCreateBackup.ts

@@ -35,7 +35,6 @@ export const useCreateBackup = ({ walletId, navigateToRoute }: UseCreateBackupPr
   const walletCloudBackup = useWalletCloudBackup();
   const { latestBackup, wallets } = useWallets();
   const [loading, setLoading] = useState<useCreateBackupStateType>('none');
-  const [alreadyHasLocalPassword, setAlreadyHasLocalPassword] = useState(false);
 
   const [password, setPassword] = useState('');
 
@@ -49,7 +48,8 @@ export const useCreateBackup = ({ walletId, navigateToRoute }: UseCreateBackupPr
     [setLoading]
   );
   const onSuccess = useCallback(async () => {
-    if (!alreadyHasLocalPassword) {
+    const hasSavedPassword = await getLocalBackupPassword();
+    if (!hasSavedPassword) {
       await saveLocalBackupPassword(password);
     }
     analytics.track('Backup Complete', {
@@ -58,7 +58,7 @@ export const useCreateBackup = ({ walletId, navigateToRoute }: UseCreateBackupPr
     });
     setLoadingStateWithTimeout('success');
     fetchBackups();
-  }, [alreadyHasLocalPassword, setLoadingStateWithTimeout, fetchBackups, password]);
+  }, [setLoadingStateWithTimeout, fetchBackups, password]);
 
   const onError = useCallback(
     (msg: string) => {
@@ -115,7 +115,6 @@ export const useCreateBackup = ({ walletId, navigateToRoute }: UseCreateBackupPr
   const getPassword = useCallback(async (): Promise<string | null> => {
     const password = await getLocalBackupPassword();
     if (password) {
-      setAlreadyHasLocalPassword(true);
       setPassword(password);
       return password;
     }

src/components/backup/usePasswordValidation.ts

@@ -22,6 +22,7 @@ export const usePasswordValidation = (password: string, confirmPassword: string)
       newLabel = lang.t('back_up.cloud.password.minimum_characters', {
         minimumLength: cloudBackupPasswordMinLength,
       });
+      passwordIsValid = false;
     } else if (
       isCloudBackupPasswordValid(password) &&
       isCloudBackupPasswordValid(confirmPassword) &&
@@ -30,6 +31,7 @@ export const usePasswordValidation = (password: string, confirmPassword: string)
     ) {
       newLabel = lang.t(lang.l.back_up.cloud.password.passwords_dont_match);
       setLabelColor(colors.red);
+      passwordIsValid = false;
     }
 
     setValidPassword(passwordIsValid);

src/screens/SettingsSheet/components/Backups/ViewWalletBackup.tsx

@@ -28,10 +28,16 @@ import Routes from '@/navigation/routesNames';
 import walletBackupTypes from '@/helpers/walletBackupTypes';
 import { SETTINGS_BACKUP_ROUTES } from './routes';
 import { analyticsV2 } from '@/analytics';
-import { InteractionManager } from 'react-native';
+import { InteractionManager, Linking } from 'react-native';
 import { useDispatch } from 'react-redux';
 import { createAccountForWallet, walletsLoadState } from '@/redux/wallets';
-import { backupUserDataIntoCloud } from '@/handlers/cloudBackup';
+import {
+  GoogleDriveUserData,
+  backupUserDataIntoCloud,
+  getGoogleAccountUserData,
+  isCloudBackupAvailable,
+  login,
+} from '@/handlers/cloudBackup';
 import { logger, RainbowError } from '@/logger';
 import { captureException } from '@sentry/react-native';
 import { RainbowAccount, createWallet } from '@/model/wallet';
@@ -47,6 +53,7 @@ import { WalletCountPerType, useVisibleWallets } from '../../useVisibleWallets';
 import { format } from 'date-fns';
 import { removeFirstEmojiFromString } from '@/helpers/emojiHandler';
 import { Backup, parseTimestampFromFilename } from '@/model/backup';
+import { WrappedAlert as Alert } from '@/helpers/alert';
 
 type ViewWalletBackupParams = {
   ViewWalletBackup: { walletId: string; title: string; imported?: boolean };
@@ -180,6 +187,47 @@ const ViewWalletBackup = () => {
     walletId,
   });
 
+  const backupWalletsToCloud = useCallback(async () => {
+    if (IS_ANDROID) {
+      try {
+        await login();
+
+        getGoogleAccountUserData().then((accountDetails: GoogleDriveUserData | undefined) => {
+          if (accountDetails) {
+            return onSubmit({});
+          }
+          Alert.alert(i18n.t(i18n.l.back_up.errors.no_account_found));
+        });
+      } catch (e) {
+        Alert.alert(i18n.t(i18n.l.back_up.errors.no_account_found));
+        logger.error(e as RainbowError);
+      }
+    } else {
+      const isAvailable = await isCloudBackupAvailable();
+      if (!isAvailable) {
+        Alert.alert(
+          i18n.t(i18n.l.modal.back_up.alerts.cloud_not_enabled.label),
+          i18n.t(i18n.l.modal.back_up.alerts.cloud_not_enabled.description),
+          [
+            {
+              onPress: () => {
+                Linking.openURL('https://support.apple.com/en-us/HT204025');
+              },
+              text: i18n.t(i18n.l.modal.back_up.alerts.cloud_not_enabled.show_me),
+            },
+            {
+              style: 'cancel',
+              text: i18n.t(i18n.l.modal.back_up.alerts.cloud_not_enabled.no_thanks),
+            },
+          ]
+        );
+        return;
+      }
+    }
+
+    onSubmit({});
+  }, [onSubmit]);
+
   const onNavigateToSecretWarning = useCallback(() => {
     navigate(SETTINGS_BACKUP_ROUTES.SECRET_WARNING, {
       walletId,
@@ -395,7 +443,7 @@ const ViewWalletBackup = () => {
                   cloudPlatformName: cloudPlatform,
                 })}
                 loading={loading}
-                onPress={() => onSubmit({})}
+                onPress={backupWalletsToCloud}
               />
             </Menu>
           )}
@@ -415,7 +463,7 @@ const ViewWalletBackup = () => {
                   cloudPlatformName: cloudPlatform,
                 })}
                 loading={loading}
-                onPress={() => onSubmit({})}
+                onPress={backupWalletsToCloud}
               />
             </Menu>
           )}

src/screens/SettingsSheet/components/Backups/WalletsAndBackup.tsx

@@ -35,7 +35,9 @@ import { format } from 'date-fns';
 import { removeFirstEmojiFromString } from '@/helpers/emojiHandler';
 import { Backup, parseTimestampFromFilename } from '@/model/backup';
 import { useCloudBackups } from '@/components/backup/CloudBackupProvider';
-import { login } from '@/handlers/cloudBackup';
+import { GoogleDriveUserData, getGoogleAccountUserData, isCloudBackupAvailable, login } from '@/handlers/cloudBackup';
+import { WrappedAlert as Alert } from '@/helpers/alert';
+import { Linking } from 'react-native';
 
 type WalletPillProps = {
   account: RainbowAccount;
@@ -164,7 +166,40 @@ export const WalletsAndBackup = () => {
 
   const backupAllNonBackedUpWalletsTocloud = useCallback(async () => {
     if (IS_ANDROID) {
-      await login();
+      try {
+        await login();
+
+        getGoogleAccountUserData().then((accountDetails: GoogleDriveUserData | undefined) => {
+          if (accountDetails) {
+            return onSubmit({ type: BackupTypes.All });
+          }
+          Alert.alert(i18n.t(i18n.l.back_up.errors.no_account_found));
+        });
+      } catch (e) {
+        Alert.alert(i18n.t(i18n.l.back_up.errors.no_account_found));
+        logger.error(e as RainbowError);
+      }
+    } else {
+      const isAvailable = await isCloudBackupAvailable();
+      if (!isAvailable) {
+        Alert.alert(
+          i18n.t(i18n.l.modal.back_up.alerts.cloud_not_enabled.label),
+          i18n.t(i18n.l.modal.back_up.alerts.cloud_not_enabled.description),
+          [
+            {
+              onPress: () => {
+                Linking.openURL('https://support.apple.com/en-us/HT204025');
+              },
+              text: i18n.t(i18n.l.modal.back_up.alerts.cloud_not_enabled.show_me),
+            },
+            {
+              style: 'cancel',
+              text: i18n.t(i18n.l.modal.back_up.alerts.cloud_not_enabled.no_thanks),
+            },
+          ]
+        );
+        return;
+      }
     }
 
     onSubmit({ type: BackupTypes.All });
@@ -320,6 +355,37 @@ export const WalletsAndBackup = () => {
                   titleComponent={<MenuItem.Title isLink text={i18n.t(i18n.l.back_up.manual.create_new_secret_phrase)} />}
                 />
               </Menu>
+
+              <Menu>
+                <MenuItem
+                  hasSfSymbol
+                  leftComponent={<MenuItem.TextIcon icon="􀣔" isLink />}
+                  onPress={onViewCloudBackups}
+                  size={52}
+                  titleComponent={
+                    <MenuItem.Title
+                      isLink
+                      text={i18n.t(i18n.l.back_up.cloud.manage_platform_backups, {
+                        cloudPlatformName: cloudPlatform,
+                      })}
+                    />
+                  }
+                />
+                <MenuItem
+                  hasSfSymbol
+                  leftComponent={<MenuItem.TextIcon icon="􀍡" isLink />}
+                  onPress={manageCloudBackups}
+                  size={52}
+                  titleComponent={
+                    <MenuItem.Title
+                      isLink
+                      text={i18n.t(i18n.l.back_up.cloud.cloud_platform_backup_settings, {
+                        cloudPlatformName: cloudPlatform,
+                      })}
+                    />
+                  }
+                />
+              </Menu>
             </Stack>
           </Stack>
         );