Merge pull request #936 from alleslabs/fix/add-hydrated-in-context

Fix/add hydrated in context
alleslabs · May 18, 2024 · 74554b3 · 74554b3
2 parents 0c69b5f + 137f8d9
commit 74554b3
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -60,6 +60,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#936](https://github.com/alleslabs/celatone-frontend/pull/936) Add isHydrated in app context for redirect behaviors
 - [#921](https://github.com/alleslabs/celatone-frontend/pull/921) Add theme
 - [#922](https://github.com/alleslabs/celatone-frontend/pull/922) Adjust color for latest blocks
 - [#826](https://github.com/alleslabs/celatone-frontend/pull/826) Apply dynamic component theme generation

diff --git a/src/lib/app-provider/contexts/app.tsx b/src/lib/app-provider/contexts/app.tsx
@@ -28,6 +28,7 @@ interface AppProviderProps {
 }
 
 interface AppContextInterface {
+  isHydrated: boolean;
   availableChainIds: string[];
   currentChainId: string;
   chainConfig: ChainConfig;
@@ -38,6 +39,7 @@ interface AppContextInterface {
 }
 
 const DEFAULT_STATES: AppContextInterface = {
+  isHydrated: false,
   availableChainIds: SUPPORTED_CHAIN_IDS,
   currentChainId: FALLBACK_SUPPORTED_CHAIN_ID,
   chainConfig: FALLBACK_CHAIN_CONFIG,
@@ -66,6 +68,7 @@ export const AppProvider = ({ children }: AppProviderProps) => {
     changeFavicon(theme.branding.favicon);
 
     setStates({
+      isHydrated: true,
       availableChainIds: SUPPORTED_CHAIN_IDS,
       currentChainId: newChainId,
       chainConfig,

diff --git a/src/lib/providers/network-guard/index.tsx b/src/lib/providers/network-guard/index.tsx
@@ -21,35 +21,38 @@ interface NetworkGuardProps {
 }
 
 export const NetworkGuard = observer(({ children }: NetworkGuardProps) => {
-  const { currentChainId, chainConfig } = useCelatoneApp();
+  const {
+    isHydrated,
+    currentChainId,
+    chainConfig: { registryChainName },
+  } = useCelatoneApp();
   const { setAccountUserKey, isAccountUserKeyExist } = useAccountStore();
   const { setCodeUserKey, isCodeUserKeyExist } = useCodeStore();
   const { setContractUserKey, isContractUserKeyExist } = useContractStore();
   const { setProjectUserKey, isProjectUserKeyExist } = usePublicProjectStore();
 
   useEffect(() => {
-    if (chainConfig.registryChainName) {
-      const userKey = formatUserKey(
-        chainConfig.registryChainName,
-        DEFAULT_ADDRESS
-      );
+    if (isHydrated) {
+      const userKey = formatUserKey(registryChainName, DEFAULT_ADDRESS);
       setAccountUserKey(userKey);
       setCodeUserKey(userKey);
       setContractUserKey(userKey);
       setProjectUserKey(userKey);
     }
   }, [
-    chainConfig.registryChainName,
+    isHydrated,
+    registryChainName,
     setAccountUserKey,
     setCodeUserKey,
     setContractUserKey,
     setProjectUserKey,
   ]);
 
-  if (currentChainId && !(currentChainId in CHAIN_CONFIGS))
+  if (isHydrated && !(currentChainId in CHAIN_CONFIGS))
     return <NetworkErrorState />;
 
   if (
+    !isHydrated ||
     !isAccountUserKeyExist() ||
     !isCodeUserKeyExist() ||
     !isContractUserKeyExist() ||