diff --git a/packages/app/src/components/DonateComponent.tsx b/packages/app/src/components/DonateComponent.tsx index 89d45cb..86bbc82 100644 --- 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('G$'); const [frequency, setFrequency] = useState(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) { - + ); } diff --git a/packages/app/src/components/modals/ThankYouModal.tsx b/packages/app/src/components/modals/ThankYouModal.tsx index 3180723..d1cb977 100644 --- 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 ( diff --git a/packages/app/src/hooks/useContractCalls/useContractCalls.tsx b/packages/app/src/hooks/useContractCalls/useContractCalls.tsx index f4ac5e6..be1c71e 100644 --- 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,7 +57,8 @@ export const useContractCalls = ( decimalAmountIn, onError, toggleCompleteDonationModal, - toggleThankYouModal + toggleThankYouModal, + toggleIsDonationComplete ); const supportSingleBatch = useSupportSingleBatch( collective, @@ -62,7 +66,8 @@ export const useContractCalls = ( 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 index 37d7ea9..c030663 100644 --- a/packages/app/src/hooks/useContractCalls/useSupportFlow.ts +++ b/packages/app/src/hooks/useContractCalls/useSupportFlow.ts @@ -15,12 +15,12 @@ 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); @@ -28,7 +28,7 @@ export function useSupportFlow( 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 index 9d168a3..14118f8 100644 --- a/packages/app/src/hooks/useContractCalls/useSupportFlowWithSwap.ts +++ b/packages/app/src/hooks/useContractCalls/useSupportFlowWithSwap.ts @@ -19,13 +19,13 @@ 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); @@ -33,7 +33,7 @@ export function useSupportFlowWithSwap( 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 index d4fbc17..7ef3a60 100644 --- a/packages/app/src/hooks/useContractCalls/useSupportSingleBatch.ts +++ b/packages/app/src/hooks/useContractCalls/useSupportSingleBatch.ts @@ -14,12 +14,12 @@ 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); @@ -27,7 +27,7 @@ export function useSupportSingleBatch( 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 index 261df1b..028aae4 100644 --- a/packages/app/src/hooks/useContractCalls/useSupportSingleTransferAndCall.ts +++ b/packages/app/src/hooks/useContractCalls/useSupportSingleTransferAndCall.ts @@ -14,12 +14,12 @@ 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); @@ -27,7 +27,7 @@ export function useSupportSingleTransferAndCall( 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, ]); }