From c2b4a43f67e64de53d1a3c4a238eceed6bebfb42 Mon Sep 17 00:00:00 2001 From: devinxl Date: Tue, 19 Sep 2023 22:40:56 +0800 Subject: [PATCH] feat(dcellar-web-ui): remove login guard for price-calculator page --- .../ConnectWallet/WalletConnectModal.tsx | 24 ++++++++++++-- .../layout/LandingHeader/BaseHeader.tsx | 32 +++++++++++++------ .../src/context/LoginContext/provider.tsx | 3 +- .../src/context/LoginContext/useLoginGuard.ts | 4 +++ .../components/CustomTime.tsx | 7 ++-- apps/dcellar-web-ui/src/pages/_app.tsx | 1 + .../src/pages/price-calculator/index.tsx | 1 - 7 files changed, 54 insertions(+), 18 deletions(-) diff --git a/apps/dcellar-web-ui/src/components/ConnectWallet/WalletConnectModal.tsx b/apps/dcellar-web-ui/src/components/ConnectWallet/WalletConnectModal.tsx index a9efa193..afc86a79 100644 --- 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(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); + }} /> ); diff --git a/apps/dcellar-web-ui/src/components/layout/LandingHeader/BaseHeader.tsx b/apps/dcellar-web-ui/src/components/layout/LandingHeader/BaseHeader.tsx index 8e1802fe..f2120674 100644 --- 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 ( { {MENUS.map((item) => ( {item.title} - + ))} - - {/* - - Get Started - */} + + {/* {!!loginAccount && ( + { + router.push(InternalRoutePaths.buckets); + }} + > + + Get Started + + )} */} ); }; diff --git a/apps/dcellar-web-ui/src/context/LoginContext/provider.tsx b/apps/dcellar-web-ui/src/context/LoginContext/provider.tsx index 122aad26..26fbbf3e 100644 --- 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 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 index 39a5f0ed..6f07ed7c 100644 --- 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 index ad36c8dc..e9eb30b3 100644 --- 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 ( diff --git a/apps/dcellar-web-ui/src/pages/_app.tsx b/apps/dcellar-web-ui/src/pages/_app.tsx index b7d30836..65d1b748 100644 --- 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 index 69e3fdd0..c90a9131 100644 --- 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';