diff --git a/web/src/App.tsx b/web/src/App.tsx index fa3b3d1..6b00389 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -16,6 +16,7 @@ function App({ children }: Props) { {children} diff --git a/web/src/Settings.tsx b/web/src/Settings.tsx index 01238ba..7243923 100644 --- 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 ( Settings @@ -67,8 +110,26 @@ function Settings() { Reset Game - Reset the current session, you'll start from Chapter 0 again + + Reset the current session, you'll start from Chapter 0 again. You should + make a backup first. + + + + Restore + + Restore the game providing a dump + + ); } diff --git a/web/src/hooks/keys.tsx b/web/src/hooks/keys.tsx deleted file mode 100644 index f5fdc8d..0000000 --- a/web/src/hooks/keys.tsx +++ /dev/null @@ -1,4 +0,0 @@ -export const MNEMONIC_KEY = "mnemonic"; -export const CURRENT_CHAPTER_INDEX_KEY = "currentChapterIndex"; -export const CURRENT_CHAPTER_PASSWORD_KEY = "currentChapterPassword"; -export const CURRENT_KEY_PASSWORD_KEY = "currentKeyPassword"; diff --git a/web/src/hooks/useBurnerWallet.tsx b/web/src/hooks/useBurnerWallet.tsx index 96c6130..51f5983 100644 --- 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 index 411492e..5afea4b 100644 --- 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 index 3a501d2..fadf907 100644 --- 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;