Fix useKeys issue

Author: Selvio

src/components/DoomCanvas/DoomCanvas.tsx

@@ -10,11 +10,13 @@ const DoomCanvas: React.FC = () => {
   const { gameData } = useAppContext();
   const keys = useKeys();
 
-  console.log("gameData", gameData);
+  console.log("keys", keys);
 
   useEffect(() => {
     // Prevent effect from running twice
+
     if (!keys.address) return;
+
     if (isEffectRan.current) return;
     isEffectRan.current = true;
 
@@ -32,7 +34,6 @@ const DoomCanvas: React.FC = () => {
 
     canvas.addEventListener("webglcontextlost", handleContextLost, false);
 
-    debugger;
     window.HydraMultiplayer = new HydraMultiplayer(
       keys,
       "http://localhost:4001",
@@ -100,7 +101,7 @@ const DoomCanvas: React.FC = () => {
       canvas.removeEventListener("webglcontextlost", handleContextLost);
       document.body.removeChild(script);
     };
-  }, [keys.address]);
+  }, [gameData.code, gameData.petName, keys]);
 
   return <canvas id="canvas" ref={canvasRef} className="w-full h-full" />;
 };

src/hooks/useKeys.ts

@@ -1,6 +1,6 @@
 import { useLocalStorage } from "usehooks-ts";
 import { HYDRA_DOOM_SESSION_KEY } from "../constants";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { Lucid, toHex } from "lucid-cardano";
 import * as bech32 from "bech32-buffer";
 import * as ed25519 from "@noble/ed25519";
@@ -24,35 +24,47 @@ const useKeys = () => {
   );
   const [keys, setKeys] = useState<Keys>({});
 
-  const generateKeys = useCallback(async () => {
-    const lucid = await Lucid.new(undefined, "Preprod");
-
-    let key = sessionKeyBech32;
-    if (!import.meta.env.PERSISTENT_SESSION || !sessionKeyBech32) {
-      console.log("Generating new session key");
-      key = lucid.utils.generatePrivateKey();
-      setSessionKey(key);
-    }
-
-    const privateKeyBytes = bech32.decode(key).data;
-    const publicKeyBytes = await ed25519.getPublicKeyAsync(privateKeyBytes);
-    const publicKeyHashBytes = blake2b(publicKeyBytes, { dkLen: 224 / 8 });
-    const publicKeyHashHex = toHex(publicKeyHashBytes);
-    setKeys({
-      sessionKeyBech32,
-      privateKeyBytes,
-      privateKeyHex: toHex(privateKeyBytes),
-      publicKeyBytes,
-      publicKeyHex: toHex(publicKeyBytes),
-      publicKeyHashBytes,
-      publicKeyHashHex,
-      address: lucid.utils.credentialToAddress({ type: "Key", hash: publicKeyHashHex })
-    });
-  }, [sessionKeyBech32, setSessionKey]);
+  const generateKeys = useCallback(
+    async (lucid: Lucid, existingKey: string | null) => {
+      const key = existingKey || lucid.utils.generatePrivateKey();
+      if (!existingKey) setSessionKey(key);
+
+      const privateKeyBytes = bech32.decode(key).data;
+      const publicKeyBytes = await ed25519.getPublicKeyAsync(privateKeyBytes);
+      const publicKeyHashBytes = blake2b(publicKeyBytes, { dkLen: 224 / 8 });
+      const publicKeyHashHex = toHex(publicKeyHashBytes);
+
+      return {
+        sessionKeyBech32: key,
+        privateKeyBytes,
+        privateKeyHex: toHex(privateKeyBytes),
+        publicKeyBytes,
+        publicKeyHex: toHex(publicKeyBytes),
+        publicKeyHashBytes,
+        publicKeyHashHex,
+        address: lucid.utils.credentialToAddress({
+          type: "Key",
+          hash: publicKeyHashHex,
+        }),
+      };
+    },
+    [setSessionKey],
+  );
 
   useEffect(() => {
-    generateKeys();
-  }, [generateKeys, sessionKeyBech32]);
+    const initKeys = async () => {
+      const lucid = await Lucid.new(undefined, "Preprod");
+
+      if (!keys.sessionKeyBech32) {
+        const newKeys = await generateKeys(lucid, sessionKeyBech32);
+        setKeys(newKeys);
+      }
+    };
+
+    initKeys();
+  }, [keys.sessionKeyBech32, sessionKeyBech32, generateKeys]);
+
+  console.log("keys", keys);
 
   return keys;
 };