diff --git a/web-marketplace/src/pages/BuyCredits/BuyCredits.Form.tsx b/web-marketplace/src/pages/BuyCredits/BuyCredits.Form.tsx index e619b40f54..834f2515d5 100644 --- a/web-marketplace/src/pages/BuyCredits/BuyCredits.Form.tsx +++ b/web-marketplace/src/pages/BuyCredits/BuyCredits.Form.tsx @@ -86,6 +86,10 @@ type Props = { projectHref: string; cardDetails?: CardDetails; project?: NormalizeProject; + projectId: string | undefined; + loadingSanityProject: boolean; + isBuyFlowDisabled: boolean; + loadingBuySellOrders: boolean; }; const stripe = loadStripe(stripeKey); @@ -104,10 +108,14 @@ export const BuyCreditsForm = ({ projectHref, cardDetails, project, + projectId, + loadingSanityProject, + isBuyFlowDisabled, + loadingBuySellOrders, }: Props) => { const { data, activeStep, handleSaveNext, handleSave, handleActiveStep } = useMultiStep(); - const { wallet, isConnected, activeWalletAddr } = useWallet(); + const { wallet, isConnected, activeWalletAddr, loaded } = useWallet(); const { activeAccount, privActiveAccount } = useAuth(); const [paymentOption, setPaymentOption] = useAtom(paymentOptionAtom); const { @@ -119,7 +127,7 @@ export const BuyCreditsForm = ({ } = useLoginData({}); const navigate = useNavigate(); const { _ } = useLingui(); - + const warningModalContent = useRef(); const setErrorBannerTextAtom = useSetAtom(errorBannerTextAtom); const setConnectWalletModal = useSetAtom(connectWalletModalAtom); const setSwitchWalletModalAtom = useSetAtom(switchWalletModalAtom); @@ -176,6 +184,28 @@ export const BuyCreditsForm = ({ setPaymentOption(prev => data?.paymentOption || prev); }, [data, setPaymentOption, setRetiring]); + useEffect(() => { + if ( + !loadingSanityProject && + !loadingBuySellOrders && + cardSellOrders.length === 0 && + ((loaded && !wallet?.address) || isBuyFlowDisabled) && + !warningModalContent.current + ) { + // Else if there's no connected wallet address or buy disabled, redirect to project page + navigate(`/project/${projectId}`, { replace: true }); + } + }, [ + loadingSanityProject, + loadingBuySellOrders, + loaded, + wallet?.address, + navigate, + projectId, + cardSellOrders.length, + isBuyFlowDisabled, + ]); + const paymentInfoFormSubmit = useCallback( async (values: PaymentInfoFormSchemaType) => { const { paymentMethodId, ...others } = values; @@ -220,8 +250,6 @@ export const BuyCreditsForm = ({ [cardSellOrders, filteredCryptoSellOrders, paymentOption], ); - const warningModalContent = useRef(); - const isWeb2UserWithoutWallet = !!privActiveAccount?.email && !activeAccount?.addr; diff --git a/web-marketplace/src/pages/BuyCredits/BuyCredits.tsx b/web-marketplace/src/pages/BuyCredits/BuyCredits.tsx index 048feb8ad7..a9c87e8d82 100644 --- a/web-marketplace/src/pages/BuyCredits/BuyCredits.tsx +++ b/web-marketplace/src/pages/BuyCredits/BuyCredits.tsx @@ -1,9 +1,7 @@ import { useEffect, useState } from 'react'; -import { useNavigate, useParams } from 'react-router-dom'; +import { useParams } from 'react-router-dom'; import { useAtomValue } from 'jotai'; -import { useWallet } from 'lib/wallet/wallet'; - import NotFoundPage from 'pages/NotFound'; import WithLoader from 'components/atoms/WithLoader'; import { MultiStepTemplate } from 'components/templates/MultiStepTemplate'; @@ -19,7 +17,6 @@ import { useSummarizePayment } from './hooks/useSummarizePayment'; export const BuyCredits = () => { const { projectId } = useParams(); - const navigate = useNavigate(); const { loadingSanityProject, @@ -38,27 +35,6 @@ export const BuyCredits = () => { useNavigateToSlug(slug, '/buy'); const paymentOption = useAtomValue(paymentOptionAtom); - const { wallet, loaded } = useWallet(); - - useEffect(() => { - if ( - !loadingSanityProject && - !loadingBuySellOrders && - cardSellOrders.length === 0 && - ((loaded && !wallet?.address) || isBuyFlowDisabled) - ) - // Else if there's no connected wallet address or buy disabled, redirect to project page - navigate(`/project/${projectId}`, { replace: true }); - }, [ - loadingSanityProject, - loadingBuySellOrders, - loaded, - wallet?.address, - navigate, - projectId, - cardSellOrders.length, - isBuyFlowDisabled, - ]); const [retiring, setRetiring] = useState(true); const [confirmationTokenId, setConfirmationTokenId] = useState< @@ -116,6 +92,10 @@ export const BuyCredits = () => { setCardDetails={setCardDetails} cardDetails={cardDetails} project={projectsWithOrderData[0]} + projectId={projectId} + loadingSanityProject={loadingSanityProject} + isBuyFlowDisabled={isBuyFlowDisabled} + loadingBuySellOrders={loadingBuySellOrders} />