chore: APP-546 disable close on tx processing modal (#2604)

blushi · web-flow · commit 9cdb38426399 · 2025-02-24T09:11:07.000Z
diff --git a/web-components/src/components/form/BasketPutForm/BasketPutForm.tsx b/web-components/src/components/form/BasketPutForm/BasketPutForm.tsx
@@ -2,10 +2,10 @@ import React, { ReactNode } from 'react';
 import { Field, Form, Formik, FormikErrors } from 'formik';
 
 import { Body } from '../../../components/typography';
+import { RegenModalPropsWithOnClose } from '../../../types/shared/modalPropsWithOnClose';
 import AmountField from '../../inputs/AmountField';
 import SelectTextField, { Option } from '../../inputs/SelectTextField';
 import { validateAmount } from '../../inputs/validation';
-import { RegenModalProps } from '../../modal';
 import Submit from '../Submit';
 import { BasketPutFormOnChange } from './BasketPutForm.OnChange';
 
@@ -30,7 +30,7 @@ export interface BasketPutProps {
 interface FormProps extends BasketPutProps {
   maxLabel: string;
   availableLabel: string;
-  onClose: RegenModalProps['onClose'];
+  onClose: RegenModalPropsWithOnClose['onClose'];
 }
 
 export interface FormValues {
diff --git a/web-components/src/components/form/BasketTakeForm.tsx b/web-components/src/components/form/BasketTakeForm.tsx
@@ -5,11 +5,11 @@ import { Field, Form, Formik, FormikErrors } from 'formik';
 import { makeStyles } from 'tss-react/mui';
 
 import type { Theme } from '../../theme/muiTheme';
+import { RegenModalPropsWithOnClose } from '../../types/shared/modalPropsWithOnClose';
 import QuestionIconOutlined from '../icons/QuestionIconOutlined';
 import AmountField from '../inputs/AmountField';
 import CheckboxLabel from '../inputs/CheckboxLabel';
 import { validateAmount } from '../inputs/validation';
-import type { RegenModalProps } from '../modal';
 import InfoTooltip from '../tooltip/InfoTooltip';
 import { Subtitle } from '../typography';
 import {
@@ -80,7 +80,7 @@ interface FormProps extends BasketTakeProps {
   invalidDecimalCount: string;
   maxLabel: string;
   availableLabel: string;
-  onClose: RegenModalProps['onClose'];
+  onClose: RegenModalPropsWithOnClose['onClose'];
 }
 
 const BasketTakeForm: React.FC<React.PropsWithChildren<FormProps>> = ({
diff --git a/web-components/src/components/form/CreditRetireForm.tsx b/web-components/src/components/form/CreditRetireForm.tsx
@@ -4,14 +4,14 @@ import { Field, Form, Formik, FormikErrors, useFormikContext } from 'formik';
 import { makeStyles } from 'tss-react/mui';
 
 import { Theme } from '../../theme/muiTheme';
+import { RegenModalPropsWithOnClose } from '../../types/shared/modalPropsWithOnClose';
 import { getJurisdictionIsoCode } from '../../utils/locationStandard';
 import { Flex } from '../box';
 import AmountField from '../inputs/AmountField';
 import ControlledTextField from '../inputs/ControlledTextField';
 import SelectFieldFallback from '../inputs/SelectFieldFallback';
 import TextField from '../inputs/TextField';
 import { validateAmount, validateMemoLength } from '../inputs/validation';
-import { RegenModalProps } from '../modal';
 import InfoTooltipWithIcon from '../tooltip/InfoTooltipWithIcon';
 import { Body, Title } from '../typography';
 import Submit from './Submit';
@@ -83,7 +83,7 @@ interface FormProps extends CreditRetireProps {
   insufficientCredits: string;
   invalidDecimalCount: string;
   onSubmit: (values: RetireFormValues) => void;
-  onClose: RegenModalProps['onClose'];
+  onClose: RegenModalPropsWithOnClose['onClose'];
 }
 
 export interface MetaRetireFormValues {
diff --git a/web-components/src/components/modal/BasketPutModal.tsx b/web-components/src/components/modal/BasketPutModal.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 
+import { RegenModalPropsWithOnClose } from '../../types/shared/modalPropsWithOnClose';
 import {
   BasketPutForm,
   BasketPutProps,
 } from '../form/BasketPutForm/BasketPutForm';
-import { RegenModalProps } from '../modal';
 import { FormModalTemplate } from './FormModalTemplate';
 
-interface BasketPutModalProps extends RegenModalProps, BasketPutProps {
+interface BasketPutModalProps
+  extends RegenModalPropsWithOnClose,
+    BasketPutProps {
   title: string;
   maxLabel: string;
   availableLabel: string;
diff --git a/web-components/src/components/modal/BasketTakeModal.tsx b/web-components/src/components/modal/BasketTakeModal.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 
+import { RegenModalPropsWithOnClose } from '../../types/shared/modalPropsWithOnClose';
 import { BasketTakeForm, BasketTakeProps } from '../form/BasketTakeForm';
 import { FormModalTemplate } from './FormModalTemplate';
-import { RegenModalProps } from './index';
 
-export interface TakeModalProps extends RegenModalProps, BasketTakeProps {
+export interface TakeModalProps
+  extends RegenModalPropsWithOnClose,
+    BasketTakeProps {
   title: string;
   subtitle: string;
   maxLabel: string;
diff --git a/web-components/src/components/modal/ProcessingModal.tsx b/web-components/src/components/modal/ProcessingModal.tsx
@@ -37,7 +37,7 @@ const ProcessingModal: React.FC<React.PropsWithChildren<ProcessingModalProps>> =
     const { classes: styles, cx } = useStyles();
 
     return (
-      <Modal className={styles.root} open={open} onClose={onClose}>
+      <Modal className={styles.root} open={open}>
         <Spinner className={cx(styles.verticalSpacing, styles.spinner)} />
         <Title align="center" variant="h3" mb={6}>
           {title}
diff --git a/web-components/src/components/modal/SaveChangesWarningModal/SaveChangesWarningModal.tsx b/web-components/src/components/modal/SaveChangesWarningModal/SaveChangesWarningModal.tsx
@@ -1,9 +1,10 @@
-import { RegenModalProps } from 'web-components/src/components/modal';
 import { SadBeeModal } from 'web-components/src/components/modal/SadBeeModal/SadBeeModal';
 import { CancelButtonFooter } from 'web-components/src/components/organisms/CancelButtonFooter/CancelButtonFooter';
 import { Body, Title } from 'web-components/src/components/typography';
 
-interface Props extends RegenModalProps {
+import { RegenModalPropsWithOnClose } from '../../../types/shared/modalPropsWithOnClose';
+
+interface Props extends RegenModalPropsWithOnClose {
   title: string;
   bodyText: string;
   buttonText: string;
diff --git a/web-components/src/components/modal/index.tsx b/web-components/src/components/modal/index.tsx
@@ -8,7 +8,7 @@ import CloseIcon from '../icons/CloseIcon';
 
 export interface RegenModalProps {
   open: boolean;
-  onClose: () => void;
+  onClose?: () => void;
   className?: string;
   closeIconColor?: string;
   isIFrame?: boolean;
@@ -123,9 +123,11 @@ const RegenModal: React.FC<React.PropsWithChildren<RegenModalProps>> = ({
           )}
         >
           {children}
-          <div className={styles.closeIcon} onClick={onClose}>
-            <CloseIcon svgColor={closeIconColor} />
-          </div>
+          {onClose && (
+            <div className={styles.closeIcon} onClick={onClose}>
+              <CloseIcon svgColor={closeIconColor} />
+            </div>
+          )}
         </div>
       </RemoveScroll>
     </Modal>
diff --git a/web-components/src/types/shared/modalPropsWithOnClose.ts b/web-components/src/types/shared/modalPropsWithOnClose.ts
@@ -0,0 +1,5 @@
+import { RegenModalProps } from '../../components/modal';
+
+export type RegenModalPropsWithOnClose = Omit<RegenModalProps, 'onClose'> & {
+  onClose: () => void;
+};
diff --git a/web-marketplace/src/components/organisms/BridgeForm/BridgeForm.tsx b/web-marketplace/src/components/organisms/BridgeForm/BridgeForm.tsx
@@ -11,7 +11,7 @@ import {
   validateAmount,
   validatePolygonAddress,
 } from 'web-components/src/components/inputs/validation';
-import { RegenModalProps } from 'web-components/src/components/modal';
+import { RegenModalPropsWithOnClose } from 'web-components/src/types/shared/modalPropsWithOnClose';
 
 import {
   INSUFFICIENT_CREDITS,
@@ -37,7 +37,7 @@ export interface BridgeProps {
 interface FormProps extends BridgeProps {
   maxLabel: string;
   availableLabel: string;
-  onClose: RegenModalProps['onClose'];
+  onClose: RegenModalPropsWithOnClose['onClose'];
 }
 
 export interface BridgeFormValues {
diff --git a/web-marketplace/src/components/organisms/BridgeModal/BridgeModal.tsx b/web-marketplace/src/components/organisms/BridgeModal/BridgeModal.tsx
@@ -3,8 +3,8 @@ import { useLingui } from '@lingui/react';
 import { Flex } from 'web-components/src/components/box/Box';
 import RegenNetworkIcon from 'web-components/src/components/icons/RegenNetworkIcon';
 import ToucanIcon from 'web-components/src/components/icons/ToucanIcon';
-import { RegenModalProps } from 'web-components/src/components/modal';
 import { FormModalTemplate } from 'web-components/src/components/modal/FormModalTemplate';
+import { RegenModalPropsWithOnClose } from 'web-components/src/types/shared/modalPropsWithOnClose';
 
 import { BatchInfoWithBalance } from 'types/ledger/ecocredit';
 
@@ -18,7 +18,7 @@ import {
   BRIDGE_MODAL_TITLE,
 } from './BridgeModal.constants';
 
-interface BridgeModalProps extends RegenModalProps {
+interface BridgeModalProps extends RegenModalPropsWithOnClose {
   batch?: BatchInfoWithBalance;
   maxLabel: string;
   availableLabel: string;
diff --git a/web-marketplace/src/components/organisms/BuyModalOptions/BuyModalOptions.tsx b/web-marketplace/src/components/organisms/BuyModalOptions/BuyModalOptions.tsx
@@ -39,7 +39,7 @@ export const BuyModalOptions = ({
   const { trackBuyScheduleCall, trackBuyKeplr } = useBuyModalOptionsTracker();
 
   useEffect(() => {
-    if (loaded && isConnected) onClose();
+    if (loaded && isConnected && onClose) onClose();
   }, [isConnected, loaded, onClose]);
 
   return (
diff --git a/web-marketplace/src/components/organisms/CertificationForm/CertificationForm.tsx b/web-marketplace/src/components/organisms/CertificationForm/CertificationForm.tsx
@@ -7,7 +7,7 @@ import { AnyObjectSchema, object, string } from 'yup';
 
 import OnBoardingCard from 'web-components/src/components/cards/OnBoardingCard';
 import Submit from 'web-components/src/components/form/Submit';
-import { RegenModalProps } from 'web-components/src/components/modal';
+import { RegenModalPropsWithOnClose } from 'web-components/src/types/shared/modalPropsWithOnClose';
 
 import {
   INVALID_URL,
@@ -21,7 +21,7 @@ export interface CertificationProps {
 }
 
 interface FormProps extends CertificationProps {
-  onClose: RegenModalProps['onClose'];
+  onClose: RegenModalPropsWithOnClose['onClose'];
 }
 
 const CertificationForm: React.FC<React.PropsWithChildren<FormProps>> = ({
diff --git a/web-marketplace/src/components/organisms/ChooseHowToPurchaseModal/ChooseHowToPurchaseModal.tsx b/web-marketplace/src/components/organisms/ChooseHowToPurchaseModal/ChooseHowToPurchaseModal.tsx
@@ -1,18 +1,23 @@
 import { useNavigate } from 'react-router-dom';
-import { msg, Trans } from '@lingui/macro';
+import { Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { useSetAtom } from 'jotai';
 
 import OutlinedButton from 'web-components/src/components/buttons/OutlinedButton';
 import Card from 'web-components/src/components/cards/Card';
-import Modal, { RegenModalProps } from 'web-components/src/components/modal';
+import Modal from 'web-components/src/components/modal';
 import {
   Body,
   Subtitle,
   Title,
 } from 'web-components/src/components/typography';
+import { RegenModalPropsWithOnClose } from 'web-components/src/types/shared/modalPropsWithOnClose';
 
 import { buyFromProjectIdAtom } from 'pages/BuyCredits/BuyCredits.atoms';
+import {
+  BUYINGS_OPTIONS_FILTERS_PARAM,
+  CREDIT_CARD_BUYING_OPTION_ID,
+} from 'pages/Projects/Projects.constants';
 import { Link } from 'components/atoms';
 import { LoginButton } from 'components/organisms/LoginButton/LoginButton';
 
@@ -23,14 +28,10 @@ import {
   CRYPTO_SUBTITLE,
   TITLE,
 } from './ChooseHowToPurchaseModal.constants';
-import {
-  BUYINGS_OPTIONS_FILTERS_PARAM,
-  CREDIT_CARD_BUYING_OPTION_ID,
-} from 'pages/Projects/Projects.constants';
 
 export type ChooseHowToPurchaseModalProps = {
   projectId: string;
-} & RegenModalProps;
+} & RegenModalPropsWithOnClose;
 
 export const ChooseHowToPurchaseModal = ({
   open,
diff --git a/web-marketplace/src/components/organisms/ConnectWalletFlow/ConnectWalletFlow.AddressUsedWithEmailModal.tsx b/web-marketplace/src/components/organisms/ConnectWalletFlow/ConnectWalletFlow.AddressUsedWithEmailModal.tsx
@@ -1,9 +1,10 @@
 import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
-import Modal, { RegenModalProps } from 'web-components/src/components/modal';
+import Modal from 'web-components/src/components/modal';
 import { CancelButtonFooter } from 'web-components/src/components/organisms/CancelButtonFooter/CancelButtonFooter';
 import { Body, Title } from 'web-components/src/components/typography';
+import { RegenModalPropsWithOnClose } from 'web-components/src/types/shared/modalPropsWithOnClose';
 
 import {
   ADDRESS_USED_CANCEL,
@@ -12,7 +13,7 @@ import {
   ADDRESS_USED_TITLE,
 } from './ConnectWalletFlow.constants';
 
-interface Props extends RegenModalProps {
+interface Props extends RegenModalPropsWithOnClose {
   next: () => void;
 }
 
diff --git a/web-marketplace/src/components/organisms/ConnectWalletFlow/ConnectWalletFlow.SelectAccountModal.tsx b/web-marketplace/src/components/organisms/ConnectWalletFlow/ConnectWalletFlow.SelectAccountModal.tsx
@@ -3,10 +3,11 @@ import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
 import { TextButton } from 'web-components/src/components/buttons/TextButton';
-import Modal, { RegenModalProps } from 'web-components/src/components/modal';
+import Modal from 'web-components/src/components/modal';
 import { CancelButtonFooter } from 'web-components/src/components/organisms/CancelButtonFooter/CancelButtonFooter';
 import { Body, Title } from 'web-components/src/components/typography';
 import UserAvatar from 'web-components/src/components/user/UserAvatar';
+import { RegenModalPropsWithOnClose } from 'web-components/src/types/shared/modalPropsWithOnClose';
 import { truncate } from 'web-components/src/utils/truncate';
 
 import { Account } from 'generated/graphql';
@@ -29,7 +30,7 @@ type MergeAccount = Array<
     email?: string | null;
   }
 >;
-interface Props extends RegenModalProps {
+interface Props extends RegenModalPropsWithOnClose {
   merge: (params: MergeAccountsParams) => Promise<void>;
   accounts: MergeAccount;
 }
diff --git a/web-marketplace/src/components/organisms/CreateSellOrderForm/CreateSellOrderForm.tsx b/web-marketplace/src/components/organisms/CreateSellOrderForm/CreateSellOrderForm.tsx
@@ -15,9 +15,9 @@ import SelectTextField, {
 } from 'web-components/src/components/inputs/new/SelectTextField/SelectTextField';
 import TextField from 'web-components/src/components/inputs/new/TextField/TextField';
 import { MAX_FRACTION_DIGITS } from 'web-components/src/components/inputs/validation';
-import { RegenModalProps } from 'web-components/src/components/modal';
 import InfoTooltip from 'web-components/src/components/tooltip/InfoTooltip';
 import { Subtitle } from 'web-components/src/components/typography';
+import { RegenModalPropsWithOnClose } from 'web-components/src/types/shared/modalPropsWithOnClose';
 
 import { errorBannerTextAtom } from 'lib/atoms/error.atoms';
 import {
@@ -51,7 +51,7 @@ export interface Props {
   availableAmountByBatch: { [batchDenom: string]: number };
   onSubmit: (values: CreateSellOrderFormSchemaType) => Promise<void>;
   initialValues?: CreateSellOrderFormSchemaType;
-  onClose: RegenModalProps['onClose'];
+  onClose: RegenModalPropsWithOnClose['onClose'];
 }
 
 const CreateSellOrderForm: React.FC<Props> = ({
diff --git a/web-marketplace/src/components/organisms/CreateSellOrderModal/CreateSellOrderModal.tsx b/web-marketplace/src/components/organisms/CreateSellOrderModal/CreateSellOrderModal.tsx
@@ -1,15 +1,15 @@
 import { PropsWithChildren } from 'react';
 
-import { RegenModalProps } from 'web-components/src/components/modal';
 import { FormModalTemplate } from 'web-components/src/components/modal/FormModalTemplate';
+import { RegenModalPropsWithOnClose } from 'web-components/src/types/shared/modalPropsWithOnClose';
 
 import {
   CreateSellOrderForm,
   Props as CreateSellOrderProps,
 } from '../CreateSellOrderForm/CreateSellOrderForm';
 
 interface CreateSellOrderModalProps
-  extends RegenModalProps,
+  extends RegenModalPropsWithOnClose,
     CreateSellOrderProps {
   title: string;
 }
diff --git a/web-marketplace/src/components/organisms/CreditRetireForm/CreditRetireForm.tsx b/web-marketplace/src/components/organisms/CreditRetireForm/CreditRetireForm.tsx
@@ -7,7 +7,7 @@ import { Box } from '@mui/system';
 import { RetirementReminder } from 'web-components/src/components/form/CreditRetireForm';
 import Submit from 'web-components/src/components/form/Submit';
 import AmountField from 'web-components/src/components/inputs/new/AmountField/AmountField';
-import { RegenModalProps } from 'web-components/src/components/modal';
+import { RegenModalPropsWithOnClose } from 'web-components/src/types/shared/modalPropsWithOnClose';
 
 import {
   AVAILABLE_LABEL,
@@ -37,7 +37,7 @@ export interface CreditRetireFormProps {
   batchDenom: string;
   availableTradableAmount: number;
   onSubmit: (values: CreditRetireFormSchemaType) => Promise<void>;
-  onClose: RegenModalProps['onClose'];
+  onClose: RegenModalPropsWithOnClose['onClose'];
   mapboxToken: string;
   retirementInfoText: string;
 }
diff --git a/web-marketplace/src/components/organisms/CreditSendForm/CreditSendForm.tsx b/web-marketplace/src/components/organisms/CreditSendForm/CreditSendForm.tsx
@@ -11,10 +11,10 @@ import InfoIcon from 'web-components/src/components/icons/InfoIcon';
 import AmountField from 'web-components/src/components/inputs/new/AmountField/AmountField';
 import CheckboxLabel from 'web-components/src/components/inputs/new/CheckboxLabel/CheckboxLabel';
 import TextField from 'web-components/src/components/inputs/new/TextField/TextField';
-import { RegenModalProps } from 'web-components/src/components/modal';
 import InfoTooltip from 'web-components/src/components/tooltip/InfoTooltip';
 import { Subtitle } from 'web-components/src/components/typography';
 import { Theme } from 'web-components/src/theme/muiTheme';
+import { RegenModalPropsWithOnClose } from 'web-components/src/types/shared/modalPropsWithOnClose';
 
 import {
   AVAILABLE_LABEL,
@@ -58,7 +58,7 @@ export interface CreditSendFormProps {
   availableTradableAmount: number;
   onSubmit: (values: CreditSendFormSchemaType) => Promise<void>;
   addressPrefix?: string;
-  onClose: RegenModalProps['onClose'];
+  onClose: RegenModalPropsWithOnClose['onClose'];
   mapboxToken: string;
 }
 
diff --git a/web-marketplace/src/components/organisms/DeletePostWarningModal/DeletePostWarningModal.tsx b/web-marketplace/src/components/organisms/DeletePostWarningModal/DeletePostWarningModal.tsx
diff --git a/web-marketplace/src/components/organisms/Modals/AddCertificationModal/AddCertificationModal.tsx b/web-marketplace/src/components/organisms/Modals/AddCertificationModal/AddCertificationModal.tsx
diff --git a/web-marketplace/src/components/organisms/Modals/CreditRetireModal/CreditRetireModal.tsx b/web-marketplace/src/components/organisms/Modals/CreditRetireModal/CreditRetireModal.tsx
diff --git a/web-marketplace/src/components/organisms/Modals/CreditSendModal/CreditSendModal.tsx b/web-marketplace/src/components/organisms/Modals/CreditSendModal/CreditSendModal.tsx
diff --git a/web-marketplace/src/lib/atoms/modals.atoms.ts b/web-marketplace/src/lib/atoms/modals.atoms.ts
