fix(dcellar-web-ui): popup twice when change page

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) {

apps/dcellar-web-ui/src/components/ConnectWallet/index.tsx

@@ -1,20 +1,23 @@
 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;
   text?: string;
 }
 
 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}

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 />
     </>
   );
 });

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>();