fix(dcellar-web-ui): resolve issue with connect-wallet page not trigg…

…ering login
node-real · Apr 16, 2024 · 6b4dfdf · 6b4dfdf
1 parent f9559a9
commit 6b4dfdf
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 28 deletions.
diff --git a/apps/dcellar-web-ui/src/components/ConnectWallet/index.tsx b/apps/dcellar-web-ui/src/components/ConnectWallet/index.tsx
@@ -6,7 +6,7 @@ import { ssrLandingRoutes } from '@/pages/_app';
 import { useAppDispatch } from '@/store';
 import { checkOffChainDataAvailable, setLoginAccount } from '@/store/slices/persist';
 import { Text } from '@node-real/uikit';
-import { useModal } from '@node-real/walletkit';
+import { WalletKitEmbeddedModal, useModal } from '@node-real/walletkit';
 import { useAsyncEffect } from 'ahooks';
 import { useRouter } from 'next/router';
 import { ReactElement, memo, useState } from 'react';
@@ -15,13 +15,14 @@ import { useAccount, useDisconnect } from 'wagmi';
 interface ConnectWalletProps extends DCButtonProps {
   icon?: ReactElement;
   text?: string;
+  displayType?: 'button' | 'embeddedModal';
 }
 
 // for multi connect button in one page
 let eventTriggerTime = Date.now();
 
 export const ConnectWallet = memo<Partial<ConnectWalletProps>>(function ConnectButton(props) {
-  const { icon, text, ...restProps } = props;
+  const { icon, text, displayType = 'button', ...restProps } = props;
   const router = useRouter();
   const dispatch = useAppDispatch();
   const { onOpen, onClose } = useModal();
@@ -39,7 +40,6 @@ export const ConnectWallet = memo<Partial<ConnectWalletProps>>(function ConnectB
   };
 
   // connector may be undefined when wallet throw '(index):7 Error in event handler: Error: write after end';
-
   const openModal = () => {
     eventTriggerTime = Date.now();
     setTrustEvent(eventTriggerTime);
@@ -56,7 +56,14 @@ export const ConnectWallet = memo<Partial<ConnectWalletProps>>(function ConnectB
   };
 
   useAsyncEffect(async () => {
-    if (trustEvent !== eventTriggerTime || isAuthPending || !address || !isConnected) return;
+    if (
+      (displayType === 'button' && trustEvent !== eventTriggerTime) ||
+      isAuthPending ||
+      !address ||
+      !isConnected
+    ) {
+      return;
+    }
 
     const isAvailable = await dispatch(checkOffChainDataAvailable(address));
 
@@ -83,26 +90,32 @@ export const ConnectWallet = memo<Partial<ConnectWalletProps>>(function ConnectB
   }, [address, trustEvent, isAuthPending, router]);
 
   return (
-    <DCButton
-      px={48}
-      h={54}
-      fontSize={18}
-      lineHeight="22px"
-      fontWeight={600}
-      {...restProps}
-      onClick={onGetStart}
-      borderRadius={4}
-      sx={{
-        [smMedia]: {
-          h: 33,
-          fontWeight: 500,
-          fontSize: 14,
-          paddingX: 16,
-        },
-      }}
-    >
-      {icon ? icon : ''}
-      <Text marginLeft={icon ? '4px' : ''}>{text ? text : 'Connect Wallet'}</Text>
-    </DCButton>
+    <>
+      {displayType === 'embeddedModal' ? (
+        <WalletKitEmbeddedModal />
+      ) : (
+        <DCButton
+          px={48}
+          h={54}
+          fontSize={18}
+          lineHeight="22px"
+          fontWeight={600}
+          {...restProps}
+          onClick={onGetStart}
+          borderRadius={4}
+          sx={{
+            [smMedia]: {
+              h: 33,
+              fontWeight: 500,
+              fontSize: 14,
+              paddingX: 16,
+            },
+          }}
+        >
+          {icon ? icon : ''}
+          <Text marginLeft={icon ? '4px' : ''}>{text ? text : 'Connect Wallet'}</Text>
+        </DCButton>
+      )}
+    </>
   );
 });
diff --git a/apps/dcellar-web-ui/src/context/LoginContext/useLoginGuard.ts b/apps/dcellar-web-ui/src/context/LoginContext/useLoginGuard.ts
@@ -36,7 +36,7 @@ export function useLoginGuard(inline: boolean) {
       if (router?.query?.originAsPath && router?.query.originAsPath.length > 0) {
         const originPathname = decodeURIComponent(router.query.originAsPath as string);
         router.replace(originPathname, undefined, { shallow: true });
-      } else if (pathname && pathname === '/') {
+      } else if (pathname && (pathname === '/' || pathname === '/connect-wallet')) {
         router.replace(InternalRoutePaths.dashboard, undefined, { shallow: true });
       } else {
         setPass(true);

diff --git a/apps/dcellar-web-ui/src/modules/connect-wallet/index.tsx b/apps/dcellar-web-ui/src/modules/connect-wallet/index.tsx
@@ -66,7 +66,7 @@ export const ConnectWallet = () => {
           </Box>
           {!isMobile && (
             <Flex width="fit-content" paddingX={60} alignItems="center" justifyContent="center">
-              <WalletKitEmbeddedModal />
+              <ConnectWalletButton displayType="embeddedModal" />
             </Flex>
           )}
         </Flex>

diff --git a/apps/dcellar-web-ui/src/pages/connect-wallet/index.tsx b/apps/dcellar-web-ui/src/pages/connect-wallet/index.tsx
@@ -1,4 +1,3 @@
-import { LandingPage } from '@/components/layout/LandingPage';
 import { ConnectWallet } from '@/modules/connect-wallet';
 import { wrapper } from '@/store';
 import { ReactElement } from 'react';