From 58d64f2cface5f402f3d99415e3a34aaa3f88980 Mon Sep 17 00:00:00 2001 From: Cherik Date: Tue, 13 Jun 2023 11:00:18 +0330 Subject: [PATCH 001/175] init drop down --- src/components/NetworkSelector.tsx | 187 +++++++++++++++++++++++------ 1 file changed, 153 insertions(+), 34 deletions(-) diff --git a/src/components/NetworkSelector.tsx b/src/components/NetworkSelector.tsx index 07c3d58ee1..431823620d 100644 --- a/src/components/NetworkSelector.tsx +++ b/src/components/NetworkSelector.tsx @@ -1,26 +1,121 @@ -import { useState } from 'react'; +import { ComponentType, ReactElement, useState } from 'react'; import styled from 'styled-components'; -import { B, brandColors, mediaQueries } from '@giveth/ui-design-system'; +import { + B, + IconChevronDown24, + IconChevronUp24, + IconFlash16, + IconNetwork24, + IconRocketInSpace16, + P, + brandColors, + neutralColors, +} from '@giveth/ui-design-system'; import { useWeb3React } from '@web3-react/core'; +import Select, { + ControlProps, + DropdownIndicatorProps, + OptionProps, + StylesConfig, + components, +} from 'react-select'; import { switchNetwork } from '@/lib/wallet'; -import { givEconomySupportedNetworks } from '@/lib/constants/constants'; import { Flex } from './styled-components/Flex'; -import { IconGnosisChain } from './Icons/GnosisChain'; -import { IconEthereum } from './Icons/Eth'; import { ChangeNetworkModal } from './modals/ChangeNetwork'; import config from '../configuration'; - -interface NetworkSelectorProps { - disabled?: boolean; -} - +import { EProjectsSortBy } from '@/apollo/types/gqlEnums'; interface ISelector { isSelected: boolean; } +export interface ISelectedSort { + icon: ReactElement; + label: string; + value: EProjectsSortBy; +} + +const DropdownIndicator: ComponentType = props => { + return props.selectProps.menuIsOpen ? ( + + ) : ( + + ); +}; + +const Option: ComponentType> = props => { + const { data } = props; + const { label } = data; + const Icon = data.icon; + + return ( + + + + {Icon} +

{label}

+
+
+
+ ); +}; + +const Control: ComponentType> = ({ + children, + ...props +}) => { + return ( + + {props.selectProps.value ? ( + <> + {(props.selectProps.value as ISelectedSort).icon} + {children} + + ) : ( + children + )} + + ); +}; + +const selectStyles: StylesConfig = { + container: styles => ({ + ...styles, + zIndex: 3, + border: 'none', + borderRadius: '8px', + '&:hover': { + borderColor: 'transparent', + }, + }), + control: styles => ({ + ...styles, + padding: '12px 16px', + border: 'none', + boxShadow: 'none', + }), + indicatorSeparator: styles => ({ + ...styles, + display: 'none', + }), +}; + +const sortByOptions = [ + { + label: 'label.givpower', + value: EProjectsSortBy.INSTANT_BOOSTING, + icon: , + }, + { + label: 'label.rank', + value: EProjectsSortBy.GIVPOWER, + icon: , + }, +]; + export const NetworkSelector = () => { const [showChangeNetworkModal, setShowChangeNetworkModal] = useState(false); + const [value, setValue] = useState(sortByOptions[0]); const [targetNetwork, setTargetNetwork] = useState( config.MAINNET_NETWORK_NUMBER, ); @@ -41,10 +136,30 @@ export const NetworkSelector = () => { return ( <> {chainId ? ( - - + + <IconNetwork24 /> + <B>Network</B> + +