add min givbacks badge active color

Giveth · Sep 17, 2024 · 768d37f · 768d37f
1 parent dc926a0
commit 768d37f
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 20 deletions.
diff --git a/lang/ca.json b/lang/ca.json
@@ -1347,6 +1347,8 @@
 	"page.donate.zero_fees": "Sense Comissions",
 	"page.donate.donate_$_to_be_eligible": "Fes una donació de ${value} per ser elegible per a GIVbacks",
 	"page.donate.donate_$_to_get_matched": "Dona ${value} per igualar la teva donació",
+	"page.donate.donations_will_be_matched": "La donació serà igualada",
+	"page.donate.givbacks_eligible": "GIVbacks elegibles",
 	"page.engage.discord.desc": "Uneix-te a la conversa! Discord és on el nostre equip es comunica. Presenta't, dóna'ns comentaris, descobreix com contribuir o simplement saluda!",
 	"page.engage.discourse.desc": "El fòrum de Giveth és on creem discursos sobre propostes noves i existents. Compartim idees sobre desenvolupament i governança, cultivant discussions sobre temes importants al voltant del nostre equip i la comunitat.",
 	"page.engage.github.desc": "Tens habilitats de desenvolupament? Comprova el nostre Github! Sempre benvingut a nous col·laboradors. Si us plau, uneix-te a un dels nostres canals de dev a Discord per saludar-nos!",

diff --git a/lang/en.json b/lang/en.json
@@ -1352,6 +1352,8 @@
 	"page.donate.zero_fees": "Zero Fees",
 	"page.donate.donate_$_to_be_eligible": "Donate ${value} to be eligible for GIVbacks",
 	"page.donate.donate_$_to_get_matched": "Donate ${value} to get your donation matched",
+	"page.donate.donations_will_be_matched": "Donation will be matched",
+	"page.donate.givbacks_eligible": "GIVbacks eligible",
 	"page.engage.discord.desc": "Join the conversation! Discord is where our team communicates. Introduce yourself, give us feedback, find out how to contribute or just say hello!",
 	"page.engage.discourse.desc": "The Giveth forum is where we create discourse around new and existing proposals. We share ideas involving development and governance, cultivating discussions about important topics around our team and community.",
 	"page.engage.github.desc": "Got some developer skills? Check out our Github! We always welcome new contributors. Please also join one of our dev channels in Discord to say hello!",

diff --git a/lang/es.json b/lang/es.json
@@ -1347,6 +1347,8 @@
 	"page.donate.zero_fees": "Sin Comisiones",
 	"page.donate.donate_$_to_be_eligible": "Dona ${value} para ser elegible para GIVbacks",
 	"page.donate.donate_$_to_get_matched": "Dona ${value} para que tu donación sea igualada",
+	"page.donate.donations_will_be_matched": "La donación será igualada",
+	"page.donate.givbacks_eligible": "Elegibles para GIVbacks",
 	"page.engage.discord.desc": "¡Únete a la conversación! Nuestro equipo se comunica en Discord. Preséntate, danos retroalimentación, descubre cómo contribuir o ¡sólo saluda!",
 	"page.engage.discourse.desc": "El foro de Giveth es donde creamos debates alrededor de propuestas existentes y nuevas. Compartimos ideas sobre el desarrollo y la gobernanza, desarrollando debates sobre temas importantes en torno a nuestro equipo y comunidad.",
 	"page.engage.github.desc": "¿Sabes de desarrollo? ¡Entra a nuestro Github! Las puertas siempre están abiertas para nuevos colaboradores. ¡También te invitamos a unirte a nuestro canal de devs en Discord!",

diff --git a/src/components/views/donate/OnTime/EstimatedMatchingToast.tsx b/src/components/views/donate/OnTime/EstimatedMatchingToast.tsx
@@ -21,28 +21,27 @@ import {
 	getActiveRound,
 } from '@/helpers/qf';
 import { IProjectAcceptedToken } from '@/apollo/types/gqlTypes';
-import { useTokenPrice } from '@/hooks/useTokenPrice';
 import { formatDonation } from '@/helpers/number';
 import { formatBalance, truncateToDecimalPlaces } from '@/lib/helpers';
 
 interface IEstimatedMatchingToast {
 	projectData: IProject;
 	amount: bigint;
 	token?: IProjectAcceptedToken;
+	tokenPrice?: number;
 }
 
 const EstimatedMatchingToast: React.FC<IEstimatedMatchingToast> = ({
 	projectData,
 	token,
 	amount,
+	tokenPrice,
 }) => {
 	const { formatMessage, locale } = useIntl();
 	const { estimatedMatching, qfRounds } = projectData || {};
 	const { allProjectsSum, matchingPool, projectDonationsSqrtRootSum } =
 		estimatedMatching || {};
 
-	const tokenPrice = useTokenPrice(token);
-
 	const { activeStartedRound } = getActiveRound(qfRounds);
 	const {
 		allocatedFundUSDPreferred,

diff --git a/src/components/views/donate/OnTime/OneTimeDonationCard.tsx b/src/components/views/donate/OnTime/OneTimeDonationCard.tsx
@@ -12,12 +12,14 @@ import {
 	IconQFNew,
 	IconRefresh16,
 	IconWalletOutline24,
+	mediaQueries,
 	neutralColors,
 	semanticColors,
 } from '@giveth/ui-design-system';
 // @ts-ignore
 import { Address, Chain, formatUnits, zeroAddress } from 'viem';
 import { useBalance, useEstimateFeesPerGas, useEstimateGas } from 'wagmi';
+import { ethers } from 'ethers';
 import { setShowWelcomeModal } from '@/features/modal/modal.slice';
 import CheckBox from '@/components/Checkbox';
 
@@ -352,6 +354,16 @@ const CryptoDonation: FC<{
 		selectedOneTimeToken?.decimals ?? 18,
 	);
 
+	const donationUsdValue =
+		(tokenPrice || 0) * Number(ethers.utils.formatEther(amount));
+
+	const isDonationMatched =
+		!!activeStartedRound &&
+		donationUsdValue >= (activeStartedRound?.minimumValidUsdValue || 0);
+
+	const isGiveBacksEligible =
+		donationUsdValue >= GIVBACKS_DONATION_QUALIFICATION_VALUE_USD;
+
 	return (
 		<MainContainer>
 			{isSanctioned && (
@@ -413,22 +425,34 @@ const CryptoDonation: FC<{
 			)}
 			{isConnected && (
 				<EligibilityBadgeWrapper>
-					<QFEligibilityBadge>
-						<IconQFNew size={30} />
-						{formatMessage(
-							{
-								id: 'page.donate.donate_$_to_get_matched',
-							},
-							{
-								value: activeStartedRound?.minimumValidUsdValue,
-							},
-						)}
-					</QFEligibilityBadge>
-					<GivbacksEligibilityBadge>
-						<IconGIVBack24 color={neutralColors.gray[700]} />
+					{activeStartedRound && (
+						<QFEligibilityBadge active={isDonationMatched}>
+							<IconQFNew size={30} />
+							{formatMessage(
+								{
+									id: isDonationMatched
+										? 'page.donate.donations_will_be_matched'
+										: 'page.donate.donate_$_to_get_matched',
+								},
+								{
+									value: activeStartedRound?.minimumValidUsdValue,
+								},
+							)}
+						</QFEligibilityBadge>
+					)}
+					<GivbacksEligibilityBadge active={isGiveBacksEligible}>
+						<IconGIVBack24
+							color={
+								isGiveBacksEligible
+									? semanticColors.jade[500]
+									: neutralColors.gray[700]
+							}
+						/>
 						{formatMessage(
 							{
-								id: 'page.donate.donate_$_to_be_eligible',
+								id: isGiveBacksEligible
+									? 'page.donate.givbacks_eligible'
+									: 'page.donate.donate_$_to_be_eligible',
 							},
 							{
 								value: GIVBACKS_DONATION_QUALIFICATION_VALUE_USD,
@@ -522,6 +546,7 @@ const CryptoDonation: FC<{
 						projectData={project}
 						token={selectedOneTimeToken}
 						amount={amount}
+						tokenPrice={tokenPrice}
 					/>
 				)}
 			{!noDonationSplit ? (
@@ -609,14 +634,17 @@ const CryptoDonation: FC<{
 	);
 };
 
-const BadgesBase = styled(FlexCenter)`
+const BadgesBase = styled(FlexCenter)<{ active?: boolean }>`
 	gap: 8px;
 	font-size: 12px;
 	font-weight: 500;
 	background: ${neutralColors.gray[200]};
-	color: ${neutralColors.gray[700]};
+	color: ${props =>
+		props.active ? semanticColors.jade[500] : neutralColors.gray[700]};
 	border-radius: 8px;
-	border: 1px solid ${neutralColors.gray[400]};
+	border: 1px solid
+		${props =>
+			props.active ? semanticColors.jade[400] : neutralColors.gray[400]};
 	padding: 4px;
 `;
 
@@ -628,6 +656,10 @@ const EligibilityBadgeWrapper = styled(Flex)`
 	> div {
 		height: 36px;
 	}
+	${mediaQueries.tablet} {
+		flex-direction: row;
+		justify-content: flex-start;
+	}
 `;
 
 const GivbacksEligibilityBadge = styled(BadgesBase)``;