Merge pull request #4278 from Giveth/fix/3829_add_donation_warning

fix: add toast warning for estimated matching less tham minimumUsdValue
Giveth · Jun 19, 2024 · 0c0af25 · 0c0af25
2 parents a877c90 + 96721a8
commit 0c0af25
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 50 deletions.
diff --git a/lang/ca.json b/lang/ca.json
@@ -1253,8 +1253,11 @@
 	"page.about_us.desc.one": "Giveth és una comunitat centrada en la construcció del Futur de les Donacions utilitzant la tecnologia blockchain. La nostra intenció és donar suport i recompensar la finançament de béns públics creant accés obert, transparent i gratuït a les oportunitats de finançament innovadores en l'ecosistema d'Ethereum.",
 	"page.about_us.desc.two": "Giveth està construint una cultura de donació que capacita i recompensa als qui donen, als projectes, a la societat i al món. El nostre objectiu és inspirar la nostra comunitat a participar en un ecosistema de suport col·lectiu, d'abundància i de creació de valor. Comproveu el nostre",
 	"page.donate.bank_fees": "Comissions Bancàries",
-	"page.donate.matching_toast.bottom": "Els fons d'emparellament s'enviaran al projecte seleccionat després que acabi la ronda.",
-	"page.donate.matching_toast.upper": "Emparellament estimat",
+	"page.donate.matching_toast.bottom_valid": "Els fons d'emparellament s'enviaran al projecte seleccionat després que acabi la ronda.",
+	"page.donate.matching_toast.bottom_invalid_p1": "Només donacions de més de",
+	"page.donate.matching_toast.bottom_invalid_p2": "són elegibles per a l'aparellament.",
+	"page.donate.matching_toast.upper_valid": "Emparellament estimat",
+	"page.donate.matching_toast.upper_invalid": "Fes que compti",
 	"page.donate.passport_toast.description.eligible": "La teva donació és elegible per ser emparellada! Després del",
 	"page.donate.passport_toast.description.eligible_2": ", totes les donacions seran revisades per a la protecció contra frau i els fons d'emparellament seran enviats als projectes. Estigues atent a les notificacions :)",
 	"page.donate.passport_toast.description.non_eligible": "Obtén el teu emparellament de donació amb finançament quadràtic!\nAugmenta la teva puntuació de Gitcoin Passport abans de",

diff --git a/lang/en.json b/lang/en.json
@@ -1253,8 +1253,11 @@
 	"page.about_us.desc.one": "Giveth is a community focused on Building the Future of Giving using blockchain technology. Our intention is to support and reward the funding of public goods by creating open, transparent and free access to the revolutionary funding opportunities available within the Ethereum ecosystem.",
 	"page.about_us.desc.two": "Giveth is building a culture of giving that empowers and rewards those who give -- to projects, to society, and to the world. We aim to inspire our community to participate in an ecosystem of collective support, abundance and value-creation. Check out our",
 	"page.donate.bank_fees": "Bank Fees",
-	"page.donate.matching_toast.bottom": "Matching funds will be sent to the selected project after the round ends.",
-	"page.donate.matching_toast.upper": "Estimated matching",
+	"page.donate.matching_toast.bottom_valid": "Matching funds will be sent to the selected project after the round ends.",
+	"page.donate.matching_toast.bottom_invalid_p1": "Only donations more than",
+	"page.donate.matching_toast.bottom_invalid_p2": "are eligible for matching.",
+	"page.donate.matching_toast.upper_valid": "Estimated matching",
+	"page.donate.matching_toast.upper_invalid": "Make it count",
 	"page.donate.passport_toast.description.eligible": "Your donation is eligible to be matched! After the",
 	"page.donate.passport_toast.description.eligible_2": ", all donations will be reviewed for fraud protection and matching funds will be sent to the projects.  Stay tuned for notifications :)",
 	"page.donate.passport_toast.description.non_eligible": "Get your donation matched with quadratic funding!\nIncrease your Gitcoin Passport score before",

diff --git a/lang/es.json b/lang/es.json
@@ -1253,8 +1253,11 @@
 	"page.about_us.desc.one": "Giveth es una comunidad enfocada en construir el Futuro de las Donaciones utilizando la tecnología blockchain. Nuestra intención es apoyar y recompensar la financiación de bienes públicos creando un acceso abierto, transparente y gratuito a las oportunidades de financiación innovadoras en el ecosistema de Ethereum.",
 	"page.about_us.desc.two": "Giveth está construyendo una cultura de donación que empodera y recompensa a los que donan, a los proyectos, a la sociedad y al mundo. Nuestro objetivo es inspirar a nuestra comunidad a participar en un ecosistema de apoyo colectivo, de abundancia y creación de valor. Echa un vistazo a nuestro",
 	"page.donate.bank_fees": "Comisiones Bancarias",
-	"page.donate.matching_toast.bottom": "Los fondos complementarios se enviarán al proyecto seleccionado después de que termine la ronda.",
-	"page.donate.matching_toast.upper": "Estimado del monto complementado",
+	"page.donate.matching_toast.bottom_valid": "Los fondos complementarios se enviarán al proyecto seleccionado después de que termine la ronda.",
+	"page.donate.matching_toast.bottom_invalid_p1": "Sólo las donaciones superiores a",
+	"page.donate.matching_toast.bottom_invalid_p2": "son subvencionables.",
+	"page.donate.matching_toast.upper_valid": "Estimado del monto complementado",
+	"page.donate.matching_toast.upper_invalid": "Haz que cuente",
 	"page.donate.passport_toast.description.eligible": "¡Tu donación es elegible para ser complementada! Después de la",
 	"page.donate.passport_toast.description.eligible_2": ", todas las donaciones serán revisadas para protección contra fraudes y los fondos de complementarios se enviarán a los proyectos. ¡Mantente atento a las notificaciones! :)",
 	"page.donate.passport_toast.description.non_eligible": "¡Haz que tu donación sea complementada con financiamiento cuadrático! Aumenta tu puntaje de Gitcoin Passport antes de",

diff --git a/lang/t_ca.json b/lang/t_ca.json
@@ -145,8 +145,8 @@
 	"label.you_can_view_them_on_a_blockchain_explorer_here": "Pots veure-les en un explorador de blocs aquí:",
 	"other": "Altres",
 	"other_desc": " ",
-	"page.donate.matching_toast.bottom": "Els fons de coincidència es enviaran al projecte seleccionat quan acabi la ronda.",
-	"page.donate.matching_toast.upper": "Coincidència estimada",
+	"page.donate.matching_toast.bottom_valid": "Els fons de coincidència es enviaran al projecte seleccionat quan acabi la ronda.",
+	"page.donate.matching_toast.upper_valid": "Coincidència estimada",
 	"page.donate.passport_toast.description.eligible": "La teva donació és elegible per ser coincidida! Després de la",
 	"page.donate.passport_toast.description.eligible_2": ", totes les donacions seran revisades per a la protecció contra el frau i els fons de coincidència es enviaran als projectes. Estigueu atents a les notificacions :)",
 	"page.donate.passport_toast.description.non_eligible": "Fes que la teva donació coincideixi amb el finançament quadràtic!\nAugmenta la teva puntuació de Passaport Gitcoin abans",

diff --git a/lang/t_es.json b/lang/t_es.json
@@ -111,8 +111,8 @@
 	"label.your_transactions_have_been_submitted": "Tus transacciones han sido enviadas",
 	"label.you_can_view_them_on_a_blockchain_explorer_here": "Puedes verlas en un explorador de blockchain aquí:",
 	"other_desc": " ",
-	"page.donate.matching_toast.bottom": "Los fondos de igualación se enviarán al proyecto seleccionado después de que termine la ronda.",
-	"page.donate.matching_toast.upper": "Igualación estimada",
+	"page.donate.matching_toast.bottom_valid": "Los fondos de igualación se enviarán al proyecto seleccionado después de que termine la ronda.",
+	"page.donate.matching_toast.upper_valid": "Igualación estimada",
 	"page.donate.passport_toast.description.eligible": "¡Tu donación es elegible para ser igualada! Después de la",
 	"page.donate.passport_toast.description.eligible_2": ", todas las donaciones serán revisadas para la protección contra fraudes y los fondos de igualación serán enviados a los proyectos. Mantente atento a las notificaciones :)",
 	"page.donate.passport_toast.description.non_eligible": "¡Haz que tu donación sea igualada con financiación cuadrática!\nAumenta tu puntuación de Pasaporte Gitcoin antes",

diff --git a/src/apollo/gql/gqlProjects.ts b/src/apollo/gql/gqlProjects.ts
@@ -19,6 +19,7 @@ export const PROJECT_CORE_FIELDS = gql`
 			allocatedTokenSymbol
 			allocatedFundUSDPreferred
 			allocatedFundUSD
+			minimumValidUsdValue
 		}
 	}
 `;
@@ -183,6 +184,7 @@ export const FETCH_PROJECT_BY_SLUG_DONATION = gql`
 				allocatedTokenSymbol
 				allocatedFundUSDPreferred
 				allocatedFundUSD
+				minimumValidUsdValue
 			}
 			anchorContracts {
 				address
@@ -277,6 +279,7 @@ export const FETCH_PROJECT_BY_SLUG_SINGLE_PROJECT = gql`
 				allocatedTokenSymbol
 				allocatedFundUSDPreferred
 				allocatedFundUSD
+				minimumValidUsdValue
 			}
 			campaigns {
 				id

diff --git a/src/apollo/types/types.ts b/src/apollo/types/types.ts
@@ -473,6 +473,7 @@ export interface IQFRound {
 	allocatedFundUSDPreferred: boolean;
 	allocatedTokenSymbol: string;
 	allocatedTokenChainId: number;
+	minimumValidUsdValue: number;
 }
 
 export interface IArchivedQFRound extends IQFRound {

diff --git a/src/components/views/archivedQFRounds/ArchivedQFRounds.view.tsx b/src/components/views/archivedQFRounds/ArchivedQFRounds.view.tsx
@@ -25,6 +25,11 @@ enum EOrderDirection {
 	DESC = 'DESC',
 }
 
+interface HeaderWrapperProps {
+	$gap: string;
+	$justifyContent: string;
+}
+
 const ITEMS_PER_PAGE = 10;
 
 export const ArchivedQFRoundsView = () => {
@@ -105,7 +110,7 @@ export const ArchivedQFRoundsView = () => {
 		<Wrapper>
 			<DefaultQFBanner />
 			<Container>
-				<HeaderWrapper gap='24px' $justifyContent='space-between'>
+				<HeaderWrapper $gap='24px' $justifyContent='space-between'>
 					<QFHeader />
 					<ArchivedQFRoundsSort />
 				</HeaderWrapper>
@@ -133,8 +138,9 @@ const Wrapper = styled(Flex)`
 	gap: 40px;
 `;
 
-const HeaderWrapper = styled(Flex)`
+const HeaderWrapper = styled(Flex)<HeaderWrapperProps>`
 	margin-bottom: 24px;
+	gap: ${props => props.$gap};
 `;
 
 const LoadMoreButton = styled(OutlineButton)`

diff --git a/src/components/views/donate/DonateIndex.tsx b/src/components/views/donate/DonateIndex.tsx
@@ -110,10 +110,6 @@ const DonateIndex: FC = () => {
 	);
 };
 
-const PassportWrapper = styled.div`
-	margin-top: 100px;
-`;
-
 const AlreadyDonatedWrapper = styled(Flex)`
 	margin-bottom: 16px;
 	padding: 12px 16px;

diff --git a/src/components/views/donate/EstimatedMatchingToast.tsx b/src/components/views/donate/EstimatedMatchingToast.tsx
@@ -3,6 +3,7 @@ import {
 	B,
 	Caption,
 	IconHelpFilled16,
+	IconAlertTriangleFilled,
 	neutralColors,
 	semanticColors,
 	Subline,
@@ -28,11 +29,11 @@ interface IEstimatedMatchingToast {
 	amountTyped?: number;
 }
 
-const EstimatedMatchingToast = ({
+const EstimatedMatchingToast: React.FC<IEstimatedMatchingToast> = ({
 	projectData,
 	token,
 	amountTyped,
-}: IEstimatedMatchingToast) => {
+}) => {
 	const { formatMessage, locale } = useIntl();
 	const { estimatedMatching, qfRounds } = projectData || {};
 	const { allProjectsSum, matchingPool, projectDonationsSqrtRootSum } =
@@ -45,54 +46,85 @@ const EstimatedMatchingToast = ({
 		allocatedFundUSDPreferred,
 		allocatedFundUSD,
 		allocatedTokenSymbol,
+		minimumValidUsdValue,
+		maximumReward,
 	} = activeStartedRound || {};
 
+	const amountInUsd = (tokenPrice || 0) * (amountTyped || 0);
+
 	const esMatching = calculateEstimatedMatchingWithDonationAmount(
-		(tokenPrice || 0) * (amountTyped || 0),
+		amountInUsd,
 		projectDonationsSqrtRootSum,
 		allProjectsSum,
 		allocatedFundUSDPreferred ? allocatedFundUSD : matchingPool,
-		activeStartedRound?.maximumReward,
+		maximumReward,
+	);
+
+	const isAboveMinValidUsdValue =
+		minimumValidUsdValue != null
+			? amountInUsd >= minimumValidUsdValue
+			: true;
+
+	const borderColor = isAboveMinValidUsdValue
+		? semanticColors.jade['500']
+		: semanticColors.golden['500'];
+
+	const textColor = isAboveMinValidUsdValue
+		? semanticColors.jade['700']
+		: semanticColors.golden['500'];
+
+	const tooltipIcon = isAboveMinValidUsdValue ? (
+		<IconHelpFilled16 color={textColor} />
+	) : (
+		<IconAlertTriangleFilled color={textColor} />
 	);
 
+	const formattedDonation = isAboveMinValidUsdValue
+		? formatDonation(
+				esMatching,
+				allocatedFundUSDPreferred ? '$' : '',
+				locale,
+				true,
+			) + (allocatedFundUSDPreferred ? '' : ' ' + allocatedTokenSymbol)
+		: '---';
+
+	const bottomText = isAboveMinValidUsdValue
+		? formatMessage({ id: 'page.donate.matching_toast.bottom_valid' })
+		: formatMessage({
+				id: 'page.donate.matching_toast.bottom_invalid_p1',
+			}) +
+			' $' +
+			minimumValidUsdValue +
+			' ' +
+			formatMessage({
+				id: 'page.donate.matching_toast.bottom_invalid_p2',
+			});
+
 	return (
-		<Wrapper>
-			<Upper>
+		<Wrapper style={{ borderColor }}>
+			<Upper style={{ color: textColor }}>
 				<EstimatedMatching>
 					<Caption $medium>
 						{formatMessage({
-							id: 'page.donate.matching_toast.upper',
+							id: isAboveMinValidUsdValue
+								? 'page.donate.matching_toast.upper_valid'
+								: 'page.donate.matching_toast.upper_invalid',
 						})}
 					</Caption>
-					<IconWithTooltip
-						icon={
-							<IconHelpFilled16
-								color={semanticColors.jade['700']}
-							/>
-						}
-						direction='top'
-					>
-						<TooltipContent>
-							{formatMessage({
-								id: 'component.qf-section.tooltip_polygon',
-							})}
-						</TooltipContent>
+					<IconWithTooltip icon={tooltipIcon} direction='top'>
+						{isAboveMinValidUsdValue && (
+							<TooltipContent>
+								{formatMessage({
+									id: 'component.qf-section.tooltip_polygon',
+								})}
+							</TooltipContent>
+						)}
 					</IconWithTooltip>
 				</EstimatedMatching>
-				<B>
-					{formatDonation(
-						esMatching,
-						allocatedFundUSDPreferred ? '$' : '',
-						locale,
-						true,
-					)}{' '}
-					{allocatedFundUSDPreferred ? '' : allocatedTokenSymbol}
-				</B>
+				<B>{formattedDonation}</B>
 			</Upper>
 			<Divider />
-			<Bottom>
-				{formatMessage({ id: 'page.donate.matching_toast.bottom' })}
-			</Bottom>
+			<Bottom>{bottomText}</Bottom>
 		</Wrapper>
 	);
 };
@@ -111,13 +143,12 @@ const Bottom = styled(Subline)`
 
 const Upper = styled.div`
 	margin-bottom: 4px;
-	color: ${semanticColors.jade['700']};
 	display: flex;
 	justify-content: space-between;
 `;
 
 const Wrapper = styled.div`
-	border: 1px solid ${semanticColors.jade['500']};
+	border: 1px solid;
 	border-radius: 8px;
 	padding: 16px;
 	margin-top: 8px;