add: Bug: after stopping donation modal stays #215

packages/app/src/components/ViewCollective.tsx

@@ -35,6 +35,7 @@ import ErrorModal from './modals/ErrorModal';
 import FlowingDonationsRowItem from './FlowingDonationsRowItem';
 import { defaultInfoLabel, SUBGRAPH_POLL_INTERVAL } from '../models/constants';
 import env from '../lib/env';
+import ProcessingModal from './modals/ProcessingModal';
 
 interface ViewCollectiveProps {
   collective: Collective;
@@ -67,13 +68,15 @@ function ViewCollective({ collective }: ViewCollectiveProps) {
   const isDonating = maybeDonorCollective && maybeDonorCollective.flowRate !== '0';
 
   const [stopDonationModalVisible, setStopDonationModalVisible] = useState(false);
+  const [processingModalVisible, setProcessingModalVisible] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
 
   const handleStopDonation = useDeleteFlow(
     collective.address,
     maybeDonorCollective?.flowRate,
     (error) => setErrorMessage(error),
-    (value: boolean) => setStopDonationModalVisible(value)
+    (value: boolean) => setStopDonationModalVisible(value),
+    (value: boolean) => setProcessingModalVisible(value)
   );
 
   const { price: tokenPrice } = useGetTokenPrice('G$');
@@ -239,6 +242,7 @@ function ViewCollective({ collective }: ViewCollectiveProps) {
           message={errorMessage ?? ''}
         />
         <StopDonationModal openModal={stopDonationModalVisible} setOpenModal={setStopDonationModalVisible} />
+        <ProcessingModal openModal={processingModalVisible} />
       </View>
     );
   }

packages/app/src/components/modals/ProcessingModal.tsx

@@ -0,0 +1,123 @@
+import { Modal, StyleSheet, Text, View, Image, TouchableOpacity, Platform } from 'react-native';
+import { InterRegular, InterSemiBold } from '../../utils/webFonts';
+import { Colors } from '../../utils/colors';
+import { CloseIcon, ThankYouImg } from '../../assets';
+
+import { modalStyles } from '../shared';
+import { useEffect, useState } from 'react';
+
+interface ProcessingModalProps {
+  openModal: boolean;
+}
+
+const ProcessingModal = ({ openModal }: ProcessingModalProps) => {
+  const [isOpen, setOpenModal] = useState(openModal);
+  useEffect(() => {
+    setOpenModal(openModal);
+  }, [openModal]);
+  return (
+    <Modal style={styles.centeredView} animationType="slide" transparent={true} visible={isOpen}>
+      <View style={styles.centeredView}>
+        <View style={styles.modalView}>
+          <View style={modalStyles.modalCloseIconWrapper}>
+            <TouchableOpacity style={modalStyles.modalCloseIcon} onPress={() => setOpenModal(false)}>
+              <Image source={CloseIcon} style={styles.closeIcon} />
+            </TouchableOpacity>
+          </View>
+          <Text style={styles.title}>{`Your transaction is processing`}</Text>
+          <Text style={styles.paragraph}>{`You can close this window or wait`}</Text>
+
+          <Image source={ThankYouImg} alt="woman" style={styles.image} />
+          <TouchableOpacity style={styles.button} onPress={() => setOpenModal(false)}>
+            <Text style={styles.buttonText}>CLOSE</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 22,
+  },
+  modalView: {
+    maxWidth: '90%',
+    maxHeight: '90%',
+    // @ts-ignore
+    overflowY: Platform.select({
+      native: 'scroll',
+      default: 'auto',
+    }),
+    margin: 20,
+    backgroundColor: Colors.blue[100],
+    borderRadius: 20,
+    paddingTop: 24,
+    paddingHorizontal: 24,
+    paddingBottom: 40,
+    gap: 24,
+    alignItems: 'center',
+    shadowColor: Colors.black,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  title: {
+    fontSize: 30,
+    textAlign: 'center',
+    marginHorizontal: 0,
+    ...InterSemiBold,
+  },
+  paragraph: {
+    ...InterRegular,
+    fontSize: 18,
+    textAlign: 'center',
+    width: '100%',
+    lineHeight: 27,
+  },
+  image: {
+    alignSelf: 'center',
+    width: 286,
+    height: 214,
+  },
+  closeIcon: {
+    width: 24,
+    height: 24,
+    alignSelf: 'flex-end',
+  },
+
+  button: {
+    backgroundColor: Colors.orange[100],
+    width: '100%',
+    borderRadius: 30,
+    paddingTop: 12,
+    paddingBottom: 12,
+    gap: 8,
+    alignContent: 'center',
+  },
+  buttonText: {
+    ...InterSemiBold,
+    fontSize: 18,
+    textAlign: 'center',
+    alignSelf: 'center',
+    color: Colors.orange[300],
+  },
+  textStyle: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+});
+
+export default ProcessingModal;

packages/app/src/hooks/useContractCalls/useDeleteFlow.ts

@@ -3,28 +3,27 @@ import { SupportedNetwork, SupportedNetworkNames } from '../../models/constants'
 import { GoodCollectiveSDK } from '@gooddollar/goodcollective-sdk';
 import { useAccount, useNetwork } from 'wagmi';
 import { useEthersSigner } from '../useEthers';
-import useCrossNavigate from '../../routes/useCrossNavigate';
 import Decimal from 'decimal.js';
 import { printAndParseSupportError, validateConnection } from './util';
 
 export function useDeleteFlow(
   collective: string,
   flowRate: string | undefined,
   onError: (error: string) => void,
-  toggleStopDonationModal: (value: boolean) => void
+  toggleStopDonationModal: (value: boolean) => void,
+  toggleProcessingModal: (value: boolean) => void
 ) {
   const { address: maybeAddress } = useAccount();
   const { chain } = useNetwork();
   const maybeSigner = useEthersSigner({ chainId: chain?.id });
-  const { navigate } = useCrossNavigate();
 
   return useCallback(async () => {
     const validation = validateConnection(maybeAddress, chain?.id, maybeSigner);
     if (typeof validation === 'string') {
       onError(validation);
       return;
     }
-    const { address, chainId, signer } = validation;
+    const { chainId, signer } = validation;
 
     if (!flowRate || new Decimal(flowRate).toString() === '0') {
       onError('Flow rate must be greater than 0.');
@@ -38,13 +37,24 @@ export function useDeleteFlow(
       const sdk = new GoodCollectiveSDK(chainIdString, signer.provider, { network });
       toggleStopDonationModal(true);
       const tx = await sdk.deleteFlow(signer, collective, '0');
+      toggleStopDonationModal(false);
+      toggleProcessingModal(true);
       await tx.wait();
-      navigate(`/profile/${address}`);
+      toggleProcessingModal(false);
       return;
     } catch (error) {
       toggleStopDonationModal(false);
       const message = printAndParseSupportError(error);
       onError(message);
     }
-  }, [maybeAddress, chain?.id, collective, flowRate, navigate, onError, maybeSigner, toggleStopDonationModal]);
+  }, [
+    maybeAddress,
+    chain?.id,
+    collective,
+    flowRate,
+    onError,
+    maybeSigner,
+    toggleStopDonationModal,
+    toggleProcessingModal,
+  ]);
 }