diff --git a/web/src/hooks/useSortitionModulePhase.ts b/web/src/hooks/useSortitionModulePhase.ts
new file mode 100644
index 000000000..1f098cc7e
--- /dev/null
+++ b/web/src/hooks/useSortitionModulePhase.ts
@@ -0,0 +1,7 @@
+import { useSortitionModuleRead } from "hooks/contracts/generated";
+
+export const useSortitionModulePhase = () => {
+  // eslint-disable-next-line
+  // @ts-ignore
+  return useSortitionModuleRead({ functionName: "phase", watch: true });
+};
diff --git a/web/src/layout/Header/navbar/Debug.tsx b/web/src/layout/Header/navbar/Debug.tsx
index 8415b0b52..5b37f84ec 100644
--- a/web/src/layout/Header/navbar/Debug.tsx
+++ b/web/src/layout/Header/navbar/Debug.tsx
@@ -1,8 +1,9 @@
 import React, { useMemo } from "react";
 import styled from "styled-components";
-import { useSortitionModulePhase } from "hooks/contracts/generated";
-import { useToggleTheme } from "hooks/useToggleThemeContext";
+
 import { GIT_BRANCH, GIT_DIRTY, GIT_HASH, GIT_TAGS, GIT_URL, RELEASE_VERSION } from "consts/index";
+import { useSortitionModulePhase } from "hooks/useSortitionModulePhase";
+import { useToggleTheme } from "hooks/useToggleThemeContext";
 import { isUndefined } from "utils/index";
 
 const Container = styled.div`
@@ -57,11 +58,8 @@ enum Phases {
 }
 
 const Phase = () => {
-  if (isUndefined(useSortitionModulePhase)) return <></>;
-  const { data: phase } = useSortitionModulePhase({
-    watch: true,
-  });
-  return <>{isUndefined(phase) ? null : <StyledLabel>Phase: {Phases[phase]}</StyledLabel>}</>;
+  const { data: phase } = useSortitionModulePhase();
+  return <>{isUndefined(phase) ? null : <StyledLabel>Phase: {Phases[phase as number]}</StyledLabel>}</>;
 };
 
 const Debug: React.FC = () => {