import { useState, useEffect } from "react"; import { Box, Typography, SvgIcon, useTheme } from "@mui/material"; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormHelperText from '@mui/material/FormHelperText'; import FormControl from '@mui/material/FormControl'; import Select from '@mui/material/Select'; import { isNetworkAvailable, getNetworkName } from "../../constants"; import EthIcon from "../../assets/tokens/ETH.svg?react"; import GhostStyledIcon from "../Icon/GhostIcon"; import { useSwitchChain } from 'wagmi'; import toast from "react-hot-toast"; function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId }) { const theme = useTheme(); const { chains, switchChain } = useSwitchChain(); const [networkId, setNetworkId] = useState(chainId); useEffect(() => { if (chainId !== networkId) setNetworkId(chainId); }, [chainId]) const handleChange = (event) => { setNetworkId(event.target.value); switchChain({ chainId: event.target.value }); const chainName = chains.find((chain) => chain.id === event.target.value).name; toast.dismiss(wrongNetworkToastId); const toastId = toast.loading(`Trying to connect to ${chainName} network... Wait please`, { position: 'bottom-right' }); setWrongNetworkToastId(toastId); } return( <FormControl sx={{ width: "155px" }}> <Select labelId="network-select-helper-label" id="network-select-helper" value={networkId} onChange={handleChange} sx={{ boxShadow: 'none', '.MuiOutlinedInput-notchedOutline': { borderColor: `${theme.colors.backgroundColor} !important`, }, '.Mui-focused': { border: `1px solid ${theme.colors.backgroundColor} !important`, } }} > {chains.map(chain => { return ( <MenuItem key={chain.name} value={chain.id}> <Box gap="10px" display="flex" flexDirection="row" alignItems="center"> <SvgIcon component={EthIcon} viewBox="0 0 32 32" /> <Typography>{chain.name}</Typography> </Box> </MenuItem> ) })} </Select> </FormControl> ) } export default SelectNetwork;