add restore/reset functions

social-dist0rtion-protocol · Sep 20, 2024 · 1cc8313 · 1cc8313
1 parent 66b29f4
commit 1cc8313
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 35 deletions.
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -16,6 +16,7 @@ function App({ children }: Props) {
         <Box
           backgroundColor="transparent"
           marginTop="20px"
+          marginBottom="60px"
           width={isMobile ? "95%" : "40%"}
         >
           {children}

diff --git a/web/src/Settings.tsx b/web/src/Settings.tsx
@@ -1,6 +1,14 @@
-import { Button, Heading, Text, Textarea, VStack } from "@chakra-ui/react";
+import {
+  Button,
+  Heading,
+  Text,
+  Textarea,
+  useToast,
+  VStack,
+} from "@chakra-ui/react";
 import { useBurnerWallet } from "./hooks/useBurnerWallet";
-import { useState } from "react";
+import { dump, restore } from "./hooks/storage";
+import { useEffect, useState } from "react";
 import QRCode from "react-qr-code";
 import { treasureHuntCreatorAddress } from "./generated";
 import { CHAIN_ID } from "./env";
@@ -13,18 +21,53 @@ function Settings() {
     resetMnemonic,
   } = useBurnerWallet();
 
+  const toast = useToast();
+
   let [temporaryMnemonic, setTemporaryMnemonic] = useState(mnemonic || "");
+  let [temporaryDump, setTemporaryDump] = useState(dump());
 
   let handleInputChange = (e: any) => {
     let inputValue = e.target.value;
     setTemporaryMnemonic(inputValue);
   };
 
+  let handleDumpChange = (e: any) => {
+    let inputValue = e.target.value;
+    setTemporaryDump(inputValue);
+  };
+
   function reset() {
+    localStorage.clear();
     resetMnemonic();
-    setTemporaryMnemonic(mnemonic);
   }
 
+  function restoreFromDump() {
+    if (temporaryDump !== "") {
+      restore(temporaryDump);
+      toast({
+        title: "Success!",
+        description: `You restored your game!`,
+        status: "success",
+        duration: 9000,
+        isClosable: true,
+      });
+    } else {
+      toast({
+        title: "No dump",
+        description: `There is not dump in the text area`,
+        status: "info",
+        duration: 9000,
+        isClosable: true,
+      });
+    }
+  }
+
+  useEffect(() => {
+    if (mnemonic !== "") setTemporaryMnemonic(mnemonic);
+
+    setTemporaryDump(dump());
+  }, [mnemonic]);
+
   return (
     <VStack alignItems="flex-start">
       <Heading marginBottom="40px">Settings</Heading>
@@ -67,8 +110,26 @@ function Settings() {
       <Heading variant="h2" marginTop="40px">
         Reset Game
       </Heading>
-      <Text>Reset the current session, you'll start from Chapter 0 again</Text>
+      <Text>
+        Reset the current session, you'll start from Chapter 0 again. You should
+        make a backup first.
+      </Text>
+      <Textarea
+        value={temporaryDump}
+        onChange={handleDumpChange}
+        placeholder="Your dump"
+      ></Textarea>
       <Button onClick={() => reset()}>Reset Game</Button>
+      <Heading variant="h2" marginTop="40px">
+        Restore
+      </Heading>
+      <Text>Restore the game providing a dump</Text>
+      <Textarea
+        value={temporaryDump}
+        onChange={handleDumpChange}
+        placeholder="Your dump"
+      ></Textarea>
+      <Button onClick={() => restoreFromDump()}>Restore from dump</Button>
     </VStack>
   );
 }

diff --git a/web/src/hooks/keys.tsx b/web/src/hooks/keys.tsx
diff --git a/web/src/hooks/useBurnerWallet.tsx b/web/src/hooks/useBurnerWallet.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { MNEMONIC_KEY } from "./keys";
+import { MNEMONIC_KEY } from "./storage";
 import { english, generateMnemonic } from "viem/accounts";
 import useLocalStorage from "use-local-storage";
 import { useToast } from "@chakra-ui/react";

diff --git a/web/src/hooks/useChapter.tsx b/web/src/hooks/useChapter.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { CURRENT_CHAPTER_PASSWORD_KEY } from "./keys";
+import { CURRENT_CHAPTER_PASSWORD_KEY } from "./storage";
 import { decrypt } from "../lib";
 import { useReadContract } from "wagmi";
 import {

diff --git a/web/src/theme/fonts.css b/web/src/theme/fonts.css
@@ -1,49 +1,28 @@
-@font-face {
-  font-family: "Bundes";
-  font-weight: 400;
-  src: url(./fonts/BundesSans-Regular.ttf);
-}
-@font-face {
-  font-family: "Bundes";
-  font-weight: 700;
-  src: url(./fonts/BundesSans-Regular.ttf);
-}
-@font-face {
-  font-family: "Dot";
-  font-weight: 400;
-  src: url(./fonts/Dot.ttf);
-}
-@font-face {
-  font-family: "Maison Neues";
-  font-weight: 400;
-  src: url(./fonts/Maison-Neue-Mono.ttf);
-}
-@font-face {
-  font-family: OCR;
-  font-weight: 700;
-  src: url(./fonts/OCR-AStd-Regular.ttf);
-}
 @font-face {
   font-family: OCR;
   font-weight: 700;
   src: url(./fonts/OCR-AStd-Regular.ttf);
 }
+
 @font-face {
   font-family: Roboto;
   font-weight: 400;
   src: url(./fonts/Roboto-Regular.ttf);
 }
+
 @font-face {
   font-family: Roboto;
   font-weight: 400;
   font-style: italic;
   src: url(./fonts/Roboto-Italic.ttf);
 }
+
 @font-face {
   font-family: Roboto;
   font-weight: 700;
   src: url(./fonts/Roboto-Bold.ttf);
 }
+
 @font-face {
   font-family: Roboto;
   font-weight: 700;