Merge pull request #4285 from Giveth/show-qf-related-component-on-rec…

…urring-donation

Show qf related component on recurring donation

src/components/views/donate/DonateIndex.tsx

@@ -12,6 +12,7 @@ import {
 } from '@giveth/ui-design-system';
 import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
+import { useAccount } from 'wagmi';
 import SocialBox from '../../DonateSocialBox';
 import NiceBanner from './NiceBanner';
 // import PurchaseXDAI from './PurchaseXDAIBanner';
@@ -31,6 +32,7 @@ import QFSection from '../project/projectActionCard/QFSection';
 import ProjectCardImage from '@/components/project-card/ProjectCardImage';
 import { useGeneralWallet } from '@/providers/generalWalletProvider';
 import { DonatePageProjectDescription } from './DonatePageProjectDescription';
+import { getActiveRound } from '@/helpers/qf';
 
 const DonateIndex: FC = () => {
 	const { formatMessage } = useIntl();
@@ -41,6 +43,7 @@ const DonateIndex: FC = () => {
 	const isSafeEnv = useIsSafeEnvironment();
 	const { isOnSolana } = useGeneralWallet();
 	const router = useRouter();
+	const { chainId } = useAccount();
 
 	useEffect(() => {
 		dispatch(setShowHeader(false));
@@ -50,6 +53,9 @@ const DonateIndex: FC = () => {
 	}, [dispatch]);
 
 	const isRecurringTab = router.query.tab?.toString() === ETabs.RECURRING;
+	const { activeStartedRound } = getActiveRound(project.qfRounds);
+	const isOnEligibleNetworks =
+		chainId && activeStartedRound?.eligibleNetworks?.includes(chainId);
 
 	return successDonation ? (
 		<>
@@ -86,15 +92,16 @@ const DonateIndex: FC = () => {
 							<ImageWrapper>
 								<ProjectCardImage image={project.image} />
 							</ImageWrapper>
-							{!isMobile &&
-							!isRecurringTab &&
-							hasActiveQFRound ? (
-								<QFSection projectData={project} />
-							) : (
-								<DonatePageProjectDescription
-									projectData={project}
-								/>
-							)}
+							{!isMobile ? (
+								(!isRecurringTab && hasActiveQFRound) ||
+								(isRecurringTab && isOnEligibleNetworks) ? (
+									<QFSection projectData={project} />
+								) : (
+									<DonatePageProjectDescription
+										projectData={project}
+									/>
+								)
+							) : null}
 						</InfoWrapper>
 					</Col>
 				</Row>

src/components/views/donate/DonateModal.tsx

@@ -183,6 +183,7 @@ const DonateModal: FC<IDonateModalProps> = props => {
 			setSuccessDonation({
 				txHash: txHashArray,
 				givBackEligible,
+				chainId,
 			});
 		}, 4000);
 	};

src/components/views/donate/RecurringDonationModal/RecurringDonationModal.tsx

@@ -452,16 +452,16 @@ const RecurringDonationInnerModal: FC<IRecurringDonationInnerModalProps> = ({
 							{ txHash: tx.hash, chainType: ChainType.EVM },
 							{ txHash: tx.hash, chainType: ChainType.EVM },
 						],
-						excludeFromQF: true,
 						isRecurring: true,
 						givBackEligible: true,
+						chainId: config.OPTIMISM_NETWORK_NUMBER,
 					});
 				} else {
 					setSuccessDonation({
 						txHash: [{ txHash: tx.hash, chainType: ChainType.EVM }],
-						excludeFromQF: true,
 						isRecurring: true,
 						givBackEligible: true,
+						chainId: config.OPTIMISM_NETWORK_NUMBER,
 					});
 				}
 			}

src/components/views/donate/SuccessView.tsx

@@ -12,7 +12,6 @@ import {
 import React, { FC, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { useAccount } from 'wagmi';
 import ExternalLink from '@/components/ExternalLink';
 import { client } from '@/apollo/apolloClient';
 import { FETCH_GIVETH_PROJECT_BY_ID } from '@/apollo/gql/gqlProjects';
@@ -38,6 +37,7 @@ export const SuccessView: FC = () => {
 	const {
 		givBackEligible,
 		txHash = [],
+		chainId,
 		excludeFromQF,
 		isRecurring,
 	} = successDonation || {};
@@ -49,9 +49,6 @@ export const SuccessView: FC = () => {
 		info: { passportState },
 	} = usePassport();
 
-	const { chain } = useAccount();
-	const networkId = chain?.id;
-
 	const message = hasMultipleTxs ? (
 		<>
 			{formatMessage(
@@ -70,7 +67,7 @@ export const SuccessView: FC = () => {
 	const { activeStartedRound } = getActiveRound(project.qfRounds);
 
 	const isOnEligibleNetworks =
-		networkId && activeStartedRound?.eligibleNetworks?.includes(networkId);
+		chainId && activeStartedRound?.eligibleNetworks?.includes(chainId);
 
 	useEffect(() => {
 		if (!hasMultipleTxs) return;

src/context/donate.context.tsx

@@ -22,6 +22,7 @@ export interface TxHashWithChainType {
 }
 interface ISuccessDonation {
 	txHash: TxHashWithChainType[];
+	chainId: number;
 	givBackEligible?: boolean;
 	excludeFromQF?: boolean;
 	isRecurring?: boolean;