feat(dcellar-web-ui): remove login guard for price-calculator page

node-real · Sep 19, 2023 · c2b4a43 · c2b4a43
1 parent 8b97c22
commit c2b4a43
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 18 deletions.
diff --git a/apps/dcellar-web-ui/src/components/ConnectWallet/WalletConnectModal.tsx b/apps/dcellar-web-ui/src/components/ConnectWallet/WalletConnectModal.tsx
@@ -11,12 +11,15 @@ import { useCallback, useEffect, useState } from 'react';
 import { ConnectorNotFoundError } from 'wagmi';
 import { useAppLogin } from '@/modules/welcome/hooks/useAppLogin';
 import { useAppSelector } from '@/store';
+import { useRouter } from 'next/router';
+import { InternalRoutePaths } from '@/constants/paths';
+import { ssrLandingRoutes } from '@/pages/_app';
 
 export interface WalletConnectModalProps extends DCModalProps {}
-
 export function WalletConnectModal(props: WalletConnectModalProps) {
+  const router = useRouter();
   const { isOpen, onClose } = props;
-
+  const [hasTrigger, setHasTrigger] = useState(false);
   const { loginAccount: address } = useAppSelector((root) => root.persist);
   const [currentAddress, setCurrentAddress] = useState<string | undefined>(address);
 
@@ -26,6 +29,18 @@ export function WalletConnectModal(props: WalletConnectModalProps) {
     setCurrentAddress(address);
   }, []);
 
+  // TODO
+  useEffect(() => {
+    if (
+      hasTrigger &&
+      !isAuthPending &&
+      !!address &&
+      ssrLandingRoutes.some((item) => item === router.pathname)
+    ) {
+      setTimeout(() => router.push(InternalRoutePaths.buckets), 100);
+    }
+  }, [address, hasTrigger, isAuthPending, isOpen, router]);
+
   const onConnectError = useCallback((err: Error, args: any) => {
     if (err instanceof ConnectorNotFoundError) {
       const { connector } = args;
@@ -80,7 +95,10 @@ export function WalletConnectModal(props: WalletConnectModalProps) {
                 name={item.name}
                 isActive={isActive}
                 isDisabled={isLoading}
-                onClick={() => onChangeConnector(item)}
+                onClick={() => {
+                  setHasTrigger(true);
+                  onChangeConnector(item);
+                }}
               />
             </GAClick>
           );

diff --git a/apps/dcellar-web-ui/src/components/layout/LandingHeader/BaseHeader.tsx b/apps/dcellar-web-ui/src/components/layout/LandingHeader/BaseHeader.tsx
@@ -1,10 +1,10 @@
-import { Box, Text, Flex, IconButtonProps, Link } from '@totejs/uikit';
+import { Flex, Link } from '@totejs/uikit';
 import { Logo } from '../Logo';
 import { GAClick } from '@/components/common/GATracker';
-import { ExternalLinkIcon, IconProps, WalletIcon } from '@totejs/icons';
-import { DCButton } from '@/components/common/DCButton';
-import WalletFilledIcon from '@/public/images/icons/wallet-filled.svg';
+import { ExternalLinkIcon, IconProps } from '@totejs/icons';
 import { ConnectWallet } from '@/components/ConnectWallet';
+import { useAppSelector } from '@/store';
+import { useRouter } from 'next/router';
 
 export const MENUS = [
   {
@@ -28,6 +28,9 @@ export const MENUS = [
 ];
 
 export const BaseHeader = () => {
+  const { loginAccount } = useAppSelector((state) => state.persist);
+  const router = useRouter();
+
   return (
     <Flex
       as="header"
@@ -48,15 +51,24 @@ export const BaseHeader = () => {
         {MENUS.map((item) => (
           <Link color={'readable.normal'} key={item.title} href={item.link} target={item.target}>
             {item.title}
-            <item.Icon/>
+            <item.Icon />
           </Link>
         ))}
       </Flex>
-      <ConnectWallet h={36} p={'10px 16px'} fontWeight={500} fontSize={14}/>
-      {/* <DCButton h={36} p={'10px 16px'} variant="dcGhost">
-        <WalletFilledIcon w={24} h={24} color={'readable.normal'} />
-        <Text marginLeft={4}>Get Started</Text>
-      </DCButton> */}
+      <ConnectWallet h={36} p={'10px 16px'} fontWeight={500} fontSize={14} />
+      {/* {!!loginAccount && (
+        <DCButton
+          h={36}
+          p={'10px 16px'}
+          variant="dcGhost"
+          onClick={() => {
+            router.push(InternalRoutePaths.buckets);
+          }}
+        >
+          <WalletFilledIcon w={24} h={24} color={'readable.normal'} />
+          <Text marginLeft={4}>Get Started</Text>
+        </DCButton>
+      )} */}
     </Flex>
   );
 };
diff --git a/apps/dcellar-web-ui/src/context/LoginContext/provider.tsx b/apps/dcellar-web-ui/src/context/LoginContext/provider.tsx
@@ -10,6 +10,7 @@ import { useAppDispatch, useAppSelector } from '@/store';
 import { checkSpOffChainMayExpired, setLogout } from '@/store/slices/persist';
 import { useAsyncEffect } from 'ahooks';
 import { resetUploadQueue, setDisconnectWallet, setTaskManagement } from '@/store/slices/global';
+import { ssrLandingRoutes } from '@/pages/_app';
 
 export interface LoginContextProviderProps {
   inline?: boolean; // for in page connect button
@@ -77,7 +78,7 @@ export function LoginContextProvider(props: PropsWithChildren<LoginContextProvid
 
   const { pass } = useLoginGuard(inline);
 
-  if (!pass) {
+  if (!pass && !ssrLandingRoutes.some(item => item === pathname)) {
     return null;
   }
 

diff --git a/apps/dcellar-web-ui/src/context/LoginContext/useLoginGuard.ts b/apps/dcellar-web-ui/src/context/LoginContext/useLoginGuard.ts
@@ -2,6 +2,7 @@ import { InternalRoutePaths } from '@/constants/paths';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { useAppSelector } from '@/store';
+import { ssrLandingRoutes } from '@/pages/_app';
 
 export function useLoginGuard(inline: boolean) {
   const { loginAccount: address } = useAppSelector((root) => root.persist);
@@ -23,6 +24,9 @@ export function useLoginGuard(inline: boolean) {
         setPass(true);
       }
     } else {
+      if (ssrLandingRoutes.some(item => item === pathname)) {
+        return setPass(true);
+      }
       if (router?.query?.originAsPath && router?.query.originAsPath.length > 0) {
         const originPathname = decodeURIComponent(router.query.originAsPath as string);
         router.replace(originPathname, undefined, { shallow: true });

diff --git a/apps/dcellar-web-ui/src/modules/price-calculator/components/CustomTime.tsx b/apps/dcellar-web-ui/src/modules/price-calculator/components/CustomTime.tsx
@@ -31,10 +31,11 @@ type Props = {
 };
 export const CustomTime = ({ isOpen, selected, customStorageTime, onClose, onToggle, onChangeButton, onChangeInput }: Props) => {
   const swapTimeUnits = swapObj(TimeUnits);
-  const scroll = useScroll(document);
+  // const
+  // const scroll = useScroll(typeof document !== 'undefined' ? '' :  document);
   useEffect(() => {
-    if (isOpen && scroll) onClose();
-  }, [scroll])
+    if (isOpen) onClose();
+  }, [])
   return (
     <Popover isOpen={isOpen} placement="bottom">
       <PopoverTrigger>

diff --git a/apps/dcellar-web-ui/src/pages/_app.tsx b/apps/dcellar-web-ui/src/pages/_app.tsx
@@ -17,6 +17,7 @@ import { Page } from '@/components/layout/Page';
 import { ReactNode } from 'react';
 import { StatusDetail } from '@/modules/object/components/StatusDetail';
 
+export const ssrLandingRoutes =['/price-calculator', '/'];
 function DcellarApp({ Component, ...rest }: AppProps) {
   const { store, props } = wrapper.useWrappedStore(rest);
   const persistor = persistStore(store, {}, function () {

diff --git a/apps/dcellar-web-ui/src/pages/price-calculator/index.tsx b/apps/dcellar-web-ui/src/pages/price-calculator/index.tsx
@@ -1,5 +1,4 @@
 import { LandingPage } from '@/components/layout/LandingPage';
-import { getBnbPrice } from '@/facade/common';
 import { PriceCalculator } from '@/modules/price-calculator';
 import { AppContext } from 'next/app';
 import { ReactElement } from 'react';