Merge pull request #129 from alleslabs/fix/persist-wallet

fix: wallet disconnection on network change

CHANGELOG.md

@@ -110,6 +110,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#129](https://github.com/alleslabs/celatone-frontend/pull/129) Fix wallet disconnection on network query change
 - [#124](https://github.com/alleslabs/celatone-frontend/pull/124) Fix public project query, display project image in contract details page
 - [#125](https://github.com/alleslabs/celatone-frontend/pull/125) Fix incorrect CosmJS execute snippet
 - [#117](https://github.com/alleslabs/celatone-frontend/pull/117) Fix native token label formatting

src/lib/app-provider/contexts/app.tsx

@@ -2,18 +2,18 @@ import { useWallet } from "@cosmos-kit/react";
 import big from "big.js";
 import { GraphQLClient } from "graphql-request";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
 import type { ReactNode } from "react";
 import { useEffect, useContext, useMemo, createContext } from "react";
 
+import { useNetworkChange } from "../hooks/useNetworkChange";
 import { getIndexerGraphClient } from "../query-client";
 import type { AppConstants } from "../types";
 import {
   getExplorerTxUrl,
   getExplorerUserAddressUrl,
 } from "lib/app-fns/explorer";
 import { LoadingOverlay } from "lib/components/LoadingOverlay";
-import { DEFAULT_ADDRESS, getChainNameByNetwork } from "lib/data";
+import { DEFAULT_ADDRESS } from "lib/data";
 import {
   useCodeStore,
   useContractStore,
@@ -64,8 +64,7 @@ export const AppProvider = <ContractAddress, Constants extends AppConstants>({
   appContractAddressMap,
   constants,
 }: AppProviderProps<ContractAddress, Constants>) => {
-  const router = useRouter();
-  const { currentChainName, currentChainRecord, setCurrentChain } = useWallet();
+  const { currentChainName, currentChainRecord } = useWallet();
   const { setCodeUserKey, isCodeUserKeyExist } = useCodeStore();
   const { setContractUserKey, isContractUserKeyExist } = useContractStore();
   const { setProjectUserKey, isProjectUserKeyExist } = usePublicProjectStore();
@@ -120,18 +119,7 @@ export const AppProvider = <ContractAddress, Constants extends AppConstants>({
     }
   }, [currentChainName, setCodeUserKey, setContractUserKey, setProjectUserKey]);
 
-  useEffect(() => {
-    /**
-     * @remarks Condition checking varies by chain
-     * @todos Change default to mainnet later (currently is testnet)
-     * @todos Support localnet case later
-     */
-    if (router.query.network === "mainnet") {
-      setCurrentChain(getChainNameByNetwork("mainnet"));
-    } else {
-      setCurrentChain(getChainNameByNetwork("testnet"));
-    }
-  }, [router.query.network, setCurrentChain]);
+  useNetworkChange();
 
   const AppContent = observer(() => {
     if (

src/lib/app-provider/hooks/index.ts

@@ -6,3 +6,4 @@ export * from "./useQueryCmds";
 export * from "./useExecuteCmds";
 export * from "./useTokensInfo";
 export * from "./useInternalNavigate";
+export * from "./useNetworkChange";

src/lib/app-provider/hooks/useNetworkChange.ts

@@ -0,0 +1,25 @@
+import { useWallet } from "@cosmos-kit/react";
+import { useRouter } from "next/router";
+import { useEffect, useRef } from "react";
+
+import { getChainNameByNetwork } from "lib/data";
+
+export const useNetworkChange = () => {
+  const router = useRouter();
+  const { currentChainName, setCurrentChain } = useWallet();
+  const networkRef = useRef<string>();
+
+  /**
+   * @todos Change default to mainnet later (currently is testnet)
+   */
+
+  useEffect(() => {
+    const networkRoute = (router.query.network as string) || "testnet";
+
+    if (networkRoute !== networkRef.current) {
+      networkRef.current = networkRoute;
+      const chainName = getChainNameByNetwork(networkRoute);
+      if (currentChainName !== chainName) setCurrentChain(chainName);
+    }
+  }, [router.query.network, currentChainName, setCurrentChain]);
+};