Hotfix - fix stellar doante card UI

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?",

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 () => {
@@ -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

@@ -9,18 +9,25 @@ 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';
 import { getChainName } from '@/lib/network';
 import { ChainType } from '@/types/config';
 import links from '@/lib/constants/links';
+import { slugToProjectDonate } from '@/lib/routeCreators';
 
 const DonateQFEligibleNetworks = () => {
 	const [showModal, setShowModal] = useState(false);
 	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,28 +52,54 @@ 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',
+					})}
+					<ExternalLink
+						href={slugToProjectDonate(project.slug)}
+						target='_blank'
+						color={brandColors.pinky[500]}
+						rel='noreferrer noopener'
+					>
+						<StyledCaption>
+							{
+								"Go back and make sure you're on the right network"
+							}
+						</StyledCaption>
+					</ExternalLink>
+				</MakeDonationDescription>
+			)}
+			{!isQRDonation && (
+				<ActionsRow $justifyContent='flex-start' $alignItems='center'>
+					<StyledCaption onClick={() => setShowModal(true)}>
+						{formatMessage({ id: 'label.switch_network' })}
 					</StyledCaption>
-					<IconExternalLink16 />
-				</ExternalLink>
-			</ActionsRow>
-			{showModal && (
+					<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 +136,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,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,
@@ -136,20 +141,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 +338,9 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
 							<UsdAmountCard>$ {usdAmount}</UsdAmountCard>
 						</QRDonationInput>
 					</StyledInputWrapper>
+					{hasActiveQFRound && isQRDonation && (
+						<DonateQFEligibleNetworks />
+					)}
 					<CardBottom>
 						<FlexStyled
 							$justifyContent='space-between'