Merge pull request #211 from gnoswap-labs/GSW-429-change-wallet-conne…

…ction-session [GSW-429] feat: Change wallet connection session
gnoswap-labs · Oct 16, 2023 · 5f5a531 · 5f5a531
2 parents e4d8b53 + d0677c1
commit 5f5a531
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 13 deletions.
diff --git a/packages/web/src/common/values/storage-constant.ts b/packages/web/src/common/values/storage-constant.ts
@@ -4,4 +4,4 @@ export type StorageKeyType =
   | "language"
   | "search-token-logs";
 
-export type SessionStorageKeyType = "connectedWallet";
+export type SessionStorageKeyType = "connected-wallet";
diff --git a/packages/web/src/containers/header-container/HeaderContainer.tsx b/packages/web/src/containers/header-container/HeaderContainer.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable */
 import Header from "@components/common/header/Header";
 import { useRouter } from "next/router";
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import { MATH_NEGATIVE_TYPE } from "@constants/option.constant";
 import { type TokenInfo } from "@models/token/token-info";
 import { useQuery } from "@tanstack/react-query";
@@ -77,7 +77,7 @@ const HeaderContainer: React.FC = () => {
   const [searchMenuToggle, setSearchMenuToggle] = useState(false);
   const [keyword, setKeyword] = useState("");
   const { breakpoint } = useWindowSize();
-  const { account, connected, connectAdenaClient } = useWallet();
+  const { account, connected, initSession, connectAdenaClient } = useWallet();
   const {
     isFetched,
     error,
@@ -87,6 +87,12 @@ const HeaderContainer: React.FC = () => {
     queryFn: () => fetchTokens(keyword),
   });
 
+  useEffect(() => {
+    if (window?.adena) {
+      initSession();
+    }
+  }, []);
+
   const onSideMenuToggle = () => {
     setSideMenuToggle(prev => !prev);
   };

diff --git a/packages/web/src/hooks/wallet/use-wallet.ts b/packages/web/src/hooks/wallet/use-wallet.ts
@@ -25,7 +25,6 @@ export const useWallet = () => {
 
   useEffect(() => {
     if (walletClient) {
-      initSession();
       updateWalletEvents(walletClient);
     }
   }, [walletClient]);

diff --git a/packages/web/src/providers/gnoswap-service-provider/GnoswapServiceProvider.tsx b/packages/web/src/providers/gnoswap-service-provider/GnoswapServiceProvider.tsx
@@ -32,9 +32,9 @@ const GnoswapServiceProvider: React.FC<React.PropsWithChildren> = ({
 }) => {
   const [networkClient] = useState(new AxiosClient(API_URL));
 
-  const [localStorageClient] = useState(WebStorageClient.createLocalStorageClient());
+  const [localStorageClient, setLocalStorageClient] = useState(WebStorageClient.createLocalStorageClient());
 
-  const [sessionStorageClient] = useState(WebStorageClient.createSessionStorageClient());
+  const [sessionStorageClient, setSessionStorageClient] = useState(WebStorageClient.createSessionStorageClient());
 
   const [walletClient] = useAtom(WalletState.client);
 
@@ -43,8 +43,17 @@ const GnoswapServiceProvider: React.FC<React.PropsWithChildren> = ({
   const [rpcProvider, setRPCProvider] = useState<GnoProvider | null>(null);
 
   useEffect(() => {
-    const provider = new GnoWSProvider(network.wsUrl, 5 * 1000);
-    provider.waitForOpenConnection().then(() => setRPCProvider(provider));
+    if (window) {
+      setLocalStorageClient(WebStorageClient.createLocalStorageClient());
+      setSessionStorageClient(WebStorageClient.createSessionStorageClient());
+    }
+  }, []);
+
+  useEffect(() => {
+    if (network) {
+      const provider = new GnoWSProvider(network.wsUrl, 5 * 1000);
+      provider.waitForOpenConnection().then(() => setRPCProvider(provider));
+    }
   }, [network]);
 
   const accountRepository = useMemo(() => {

diff --git a/packages/web/src/repositories/account/account-repository-impl.ts b/packages/web/src/repositories/account/account-repository-impl.ts
@@ -32,15 +32,16 @@ export class AccountRepositoryImpl implements AccountRepository {
   }
 
   public isConnectedWalletBySession = () => {
-    const response = this.sessionStorageClient.get("connectedWallet");
+    const response = this.sessionStorageClient.get("connected-wallet");
     return response === "connected";
   };
 
   public setConnectedWallet = (connected: boolean) => {
     if (connected) {
-      this.sessionStorageClient.set("connectedWallet", "connected");
+      this.sessionStorageClient.set("connected-wallet", "connected");
+      return;
     }
-    this.sessionStorageClient.remove("connectedWallet");
+    this.sessionStorageClient.remove("connected-wallet");
   };
 
   public getAccount = async () => {

diff --git a/packages/web/src/states/common.ts b/packages/web/src/states/common.ts
@@ -1,7 +1,6 @@
 import { NetworkModel } from "@models/common/network-model";
 import { DEVICE_TYPE } from "@styles/media";
 import { atom } from "jotai";
-import NetworkData from "@resources/chains.json";
 import { atomWithStorage } from "jotai/utils";
 import { DEFAULT_SLIPPAGE } from "@constants/option.constant";
 
@@ -21,6 +20,6 @@ export const modalContent = atom<React.ReactNode | null>(null);
 
 export const breakpoint = atom<DEVICE_TYPE>(DEVICE_TYPE.WEB);
 
-export const network = atom<NetworkModel>(NetworkData[0]);
+export const network = atom<NetworkModel | null>(null);
 
 export const slippage = atomWithStorage<number>("slippage", DEFAULT_SLIPPAGE);