diff --git a/src/components/NetworkSelect.tsx b/src/components/NetworkSelect.tsx new file mode 100644 index 0000000..67f4593 --- /dev/null +++ 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) => 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 = ({ + selectedNetwork, + onNetworkChange, +}) => { + return ( + <> + + + + + + + + + + + + + + + + ); +}; + +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 index 627198b..549c208 100644 --- 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(); const [onlyVerified, setOnlyVerified] = useState(false); const { donationsCount, loading } = useDonationsCount( fromDate, toDate, - fromOptimism, + selectedNetworkId, onlyVerified, ); const { total, totalPerMonthAndYear } = donationsCount || {}; + const handleNetworkChange = ( + event: React.ChangeEvent, + ) => { + const value = + event.target.value === '' ? undefined : Number(event.target.value); + setSelectedNetworkId(value); + }; + return ( @@ -61,12 +70,12 @@ const DonationsCount = () => { To:
-
+
{ const [fromDate, setFromDate] = useState(firstOfGiveth()); const [toDate, setToDate] = useState(firstOfNextMonth()); - const [fromOptimism, setFromOptimism] = useState(false); + const [selectedNetworkId, setSelectedNetworkId] = useState(); const { donorsCount, loading } = useDonorsCount( fromDate, toDate, - fromOptimism, + selectedNetworkId, ); + const handleNetworkChange = ( + event: React.ChangeEvent, + ) => { + const value = + event.target.value === '' ? undefined : Number(event.target.value); + setSelectedNetworkId(value); + }; + const { total, totalPerMonthAndYear } = donorsCount || {}; return ( @@ -59,10 +67,9 @@ const DonorsCount = () => { To:
- diff --git a/src/components/views/home/ProjectsCount.tsx b/src/components/views/home/ProjectsCount.tsx index c3a5ea9..b093e8d 100644 --- 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(); 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, + ) => { + const value = + event.target.value === '' ? undefined : Number(event.target.value); + setSelectedNetworkId(value); + }; + return ( @@ -65,19 +74,16 @@ const ProjectsCount = () => {
- } direction={'top'} > - 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. diff --git a/src/components/views/home/TotalDonations.tsx b/src/components/views/home/TotalDonations.tsx index 9f5fc72..16d4b26 100644 --- 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(); 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, + ) => { + const value = + event.target.value === '' ? undefined : Number(event.target.value); + setSelectedNetworkId(value); + }; + return ( @@ -79,12 +88,12 @@ const TotalDonations = () => { To:
-
+
{ const [categoryDonations, setCategoryDonations] = @@ -22,7 +22,7 @@ const useCategoryDonations = ( const variables = { fromDate: formatDateToISO(fromDate), toDate: formatDateToISO(toDate), - fromOptimismOnly: fromOptimism || false, + networkId: selectedNetworkId, onlyVerified, }; backendGQLRequest(fetchTotalDonationsPerCategory, variables) @@ -32,7 +32,7 @@ const useCategoryDonations = ( }) .catch(showToastError) .finally(() => setLoading(false)); - }, [fromDate, toDate, fromOptimism, onlyVerified]); + }, [fromDate, toDate, selectedNetworkId, onlyVerified]); return { categoryDonations, loading }; }; diff --git a/src/hooks/useDonationsCount.ts b/src/hooks/useDonationsCount.ts index 9bfa5dc..42ec4c3 100644 --- a/src/hooks/useDonationsCount.ts +++ b/src/hooks/useDonationsCount.ts @@ -7,7 +7,7 @@ import { fetchDonationsCount } from '../gql/gqlDonations'; const useDonationsCount = ( fromDate: Date, toDate: Date, - fromOptimism?: boolean, + selectedNetworkId?: number, onlyVerified?: boolean, ) => { const [donationsCount, setDonationsCount] = useState(); @@ -18,7 +18,7 @@ const useDonationsCount = ( const variables = { fromDate: formatDateToISO(fromDate), toDate: formatDateToISO(toDate), - fromOptimismOnly: fromOptimism || false, + networkId: selectedNetworkId, onlyVerified, }; backendGQLRequest(fetchDonationsCount, variables) @@ -27,7 +27,7 @@ const useDonationsCount = ( }) .catch(showToastError) .finally(() => setLoading(false)); - }, [fromDate, toDate, fromOptimism, onlyVerified]); + }, [fromDate, toDate, selectedNetworkId, onlyVerified]); return { donationsCount, loading }; }; diff --git a/src/hooks/useDonorsCount.ts b/src/hooks/useDonorsCount.ts index 495e4ff..108cd7d 100644 --- a/src/hooks/useDonorsCount.ts +++ b/src/hooks/useDonorsCount.ts @@ -7,7 +7,7 @@ import { fetchDonorsCount } from '../gql/gqlDonors'; const useDonorsCount = ( fromDate: Date, toDate: Date, - fromOptimism?: boolean, + selectedNetworkId?: number, ) => { const [donorsCount, setDonorsCount] = useState(); const [loading, setLoading] = useState(true); @@ -17,7 +17,7 @@ const useDonorsCount = ( const variables = { fromDate: formatDateToISO(fromDate), toDate: formatDateToISO(toDate), - fromOptimismOnly: fromOptimism || false, + networkId: selectedNetworkId, }; backendGQLRequest(fetchDonorsCount, variables) .then((res: IFetchDonorsCount) => { @@ -25,7 +25,7 @@ const useDonorsCount = ( }) .catch(showToastError) .finally(() => setLoading(false)); - }, [fromDate, toDate, fromOptimism]); + }, [fromDate, toDate, selectedNetworkId]); return { donorsCount, loading }; }; diff --git a/src/hooks/useProjectsCount.ts b/src/hooks/useProjectsCount.ts index 76e1fbc..33cd42b 100644 --- a/src/hooks/useProjectsCount.ts +++ b/src/hooks/useProjectsCount.ts @@ -7,7 +7,7 @@ import { formatDateToISO, showToastError } from '../lib/helpers'; const useProjectsCount = ( fromDate: Date, toDate: Date, - includesOptimism?: boolean, + selectedNetworkId?: number, onlyVerified?: boolean, onlyListed?: boolean, ) => { @@ -19,7 +19,7 @@ const useProjectsCount = ( const variables = { fromDate: formatDateToISO(fromDate), toDate: formatDateToISO(toDate), - includesOptimism: includesOptimism || false, + networkId: selectedNetworkId, onlyVerified: onlyVerified || false, onlyListed: onlyListed || false, }; @@ -29,7 +29,7 @@ const useProjectsCount = ( }) .catch(showToastError) .finally(() => setLoading(false)); - }, [fromDate, toDate, includesOptimism, onlyListed, onlyVerified]); + }, [fromDate, toDate, selectedNetworkId, onlyListed, onlyVerified]); return { projectsCount, loading }; }; diff --git a/src/hooks/useTotalDonations.ts b/src/hooks/useTotalDonations.ts index 6bc2877..e0f17f1 100644 --- a/src/hooks/useTotalDonations.ts +++ b/src/hooks/useTotalDonations.ts @@ -7,7 +7,7 @@ import { fetchTotalDonationsUSD } from '../gql/gqlDonations'; const useTotalDonations = ( fromDate: Date, toDate: Date, - fromOptimism?: boolean, + selectedNetworkId?: number, onlyVerified?: boolean, ) => { const [totalDonations, setTotalDonations] = useState(); @@ -18,7 +18,7 @@ const useTotalDonations = ( const variables = { fromDate: formatDateToISO(fromDate), toDate: formatDateToISO(toDate), - fromOptimismOnly: fromOptimism || false, + networkId: selectedNetworkId, onlyVerified, }; backendGQLRequest(fetchTotalDonationsUSD, variables) @@ -28,7 +28,7 @@ const useTotalDonations = ( }) .catch(showToastError) .finally(() => setLoading(false)); - }, [fromDate, toDate, fromOptimism, onlyVerified]); + }, [fromDate, toDate, selectedNetworkId, onlyVerified]); return { totalDonations, loading }; }; diff --git a/src/lib/constants.ts b/src/lib/constants.ts index b2ba9df..5d057d6 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -10,3 +10,27 @@ export const zIndex = { TOOLTIP: 1080, NAVBAR: 1100, }; + +export const NETWORK_IDS = { + MAIN_NET: 1, + ROPSTEN: 3, + GOERLI: 5, + XDAI: 100, + POLYGON: 137, + OPTIMISTIC: 10, + OPTIMISM_SEPOLIA: 11155420, + BSC: 56, + CELO: 42220, + CELO_ALFAJORES: 44787, + ETC: 61, + MORDOR_ETC_TESTNET: 63, + ARBITRUM_MAINNET: 42161, + ARBITRUM_SEPOLIA: 421614, + BASE_MAINNET: 8453, + BASE_SEPOLIA: 84532, + ZKEVM_MAINNET: 1101, + ZKEVM_CARDONA: 2442, + SOLANA_MAINNET: 101, + SOLANA_TESTNET: 102, + SOLANA_DEVNET: 103, +};