Reuse existing solutions for ErrorPage options

trilitech · Mar 8, 2024 · 0dc7d82 · 0dc7d82
1 parent ee75363
commit 0dc7d82
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 37 deletions.
diff --git a/src/components/ErrorPage.tsx b/src/components/ErrorPage.tsx
@@ -1,6 +1,8 @@
 import { Box, Button, Center, Link, VStack } from "@chakra-ui/react";
 
+import { useOffboardingModal } from "./Offboarding/useOffboardingModal";
 import { ModalContentWrapper } from "./Onboarding/ModalContentWrapper";
+import { downloadBackupFile } from "./Onboarding/restoreBackupFile/utils";
 import { NoticeIcon, ReloadIcon } from "../assets/icons";
 import BackgroundImage from "../assets/onboarding/background_image.png";
 import colors from "../style/colors";
@@ -9,27 +11,12 @@ 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";
 
 export const ErrorPage: React.FC = () => {
+  const { modalElement: OffboardingModal, onOpen: onOpenOffboardingModal } = useOffboardingModal();
+
   const onRefresh = () => {
     window.location.reload();
   };
 
-  const onBackup = () => {
-    const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-      JSON.stringify(window.localStorage)
-    )}`;
-
-    const link = document.createElement("a");
-    link.href = jsonString;
-    link.download = "data.json";
-
-    link.click();
-  };
-
-  const onOffboard = () => {
-    window.localStorage.clear();
-    onRefresh();
-  };
-
   return (
     <Center height="100vh" padding="60px" backgroundImage={BackgroundImage} backgroundSize="cover">
       <Box
@@ -50,11 +37,11 @@ export const ErrorPage: React.FC = () => {
           title="Oops! Something went wrong!"
         >
           <VStack width="100%" spacing="16px">
-            <Button width="100%" onClick={onBackup} size="lg">
+            <Button width="100%" onClick={downloadBackupFile} size="lg">
               Save Backup
             </Button>
 
-            <Button width="100%" onClick={onOffboard} size="lg" variant="warning">
+            <Button width="100%" onClick={onOpenOffboardingModal} size="lg" variant="warning">
               Off-board Wallet
             </Button>
 
@@ -82,6 +69,7 @@ export const ErrorPage: React.FC = () => {
           </VStack>
         </ModalContentWrapper>
       </Box>
+      {OffboardingModal}
     </Center>
   );
 };
diff --git a/src/components/Onboarding/restoreBackupFile/utils.ts b/src/components/Onboarding/restoreBackupFile/utils.ts
@@ -1,3 +1,4 @@
+import packageInfo from "../../../../package.json";
 import { decrypt } from "../../../utils/crypto/AES";
 import { EncryptedData } from "../../../utils/crypto/types";
 import { useRestoreFromMnemonic } from "../../../utils/hooks/setAccountDataHooks";
@@ -66,3 +67,18 @@ export const restoreV2BackupFile = async (
   localStorage.setItem("persist:accounts", accountsInString);
   localStorage.setItem("persist:root", backup["persist:root"]);
 };
+
+export const downloadBackupFile = () => {
+  const storage = {
+    version: packageInfo.version,
+    "persist:accounts": localStorage.getItem("persist:accounts"),
+    "persist:root": localStorage.getItem("persist:root"),
+  };
+
+  const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(JSON.stringify(storage))}`;
+  const link = document.createElement("a");
+  link.href = jsonString;
+  link.download = "UmamiV2Backup.json";
+
+  link.click();
+};
diff --git a/src/views/settings/SettingsView.tsx b/src/views/settings/SettingsView.tsx
@@ -4,12 +4,12 @@ import { useContext } from "react";
 import { DAppsDrawerCard } from "./DAppsDrawerCard";
 import { ErrorLogsDrawerCard } from "./ErrorLogsDrawerCard";
 import { NetworkSettingsDrawerCard } from "./network/NetworkSettingsDrawerCard";
-import packageInfo from "../../../package.json";
 import { DownloadIcon } from "../../assets/icons";
 import { ChangePasswordForm } from "../../components/ChangePassword/ChangePasswordForm";
 import { ClickableCard, SettingsCardWithDrawerIcon } from "../../components/ClickableCard";
 import { DynamicModalContext } from "../../components/DynamicModal";
 import { useOffboardingModal } from "../../components/Offboarding/useOffboardingModal";
+import { downloadBackupFile } from "../../components/Onboarding/restoreBackupFile/utils";
 import { TopBar } from "../../components/TopBar";
 
 export const SettingsView = () => (
@@ -42,27 +42,12 @@ const GeneralSection = () => (
   </SectionContainer>
 );
 
-const downloadBackup = () => {
-  const storage = {
-    version: packageInfo.version,
-    "persist:accounts": localStorage.getItem("persist:accounts"),
-    "persist:root": localStorage.getItem("persist:root"),
-  };
-
-  const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(JSON.stringify(storage))}`;
-  const link = document.createElement("a");
-  link.href = jsonString;
-  link.download = "UmamiV2Backup.json";
-
-  link.click();
-};
-
 const BackupSection = () => (
   <SectionContainer title="Backup">
-    <ClickableCard isSelected={false} onClick={downloadBackup}>
+    <ClickableCard isSelected={false} onClick={downloadBackupFile}>
       <Flex alignItems="center" justifyContent="space-between">
         <Heading size="sm">Download backup file</Heading>
-        <Button onClick={downloadBackup} variant="unstyled">
+        <Button onClick={downloadBackupFile} variant="unstyled">
           <DownloadIcon cursor="pointer" />
         </Button>
       </Flex>