1  import { ChevronDownIcon } from '@heroicons/react/outline';
 2  import {
 3    Box,
 4    FormControl,
 5    MenuItem,
 6    Select,
 7    SelectChangeEvent,
 8    SvgIcon,
 9    Typography,
10  } from '@mui/material';
11  import { MarketLogo } from 'src/components/MarketSwitcher';
12  
13  import { SupportedNetworkWithChainId } from './common';
14  
15  interface NetworkSelectorProps {
16    networks: SupportedNetworkWithChainId[];
17    selectedNetwork: number;
18    setSelectedNetwork: (value: number) => void;
19  }
20  
21  export const NetworkSelector = ({
22    networks,
23    selectedNetwork,
24    setSelectedNetwork,
25  }: NetworkSelectorProps) => {
26    const handleChange = (event: SelectChangeEvent<string>) => {
27      setSelectedNetwork(Number(event.target.value));
28    };
29    return (
30      <FormControl sx={{ minWidth: 'unset', width: 'unset' }}>
31        <Select
32          native={false}
33          value={String(selectedNetwork)}
34          onChange={handleChange}
35          IconComponent={(props) => (
36            <SvgIcon sx={{ fontSize: '14px' }} {...props}>
37              <ChevronDownIcon />
38            </SvgIcon>
39          )}
40          sx={{
41            '&.MuiInputBase-root': {
42              border: 0,
43              '.MuiSelect-select': {
44                display: 'flex',
45                backgroundColor: 'transparent',
46                border: 0,
47              },
48            },
49            '& .MuiOutlinedInput-notchedOutline': {
50              border: 'none',
51            },
52          }}
53        >
54          {networks.map((network) => (
55            <MenuItem value={network.chainId} key={`${network.name}`}>
56              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
57                <MarketLogo
58                  size={16}
59                  logo={network.networkLogoPath}
60                  sx={{
61                    mr: 1,
62                  }}
63                />
64                <Typography variant="subheader2" color="#4D6EEE">
65                  {network.displayName || network.name}
66                </Typography>
67              </Box>
68            </MenuItem>
69          ))}
70        </Select>
71      </FormControl>
72    );
73  };