Merge branch 'develop' of https://github.com/Giveth/giveth-dapps-v2 i…

…nto remove-mongoDB-inserOne
Giveth · Sep 25, 2024 · 9d24c23 · 9d24c23
2 parents e3c8303 + afa3732
commit 9d24c23
Show file tree

Hide file tree

Showing 19 changed files with 194 additions and 124 deletions.
diff --git a/lang/ca.json b/lang/ca.json
diff --git a/lang/en.json b/lang/en.json
@@ -283,7 +283,7 @@
 	"label.conviction_voting": "Conviction Voting",
 	"label.copied": "Copied!",
 	"label.copy_link": "Copy Link",
-	"label.copy_the_mnemo_to_use_in_your_app": "Copy the memo to use in your wallet app.",
+	"label.copy_the_memo_to_use_in_your_app": "Copy the memo to use in your wallet app.",
 	"label.covenant": "Covenant",
 	"label.created_at": "Created at",
 	"label.create_a_project": "Create a Project",
@@ -1714,6 +1714,8 @@
 	"tooltip.donation.matching": "This estimation is based on the donations made so far this quadratic funding round and is not considering fraud analysis. Actual matching amount vary.",
 	"tooltip.flowrate": "Recurring donations are taken out of your Stream Balance. Deposit tokens & maintain your balance to enable recurring donations.",
 	"tooltip.withdraw_stream_balance": "If you have active recurring donations your available stream balance to withdraw will be slightly less than your actual balance.",
+	"tooltip.vouched": "This project has been Vouched for as legitimate by Giveth Verifiers",
+	"tooltip.givback_eligible": "This project has been verified as a Public Good by Giveth",
 	"ubi": "UBI",
 	"water-and-sanitation": "Water & Sanitation"
 }
diff --git a/lang/es.json b/lang/es.json
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
 	},
 	"dependencies": {
 		"@apollo/client": "^3.10.4",
-		"@giveth/ui-design-system": "^1.11.34",
+		"@giveth/ui-design-system": "^1.11.36",
 		"@next/third-parties": "^14.2.5",
 		"@react-google-maps/api": "^2.19.3",
 		"@reduxjs/toolkit": "^2.2.4",

diff --git a/pages/verification/[slug]/index.tsx b/pages/verification/[slug]/index.tsx
@@ -98,7 +98,7 @@ const VerificationRoute = () => {
 	return (
 		<VerificationProvider>
 			<Head>
-				<title>Verify a Project | Giveth</title>
+				<title>GIVbacks Eligibility Application | Giveth</title>
 			</Head>
 			<VerificationIndex />
 		</VerificationProvider>

diff --git a/src/apollo/types/types.ts b/src/apollo/types/types.ts
@@ -89,6 +89,7 @@ export interface IProject {
 export enum EProjectsFilter {
 	ACCEPT_GIV = 'AcceptGiv',
 	VERIFIED = 'Verified',
+	IS_GIVBACK_ELIGIBLE = 'IsGivbackEligible',
 	BOOSTED_WITH_GIVPOWER = 'BoostedWithGivPower',
 	GIVING_BLOCK = 'GivingBlock',
 	Endaoment = 'Endaoment',
@@ -115,6 +116,7 @@ export enum ECampaignType {
 
 export enum ECampaignFilterField {
 	Verified = 'verified',
+	IsGivbackEligible = 'isGivbackEligible',
 	AcceptGiv = 'givingBlocksId',
 	GivingBlock = 'fromGivingBlock',
 	Endaoment = 'fromEndaoment',

diff --git a/src/components/IconWithToolTip.tsx b/src/components/IconWithToolTip.tsx
@@ -6,32 +6,55 @@ import type { FC, ReactNode } from 'react';
 interface IIconWithTooltipProps extends ITooltipDirection {
 	icon: ReactNode;
 	children: ReactNode;
+	delay?: boolean;
 }
 
 export const IconWithTooltip: FC<IIconWithTooltipProps> = ({
 	icon,
 	direction,
 	align = 'center',
 	children,
+	delay = false,
 }) => {
 	const [show, setShow] = useState(false);
 	const elRef = useRef<HTMLDivElement>(null);
+	const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+	const showTooltip = () => {
+		if (delay) {
+			timeoutRef.current = setTimeout(() => {
+				setShow(true);
+			}, 500); // 0.5 second delay
+		} else {
+			setShow(true);
+		}
+	};
+
+	const hideTooltip = () => {
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current);
+		}
+		setShow(false);
+	};
 
 	useEffect(() => {
 		function handleRemoveTooltip() {
-			setShow(false);
+			hideTooltip();
 		}
 		window.addEventListener('scroll', handleRemoveTooltip);
 
 		return () => {
 			window.removeEventListener('scroll', handleRemoveTooltip);
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+			}
 		};
 	}, []);
 
 	return (
 		<IconWithTooltipContainer
-			onMouseEnter={() => setShow(true)}
-			onMouseLeave={() => setShow(false)}
+			onMouseEnter={showTooltip}
+			onMouseLeave={hideTooltip}
 			onClick={e => {
 				e.stopPropagation(); // make tooltip content clickable without affecting parent
 			}}

diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
@@ -23,6 +23,7 @@ interface ITooltipProps extends ITooltipDirection {
 }
 
 const ARROW_SIZE = 0;
+const MARGIN = 4;
 
 export const Tooltip: FC<ITooltipProps> = ({
 	parentRef,
@@ -124,13 +125,13 @@ const tooltipStyleCalc = (
 	let translateY;
 	if (isMobile && direction !== 'bottom') {
 		style = {
-			top: parentRect.top - ARROW_SIZE - 50,
+			top: parentRect.top - ARROW_SIZE - 50 - MARGIN,
 			left: 10,
 			width: '95vw',
 		};
 	} else if (isMobile && direction === 'bottom') {
 		style = {
-			top: parentRect.bottom + ARROW_SIZE,
+			top: parentRect.bottom + ARROW_SIZE + MARGIN,
 			left: 10,
 			width: '95vw',
 		};
@@ -139,15 +140,15 @@ const tooltipStyleCalc = (
 			case 'top':
 				translateX = translateXForTopBottom(align, parentRect);
 				style = {
-					top: parentRect.top - ARROW_SIZE,
+					top: parentRect.top - ARROW_SIZE - MARGIN,
 					left: parentRect.left,
 					transform: `translate(${translateX}, -100%)`,
 				};
 				break;
 			case 'bottom':
 				translateX = translateXForTopBottom(align, parentRect);
 				style = {
-					top: parentRect.bottom + ARROW_SIZE,
+					top: parentRect.bottom + ARROW_SIZE + MARGIN,
 					left: parentRect.left,
 					transform: `translate(${translateX}, 0)`,
 				};
@@ -157,15 +158,15 @@ const tooltipStyleCalc = (
 				translateY = translateYForRightLeft(align, parentRect);
 				style = {
 					top: parentRect.bottom,
-					left: parentRect.right + ARROW_SIZE,
+					left: parentRect.right + ARROW_SIZE + MARGIN,
 					transform: `translate(0, ${translateY})`,
 				};
 				break;
 			case 'left':
 				translateY = translateYForRightLeft(align, parentRect);
 				style = {
 					top: parentRect.bottom,
-					left: parentRect.left - ARROW_SIZE,
+					left: parentRect.left - ARROW_SIZE - MARGIN,
 					transform: `translate(-100%, ${translateY})`,
 				};
 				break;

diff --git a/src/components/VerificationBadge.tsx b/src/components/VerificationBadge.tsx
@@ -11,6 +11,7 @@ const VerificationBadge: FC<IProps> = ({ isVerified, verificationStatus }) => {
 	const verStatus = isVerified
 		? EVerificationStatus.VERIFIED
 		: verificationStatus;
+
 	let label, badgeStatus;
 	switch (verStatus) {
 		case EVerificationStatus.REJECTED:
@@ -21,10 +22,11 @@ const VerificationBadge: FC<IProps> = ({ isVerified, verificationStatus }) => {
 			label = 'Submitted';
 			badgeStatus = EBadgeStatus.GIVETH;
 			break;
-		case EVerificationStatus.VERIFIED:
-			label = 'Eligible';
-			badgeStatus = EBadgeStatus.SUCCESS;
-			break;
+		// NOTE: Commenting this as we should only display according to GIVback eligibility
+		// case EVerificationStatus.VERIFIED:
+		// 	label = 'Eligible';
+		// 	badgeStatus = EBadgeStatus.SUCCESS;
+		// 	break;
 		case EVerificationStatus.DRAFT:
 			label = 'Incomplete';
 			badgeStatus = EBadgeStatus.WARNING;

diff --git a/src/components/menu/FilterMenu.tsx b/src/components/menu/FilterMenu.tsx
@@ -23,8 +23,8 @@ interface IFilterMenuProps {
 
 const projectsFeatures = [
 	{
-		label: { id: 'label.vouched' },
-		value: EProjectsFilter.VERIFIED,
+		label: { id: 'label.isGivbackEligible' },
+		value: EProjectsFilter.IS_GIVBACK_ELIGIBLE,
 	},
 ];
 

diff --git a/src/components/project-card/ProjectCard.tsx b/src/components/project-card/ProjectCard.tsx
@@ -95,7 +95,7 @@ const ProjectCard = (props: IProjectCard) => {
 		estimatedMatching || {};
 
 	const { activeStartedRound, activeQFRound } = getActiveRound(qfRounds);
-	const hasFooter = activeStartedRound || verified;
+	const hasFooter = activeStartedRound || verified || isGivbackEligible;
 
 	const {
 		allocatedFundUSDPreferred,

diff --git a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCardContent.tsx b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCardContent.tsx
@@ -148,7 +148,7 @@ const QRDonationCardContent: FC<IQRDonationCardContentProps> = ({
 					<>
 						<B>
 							{formatMessage({
-								id: 'label.copy_the_mnemo_to_use_in_your_app',
+								id: 'label.copy_the_memo_to_use_in_your_app',
 							})}
 						</B>
 						<CopyConatainer text={projectAddress.memo ?? ''} />

diff --git a/src/components/views/project/ProjectBadges.tsx b/src/components/views/project/ProjectBadges.tsx
@@ -12,6 +12,7 @@ import { useIntl } from 'react-intl';
 import { useProjectContext } from '@/context/project.context';
 import ProjectBadge from './ProjectBadge';
 import { hasActiveRound } from '@/helpers/qf';
+import { IconWithTooltip } from '@/components/IconWithToolTip';
 
 const ProjectBadges = () => {
 	const { projectData } = useProjectContext();
@@ -28,23 +29,45 @@ const ProjectBadges = () => {
 	return (
 		<CustomFlex gap='16px'>
 			{verified && (
-				<ProjectBadge
-					badgeText={formatMessage({
-						id: 'label.vouched',
-					})}
-					wrapperColor={semanticColors.jade[700]}
-					BadgeIcon={<IconVerifiedBadge16 />}
-				/>
+				<IconWithTooltip
+					delay
+					icon={
+						<ProjectBadge
+							badgeText={formatMessage({
+								id: 'label.vouched',
+							})}
+							wrapperColor={semanticColors.jade[700]}
+							BadgeIcon={<IconVerifiedBadge16 />}
+						/>
+					}
+					direction='top'
+				>
+					<TooltipContent>
+						{formatMessage({ id: 'tooltip.vouched' })}
+					</TooltipContent>
+				</IconWithTooltip>
 			)}
 			{isGivbackEligible && (
-				<ProjectBadge
-					badgeText={formatMessage({
-						id: 'label.isGivbackEligible',
-					})}
-					textColor={brandColors.giv[500]}
-					wrapperColor={'white'}
-					BadgeIcon={<IconGIVBack16 color={brandColors.giv[500]} />}
-				/>
+				<IconWithTooltip
+					delay
+					icon={
+						<ProjectBadge
+							badgeText={formatMessage({
+								id: 'label.isGivbackEligible',
+							})}
+							textColor={brandColors.giv[500]}
+							wrapperColor={'white'}
+							BadgeIcon={
+								<IconGIVBack16 color={brandColors.giv[500]} />
+							}
+						/>
+					}
+					direction='top'
+				>
+					<TooltipContent>
+						{formatMessage({ id: 'tooltip.givback_eligible' })}
+					</TooltipContent>
+				</IconWithTooltip>
 			)}
 
 			{isQF && (
@@ -76,4 +99,12 @@ const CustomFlex = styled(Flex)`
 	padding-top: 8px;
 `;
 
+export const TooltipContent = styled.div`
+	color: ${neutralColors.gray[100]};
+	cursor: default;
+	text-align: center;
+	width: 150px;
+	font-size: 0.8em;
+`;
+
 export default ProjectBadges;
diff --git a/src/components/views/project/ProjectGIVbackToast.tsx b/src/components/views/project/ProjectGIVbackToast.tsx
@@ -409,8 +409,7 @@ const Wrapper = styled(Flex)`
 
 const InnerLink = styled.a`
 	cursor: pointer;
-	text-decoration: underline;
-	color: ${neutralColors.gray[900]};
+	color: ${brandColors.pinky[500]};
 `;
 
 export default ProjectGIVbackToast;
diff --git a/src/components/views/project/projectActionCard/ProjectStats.tsx b/src/components/views/project/projectActionCard/ProjectStats.tsx
@@ -68,7 +68,7 @@ export const ProjectStats = () => {
 						</IconWithTooltip>
 					</Flex>
 					<VerificationBadge
-						isVerified={projectData?.verified}
+						isVerified={projectData?.isGivbackEligible}
 						verificationStatus={projectData?.verificationFormStatus}
 					/>
 				</StatRow>

diff --git a/src/components/views/userProfile/projectsTab/ProjectItem.tsx b/src/components/views/userProfile/projectsTab/ProjectItem.tsx
@@ -91,7 +91,7 @@ const ProjectItem: FC<IProjectItem> = props => {
 						</P>
 						<div>
 							<VerificationBadge
-								isVerified={project?.verified}
+								isVerified={project?.isGivbackEligible}
 								verificationStatus={
 									project.projectVerificationForm?.status
 								}

diff --git a/src/context/verification.context.tsx b/src/context/verification.context.tsx
@@ -84,7 +84,7 @@ export const VerificationProvider = ({ children }: { children: ReactNode }) => {
 				}
 			} catch (error: any) {
 				switch (error?.message) {
-					case 'There is not any givbacks eligiblity form for this project':
+					case 'There is not any project verification form for this project':
 						setStep(0);
 						break;
 

diff --git a/src/helpers/url.tsx b/src/helpers/url.tsx
@@ -27,6 +27,12 @@ export function campaignLinkGenerator(campaign: ICampaign) {
 				case ECampaignFilterField.Verified:
 					params.append('filter', EProjectsFilter.VERIFIED);
 					break;
+				case ECampaignFilterField.IsGivbackEligible:
+					params.append(
+						'filter',
+						EProjectsFilter.IS_GIVBACK_ELIGIBLE,
+					);
+					break;
 				case ECampaignFilterField.Endaoment:
 					params.append('filter', EProjectsFilter.Endaoment);
 					break;

diff --git a/yarn.lock b/yarn.lock
@@ -1329,10 +1329,10 @@
     "@solana/wallet-adapter-base" "^0.9.17"
     bs58 "^5.0.0"
 
-"@giveth/ui-design-system@^1.11.34":
-  version "1.11.34"
-  resolved "https://registry.npmjs.org/@giveth/ui-design-system/-/ui-design-system-1.11.34.tgz"
-  integrity sha512-gt28LwEcZ7KBIkqonCkiPkVLNBfxyq/3YDfFQTl8V0zqW3RzfOvIAex4XV10DTu+wJUiizN1AiQSy6h5CJgVgw==
+"@giveth/ui-design-system@^1.11.36":
+  version "1.11.36"
+  resolved "https://registry.yarnpkg.com/@giveth/ui-design-system/-/ui-design-system-1.11.36.tgz#68e289ab41028ade89b344937f8f2ff13ca4b8bb"
+  integrity sha512-Ethft3DAmDrMD6xID9/7uJGfBk/TZV92YEImtviNVubH3eAAyI5c6hRXJmlKlZbiJMhjJrGvOXGrfEZEgU3mgw==
   dependencies:
     next "14.1.0"
     react "^18"