Merge pull request #4 from Giveth/add-OP-filters

add onlyVerified and onlyListed to filters

src/components/views/home/ProjectsCount.tsx

@@ -25,10 +25,15 @@ const ProjectsCount = () => {
 	const [fromDate, setFromDate] = useState(firstOfGiveth());
 	const [toDate, setToDate] = useState(firstOfNextMonth());
 	const [includesOptimism, setIncludesOptimism] = useState(false);
+	const [onlyVerified, setOnlyVerified] = useState(false);
+	const [onlyListed, setOnlyListed] = useState(false);
+
 	const { projectsCount, loading } = useProjectsCount(
 		fromDate,
 		toDate,
 		includesOptimism,
+		onlyVerified,
+		onlyListed,
 	);
 
 	const { total, totalPerMonthAndYear } = projectsCount || {};
@@ -85,14 +90,23 @@ const ProjectsCount = () => {
 						direction={'top'}
 					>
 						<TooltipBody>
-							When this option is selected, only projects that are
-							verified and have the receiving address as OP will
-							be displayed. When it's not selected, projects from
-							any network, including those that aren't verified,
-							will be shown.
+							When this option is selected, projects that doesn't
+							have OP as receiving address won't be displayed.
 						</TooltipBody>
 					</IconWithTooltip>
 				</Flex>
+				<br />
+				<CheckBox
+					checked={onlyVerified}
+					onChange={setOnlyVerified}
+					label='Show only verified projects'
+				/>
+				<br />
+				<CheckBox
+					checked={onlyListed}
+					onChange={setOnlyListed}
+					label='Show only listed projects'
+				/>
 			</Col>
 			<Col md={1} />
 			<Col md={2}>

src/gql/gqlProjects.ts

@@ -6,11 +6,15 @@ export const fetchProjectsCount = `
     $fromDate: String
     $toDate: String
     $includesOptimism: Boolean
+    $onlyVerified: Boolean
+    $onlyListed: Boolean
   ) {
     projectsPerDate(
       fromDate: $fromDate
       toDate: $toDate
       includesOptimism: $includesOptimism
+      onlyVerified: $onlyVerified
+      onlyListed: $onlyListed
     ) {
       total
       totalPerMonthAndYear {

src/hooks/useProjectsCount.ts

@@ -8,6 +8,8 @@ const useProjectsCount = (
 	fromDate: Date,
 	toDate: Date,
 	includesOptimism?: boolean,
+	onlyVerified?: boolean,
+	onlyListed?: boolean,
 ) => {
 	const [projectsCount, setProjectsCount] = useState<IResFormat>();
 	const [loading, setLoading] = useState<boolean>(true);
@@ -18,14 +20,16 @@ const useProjectsCount = (
 			fromDate: formatDateToISO(fromDate),
 			toDate: formatDateToISO(toDate),
 			includesOptimism: includesOptimism || false,
+			onlyVerified: onlyVerified || false,
+			onlyListed: onlyListed || false,
 		};
 		backendGQLRequest(fetchProjectsCount, variables)
 			.then((res: IFetchProjectsCount) => {
 				setProjectsCount(res.data.projectsPerDate);
 			})
 			.catch(showToastError)
 			.finally(() => setLoading(false));
-	}, [fromDate, toDate, includesOptimism]);
+	}, [fromDate, toDate, includesOptimism, onlyListed, onlyVerified]);
 
 	return { projectsCount, loading };
 };