Verification page issues

lang/ca.json

@@ -552,7 +552,8 @@
 	"label.notification_center": "Centre de Notificacions",
 	"label.notify_me_in_the_dapp": "Notifica'm a la DApp",
 	"label.not_now": "Ara no",
-	"label.not_owner": "Només el propietari del projecte pot editar aquest projecte.",
+	"label.not_owner_edit": "Només el propietari del projecte pot editar aquest projecte.",
+	"label.not_owner_verification": "Només el propietari del projecte pot sol·licitar la verificació.",
 	"label.now_its_time_to_complete_your_profile": "Ara és hora de completar el teu perfil!",
 	"label.no_active_qf_round": "There is no active round!",
 	"label.no_data": "Sense dades",

lang/en.json

@@ -552,7 +552,8 @@
 	"label.notification_center": "Notification Center",
 	"label.notify_me_in_the_dapp": "Notify me in the DApp",
 	"label.not_now": "Not now",
-	"label.not_owner": "Only the project owner can edit this project.",
+	"label.not_owner_edit": "Only the project owner can edit this project.",
+	"label.not_owner_verification": "Only the project owner can ask for verification.",
 	"label.now_its_time_to_complete_your_profile": "Now it’s time to complete your profile!",
 	"label.no_active_qf_round": "There is no active round!",
 	"label.no_data": "No Data",

lang/es.json

@@ -552,7 +552,8 @@
 	"label.notification_center": "Centro de Notificaciones",
 	"label.notify_me_in_the_dapp": "Notifícame en la DApp",
 	"label.not_now": "Ahora no",
-	"label.not_owner": "Sólo el propietario del proyecto puede editar este proyecto.",
+	"label.not_owner_edit": "Sólo el propietario del proyecto puede editar este proyecto.",
+	"label.not_owner_verification": "Solo la dueña del proyecto puede solicitar verificación.",
 	"label.now_its_time_to_complete_your_profile": "Ahora es momento de completar tu perfil!",
 	"label.no_active_qf_round": "There is no active round!",
 	"label.no_data": "No data",

pages/verification/[slug]/index.tsx

@@ -1,21 +1,34 @@
 import Head from 'next/head';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import { captureException } from '@sentry/nextjs';
+import { useRouter } from 'next/router';
 import VerificationIndex from '@/components/views/verification/VerificationIndex';
 import { setShowFooter } from '@/features/general/general.slice';
 import { VerificationProvider } from '@/context/verification.context';
 import { useAppDispatch, useAppSelector } from '@/features/hooks';
 import { WrappedSpinner } from '@/components/Spinner';
 import WalletNotConnected from '@/components/WalletNotConnected';
 import UserNotSignedIn from '@/components/UserNotSignedIn';
-import { isUserRegistered } from '@/lib/helpers';
+import { compareAddresses, isUserRegistered } from '@/lib/helpers';
 import CompleteProfile from '@/components/CompleteProfile';
+import { client } from '@/apollo/apolloClient';
+import { FETCH_PROJECT_BY_SLUG } from '@/apollo/gql/gqlProjects';
+import { IProject } from '@/apollo/types/types';
+import { EProjectStatus } from '@/apollo/types/gqlEnums';
+import NotAvailableHandler from '@/components/NotAvailableHandler';
 
 const VerificationRoute = () => {
 	const dispatch = useAppDispatch();
+	const [isProjectLoading, setIsProjectLoading] = useState(true);
+	const [isCancelled, setIsCancelled] = useState(false);
+	const [allowVerification, setAllowVerification] = useState(false);
+	const [ownerAddress, setOwnerAddress] = useState<string>();
 
 	const { isLoading, isEnabled, isSignedIn, userData } = useAppSelector(
 		state => state.user,
 	);
+	const router = useRouter();
+	const { slug } = router.query;
 
 	useEffect(() => {
 		dispatch(setShowFooter(false));
@@ -24,14 +37,63 @@ const VerificationRoute = () => {
 		};
 	}, []);
 
-	if (isLoading) {
+	useEffect(() => {
+		setIsProjectLoading(true);
+		setAllowVerification(false);
+		setOwnerAddress(undefined);
+		setIsCancelled(false);
+		client
+			.query({
+				query: FETCH_PROJECT_BY_SLUG,
+				variables: {
+					slug,
+					connectedWalletUserId: Number(userData?.id),
+				},
+				fetchPolicy: 'network-only',
+			})
+			.then((res: { data: { projectBySlug: IProject } }) => {
+				const _project = res.data.projectBySlug;
+				const isOwner = compareAddresses(
+					userData?.walletAddress,
+					_project.adminUser.walletAddress,
+				);
+				setOwnerAddress(_project.adminUser.walletAddress);
+				if (_project.status.name === EProjectStatus.ACTIVE && isOwner) {
+					setAllowVerification(true);
+				} else {
+					setAllowVerification(false);
+				}
+				if (_project.status.name === EProjectStatus.CANCEL && isOwner) {
+					setIsCancelled(true);
+				}
+				setIsProjectLoading(false);
+			})
+			.catch((error: unknown) => {
+				console.log('fetchProjectBySlug error: ', error);
+				captureException(error, {
+					tags: {
+						section: 'verificationFetchProjectBySlug',
+					},
+				});
+				setIsProjectLoading(false);
+			});
+	}, [slug, userData?.id]);
+
+	if (isLoading || isProjectLoading) {
 		return <WrappedSpinner />;
 	} else if (!isEnabled) {
 		return <WalletNotConnected />;
 	} else if (!isSignedIn) {
 		return <UserNotSignedIn />;
 	} else if (!isUserRegistered(userData)) {
 		return <CompleteProfile />;
+	} else if (!allowVerification) {
+		return (
+			<NotAvailableHandler
+				ownerAddress={ownerAddress}
+				isCancelled={isCancelled}
+			/>
+		);
 	}
 
 	return (

src/components/NotAvailableHandler.tsx

@@ -7,6 +7,7 @@ import links from '@/lib/constants/links';
 import { compareAddresses } from '@/lib/helpers';
 import { useAppSelector } from '@/features/hooks';
 import NotAvailable from '@/components/NotAvailable';
+import Routes from '@/lib/constants/Routes';
 
 interface IProps {
 	isCancelled?: boolean;
@@ -23,6 +24,7 @@ const NotAvailableHandler: FC<IProps> = ({
 	const { formatMessage } = useIntl();
 	const router = useRouter();
 	const isEditRoute = router?.route.split('/').slice(-1)[0] === 'edit';
+	const isVerificationRoute = router?.route.indexOf(Routes.Verification) > -1;
 
 	const isOwner = compareAddresses(userData?.walletAddress, ownerAddress);
 
@@ -46,8 +48,10 @@ const NotAvailableHandler: FC<IProps> = ({
 		</>
 	);
 
-	if (isEditRoute && !isOwner && ownerAddress) {
-		description = formatMessage({ id: 'label.not_owner' });
+	if ((isEditRoute || isVerificationRoute) && !isOwner && ownerAddress) {
+		description = formatMessage({
+			id: `label.not_owner_${isEditRoute ? 'edit' : 'verification'}`,
+		});
 	}
 
 	return (

src/components/views/project/ProjectGIVbackToast.tsx

@@ -6,14 +6,15 @@ import {
 	IconChevronRight,
 	IconGIVBack,
 	IconRocketInSpace16,
+	IconVerifiedBadge16,
 	mediaQueries,
 	neutralColors,
 	OutlineButton,
 	P,
 	semanticColors,
 } from '@giveth/ui-design-system';
 import { useIntl } from 'react-intl';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { useWeb3Modal } from '@web3modal/wagmi/react';
 import { Flex } from '@/components/styled-components/Flex';
@@ -25,11 +26,16 @@ import { isSSRMode } from '@/lib/helpers';
 import BoostModal from '@/components/modals/Boost/BoostModal';
 import { useAppSelector } from '@/features/hooks';
 import { formatDonation } from '@/helpers/number';
+import { VerificationModal } from '@/components/modals/VerificationModal';
+import { EProjectStatus } from '@/apollo/types/gqlEnums';
 
 const ProjectGIVbackToast = () => {
+	const [showVerificationModal, setShowVerificationModal] = useState(false);
 	const [showBoost, setShowBoost] = useState(false);
 	const { projectData, isAdmin } = useProjectContext();
 	const verified = projectData?.verified;
+	const isActive = projectData?.status.name === EProjectStatus.ACTIVE;
+	const eligibleForVerification = !verified && isActive && isAdmin;
 	const { givbackFactor } = projectData || {};
 	const isOwnerVerified = verified && isAdmin;
 	const isOwnerNotVerified = !verified && isAdmin;
@@ -164,13 +170,27 @@ const ProjectGIVbackToast = () => {
 						/>
 					</ButtonWrapper>
 				)}
+				{eligibleForVerification && (
+					<ButtonWrapper>
+						<OutlineButton
+							onClick={() => setShowVerificationModal(true)}
+							label='Verify Project'
+							icon={<IconVerifiedBadge16 />}
+						/>
+					</ButtonWrapper>
+				)}
 			</Wrapper>
 			{showBoost && (
 				<BoostModal
 					projectId={projectData?.id!}
 					setShowModal={setShowBoost}
 				/>
 			)}
+			{showVerificationModal && (
+				<VerificationModal
+					onClose={() => setShowVerificationModal(false)}
+				/>
+			)}
 		</>
 	);
 };
@@ -221,7 +241,7 @@ const Wrapper = styled(Flex)`
 	justify-content: space-between;
 	align-items: center;
 	gap: 24px;
-	padding: 16px;
+	padding: 16px 24px;
 	background: #ffffff;
 	border-radius: 16px;
 	margin-top: 12px;

src/context/verification.context.tsx

@@ -13,7 +13,6 @@ import {
 } from '@/apollo/types/types';
 import { client } from '@/apollo/apolloClient';
 import { FETCH_PROJECT_VERIFICATION } from '@/apollo/gql/gqlVerification';
-import { showToastError } from '@/lib/helpers';
 import { findStepByName } from '@/lib/verification';
 import type { Dispatch, SetStateAction } from 'react';
 
@@ -71,7 +70,7 @@ export const VerificationProvider = ({ children }: { children: ReactNode }) => {
 						break;
 
 					default:
-						showToastError(error);
+						console.log('getVerificationData error: ', error);
 						captureException(error, {
 							tags: {
 								section: 'getVerificationData',