Merge pull request #12 from Giveth/9-add-dropdown-menu

add dropdown menu
Giveth · Jul 10, 2024 · a548441 · a548441
2 parents fa87149 + a6395ae
commit a548441
Show file tree

Hide file tree

Showing 14 changed files with 248 additions and 61 deletions.
diff --git a/src/components/NetworkSelect.tsx b/src/components/NetworkSelect.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+import styled from 'styled-components';
+import { NETWORK_IDS } from '../lib/constants';
+
+export const isDevelopment = process.env.NEXT_PUBLIC_ENV === 'development';
+
+interface NetworkSelectProps {
+	selectedNetwork?: number;
+	onNetworkChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+}
+
+function getCorrectNetworkIdBasedOnEnv(networkId: number) {
+	switch (networkId) {
+		case NETWORK_IDS.ARBITRUM_MAINNET:
+			return isDevelopment
+				? NETWORK_IDS.ARBITRUM_SEPOLIA
+				: NETWORK_IDS.ARBITRUM_MAINNET;
+		case NETWORK_IDS.OPTIMISTIC:
+			return isDevelopment
+				? NETWORK_IDS.OPTIMISM_SEPOLIA
+				: NETWORK_IDS.OPTIMISTIC;
+		case NETWORK_IDS.BASE_MAINNET:
+			return isDevelopment
+				? NETWORK_IDS.BASE_SEPOLIA
+				: NETWORK_IDS.BASE_MAINNET;
+		case NETWORK_IDS.ZKEVM_MAINNET:
+			return isDevelopment
+				? NETWORK_IDS.ZKEVM_CARDONA
+				: NETWORK_IDS.ZKEVM_MAINNET;
+		case NETWORK_IDS.CELO:
+			return isDevelopment
+				? NETWORK_IDS.CELO_ALFAJORES
+				: NETWORK_IDS.CELO;
+		case NETWORK_IDS.SOLANA_MAINNET:
+			return isDevelopment
+				? NETWORK_IDS.SOLANA_TESTNET
+				: NETWORK_IDS.SOLANA_MAINNET;
+		case NETWORK_IDS.ETC:
+			return isDevelopment
+				? NETWORK_IDS.MORDOR_ETC_TESTNET
+				: NETWORK_IDS.ETC;
+		default:
+			return networkId;
+	}
+}
+
+const NetworkSelect: React.FC<NetworkSelectProps> = ({
+	selectedNetwork,
+	onNetworkChange,
+}) => {
+	return (
+		<>
+			<label>Select Network: </label>
+			<SelectStyled
+				id='network-select'
+				value={selectedNetwork !== undefined ? selectedNetwork : ''}
+				onChange={onNetworkChange}
+			>
+				<option value=''>All Networks</option>
+				<option
+					value={getCorrectNetworkIdBasedOnEnv(NETWORK_IDS.MAIN_NET)}
+				>
+					Mainnet
+				</option>
+				<option value={getCorrectNetworkIdBasedOnEnv(NETWORK_IDS.XDAI)}>
+					Gnosis Chain
+				</option>
+				<option
+					value={getCorrectNetworkIdBasedOnEnv(
+						NETWORK_IDS.OPTIMISTIC,
+					)}
+				>
+					Optimism
+				</option>
+				<option
+					value={getCorrectNetworkIdBasedOnEnv(NETWORK_IDS.POLYGON)}
+				>
+					Polygon
+				</option>
+				<option
+					value={getCorrectNetworkIdBasedOnEnv(
+						NETWORK_IDS.ZKEVM_MAINNET,
+					)}
+				>
+					Polygon zkEVM
+				</option>
+				<option value={getCorrectNetworkIdBasedOnEnv(NETWORK_IDS.ETC)}>
+					Ethereum Classic
+				</option>
+				<option
+					value={getCorrectNetworkIdBasedOnEnv(
+						NETWORK_IDS.SOLANA_MAINNET,
+					)}
+				>
+					Solana
+				</option>
+				<option
+					value={getCorrectNetworkIdBasedOnEnv(
+						NETWORK_IDS.ARBITRUM_MAINNET,
+					)}
+				>
+					Arbitrum
+				</option>
+				<option
+					value={getCorrectNetworkIdBasedOnEnv(
+						NETWORK_IDS.BASE_MAINNET,
+					)}
+				>
+					Base
+				</option>
+				<option value={getCorrectNetworkIdBasedOnEnv(NETWORK_IDS.CELO)}>
+					Celo
+				</option>
+			</SelectStyled>
+		</>
+	);
+};
+
+const SelectStyled = styled.select`
+	padding: 10px;
+	font-size: 16px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	background-color: #fff;
+	color: #333;
+	margin-right: 10px;
+
+	&:focus {
+		border-color: #007bff;
+		box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+		outline: none;
+	}
+`;
+
+export default NetworkSelect;
diff --git a/src/components/views/home/DonationsCount.tsx b/src/components/views/home/DonationsCount.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import {
 	H2,
 	H4,
@@ -21,21 +21,30 @@ import useDonationsCount from '../../../hooks/useDonationsCount';
 import DonationsChart from './charts/DonationsChart';
 import CheckBox from '../../CheckBox';
 import DatePicker from '../../DatePicker';
+import NetworkSelect from '../../NetworkSelect';
 
 const DonationsCount = () => {
 	const [fromDate, setFromDate] = useState(firstOfGiveth());
 	const [toDate, setToDate] = useState(firstOfNextMonth());
-	const [fromOptimism, setFromOptimism] = useState(false);
+	const [selectedNetworkId, setSelectedNetworkId] = useState<number>();
 	const [onlyVerified, setOnlyVerified] = useState(false);
 	const { donationsCount, loading } = useDonationsCount(
 		fromDate,
 		toDate,
-		fromOptimism,
+		selectedNetworkId,
 		onlyVerified,
 	);
 
 	const { total, totalPerMonthAndYear } = donationsCount || {};
 
+	const handleNetworkChange = (
+		event: React.ChangeEvent<HTMLSelectElement>,
+	) => {
+		const value =
+			event.target.value === '' ? undefined : Number(event.target.value);
+		setSelectedNetworkId(value);
+	};
+
 	return (
 		<RowStyled>
 			<Col md={4}>
@@ -61,12 +70,12 @@ const DonationsCount = () => {
 					To: <DatePicker date={toDate} setDate={setToDate} />
 				</div>
 				<br />
-				<CheckBox
-					checked={fromOptimism}
-					onChange={setFromOptimism}
-					label='From Optimism only'
+				<NetworkSelect
+					selectedNetwork={selectedNetworkId}
+					onNetworkChange={handleNetworkChange}
 				/>
 				<br />
+				<br />
 				<CheckBox
 					checked={onlyVerified}
 					onChange={setOnlyVerified}

diff --git a/src/components/views/home/DonorsCount.tsx b/src/components/views/home/DonorsCount.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import {
 	H2,
 	H4,
@@ -19,19 +19,27 @@ import {
 import { IconWithTooltip } from '../../IconWithTooltip';
 import { FlexCenter } from '../../styled-components/flex';
 import DonorsChart from './charts/DonorsChart';
-import CheckBox from '../../CheckBox';
 import DatePicker from '../../DatePicker';
+import NetworkSelect from '../../NetworkSelect';
 
 const DonorsCount = () => {
 	const [fromDate, setFromDate] = useState(firstOfGiveth());
 	const [toDate, setToDate] = useState(firstOfNextMonth());
-	const [fromOptimism, setFromOptimism] = useState(false);
+	const [selectedNetworkId, setSelectedNetworkId] = useState<number>();
 	const { donorsCount, loading } = useDonorsCount(
 		fromDate,
 		toDate,
-		fromOptimism,
+		selectedNetworkId,
 	);
 
+	const handleNetworkChange = (
+		event: React.ChangeEvent<HTMLSelectElement>,
+	) => {
+		const value =
+			event.target.value === '' ? undefined : Number(event.target.value);
+		setSelectedNetworkId(value);
+	};
+
 	const { total, totalPerMonthAndYear } = donorsCount || {};
 
 	return (
@@ -59,10 +67,9 @@ const DonorsCount = () => {
 					To: <DatePicker date={toDate} setDate={setToDate} />
 				</div>
 				<br />
-				<CheckBox
-					checked={fromOptimism}
-					onChange={setFromOptimism}
-					label='From Optimism only'
+				<NetworkSelect
+					selectedNetwork={selectedNetworkId}
+					onNetworkChange={handleNetworkChange}
 				/>
 			</Col>
 			<Col md={1} />

diff --git a/src/components/views/home/ProjectsCount.tsx b/src/components/views/home/ProjectsCount.tsx
@@ -7,7 +7,7 @@ import {
 	Subline,
 } from '@giveth/ui-design-system';
 import styled from 'styled-components';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Col, Row } from '../../styled-components/grid';
 import useProjectsCount from '../../../hooks/useProjectsCount';
 import Spinner from '../../Spinner';
@@ -21,24 +21,33 @@ import { Flex, FlexCenter } from '../../styled-components/flex';
 import ProjectsChart from './charts/ProjectsChart';
 import CheckBox from '../../CheckBox';
 import DatePicker from '../../DatePicker';
+import NetworkSelect from '../../NetworkSelect';
 
 const ProjectsCount = () => {
 	const [fromDate, setFromDate] = useState(firstOfGiveth());
 	const [toDate, setToDate] = useState(firstOfNextMonth());
-	const [includesOptimism, setIncludesOptimism] = useState(false);
+	const [selectedNetworkId, setSelectedNetworkId] = useState<number>();
 	const [onlyVerified, setOnlyVerified] = useState(false);
 	const [onlyListed, setOnlyListed] = useState(false);
 
 	const { projectsCount, loading } = useProjectsCount(
 		fromDate,
 		toDate,
-		includesOptimism,
+		selectedNetworkId,
 		onlyVerified,
 		onlyListed,
 	);
 
 	const { total, totalPerMonthAndYear } = projectsCount || {};
 
+	const handleNetworkChange = (
+		event: React.ChangeEvent<HTMLSelectElement>,
+	) => {
+		const value =
+			event.target.value === '' ? undefined : Number(event.target.value);
+		setSelectedNetworkId(value);
+	};
+
 	return (
 		<RowStyled>
 			<Col md={4}>
@@ -65,19 +74,16 @@ const ProjectsCount = () => {
 				</div>
 				<br />
 				<Flex alignItems='center' gap='10px'>
-					<CheckBox
-						checked={includesOptimism}
-						onChange={setIncludesOptimism}
-						label='Includes Optimism receiving address'
+					<NetworkSelect
+						selectedNetwork={selectedNetworkId}
+						onNetworkChange={handleNetworkChange}
 					/>
 					<IconWithTooltip
 						icon={<IconHelpFilled16 />}
 						direction={'top'}
 					>
 						<TooltipBody>
-							When this option is selected, projects that don't
-							have an Optimism receiving address are omitted from
-							the query.
+							Filter projects by the selected network.
 						</TooltipBody>
 					</IconWithTooltip>
 				</Flex>

diff --git a/src/components/views/home/TotalDonations.tsx b/src/components/views/home/TotalDonations.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import {
 	H2,
 	H4,
@@ -23,20 +23,21 @@ import { FlexCenter } from '../../styled-components/flex';
 import TotalDonationsChart from './charts/TotalDonationsChart';
 import CheckBox from '../../CheckBox';
 import DatePicker from '../../DatePicker';
+import NetworkSelect from '../../NetworkSelect';
 
 const TotalDonations = () => {
 	const [fromDate, setFromDate] = useState(firstOfGiveth());
 	const [toDate, setToDate] = useState(firstOfNextMonth());
-	const [fromOptimism, setFromOptimism] = useState(false);
+	const [selectedNetworkId, setSelectedNetworkId] = useState<number>();
 	const [onlyVerified, setOnlyVerified] = useState(false);
 	const { totalDonations, loading: loadingTotal } = useTotalDonations(
 		fromDate,
 		toDate,
-		fromOptimism,
+		selectedNetworkId,
 		onlyVerified,
 	);
 	const { categoryDonations, loading: loadingCategories } =
-		useCategoryDonations(fromDate, toDate, fromOptimism, onlyVerified);
+		useCategoryDonations(fromDate, toDate, selectedNetworkId, onlyVerified);
 
 	const totalCategoryDonations = categoryDonations?.reduce(
 		(i, j) => i + j.totalUsd,
@@ -54,6 +55,14 @@ const TotalDonations = () => {
 
 	const { total, totalPerMonthAndYear } = totalDonations || {};
 
+	const handleNetworkChange = (
+		event: React.ChangeEvent<HTMLSelectElement>,
+	) => {
+		const value =
+			event.target.value === '' ? undefined : Number(event.target.value);
+		setSelectedNetworkId(value);
+	};
+
 	return (
 		<RowStyled>
 			<Col md={4}>
@@ -79,12 +88,12 @@ const TotalDonations = () => {
 					To: <DatePicker date={toDate} setDate={setToDate} />
 				</div>
 				<br />
-				<CheckBox
-					checked={fromOptimism}
-					onChange={setFromOptimism}
-					label='From Optimism only'
+				<NetworkSelect
+					selectedNetwork={selectedNetworkId}
+					onNetworkChange={handleNetworkChange}
 				/>
 				<br />
+				<br />
 				<CheckBox
 					checked={onlyVerified}
 					onChange={setOnlyVerified}