add logout option

Provable-Games · Jan 16, 2025 · 1d3e71f · 1d3e71f
1 parent 3190f36
commit 1d3e71f
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 35 deletions.
diff --git a/ui/public/icons/logout.svg b/ui/public/icons/logout.svg
diff --git a/ui/src/app/components/icons/Icons.tsx b/ui/src/app/components/icons/Icons.tsx
@@ -45,6 +45,7 @@ import Hide from "public/icons/hide.svg";
 import Info from "public/icons/info.svg";
 import Ledger from "public/icons/ledger.svg";
 import Lightbulb from "public/icons/lightbulb.svg";
+import Logout from "public/icons/logout.svg";
 import Metal from "public/icons/metal.svg";
 import Mist from "public/icons/mist.svg";
 import Plus from "public/icons/plus.svg";
@@ -134,6 +135,7 @@ const DiscordIcon = Discord;
 const ArcadeIcon = Arcade;
 const QuestionMarkIcon = QuestionMark;
 const SettingsIcon = Settings;
+const LogoutIcon = Logout;
 
 const CompleteIcon = Complete;
 const CartridgeIcon = Cartridge;
@@ -178,6 +180,7 @@ export {
   InfoIcon,
   LedgerIcon,
   LightbulbIcon,
+  LogoutIcon,
   LootBagIcon,
   MagicIcon,
   MetalIcon,

diff --git a/ui/src/app/components/navigation/Header.tsx b/ui/src/app/components/navigation/Header.tsx
@@ -3,6 +3,7 @@ import {
   CartIcon,
   CartridgeIcon,
   GithubIcon,
+  LogoutIcon,
   SettingsIcon,
   SoundOffIcon,
   SoundOnIcon,
@@ -76,7 +77,6 @@ export default function Header({
   const displayCart = useUIStore((state) => state.displayCart);
   const setDisplayCart = useUIStore((state) => state.setDisplayCart);
   const displayHistory = useUIStore((state) => state.displayHistory);
-  const setDisplayHistory = useUIStore((state) => state.setDisplayHistory);
   const setScreen = useUIStore((state) => state.setScreen);
   const network = useUIStore((state) => state.network);
   const setNetwork = useUIStore((state) => state.setNetwork);
@@ -85,7 +85,6 @@ export default function Header({
   const vitBoostRemoved = useUIStore((state) => state.vitBoostRemoved);
   const handleOffboarded = useUIStore((state) => state.handleOffboarded);
   const setLoginScreen = useUIStore((state) => state.setLoginScreen);
-  const setShowProfile = useUIStore((state) => state.setShowProfile);
   const setShowLoginDialog = useUIStore((state) => state.setShowLoginDialog);
 
   const calls = useTransactionCartStore((state) => state.calls);
@@ -479,7 +478,9 @@ export default function Header({
               onClick={() => {
                 if (account) {
                   if (!onKatana) {
-                    setShowProfile(true);
+                    (
+                      connector as unknown as CartridgeConnector
+                    ).controller.openProfile();
                   } else {
                     disconnect();
                     resetData();
@@ -490,7 +491,7 @@ export default function Header({
                   setShowLoginDialog(true);
                 }
               }}
-              className="xl:px-5 p-0 hover:bg-terminal-green hover:text-terminal-black"
+              className="xl:px-5 p-0"
             >
               {account ? (
                 username ? (
@@ -518,21 +519,14 @@ export default function Header({
           </Button>
         </span>
         <div className="hidden sm:block sm:flex sm:flex-row sm:items-center sm:gap-1">
-          {account && (
-            <>
-              <Button
-                variant={"outline"}
-                size={"xs"}
-                ref={displayHistoryButtonRef}
-                onClick={() => {
-                  setDisplayHistory(!displayHistory);
-                }}
-                className="xl:px-5"
-              >
-                {displayHistory ? "Hide Ledger" : "Show Ledger"}
-              </Button>
-            </>
-          )}
+          <Button
+            variant={"outline"}
+            size={"sm"}
+            href="https://github.com/BibliothecaDAO/loot-survivor"
+            className="xl:px-5"
+          >
+            <GithubIcon className="w-6 fill-current" />
+          </Button>
           <div className="relative">
             <Button
               variant={"outline"}
@@ -543,7 +537,6 @@ export default function Header({
                     (
                       connector as unknown as CartridgeConnector
                     ).controller.openProfile();
-                    // setShowProfile(true);
                   } else {
                     disconnect();
                     resetData();
@@ -554,7 +547,7 @@ export default function Header({
                   setShowLoginDialog(true);
                 }
               }}
-              className="xl:px-5 hover:bg-terminal-green hover:text-terminal-black"
+              className="xl:px-5"
             >
               {account ? (
                 username ? (
@@ -575,14 +568,21 @@ export default function Header({
             )}
           </div>
 
-          <Button
-            variant={"outline"}
-            size={"sm"}
-            href="https://github.com/BibliothecaDAO/loot-survivor"
-            className="xl:px-5"
-          >
-            <GithubIcon className="w-6 fill-current" />
-          </Button>
+          {account && (
+            <Button
+              variant={"outline"}
+              size={"sm"}
+              onClick={() => {
+                disconnect();
+                resetData();
+                setAdventurer(NullAdventurer);
+                setNetwork(undefined);
+                handleOffboarded();
+              }}
+            >
+              <LogoutIcon className="w-5 h-5 fill-current" />
+            </Button>
+          )}
         </div>
         {account && displayHistory && (
           <TransactionHistory buttonRef={displayHistoryButtonRef} />

diff --git a/ui/src/app/components/navigation/Settings.tsx b/ui/src/app/components/navigation/Settings.tsx
@@ -1,19 +1,28 @@
-import Menu from "@/app/components/menu/ButtonMenu";
 import {
-  SoundOnIcon,
-  SoundOffIcon,
+  DiscordIcon,
   LedgerIcon,
+  LogoutIcon,
+  SoundOffIcon,
+  SoundOnIcon,
 } from "@/app/components/icons/Icons";
-import { DiscordIcon } from "@/app/components/icons/Icons";
+import Menu from "@/app/components/menu/ButtonMenu";
+import useAdventurerStore from "@/app/hooks/useAdventurerStore";
+import { useQueriesStore } from "@/app/hooks/useQueryStore";
 import useUIStore from "@/app/hooks/useUIStore";
-import { ButtonData } from "@/app/types";
+import { ButtonData, NullAdventurer } from "@/app/types";
+import { useDisconnect } from "@starknet-react/core";
 
 export default function Settings() {
+  const { disconnect } = useDisconnect();
+  const resetData = useQueriesStore((state) => state.resetData);
+  const setAdventurer = useAdventurerStore((state) => state.setAdventurer);
   const isMuted = useUIStore((state) => state.isMuted);
   const setIsMuted = useUIStore((state) => state.setIsMuted);
   const displayHistory = useUIStore((state) => state.displayHistory);
   const setDisplayHistory = useUIStore((state) => state.setDisplayHistory);
   const setDisconnected = useUIStore((state) => state.setDisconnected);
+  const setNetwork = useUIStore((state) => state.setNetwork);
+  const handleOffboarded = useUIStore((state) => state.handleOffboarded);
 
   const buttonsData: ButtonData[] = [
     {
@@ -44,6 +53,18 @@ export default function Settings() {
       icon: <DiscordIcon className="fill-current" />,
       action: () => window.open("https://discord.gg/realmsworld", "_blank"),
     },
+    {
+      id: 5,
+      label: "Log Out",
+      icon: <LogoutIcon className="fill-current" />,
+      action: () => {
+        disconnect();
+        resetData();
+        setAdventurer(NullAdventurer);
+        setNetwork(undefined);
+        handleOffboarded();
+      },
+    },
   ];
 
   return (

diff --git a/ui/src/app/containers/GuideScreen.tsx b/ui/src/app/containers/GuideScreen.tsx
@@ -3,7 +3,7 @@ import { DiscordIcon } from "@/app/components/icons/Icons";
 
 export default function GuideScreen() {
   return (
-    <div className="flex justify-center items-center flex-col gap-10 h-full w-full">
+    <div className="flex justify-center items-center flex-col gap-10 h-full w-full p-5">
       <div className="flex flex-col gap-4 items-center">
         <span className="sm:text-xl text-center">
           The docs are here to help you master the game&apos;s mechanics,