Hotfix - fix stellar doante card UI

lang/ca.json

@@ -277,6 +277,8 @@
 	"label.contributors": "{count, plural, one {contribuïdor} other {contribuïdors}}",
 	"label.conviction_voting": "Votació per convicció",
 	"label.copied": "Copiat!",
+	"label.go_back_and_check_network": "Torna enrere i assegura't que estàs a la xarxa correcta.",
+	"label.stellar_is_not_eligible_for_matching": "Stellar no és elegible per aquesta ronda.",
 	"label.copy_link": "Copiar enllaç",
 	"label.covenant": "conveni",
 	"label.created_at": "Creat el",
@@ -1302,7 +1304,7 @@
 	"label.passport_connected": "Passaport connectat",
 	"label.increase_passport_score": "Augmenta la puntuació del passaport",
 	"label.project_owner_address_detected": "Adreça del propietari del projecte detectada",
-    "label.project_owner_cant_donate_to_own_project": "No pots donar a un projecte del qual ets propietari. Hi ha milers de projectes a Giveth que busquen el teu suport! Si us plau, tria un altre projecte per donar.",
+	"label.project_owner_cant_donate_to_own_project": "No pots donar a un projecte del qual ets propietari. Hi ha milers de projectes a Giveth que busquen el teu suport! Si us plau, tria un altre projecte per donar.",
 	"label.qf_donor_eligibility.banner.check_eligibility": "Fes que les teves donacions es igualin! Verifica la teva unicitat amb un clic.",
 	"label.qf_donor_eligibility.banner.recheck_eligibility": "Fes que les teves donacions es igualin! Augmenta la teva puntuació de Gitcoin Passport abans de",
 	"label.qf_donor_eligibility.banner.more_info_needed": "Necessitem una mica més d'informació per verificar la teva elegibilitat per QF!",
@@ -1627,7 +1629,8 @@
 	"project.givback_toast.description.non_verified_public": "Actualment, els GIVbacks només s'atorguen per donacions fetes a projectes elegibles per a GIVbacks a Ethereum. La teva contribució segueix sent important, fins i tot si no genera GIVbacks!",
 	"project.givback_toast.description.verified_owner": "Impulsa el teu projecte per augmentar la quantitat de GIVbacks que reben els teus donants a Ethereum i augmentar la seva visibilitat entre altres projectes.",
 	"project.givback_toast.description.verified_owner.note": "Com a propietari d'aquest projecte, no rebràs GIVbacks per donar-hi.",
-	"project.givback_toast.description.verified_public": "Les donacions a Ethereum a projectes elegibles per a GIVbacks són recompensades amb GIV. Impulsa aquest projecte per augmentar el seu percentatge de recompenses i fer-lo més visible a la pàgina de projectes!",	"project.givback_toast.title.non_verified_owner": "El teu projecte està creant o donant suport a béns públics?",
+	"project.givback_toast.description.verified_public": "Les donacions a Ethereum a projectes elegibles per a GIVbacks són recompensades amb GIV. Impulsa aquest projecte per augmentar el seu percentatge de recompenses i fer-lo més visible a la pàgina de projectes!",
+	"project.givback_toast.title.non_verified_owner": "El teu projecte està creant o donant suport a béns públics?",
 	"project.givback_toast.title.non_verified_owner_cancelled": "Estat Cancel·lat",
 	"project.givback_toast.title.non_verified_owner_deactive": "Mode Desactivat",
 	"project.givback_toast.title.non_verified_owner_draft": "Publica el teu projecte avui!",
@@ -1699,4 +1702,4 @@
 	"label.devouch.if_you_are_eligible": "Si ets un verificador elegible de Giveth, pots avalar la legitimitat d'aquest projecte, potencialment augmentant els beneficis que rep a Giveth.",
 	"label.devouch.learn_more_about_devouch": "Més informació sobre DeVouch i la verificació descentralitzada",
 	"label.devouch.attest_on_devouch": "Certifica a DeVouch"
-}
+}

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.",
 	"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?",
@@ -337,6 +338,7 @@
 	"label.donations": "Donations",
 	"label.donations_and_projects": "Donations & Projects",
 	"label.donations_made_on": "Donations made on",
+	"label.go_back_and_check_network": "Go back and make sure you're on the right network.",
 	"label.donations_received": "Donations Received",
 	"label.donation_finalized": "Donation Finalized!",
 	"label.donation_submitted": "Donation submitted",
@@ -1707,4 +1709,4 @@
 	"label.devouch.if_you_are_eligible": "If you are an eligible Giveth Verifier you can vouch for this project's legitimacy, potentially increasing the benefits it receives on Giveth.",
 	"label.devouch.learn_more_about_devouch": "Learn more about DeVouch & Decentralized Verification",
 	"label.devouch.attest_on_devouch": "Attest on Devouch"
-}
+}

lang/es.json

@@ -338,6 +338,8 @@
 	"label.donations": "Donaciones",
 	"label.donations_and_projects": "Donaciones & Proyectos",
 	"label.donations_made_on": "Donaciones realizadas el",
+	"label.go_back_and_check_network": "Vuelve atrás y asegúrate de que estás en la red correcta.",
+	"label.stellar_is_not_eligible_for_matching": "Stellar no es elegible para esta ronda.",
 	"label.donations_received": "Donaciones Recibidas",
 	"label.donation_finalized": "¡Donación finalizada!",
 	"label.donation_submitted": "Donación enviada",
@@ -1705,4 +1707,4 @@
 	"label.devouch.if_you_are_eligible": "Si eres un verificador elegible de Giveth, puedes avalar la legitimidad de este proyecto, potencialmente aumentando los beneficios que recibe en Giveth.",
 	"label.devouch.learn_more_about_devouch": "Más información sobre DeVouch y la verificación descentralizada",
 	"label.devouch.attest_on_devouch": "Certificar en DeVouch"
-}
+}

src/components/views/donate/DonateIndex.tsx

@@ -80,6 +80,8 @@ const DonateIndex: FC = () => {
 	);
 	const [stopTimer, setStopTimer] = React.useState<void | (() => void)>();
 
+	const isQRDonation = router.query.chain === ChainType.STELLAR.toLowerCase();
+
 	useEffect(() => {
 		dispatch(setShowHeader(false));
 		return () => {
@@ -228,7 +230,7 @@ const DonateIndex: FC = () => {
 						}
 					/>
 				)}
-				{alreadyDonated && (
+				{alreadyDonated && !isQRDonation && (
 					<AlreadyDonatedWrapper>
 						<IconDonation24 />
 						<SublineBold>
@@ -238,9 +240,10 @@ const DonateIndex: FC = () => {
 						</SublineBold>
 					</AlreadyDonatedWrapper>
 				)}
-				{!isSafeEnv && hasActiveQFRound && !isOnSolana && (
-					<PassportBanner />
-				)}
+				{!isSafeEnv &&
+					hasActiveQFRound &&
+					!isOnSolana &&
+					!isQRDonation && <PassportBanner />}
 				<NiceBanner />
 				<Row>
 					<Col xs={12} lg={6}>
@@ -266,7 +269,9 @@ const DonateIndex: FC = () => {
 										/>
 									</ImageWrapper>
 									{!isMobile ? (
-										(!isRecurringTab && hasActiveQFRound) ||
+										(!isQRDonation &&
+											!isRecurringTab &&
+											hasActiveQFRound) ||
 										(isRecurringTab &&
 											isOnEligibleNetworks) ? (
 											<QFSection projectData={project} />

src/components/views/donate/OnTime/DonateQFEligibleNetworks.tsx

@@ -6,21 +6,31 @@ import {
 	neutralColors,
 	Flex,
 } from '@giveth/ui-design-system';
-import React, { useState } from 'react';
+import React, { FC, 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';
 import { getChainName } from '@/lib/network';
 import { ChainType } from '@/types/config';
 import links from '@/lib/constants/links';
 
-const DonateQFEligibleNetworks = () => {
+type TDonateQFEligibleNetworksProps = {
+	goBack?: () => void;
+};
+
+const DonateQFEligibleNetworks: FC<TDonateQFEligibleNetworksProps> = ({
+	goBack,
+}) => {
 	const [showModal, setShowModal] = useState(false);
 	const { project } = useDonateData();
 	const { formatMessage } = useIntl();
 
+	const router = useRouter();
+	const isQRDonation = router.query.chain === ChainType.STELLAR.toLowerCase();
+
 	const { activeStartedRound } = getActiveRound(project.qfRounds);
 
 	const eligibleChainNames = activeStartedRound?.eligibleNetworks.map(
@@ -35,6 +45,10 @@ const DonateQFEligibleNetworks = () => {
 
 	const chainsString = eligibleChainNames?.join(' & ');
 
+	const goBackToNetworkSelection = () => {
+		goBack?.();
+	};
+
 	return (
 		<Container>
 			<MakeDonationTitle>
@@ -45,28 +59,50 @@ 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>
-			<ActionsRow $justifyContent='flex-start' $alignItems='center'>
-				<StyledCaption onClick={() => setShowModal(true)}>
-					{formatMessage({ id: 'label.switch_network' })}
-				</StyledCaption>
-				<Divider />
-				<ExternalLink
-					href={links.ACROSS_BRIDGE}
-					target='_blank'
-					rel='noreferrer noopener'
-				>
-					<StyledCaption>
-						{formatMessage({ id: 'label.bridge_tokens' })}
+			{!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',
+					})}
+					<StyledCaption
+						onClick={() => goBackToNetworkSelection()}
+						style={{ marginTop: '4px' }}
+					>
+						{formatMessage({
+							id: 'label.go_back_and_check_network',
+						})}
 					</StyledCaption>
-					<IconExternalLink16 />
-				</ExternalLink>
-			</ActionsRow>
-			{showModal && (
+				</MakeDonationDescription>
+			)}
+			{!isQRDonation && (
+				<ActionsRow $justifyContent='flex-start' $alignItems='center'>
+					<StyledCaption onClick={() => setShowModal(true)}>
+						{formatMessage({ id: 'label.switch_network' })}
+					</StyledCaption>
+					<Divider />
+					<ExternalLink
+						href={links.ACROSS_BRIDGE}
+						target='_blank'
+						rel='noreferrer noopener'
+					>
+						<StyledCaption>
+							{formatMessage({ id: 'label.bridge_tokens' })}
+						</StyledCaption>
+						<IconExternalLink16 />
+					</ExternalLink>
+				</ActionsRow>
+			)}
+			{!isQRDonation && showModal && (
 				<SwitchNetwork
 					setShowModal={setShowModal}
 					customNetworks={eligibleNetworksWithChainType}
@@ -103,6 +139,8 @@ const BoldCaption = styled(Caption)`
 
 const StyledCaption = styled(Caption)`
 	cursor: pointer;
+	color: ${brandColors
+		.pinky[500]} !important; // Match this to the other link's color
 `;
 
 const ActionsRow = styled(Flex)`

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,15 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
 	const { formatMessage } = useIntl();
 	const router = useRouter();
 	const { isSignedIn, isEnabled } = useAppSelector(state => state.user);
-	const [showDonateModal, setShowDonateModal] = useState(false);
+	const isQRDonation = router.query.chain === ChainType.STELLAR.toLowerCase();
+	const [_showDonateModal, setShowDonateModal] = useState(false);
 	const { modalCallback: signInThenDonate } = useModalCallback(() =>
 		setShowDonateModal(true),
 	);
 
 	const {
 		project,
+		hasActiveQFRound,
 		setQRDonationStatus,
 		setDraftDonationData,
 		setPendingDonationExists,
@@ -136,20 +139,42 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
 	}, [draftDonationId]);
 
 	const goBack = async () => {
+		const prevQuery = router.query;
+
+		const updateQuery = (excludeKey: string) =>
+			Object.keys(prevQuery).reduce((acc, key) => {
+				return key !== excludeKey
+					? { ...acc, [key]: prevQuery[key] }
+					: acc;
+			}, {});
+
 		if (showQRCode) {
 			const draftDonation =
 				await checkDraftDonationStatus(draftDonationId);
+
 			if (draftDonation?.status === 'matched') {
 				setQRDonationStatus('success');
 				setDraftDonationData(draftDonation);
 				return;
 			}
+
 			await markDraftDonationAsFailed(draftDonationId);
 			setPendingDonationExists?.(false);
 			setShowQRCode(false);
+
+			await router.push(
+				{ query: updateQuery('draft_donation') },
+				undefined,
+				{ shallow: true },
+			);
 		} else {
 			setIsQRDonation(false);
+
+			await router.push({ query: updateQuery('chain') }, undefined, {
+				shallow: true,
+			});
 		}
+
 		setQRDonationStatus('waiting');
 	};
 
@@ -311,6 +336,9 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
 							<UsdAmountCard>$ {usdAmount}</UsdAmountCard>
 						</QRDonationInput>
 					</StyledInputWrapper>
+					{hasActiveQFRound && isQRDonation && (
+						<DonateQFEligibleNetworks goBack={goBack} />
+					)}
 					<CardBottom>
 						<FlexStyled
 							$justifyContent='space-between'