Merge pull request #4968 from Giveth/feat/add_estimation_time

Feat/Add estimated matching time

lang/ca.json

@@ -67,6 +67,7 @@
 	"component.pro_guide.tips.social_media.item3": "Giveth podria utilitzar els teus noms d'usuari a les xarxes socials per contactar-te o etiquetar-te en publicacions per suportar la teva recaptació de fons.",
 	"component.qf-section.tooltip": "Aquesta estimació és els fons d'emparellament que aquest projecte rebrà si la ronda acabés ara, sense tenir en compte l'anàlisi de frau.",
 	"component.qf-section.tooltip_polygon": "Aquesta estimació representa els fons coincidents que rebria aquest projecte si la ronda es tanqués ara, ignorant l'anàlisi del frau.",
+	"component.qf-section.estimated_time": "Càlcul de coincidència actualitzat fa {time} minuts",
 	"component.qf_middle_banner.desc": " Amb FQ, el nombre de donants compta més que la quantitat donada. Dona als projectes participants en la ronda i aconsegueix que les teves donacions siguin emparellades amb el poder del finançament quadràtic!",
 	"component.qf_middle_banner.title": "Finançament Quadràtic",
 	"component.regenstream_card.harvest_caption": "Utilitza el botó de Recollida per reclamar recompenses líquides d'aquest RegenStream",
@@ -556,6 +557,7 @@
 	"label.how_do_you_want_to_donate": "Com vols donar?",
 	"label.how_it_works": "Com Funciona",
 	"label.how_it_works?": "Com funciona?",
+	"label.last_updated_ago": "Última actualització: fa {time} minuts",
 	"label.how_referrals_work": "Com funcionen les referències",
 	"label.how_to_buy": "Com comprar",
 	"label.how_to_refer_your_friends": "Com referir als teus amics",

lang/en.json

@@ -67,6 +67,7 @@
 	"component.pro_guide.tips.social_media.item3": "Giveth might use your social media handles to contact you or tag you on posts to support your fundraising.",
 	"component.qf-section.tooltip": "This estimation is the matching funds that this project would get if the round ended now, disregarding fraud analysis.",
 	"component.qf-section.tooltip_polygon": "This estimate represents the matching funds this project would receive if the round closed now, ignoring the fraud analysis.",
+	"component.qf-section.estimated_time": "Estimated matching updated {time} min ago",
 	"component.qf_middle_banner.desc": "With QF, the number of donors matters more than the amout donated. Donate to participating projects in the round and get your donations matched with the power of quadratic funding!",
 	"component.qf_middle_banner.title": "Quadratic Funding",
 	"component.regenstream_card.harvest_caption": "Use the Harvest button to claim liquid rewards from this RegenStream",
@@ -556,6 +557,7 @@
 	"label.how_do_you_want_to_donate": "How do you want to donate?",
 	"label.how_it_works": "How It Works",
 	"label.how_it_works?": "How it works?",
+	"label.last_updated_ago": "Last updated: {time} min ago",
 	"label.how_referrals_work": "How referrals work",
 	"label.how_to_buy": "How to buy",
 	"label.how_to_refer_your_friends": "How to refer your friends",

lang/es.json

@@ -67,6 +67,7 @@
 	"component.pro_guide.tips.social_media.item3": "Giveth podría usar tus identificadores de redes sociales para contactarte o etiquetarte en publicaciones para apoyar tu recaudación de fondos.",
 	"component.qf-section.tooltip": "Esta estimación es la cantidad de fondos complementarios que este proyecto recibiría si la ronda terminara ahora, sin tener en cuenta el análisis de fraude.",
 	"component.qf-section.tooltip_polygon": "Esta estimación representa los fondos de contrapartida que recibiría este proyecto si la ronda se cerrara ahora, ignorando el análisis de fraude.",
+	"component.qf-section.estimated_time": "Cálculo de coincidencias actualizado hace {time} minutos",
 	"component.qf_middle_banner.desc": "Con FC, el número de donantes importa más que la cantidad donada. ¡Dona a los proyectos participantes en la ronda y obtén tus donaciones emparejadas con el poder de la financiación cuadrática!",
 	"component.qf_middle_banner.title": "Financiación Cuadrática",
 	"component.regenstream_card.harvest_caption": "Utiliza el botón de Cosecha para reclamar recompensas líquidas de este RegenStream",
@@ -554,6 +555,7 @@
 	"label.how_do_you_want_to_donate": "¿Cómo quieres donar?",
 	"label.how_it_works": "Cómo Funciona",
 	"label.how_it_works?": "¿Cómo funciona?",
+	"label.last_updated_ago": "Última actualización: hace {time} minutos",
 	"label.how_referrals_work": "Cómo funcionan las referencias",
 	"label.how_to_buy": "Cómo comprar",
 	"label.how_to_refer_your_friends": "Como referir a tus amigos",

src/apollo/gql/gqlProjects.ts

@@ -21,6 +21,7 @@ export const PROJECT_CORE_FIELDS = gql`
 			allocatedFundUSDPreferred
 			allocatedFundUSD
 			qfStrategy
+			clusterMatchingSyncAt
 		}
 	}
 `;
@@ -294,6 +295,7 @@ export const FETCH_PROJECT_BY_SLUG_SINGLE_PROJECT = gql`
 				allocatedFundUSDPreferred
 				allocatedFundUSD
 				qfStrategy
+				clusterMatchingSyncAt
 			}
 			campaigns {
 				id

src/apollo/types/types.ts

@@ -516,6 +516,7 @@ export interface IQFRound {
 	minimumValidUsdValue?: number;
 	minMBDScore: number;
 	qfStrategy: QfStrategyEnum;
+	clusterMatchingSyncAt: string;
 }
 
 export interface IArchivedQFRound extends IQFRound {

src/components/modals/HarvestAll.sc.tsx

@@ -87,7 +87,8 @@ export const HarvestAllPending = styled(Pending)`
 
 export const TooltipContent = styled(Subline)`
 	${mediaQueries.tablet} {
-		width: 200px;
+		width: 250px;
+		text-align: left;
 	}
 `;
 

src/components/project-card/ProjectCard.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import Image from 'next/image';
 import {
 	P,
 	H6,
@@ -36,6 +37,7 @@ import { TooltipContent } from '@/components/modals/HarvestAll.sc';
 import { IconWithTooltip } from '@/components/IconWithToolTip';
 import { FETCH_RECURRING_DONATIONS_BY_DATE } from '@/apollo/gql/gqlProjects';
 import { client } from '@/apollo/apolloClient';
+import { calculateQFTimeDifferences } from '@/helpers/time';
 
 const cardRadius = '12px';
 const imgHeight = '226px';
@@ -106,8 +108,13 @@ const ProjectCard = (props: IProjectCard) => {
 		allocatedFundUSD,
 		allocatedTokenSymbol,
 		qfStrategy,
+		clusterMatchingSyncAt,
 	} = activeQFRound || {};
 
+	const clusterMatchingSyncAtDiff = calculateQFTimeDifferences(
+		clusterMatchingSyncAt || '',
+	);
+
 	const projectLink = slugToProjectView(slug);
 	const donateLink = slugToProjectDonate(slug);
 
@@ -330,6 +337,24 @@ const ProjectCard = (props: IProjectCard) => {
 											{formatMessage({
 												id: 'component.qf-section.tooltip_polygon',
 											})}
+											<ToolTipBellow>
+												<Image
+													src={
+														'/images/icons/clock.svg'
+													}
+													alt='score'
+													width={16}
+													height={16}
+												/>
+												{formatMessage(
+													{
+														id: 'component.qf-section.estimated_time',
+													},
+													{
+														time: clusterMatchingSyncAtDiff,
+													},
+												)}
+											</ToolTipBellow>
 										</TooltipContent>
 									</IconWithTooltip>
 								</EstimatedMatching>
@@ -593,4 +618,17 @@ const QFBadge = styled(Subline)`
 	align-items: center;
 `;
 
+const ToolTipBellow = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	border-top: 1px solid #121848;
+	margin: 7px 0;
+	padding: 7px 0 0 0;
+	line-height: 16px;
+	& img {
+		margin: 0 6px 0 0;
+	}
+`;
+
 export default ProjectCard;

src/components/views/donate/OneTime/EstimatedMatchingToast.tsx

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import Image from 'next/image';
 import {
 	B,
 	Caption,
@@ -20,6 +21,7 @@ import {
 import { IProjectAcceptedToken } from '@/apollo/types/gqlTypes';
 import { formatDonation } from '@/helpers/number';
 import { truncateToDecimalPlaces } from '@/lib/helpers';
+import { calculateQFTimeDifferences } from '@/helpers/time';
 
 interface IEstimatedMatchingToast {
 	projectData: IProject;
@@ -49,8 +51,13 @@ const EstimatedMatchingToast: FC<IEstimatedMatchingToast> = ({
 		allocatedFundUSD,
 		allocatedTokenSymbol,
 		maximumReward,
+		clusterMatchingSyncAt,
 	} = activeStartedRound || {};
 
+	const clusterMatchingSyncAtDiff = calculateQFTimeDifferences(
+		clusterMatchingSyncAt || '',
+	);
+
 	const decimals = isStellar ? 18 : token?.decimals || 18;
 	const amountInUsd =
 		(tokenPrice || 0) *
@@ -86,6 +93,22 @@ const EstimatedMatchingToast: FC<IEstimatedMatchingToast> = ({
 						{formatMessage({
 							id: 'component.qf-section.tooltip_polygon',
 						})}
+						<ToolTipBellow>
+							<Image
+								src={'/images/icons/clock.svg'}
+								alt='score'
+								width={16}
+								height={16}
+							/>
+							{formatMessage(
+								{
+									id: 'component.qf-section.estimated_time',
+								},
+								{
+									time: clusterMatchingSyncAtDiff,
+								},
+							)}
+						</ToolTipBellow>
 					</TooltipContent>
 				</IconWithTooltip>
 			</FlexCenter>
@@ -106,4 +129,17 @@ const Wrapper = styled.div<{ show?: boolean }>`
 	opacity: ${({ show }) => (show ? 1 : 0)};
 `;
 
+const ToolTipBellow = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	border-top: 1px solid #121848;
+	margin: 7px 0;
+	padding: 7px 0 0 0;
+	line-height: 16px;
+	& img {
+		margin: 0 6px 0 0;
+	}
+`;
+
 export default EstimatedMatchingToast;

src/components/views/project/projectActionCard/QFSection.tsx

@@ -15,6 +15,7 @@ import {
 } from '@giveth/ui-design-system';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
+import Image from 'next/image';
 import { type FC } from 'react';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
@@ -35,6 +36,7 @@ import { ProjectCardUserName } from '@/components/project-card/ProjectCardUserNa
 import { CustomH5 } from '@/components/setProfilePic/SetProfilePic';
 import { ORGANIZATION } from '@/lib/constants/organizations';
 import { slugToProjectView } from '@/lib/routeCreators';
+import { calculateQFTimeDifferences } from '@/helpers/time';
 
 interface IQFSectionProps {
 	projectData?: IProject;
@@ -64,6 +66,7 @@ const QFSection: FC<IQFSectionProps> = ({ projectData }) => {
 		allocatedFundUSD,
 		allocatedTokenSymbol,
 		allocatedFundUSDPreferred,
+		clusterMatchingSyncAt,
 	} = activeStartedRound || {};
 	const totalEstimatedMatching = calculateTotalEstimatedMatching(
 		projectDonationsSqrtRootSum,
@@ -72,6 +75,15 @@ const QFSection: FC<IQFSectionProps> = ({ projectData }) => {
 		activeStartedRound?.maximumReward,
 	);
 
+	// const { clusterMatchingSyncAt } = activeQFRound || {};
+	console.log({ activeStartedRound });
+
+	console.log('activeQFRound', clusterMatchingSyncAt);
+
+	const clusterMatchingSyncAtDiff = calculateQFTimeDifferences(
+		clusterMatchingSyncAt || '',
+	);
+
 	const projectLink = slugToProjectView(slug!);
 
 	const orgLabel = organization?.label;
@@ -104,6 +116,22 @@ const QFSection: FC<IQFSectionProps> = ({ projectData }) => {
 							{formatMessage({
 								id: 'component.qf-section.tooltip_polygon',
 							})}
+							<ToolTipBellow>
+								<Image
+									src={'/images/icons/clock.svg'}
+									alt='score'
+									width={16}
+									height={16}
+								/>
+								{formatMessage(
+									{
+										id: 'component.qf-section.estimated_time',
+									},
+									{
+										time: clusterMatchingSyncAtDiff,
+									},
+								)}
+							</ToolTipBellow>
 						</TooltipContent>
 					</IconWithTooltip>
 				</Flex>
@@ -261,6 +289,16 @@ const QFSection: FC<IQFSectionProps> = ({ projectData }) => {
 							<LightSubline>|</LightSubline>
 							<LightSubline>Next update in: 3 min</LightSubline>
 						</Flex> */}
+							<LastUpdate>
+								{formatMessage(
+									{
+										id: 'label.last_updated_ago',
+									},
+									{
+										time: clusterMatchingSyncAtDiff,
+									},
+								)}
+							</LastUpdate>
 							<a
 								href={links.QF_DOC}
 								target='_blank'
@@ -391,3 +429,23 @@ const DefaultEstimatedMatchingContainer = styled.div`
 		display: none;
 	}
 `;
+
+const ToolTipBellow = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	border-top: 1px solid #121848;
+	margin: 7px 0;
+	padding: 7px 0 0 0;
+	line-height: 16px;
+	& img {
+		margin: 0 6px 0 0;
+	}
+`;
+
+const LastUpdate = styled.div`
+	font-weight: 400;
+	font-size: 12px;
+	line-height: 150%;
+	color: ${neutralColors.gray[700]};
+`;