73 lines
2.6 KiB
JavaScript
73 lines
2.6 KiB
JavaScript
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;
|