fix: avoid redirection when BuyWarningModal open

regen-network · Dec 5, 2024 · 0f9ae2c · 0f9ae2c
1 parent e0136bd
commit 0f9ae2c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 29 deletions.
diff --git 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<BuyCreditsSchemaTypes>();
-  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<BuyWarningModalContent | undefined>();
   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<BuyWarningModalContent | undefined>();
-
   const isWeb2UserWithoutWallet =
     !!privActiveAccount?.email && !activeAccount?.addr;
 

diff --git 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<boolean>(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}
           />
         </MultiStepTemplate>
       </>