fixed navigation for when donation is completed

GoodDollar · Jan 31, 2024 · bc1f725 · bc1f725
1 parent a07dbca
commit bc1f725
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 26 deletions.
diff --git a/packages/app/src/components/DonateComponent.tsx b/packages/app/src/components/DonateComponent.tsx
@@ -25,6 +25,7 @@ import { TransactionReceipt } from 'viem';
 import { useToken, useTokenList } from '../hooks/useTokenList';
 import { formatDecimalStringInput } from '../lib/formatDecimalStringInput';
 import ThankYouModal from './modals/ThankYouModal';
+import useCrossNavigate from '../routes/useCrossNavigate';
 
 interface DonateComponentProps {
   collective: IpfsCollective;
@@ -45,6 +46,12 @@ function DonateComponent({ collective }: DonateComponentProps) {
   const [approveSwapModalVisible, setApproveSwapModalVisible] = useState(false);
   const [thankYouModalVisible, setThankYouModalVisible] = useState(false);
 
+  const [isDonationComplete, setIsDonationComplete] = useState(false);
+  const { navigate } = useCrossNavigate();
+  if (isDonationComplete) {
+    navigate(`/profile/${address}`);
+  }
+
   const [currency, setCurrency] = useState<string>('G$');
   const [frequency, setFrequency] = useState<Frequency>(Frequency.OneTime);
   const [duration, setDuration] = useState(1);
@@ -87,6 +94,7 @@ function DonateComponent({ collective }: DonateComponentProps) {
     (error) => setErrorMessage(error),
     (value: boolean) => setCompleteDonationModalVisible(value),
     (value: boolean) => setThankYouModalVisible(value),
+    (value: boolean) => setIsDonationComplete(value),
     rawMinimumAmountOut,
     swapPath
   );
@@ -482,7 +490,7 @@ function DonateComponent({ collective }: DonateComponentProps) {
       <ErrorModal openModal={!!errorMessage} setOpenModal={onCloseErrorModal} message={errorMessage ?? ''} />
       <ApproveSwapModal openModal={approveSwapModalVisible} setOpenModal={setApproveSwapModalVisible} />
       <CompleteDonationModal openModal={completeDonationModalVisible} setOpenModal={setCompleteDonationModalVisible} />
-      <ThankYouModal openModal={thankYouModalVisible} setOpenModal={setThankYouModalVisible} collective={collective} />
+      <ThankYouModal openModal={thankYouModalVisible} address={address} collective={collective} />
     </View>
   );
 }

diff --git a/packages/app/src/components/modals/ThankYouModal.tsx b/packages/app/src/components/modals/ThankYouModal.tsx
@@ -3,15 +3,17 @@ import { InterRegular, InterSemiBold } from '../../utils/webFonts';
 import { Colors } from '../../utils/colors';
 import { ThankYouImg } from '../../assets';
 import { IpfsCollective } from '../../models/models';
+import useCrossNavigate from '../../routes/useCrossNavigate';
 
 interface ThankYouModalProps {
   openModal: boolean;
-  setOpenModal: (openModal: boolean) => void;
+  address?: `0x${string}`;
   collective: IpfsCollective;
 }
 
-const ThankYouModal = ({ openModal, setOpenModal, collective }: ThankYouModalProps) => {
-  const onClick = () => setOpenModal(false);
+const ThankYouModal = ({ openModal, address, collective }: ThankYouModalProps) => {
+  const { navigate } = useCrossNavigate();
+  const onClick = () => navigate(`/profile/${address}`);
 
   return (
     <Modal style={styles.centeredView} animationType="slide" transparent={true} visible={openModal}>

diff --git a/packages/app/src/hooks/useContractCalls/useContractCalls.tsx b/packages/app/src/hooks/useContractCalls/useContractCalls.tsx
@@ -21,6 +21,7 @@ export const useContractCalls = (
   onError: (error: string) => void,
   toggleCompleteDonationModal: (value: boolean) => void,
   toggleThankYouModal: (value: boolean) => void,
+  toggleIsDonationComplete: (value: boolean) => void,
   minReturnFromSwap?: string,
   swapPath?: string
 ): ContractCalls => {
@@ -34,7 +35,8 @@ export const useContractCalls = (
     frequency,
     onError,
     toggleCompleteDonationModal,
-    toggleThankYouModal
+    toggleThankYouModal,
+    toggleIsDonationComplete
   );
   const supportFlowWithSwap = useSupportFlowWithSwap(
     collective,
@@ -45,6 +47,7 @@ export const useContractCalls = (
     onError,
     toggleCompleteDonationModal,
     toggleThankYouModal,
+    toggleIsDonationComplete,
     minReturnFromSwap,
     swapPath
   );
@@ -54,15 +57,17 @@ export const useContractCalls = (
     decimalAmountIn,
     onError,
     toggleCompleteDonationModal,
-    toggleThankYouModal
+    toggleThankYouModal,
+    toggleIsDonationComplete
   );
   const supportSingleBatch = useSupportSingleBatch(
     collective,
     tokenIn.decimals,
     decimalAmountIn,
     onError,
     toggleCompleteDonationModal,
-    toggleThankYouModal
+    toggleThankYouModal,
+    toggleIsDonationComplete
   );
 
   return {

diff --git a/packages/app/src/hooks/useContractCalls/useSupportFlow.ts b/packages/app/src/hooks/useContractCalls/useSupportFlow.ts
@@ -15,20 +15,20 @@ export function useSupportFlow(
   frequency: Frequency,
   onError: (error: string) => void,
   toggleCompleteDonationModal: (value: boolean) => void,
-  toggleThankYouModal: (value: boolean) => void
+  toggleThankYouModal: (value: boolean) => void,
+  toggleIsDonationComplete: (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;
 
     const flowRate = calculateFlowRate(decimalAmountIn, duration, frequency, currencyDecimals);
     if (!flowRate) {
@@ -46,7 +46,7 @@ export function useSupportFlow(
       toggleCompleteDonationModal(false);
       toggleThankYouModal(true);
       await tx.wait();
-      navigate(`/profile/${address}`);
+      toggleIsDonationComplete(true);
       return;
     } catch (error) {
       toggleCompleteDonationModal(false);
@@ -66,6 +66,6 @@ export function useSupportFlow(
     toggleCompleteDonationModal,
     collective,
     toggleThankYouModal,
-    navigate,
+    toggleIsDonationComplete,
   ]);
 }
diff --git a/packages/app/src/hooks/useContractCalls/useSupportFlowWithSwap.ts b/packages/app/src/hooks/useContractCalls/useSupportFlowWithSwap.ts
@@ -19,21 +19,21 @@ export function useSupportFlowWithSwap(
   onError: (error: string) => void,
   toggleCompleteDonationModal: (value: boolean) => void,
   toggleThankYouModal: (value: boolean) => void,
+  toggleIsDonationComplete: (value: boolean) => void,
   minReturnFromSwap?: string,
   swapPath?: string
 ) {
   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 (!minReturnFromSwap || !swapPath) {
       onError('Swap route not ready.');
@@ -68,7 +68,7 @@ export function useSupportFlowWithSwap(
       toggleCompleteDonationModal(false);
       toggleThankYouModal(true);
       await tx.wait();
-      navigate(`/profile/${address}`);
+      toggleIsDonationComplete(true);
       return;
     } catch (error) {
       toggleCompleteDonationModal(false);
@@ -91,6 +91,6 @@ export function useSupportFlowWithSwap(
     toggleCompleteDonationModal,
     collective,
     toggleThankYouModal,
-    navigate,
+    toggleIsDonationComplete,
   ]);
 }
diff --git a/packages/app/src/hooks/useContractCalls/useSupportSingleBatch.ts b/packages/app/src/hooks/useContractCalls/useSupportSingleBatch.ts
@@ -14,20 +14,20 @@ export function useSupportSingleBatch(
   decimalAmountIn: number,
   onError: (error: string) => void,
   toggleCompleteDonationModal: (value: boolean) => void,
-  toggleThankYouModal: (value: boolean) => void
+  toggleThankYouModal: (value: boolean) => void,
+  toggleIsDonationComplete: (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;
 
     const chainIdString = chainId.toString() as `${SupportedNetwork}`;
     const network = SupportedNetworkNames[chainId as SupportedNetwork];
@@ -44,7 +44,7 @@ export function useSupportSingleBatch(
       toggleCompleteDonationModal(false);
       toggleThankYouModal(true);
       await tx.wait();
-      navigate(`/profile/${address}`);
+      toggleIsDonationComplete(true);
       return;
     } catch (error) {
       toggleCompleteDonationModal(false);
@@ -62,6 +62,6 @@ export function useSupportSingleBatch(
     toggleCompleteDonationModal,
     collective,
     toggleThankYouModal,
-    navigate,
+    toggleIsDonationComplete,
   ]);
 }
diff --git a/packages/app/src/hooks/useContractCalls/useSupportSingleTransferAndCall.ts b/packages/app/src/hooks/useContractCalls/useSupportSingleTransferAndCall.ts
@@ -14,20 +14,20 @@ export function useSupportSingleTransferAndCall(
   decimalAmountIn: number,
   onError: (error: string) => void,
   toggleCompleteDonationModal: (value: boolean) => void,
-  toggleThankYouModal: (value: boolean) => void
+  toggleThankYouModal: (value: boolean) => void,
+  toggleIsDonationComplete: (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;
 
     const chainIdString = chainId.toString() as `${SupportedNetwork}`;
     const network = SupportedNetworkNames[chainId as SupportedNetwork];
@@ -44,7 +44,7 @@ export function useSupportSingleTransferAndCall(
       toggleCompleteDonationModal(false);
       toggleThankYouModal(true);
       await tx.wait();
-      navigate(`/profile/${address}`);
+      toggleIsDonationComplete(true);
       return;
     } catch (error) {
       toggleCompleteDonationModal(false);
@@ -62,6 +62,6 @@ export function useSupportSingleTransferAndCall(
     toggleCompleteDonationModal,
     collective,
     toggleThankYouModal,
-    navigate,
+    toggleIsDonationComplete,
   ]);
 }