73 lines
2.3 KiB
JavaScript
73 lines
2.3 KiB
JavaScript
import { Box, Button, SvgIcon, useMediaQuery, useTheme } from "@mui/material";
|
|
import MenuIcon from "../../assets/icons/hamburger.svg?react";
|
|
import Wallet from "./Wallet"
|
|
import SelectNetwork from "./SelectNetwork";
|
|
import GhostChainSelect from "./GhostChainSelect";
|
|
|
|
const PREFIX = "TopBar";
|
|
|
|
const classes = {
|
|
appBar: `${PREFIX}-appBar`,
|
|
menuButton: `${PREFIX}-menuButton`,
|
|
pageTitle: `${PREFIX}-pageTitle`,
|
|
};
|
|
|
|
function TopBar({
|
|
chainId,
|
|
chainExists,
|
|
address,
|
|
wrongNetworkToastId,
|
|
connect,
|
|
status,
|
|
handleDrawerToggle,
|
|
setWrongNetworkToastId
|
|
}) {
|
|
const themeColor = useTheme();
|
|
const desktop = useMediaQuery(themeColor.breakpoints.up(1048));
|
|
const small = useMediaQuery(themeColor.breakpoints.down(400));
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
flexDirection="row"
|
|
justifyContent="flex-end"
|
|
paddingTop="21px"
|
|
marginRight={desktop ? "33px" : "0px"}
|
|
>
|
|
<Box display="flex" alignItems="center">
|
|
<Box
|
|
display="flex"
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
width={small ? "calc(100vw - 78px)" : "500px"}
|
|
height="40px"
|
|
>
|
|
<GhostChainSelect />
|
|
<SelectNetwork
|
|
wrongNetworkToastId={wrongNetworkToastId}
|
|
setWrongNetworkToastId={setWrongNetworkToastId}
|
|
chainId={chainId}
|
|
small={small}
|
|
status={status}
|
|
/>
|
|
<Wallet address={address} connect={connect} chainId={chainId} />
|
|
</Box>
|
|
{!desktop && (
|
|
<Button
|
|
id="hamburger"
|
|
aria-label="open drawer"
|
|
size="large"
|
|
variant="text"
|
|
color="secondary"
|
|
onClick={handleDrawerToggle}
|
|
className={classes.menuButton}
|
|
>
|
|
<SvgIcon component={MenuIcon} />
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default TopBar;
|