refactor: decoupling code a bit

apps/namadillo/src/App/Common/FixedWarningBanner.tsx

@@ -1,46 +1,13 @@
-import { indexerHeartbeatAtom } from "atoms/settings";
-import { useNamadaKeychain } from "hooks/useNamadaKeychain";
-import { useAtomValue } from "jotai";
-import { ReactNode, useEffect, useState } from "react";
+import { ReactNode } from "react";
 import { IoWarning } from "react-icons/io5";
-import {
-  checkIndexerCompatibilityErrors,
-  checkKeychainCompatibilityError,
-} from "utils/compatibility";
 
-export const FixedWarningBanner = (): JSX.Element => {
-  const [errorMessage, setErrorMessage] = useState<ReactNode | undefined>();
-  const indexerHealth = useAtomValue(indexerHeartbeatAtom);
-  const keychain = useNamadaKeychain();
-
-  const verifyKeychainVersion = async (): Promise<void> => {
-    const namadaKeychain = await keychain.namadaKeychain.get();
-    if (namadaKeychain) {
-      const version = namadaKeychain.version();
-      const versionErrorMessage = checkKeychainCompatibilityError(version);
-      if (versionErrorMessage) {
-        setErrorMessage(versionErrorMessage);
-      }
-    }
-  };
-
-  const verifyIndexerVersion = async (): Promise<void> => {
-    const versionErrorMessage = checkIndexerCompatibilityErrors(
-      indexerHealth.data?.version || ""
-    );
-    if (versionErrorMessage) {
-      setErrorMessage(versionErrorMessage);
-    }
-  };
-
-  useEffect(() => {
-    verifyKeychainVersion();
-  }, [keychain]);
-
-  useEffect(() => {
-    indexerHealth.isSuccess && verifyIndexerVersion();
-  }, [indexerHealth]);
+type FixedWarningBannerProps = {
+  errorMessage: ReactNode;
+};
 
+export const FixedWarningBanner = ({
+  errorMessage,
+}: FixedWarningBannerProps): JSX.Element => {
   if (!errorMessage) return <></>;
 
   return (

apps/namadillo/src/App/Layout/AppLayout.tsx

@@ -1,4 +1,5 @@
 import { FixedWarningBanner } from "App/Common/FixedWarningBanner";
+import { useCompatibilityErrors } from "hooks/useCompatibilityErrors";
 import { ReactNode, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { AppHeader } from "./AppHeader";
@@ -11,6 +12,7 @@ export const AppLayout = ({
   children: ReactNode;
 }): JSX.Element => {
   const [displayNavigation, setDisplayNavigation] = useState(false);
+  const compatibilityErrors = useCompatibilityErrors();
 
   return (
     <div className="custom-container pb-2">
@@ -43,7 +45,7 @@ export const AppLayout = ({
         </aside>
         <main className="min-h-full">{children}</main>
       </div>
-      <FixedWarningBanner />
+      <FixedWarningBanner errorMessage={compatibilityErrors} />
     </div>
   );
 };

apps/namadillo/src/hooks/useCompatibilityErrors.tsx

@@ -0,0 +1,47 @@
+import { indexerHeartbeatAtom } from "atoms/settings";
+import { useAtomValue } from "jotai";
+import { useEffect, useState } from "react";
+import {
+  checkIndexerCompatibilityErrors,
+  checkKeychainCompatibilityError,
+} from "utils/compatibility";
+import { useNamadaKeychain } from "./useNamadaKeychain";
+
+export const useCompatibilityErrors = (): React.ReactNode | undefined => {
+  const indexerHealth = useAtomValue(indexerHeartbeatAtom);
+  const keychain = useNamadaKeychain();
+  const [errorMessage, setErrorMessage] = useState<
+    React.ReactNode | undefined
+  >();
+
+  const verifyKeychainVersion = async (): Promise<void> => {
+    const namadaKeychain = await keychain.namadaKeychain.get();
+    if (namadaKeychain) {
+      const version = namadaKeychain.version();
+      const versionErrorMessage = checkKeychainCompatibilityError(version);
+      if (versionErrorMessage) {
+        setErrorMessage(versionErrorMessage);
+      }
+    }
+  };
+
+  const verifyIndexerVersion = async (): Promise<void> => {
+    const versionErrorMessage = checkIndexerCompatibilityErrors(
+      indexerHealth.data?.version || ""
+    );
+
+    if (versionErrorMessage) {
+      setErrorMessage(versionErrorMessage);
+    }
+  };
+
+  useEffect(() => {
+    verifyKeychainVersion();
+  }, [keychain]);
+
+  useEffect(() => {
+    indexerHealth.isSuccess && verifyIndexerVersion();
+  }, [indexerHealth]);
+
+  return errorMessage;
+};