Hook optimization/bug fix (#223)

* move hook logic to context provider; introduce useCallbacks * changeset
burnt-labs · Oct 4, 2024 · 387c49c · 387c49c
1 parent 1e3bd4e
commit 387c49c
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 54 deletions.
diff --git a/.changeset/silly-seas-sip.md b/.changeset/silly-seas-sip.md
@@ -0,0 +1,5 @@
+---
+"@burnt-labs/abstraxion": minor
+---
+
+Aims to fix performance issues, specifically around the useAbstraxionAccount hook
diff --git a/packages/abstraxion/src/components/Abstraxion/index.tsx b/packages/abstraxion/src/components/Abstraxion/index.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useContext, useEffect } from "react";
+import { useCallback, useContext, useEffect } from "react";
 import { Dialog, DialogContent } from "@burnt-labs/ui";
 import {
   AbstraxionContext,
@@ -27,20 +27,22 @@ export function Abstraxion({ onClose }: ModalProps): JSX.Element | null {
     setShowModal,
   } = useContext(AbstraxionContext);
 
+  const closeOnEscKey = useCallback(
+    (e: KeyboardEventInit): void => {
+      if (e.key === "Escape") {
+        onClose();
+        setShowModal(false);
+      }
+    },
+    [onClose, setShowModal],
+  );
+
   useEffect(() => {
-    const closeOnEscKey = (e: KeyboardEventInit): void => {
-      e.key === "Escape"
-        ? () => {
-            onClose();
-            setShowModal(false);
-          }
-        : null;
-    };
     document.addEventListener("keydown", closeOnEscKey);
     return () => {
       document.removeEventListener("keydown", closeOnEscKey);
     };
-  }, [onClose]);
+  }, [closeOnEscKey]);
 
   if (!showModal) return null;
 

diff --git a/packages/abstraxion/src/components/AbstraxionContext/index.tsx b/packages/abstraxion/src/components/AbstraxionContext/index.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { createContext, useEffect, useState } from "react";
+import { createContext, useCallback, useEffect, useState } from "react";
 import { testnetChainInfo } from "@burnt-labs/constants";
 import { SignArbSecp256k1HdWallet } from "@burnt-labs/abstraxion-core";
 import { abstraxionAuth } from "../Abstraxion";
@@ -71,8 +71,7 @@ export function AbstraxionContextProvider({
   const [granterAddress, setGranterAddress] = useState("");
   const [dashboardUrl, setDashboardUrl] = useState("");
 
-  useEffect(() => {
-    // Update abstraxion-core with user config
+  const configureInstance = useCallback(() => {
     abstraxionAuth.configureAbstraxionInstance(
       rpcUrl,
       restUrl || "",
@@ -84,19 +83,58 @@ export function AbstraxionContextProvider({
     );
   }, [rpcUrl, restUrl, contracts, stake, bank, callbackUrl, treasury]);
 
+  useEffect(() => {
+    configureInstance();
+  }, [configureInstance]);
+
   useEffect(() => {
     const searchParams = new URLSearchParams(window.location.search);
     if (searchParams.get("granted") === "true") {
       setShowModal(true);
     }
   }, []);
 
-  const logout = () => {
+  useEffect(() => {
+    const unsubscribe = abstraxionAuth.subscribeToAuthStateChange(
+      async (newState: boolean) => {
+        if (newState !== isConnected) {
+          setIsConnected(newState);
+          if (newState) {
+            const account = await abstraxionAuth.getLocalKeypair();
+            const granterAddress = abstraxionAuth.getGranter();
+            setAbstraxionAccount(account);
+            setGranterAddress(granterAddress);
+          }
+        }
+      },
+    );
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, [isConnected, abstraxionAuth]);
+
+  const persistAuthenticateState = useCallback(async () => {
+    await abstraxionAuth.authenticate();
+  }, [abstraxionAuth]);
+
+  useEffect(() => {
+    if (!isConnecting && !abstraxionAccount && !granterAddress) {
+      persistAuthenticateState();
+    }
+  }, [
+    isConnecting,
+    abstraxionAccount,
+    granterAddress,
+    persistAuthenticateState,
+  ]);
+
+  const logout = useCallback(() => {
     setIsConnected(false);
     setAbstraxionAccount(undefined);
     setGranterAddress("");
     abstraxionAuth?.logout();
-  };
+  }, [abstraxionAuth]);
 
   return (
     <AbstraxionContext.Provider

diff --git a/packages/abstraxion/src/hooks/useAbstraxionAccount.ts b/packages/abstraxion/src/hooks/useAbstraxionAccount.ts
@@ -1,6 +1,5 @@
-import { useContext, useEffect } from "react";
+import { useContext } from "react";
 import { AbstraxionContext } from "@/src/components/AbstraxionContext";
-import { abstraxionAuth } from "../components/Abstraxion";
 
 export interface AbstraxionAccount {
   bech32Address: string;
@@ -13,43 +12,8 @@ export interface AbstraxionAccountState {
 }
 
 export const useAbstraxionAccount = (): AbstraxionAccountState => {
-  const {
-    isConnected,
-    granterAddress,
-    abstraxionAccount,
-    isConnecting,
-    setIsConnected,
-    setAbstraxionAccount,
-    setGranterAddress,
-  } = useContext(AbstraxionContext);
-
-  useEffect(() => {
-    const unsubscribe = abstraxionAuth.subscribeToAuthStateChange(
-      async (newState: boolean) => {
-        if (Boolean(newState) === true) {
-          const account = await abstraxionAuth.getLocalKeypair();
-          const granterAddress = abstraxionAuth.getGranter();
-          setAbstraxionAccount(account);
-          setGranterAddress(granterAddress);
-        }
-        setIsConnected(newState);
-      },
-    );
-
-    return () => {
-      unsubscribe?.();
-    };
-  }, [abstraxionAuth]);
-
-  useEffect(() => {
-    async function persistAuthenticateState() {
-      await abstraxionAuth.authenticate();
-    }
-
-    if (!isConnecting && !abstraxionAccount && !granterAddress) {
-      persistAuthenticateState();
-    }
-  }, [isConnected, abstraxionAccount, granterAddress, abstraxionAuth]);
+  const { isConnected, granterAddress, isConnecting } =
+    useContext(AbstraxionContext);
 
   return {
     data: {