From 0c61a11e149a99ada978af20a8c5dcb00cc7d98b Mon Sep 17 00:00:00 2001
From: devinxl <devin@nodereal.io>
Date: Tue, 10 Oct 2023 20:54:28 +0800
Subject: [PATCH] fix(dcellar-web-ui): popup twice when change page

---
 .../ConnectWallet/WalletConnectModal.tsx        | 17 +++++++++++------
 .../src/components/ConnectWallet/index.tsx      | 11 +++++++----
 .../src/components/layout/GlobalManagements.tsx |  2 ++
 apps/dcellar-web-ui/src/store/slices/global.ts  |  6 ++++++
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/apps/dcellar-web-ui/src/components/ConnectWallet/WalletConnectModal.tsx b/apps/dcellar-web-ui/src/components/ConnectWallet/WalletConnectModal.tsx
index b779bab7..b75d1cbb 100644
--- a/apps/dcellar-web-ui/src/components/ConnectWallet/WalletConnectModal.tsx
+++ b/apps/dcellar-web-ui/src/components/ConnectWallet/WalletConnectModal.tsx
@@ -13,17 +13,21 @@ import { InternalRoutePaths } from '@/utils/constant';
 import { ssrLandingRoutes } from '@/pages/_app';
 import { METAMASK_DOWNLOAD_URL, TRUST_WALLET_DOWNLOAD_URL } from '@/utils/constant';
 import { IconFont } from '@/components/IconFont';
+import { setConnectWallet } from '@/store/slices/global';
+import { useDispatch } from 'react-redux';
 
-export interface WalletConnectModalProps extends DCModalProps {}
-export function WalletConnectModal(props: WalletConnectModalProps) {
+export interface WalletConnectModalProps {}
+export function WalletConnectModal() {
   const router = useRouter();
-  const { isOpen, onClose } = props;
+  const dispatch = useDispatch();
   const [hasTrigger, setHasTrigger] = useState(false);
   const { loginAccount: address } = useAppSelector((root) => root.persist);
   const [currentAddress, setCurrentAddress] = useState<string | undefined>(address);
-
+  const { connectWallet: isOpen } = useAppSelector((state) => state.global);
   const { isAuthPending } = useAppLogin(currentAddress);
-
+  const onClose = useCallback(() => {
+    dispatch(setConnectWallet(false))
+  }, [dispatch]);
   const onSuccess = useCallback((address?: string) => {
     setCurrentAddress(address);
   }, []);
@@ -35,6 +39,7 @@ export function WalletConnectModal(props: WalletConnectModalProps) {
       !!address &&
       ssrLandingRoutes.some((item) => item === router.pathname)
     ) {
+      onClose();
       const originPathname = decodeURIComponent(router.query.originAsPath as string);
       setTimeout(
         () =>
@@ -46,7 +51,7 @@ export function WalletConnectModal(props: WalletConnectModalProps) {
         100,
       );
     }
-  }, [address, hasTrigger, isAuthPending, isOpen, router]);
+  }, [address, hasTrigger, isAuthPending, isOpen, onClose, router]);
 
   const onConnectError = useCallback((err: Error, args: any) => {
     if (err instanceof ConnectorNotFoundError) {
diff --git a/apps/dcellar-web-ui/src/components/ConnectWallet/index.tsx b/apps/dcellar-web-ui/src/components/ConnectWallet/index.tsx
index 77a153e9..8763a9c4 100644
--- a/apps/dcellar-web-ui/src/components/ConnectWallet/index.tsx
+++ b/apps/dcellar-web-ui/src/components/ConnectWallet/index.tsx
@@ -1,8 +1,9 @@
 import React, { ReactElement, memo } from 'react';
 import { DCButton, DCButtonProps } from '@/components/common/DCButton';
-import { WalletConnectModal } from '@/components/ConnectWallet/WalletConnectModal';
-import { useDisclosure, Text } from '@totejs/uikit';
+import { Text } from '@totejs/uikit';
 import { smMedia } from '@/modules/responsive';
+import { useDispatch } from 'react-redux';
+import { setConnectWallet } from '@/store/slices/global';
 
 interface ConnectWalletProps extends DCButtonProps {
   icon?: ReactElement;
@@ -10,11 +11,13 @@ interface ConnectWalletProps extends DCButtonProps {
 }
 
 export const ConnectWallet = memo<Partial<ConnectWalletProps>>(function ConnectButton(props) {
-  const { isOpen, onClose, onOpen } = useDisclosure();
+  const dispatch = useDispatch();
   const { icon, text, ...restProps } = props;
+  const onOpen = () => {
+    dispatch(setConnectWallet(true));
+  }
   return (
     <>
-      <WalletConnectModal isOpen={isOpen} onClose={onClose} />
       <DCButton
         px={48}
         h={54}
diff --git a/apps/dcellar-web-ui/src/components/layout/GlobalManagements.tsx b/apps/dcellar-web-ui/src/components/layout/GlobalManagements.tsx
index 8c3e7bc5..3d88b6a4 100644
--- a/apps/dcellar-web-ui/src/components/layout/GlobalManagements.tsx
+++ b/apps/dcellar-web-ui/src/components/layout/GlobalManagements.tsx
@@ -8,6 +8,7 @@ import { PaymentAccounts } from '@/components/layout/Header/PaymentAccounts';
 import { StoreFeeParams } from '@/components/layout/Header/StoreFeeParams';
 import { DisconnectWalletModal } from '@/components/layout/Header/DisconnectWalletModal';
 import { ObjectOperations } from '@/modules/object/components/ObjectOperations';
+import { WalletConnectModal } from '../ConnectWallet/WalletConnectModal';
 
 interface GlobalManagementsProps {}
 
@@ -24,6 +25,7 @@ export const GlobalManagements = memo<GlobalManagementsProps>(function GlobalMan
       <DisconnectWalletModal />
       {/* for global download confirm modal */}
       <ObjectOperations level={1} />
+      <WalletConnectModal />
     </>
   );
 });
diff --git a/apps/dcellar-web-ui/src/store/slices/global.ts b/apps/dcellar-web-ui/src/store/slices/global.ts
index 120b261a..4831fa26 100644
--- a/apps/dcellar-web-ui/src/store/slices/global.ts
+++ b/apps/dcellar-web-ui/src/store/slices/global.ts
@@ -93,6 +93,7 @@ export interface GlobalState {
   sealingTs: Record<string, number>;
   authModalOpen: [boolean, AuthPostAction];
   disconnectWallet: boolean;
+  connectWallet: boolean;
 }
 export const GAS_PRICE = '0.000000005';
 export const UPLOADING_STATUSES = ['WAIT', 'HASH', 'READY', 'UPLOAD', 'SEAL'];
@@ -111,6 +112,7 @@ const initialState: GlobalState = {
   sealingTs: {},
   authModalOpen: [false, {} as AuthPostAction],
   disconnectWallet: false,
+  connectWallet: false,
 };
 
 export const globalSlice = createSlice({
@@ -369,6 +371,9 @@ export const globalSlice = createSlice({
     setDisconnectWallet(state, { payload }: PayloadAction<boolean>) {
       state.disconnectWallet = payload;
     },
+    setConnectWallet(state, { payload }: PayloadAction<boolean>) {
+      state.connectWallet = payload;
+    },
   },
 });
 
@@ -392,6 +397,7 @@ export const {
   setisLoadingPLF,
   setAuthModalOpen,
   setDisconnectWallet,
+  setConnectWallet,
 } = globalSlice.actions;
 
 const _emptyUploadQueue = Array<UploadFile>();