Donate page new design

lang/ca.json

@@ -1238,7 +1238,7 @@
 	"page.project.we_are_supporting_stellar": "Aquest projecte admet donacions en Stellar",
 	"page.project.you_can_try_donating": "Prova de fer donacions utilitzant la Xarxa Stellar.",
 	"page.project.donate_with_stellar": "Dona amb Stellar",
-	"label.try_donating_wuth_stellar": "Prova de donar amb Stellar.",
+	"label.try_donating_with_stellar": "Prova de donar amb Stellar. No cal que connecteu la vostra cartera.",
 	"label.check_donations": "Comprova les donacions",
 	"label.check_donation": "Comprova la donació",
 	"error.enter_amount": "La quantitat ha de ser superior a 0",

lang/en.json

@@ -1242,7 +1242,7 @@
 	"page.project.we_are_supporting_stellar": "This Project supports Donations on Stellar",
 	"page.project.you_can_try_donating": "Try out making donations using the Stellar Network.",
 	"page.project.donate_with_stellar": "Donate with Stellar",
-	"label.try_donating_wuth_stellar": "Try donating with Stellar.",
+	"label.try_donating_with_stellar": "Try donating with Stellar. You don’t need to connect your wallet.",
 	"label.check_donations": "View Donation Receipt",
 	"label.check_donation": "View Donation",
 	"error.enter_amount": "Amount must be greater than 0",

lang/es.json

@@ -1237,7 +1237,7 @@
 	"page.project.we_are_supporting_stellar": "Este proyecto admite donaciones en Stellar",
 	"page.project.you_can_try_donating": "Prueba a hacer donaciones usando la Red Stellar.",
 	"page.project.donate_with_stellar": "Dona con Stellar",
-	"label.try_donating_wuth_stellar": "Intenta donar con Stellar.",
+	"label.try_donating_with_stellar": "Intenta donar con Stellar. No necesitas conectar tu billetera.",
 	"label.check_donations": "Verificar donaciones",
 	"label.check_donation": "Verificar donación",
 	"error.enter_amount": "La cantidad debe ser mayor que 0",

src/components/views/donate/DonateToGiveth.tsx

@@ -15,6 +15,8 @@ import { IconWithTooltip } from '@/components/IconWithToolTip';
 import Input, { InputSize } from '@/components/Input';
 import { InputSuffix } from '@/components/styled-components/Input';
 import CheckBox from '@/components/Checkbox';
+import { useGeneralWallet } from '@/providers/generalWalletProvider';
+import { useDonateData } from '@/context/donate.context';
 
 interface IDonateToGiveth {
 	donationToGiveth: number;
@@ -33,6 +35,10 @@ const DonateToGiveth: FC<IDonateToGiveth> = ({
 }) => {
 	const { formatMessage } = useIntl();
 
+	const { selectedOneTimeToken } = useDonateData();
+
+	const { isConnected } = useGeneralWallet();
+
 	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
 		const newPercentage = +e.target.value;
 		if (isNaN(newPercentage) || newPercentage < 0 || newPercentage > 90)
@@ -45,13 +51,13 @@ const DonateToGiveth: FC<IDonateToGiveth> = ({
 	};
 
 	// If givethDonationAmount props provided check if it's 0 and set donationToGiveth to 0
-	// because we disabled percetange amount for minimal allowed main donation amount
+	// because we disabled percentage amount for minimal allowed main donation amount
 	if (givethDonationAmount !== undefined) {
 		donationToGiveth = givethDonationAmount === 0 ? 0 : donationToGiveth;
 	}
 
 	return (
-		<Container>
+		<Container disabled={!isConnected || !selectedOneTimeToken}>
 			<Flex $alignItems='center' gap='4px'>
 				<Caption $medium>{title}</Caption>
 				<IconWithTooltip icon={<IconHelpFilled16 />} direction='top'>
@@ -137,8 +143,9 @@ const Options = styled(Flex)`
 	gap: 8px;
 `;
 
-const Container = styled.div`
+const Container = styled.div<{ disabled?: boolean }>`
 	margin: 16px 0 13px;
+	opacity: ${props => (props.disabled ? 0.4 : 1)};
 `;
 
 export default DonateToGiveth;

src/components/views/donate/DonationCard.tsx

@@ -1,10 +1,18 @@
-import { B, P, neutralColors, Flex } from '@giveth/ui-design-system';
-import { FC, useState, useEffect } from 'react';
+import {
+	B,
+	P,
+	neutralColors,
+	Flex,
+	SublineBold,
+	brandColors,
+} from '@giveth/ui-design-system';
+import React, { FC, useState, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
 import { isAddress } from 'viem';
 import { captureException } from '@sentry/nextjs';
+import Image from 'next/image';
 import { Shadow } from '@/components/styled-components/Shadow';
 import { RecurringDonationCard } from './Recurring/RecurringDonationCard';
 import OneTimeDonationCard from './OnTime/OneTimeDonationCard';
@@ -66,6 +74,24 @@ export const DonationCard: FC<IDonationCardProps> = ({
 
 	const disableRecurringDonations = organization?.disableRecurringDonations;
 
+	const hasStellarAddress = addresses?.some(
+		address => address.chainType === ChainType.STELLAR,
+	);
+
+	const handleQRDonation = () => {
+		setIsQRDonation(true);
+		router.push(
+			{
+				query: {
+					...router.query,
+					chain: ChainType.STELLAR.toLowerCase(),
+				},
+			},
+			undefined,
+			{ shallow: true },
+		);
+	};
+
 	useEffect(() => {
 		client
 			.query({
@@ -106,6 +132,19 @@ export const DonationCard: FC<IDonationCardProps> = ({
 		<DonationCardWrapper>
 			{!isQRDonation ? (
 				<>
+					{hasStellarAddress && (
+						<QRToastLink onClick={handleQRDonation}>
+							<Image
+								src='/images/logo/stellar.svg'
+								alt='stellar'
+								width={24}
+								height={24}
+							/>
+							{formatMessage({
+								id: 'label.try_donating_with_stellar',
+							})}
+						</QRToastLink>
+					)}
 					<Title id='donation-visit'>
 						{formatMessage({
 							id: 'label.how_do_you_want_to_donate',
@@ -180,7 +219,6 @@ export const DonationCard: FC<IDonationCardProps> = ({
 					<TabWrapper>
 						{tab === ETabs.ONE_TIME && (
 							<OneTimeDonationCard
-								setIsQRDonation={setIsQRDonation}
 								acceptedTokens={acceptedTokens}
 							/>
 						)}
@@ -199,20 +237,36 @@ export const DonationCard: FC<IDonationCardProps> = ({
 	);
 };
 
+const QRToastLink = styled(SublineBold)`
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 12px;
+	padding-block: 8px;
+	padding-left: 16px;
+	margin-block: 16px;
+	margin-top: 0;
+	background-color: transparent;
+	border: 1px solid ${neutralColors.gray[400]};
+	color: ${brandColors.giv[500]} !important;
+	border-radius: 8px;
+	font-weight: 500 !important;
+`;
+
 export const DonationCardWrapper = styled(Flex)`
 	flex-direction: column;
 	gap: 16px;
 	padding: 24px;
 	border-radius: 16px;
-	align-items: flex-start;
 	background: ${neutralColors.gray[100]};
 	box-shadow: ${Shadow.Neutral[400]};
 	align-items: stretch;
 	text-align: left;
 `;
 
 const Title = styled(B)`
-	color: ${neutralColors.gray[800]};
+	color: ${neutralColors.gray[800]} !important;
 	text-align: left;
 `;
 
@@ -230,6 +284,7 @@ interface ITab {
 }
 
 const Tab = styled(BaseTab)<ITab>`
+	font-weight: 500 !important;
 	cursor: pointer;
 	${props =>
 		props.$selected &&