Fix Stellar donation card ui things regarding QF

related to #4732
Giveth · Sep 15, 2024 · 168889c · 168889c
1 parent 5894a46
commit 168889c
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 8 deletions.
diff --git a/lang/en.json b/lang/en.json
@@ -179,6 +179,7 @@
 	"label.archive_donation": "Archive donation",
 	"label.archive_stream": "Archive Stream",
 	"label.are_eligible_to_be_matched": "are eligible to be matched.",
+	"label.stellar_is_not_eligible_for_matching": "Stellar is not eligible for this round.\nGo back and make sure you're on the right network.",
 	"label.are_you_sure": "Are you sure?",
 	"label.ask_us_a_question": "Ask us a Question",
 	"label.ask_us_a_question.caption": "Do you have a specific question or a general inquiry that requires a response?",

diff --git a/src/components/views/donate/DonateIndex.tsx b/src/components/views/donate/DonateIndex.tsx
@@ -78,6 +78,9 @@ const DonateIndex: FC = () => {
 	const [showQRCode, setShowQRCode] = React.useState(
 		!!router.query.draft_donation,
 	);
+	const [isQRDonation, _setIsQRDonation] = useState(
+		router.query.chain === ChainType.STELLAR.toLowerCase(),
+	);
 	const [stopTimer, setStopTimer] = React.useState<void | (() => void)>();
 
 	useEffect(() => {
@@ -238,9 +241,10 @@ const DonateIndex: FC = () => {
 						</SublineBold>
 					</AlreadyDonatedWrapper>
 				)}
-				{!isSafeEnv && hasActiveQFRound && !isOnSolana && (
-					<PassportBanner />
-				)}
+				{!isSafeEnv &&
+					hasActiveQFRound &&
+					!isOnSolana &&
+					!isQRDonation && <PassportBanner />}
 				<NiceBanner />
 				<Row>
 					<Col xs={12} lg={6}>
@@ -268,6 +272,7 @@ const DonateIndex: FC = () => {
 									{!isMobile ? (
 										(!isRecurringTab && hasActiveQFRound) ||
 										(isRecurringTab &&
+											!isQRDonation &&
 											isOnEligibleNetworks) ? (
 											<QFSection projectData={project} />
 										) : (

diff --git a/src/components/views/donate/OnTime/DonateQFEligibleNetworks.tsx b/src/components/views/donate/OnTime/DonateQFEligibleNetworks.tsx
@@ -9,6 +9,7 @@ import {
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
+import { useRouter } from 'next/router';
 import SwitchNetwork from '@/components/modals/SwitchNetwork';
 import { useDonateData } from '@/context/donate.context';
 import { getActiveRound } from '@/helpers/qf';
@@ -21,6 +22,11 @@ const DonateQFEligibleNetworks = () => {
 	const { project } = useDonateData();
 	const { formatMessage } = useIntl();
 
+	const router = useRouter();
+	const [isQRDonation, setIsQRDonation] = useState(
+		router.query.chain === ChainType.STELLAR.toLowerCase(),
+	);
+
 	const { activeStartedRound } = getActiveRound(project.qfRounds);
 
 	const eligibleChainNames = activeStartedRound?.eligibleNetworks.map(
@@ -45,11 +51,23 @@ const DonateQFEligibleNetworks = () => {
 					})}
 				</Flex>
 			</MakeDonationTitle>
-			<MakeDonationDescription>
-				{formatMessage({ id: 'label.donations_made_on' })}
-				&nbsp;<BoldCaption>{chainsString}</BoldCaption>&nbsp;
-				{formatMessage({ id: 'label.are_eligible_to_be_matched' })}
-			</MakeDonationDescription>
+			{!isQRDonation && (
+				<MakeDonationDescription>
+					{formatMessage({ id: 'label.donations_made_on' })}
+					&nbsp;<BoldCaption>{chainsString}</BoldCaption>&nbsp;
+					{formatMessage({ id: 'label.are_eligible_to_be_matched' })}
+				</MakeDonationDescription>
+			)}
+			{isQRDonation && (
+				<MakeDonationDescription>
+					{formatMessage({ id: 'label.donations_made_on' })}
+					&nbsp;<BoldCaption>{chainsString}</BoldCaption>&nbsp;
+					{formatMessage({ id: 'label.are_eligible_to_be_matched' })}
+					{formatMessage({
+						id: 'label.stellar_is_not_eligible_for_matching',
+					})}
+				</MakeDonationDescription>
+			)}
 			<ActionsRow $justifyContent='flex-start' $alignItems='center'>
 				<StyledCaption onClick={() => setShowModal(true)}>
 					{formatMessage({ id: 'label.switch_network' })}

diff --git a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx
@@ -39,6 +39,7 @@ import InlineToast, { EToastType } from '@/components/toasts/InlineToast';
 import { useAppSelector } from '@/features/hooks';
 import { useModalCallback } from '@/hooks/useModalCallback';
 import links from '@/lib/constants/links';
+import DonateQFEligibleNetworks from '@/components/views/donate/OnTime/DonateQFEligibleNetworks';
 
 interface QRDonationCardProps extends IDonationCardProps {
 	qrAcceptedTokens: IProjectAcceptedToken[];
@@ -62,13 +63,17 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
 	const { formatMessage } = useIntl();
 	const router = useRouter();
 	const { isSignedIn, isEnabled } = useAppSelector(state => state.user);
+	const [isQRDonation, _setIsQRDonation] = useState(
+		router.query.chain === ChainType.STELLAR.toLowerCase(),
+	);
 	const [showDonateModal, setShowDonateModal] = useState(false);
 	const { modalCallback: signInThenDonate } = useModalCallback(() =>
 		setShowDonateModal(true),
 	);
 
 	const {
 		project,
+		hasActiveQFRound,
 		setQRDonationStatus,
 		setDraftDonationData,
 		setPendingDonationExists,
@@ -311,6 +316,9 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
 							<UsdAmountCard>$ {usdAmount}</UsdAmountCard>
 						</QRDonationInput>
 					</StyledInputWrapper>
+					{hasActiveQFRound && isQRDonation && (
+						<DonateQFEligibleNetworks />
+					)}
 					<CardBottom>
 						<FlexStyled
 							$justifyContent='space-between'