From 0cface8e85affae779d0b0e37e6275bc1ff686b3 Mon Sep 17 00:00:00 2001 From: sirpy Date: Tue, 1 Oct 2024 18:39:28 +0300 Subject: [PATCH] add: Bug: after stopping donation modal stays #215 --- .../app/src/components/ViewCollective.tsx | 6 +- .../src/components/modals/ProcessingModal.tsx | 123 ++++++++++++++++++ .../hooks/useContractCalls/useDeleteFlow.ts | 22 +++- 3 files changed, 144 insertions(+), 7 deletions(-) create mode 100644 packages/app/src/components/modals/ProcessingModal.tsx diff --git a/packages/app/src/components/ViewCollective.tsx b/packages/app/src/components/ViewCollective.tsx index 0eb4b330..83e9242a 100644 --- a/packages/app/src/components/ViewCollective.tsx +++ b/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(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 ?? ''} /> + ); } diff --git a/packages/app/src/components/modals/ProcessingModal.tsx b/packages/app/src/components/modals/ProcessingModal.tsx new file mode 100644 index 00000000..a6bb86de --- /dev/null +++ b/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 ( + + + + + setOpenModal(false)}> + + + + {`Your transaction is processing`} + {`You can close this window or wait`} + + woman + setOpenModal(false)}> + CLOSE + + + + + ); +}; + +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; diff --git a/packages/app/src/hooks/useContractCalls/useDeleteFlow.ts b/packages/app/src/hooks/useContractCalls/useDeleteFlow.ts index 11c1d18a..f3da92d6 100644 --- a/packages/app/src/hooks/useContractCalls/useDeleteFlow.ts +++ b/packages/app/src/hooks/useContractCalls/useDeleteFlow.ts @@ -3,7 +3,6 @@ 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'; @@ -11,12 +10,12 @@ 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); @@ -24,7 +23,7 @@ export function useDeleteFlow( 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, + ]); }