fix UI state

BibliothecaDAO · Jan 11, 2024 · bc68494 · bc68494 · vercel · Jan 11, 2024
1 parent e108665
commit bc68494
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/ui/src/app/containers/Onboarding.tsx b/ui/src/app/containers/Onboarding.tsx
@@ -23,7 +23,7 @@ import Arcade from "public/icons/arcade.svg";
 import { indexAddress, formatCurrency, displayAddress } from "@/app/lib/utils";
 import { useBurner } from "@/app/lib/burner";
 import ArcadeLoader from "@/app/components/animations/ArcadeLoader";
-import useUIStore from "@/app/hooks/useUIStore";
+import useUIStore, { ScreenPage } from "@/app/hooks/useUIStore";
 import { useUiSounds, soundSelector } from "@/app/hooks/useUiSound";
 
 type Section = "connect" | "eth" | "lords" | "arcade";
@@ -58,6 +58,7 @@ interface SectionContentProps {
   listConnectors: () => any[];
   updateConnectors: () => void;
   handleOnboarded: () => void;
+  setScreen: (value: ScreenPage) => void;
 }
 
 const SectionContent = ({
@@ -82,6 +83,7 @@ const SectionContent = ({
   listConnectors,
   updateConnectors,
   handleOnboarded,
+  setScreen,
 }: SectionContentProps) => {
   console.log(lordsGameCost * 25);
   switch (section) {
@@ -377,6 +379,7 @@ const SectionContent = ({
                       updateConnectors();
                       setFullDeployment(false);
                       handleOnboarded();
+                      setScreen("start");
                     } catch (e) {
                       console.log("Arcade deployment cancelled");
                     }
@@ -586,6 +589,7 @@ const Onboarding = ({
   const [step, setStep] = useState(1);
 
   const handleOnboarded = useUIStore((state) => state.handleOnboarded);
+  const setScreen = useUIStore((state) => state.setScreen);
 
   const eth = Number(ethBalance);
   const lords = Number(lordsBalance);
@@ -642,7 +646,10 @@ const Onboarding = ({
       </Button>
       <Button
         className="fixed top-2 right-2 sm:top-20 sm:right-20"
-        onClick={() => handleOnboarded()}
+        onClick={() => {
+          setScreen("start");
+          handleOnboarded();
+        }}
       >
         Skip to game
       </Button>
@@ -679,6 +686,7 @@ const Onboarding = ({
               listConnectors={listConnectors}
               updateConnectors={updateConnectors}
               handleOnboarded={handleOnboarded}
+              setScreen={setScreen}
             />
           </div>
           <div className="flex flex-col items-center w-1/4">
@@ -705,6 +713,7 @@ const Onboarding = ({
               listConnectors={listConnectors}
               updateConnectors={updateConnectors}
               handleOnboarded={handleOnboarded}
+              setScreen={setScreen}
             />
           </div>
           <div className="flex flex-col items-center w-1/4">
@@ -731,6 +740,7 @@ const Onboarding = ({
               listConnectors={listConnectors}
               updateConnectors={updateConnectors}
               handleOnboarded={handleOnboarded}
+              setScreen={setScreen}
             />
           </div>
           <div className="flex flex-col items-center w-1/4">
@@ -757,6 +767,7 @@ const Onboarding = ({
               listConnectors={listConnectors}
               updateConnectors={updateConnectors}
               handleOnboarded={handleOnboarded}
+              setScreen={setScreen}
             />
           </div>
         </div>
@@ -798,6 +809,7 @@ const Onboarding = ({
               listConnectors={listConnectors}
               updateConnectors={updateConnectors}
               handleOnboarded={handleOnboarded}
+              setScreen={setScreen}
             />
           )}
           {step == 2 && (
@@ -823,6 +835,7 @@ const Onboarding = ({
               listConnectors={listConnectors}
               updateConnectors={updateConnectors}
               handleOnboarded={handleOnboarded}
+              setScreen={setScreen}
             />
           )}
           {step == 3 && (
@@ -848,6 +861,7 @@ const Onboarding = ({
               listConnectors={listConnectors}
               updateConnectors={updateConnectors}
               handleOnboarded={handleOnboarded}
+              setScreen={setScreen}
             />
           )}
           {step == 4 && (
@@ -873,6 +887,7 @@ const Onboarding = ({
               listConnectors={listConnectors}
               updateConnectors={updateConnectors}
               handleOnboarded={handleOnboarded}
+              setScreen={setScreen}
             />
           )}
         </div>

diff --git a/ui/src/app/page.tsx b/ui/src/app/page.tsx
@@ -134,6 +134,7 @@ function Home({ updateConnectors }: HomeProps) {
   const calls = useTransactionCartStore((state) => state.calls);
   const screen = useUIStore((state) => state.screen);
   const setScreen = useUIStore((state) => state.setScreen);
+  const handleOnboarded = useUIStore((state) => state.handleOnboarded);
   const deathDialog = useUIStore((state) => state.deathDialog);
   const hasBeast = useAdventurerStore((state) => state.computed.hasBeast);
   const hasStatUpgrades = useAdventurerStore(
@@ -470,12 +471,14 @@ function Home({ updateConnectors }: HomeProps) {
   }, [account, accountChainId, isConnected]);
 
   useEffect(() => {
+    console.log(arcadeConnectors.length, onboarded);
     if (arcadeConnectors.length === 0 && !onboarded) {
       setScreen("onboarding");
-    } else {
+    } else if (!onboarded) {
+      handleOnboarded();
       setScreen("start");
     }
-  }, [arcadeConnectors, onboarded]);
+  }, [arcadeConnectors]);
 
   useEffect(() => {
     resetCalls();