feat(Backup): Add backup screen.

packages/renderer/src/constants/lang/LangKeys.ts

@@ -46,4 +46,10 @@ export enum LangKeys {
   AccountSecurityFieldCurrentPassword = "account.security.field.currentPassword",
   AccountSecurityFieldPasswordFormatMsg = "account.security.field.password.format.message",
   AccountSecurityFieldRepeatPasswordMatchMsg = "account.security.field.repeatPassword.match.message",
+  AccountBackupDownloadTitle = "account.backup.download.title",
+  AccountBackupDownloadDesc = "account.backup.download.desc",
+  AccountBackupDownloadBtn = "account.backup.download.btn",
+  AccountBackupRestoreTitle = "account.backup.restore.title",
+  AccountBackupRestoreDesc = "account.backup.restore.desc",
+  AccountBackupRestoreBtn = "account.backup.restore.btn",
 }

packages/renderer/src/constants/lang/en.ts

@@ -53,6 +53,14 @@ const LangPackEN: { [key in LangKeys]: string } = {
   [LangKeys.AccountSecurityFieldRepeatPasswordMatchMsg]:
     "Passwords don't match",
   [LangKeys.CreatePassword]: "Create password",
+  [LangKeys.AccountBackupDownloadTitle]: "Download your backup file",
+  [LangKeys.AccountBackupDownloadDesc]:
+    "To be able to restore your Haveno account you need to create a backup file of your account. Keep it somewhere safe.",
+  [LangKeys.AccountBackupDownloadBtn]: "Download backup file",
+  [LangKeys.AccountBackupRestoreTitle]: "Restore an existing backup file",
+  [LangKeys.AccountBackupRestoreDesc]:
+    "When you restore an existing backup file of your Haveno account, you will lose the account you’re using currently. Please use with caution.",
+  [LangKeys.AccountBackupRestoreBtn]: "Restore backup",
 };
 
 export default LangPackEN;

packages/renderer/src/constants/lang/es.ts

@@ -54,6 +54,17 @@ const LangPackES: { [key in LangKeys]: string } = {
   [LangKeys.AccountSecurityFieldRepeatPasswordMatchMsg]:
     "La confirmación de la contraseña no coincide con la contraseña.",
   [LangKeys.CreatePassword]: "Crear contraseña",
+  [LangKeys.AccountBackupDownloadTitle]:
+    "Descarga tu archivo de copia de seguridad",
+  [LangKeys.AccountBackupDownloadDesc]:
+    "Para poder restore your Haveno account you need to create a backup file of your account. Keep it somewhere safe.",
+  [LangKeys.AccountBackupDownloadBtn]:
+    "Descargar archivo de copia de seguridad",
+  [LangKeys.AccountBackupRestoreTitle]:
+    "Restaurar un archivo de copia de seguridad existente",
+  [LangKeys.AccountBackupRestoreDesc]:
+    "Cuando restaure un archivo de respaldo existente de su cuenta de Haveno, perderá la cuenta que está usando actualmente. Úselo con precaución.",
+  [LangKeys.AccountBackupRestoreBtn]: "Restaurar copia de seguridad",
 };
 
 export default LangPackES;

packages/renderer/src/pages/Account/Backup/AccountBackup.tsx

@@ -14,12 +14,20 @@
 //  limitations under the License.
 // =============================================================================
 
+import { Box, Stack } from "@mantine/core";
 import { AccountLayout } from "@templates/AccountLayout";
+import { AccountBackupDownload } from "./AccountBackupDownload";
+import { AccountRestoreDownload } from "./AccountBackupRestore";
 
 export function AccountBackup() {
   return (
     <AccountLayout>
-      <h1>Account Backup</h1>
+      <Box>
+        <Stack spacing={40}>
+          <AccountBackupDownload />
+          <AccountRestoreDownload />
+        </Stack>
+      </Box>
     </AccountLayout>
   );
 }

packages/renderer/src/pages/Account/Backup/AccountBackupDownload.tsx

@@ -0,0 +1,45 @@
+import { FormattedMessage } from "react-intl";
+import { Box, createStyles } from "@mantine/core";
+import { BodyText, Heading } from "@atoms/Typography";
+import { LangKeys } from "@constants/lang";
+import { Button } from "@atoms/Buttons";
+
+export function AccountBackupDownload() {
+  const { classes } = useStyles();
+
+  return (
+    <Box>
+      <Heading
+        className={classes.heading}
+        order={3}
+        stringId={LangKeys.AccountBackupDownloadTitle}
+      >
+        Download your backup file
+      </Heading>
+
+      <BodyText
+        stringId={LangKeys.AccountBackupDownloadDesc}
+        className={classes.desc}
+      >
+        To be able to restore your Haveno account you need to create a backup
+        file of your account. Keep it somewhere safe.
+      </BodyText>
+
+      <Button>
+        <FormattedMessage
+          id={LangKeys.AccountBackupDownloadBtn}
+          defaultMessage="Download backup file"
+        />
+      </Button>
+    </Box>
+  );
+}
+
+const useStyles = createStyles((theme) => ({
+  heading: {
+    marginBottom: theme.spacing.md,
+  },
+  desc: {
+    marginBottom: theme.spacing.lg,
+  },
+}));

packages/renderer/src/pages/Account/Backup/AccountBackupRestore.tsx

@@ -0,0 +1,45 @@
+import { Box, createStyles } from "@mantine/core";
+import { BodyText, Heading } from "@atoms/Typography";
+import { LangKeys } from "@constants/lang";
+import { Button } from "@atoms/Buttons";
+import { FormattedMessage } from "react-intl";
+
+export function AccountRestoreDownload() {
+  const { classes } = useStyles();
+
+  return (
+    <Box>
+      <Heading
+        order={3}
+        stringId={LangKeys.AccountBackupRestoreTitle}
+        className={classes.heading}
+      >
+        Restore an existing backup file
+      </Heading>
+
+      <BodyText
+        stringId={LangKeys.AccountBackupRestoreDesc}
+        className={classes.desc}
+      >
+        When you restore an existing backup file of your Haveno account, you
+        will lose the account you’re using currently. Please use with caution.
+      </BodyText>
+
+      <Button flavor="neutral">
+        <FormattedMessage
+          id={LangKeys.AccountBackupRestoreBtn}
+          defaultMessage="Restore backup"
+        />
+      </Button>
+    </Box>
+  );
+}
+
+const useStyles = createStyles((theme) => ({
+  heading: {
+    marginBottom: theme.spacing.md,
+  },
+  desc: {
+    marginBottom: theme.spacing.lg,
+  },
+}));

packages/renderer/src/pages/Account/Backup/index.ts

@@ -0,0 +1 @@
+export * from "./AccountBackup";

packages/renderer/src/pages/Account/index.ts

@@ -16,7 +16,7 @@
 
 export * from "./AddPaymentAccount";
 export * from "./PaymentMethods";
-export * from "./AccountBackup";
+export * from "./Backup";
 export * from "./NodeSettings";
 export * from "./AccountPaymentAccounts";
 export * from "./AccountSecurity";