Add password for backups

apps/desktop/src/components/ErrorPage.tsx

@@ -1,11 +1,11 @@
 import { Box, Button, Center, Heading, Link, VStack } from "@chakra-ui/react";
-import { downloadBackupFile } from "@umami/state";
 
 import { useOffboardingModal } from "./Offboarding/useOffboardingModal";
 import { ModalContentWrapper } from "./Onboarding/ModalContentWrapper";
 import { NoticeIcon, ReloadIcon } from "../assets/icons";
 import BackgroundImage from "../assets/onboarding/background_image.png";
 import colors from "../style/colors";
+import { useSaveBackup } from "../utils/useSaveBackup";
 
 const feedbackEmailBodyTemplate =
   "What is it about? (if a bug report please consider including your account address) %0A PLEASE FILL %0A%0A What is the feedback? %0A PLEASE FILL";
@@ -16,9 +16,11 @@ const refresh = () => {
 
 export const ErrorPage = () => {
   const { modalElement: OffboardingModal, onOpen: onOpenOffboardingModal } = useOffboardingModal();
+  const { content: saveBackupModal, onOpen: saveBackup } = useSaveBackup();
 
   return (
     <Center height="100vh" padding="60px" backgroundImage={BackgroundImage} backgroundSize="cover">
+      {saveBackupModal}
       <Box
         width="480px"
         padding="40px"
@@ -34,7 +36,7 @@ export const ErrorPage = () => {
           title="Oops! Something went wrong!"
         >
           <VStack width="100%" spacing="16px">
-            <Button width="100%" borderRadius="4px" onClick={downloadBackupFile} size="lg">
+            <Button width="100%" borderRadius="4px" onClick={saveBackup} size="lg">
               Save Backup
             </Button>
 

apps/desktop/src/components/Onboarding/masterPassword/MasterPassword.tsx

@@ -14,9 +14,11 @@ import { EnterPassword } from "./password/EnterPassword";
 export const MasterPassword = ({
   account,
   onClose,
+  onVerify,
 }: {
-  account: MasterPasswordStep["account"];
-  onClose: () => void;
+  account?: MasterPasswordStep["account"];
+  onClose?: () => void;
+  onVerify?: (password: string) => void;
 }) => {
   const restoreFromMnemonic = useRestoreFromMnemonic();
   const restoreFromSecretKey = useRestoreFromSecretKey();
@@ -25,10 +27,19 @@ export const MasterPassword = ({
 
   const { isLoading, handleAsyncAction } = useAsyncActionHandler();
   const toast = useToast();
+
   const handleSubmit = (password: string) =>
     handleAsyncAction(async () => {
       await checkPassword?.(password);
 
+      if (onVerify) {
+        return onVerify(password);
+      }
+
+      if (!account) {
+        throw new Error("No account data provided.");
+      }
+
       switch (account.type) {
         case "secret_key":
           await restoreFromSecretKey(account.secretKey, password, account.label);
@@ -41,7 +52,7 @@ export const MasterPassword = ({
           });
       }
       toast({ description: "Account successfully created!", status: "success" });
-      onClose();
+      onClose?.();
     });
 
   if (passwordHasBeenSet) {

apps/desktop/src/utils/useSaveBackup.tsx

@@ -0,0 +1,37 @@
+import {
+  Modal,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { downloadBackupFile } from "@umami/state";
+
+import { MasterPassword } from "../components/Onboarding/masterPassword/MasterPassword";
+
+export const useSaveBackup = () => {
+  const { isOpen, onClose, onOpen } = useDisclosure();
+
+  return {
+    content: (
+      <Modal
+        autoFocus={false}
+        closeOnOverlayClick={false}
+        isCentered
+        isOpen={isOpen}
+        onClose={onClose}
+      >
+        <ModalContent>
+          <ModalHeader>
+            <ModalCloseButton />
+          </ModalHeader>
+          <MasterPassword
+            onClose={onClose}
+            onVerify={password => downloadBackupFile(password).then(onClose)}
+          />
+        </ModalContent>
+      </Modal>
+    ),
+    onOpen,
+  };
+};

apps/desktop/src/views/settings/SettingsView.tsx

@@ -1,6 +1,5 @@
 import { Box, Button, Flex, Heading } from "@chakra-ui/react";
 import { useDynamicModalContext } from "@umami/components";
-import { downloadBackupFile } from "@umami/state";
 import { type PropsWithChildren } from "react";
 
 import { DAppsDrawerCard } from "./DAppsDrawerCard";
@@ -11,6 +10,7 @@ import { ChangePasswordForm } from "../../components/ChangePassword/ChangePasswo
 import { ClickableCard, SettingsCardWithDrawerIcon } from "../../components/ClickableCard";
 import { useOffboardingModal } from "../../components/Offboarding/useOffboardingModal";
 import { TopBar } from "../../components/TopBar";
+import { useSaveBackup } from "../../utils/useSaveBackup";
 
 export const SettingsView = () => (
   <Flex flexDirection="column" height="100%">
@@ -27,33 +27,28 @@ export const SettingsView = () => (
 
 const GeneralSection = () => (
   <SectionContainer title="General">
-    {/*
-        TODO: implement this
-        <SettingsCard left="Theme">
-          <Flex alignItems="center" justifyContent="space-between">
-            <Text size="sm">Light</Text>
-            <Switch marginX={3} isChecked isDisabled />
-            <Heading size="sm">Dark</Heading>
-          </Flex>
-        </SettingsCard>
-      */}
     <NetworkSettingsDrawerCard />
     <ErrorLogsDrawerCard />
   </SectionContainer>
 );
 
-const BackupSection = () => (
-  <SectionContainer title="Backup">
-    <ClickableCard isSelected={false} onClick={downloadBackupFile}>
-      <Flex alignItems="center" justifyContent="space-between">
-        <Heading size="sm">Download backup file</Heading>
-        <Button onClick={downloadBackupFile} variant="unstyled">
-          <DownloadIcon cursor="pointer" />
-        </Button>
-      </Flex>
-    </ClickableCard>
-  </SectionContainer>
-);
+const BackupSection = () => {
+  const { onOpen, content } = useSaveBackup();
+
+  return (
+    <SectionContainer title="Backup">
+      {content}
+      <ClickableCard isSelected={false} onClick={onOpen}>
+        <Flex alignItems="center" justifyContent="space-between">
+          <Heading size="sm">Download backup file</Heading>
+          <Button onClick={onOpen} variant="unstyled">
+            <DownloadIcon cursor="pointer" />
+          </Button>
+        </Flex>
+      </ClickableCard>
+    </SectionContainer>
+  );
+};
 
 const AdvancedSection = () => {
   const { modalElement: OffboardingModal, onOpen: onOpenOffboardingModal } = useOffboardingModal();
@@ -62,10 +57,6 @@ const AdvancedSection = () => {
   return (
     <SectionContainer title="Advanced Settings">
       <DAppsDrawerCard />
-      {/*
-        TODO: implement this
-        <SettingsCardWithDrawerIcon left="Reset Settings" onClick={() => {}} />
-      */}
       <SettingsCardWithDrawerIcon
         left="Off-board Wallet"
         isSelected={false}

apps/web/src/components/Menu/Menu.test.tsx

@@ -92,6 +92,10 @@ describe("<Menu />", () => {
 
       await user.click(screen.getByText("Save Backup"));
 
+      await user.type(screen.getByLabelText("Set Password"), "password");
+      await user.type(screen.getByLabelText("Confirm Password"), "password");
+      await user.click(screen.getByRole("button", { name: "Save Backup" }));
+
       expect(downloadBackupFile).toHaveBeenCalled();
     });
 

apps/web/src/components/Menu/Menu.tsx

@@ -1,13 +1,13 @@
 import { Switch } from "@chakra-ui/react";
 import { useColorMode } from "@chakra-ui/system";
 import { useDynamicDrawerContext, useDynamicModalContext } from "@umami/components";
-import { downloadBackupFile } from "@umami/state";
 
 import { AddressBookMenu } from "./AddressBookMenu/AddressBookMenu";
 import { AdvancedMenu } from "./AdvancedMenu/AdvancedMenu";
 import { AppsMenu } from "./AppsMenu/AppsMenu";
 import { GenericMenu } from "./GenericMenu";
 import { LogoutModal } from "./LogoutModal";
+import { useSaveBackup } from "./useSaveBackup";
 import {
   BookIcon,
   CodeSandboxIcon,
@@ -25,6 +25,7 @@ export const Menu = () => {
   const { openWith: openDrawer } = useDynamicDrawerContext();
   const { colorMode, toggleColorMode } = useColorMode();
   const isVerified = useIsAccountVerified();
+  const saveBackup = useSaveBackup();
 
   const colorModeSwitchLabel = colorMode === "light" ? "Light mode" : "Dark mode";
 
@@ -43,7 +44,7 @@ export const Menu = () => {
     {
       label: "Save Backup",
       icon: <DownloadIcon />,
-      onClick: downloadBackupFile,
+      onClick: saveBackup,
     },
     {
       label: "Apps",

apps/web/src/components/Menu/useSaveBackup.tsx

@@ -0,0 +1,9 @@
+import { useDynamicModalContext } from "@umami/components";
+
+import { SetupPassword } from "../Onboarding/SetupPassword";
+
+export const useSaveBackup = () => {
+  const { openWith } = useDynamicModalContext();
+
+  return () => openWith(<SetupPassword mode="save_backup" />);
+};

apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx

@@ -15,6 +15,7 @@ import { useDynamicModalContext, useMultiForm } from "@umami/components";
 import { DEFAULT_ACCOUNT_LABEL, type MnemonicAccount } from "@umami/core";
 import {
   accountsActions,
+  downloadBackupFile,
   generate24WordMnemonic,
   useAppDispatch,
   useAsyncActionHandler,
@@ -44,7 +45,7 @@ type FormFields = {
   curve: Exclude<Curves, "bip25519">;
 };
 
-type Mode = "mnemonic" | "secret_key" | "new_mnemonic" | "verification";
+type Mode = "mnemonic" | "secret_key" | "new_mnemonic" | "verification" | "save_backup";
 
 type SetupPasswordProps = {
   mode: Mode;
@@ -66,6 +67,12 @@ const getModeConfig = (mode: Mode) => {
         buttonLabel: "Create Account",
         subtitle: "Set a password to unlock your wallet. Make sure to store your password safely.",
       };
+    case "save_backup":
+      return {
+        icon: LockIcon,
+        title: "Encrypt Backup",
+        buttonLabel: "Save Backup",
+      };
     case "mnemonic":
     case "secret_key":
       return {
@@ -146,6 +153,9 @@ export const SetupPassword = ({ mode }: SetupPasswordProps) => {
 
           return openWith(<ImportantNoticeModal mnemonic={mnemonic} />, { size: "xl" });
         }
+        case "save_backup": {
+          await downloadBackupFile(password);
+        }
       }
 
       return onClose();

packages/crypto/src/AES.ts

@@ -18,7 +18,7 @@ export const encrypt = async (data: string, password: string): Promise<Encrypted
   const encrypted = await crypto.subtle.encrypt(
     {
       name: AES_MODE,
-      iv: iv,
+      iv,
     },
     derivedKey,
     Buffer.from(data, "utf-8")

packages/state/src/hooks/backup.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_ACCOUNT_LABEL } from "@umami/core";
-import { type EncryptedData, decrypt } from "@umami/crypto";
+import { type EncryptedData, decrypt, encrypt } from "@umami/crypto";
 import { type Persistor } from "redux-persist";
 
 import { useRestoreFromMnemonic } from "./setAccountData";
@@ -8,6 +8,8 @@ const isV1Backup = (backup: any) => backup["recoveryPhrases"] && backup["derivat
 
 const isV2Backup = (backup: any) => !!backup["persist:accounts"];
 
+const isV3Backup = (backup: any) => ["data", "iv", "salt"].every(key => key in backup);
+
 export const useRestoreBackup = () => {
   const restoreV1 = useRestoreV1BackupFile();
 
@@ -18,17 +20,18 @@ export const useRestoreBackup = () => {
     if (isV2Backup(backup)) {
       return restoreV2BackupFile(backup, password, persistor);
     }
+    if (isV3Backup(backup)) {
+      return restoreV3BackupFile(backup, password, persistor);
+    }
     throw new Error("Invalid backup file.");
   };
 };
 
+type V1Backup = { recoveryPhrases: [EncryptedData]; derivationPaths: [string] };
 export const useRestoreV1BackupFile = () => {
   const restoreFromMnemonic = useRestoreFromMnemonic();
 
-  return async (
-    backup: { recoveryPhrases: [EncryptedData]; derivationPaths: [string] },
-    password: string
-  ) => {
+  return async (backup: V1Backup, password: string) => {
     const encrypted: [EncryptedData] = backup["recoveryPhrases"];
     // The prefix `m/` from V1 can be ignored.
     const derivationPaths = backup.derivationPaths.map((path: string) =>
@@ -53,8 +56,9 @@ export const useRestoreV1BackupFile = () => {
   };
 };
 
+type V2Backup = { "persist:accounts": string; "persist:root": string };
 export const restoreV2BackupFile = async (
-  backup: { "persist:accounts": string; "persist:root": string },
+  backup: V2Backup,
   password: string,
   persistor: Persistor
 ) => {
@@ -80,18 +84,28 @@ export const restoreV2BackupFile = async (
   window.location.reload();
 };
 
-export const downloadBackupFile = () => {
+export const restoreV3BackupFile = async (
+  encryptedBackup: EncryptedData,
+  password: string,
+  persistor: Persistor
+) => {
+  const backup = JSON.parse(await decrypt(encryptedBackup, password, "V2")) as V2Backup;
+  return restoreV2BackupFile(backup, password, persistor);
+};
+
+export const downloadBackupFile = async (password: string) => {
   const storage = {
     "persist:accounts": localStorage.getItem("persist:accounts"),
     "persist:root": localStorage.getItem("persist:root"),
   };
+  const rawBackup = JSON.stringify(storage);
+  const encryptedBackup = await encrypt(rawBackup, password);
 
-  const downloadedDate = new Date().toISOString().slice(0, 10);
-
-  const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(JSON.stringify(storage))}`;
   const link = document.createElement("a");
-  link.href = jsonString;
-  link.download = `UmamiV2Backup_${downloadedDate}.json`;
+
+  const currentDate = new Date().toISOString().slice(0, 10);
+  link.href = `data:text/json;chatset=utf-8,${encodeURIComponent(JSON.stringify(encryptedBackup))}`;
+  link.download = `UmamiV2Backup_${currentDate}.json`;
 
   link.click();
 };